/*
 * 40-programs.css — Görünüm D: Programlar / Belgeseller listesi, program-belgesel detayı, bölüm sayfası. Sahibi: P3.
 * VARIANT-D-PAGES.md §3.4. Kit (00-kit.css, dk-*) olduğu gibi kullanılır; burada yalnız sayfa kapsamlı p3-* sınıfları.
 * Kapsam: body.t-var-d .t-page-programs | .t-page-program (+ .t-page-documentary) | .t-page-episode
 * Kırılma noktaları kitle aynı: <768 mobil · 768 · 1024 (8+4) · 1200.
 */

/* ───────────── Liste afişleri (dk-poster; yalnız görsel hizası + özet satırı) ───────────── */
/* Afiş görselleri üstte program logosu taşır: kırpma alttan (gövdeler), logo hep görünür */
body.t-var-d :is(.t-page-programs, .t-page-program) .p3-poster .dk-poster__media img { object-position: 50% 0; }
/* Belgesel afişinde yayın saati yok → kısa özet, en çok 2 satır */
body.t-var-d :is(.t-page-programs, .t-page-program) .p3-poster .dk-poster__meta {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
body.t-var-d .t-page-programs .p3-posters > li { min-width: 0; }
body.t-var-d .t-page-programs .p3-switch .dk-icon { width: 18px; height: 18px; }
@media (max-width: 767.98px) {
    /* Küçük afiş perdesi artık kitte (00-kit.css, .dk-grid--posters <768) */
    body.t-var-d .t-page-programs .dk-head__actions { margin-top: 20px; }
}

/* ───────────── Program / belgesel: sahne (hero) ───────────── */
body.t-var-d .t-page-program .p3-stage { padding-block: 0; }
body.t-var-d .t-page-program .p3-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
body.t-var-d .t-page-program .p3-hero__art {
    display: block;
    width: 100%;
    aspect-ratio: 720 / 1066;
    overflow: hidden;
    background: var(--d-navy-800);
}
body.t-var-d .t-page-program .p3-hero__art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
}
/* Mobil: sanat kırpılmadan (720×1066), alt kenarı navy-900'e erir; yazı erimenin üstüne biner (yüzler açıkta) */
body.t-var-d .t-page-program .p3-hero__scrim {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 0;
    aspect-ratio: 720 / 1066;
    background: linear-gradient(180deg, rgba(20, 26, 74, 0) 46%, rgba(20, 26, 74, .8) 78%, var(--d-navy-900) 94%);
    pointer-events: none;
}
/* Sayfa yolu hero'nun içinde (kit dk-crumb--light, beyaz %72). Mobil: sanatın üstünde navy-900 şerit (açık afiş tepelerinde
   üst üste binen yazı 4.5:1'i tutturamıyordu; sanat kırpılmaz/karartılmaz). ≥768: sanatın sol üstünde, 24 iç boşluk */
