/* ════════════════════════════════════════════════════════════════════
   J · Seyir Çizelgesi — ortak tasarım sistemi (tüm /j/ sayfaları)
   Dil: açık zemin · Schibsted Grotesk + Geist Mono · keskin görsel · 3 px çip
   Hareket: yalnız transform/opacity · prefers-reduced-motion'da durur
   Belge: /j/TASARIM-DILI.md
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. JETONLAR ─── */
:root{
  --zemin:#fff; --zemin-2:#f4f4f1; --zemin-3:#ebebe6;
  --metin:#0e0e0e; --soluk:#5f5f5f; --pasif:#767672; --cizgi:#e2e2de; --cizgi-koyu:#b9b9b3;
  --mavi:#455ea8; --mavi-koyu:#3b5192; --mavi-ton:#eceff7;
  --mor:#6b4699; --mor-koyu:#5e3d86; --mor-ton:#f1edf6;
  --yesil:#3f7a56; --yesil-koyu:#336249; --yesil-ton:#e9f1ec;
  --f:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"Geist Mono",ui-monospace,Menlo,monospace;
  /* punto ölçeği (TLB oranı: 13 · 19 · 27 · 54 · dev) */
  --t-m:.8125rem; --t-k:.9375rem; --t-g:1.1875rem; --t-b:1.6875rem;
  --t-xb:clamp(2.25rem,5.4vw,3.5rem); --t-xxb:clamp(2.8rem,8vw,6rem); --t-dev:clamp(3.1rem,11.4vw,9.5rem);
  /* boşluk ritmi (14 px taban) */
  --s1:.25rem; --s2:.5rem; --s3:.875rem; --s4:1.5rem; --s5:2.5rem; --s6:4rem; --s7:6.5rem;
  --pad:1.25rem; --r:3px; --r-kart:6px; --ust:64px; --kap:1600px;
  /* eğriler: TLB expo + quint, Awwwards (0,1,.5,1) */
  --expo:cubic-bezier(.19,1,.22,1); --quint:cubic-bezier(.23,1,.32,1); --aww:cubic-bezier(0,1,.5,1); --inout:cubic-bezier(.76,0,.24,1);
}
@media (min-width:900px){:root{--pad:2rem}}

