/* ============================================================
   Denizin Rüyası - Görsel Katman
   @file assets/theme-deniz.css
   ------------------------------------------------------------
   Mobil öncelikli, koyu "gece denizi" teması.
   CetinsPanel tema katmanı olarak theme.css'ten SONRA yüklenir.
   ============================================================ */

/* ---- 1. Jetonlar ---- */
:root{
  --bg:#05070F;
  --bg-2:#090D1C;
  --surface:#101629;
  --surface-2:#161E38;
  --line:#1A2138;
  --line-2:#27314F;

  --fg:#F3F5FC;
  --fg-2:#AEB7D6;
  --fg-3:#828CAC;

  --accent:#A896FF;
  --accent-soft:#1D1840;
  --sea:#6FD8E8;
  --moon:#F7D08A;
  --ink:#07040F;

  --r-s:10px;
  --r-m:14px;
  --r-l:18px;
  --r-xl:26px;

  --pad:16px;
  --col:600px;

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,.8,.3,1);
}

/* Sayfalar arası yumuşak geçiş (destekleyen tarayıcıda) */
@view-transition{ navigation:auto; }

/* ---- 2. Temel ---- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:var(--accent); text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }

::selection{ background:#3A2E7E; color:#fff; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--col); margin:0 auto; padding:0 var(--pad); }

.sr{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ---- 3. Başlık çubuğu ---- */
.hdr{
  position:sticky; top:0; z-index:60;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(5,7,15,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line);
}
.hdr__in{
  height:58px; display:flex; align-items:center; gap:8px;
}
.brand{ display:flex; align-items:center; gap:9px; color:var(--fg); min-width:0; }
.brand__mark{ width:25px; height:25px; flex:0 0 auto; }
.brand__name{
  font-family:var(--serif); font-size:21px; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hdr__sp{ flex:1 1 auto; }
.hdr__actions{ margin-inline-start:auto; display:flex; align-items:center; gap:2px; }

.iconbtn{
  width:44px; height:44px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; color:var(--fg-2);
  transition:background .2s, color .2s;
}
.iconbtn:hover{ background:var(--surface); color:var(--fg); }

/* Üst çubuktaki kompakt arama hapı (iç sayfalar) */
.hdr__search{
  flex:1 1 auto; min-width:0; height:38px;
  display:flex; align-items:center; gap:9px;
  padding:0 13px; border-radius:12px;
  background:var(--surface); color:var(--fg-3);
  font-size:13.5px; text-align:start;
  transition:background .2s, color .2s;
}
.hdr__search:hover{ background:var(--surface-2); color:var(--fg-2); }
.hdr__search span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Okuma ilerleme çizgisi */
.progress{
  position:fixed; inset:0 auto auto 0; z-index:70;
  height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--moon));
  transition:width .1s linear;
}

/* ---- 4. Gece denizi kahramanı ---- */
/* Başlık çubuğu saydam durduğu için gökyüzü onun ARKASINA uzanır:
   kahraman bölüm çubuk yüksekliği kadar yukarı çekilip aynı kadar
   iç boşluk alır. */
.hero{ position:relative; isolation:isolate; margin-top:-58px; padding-top:58px; }
.hero__sky{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; display:block;
}
/* Canvas yoksa / kapalıysa geri düşüş */
.hero__fallback{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(60% 40% at 72% 26%, rgba(247,208,138,.20), transparent 62%),
    linear-gradient(180deg,#05070F 0%,#0B1230 54%,#070B18 100%);
}
/* Su perdesi: ay yansımasının metnin altında kalmasını sağlar ve
   kahraman bölümü sayfa zeminine görünmez biçimde bağlar. */
.hero::after{
  content:""; position:absolute; inset:36% 0 0 0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,7,15,0) 0%,
    rgba(5,7,15,.34) 40%,
    rgba(5,7,15,.82) 74%,
    var(--bg) 100%);
}
.hero__in{
  position:relative; z-index:1;
  min-height:clamp(440px,74vh,620px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:40px; padding-bottom:30px;
}
.hero__eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moon); margin:0 0 12px; opacity:.9;
}
.hero__title{
  margin:0 0 12px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,12vw,58px); line-height:1.02; letter-spacing:-.01em;
}
.hero__title em{ font-style:italic; color:var(--moon); }
.hero__sub{
  margin:0 0 22px; max-width:30ch;
  font-size:14.5px; line-height:1.6; color:var(--fg-2);
}