body.t-var-d .t-page-program .p3-hero__crumb { position: relative; z-index: 2; padding-block: 12px; }
/* Perde sanatla hizalı kalsın: şerit 12 + 18 + 12 = 42 */
body.t-var-d .t-page-program .p3-hero__crumb ~ .p3-hero__scrim { top: 42px; }
body.t-var-d .t-page-program .p3-hero__crumb .dk-crumb { margin: 0; }
body.t-var-d .t-page-program .p3-hero__body { position: relative; z-index: 1; margin-top: -112px; }
body.t-var-d .t-page-program .p3-hero--noart .p3-hero__body { margin-top: 0; padding-top: 32px; }
/* Yalnız geniş (masaüstü) sanat varsa mobilde de kırpılmadan 1680×720 */
body.t-var-d .t-page-program .p3-hero--wide :is(.p3-hero__art, .p3-hero__scrim) { aspect-ratio: 1680 / 720; }
body.t-var-d .t-page-program .p3-hero--wide .p3-hero__body { margin-top: -48px; }
body.t-var-d .t-page-program .p3-hero .dk-head--hero { max-width: 760px; }
body.t-var-d .t-page-program .p3-hero .dk-head__title { text-wrap: balance; }
/* Özet: 3 satır + "Devamını gör" (taşma yoksa düğme gizli) */
body.t-var-d .t-page-program .p3-hero .dk-head__lead { max-width: 600px; color: rgba(255, 255, 255, .86); }
body.t-var-d .t-page-program .p3-hero .dk-head__lead:not(.is-expanded) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
body.t-var-d .t-page-program .p3-hero .dk-head__meta:has(> .p3-hero__toggle[hidden]:only-child) { display: none; }
body.t-var-d .t-page-program .p3-hero__toggle {
    --vr-theme-color: var(--d-white);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    margin-top: 4px;
    padding: 0 8px 0 12px;
    border: 0;
    border-radius: var(--d-r-full);
    background: rgba(255, 255, 255, .14);
    color: var(--d-white);
    font: 600 13px / 18px var(--d-font);
    cursor: pointer;
    transition: background-color var(--d-t-fast) var(--d-ease);
}
body.t-var-d .t-page-program .p3-hero__toggle[hidden] { display: none; }
body.t-var-d .t-page-program .p3-hero__toggle:hover { background: rgba(255, 255, 255, .24); }
body.t-var-d .t-page-program .p3-hero__toggle .dk-icon { transition: transform var(--d-t-mid) var(--d-ease); }
body.t-var-d .t-page-program .p3-hero__toggle[aria-expanded="true"] .dk-icon { transform: rotate(180deg); }
body.t-var-d .t-page-program .p3-hero .dk-head__chips { margin-top: 16px; }
body.t-var-d .t-page-program .p3-soon { height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 767.98px) {
    /* Mobil: iki düğme yan yana, tam genişlik */
    body.t-var-d .t-page-program .p3-hero .dk-head__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
    body.t-var-d .t-page-program .p3-hero .dk-head__actions .dk-btn { width: 100%; padding-inline: 12px; }
}
@media (min-width: 768px) {
    /* Masaüstü: 1680×720 sanat eski tasarımdaki gibi tam genişlik ve KENDİ ORANINDA (kırpılmaz). Yazı sanatın sol-altında perdenin
       üstünde; yazı sanattan uzunsa bölüm aşağı uzar, sanat üstte kalır, alt kenarı navy-900'e erir (zemin navy-900). */
    body.t-var-d .t-page-program .p3-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; min-height: 0; background: var(--d-navy-900); }
    /* Sütun = ekran genişliği: sanat her genişlikte tam ekran (eski tasarım gibi, 1680 üstünde de), ortalı; yazı kapsayıcı kenarında */
    body.t-var-d .t-page-program .p3-hero > :is(.p3-hero__art, .p3-hero__scrim, .p3-hero__body) { grid-area: 1 / 1; min-width: 0; }
    body.t-var-d .t-page-program .p3-hero > :is(.p3-hero__art, .p3-hero__scrim) { justify-self: stretch; width: 100%; }
    body.t-var-d .t-page-program .p3-hero > .p3-hero__body { justify-self: center; }
    body.t-var-d .t-page-program :is(.p3-hero, .p3-hero--wide) .p3-hero__art {
        position: relative;
        inset: auto;
        z-index: 0;
        align-self: start;
        height: auto;
        aspect-ratio: 1680 / 720;
    }
    body.t-var-d .t-page-program :is(.p3-hero, .p3-hero--wide) .p3-hero__scrim {
        position: relative;
        inset: auto;
        align-self: start;
        aspect-ratio: 1680 / 720;
        /* Perde yalnız yazı sütununun arkasında koyu (kapsayıcının sol kenarına bağlı), sağ taraf canlı kalır;
           alt kenar navy-900'e erir. Açık görsellerde de yazı ≥ 4.5:1 */
        --p3-l: max(var(--d-gutter), (100% - var(--d-container)) / 2);
        background:
            linear-gradient(90deg, rgba(20, 26, 74, .9) 0, rgba(20, 26, 74, .82) calc(var(--p3-l) + 380px), rgba(20, 26, 74, .5) calc(var(--p3-l) + 640px), rgba(20, 26, 74, 0) calc(var(--p3-l) + 940px)),
            linear-gradient(180deg, rgba(20, 26, 74, 0) 52%, rgba(20, 26, 74, .5) 80%, var(--d-navy-900) 100%);
    }
    body.t-var-d .t-page-program :is(.p3-hero, .p3-hero--wide) .p3-hero__body { position: relative; z-index: 1; align-self: end; margin-top: 0; padding-top: 96px; }
    body.t-var-d .t-page-program .p3-hero--noart .p3-hero__body { padding-top: 48px; }
    body.t-var-d .t-page-program .p3-hero__crumb { position: absolute; top: 24px; left: 0; right: 0; margin-inline: auto; padding-block: 0; }
    body.t-var-d .t-page-program .p3-hero--noart .p3-hero__crumb { position: relative; top: auto; padding-top: 24px; }
    body.t-var-d .t-page-program .p3-hero.p3-hero--noart { display: flex; flex-direction: column; }
}

