/* Makale detayı (kaynaklar/page) — tasarım: isInsight bloğu */

#page-article { position: relative; padding-top: 150px; color: #000000; }
#page-article .crumb-area { padding: 0 7.002%; }
#page-article .crumb { font-weight: 700; font-size: 12px; line-height: 12px; white-space: nowrap; color: #151515; }
#page-article .crumb a:hover { opacity: .55; }

#page-article .wrap { max-width: 1106px; margin: 0 auto; padding: 0 7.002%; box-sizing: border-box; }
#page-article h1 { margin: 48px 0 0; text-align: center; font-weight: 500; font-size: clamp(32px, 2.43vw, 42px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: pretty; }

/* ---------- Yazar satırı ---------- */
#page-article .info { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#page-article .author { display: flex; align-items: center; gap: 11px; }
#page-article .face { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #151515; display: flex; align-items: center; justify-content: center; font-family: Gilroy, 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 13px; line-height: 13px; letter-spacing: 0.02em; color: #ffffff; }
#page-article .face span { position: absolute; inset: 0; background-size: cover; background-position: center; }
#page-article .author .name { font-family: Gilroy, 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: -0.01em; color: #151515; }
#page-article .links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 44px); font-family: Gilroy, 'Helvetica Now Display', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 14px; letter-spacing: -0.01em; color: rgba(21,21,21,0.6); }
#page-article .links a { color: #151515; white-space: nowrap; }
#page-article .links a:hover { opacity: .55; }

/* ---------- Kapak ---------- */
#page-article .cover { margin-top: 30px; position: relative; width: 100%; aspect-ratio: 1106 / 660; border-radius: 4px; background: #151515; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#page-article .cover .img { display: block; width: min(320px, 58%); aspect-ratio: 1 / 1; background-size: contain; background-position: center; background-repeat: no-repeat; }
#page-article .cover video { display: block; width: min(320px, 58%); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

/* ---------- AI özet şeridi ---------- */
#page-article .ai { margin-top: 14px; width: 100%; border-radius: 4px; background: #151515; padding: 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
#page-article .ai .l { display: flex; align-items: center; gap: 12px; }
#page-article .ai svg { width: 25.5px; height: 25.5px; flex-shrink: 0; animation: pkSpin 14s linear infinite; }
#page-article .ai .l span { font-weight: 400; font-size: 14px; line-height: 14px; color: #ffffff; }
#page-article .ai a { height: 57.6px; border-radius: 50px; box-shadow: inset 0 0 0 1px #ffffff; padding: 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; color: #ffffff; transition: background-color .45s cubic-bezier(.16,1,.3,1), color .45s cubic-bezier(.16,1,.3,1); }
#page-article .ai a:hover { background-color: #ffffff; color: #151515; }
#page-article .ai .icon { width: 25.6px; height: 25.6px; background: url(../../img/article/chatgpt-icon.webp) center / cover no-repeat; border-radius: 50%; flex-shrink: 0; filter: brightness(0) invert(1); transition: filter .3s ease; }
/* Logo koyu butonda beyaz, hover'da (beyaz zemin) siyah. */
#page-article .ai a:hover .icon { filter: none; }
#page-article .ai .t { font-weight: 400; font-size: 17px; line-height: 20px; }

/* ---------- Gövde ---------- */
#page-article .body-area { position: relative; margin-top: 96px; display: grid; grid-template-columns: minmax(0, 145px) minmax(0, 1fr) minmax(0, 56px); gap: clamp(16px, 1.8vw, 32px); }
#page-article article { max-width: 584px; }
#page-article .intro { display: flex; flex-direction: column; gap: 22px; font-weight: 400; font-size: 16px; line-height: 22px; text-wrap: pretty; }
#page-article .intro p { margin: 0; }
#page-article .sections { margin-top: 76px; display: flex; flex-direction: column; gap: 76px; }
#page-article .sec .no { margin-bottom: 16px; font-weight: 700; font-size: 12px; line-height: 12px; }
#page-article .sec h2 { margin: 0 0 20px; font-weight: 500; font-size: clamp(28px, 2.43vw, 42px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: pretty; }
#page-article .txt { display: flex; flex-direction: column; gap: 18px; }
#page-article .txt p { margin: 0; font-weight: 400; font-size: 16px; line-height: 22px; text-wrap: pretty; }
#page-article .txt ul, #page-article .txt ol { margin: 0; padding-left: 20px; font-size: 16px; line-height: 22px; }
#page-article .txt a, #page-article .intro a { text-decoration: underline; text-underline-offset: 2px; }
#page-article .sec > img { display: block; margin-top: 32px; width: 100%; height: auto; border-radius: 4px; }
#page-article .phone { position: relative; margin-top: 32px; width: 100%; aspect-ratio: 1620 / 1040; background: #000000; overflow: hidden; }
#page-article .phone .screen { position: absolute; left: 50%; top: 7.7%; width: 32%; aspect-ratio: 764 / 1696; transform: translateX(-50%); border-radius: 9.5% 9.5% 0 0 / 4.3% 4.3% 0 0; overflow: hidden; }
#page-article .phone video { position: absolute; left: 0; top: 0; width: 103.2%; height: auto; display: block; }