/* ─── 2. TABAN + KAYDIRMA TABANI ─── */
*{box-sizing:border-box;margin:0;padding:0}
html{background-color:#fff;overscroll-behavior-y:none;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:var(--ust);scroll-padding-bottom:100px}
body{background-color:#fff;overscroll-behavior-y:none;overflow-x:clip;font-family:var(--f);font-size:var(--t-g);line-height:1.35;color:var(--metin);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
ol,ul{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--mavi);outline-offset:3px}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.atla{position:fixed;left:var(--pad);top:.5rem;z-index:200;background:#fff;border:1px solid var(--metin);padding:.6rem 1rem;transform:translate3d(0,-150%,0)}
.atla:focus{transform:none}

/* ─── 3. TİPOGRAFİ ─── */
.mono{font-family:var(--fm);font-weight:500;font-size:var(--t-m);letter-spacing:.02em;text-transform:uppercase;line-height:1.3}
.t-dev{font-size:var(--t-dev);font-weight:800;line-height:.96;letter-spacing:-.045em} /* .86 idi: alt satır başındaki İ noktası üst satıra biniyordu (14.09) */
.t-xxb{font-size:var(--t-xxb);font-weight:800;line-height:.9;letter-spacing:-.04em}
.t-xb{font-size:var(--t-xb);font-weight:800;line-height:.92;letter-spacing:-.035em}
.t-b{font-size:var(--t-b);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.t-g{font-size:var(--t-g)}
.t-buyuk-harf{text-transform:uppercase}
.t-soluk{color:var(--soluk)}
.bildiri{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:600;line-height:1.03;letter-spacing:-.035em}
.bildiri span{color:#7d7d78}
.metin-govde{font-size:var(--t-g);line-height:1.55;max-width:40rem}
.metin-govde>*+*{margin-top:1.1em}
.metin-govde h2{font-size:var(--t-b);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:1.8em}
.metin-govde h3{font-size:var(--t-g);font-weight:600;margin-top:1.5em}
.metin-govde a{border-bottom:1px solid currentColor}
.metin-govde ul{list-style:disc;padding-left:1.2em}
.alinti-buyuk{padding-left:var(--s3);border-left:2px solid var(--mavi);font-size:clamp(1.4rem,3.2vw,2.1rem);font-weight:600;line-height:1.12;letter-spacing:-.02em;max-width:36rem}
.alinti-buyuk cite{display:block;margin-top:var(--s3);font-style:normal;color:var(--soluk);font-family:var(--fm);font-size:var(--t-m);text-transform:uppercase;font-weight:500;letter-spacing:.02em}

/* ─── 4. IZGARA + BÖLÜM ─── */
.kap{padding-inline:var(--pad);max-width:var(--kap);margin-inline:auto}
.izgara-12{display:grid;gap:var(--s5) var(--s4)}
@media (min-width:900px){.izgara-12{grid-template-columns:repeat(12,minmax(0,1fr))}}
.bolum{padding-top:var(--s6)}
.bolum-bas{display:grid;gap:var(--s3);align-items:end;padding-bottom:var(--s4)}
.bolum-bas .mono{color:var(--mavi-koyu);font-weight:500}
/* bölüm numarası: büyük, bölümün renginde */
.bolum-no{display:block;font-family:var(--fm);font-weight:500;font-size:clamp(2.5rem,5vw,4rem);line-height:.9;letter-spacing:-.05em;color:var(--mavi-koyu);margin-bottom:.4rem}
.bolum-no--mor{color:var(--mor-koyu)}.bolum-no--yesil{color:var(--yesil-koyu)}
.t-mor{color:var(--mor-koyu)}
/* renk tonlu tam genişlik bölüm (açık ton — koyu zemin değil) */
.bolum--ton{margin-top:var(--s5);padding-block:var(--s5)}
.bolum--mor{background:var(--mor-ton)}.bolum--mavi{background:var(--mavi-ton)}
.bolum--ton+.bolum{padding-top:var(--s5)}
.bolum-bas h2{margin-top:.6rem;max-width:17ch}
.bolum-bas p{color:var(--soluk);max-width:44ch;margin-top:.7rem;font-size:1.0625rem}
.bolum-arac{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
@media (min-width:900px){.bolum-bas{grid-template-columns:minmax(0,1fr) auto}}
.cizgi-ust{border-top:1px solid var(--cizgi-koyu)}

/* ─── 5. DÜĞMELER ─── */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:44px;padding:0 1.1rem;border:1px solid var(--metin);border-radius:var(--r);font-weight:600;font-size:var(--t-k);white-space:nowrap;position:relative;overflow:clip;isolation:isolate}
.dugme::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mavi-koyu);clip-path:inset(100% 0 0 0);transition:clip-path .6s var(--aww)}
.dugme:hover{color:#fff;border-color:var(--mavi-koyu)}
.bolum--mor .dugme::before{background:var(--mor-koyu)}.bolum--mor .dugme:hover{border-color:var(--mor-koyu)}
.dugme:hover::before{clip-path:inset(0)}
.dugme--dolu{background:var(--metin);color:#fff}
.dugme--dolu::before{background:var(--mavi-koyu)}
.dugme--cizgi{border-color:var(--cizgi)}
.dugme--ikon{width:44px;padding:0}
.dugme .ok{display:inline-block;transition:transform .6s var(--aww)}
.dugme:hover .ok{transform:translate3d(4px,0,0)}
.bag-ok{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600;position:relative}
.bag-ok::after{content:"";position:absolute;left:0;right:1.4em;bottom:9px;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--aww)}
.bag-ok:hover::after{transform:scaleX(0)}

/* ─── 6. ETİKETLER ─── */
.cip{display:inline-flex;align-items:center;font-family:var(--fm);font-weight:500;font-size:var(--t-m);text-transform:uppercase;letter-spacing:.02em;line-height:1;padding:.32rem .45rem;border-radius:var(--r);background:var(--mavi-ton);color:var(--mavi-koyu)}
.cip--soz{background:var(--mor-ton);color:var(--mor-koyu)}
.cip--soylesi{background:var(--yesil-ton);color:var(--yesil-koyu)}
.cip--beyaz{background:rgba(255,255,255,.94);color:#1b1b1b}
.mono .cip{margin-left:.45rem;vertical-align:.08em}
/* çizelge kartındaki tür (nokta + yazı) → dolgu çip */
.cz-bilgi .cz-tur{display:inline-flex;width:max-content;padding:.3rem .45rem;border-radius:var(--r);line-height:1;background:var(--mavi-ton);color:var(--mavi-koyu)}
.cz-bilgi .cz-tur:has(.nokta--soz){background:var(--mor-ton);color:var(--mor-koyu)}
.cz-bilgi .cz-tur:has(.nokta--soylesi){background:var(--yesil-ton);color:var(--yesil-koyu)}
.cz-bilgi .cz-tur .nokta{display:none}
.rozet-sayi--mor{border-color:var(--mor);color:var(--mor-koyu)}
.rozet-cerceve{display:inline-flex;align-items:center;gap:.3rem;border:1px solid currentColor;border-radius:var(--r);padding:.15rem .45rem;font-size:var(--t-k);line-height:1.3}
.rozet-sayi{display:inline-flex;border:1px solid var(--mavi);color:var(--mavi-koyu);border-radius:2px;padding:0 .3rem;font-family:var(--fm);font-size:.75rem;line-height:1.35;vertical-align:.15em}
.meta-satir{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;color:var(--soluk)}
.meta-satir b{color:var(--metin);font-weight:600}
.nokta{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mavi)}
.nokta--soz{background:var(--mor)}.nokta--soylesi{background:var(--yesil)}
.monogram{display:grid;place-items:center;background:var(--mor-ton);color:var(--mor);font-weight:800;letter-spacing:-.05em;line-height:1}

/* ─── 7. BAŞLIK ─── */
.ust{position:sticky;top:0;z-index:60;height:var(--ust);display:flex;align-items:center;gap:var(--s3);padding-inline:var(--pad);background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);view-transition-name:j-ust}
.ust::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cizgi);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--expo)}
.ust.dolu::after{transform:scaleX(1)}
.logo{display:flex;align-items:center;min-height:44px;flex:none}
.logo img{height:28px;width:auto}
@media (min-width:900px){.logo img{height:36px}}
.nav{display:none;margin-left:var(--s5);font-weight:600;font-size:1.0625rem;white-space:nowrap}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--pasif);position:relative}
.nav a:not(:last-child)::after{content:",";margin-right:.3em;color:var(--pasif)}
.nav a[aria-current="page"]{color:var(--metin)}
.nav a:hover{color:var(--metin)}
@media (min-width:1180px){.nav{display:flex}}
@media (min-width:1400px){.nav{font-size:var(--t-g)}}
.ust-sag{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.menu-btn{width:44px;height:44px;display:grid;place-content:center;gap:5px;border:1px solid var(--cizgi);border-radius:var(--r);position:relative;z-index:2}
.menu-btn i{display:block;width:18px;height:1.5px;background:var(--metin);transition:transform .7s var(--expo)}
.menu-btn[aria-expanded="true"] i:first-child{transform:translate3d(0,3.25px,0) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translate3d(0,-3.25px,0) rotate(-45deg)}
@media (min-width:1180px){.menu-btn{display:none}}
main{display:block}

/* mobil menü — iki katman: mavi şerit önden süpürür, beyaz yüzey arkadan gelir; bağlantılar 3B dönerek açılır */
.cekmece{position:fixed;inset:0;z-index:55;visibility:hidden;transition:visibility 0s linear .9s;pointer-events:none}
.cekmece.acik{visibility:visible;transition:visibility 0s;pointer-events:auto}
.cekmece::before,.cekmece-yuzey{content:"";position:absolute;inset:0;transform:translate3d(0,-101%,0);transition:transform .8s var(--inout)}
.cekmece::before{background:var(--mavi);z-index:0}
.cekmece-yuzey{background:#fff;z-index:1;transition-delay:.08s;padding:calc(var(--ust) + 1.25rem) var(--pad) 2rem;display:flex;flex-direction:column;overflow-y:auto}
.cekmece.acik::before,.cekmece.acik .cekmece-yuzey{transform:none}
.cekmece:not(.acik) .cekmece-yuzey{transition-delay:0s}
.cekmece:not(.acik)::before{transition-delay:.1s}
.cekmece-nav{perspective:800px}
.cekmece-nav a{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:baseline;gap:.5rem;min-height:58px;padding:.35rem 0;border-bottom:1px solid var(--cizgi);font-size:clamp(2rem,9vw,3.25rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;transform-origin:50% 100%;transform:rotateX(-80deg) translate3d(0,20px,0);opacity:0;transition:transform .9s var(--expo),opacity .5s var(--quint)}
.cekmece-nav a .mono{color:var(--soluk);align-self:center}
.cekmece-nav a .ok{font-size:1.25rem;font-weight:600;transition:transform .6s var(--aww)}
.cekmece-nav a[aria-current="page"]{color:var(--mavi-koyu)}
.cekmece.acik .cekmece-nav a{transform:none;opacity:1}
.cekmece.acik .cekmece-nav a:nth-child(1){transition-delay:.25s}.cekmece.acik .cekmece-nav a:nth-child(2){transition-delay:.3s}.cekmece.acik .cekmece-nav a:nth-child(3){transition-delay:.35s}.cekmece.acik .cekmece-nav a:nth-child(4){transition-delay:.4s}.cekmece.acik .cekmece-nav a:nth-child(5){transition-delay:.45s}.cekmece.acik .cekmece-nav a:nth-child(6){transition-delay:.5s}.cekmece.acik .cekmece-nav a:nth-child(7){transition-delay:.55s}
.cekmece-alt{margin-top:auto;padding-top:var(--s5);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);color:var(--soluk);opacity:0;transition:opacity .6s var(--quint)}
.cekmece.acik .cekmece-alt{opacity:1;transition-delay:.6s}

/* ─── 8. KAYAN YAZI BANDI ─── */
.kayan-bant{overflow:clip;border-block:1px solid var(--metin);padding-block:.9rem}
.kayan-iz{display:flex;width:max-content;animation:j-kay 42s linear infinite}
.kayan-bant:hover .kayan-iz{animation-play-state:paused}
.kayan-iz span{font-size:clamp(2.2rem,7vw,5.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;padding-right:.5em;white-space:nowrap}
.kayan-iz span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px var(--metin)}
.kayan-iz span i{font-style:normal;color:var(--mor);-webkit-text-stroke:0;padding-right:.5em}
.kayan-bant--ters .kayan-iz{animation-direction:reverse}
@keyframes j-kay{to{transform:translate3d(-50%,0,0)}}

/* ─── 9. KARTLAR ─── */
/* 9a. kayıt kartı (TLB şeridi) */
.kart-kayit{display:block;width:clamp(15rem,70vw,18.5rem);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kart-kayit .no{display:block;overflow:clip;height:1.1rem;margin-bottom:.55rem}
.kart-kayit .no>span{display:block}
.kutu{display:block;position:relative;aspect-ratio:var(--oran,4/3);overflow:clip;background:var(--zemin-2);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--expo)}
.kutu img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform 1.2s var(--expo)}
.kutu.monogram{display:grid;font-size:clamp(4.5rem,20vw,7rem)}
.kart-kayit:hover .kutu img{transform:scale(1.05)}
.kart-kayit .alt{display:block;margin-top:.7rem}
.kart-kayit .etiket{display:flex;align-items:center;gap:.45rem;color:var(--soluk)}
.kart-kayit .ad{display:block;font-weight:600;font-size:1.0625rem;line-height:1.2;margin-top:.25rem}
@media (hover:hover) and (pointer:fine){
  .kart-kayit .no>span{transform:translate3d(0,100%,0);transition:transform .7s var(--expo)}
  .kart-kayit:hover .no>span,.kart-kayit:focus-visible .no>span,.kart-kayit.merkez .no>span{transform:none}
}
/* 9b. büyük kart (Söz Onda / vitrin) */
.kart-buyuk{display:block;min-width:0}
.kart-buyuk .g{display:block;position:relative;aspect-ratio:var(--oran,3/2);overflow:clip;background:var(--zemin-2)}
.kart-buyuk .g img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--expo)}
.kart-buyuk:hover .g img{transform:scale(1.06)}
.kart-buyuk .g.monogram{display:grid;font-size:clamp(5rem,18vw,11rem)}
.kart-buyuk .mono{display:block;margin-top:.9rem;color:var(--soluk)}
.kart-buyuk .ad{display:block;font-size:var(--t-b);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin-top:.3rem;transition:transform .8s var(--expo)}
.kart-buyuk:hover .ad{transform:translate3d(8px,0,0)}
.kart-buyuk .unvan{display:block;color:var(--soluk);font-size:1rem;margin-top:.2rem}
/* 9c. Awwwards ızgara kartı: görsel + alt satır (yazar/etiketler) */
.kart-izgara{display:block;min-width:0}
.kart-izgara .g{display:block;aspect-ratio:4/3;overflow:clip;border-radius:var(--r-kart);background:var(--zemin-2)}
.kart-izgara .g img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--aww)}
.kart-izgara:hover .g img{transform:scale(1.05)}
.kart-izgara .alt-satir{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.8rem}
.kart-izgara .alt-satir b{font-weight:600;font-size:1rem;line-height:1.2;transition:color .5s var(--aww)}
.kart-izgara:hover .alt-satir b{color:var(--mavi-koyu)}
/* 9d. liste satırı (dizin / haber) */
.liste-satir{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:var(--s3);align-items:center;width:100%;padding:var(--s3) 0;border-bottom:1px solid var(--cizgi);min-height:44px}
.liste-satir .k{aspect-ratio:1;overflow:clip;background:var(--zemin-2)}
.liste-satir .k img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--expo)}
.liste-satir:hover .k img{transform:scale(1.1)}
.liste-satir .mono{display:block;color:var(--soluk)}
.liste-satir h3{font-size:1.125rem;font-weight:600;line-height:1.25;margin-top:.25rem;transition:transform .7s var(--expo),color .5s var(--aww)}
.liste-satir:hover h3{transform:translate3d(8px,0,0);color:var(--mavi-koyu)}
.liste-satir .ok{font-size:1.25rem;transition:transform .6s var(--aww)}
.liste-satir:hover .ok{transform:translate3d(6px,0,0)}
@media (min-width:900px){.liste-satir{grid-template-columns:8rem minmax(0,1fr) auto}}