/* Belgesel oynatıcısı: hero'nun altında, içerik sütununda (A bandı; 16:9, köşe 16, çerçevesiz). Hero sanatını tekrar etmez:
   düz navy önizleme + oynat düğmesi + ad; tıklanınca kit gömmeyi yükler */
body.t-var-d .t-page-program .p3-docplayer { max-width: 1096px; margin-inline: auto; scroll-margin-top: calc(var(--d-hdr-h) + 24px); }
body.t-var-d .t-page-program .p3-docplayer + .dk-sec { margin-top: var(--d-band-inner); }
body.t-var-d .t-page-program .p3-docfacade {
    --vr-theme-color: var(--d-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--d-navy-900);
    color: var(--d-white);
    text-align: center;
}
body.t-var-d .t-page-program .p3-docfacade::after { content: none; }
body.t-var-d .t-page-program .p3-docfacade__play {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: var(--d-r-full);
    background: rgba(255, 255, 255, .92);
    color: var(--d-navy-600);
    transform: scale(.94);
    transition: transform var(--d-t-mid) var(--d-ease), background-color var(--d-t-fast) var(--d-ease);
}
body.t-var-d .t-page-program .p3-docfacade__play .dk-icon { width: 26px; height: 26px; margin-left: 3px; }
body.t-var-d .t-page-program .p3-docfacade:hover .p3-docfacade__play { transform: scale(1); background: var(--d-white); }
body.t-var-d .t-page-program .p3-docfacade__title { font: 800 20px / 26px var(--d-font); letter-spacing: -.01em; color: var(--d-white); }
body.t-var-d .t-page-program .p3-docfacade__sub { font: 500 14px / 20px var(--d-font); color: var(--d-navy-200); }
@media (min-width: 768px) {
    body.t-var-d .t-page-program .p3-docfacade__play { width: 80px; height: 80px; margin-bottom: 18px; }
    body.t-var-d .t-page-program .p3-docfacade__play .dk-icon { width: 30px; height: 30px; }
    body.t-var-d .t-page-program .p3-docfacade__title { font-size: 24px; line-height: 30px; }
}

/* Oynatıcılar (bölüm + belgesel): video haberle aynı — köşe 16, gölgesiz/çerçevesiz (QA-D: players 16 flush, no frame) */
body.t-var-d :is(.t-page-episode, .t-page-program) .dk-player { border-radius: var(--d-r-lg); }

/* ───────────── A bandı (sis): reklam → (belgesel oynatıcısı) → Yorumcular / Diğer belgeseller ───────────── */
body.t-var-d .t-page-program .p3-a__sec { margin-top: var(--d-band-inner); }
/* Bantta yalnız reklam varsa altında yalnız bandın kendi boşluğu kalır */
body.t-var-d .t-page-program .p3-a > .dk-wrap:only-child > .dk-ad--top:only-child { padding-bottom: 0; margin-bottom: -24px; }