/* Büyük arama tetikleyici */
.searchbar{
  width:100%; height:58px;
  display:flex; align-items:center; gap:12px;
  padding:0 7px 0 16px; border-radius:var(--r-xl);
  background:rgba(16,22,41,.72);
  border:1px solid var(--line-2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--fg-3); text-align:start;
  transition:border-color .25s var(--ease), background .25s, transform .25s var(--ease);
}
.searchbar:hover{ border-color:var(--accent); transform:translateY(-1px); }
.searchbar__ph{
  flex:1 1 auto; min-width:0; font-size:15.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:opacity .35s var(--ease);
}
.searchbar__ph.is-fading{ opacity:0; }
.searchbar__go{
  width:44px; height:44px; flex:0 0 auto; border-radius:18px;
  background:var(--accent); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(168,150,255,.32);
}
.hero__stat{
  margin:16px 0 0; font-size:12.5px; color:var(--fg-3);
  display:flex; align-items:center; gap:8px;
}
.hero__dot{ width:5px; height:5px; border-radius:50%; background:var(--sea); }

/* ---- 5. Bölüm ---- */
/* Yalnızca üst boşluk: kısayol yazılırsa aynı bölüm .wrap ise
   onun yan dolgusunu ezer ve içerik ekrana yapışır. */
.sec{ padding-top:34px; }
.sec--tight{ padding-top:24px; }
.sec__head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
}
.sec__title{
  margin:0; flex:1 1 auto;
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-2);
}
.sec__more{ font-size:12.5px; font-weight:600; color:var(--accent); }
.sec__note{ font-size:12px; color:var(--fg-3); }

/* ---- 6. Harf ızgarası ---- */
.letters{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;
}
.letter{
  position:relative; height:52px; border-radius:var(--r-m);
  background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color:var(--fg); overflow:hidden;
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.letter::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 80% at 50% 0%, rgba(168,150,255,.30), transparent 70%);
  opacity:0; transition:opacity .3s var(--ease);
}
.letter:hover,.letter:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  background:var(--surface-2);
}
.letter:hover::after{ opacity:1; }
/* Harf bir VERİ etiketi - gösterim serifi değil, gövde sans'ı kullanır:
   19px'lik ince serif kutucukta okunmuyordu. */
.letter__ch{
  font-family:var(--sans); font-size:19px; font-weight:700;
  line-height:1; letter-spacing:.01em; position:relative;
}
.letter__n{
  font-size:10.5px; font-weight:500; line-height:1;
  color:#98A1BF; font-variant-numeric:tabular-nums; position:relative;
}