/* ─── 10. İSTATİSTİK + KÜNYE ─── */
.istatistik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--metin)}
.istatistik>*{display:block;padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--cizgi);min-width:0;position:relative}
.istatistik>*:nth-child(even){padding-left:var(--s3);border-left:1px solid var(--cizgi)}
.istatistik b{display:block;font-size:clamp(3.4rem,13vw,7.5rem);font-weight:800;line-height:.85;letter-spacing:-.055em;font-variant-numeric:tabular-nums;margin-bottom:.6rem;color:var(--mavi-koyu)}
.istatistik>*:nth-child(2n) b{color:var(--mor-koyu)}
.istatistik .mono{color:var(--soluk)}
.istatistik a .ok{position:absolute;right:var(--s3);top:var(--s4);transition:transform .6s var(--aww)}
.istatistik a:hover .ok{transform:translate3d(4px,-4px,0)}
@media (min-width:900px){.istatistik{grid-template-columns:repeat(4,minmax(0,1fr))}.istatistik>*{padding-left:var(--s3);border-left:1px solid var(--cizgi)}.istatistik>*:first-child{padding-left:0;border-left:0}}
.kunye-tablo{border-top:1px solid var(--metin)}
.kunye-tablo>div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--cizgi);align-items:baseline}
.kunye-tablo dt{color:var(--soluk)}
.kunye-tablo dd{font-weight:600;font-size:1.0625rem}