/* ───────────── B bandı (beyaz): Bölümler ───────────── */
body.t-var-d .t-page-program .p3-eps { scroll-margin-top: var(--d-hdr-h); }
body.t-var-d .t-page-program .p3-year { margin-top: 32px; scroll-margin-top: calc(var(--d-hdr-h) + 24px); }
body.t-var-d .t-page-program .dk-sec + .p3-year { margin-top: 8px; }
body.t-var-d .t-page-program .p3-year[hidden] { display: none; }
body.t-var-d .t-page-program .p3-year + .p3-year:not([hidden]) { margin-top: var(--d-band-inner); }
body.t-var-d .t-page-program .p3-year__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 20px; }
body.t-var-d .t-page-program .p3-year__title { margin: 0; font: 800 20px / 26px var(--d-font); letter-spacing: -.01em; color: var(--d-ink); text-transform: none; }
body.t-var-d .t-page-program .p3-year__page { margin-left: auto; font: 500 13px / 18px var(--d-font); font-variant-numeric: tabular-nums; color: var(--d-ink-3); }
body.t-var-d .t-page-program .p3-year .dk-grid > li { min-width: 0; }
/* Mobil: 12 bölüm tek sütunda ~3600 px tutuyordu → 2 sütun; "Son bölüm" kartı tam satır (sapma, raporda) */
@media (max-width: 767.98px) {
    body.t-var-d .t-page-program .p3-year .dk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
    body.t-var-d .t-page-program .p3-year .dk-grid--4 > li:has(.dk-badge) { grid-column: 1 / -1; }
}
/* Mobil: yıl süzgeci başlığın altında, yatay kayar (dk-seg zaten kaydırılabilir) */
@media (max-width: 767.98px) {
    body.t-var-d .t-page-program .p3-eps .dk-sec { grid-template-columns: minmax(0, 1fr); }
    body.t-var-d .t-page-program .p3-eps .dk-sec__actions { grid-column: 1; grid-row: 2; min-width: 0; margin-top: 16px; }
    body.t-var-d .t-page-program .p3-yearfilter { max-width: 100%; }
}

/* ───────────── "hakkında" bandı ───────────── */
body.t-var-d .t-page-program .p3-about .dk-prose { max-width: none; }

/* ───────────── Bölüm sayfası ───────────── */
@media (min-width: 768px) {
    body.t-var-d .t-page-episode .p3-head--ep .dk-head__title { font-size: 32px; line-height: 40px; }
}
body.t-var-d .t-page-episode .p3-eyebrow {
    --vr-theme-color: var(--d-navy-600);
    color: inherit;
    text-decoration: none;
    transition: color var(--d-t-fast) var(--d-ease);
}
body.t-var-d .t-page-episode .p3-eyebrow:hover { color: var(--d-navy-600); text-decoration: underline; text-underline-offset: 3px; }
body.t-var-d .t-page-episode .p3-ep__player { scroll-margin-top: calc(var(--d-hdr-h) + 16px); }