#page-article .summary { margin-top: 96px; }
#page-article .summary .line { width: 60px; height: 1px; background: #151515; }
#page-article .summary h2 { margin: 44px 0 20px; font-weight: 500; font-size: clamp(24px, 1.62vw, 28px); line-height: 1.2; letter-spacing: -0.02em; color: #151515; }

#page-article .glossary { margin-top: 88px; }
#page-article .glossary h2 { margin: 0 0 24px; font-weight: 500; font-size: clamp(24px, 1.62vw, 28px); line-height: 1.2; letter-spacing: -0.02em; color: #151515; }
#page-article .glossary .items { display: flex; flex-direction: column; gap: 20px; }
#page-article .glossary .t { font-weight: 700; font-size: 16px; line-height: 22px; color: #151515; }
#page-article .glossary .d { font-weight: 400; font-size: 16px; line-height: 22px; color: rgba(21,21,21,0.72); }

#page-article .podcast { margin-top: 72px; }
#page-article .podcast .label { font-weight: 700; font-size: 12px; line-height: 12px; color: rgba(0,0,0,0.55); }
#page-article .podcast iframe { display: block; margin-top: 18px; width: 100%; height: 152px; border: 0; border-radius: 12px; }

#page-article .nav { margin-top: 88px; padding-top: 32px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.12); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; }
#page-article .nav .r { text-align: right; }
#page-article .nav a { display: flex; flex-direction: column; gap: 12px; color: #151515; transition: opacity .3s ease; }
#page-article .nav .r a { align-items: flex-end; }
#page-article .nav a:hover { opacity: .55; }
#page-article .nav .s { font-weight: 700; font-size: 12px; line-height: 12px; color: rgba(0,0,0,0.55); }
#page-article .nav .t { font-weight: 500; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.2; text-wrap: pretty; }
#page-article .end { padding-bottom: 200px; }

/* Çubuk makale sonundaki önceki/sonraki bölümüne gelmeden durur (footer'a kaymasın): .end (200) + nav (~180). */
#page-article .rail-col { padding-bottom: 380px; }
#page-article .rail { position: sticky; top: 132px; width: 56px; height: 90px; border-radius: 50px; box-shadow: inset 0 0 0 1px #151515; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
#page-article .rail a { position: relative; display: flex; align-items: center; justify-content: center; }
#page-article .rail a:hover { opacity: .5; }
#page-article .rail a[data-tip]::after { content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); border-radius: 8px; background: #151515; padding: 8px 12px; white-space: nowrap; font-weight: 500; font-size: 13px; line-height: 13px; color: #ffffff; pointer-events: none; }

/* ---------- Responsive (helmet: data-rsp="art") ---------- */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
    #page-article .body-area { grid-template-columns: minmax(0, 1fr); }
    #page-article .body-area > :first-child { display: none; }
    /* Mobilde paylaşım çubuğu makalenin başında, sola yaslı yatay hap. */
    #page-article .rail-col { order: -1; padding-bottom: 0; display: flex; justify-content: flex-start; }
    #page-article .rail { position: static; width: auto; height: 48px; flex-direction: row; gap: 16px; padding: 0 18px; }
    #page-article .rail a[data-tip]::after { right: auto; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); }
}

/* ---------- Telefon: sıkı düzen ---------- */
@media (max-width: 760px) {
    #page-article h1 { margin-top: 20px; font-size: 28px; }
    #page-article .info { margin-top: 28px; gap: 14px; }
    #page-article .links { gap: 18px; font-size: 13px; }
    #page-article .cover { margin-top: 20px; }

    /* AI şeridi tek satır: ikon + kısa metin solda, küçük buton sağda. */
    #page-article .ai { margin-top: 10px; padding: 12px 12px 12px 16px; gap: 12px; flex-wrap: nowrap; }
    #page-article .ai .l { gap: 10px; min-width: 0; }
    #page-article .ai svg { width: 20px; height: 20px; }
    #page-article .ai .l span { font-size: 13px; line-height: 17px; }
    #page-article .ai a { flex: 0 0 auto; height: 40px; padding: 0 14px; gap: 8px; }
    #page-article .ai .icon { width: 20px; height: 20px; }
    #page-article .ai .t { font-size: 14px; line-height: 16px; white-space: nowrap; }

    #page-article .body-area { margin-top: 28px; gap: 20px; }
    #page-article .rail { height: 42px; }
    #page-article .intro { gap: 18px; }
    #page-article .sections { margin-top: 0; gap: 48px; }
    #page-article .sec h2 { margin-bottom: 14px; font-size: 26px; }
    #page-article .sec > img, #page-article .phone { margin-top: 24px; }
    #page-article .summary { margin-top: 64px; }
    #page-article .summary h2 { margin-top: 28px; }
    #page-article .glossary { margin-top: 56px; }
    #page-article .podcast { margin-top: 48px; }
    #page-article .nav { margin-top: 56px; }
    #page-article .end { padding-bottom: 110px; }

    /* Yüzde balonu telefonda header'ın üstüne biniyor; ince ilerleme çubuğu yeterli. */
    .progress-pop { display: none; }
}