/* ─── 11. FİLTRE ÇUBUĞU (Awwwards) ─── */
.filtre-cubugu{display:flex;gap:.4rem;flex-wrap:wrap;padding:.4rem;background:var(--zemin-2);border-radius:var(--r-kart)}
.filtre-cubugu button{min-height:44px;padding:0 1rem;background:#fff;border-radius:var(--r);font-weight:600;font-size:var(--t-k);color:var(--pasif);border:1px solid transparent;transition:color .4s var(--aww),border-color .4s var(--aww)}
.filtre-cubugu button[aria-pressed="true"]{color:var(--mavi-koyu);border-color:var(--mavi)}
[data-filtre-oge].filtre-gizli{display:none}
.gecis{display:inline-flex;border:1px solid var(--cizgi);border-radius:var(--r)}
.gecis button{min-height:44px;padding:0 1rem;font-weight:600;font-size:var(--t-k);color:var(--pasif)}
.gecis button[aria-pressed="true"]{color:var(--mavi-koyu);background:var(--mavi-ton)}

/* ─── 12. YATAY ŞERİT + CETVEL (TLB) ─── */
.oklar{display:none;gap:.4rem}
.oklar button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--cizgi);border-radius:var(--r)}
.oklar button:hover{border-color:var(--metin)}
@media (min-width:700px){.oklar{display:flex}}
.serit{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;cursor:grab}
.serit::-webkit-scrollbar{display:none}
.serit.suruk{cursor:grabbing;scroll-snap-type:none}
.serit-iz{position:relative;display:flex;align-items:center;gap:var(--s3);width:max-content;padding:var(--s4) 50vw var(--s3) var(--pad);min-height:clamp(380px,50svh,560px)}
.serit-iz>li{flex:none;scroll-snap-align:center}
@media (min-width:900px){.serit-iz{gap:1.25rem}}
.js .serit-iz>li{opacity:0;transform:translate3d(70px,0,0);transition:opacity .8s var(--quint),transform 1.2s var(--expo)}
.js .serit-iz.gor>li{opacity:1;transform:none}
.js .serit-iz.gor>li:nth-child(2){transition-delay:.06s}.js .serit-iz.gor>li:nth-child(3){transition-delay:.12s}.js .serit-iz.gor>li:nth-child(4){transition-delay:.18s}.js .serit-iz.gor>li:nth-child(5){transition-delay:.24s}.js .serit-iz.gor>li:nth-child(6){transition-delay:.3s}
.cetvel{display:none;position:relative;height:70px;overflow:clip}
.js .cetvel{display:block}
.cetvel-iz{position:absolute;top:0;left:0;height:100%;will-change:transform}
.cetvel-iz::before{content:"";position:absolute;left:0;right:0;top:16px;height:10px;background:repeating-linear-gradient(90deg,var(--cizgi-koyu) 0 1px,transparent 1px 9px)}
.ay{position:absolute;top:0;height:100%}
.ay::before{content:"";position:absolute;left:0;top:6px;width:1px;height:22px;background:var(--metin)}
.ay span{position:absolute;left:0;top:40px;white-space:nowrap}
.okuma{position:absolute;left:50%;top:0;width:2px;height:34px;background:var(--mavi)}
.okuma-tarih{position:absolute;left:calc(50% + 10px);top:0;padding:0 .35rem;background:#fff;white-space:nowrap;color:var(--mavi-koyu);font-weight:500}
.kart-son{display:grid;place-content:center;gap:.6rem;width:clamp(15rem,70vw,18.5rem);aspect-ratio:4/5;border:1px solid var(--metin);padding:var(--s4);text-align:left}
.kart-son b{font-size:var(--t-xb);font-weight:800;letter-spacing:-.04em;line-height:.9}
.kart-son .ok{font-size:2rem;transition:transform .7s var(--aww)}
.kart-son:hover .ok{transform:translate3d(10px,0,0)}

/* ─── 13. KAPAK SLIDER ─── */
.slider{position:relative}
.sahne{position:relative;height:min(118vw,68svh);min-height:420px;overflow:clip;background:#16181d;touch-action:pan-y}
@media (min-width:900px){.sahne{height:min(76svh,58vw);margin-inline:var(--pad)}}
.slayt{position:absolute;inset:0;visibility:hidden;z-index:0;transition:visibility 0s linear 1.25s}
.slayt.aktif{visibility:visible;z-index:2;transition:visibility 0s}
.slayt.cikan{visibility:visible;z-index:1;transition:visibility 0s}
.levha{position:absolute;inset:0;overflow:clip;background:#16181d;transform:translate3d(100%,0,0);transition:transform 1.25s var(--expo)}
.levha-ic{position:absolute;inset:0;transform:translate3d(-100%,0,0);transition:transform 1.25s var(--expo)}
.aktif .levha,.aktif .levha-ic,.cikan .levha,.cikan .levha-ic{transform:none}
.levha-ic img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 7.5s cubic-bezier(.25,.1,.25,1)}
.aktif .levha-ic img{transform:scale(1.02)}
.levha-ic::after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.74))}
.slayt .yazi{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:var(--s4);color:#fff;max-width:54rem}
@media (min-width:900px){.slayt .yazi{left:var(--s5);bottom:var(--s5)}}
.slayt .yazi>*{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s var(--quint),transform 1s var(--expo)}
.aktif .yazi>*{opacity:1;transform:none;transition-delay:.4s}
.aktif .yazi>*:nth-child(2){transition-delay:.5s}.aktif .yazi>*:nth-child(3){transition-delay:.6s}.aktif .yazi>*:nth-child(4){transition-delay:.7s}
.s-ad{display:block;font-size:clamp(2.2rem,8vw,5.5rem);font-weight:800;line-height:.9;letter-spacing:-.04em;text-transform:uppercase;margin-top:.75rem;max-width:13ch}
.s-unvan{display:block;font-size:var(--t-g);color:rgba(255,255,255,.92);margin-top:.55rem}
.s-ac{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:.35rem;font-weight:600;position:relative}
.s-ac::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform-origin:left;transition:transform .7s var(--expo)}
.s-ac:hover::after{transform:scaleX(.35)}
.kontrol{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--pad) 0}
.kontrol button{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--cizgi);border-radius:var(--r)}
.kontrol button:hover{border-color:var(--metin)}
.seritler{flex:1;min-width:0;display:flex;gap:4px;height:44px;align-items:center}
.seritler i{flex:1;height:2px;background:var(--cizgi);position:relative;overflow:clip}
.seritler i b{position:absolute;inset:0;background:var(--metin);transform:scaleX(0);transform-origin:left}
.seritler i.gecti b{transform:scaleX(1)}
.sayac{flex:none;min-width:5.5ch;text-align:right;color:var(--soluk)}

/* ─── 14. GÖRSEL PANO + GALERİ + BÜYÜTME ─── */
.pano{position:relative;display:block;overflow:clip;color:#fff;min-height:420px;background:#16181d}
.pano>img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transition:transform 1.4s var(--expo)}
.pano:hover>img{transform:scale(1.05)}
.pano::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72))}
.pano .pano-yazi{position:absolute;z-index:1;left:var(--s4);right:var(--s4);bottom:var(--s4)}
.pano .pano-yazi .mono{color:rgba(255,255,255,.9)}
/* Haber galerisi: fotoğraf kendi oranında durur, kırpılmaz (yüzler kesilmesin) */
.galeri{columns:2;column-gap:.5rem}
.galeri a{position:relative;display:block;overflow:clip;background:var(--zemin-2);break-inside:avoid;margin-bottom:.5rem}
.galeri img{display:block;width:100%;height:auto;transition:transform 1.2s var(--expo)}
.galeri a:hover img{transform:scale(1.06)}
@media (min-width:900px){.galeri{columns:3}}
.buyutme{position:fixed;inset:0;z-index:120;background:rgba(255,255,255,.97);display:grid;grid-template-rows:auto minmax(0,1fr) auto;visibility:hidden;opacity:0;transition:opacity .35s var(--quint),visibility 0s linear .35s}
.buyutme.acik{visibility:visible;opacity:1;transition:opacity .35s var(--quint),visibility 0s}
.buyutme-ust{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:var(--ust);padding-inline:var(--pad)}
.buyutme-sahne{position:relative;padding:0 var(--pad);touch-action:pan-y;min-height:0;overflow:hidden}
.buyutme-sahne img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 2*var(--pad));max-height:100%;object-fit:contain;transition:opacity .4s var(--quint),transform .8s var(--expo)}
.buyutme-sahne img.yuk{opacity:0;transform:scale(.97)}
.buyutme-alt{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--pad)}
.buyutme-alt p{color:var(--soluk);font-size:var(--t-k);max-width:60ch}