/* Önceki (eski) / Sonraki (yeni) */
body.t-var-d .t-page-episode .p3-epnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
body.t-var-d .t-page-episode .p3-epnav__btn {
    --vr-theme-color: var(--d-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 56px;
    padding: 8px 14px;
    border: 1px solid var(--d-line-strong);
    border-radius: var(--d-r-md);
    background: var(--d-white);
    color: var(--d-ink);
    text-decoration: none;
    transition: border-color var(--d-t-fast) var(--d-ease), color var(--d-t-fast) var(--d-ease), opacity var(--d-t-fast) var(--d-ease);
}
body.t-var-d .t-page-episode .p3-epnav__btn--next { justify-content: flex-end; text-align: right; }
body.t-var-d .t-page-episode .p3-epnav__icon { flex: none; color: var(--d-navy-400); transition: transform var(--d-t-mid) var(--d-ease), color var(--d-t-fast) var(--d-ease); }
body.t-var-d .t-page-episode .p3-epnav__txt { display: flex; flex-direction: column; min-width: 0; }
body.t-var-d .t-page-episode .p3-epnav__label { font: 600 13px / 18px var(--d-font); color: var(--d-ink-3); }
body.t-var-d .t-page-episode .p3-epnav__title {
    overflow: hidden;
    font: 700 14px / 20px var(--d-font);
    color: var(--d-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color var(--d-t-fast) var(--d-ease);
}
body.t-var-d .t-page-episode a.p3-epnav__btn:hover { border-color: var(--d-navy-600); }
body.t-var-d .t-page-episode a.p3-epnav__btn:hover :is(.p3-epnav__title, .p3-epnav__icon) { color: var(--d-navy-600); }
body.t-var-d .t-page-episode a.p3-epnav__btn--prev:hover .p3-epnav__icon { transform: translateX(-2px); }
body.t-var-d .t-page-episode a.p3-epnav__btn--next:hover .p3-epnav__icon { transform: translateX(2px); }
body.t-var-d .t-page-episode .p3-epnav__btn.is-disabled { opacity: .35; cursor: default; }
body.t-var-d .t-page-episode .p3-ep__desc { margin-top: 24px; }
body.t-var-d .t-page-episode .p3-ep__desc + .p3-ep__desc { margin-top: 16px; }
@media (min-width: 768px) {
    body.t-var-d .t-page-episode .p3-epnav { gap: 16px; margin-top: 20px; }
    body.t-var-d .t-page-episode .p3-epnav__btn { padding-inline: 16px; }
    body.t-var-d .t-page-episode .p3-ep__desc { margin-top: 28px; }
}

/* "Diğer bölümler" paneli: oynatıcıyla aynı yükseklik (JS --p3-player-h), içinde kayar; <1200'de gizli (beyaz bant rayı yerini alır) */
body.t-var-d .t-page-episode .p3-side { display: none; }
body.t-var-d .t-page-episode .p3-side__panel {
    display: flex;
    flex-direction: column;
    height: var(--p3-player-h, 490px);
    min-height: 360px;
    overflow: hidden;
    border-radius: var(--d-r-xl);
    background: var(--d-white);
}
body.t-var-d .t-page-episode .p3-side__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 8px;
}
body.t-var-d .t-page-episode .p3-side__title { margin: 0; font: 700 16px / 22px var(--d-font); color: var(--d-ink); text-transform: none; }
body.t-var-d .t-page-episode .p3-side__list {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 24px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--d-navy-100) transparent;
}
body.t-var-d .t-page-episode .p3-side__list .dk-row__title { font-size: 14px; line-height: 20px; }
/* Listede aşağıda devamı varken alt kenar solar (JS .is-more) */
body.t-var-d .t-page-episode .p3-side__list.is-more {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
}
body.t-var-d .t-page-episode .p3-side__foot { padding: 14px 24px 16px; border-top: 1px solid var(--d-line); }
/* 1024–1199'da panel 309 px'e sıkışıyor (satır başına 4 satır metin): orada gizli, ana sütun tam genişlik */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    body.t-var-d .t-page-episode .dk-l-8-4 > .dk-main { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
    body.t-var-d .t-page-episode .p3-side { display: block; }
}

/* ───────────── Gölgeler (tay-main "düz görünüm" katmanını aynı katmanda, güçlü seçiciyle aşar) ───────────── */
@layer base {
    body.t-var-d .t-page-episode .p3-side__panel:not(#tay-flat) { box-shadow: var(--d-sh-2) !important; }
    body.t-var-d :is(.t-page-episode, .t-page-program) .dk-player:not(#tay-flat) { box-shadow: none !important; }
}

/* ───────────── Azaltılmış hareket ───────────── */
@media (prefers-reduced-motion: reduce) {
    body.t-var-d .t-page-episode a.p3-epnav__btn:hover .p3-epnav__icon,
    body.t-var-d .t-page-program .p3-docfacade__play,
    body.t-var-d .t-page-program .p3-docfacade:hover .p3-docfacade__play { transform: none; }
    body.t-var-d :is(.t-page-episode .p3-epnav__icon, .t-page-program .p3-hero__toggle .dk-icon) { transition: none; }
}