/* ---- 7. Liste satırı ---- */
.rows{ display:flex; flex-direction:column; }
.row{
  display:flex; align-items:center; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line);
  color:var(--fg); transition:padding-inline-start .22s var(--ease);
}
.row:hover{ padding-inline-start:6px; }
.row__badge{
  width:32px; height:32px; flex:0 0 auto; border-radius:var(--r-s);
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:14px; font-weight:700; line-height:1;
}
.row__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.row__t{
  font-size:15px; font-weight:600; line-height:1.32;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row__m{ font-size:11.5px; color:var(--fg-3); }
.row__arrow{ flex:0 0 auto; color:#4C5573; transition:color .2s, transform .2s var(--ease); }
.row:hover .row__arrow{ color:var(--accent); transform:translateX(3px); }

/* ---- 8. Rehber kartları ---- */
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.card{
  position:relative; overflow:hidden;
  padding:15px 14px 16px; border-radius:var(--r-l);
  border:1px solid var(--line); color:var(--fg);
  display:flex; flex-direction:column; gap:5px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); background:var(--bg-2); }
/* Kart başlığı da bir gezinme etiketi (liste satırıyla aynı iş) -
   gösterim serifi değil, sans. */
.card__t{ font-family:var(--sans); font-size:16px; font-weight:700; line-height:1.25; }
.card__d{ font-size:12px; line-height:1.45; color:#98A1BF; }

/* ---- 9. Reklam yuvası (CLS'e karşı sabit yükseklik) ---- */
/* Reklam yuvası. Yalnızca AdSense birim kimliği tanımlıysa basılır,
   yani boş çerçeve hiç görünmez -> kesik çizgili kenarlık kaldırıldı.
   height DEĞİL min-height: yer CLS'e karşı baştan ayrılır ama duyarlı
   birim gerekirse büyüyebilir (sabit yükseklik reklamı kırpardı). */
/* display:block (flex DEĞİL): AdSense duyarlı birimi, kapsayıcının
   kesin genişliğini ölçerek boyut seçiyor. Flex kapsayıcıda çocuk
   içeriğe göre daralabildiği için birim genişliği 0 ölçüp boş
   dönebiliyor. Yer tutucu kalktığı için ortalamaya da gerek kalmadı. */
.ad{
  margin:26px 0 0; border-radius:var(--r-m);
  display:block; width:100%; overflow:hidden;
}
.ad--rect{ min-height:250px; }
.ad--band{ min-height:100px; }
.ad__lbl{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#59628A;
}

/* ---- 10. Harf sayfası ---- */
.lhead{ display:flex; align-items:flex-end; gap:14px; padding-top:22px; }
.lhead__ch{
  width:62px; height:62px; flex:0 0 auto; border-radius:var(--r-l);
  background:var(--accent); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:32px; font-weight:700; line-height:1;
  box-shadow:0 10px 30px rgba(168,150,255,.28);
}
.lhead__body{ flex:1 1 auto; min-width:0; }
.lhead__t{
  margin:0; font-family:var(--sans); font-size:25px; font-weight:700;
  line-height:1.18; letter-spacing:-.02em;
}
.lhead__m{ font-size:12.5px; color:var(--fg-3); }

.filter{
  margin-top:18px; height:50px;
  display:flex; align-items:center; gap:11px;
  padding:0 15px; border-radius:var(--r-m);
  background:var(--surface); border:1px solid var(--line-2);
  transition:border-color .2s;
}
.filter:focus-within{ border-color:var(--accent); }
.filter input{
  flex:1 1 auto; min-width:0; background:none; border:0; outline:none;
  color:var(--fg); font-size:15px;
}
.filter input::placeholder{ color:var(--fg-3); }

.syls{
  display:flex; gap:7px; margin-top:16px;
  overflow-x:auto; scrollbar-width:none;
  padding-bottom:2px;
}
.syls::-webkit-scrollbar{ display:none; }
.syl{
  flex:0 0 auto; height:38px; padding:0 15px; border-radius:12px;
  display:flex; align-items:center; font-size:14px; font-weight:600;
  border:1px solid var(--line-2); color:var(--fg-2);
  transition:background .2s, color .2s, border-color .2s;
}
.syl:hover{ border-color:var(--accent); color:var(--fg); }
.syl.is-on{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

.btn-ghost{
  margin-top:20px; height:50px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border-radius:var(--r-m); border:1px solid var(--line-2);
  font-size:14.5px; font-weight:600; color:var(--fg);
  transition:border-color .2s, background .2s;
}
.btn-ghost:hover{ border-color:var(--accent); background:var(--bg-2); }

.btn-solid{
  height:54px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border-radius:var(--r-l); background:var(--accent); color:var(--ink);
  font-size:15px; font-weight:700;
  box-shadow:0 10px 30px rgba(168,150,255,.26);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(168,150,255,.36); }

.neigh{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:26px; }
.neigh__k{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }
.neigh__v{ font-size:14px; font-weight:600; }

/* ---- 11. Tabir / içerik sayfası ---- */
.crumb{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--fg-3); padding-top:20px;
}
.crumb a{ color:var(--fg-3); }
.crumb a:hover{ color:var(--fg-2); }

/* Sayfa başlıkları da sans: büyük punto bold sans daha sıkı harf
   aralığı ister, yoksa dağınık durur. */
.title{
  margin:10px 0 0; font-family:var(--sans); font-weight:700;
  font-size:clamp(23px,6.3vw,29px); line-height:1.22; letter-spacing:-.02em;
}
.meta{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.chip{
  height:26px; padding:0 10px; border-radius:8px;
  background:var(--accent-soft); color:var(--accent);
  font-size:11.5px; font-weight:600;
  display:inline-flex; align-items:center;
}
.meta__t{ font-size:11.5px; color:var(--fg-3); }

.prose{ margin-top:22px; }
/* İki yana yaslı. Heceleme şart: <html lang="tr"> sayesinde tarayıcı
   Türkçe hece kurallarını uygular, aksi hâlde dar sütunda kelime
   araları açılıp "beyaz nehirler" oluşur. */
.prose p{
  margin:0 0 18px; font-size:16.5px; line-height:1.82; color:#E2E6F5;
  text-align:justify; text-justify:inter-word;
  -webkit-hyphens:auto; hyphens:auto;
}
.prose p:last-child{ margin-bottom:0; }
.prose h2{
  margin:30px 0 12px; font-family:var(--sans); font-weight:700;
  font-size:22px; line-height:1.28; letter-spacing:-.015em;
}
.prose blockquote{
  margin:24px 0; padding:0 0 0 18px;
  border-inline-start:2px solid var(--accent);
  font-family:var(--serif); font-style:italic;
  font-size:21px; line-height:1.45; color:var(--fg);
}

.toc{
  margin-top:20px; padding:15px 16px;
  border-radius:var(--r-l); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.toc__k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }
.toc a{ font-size:14px; font-weight:600; color:var(--fg); }
.toc a:hover{ color:var(--accent); }

.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.tag{
  height:31px; padding:0 12px; border-radius:var(--r-s);
  border:1px solid var(--line); color:var(--fg-2); font-size:12px;
  display:inline-flex; align-items:center;
  transition:border-color .2s, color .2s;
}
.tag:hover{ border-color:var(--accent); color:var(--fg); }

/* ---- 12. Alt bilgi ---- */
.foot{
  margin-top:40px; padding:26px 0 34px;
  border-top:1px solid var(--line);
}
.foot__brand{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.foot__note{ margin:0 0 14px; font-size:11.5px; line-height:1.65; color:var(--fg-3); max-width:44ch; }
.foot__links{ display:flex; flex-wrap:wrap; gap:9px 18px; align-items:center; }
.foot__links a{ font-size:12.5px; color:var(--fg-2); }
.foot__links a:hover{ color:var(--fg); }
.foot__c{ font-size:11.5px; color:#4C5573; }

/* ---- 13. Arama katmanı ---- */
.ov{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column;
  visibility:hidden; opacity:0;
  transition:opacity .28s var(--ease), visibility .28s;
}
.ov.is-open{ visibility:visible; opacity:1; }
.ov__bd{
  position:absolute; inset:0;
  background:rgba(3,5,12,.76);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.ov__panel{
  position:relative; z-index:1;
  width:100%; max-width:var(--col); margin:0 auto;
  height:100%; display:flex; flex-direction:column;
  transform:translateY(14px) scale(.985);
  transition:transform .32s var(--ease);
}
.ov.is-open .ov__panel{ transform:none; }

.ov__bar{
  display:flex; align-items:center; gap:8px;
  padding:12px var(--pad);
}
.ov__field{
  flex:1 1 auto; min-width:0; height:52px;
  display:flex; align-items:center; gap:11px;
  padding:0 8px 0 16px; border-radius:var(--r-l);
  background:var(--surface); border:1px solid var(--accent);
  box-shadow:0 0 0 4px rgba(168,150,255,.10);
}
.ov__field input{
  flex:1 1 auto; min-width:0; background:none; border:0; outline:none;
  color:var(--fg); font-size:16px;
}
.ov__field input::placeholder{ color:var(--fg-3); }

.ov__body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px var(--pad) 24px; }
.ov__count{ font-size:12.5px; color:var(--fg-3); padding:6px 0 2px; }
.ov__group{ margin-bottom:24px; }
.ov__k{
  font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-2); margin-bottom:11px;
}
.ov__chips{ display:flex; flex-wrap:wrap; gap:7px; }
.ov__chip{
  height:35px; padding:0 13px; border-radius:11px;
  border:1px solid var(--line); color:var(--fg-2); font-size:13px;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .2s, color .2s;
}
.ov__chip:hover{ border-color:var(--accent); color:var(--fg); }

.hit.is-cursor{ background:var(--bg-2); padding-inline:8px; border-radius:var(--r-s); }
mark{ background:transparent; color:var(--accent); font-weight:700; }

.ov__empty{
  padding:44px 0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.ov__empty b{ font-size:16px; }
.ov__empty span{ font-size:13.5px; color:var(--fg-3); line-height:1.55; }

.ov__hint{
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  font-size:11.5px; color:var(--fg-3);
}
.kbd{
  display:inline-block; padding:1px 6px; margin:0 2px;
  border:1px solid var(--line-2); border-radius:5px;
  font-size:10.5px; color:var(--fg-2);
}

/* ---- 14. Belirme animasyonu ---- */
.rise{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.rise.is-in{ opacity:1; transform:none; }

.stag > *{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 22ms);
}
.stag.is-in > *{ opacity:1; transform:none; }

/* ---- 15. Tablet ---- */
@media (min-width:900px){
  :root{ --col:680px; --pad:24px; }
  .hero__in{ min-height:clamp(520px,78vh,700px); }
  .letters{ gap:8px; }
  .letter{ height:60px; }
  .letter__ch{ font-size:22px; }
  .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ---- 16. Masaüstü ---- */
/* Mobil varsayılanları: masaüstüne ait parçalar kapalı başlar */
.hdr__nav{ display:none; }
.hdr__brand{ display:none; }
.layout{ display:block; }
.layout__side{ display:none; }

@media (min-width:1024px){
  .wrap{ max-width:1180px; padding-inline:32px; }

  /* Başlık: hamburger yerine yatay menü, arama hep görünür */
  .hdr__in{ height:72px; gap:8px; }
  .hdr__back{ display:none; }
  .hdr__brand{ display:flex; }
  .hdr__nav a{
    padding:9px 12px; border-radius:10px; white-space:nowrap;
    font-size:14px; font-weight:600; color:var(--fg-2);
    transition:color .2s, background .2s;
  }
  .hdr__nav a:hover{ color:var(--fg); background:var(--surface); }
  .hdr__nav a.is-on{ color:var(--fg); background:var(--surface); }
  .hdr__search{ flex:0 0 250px; height:40px; margin-inline-start:auto; }
  .hdr__actions{ margin-inline-start:auto; }

  /* Kahraman: metin solda, ay ve yansıması sağda nefes alır */
  .hero__in{ min-height:min(80vh,780px); padding-bottom:72px; }
  .hero__eyebrow{ font-size:13px; letter-spacing:.2em; }
  .hero__title{ font-size:82px; }
  .hero__sub{ font-size:17px; max-width:40ch; margin-bottom:28px; }
  .searchbar{
    max-width:640px; height:68px; border-radius:32px;
    padding-inline-start:22px; padding-inline-end:9px;
  }
  .searchbar__ph{ font-size:17px; }
  .searchbar__go{ width:52px; height:52px; border-radius:22px; }
  .hero__stat{ font-size:13.5px; margin-top:20px; }

  /* Masaüstünde de 7'li sıra - mobil/tablet ile aynı ritim, sadece
     daha iri. (14'lü dizilim harfleri küçük ve sıkışık gösteriyordu.) */
  .letters{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
  .letter{ height:88px; border-radius:16px; }
  .letter__ch{ font-size:30px; }
  .letter__n{ font-size:12px; margin-top:2px; }

  /* Uzun listeler iki sütuna açılır */
  .rows--split{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:44px;
  }

  .cards{ gap:12px; }
  .card{ padding:17px 16px 18px; }
  .card__t{ font-size:17px; }

  /* İçerik + yapışkan kenar çubuğu */
  .layout{
    display:grid; grid-template-columns:minmax(0,1fr) 300px;
    gap:56px; align-items:start;
  }
  .layout__side{
    display:flex; flex-direction:column; gap:20px;
    position:sticky; top:96px;
  }
  .layout__side .ad{ margin:0; }
  .layout__side .row{ padding:11px 0; }
  .side__k{
    font-size:12px; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--fg-2); margin-bottom:10px;
  }

  /* Metin de başlıkla aynı hizada bitsin: genişliği sütun belirler.
     Kabuk 1180px'de sabit olduğu için satır uzunluğu kontrol altında. */
  .prose p{ font-size:17px; }
  /* Sütun genişliğini sonuna kadar kullansın - daraltma yok */
  .title{ font-size:36px; }
  .lhead__ch{ width:76px; height:76px; font-size:40px; border-radius:var(--r-xl); }
  .lhead__t{ font-size:31px; }
  .filter{ max-width:520px; }

  .ad--band{ min-height:90px; }
  .ad--tower{ min-height:600px; }

  .sec{ padding-top:46px; }
  .foot{ margin-top:64px; padding-bottom:44px; }
}

/* Yatay menü ancak marka + menü + arama alanı sığdığında açılır;
   altında hamburger görevde kalır. */
@media (min-width:1160px){
  .hdr__nav{ display:flex; align-items:center; gap:2px; margin-inline-start:20px; }
  .hdr__menu{ display:none; }
}

@media (min-width:1400px){
  .hero__title{ font-size:92px; }
}

/* ============================================================
   17. blog_feed bloğunu deniz listesine çevir
   ------------------------------------------------------------
   Harf sayfaları panelde `blog_feed` bloğuyla kuruluyor ve blok
   kendi kart markup'ını üretiyor:
     .blk-cards > a.blk-card-post > (__img, __body > __cat/__title/__date)
   Blok dosyası PAYLAŞILAN motorun parçası (master ile birebir aynı
   kalmalı), o yüzden markup'a dokunmuyoruz — sadece tema katmanında
   yoğun satır listesine dönüştürüyoruz.
   ============================================================ */

.blk-blogfeed{ padding:0; }
.blk-blogfeed__title{
  font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2);
  padding:0; margin:0 0 12px;
}
.blk-blogfeed__title::before{ display:none; }   /* master temasının çizgisi */

/* Izgarayı tek sütunlu listeye indir */
.blk-cards,
.blk-cards--2,
.blk-cards--3,
.blk-cards--4{
  display:flex !important;
  grid-template-columns:none !important;
  flex-direction:column;
  gap:0;
}

.blk-card-post{
  position:relative;
  /* flex-direction ŞART: theme.css kartı "column" yapıyor (görsel üstte,
     gövde altta). Yönü satıra çevirmezsek flex-grow gövdeyi DİKEY büyütür,
     align-items:center de yatayda daraltır -> metin ortalanır ve uzun
     başlık kutudan taşar. */
  display:flex; flex-direction:row; align-items:center; gap:12px;
  padding:14px 28px 14px 0;
  border:0; border-bottom:1px solid var(--line);
  border-radius:0; background:none; box-shadow:none;
  color:var(--fg); overflow:visible;
  transition:padding-inline-start .22s var(--ease);
}
.blk-card-post:hover{
  background:none; box-shadow:none; transform:none;
  padding-inline-start:6px;
}

/* Bu sitede öne çıkan görsel yok - boş kutu yer kaplamasın */
.blk-card-post__img{ display:none; }

/* Harf sayfasında her satır aynı kategoride: etiket gereksiz tekrar */
.blk-card-post__cat{ display:none; }

/* flex-basis 0 + min-width 0: metnin "..." ile kırpılabilmesi için
   standart kalıp. flex:1 1 auto bırakılırsa gövde içeriğe göre büyür. */
.blk-card-post__body{
  flex:1 1 0%; min-width:0; width:auto; padding:0;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  text-align:start;
}
.blk-card-post__title{
  margin:0; font-family:var(--sans); font-size:15px; font-weight:600;
  line-height:1.32; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.blk-card-post:hover .blk-card-post__title{ color:var(--fg); }
.blk-card-post__excerpt{ display:none; }
.blk-card-post__date{ font-size:11.5px; color:var(--fg-3); }

/* Sağdaki ok markup'ta yok - CSS ile çiziliyor */
.blk-card-post::after{
  content:""; position:absolute; top:50%; inset-inline-end:8px;
  width:7px; height:7px; margin-top:-4px;
  border-top:2px solid #4C5573; border-right:2px solid #4C5573;
  transform:rotate(45deg);
  transition:border-color .2s, inset-inline-end .2s var(--ease);
}
.blk-card-post:hover::after{ border-color:var(--accent); inset-inline-end:3px; }

/* Sayfalama */
.blk-pagination{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:7px; padding:24px 0 0; border:0;
}
.blk-page{
  min-width:42px; height:42px; padding:0 13px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--line-2);
  background:none; color:var(--fg-2);
  font-size:13.5px; font-weight:600;
  transition:border-color .2s, color .2s, background .2s;
}
.blk-page:hover{ border-color:var(--accent); color:var(--fg); }
.blk-page--active,
.blk-page.is-active{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--ink) !important;
}

/* Geniş ekranda liste iki sütuna açılır (.rows--split ile aynı ritim) */
@media (min-width:1024px){
  .blk-cards,
  .blk-cards--2,
  .blk-cards--3,
  .blk-cards--4{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:44px;
  }
}

/* ---- 18. Hareket azaltma ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .rise,.stag > *{ opacity:1; transform:none; }
}