/* ─── 15. ÖZEL İMLEÇ ─── */
.imlec{position:fixed;left:0;top:0;z-index:150;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--metin);color:#fff;display:grid;place-items:center;pointer-events:none;font-family:var(--fm);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;transform:translate3d(var(--x,-200px),var(--y,-200px),0) scale(0);transition:transform .45s var(--aww)}
.imlec.gor{transform:translate3d(var(--x),var(--y),0) scale(1)}

/* ─── 16. BELİREN ÖĞELER (JS yoksa görünür) ─── */
.js .bel{opacity:0;transform:translate3d(0,36px,0);transition:opacity 1s var(--quint),transform 1.2s var(--expo)}
.js .bel--sol{opacity:0;transform:translate3d(-48px,0,0);transition:opacity 1s var(--quint),transform 1.2s var(--expo)}
.js .bel--olcek{opacity:0;transform:scale(.92);transition:opacity .9s var(--quint),transform 1.2s var(--expo)}
.js .bel--don{opacity:0;transform:perspective(900px) rotateX(-24deg) translate3d(0,40px,0);transform-origin:50% 0;transition:opacity 1s var(--quint),transform 1.3s var(--expo)}
.js .bel.gor,.js .bel--sol.gor,.js .bel--olcek.gor,.js .bel--don.gor{opacity:1;transform:none}
.sat{display:block;overflow:clip;padding-bottom:.07em;padding-top:.22em;margin-top:-.22em} /* üst pay: İ noktası ve Ğ şapkası kırpılmasın (14.09) */
.sat>span{display:block}
.js .sat>span{transform:translate3d(0,108%,0);transition:transform 1.3s var(--expo)}
.js .sat+.sat>span{transition-delay:.09s}
.js .sat+.sat+.sat>span{transition-delay:.18s}
.js body.hazir .sat>span,.js .sat.gor>span{transform:none}
.perde-kap{position:relative;overflow:clip}
.js .perde-kap::after{content:"";position:absolute;inset:0;background:var(--zemin);transform-origin:top;transition:transform 1.3s var(--inout);z-index:2}
.js .perde-kap.gor::after{transform:scaleY(0)}

/* ─── 17. SAYFA GEÇİŞİ ─── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:j-vt-cik .45s var(--inout) both}
::view-transition-new(root){animation:j-vt-gir .6s var(--expo) both}
::view-transition-group(j-ust),::view-transition-group(j-oyn){animation-duration:.5s}
@keyframes j-vt-cik{to{opacity:0;transform:scale(.985)}}
@keyframes j-vt-gir{from{opacity:0}}
/* destek yoksa örtü */
.ortu{position:fixed;inset:0;z-index:180;background:var(--zemin-2);display:flex;align-items:flex-end;padding:var(--pad);pointer-events:none;transform:translate3d(0,101%,0)}
.ortu b{font-size:var(--t-dev);font-weight:800;letter-spacing:-.045em;line-height:.86;transform:translate3d(0,40%,0);opacity:0}
.ortu.kapan{transition:transform .55s var(--inout);transform:none;pointer-events:auto}
.ortu.kapan b{transition:transform .7s var(--expo) .1s,opacity .4s var(--quint) .1s;transform:none;opacity:1}
.ortu.kapali{transform:none}
.ortu.kapali b{transform:none;opacity:1}
.ortu.acil{transition:transform .8s var(--inout);transform:translate3d(0,-101%,0)}
/* sayfa kimliği: her data-sayfa kendi giriş hareketiyle açılır (aynı dil, farklı hareket) */
body[data-sayfa] main{animation:.9s var(--expo) both}
body[data-sayfa="ana"] main{animation-name:j-giris-perde}
body[data-sayfa="cizelge"] main{animation-name:j-giris-yatay}
body[data-sayfa="kayit"] main{animation-name:j-giris-odak;animation-duration:1.1s}
body[data-sayfa="soz-onda"] main{animation-name:j-giris-dalga}
body[data-sayfa="kimdir"] main{animation-name:j-giris-portre}
body[data-sayfa="guncel"] main{animation-name:j-giris-gazete}
body[data-sayfa="iz-birakanlar"] main{animation-name:j-giris-izgara}
body[data-sayfa="seyir-defteri"] main{animation-name:j-giris-sayfa;animation-duration:1.2s}
@keyframes j-giris-perde{from{opacity:0;transform:translate3d(0,48px,0)}}
@keyframes j-giris-yatay{from{opacity:0;transform:translate3d(9vw,0,0)}}
@keyframes j-giris-odak{from{opacity:0;transform:scale(1.06)}}
@keyframes j-giris-dalga{from{opacity:0;transform:translate3d(0,-40px,0) scaleY(1.04)}}
@keyframes j-giris-portre{from{opacity:0;transform:scale(.94)}}
@keyframes j-giris-gazete{from{opacity:0;transform:translate3d(0,-28px,0)}}
@keyframes j-giris-izgara{from{opacity:0;transform:scale(1.08)}}
@keyframes j-giris-sayfa{from{opacity:0;transform:perspective(1400px) rotateY(-14deg) translate3d(4vw,0,0)}}
/* sayfaya özel giriş bandı: data-sayfa'ya göre renk/hareket değişen ince çizgi */
.giris-bandi{position:fixed;left:0;right:0;top:var(--ust);height:3px;z-index:59;background:var(--metin);transform-origin:left;transform:scaleX(0);pointer-events:none;animation:j-band 1.1s var(--inout) both}
body[data-sayfa="soz-onda"] .giris-bandi{background:var(--mor)}
body[data-sayfa="kayit"] .giris-bandi,body[data-sayfa="cizelge"] .giris-bandi{background:var(--mavi)}
@keyframes j-band{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.1%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ─── 18. PODCAST OYNATICISI ─── */
.oyn-mini{display:flex;align-items:center;gap:4px;height:44px;view-transition-name:j-oyn}
.oyn-mini-oynat{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);background:var(--metin);color:#fff;flex:none}
.oyn-mini-oynat svg{width:16px;height:16px}
.oyn-mini-oynat::after{content:"";position:absolute;inset:-4px;border:2px solid var(--mor);border-radius:5px;opacity:0;transform:scale(.85)}
.oyn-mini[data-durum="surdur"] .oyn-mini-oynat::after{animation:j-nabiz 1.6s var(--quint) infinite}
@keyframes j-nabiz{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
.oyn-mini-bilgi{display:flex;align-items:center;gap:.55rem;height:44px;padding:0 .3rem;border:1px solid var(--cizgi);border-radius:var(--r);position:relative;overflow:clip;min-width:44px}
.oyn-mini-bilgi:hover,.oyn-mini-bilgi[aria-expanded="true"]{border-color:var(--metin)}
.oyn-mini-bilgi img,.oyn-mini-bilgi .monogram{width:34px;height:34px;object-fit:cover;border-radius:2px;flex:none;font-size:.8rem}
.oyn-mini-yazi{display:none;min-width:0;width:12.5rem;text-align:left;line-height:1.15}
.oyn-mini-ust{display:block;color:var(--soluk);font-size:.6875rem}
.oyn-mini-baslik{display:block;overflow:hidden;white-space:nowrap;font-weight:600;font-size:.875rem;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.oyn-mini-baslik span{display:inline-block;padding-right:2rem}
.oyn-mini[data-durum="caliyor"] .oyn-mini-baslik span{animation:j-kay-tek 14s linear infinite}
@keyframes j-kay-tek{0%,15%{transform:none}100%{transform:translate3d(-100%,0,0)}}
.oyn-mini-cubuk{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
.oyn-mini-cubuk b{position:absolute;inset:0;background:var(--mor);transform-origin:left;transform:scaleX(var(--p,0))}
.dalga{display:none;align-items:flex-end;gap:2px;height:14px;flex:none}
.dalga i{width:2px;height:100%;background:var(--metin);transform-origin:bottom;transform:scaleY(.3)}
.oyn-mini[data-durum="caliyor"] .dalga i{animation:j-dalga 1s var(--quint) infinite alternate}
.dalga i:nth-child(2){animation-delay:-.35s!important}.dalga i:nth-child(3){animation-delay:-.7s!important}
@keyframes j-dalga{to{transform:scaleY(1)}}
@media (min-width:760px){.oyn-mini-yazi{display:block}.dalga{display:flex}}

.oyn-panel{position:fixed;z-index:72;top:calc(var(--ust) + .5rem);right:var(--pad);left:var(--pad);max-height:calc(100svh - var(--ust) - 1rem);overflow:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--metin);border-radius:var(--r-kart);visibility:hidden;opacity:0;transform:translate3d(0,-14px,0) scale(.985);transform-origin:top right;transition:opacity .35s var(--quint),transform .8s var(--expo),visibility 0s linear .8s}
.oyn-panel.acik{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--quint),transform .8s var(--expo),visibility 0s}
@media (min-width:760px){.oyn-panel{left:auto;width:29rem}}
.oyn-bas{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:.5rem .5rem .5rem var(--s4);border-bottom:1px solid var(--cizgi);position:sticky;top:0;background:#fff;z-index:2}
.oyn-bas .mono{color:var(--soluk)}
.oyn-ikon{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);flex:none;position:relative}
.oyn-ikon:hover{background:var(--zemin-2)}
.oyn-ikon svg{width:20px;height:20px}
.oyn-ikon small{position:absolute;font-family:var(--fm);font-size:.5625rem;font-weight:500;bottom:6px;left:0;right:0;text-align:center}
.oyn-govde{padding:var(--s4)}
.oyn-sahne{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:var(--s3);align-items:center}
.oyn-kapak{aspect-ratio:1;overflow:clip;background:var(--zemin-2);border-radius:2px;position:relative}
.oyn-kapak img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.oyn-panel[data-durum="caliyor"] .oyn-kapak img{transform:scale(1.06)}
.oyn-kapak .monogram{position:absolute;inset:0;font-size:2.2rem}
.oyn-baslik{font-size:1.25rem;font-weight:600;line-height:1.15;letter-spacing:-.015em}
.oyn-meta{margin-top:.35rem;color:var(--soluk)}
.oyn-aciklama{margin-top:var(--s3);color:var(--soluk);font-size:var(--t-k);line-height:1.45}
.oyn-not{margin-top:var(--s3);padding:.6rem .75rem;background:var(--mor-ton);color:var(--mor-koyu);border-radius:var(--r);font-size:.875rem;line-height:1.4}
.oyn-ilerleme{position:relative;height:44px;margin-top:var(--s3);cursor:pointer;touch-action:none;outline-offset:0}
.oyn-ilerleme .iz{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:var(--cizgi);overflow:clip;border-radius:2px}
.oyn-ilerleme .tampon,.oyn-ilerleme .dolu{position:absolute;inset:0;transform-origin:left;transform:scaleX(0)}
.oyn-ilerleme .tampon{background:var(--cizgi-koyu);opacity:.5}
.oyn-ilerleme .dolu{background:var(--metin)}
.oyn-ilerleme .tutamac{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--metin);transform:scale(.6);transition:transform .3s var(--aww)}
.oyn-ilerleme:hover .tutamac,.oyn-ilerleme:focus-visible .tutamac,.oyn-ilerleme.surukle .tutamac{transform:scale(1)}
.oyn-zaman{display:flex;justify-content:space-between;color:var(--soluk);margin-top:-.35rem}
.oyn-kontrol{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-top:var(--s3)}
.oyn-buyuk{width:64px;height:64px;border-radius:50%;background:var(--metin);color:#fff;display:grid;place-items:center;transition:transform .5s var(--aww)}
.oyn-buyuk:hover{transform:scale(1.06)}
.oyn-buyuk:active{transform:scale(.95)}
.oyn-buyuk svg{width:24px;height:24px}
.oyn-arac{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--cizgi)}
.oyn-hiz{text-align:center;min-width:64px;height:44px;border:1px solid var(--cizgi);border-radius:var(--r);font-family:var(--fm);font-weight:500;font-size:.875rem}
.oyn-hiz:hover{border-color:var(--metin)}
.oyn-ses{display:flex;align-items:center;gap:.2rem}
.oyn-ses input{width:7rem;height:44px;accent-color:var(--metin);cursor:pointer}
@media (hover:none){.oyn-ses input{display:none}}
.oyn-liste{margin-top:var(--s4);border-top:1px solid var(--metin)}
.oyn-liste-bas{display:flex;justify-content:space-between;padding:var(--s3) 0 .3rem;color:var(--soluk)}
.oyn-oge{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.75rem;align-items:center;width:100%;padding:.55rem 0;min-height:44px;border-bottom:1px solid var(--cizgi);text-align:left}
.oyn-oge .k{width:3rem;height:3rem;overflow:clip;background:var(--zemin-2);border-radius:2px}
.oyn-oge .k img{width:100%;height:100%;object-fit:cover}
.oyn-oge .k.monogram{font-size:1rem}
.oyn-oge b{display:block;font-weight:600;font-size:.975rem;line-height:1.2;transition:transform .6s var(--expo)}
.oyn-oge:hover b{transform:translate3d(4px,0,0)}
.oyn-oge small{display:block;color:var(--soluk);font-family:var(--fm);font-size:.75rem;text-transform:uppercase;margin-top:.15rem}
.oyn-oge .rozet{font-family:var(--fm);font-size:.6875rem;text-transform:uppercase;padding:.2rem .35rem;border-radius:2px;white-space:nowrap}
.oyn-oge[aria-current="true"] .rozet{background:var(--metin);color:#fff}
.oyn-oge.siradaki .rozet{border:1px solid var(--metin)}
.oyn-bos{padding:var(--s5) var(--s4);text-align:left}
.oyn-bos b{display:block;font-size:var(--t-b);font-weight:800;letter-spacing:-.03em;line-height:1}
.oyn-bos p{color:var(--soluk);margin-top:var(--s2);font-size:var(--t-k)}
/* sayfa içi ses listesi bileşeni */
.ses-listesi{border-top:1px solid var(--metin)}
.ses-sat{display:grid;grid-template-columns:44px 3.5rem minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--cizgi)}
.ses-sat .k{width:3.5rem;height:3.5rem;overflow:clip;background:var(--zemin-2)}
.ses-sat .k img{width:100%;height:100%;object-fit:cover}
.ses-sat .k.monogram{font-size:1.1rem}
.ses-sat b{display:block;font-weight:600;line-height:1.2}
.ses-sat small{display:block;color:var(--soluk);font-family:var(--fm);font-size:.75rem;text-transform:uppercase;margin-top:.2rem}
.ses-oynat{width:44px;height:44px;border-radius:50%;border:1px solid var(--metin);display:grid;place-items:center;transition:transform .5s var(--aww)}
.ses-oynat:hover{transform:scale(1.08)}
.ses-oynat svg{width:14px;height:14px}
.ses-oynat[aria-pressed="true"]{background:var(--metin);color:#fff}
.ses-bos{padding:var(--s4) 0;color:var(--soluk)}

/* ─── 19. ALTBİLGİ ─── */
.alt-bilgi{margin-top:var(--s6);background:var(--zemin-2);padding:var(--s5) 0 var(--s2)}
.ab-dev{font-size:clamp(3rem,12vw,10rem);font-weight:800;letter-spacing:-.05em;line-height:.85;margin-bottom:var(--s5)}
.ab-dev a{display:inline-flex;align-items:baseline;gap:.2em;min-height:44px;padding-block:.08em}
.ab-dev .ok{font-size:.5em;transition:transform .8s var(--aww)}
.ab-dev a:hover .ok{transform:translate3d(.15em,-.15em,0)}
.ab-satir{display:grid;gap:var(--s5)}
.ab-logo img{height:40px;width:auto}
.ab-logo p{color:var(--soluk);margin-top:var(--s3);max-width:34ch;font-size:1rem}
.alt-bilgi h2{color:var(--soluk);margin-bottom:var(--s2);font-size:inherit;font-weight:inherit;line-height:inherit}
.alt-bilgi li a{display:flex;align-items:center;min-height:44px;font-weight:600}
.imza{margin-top:var(--s5);padding-top:var(--s2);border-top:1px solid var(--cizgi);display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem;font-size:.875rem;color:var(--soluk)}
.imza a{min-height:44px;display:inline-flex;align-items:center;color:var(--metin)}
@media (max-width:899px){.ab-satir{grid-template-columns:1fr 1fr;gap:var(--s4)}.ab-logo{grid-column:1/-1}}
@media (min-width:900px){.ab-satir{grid-template-columns:2fr 1fr 1fr 1fr}}

/* ana sayfa: altbilgideki dev bağlantı 02 bölümünü tekrar ediyordu — yalnız ana sayfada gizli (alt sayfalar bu altbilgiyi üreteçte /j/index.html'den okur) */
body[data-sayfa="ana"] .ab-dev{display:none}
body[data-sayfa="ana"] .alt-bilgi{margin-top:0}

/* ─── 20. HAREKET AZALTMA ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .js .bel,.js .bel--sol,.js .bel--olcek,.js .bel--don,.js .serit-iz>li{opacity:1;transform:none}
  .js .sat>span{transform:none}.js .perde-kap::after{transform:scaleY(0)}
  .levha,.levha-ic,.levha-ic img{transform:none!important}
  .slayt{opacity:0}.slayt.aktif{opacity:1}
  .imlec,.giris-bandi{display:none}
}

/* ─── 21. EK BİLEŞENLER (Dalga 2) — geriye uyumlu, yalnız ekleme ─── */
.filtre-gizli{display:none!important}
.kirinti{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem;color:var(--soluk);font-size:var(--t-k)}
.kirinti a{min-height:44px;display:inline-flex;align-items:center;color:var(--metin)}
.kirinti a:hover{text-decoration:underline}
/* R31: kırıntı ortak çerçevede (layouts/ana) — her sayfada aynı yükseklikte; altındaki ilk blok hep aynı aralıkla başlar */
.kirinti-kap{padding-top:var(--s4)}
.kirinti b{color:var(--metin);font-weight:600}
main>.kirinti-kap+*{padding-top:var(--s4)!important;margin-top:0!important}
main>.kirinti-kap+*>:first-child{margin-top:0!important;padding-top:0!important}
/* R31: sayfa başlığı her sayfada aynı yükseklikte başlar; üstünde küçük etiket varsa arada tek aralık */
/* R31: liste, metin ve form sayfalarının ortak başı (eskiden yalnız j-guncel-sayfa.css'teydi; üç sayfa yüklemiyordu) */
.gn-bas{padding-top:var(--s5)}
.gn-bas .t-dev{margin-top:var(--s3)}
.gn-ozet{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin-top:var(--s4);color:var(--soluk)}
.gn-ozet--metin{display:block;max-width:62ch;font-size:var(--t-g);line-height:1.5}
main>.kirinti-kap+* h1{margin-top:0!important}
main>.kirinti-kap+* :is(.cz-ust,.sd-ust,.etkinlikler-ust){margin-top:0!important}
main>.kirinti-kap+* :is(.cz-ust,.sd-ust,.etkinlikler-ust,.kayit-meta)+h1{margin-top:var(--s2)!important}
.onizleme{position:fixed;left:0;top:0;z-index:40;width:17rem;aspect-ratio:4/3;overflow:clip;pointer-events:none;background:var(--zemin-2);opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(.92);transition:opacity .35s var(--quint),transform .7s var(--expo)}
.onizleme.gor{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) scale(1)}
.onizleme img{width:100%;height:100%;object-fit:cover}
.bildirim{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:190;background:var(--metin);color:#fff;padding:.75rem 1rem;border-radius:var(--r);font-size:var(--t-k);max-width:calc(100vw - 2*var(--pad));transform:translate3d(-50%,180%,0);opacity:0;transition:transform .6s var(--aww),opacity .3s var(--quint);pointer-events:none}
.bildirim.gor{transform:translate3d(-50%,0,0);opacity:1}
.kart-izgara .g.monogram{display:grid;font-size:2rem}
.kart-izgara .mono{display:block;color:var(--soluk);margin-top:.55rem}
.kart-izgara b{display:block;font-weight:600;line-height:1.2;margin-top:.15rem}
/* oynatıcı ekleri: sıra, paylaş, çentik, sayfa sahnesi */
.oyn-li{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:.4rem;border-bottom:1px solid var(--cizgi)}
.oyn-li .oyn-oge{border-bottom:0}
.oyn-sira-ekle{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--cizgi);border-radius:var(--r)}
.oyn-sira-ekle svg{width:16px;height:16px}
.oyn-sira-ekle:hover,.oyn-sira-ekle[aria-pressed="true"]{border-color:var(--metin)}
.oyn-sira{margin-top:var(--s3)}
.oyn-sira .oyn-liste-bas{border-top:1px solid var(--cizgi)}
.oyn-sira-bos{color:var(--soluk);font-size:.875rem;line-height:1.4;padding:.2rem 0 .4rem}
.oyn-paylas{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .8rem;border:1px solid var(--cizgi);border-radius:var(--r);font-size:.875rem;font-weight:600}
.oyn-paylas svg{width:16px;height:16px}
.oyn-paylas:hover{border-color:var(--metin)}
.oyn-arac{flex-wrap:wrap}
.cetikler{position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}
.cetikler i{position:absolute;top:-7px;width:2px;height:14px;margin-left:-1px;background:var(--mor)}
.oyn-perdeler{margin-top:var(--s3)}
.oyn-perde{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:.6rem;align-items:center;width:100%;min-height:44px;border-bottom:1px solid var(--cizgi);text-align:left}
.oyn-sahne-buyuk .oyn-meta{margin-top:0}
.oyn-baslik--buyuk{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:.95;margin-top:.6rem}
[data-oynatici-sahne] .oyn-ilerleme{height:56px;margin-top:var(--s4)}
[data-oynatici-sahne] .oyn-ilerleme .iz{height:6px;margin-top:-3px}
[data-oynatici-sahne] .oyn-kontrol{justify-content:flex-start;gap:.6rem;flex-wrap:wrap}
[data-oynatici-sahne] .oyn-buyuk{width:80px;height:80px}
[data-oynatici-sahne] .oyn-buyuk svg{width:30px;height:30px}
.ses-oynat svg{width:14px;height:14px}
/* sayfalar arası yön: önceki/sonraki kayıt */
html.vt-ileri::view-transition-old(root){animation:j-vt-sola .5s var(--quint) both}
html.vt-ileri::view-transition-new(root){animation:j-vt-sagdan .5s var(--quint) both}
html.vt-geri::view-transition-old(root){animation:j-vt-saga .5s var(--quint) both}
html.vt-geri::view-transition-new(root){animation:j-vt-soldan .5s var(--quint) both}
@keyframes j-vt-sola{to{transform:translate3d(-6%,0,0);opacity:0}}
@keyframes j-vt-sagdan{from{transform:translate3d(6%,0,0);opacity:0}}
@keyframes j-vt-saga{to{transform:translate3d(6%,0,0);opacity:0}}
@keyframes j-vt-soldan{from{transform:translate3d(-6%,0,0);opacity:0}}
::view-transition-group(*){animation-timing-function:cubic-bezier(.19,1,.22,1)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .onizleme,.bildirim{transition:none}
}

/* ── ana menüde alt menü (panelden gelen menü yapısı) ── */
.nav-grup{position:relative;display:inline-flex}
.nav-grup-bas{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:.55rem .6rem;display:inline-flex;gap:.3rem;align-items:center;min-height:44px}
.nav-alt{position:absolute;top:100%;left:0;display:none;flex-direction:column;min-width:13rem;background:var(--zemin,#fff);border:1px solid var(--cizgi,#e6e6e6);border-radius:.6rem;padding:.35rem;box-shadow:0 8px 28px rgba(0,0,0,.09);z-index:60}
.nav-grup[data-acik] .nav-alt,.nav-grup:focus-within .nav-alt{display:flex}
.nav-alt a{padding:.6rem .7rem;border-radius:.4rem;min-height:44px;display:flex;align-items:center}
.nav-alt a:hover,.nav-alt a:focus-visible{background:var(--yuzey-2,#f3f3f3)}
@media (hover:hover){.nav-grup:hover .nav-alt{display:flex}}

/* ── mobilde üst bar: Üye Ol düğmesi menü tuşunu itiyordu (çekmecede zaten var) ── */
@media (max-width:820px){
  .ust-sag .dugme--birincil{display:none}
  .nav-grup{display:none}
}

/* İçerik gövdesi (App\Support\Govde, 27.09): paragraf aralığı · liste · ara başlık · alıntı · bağlantı — her sayfada aynı */
.govde>*+*,.hb-metin>*+*,.kn-metin>*+*{margin-top:1.05em}
.govde-liste{list-style:disc;padding-left:1.25em}
.govde-liste li+li{margin-top:.4em}
.govde-liste li::marker{color:var(--mavi)}
.govde-baslik{font-size:var(--t-b);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:1.6em !important}
.govde-alinti{border-left:3px solid var(--mavi);padding:.2em 0 .2em 1em;color:var(--metin);font-style:italic}
.govde a,.hb-metin a,.kn-metin a{color:var(--mavi);border-bottom:1px solid currentColor;text-decoration:none}
.govde a:hover,.hb-metin a:hover,.kn-metin a:hover{color:var(--mavi-koyu)}

/* Sayfa galerisi: görsel kendi boyundan büyütülmez, kırpılmaz */
.sayfa-galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--s3);margin-top:var(--s4)}
.sayfa-galeri figure{margin:0;background:var(--zemin-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden}
.sayfa-galeri img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* Kitap kartları (/kitaplar) */
.kitap-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:var(--s4);margin-top:var(--s4)}
.kitap-kart{display:flex;flex-direction:column;gap:var(--s2);color:inherit;text-decoration:none}
.kitap-kart .kk-kapak{aspect-ratio:3/4;background:var(--zemin-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--cizgi)}
.kitap-kart .kk-kapak img{width:100%;height:100%;object-fit:contain}
.kitap-kart .kk-kapak .mono{font-size:2.2rem;color:var(--soluk)}
.kitap-kart .kk-ad{font-weight:600;line-height:1.2}
.kitap-kart:hover .kk-ad{color:var(--mavi)}
.kitap-kart .kk-alt{color:var(--soluk);font-size:var(--t-k)}
.kitap-kapak-tek{max-width:18rem;margin-top:var(--s4)}
/* Büyük başlık, üstündeki etiket/kırıntıya binmesin (.sat'ın -.22em payı yukarı çekiyordu; İ noktası değiyordu — 27.09) */
h1.t-dev{margin-top:.28em}
/* Form seçenekleri (İz bırak / Söz sende): düğme etiketine yapışık, 44px dokunma hedefi (27.09: 13×13 ve etiketten ayrıydı) */
.form-alan fieldset,fieldset.form-alan{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
fieldset.form-alan legend{width:100%;margin-bottom:var(--s2);font-weight:600}
.secenek{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1rem;border:1px solid var(--cizgi);border-radius:var(--r);cursor:pointer;text-align:left}
.secenek input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--mavi)}
.secenek:has(input:checked){border-color:var(--metin);background:var(--zemin-2)}
.buyutme{background:#fff} /* arkadaki sayfa seçilmesin (27.09) */