/* ═══════════════════════════════════════════════════════════════════
   BUENAS · V5
   Yapı barrelgastropub.com'un mimarisidir: yatay kayan tam ekran
   bölümler, 100px sabit sol dikey ray, hayalet tipografi, sola hizalı
   dev sıkışık kapitaller, sağda dar tam boy fotoğraf şeridi.
   İçerik, fotoğraf ve çizimler Buenas'ındır.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --green    : #2C3826;   /* koyu bölüm zemini */
  --green-d  : #232D1E;   /* ray, en koyu alanlar */
  --green-l  : #33442A;   /* filigran tipografi (referansın lightGreen'i) */
  --cream    : #FEEEBC;   /* açık bölüm zemini */
  --cream-2  : #F8E3A4;   /* açık zemin dokusu */
  /* alfa ve vurgu değerleri hesaplanarak kilitlendi (WCAG AA):
     --ink-3 krem üzerinde 4.5:1 için en az .70, --pale-3 yeşil üzerinde .56,
     --gold-t yeşil üzerinde metin olarak 4.66:1. */
  --gold     : #C9922B;   /* dolgu · üzerine koyu metin gelir (5.99:1) */
  --gold-t   : #CD952C;   /* koyu zeminde metin/işaret (4.66:1) */
  --rust     : #86502C;   /* açık zeminde işaret */
  --ink      : #2C3826;   /* açık zeminde metin */
  --ink-2    : rgba(44,56,38,.78);
  --ink-3    : rgba(44,56,38,.70);
  --pale-2   : rgba(254,238,188,.80);
  --pale-3   : rgba(254,238,188,.58);
  --hair-d   : rgba(254,238,188,.20);
  --hair-l   : rgba(44,56,38,.24);

  --rail     : 100px;
  --gut      : clamp(28px,4.4vw,80px);
  --ease     : cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--green);color:var(--cream);
  font:400 16px/1.65 "Sorts Mill Goudy",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                      /* yatay mod: sayfa kendi kaymaz */
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,p,figure,ul,blockquote{margin:0;padding:0}
ul{list-style:none}

::selection{background:var(--gold);color:#1A2116}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── Tipografi ────────────────────────────────────────────────────── */
/* Referansın display yüzü FabiolaCapitals tescillidir. Yoğunluğu ölçüldü:
   glif başına 0.310em. Saira'nın değişken genişlik ekseni 'wdth' 50'de
   0.327em veriyor — serbest yüzler içinde en yakın eşleşme ve Türkçe tam. */
.disp,.rail .wordmark,.about-sign .name,.menu-head .vt,.menu-head .mk,
.contact .edge span,.cats button,.chap-facts div b,.ghost b,.ovl a{
  font-family:"Saira",Impact,sans-serif;
  font-variation-settings:"wdth" 50;
}
.disp{
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  line-height:.85;margin:0;
}
.d-xl{font-size:clamp(44px,11.6vw,158px)}  /* hero başlık */
.d-lg{font-size:clamp(30px,5vw,78px)}      /* hero üst satır, bölüm başlığı */
.d-md{font-size:clamp(28px,4.4vw,66px)}
.d-chap{font-size:clamp(64px,13.6vw,200px);font-weight:700;line-height:.82}

.lbl{
  font-family:"Anek Latin",system-ui,sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pale-3);
}
.light .lbl{color:var(--ink-3)}

.txt{font-size:15.5px;line-height:1.72;color:var(--pale-2);max-width:46ch}
.light .txt{color:var(--ink-2)}
.txt em{font-style:italic;color:var(--cream)}
.light .txt em{color:var(--ink)}

/* ── Sol sabit ray ────────────────────────────────────────────────── */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:80;
  background:var(--green-d);
  display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:22px 0 24px;
}
.rail .burger{display:flex;flex-direction:column;align-items:center;gap:9px}
.rail .burger span{
  font-family:"Anek Latin",sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cream);
}
.rail .burger i{display:block;width:30px;height:1.4px;background:var(--cream);position:relative}
.rail .burger i::after{
  content:"";position:absolute;left:0;top:6px;width:30px;height:1.4px;background:var(--cream);
  transition:transform .5s var(--ease);
}
.rail-mid{display:flex;flex-direction:column;align-items:center;gap:36px;flex:1;justify-content:center}
.vt{writing-mode:vertical-rl;text-orientation:mixed}
.rail .tag{
  font-family:"Anek Latin",sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--pale-3);
}
.rail .wordmark{
  font-weight:700;font-size:40px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream);
  writing-mode:vertical-rl;transform:rotate(180deg);line-height:1;
}
.rail .city{
  font-family:"Anek Latin",sans-serif;font-weight:400;font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--pale-3);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.rail .mono{width:26px;height:26px;opacity:.9}
.rail .mono svg{width:100%;height:100%;fill:none;stroke:var(--cream);stroke-width:1.6}
.rail .lang{
  font-family:"Anek Latin",sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.14em;color:var(--cream);
}

/* ── Yatay konteyner ──────────────────────────────────────────────── */
.hz{
  position:fixed;inset:0;
  display:flex;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;
  /* scroll-behavior:smooth YOK — yumuşatmayı motor yapıyor (easing .08).
     İkisi birlikte çalışınca tekerlek her çentikte kendini iptal eder
     ve hareket ağır hissettirir. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.hz::-webkit-scrollbar{display:none}
.pane{
  flex:0 0 100vw;height:100vh;height:100dvh;
  position:relative;overflow:hidden;
}
.pane.light{background:var(--cream);color:var(--ink)}
.pane.dark {background:var(--green);color:var(--cream)}
.inner{
  position:relative;height:100%;
  padding-left:calc(var(--rail) + var(--gut));
}

/* ── İlerleme ─────────────────────────────────────────────────────── */
.prog{
  position:fixed;left:var(--rail);right:0;bottom:0;height:2px;z-index:90;
  background:rgba(254,238,188,.12);
}
.prog i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}

/* ── 1 · Hero ─────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:29% 1fr 17%;height:100%}
.ghost{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(254,238,188,.07);
}
.ghost b{
  font-weight:700;
  font-size:clamp(150px,25vw,380px);line-height:.9;letter-spacing:.01em;
  color:var(--green-l);text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;user-select:none;
}
.hero-mid{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut) 0 clamp(30px,4vw,72px);
}
.hero-mid .d-lg{margin-bottom:.18em}
.hero-foot{
  position:absolute;left:calc(var(--rail) + 29vw);right:17%;
  bottom:clamp(26px,5vh,54px);
  display:flex;align-items:flex-end;gap:clamp(20px,3vw,48px);
  padding-left:clamp(30px,4vw,72px);padding-right:var(--gut);
}
.scroll-cue{display:flex;align-items:center;gap:14px;white-space:nowrap}
.scroll-cue .mouse{
  width:52px;height:24px;border:1px solid var(--hair-d);border-radius:999px;
  display:grid;place-items:center;position:relative;flex:none;
}
.scroll-cue .mouse::before{
  content:"";width:16px;height:1px;background:var(--gold);
  animation:nudge 2.4s var(--ease) infinite;
}
@keyframes nudge{0%,100%{transform:translateX(-6px);opacity:.4}50%{transform:translateX(6px);opacity:1}}
.hero-photo{position:relative;overflow:hidden;background:var(--green-d)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(35,45,30,.55),rgba(35,45,30,0) 42%);
}

/* ── 2 · Hakkında ─────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:34% 1fr 19%;height:100%;align-items:stretch}
.about-art{
  position:relative;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--hair-l);padding:6vh 0;
}
.about-art svg{width:88%;height:auto;max-height:76vh}
.about-mid{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut) 0 clamp(30px,4vw,72px);position:relative;
}
.about-mid .d-lg{margin-bottom:clamp(20px,3vh,34px);max-width:15ch}
.about-sign{
  position:absolute;left:clamp(30px,4vw,72px);bottom:clamp(26px,5vh,54px);
  display:flex;align-items:center;gap:22px;
}
.about-sign .badge{width:74px;height:74px;flex:none}
.about-sign .badge svg{width:100%;height:100%;fill:none;stroke:var(--ink-3);stroke-width:1.1}
.about-sign .name{
  display:block;font-weight:700;font-size:40px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);line-height:1;
}
.about-sign .note{display:block;font-size:12.5px;line-height:1.5;color:var(--ink-3);max-width:26ch;margin-top:8px}
.side-photo{position:relative;overflow:hidden;background:var(--green-d)}
.side-photo img{width:100%;height:100%;object-fit:cover}

/* ── 3 · Mekân (fotoğraf sol) ─────────────────────────────────────── */
.split{display:grid;grid-template-columns:46% 1fr;height:100%}
.split .ph{position:relative;overflow:hidden;background:var(--green-d)}
.split .ph img{width:100%;height:100%;object-fit:cover}
.split-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut) 0 clamp(34px,4.6vw,84px);
}
.split-txt .d-lg{margin-bottom:clamp(20px,3vh,34px);max-width:14ch}
.quote-line{
  margin-top:clamp(22px,3.4vh,38px);padding-top:clamp(18px,2.6vh,28px);
  border-top:1px solid var(--hair-d);max-width:46ch;
}
.quote-line blockquote{font-style:italic;font-size:16.5px;line-height:1.6;color:var(--cream)}
.quote-line .who{margin-top:12px;display:flex;align-items:center;gap:10px}
.stars{display:inline-flex;gap:2px}
.stars svg{width:12px;height:12px;fill:var(--gold-t)}

/* ── 4/5 · Gündüz & Gece ──────────────────────────────────────────── */
.chap{position:relative;height:100%}
.chap .weave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.chap-in{
  position:relative;height:100%;
  display:grid;grid-template-columns:1fr 40%;
  align-items:center;gap:clamp(24px,3vw,56px);
  padding:0 0 0 calc(var(--rail) + var(--gut));
}
.chap-txt{padding-right:clamp(20px,2.6vw,44px);max-width:52ch;position:relative;z-index:2}
.chap-txt .lbl{display:block;margin-bottom:14px}
.chap-txt .mark-rr{display:block;margin-bottom:clamp(14px,2vh,22px)}

/* amblem: metin sütununun sağ üstünde, akış dışında */
.chap-side{
  position:absolute;z-index:1;pointer-events:none;
  right:calc(40% + clamp(10px,1.6vw,28px));
  top:clamp(30px,7vh,84px);
  width:clamp(150px,17vw,250px);
}
.chapter.day .chap-side svg,.pane.light .chap-side svg{stroke:rgba(44,56,38,.55)}
.pane.dark .chap-side svg{stroke:rgba(254,238,188,.5)}
.chap-txt .d-chap{margin-bottom:clamp(16px,2.4vh,28px)}
.chap-txt .txt{margin-bottom:clamp(18px,2.6vh,30px)}
.chap-facts{display:flex;gap:clamp(20px,2.6vw,44px);flex-wrap:wrap}
.chap-facts div b{
  display:block;font-weight:700;
  font-size:clamp(22px,2.2vw,34px);line-height:1;letter-spacing:.02em;
}
.chap-facts div span{display:block;margin-top:7px}
.chap-shots{
  height:100%;display:grid;grid-template-rows:1fr 1fr;
  grid-template-columns:1fr 1fr;gap:10px;padding:clamp(30px,6vh,72px) 0;
}
.chap-shots figure{position:relative;overflow:hidden;background:var(--green-d)}
.chap-shots img{width:100%;height:100%;object-fit:cover}
.chap-shots .tall{grid-row:1/3}

/* ── 6 · Liste (organizasyon) ─────────────────────────────────────── */
.menu-pane{display:grid;grid-template-columns:1fr 22%;height:100%}
.menu-in{
  display:grid;grid-template-columns:30% 1fr;height:100%;
  padding:clamp(30px,6vh,64px) var(--gut) clamp(26px,5vh,56px) calc(var(--rail) + var(--gut));
  gap:clamp(24px,3vw,60px);
}
.menu-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:clamp(26px,4.4vh,52px)}
.menu-head .vt{
  font-weight:600;font-size:22px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.menu-head .mk{
  font-weight:700;font-size:38px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.cats li{margin-bottom:clamp(12px,2vh,22px)}
.cats button{
  font-weight:600;
  font-size:clamp(17px,1.5vw,23px);letter-spacing:.05em;text-transform:uppercase;
  color:rgba(44,56,38,.70);transition:color .4s var(--ease);
  position:relative;padding-bottom:9px;text-align:left;
}
.cats button::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.cats button:hover{color:rgba(44,56,38,.86)}
.cats button[aria-selected="true"]{color:var(--ink)}
.cats button[aria-selected="true"]::after{transform:scaleX(1)}

.items{overflow:hidden;position:relative}
.items ul{display:none}
.items ul.on{display:block;animation:fade .55s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.items li{margin-bottom:clamp(14px,2.4vh,26px);max-width:52ch}
.items .nm{
  font-size:clamp(17px,1.5vw,21px);line-height:1.25;color:var(--ink);
  display:flex;align-items:baseline;gap:12px;
}
.items .nm s{flex:1;height:1px;background:var(--hair-l);opacity:.55;text-decoration:none;transform:translateY(-4px)}
.items .nm b{
  font-family:"Anek Latin",sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.items .ds{font-style:italic;font-size:14px;line-height:1.6;color:var(--ink-3);margin-top:5px;max-width:44ch}

/* ── 7 · İletişim ─────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:auto 1fr 44%;height:100%}
.contact .edge{
  display:flex;align-items:center;justify-content:center;
  padding-left:var(--rail);width:calc(var(--rail) + 66px);
}
.contact .edge span{
  font-weight:600;font-size:26px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.contact-body{display:flex;flex-direction:column;justify-content:center;padding-right:var(--gut)}
.contact-body .d-md{margin-bottom:clamp(20px,3vh,34px)}
.rows{max-width:44ch}
.rows div{
  display:grid;grid-template-columns:112px 1fr;gap:18px;
  padding:13px 0;border-top:1px solid var(--hair-d);align-items:baseline;
}
.rows dt{margin:0}
.rows dd{margin:0;color:var(--cream)}
.rows dd a{border-bottom:1px solid var(--hair-d);transition:color .35s var(--ease),border-color .35s var(--ease)}
.rows dd a:hover{color:var(--gold-t);border-color:var(--gold-t)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,3.4vh,36px)}
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:13px 22px;
  border:1px solid var(--hair-d);border-radius:999px;
  font-family:"Anek Latin",sans-serif;font-weight:500;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn.pri{background:var(--gold);border-color:var(--gold);color:#1A2116}
.btn.pri:hover{background:#DBA637;border-color:#DBA637}
.btn.gho:hover{border-color:var(--gold-t);color:var(--gold-t)}
.contact .ph{position:relative;overflow:hidden;background:var(--green-d)}
.contact .ph img{width:100%;height:100%;object-fit:cover}
.credit{
  margin-top:clamp(26px,4vh,44px);padding-top:clamp(16px,2.4vh,24px);
  border-top:1px solid var(--hair-d);
  font-size:11.5px;color:var(--pale-3);max-width:44ch;line-height:1.55;
}

/* ── Tam ekran menü ───────────────────────────────────────────────── */
.ovl{
  position:fixed;inset:0;z-index:95;background:var(--green-d);
  display:flex;align-items:center;padding-left:calc(var(--rail) + var(--gut));
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.ovl.o{opacity:1;visibility:visible}
.ovl nav{display:flex;flex-direction:column;gap:2px}
.ovl a{
  font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,66px);line-height:1.08;letter-spacing:.03em;
  color:var(--pale-2);opacity:0;transform:translateY(24px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),color .3s var(--ease);
}
.ovl.o a{opacity:1;transform:none}
.ovl.o a:nth-child(1){transition-delay:.06s}
.ovl.o a:nth-child(2){transition-delay:.11s}
.ovl.o a:nth-child(3){transition-delay:.16s}
.ovl.o a:nth-child(4){transition-delay:.21s}
.ovl.o a:nth-child(5){transition-delay:.26s}
.ovl.o a:nth-child(6){transition-delay:.31s}
.ovl.o a:nth-child(7){transition-delay:.36s}
.ovl a:hover{color:var(--gold-t)}
.ovl-x{position:absolute;top:26px;right:34px;width:46px;height:46px}
.ovl-x::before,.ovl-x::after{
  content:"";position:absolute;left:11px;top:22px;width:24px;height:1.5px;background:var(--cream);
}
.ovl-x::before{transform:rotate(45deg)}
.ovl-x::after{transform:rotate(-45deg)}

/* ══ Giriş hareketi ═══════════════════════════════════════════════
   Referansın reveal sistemi: opacity 0 + translateY(40px), all .8s ease,
   kademeli gecikme .1→.8s. Dev bölüm başlıkları ayrıca scale(.8)→1. */
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.pane.show .rv{opacity:1;transform:translateY(0)}
.pane.show .rv-1{transition-delay:.10s}
.pane.show .rv-2{transition-delay:.20s}
.pane.show .rv-3{transition-delay:.30s}
.pane.show .rv-4{transition-delay:.40s}
.pane.show .rv-5{transition-delay:.50s}
.pane.show .rv-6{transition-delay:.60s}

/* dev bölüm başlığı: gecikmeli ölçek */
.d-chap.rv{transform:translateY(40px) scale(.8);transition-delay:.55s}
.pane.show .d-chap.rv{transform:translateY(0) scale(1)}

/* filigran sağdan girer */
.wm{opacity:0;transform:translateX(60px);transition:opacity 1s ease,transform 1s ease;transition-delay:.5s}
.pane.show .wm{opacity:1;transform:translateX(0)}

/* fotoğraflar yerine oturur */
.pane .ph img,.pane .side-photo img,.pane .hero-photo img,.pane .chap-shots img{
  transform:scale(1.08);transition:transform 1.8s var(--ease);
}
.pane.show .ph img,.pane.show .side-photo img,
.pane.show .hero-photo img,.pane.show .chap-shots img{transform:none}

@media (prefers-reduced-motion:reduce){
  .rv,.wm{opacity:1 !important;transform:none !important;transition:none !important}
  .pane .ph img,.pane .side-photo img,.pane .hero-photo img,.pane .chap-shots img{transform:none;transition:none}
  .scroll-cue .mouse::before{animation:none}
}

/* ══ Filigran başlık — dev, zemine gömülü ═════════════════════════ */
.wm{
  position:absolute;top:0;bottom:0;display:flex;align-items:center;
  pointer-events:none;user-select:none;overflow:hidden;
}
.wm b{
  font-family:"Saira",sans-serif;font-variation-settings:"wdth" 50;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(160px,22vw,340px);line-height:.9;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.pane.dark .wm b{color:var(--green-l)}
.pane.light .wm b{color:var(--cream-2)}

/* ══ Amblem çizimleri ═════════════════════════════════════════════ */
.emblem{display:block}
.emblem svg{width:100%;height:auto;display:block}
.emblem--sun  svg{stroke:var(--ink);fill:none}
.emblem--moon svg{stroke:var(--cream);fill:none}
.mark-rr{width:46px;height:auto;opacity:.85}
.mark-rr svg{width:100%;height:auto;fill:none;stroke-width:1.4}
.pane.light .mark-rr svg{stroke:var(--rust,#86502C)}
.pane.dark  .mark-rr svg{stroke:var(--gold-t)}

/* ══ Dikey kayan sütun ════════════════════════════════════════════ */
.vpane{display:grid;grid-template-columns:1fr 38%;height:100%}
.vpane-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut) 0 calc(var(--rail) + var(--gut));position:relative;z-index:2;
}
.vpane-txt .d-lg{margin-bottom:clamp(18px,2.6vh,30px);max-width:14ch}
/* filigranın altına girmesin diye ölçü kısaldı */
.vpane-txt .txt{max-width:34ch}
.vhint{
  display:inline-flex;align-items:center;gap:12px;margin-top:clamp(20px,3vh,32px);
  transition:color .4s var(--ease),opacity .4s var(--ease);
}
.vhint i{
  width:26px;height:26px;border:1px solid var(--hair-d);border-radius:999px;
  display:grid;place-items:center;flex:none;
}
.vhint i::before{
  content:"";width:1px;height:11px;background:var(--gold-t);
  animation:vnudge 2.2s var(--ease) infinite;
}
@keyframes vnudge{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:1}}

.vslider{
  height:100%;overflow-y:auto;overflow-x:hidden;position:relative;
  scrollbar-width:none;-ms-overflow-style:none;
  border-left:1px solid var(--hair-d);
}
.vslider::-webkit-scrollbar{display:none}
.vslider figure{position:relative;height:64vh;overflow:hidden;background:var(--green-d)}
.vslider img{width:100%;height:100%;object-fit:cover}
.vslider figcaption{
  position:absolute;left:18px;bottom:16px;
  font-family:"Anek Latin",sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 1px 10px rgba(13,20,12,.9);
}
.vslider::after{
  content:"";position:sticky;bottom:0;left:0;display:block;height:96px;
  background:linear-gradient(transparent,var(--green));pointer-events:none;
}
.vslider.live{cursor:ns-resize}
.vpane .vhint{opacity:.9}
.vpane:has(.vslider.live) .vhint{opacity:.35}

/* ── Mobil / tablet: dikey akışa dön ──────────────────────────────── */
@media (max-width:1000px), (pointer:coarse){
  body{overflow:auto}
  .rail{
    left:0;right:0;bottom:auto;width:100%;height:56px;
    flex-direction:row;padding:0 16px;
    border-bottom:1px solid var(--hair-d);
  }
  .rail-mid{flex-direction:row;gap:18px;flex:0;justify-content:flex-start}
  .rail .wordmark{writing-mode:horizontal-tb;transform:none;font-size:22px}
  .rail .city,.rail .tag{writing-mode:horizontal-tb;transform:none;font-size:9px}
  .rail .tag{display:none}
  .rail .mono{display:none}
  .rail .burger i::after{top:6px}

  .hz{position:static;inset:auto;display:block;overflow:visible;height:auto}
  .pane{flex:none;width:100%;height:auto;min-height:0;overflow:visible}
  .inner{padding-left:0}
  .prog{display:none}

  .hero,.about,.split,.menu-pane,.contact,.vpane{display:block;height:auto}
  .chap-in{display:block;padding:0}

  /* dikey bölüm mobilde normal akışa katılır */
  .vpane-txt{padding:clamp(64px,12vw,96px) 20px}
  .vslider{height:auto;overflow:visible;border-left:0;display:grid;gap:12px;padding:0 20px clamp(56px,10vw,80px)}
  .vslider figure{height:58vh}
  .vslider::after{display:none}
  .vhint{display:none}

  /* filigranlar mobilde küçülür, taşmaz */
  .wm{position:relative;top:auto;bottom:auto;justify-content:center;padding:24px 0}
  .wm b{writing-mode:horizontal-tb;transform:none;font-size:clamp(64px,20vw,120px)}
  .emblem{max-width:180px;margin:0 auto}

  .ghost{display:none}
  .hero-mid,.about-mid,.split-txt,.contact-body,.chap-txt,.menu-in{
    padding:clamp(64px,12vw,96px) 20px;
  }
  .hero-mid{padding-top:104px}
  .hero-foot{position:static;display:block;padding:0 20px clamp(56px,10vw,80px)}
  .hero-foot .scroll-cue{display:none}
  .hero-photo,.side-photo,.split .ph,.contact .ph{height:62vh}
  .about-art{border-right:0;border-bottom:1px solid var(--hair-l);padding:48px 20px}
  .about-art svg{width:66%;max-height:none}
  .about-sign{position:static;margin-top:36px;padding:0}
  .contact .edge{display:none}
  .credit{max-width:none}
  .chap-shots{grid-template-rows:200px 200px;padding:0 20px clamp(56px,10vw,80px)}
  .chap-side{position:static;width:auto;max-width:170px;margin:0 auto clamp(32px,6vw,48px);padding:0 20px}
  .menu-in{display:block;gap:0}
  .cats{display:flex;gap:18px;overflow-x:auto;padding-bottom:14px;margin-bottom:28px;
        border-bottom:1px solid var(--hair-l);scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cats li{margin:0;flex:none}
  .items .nm s{display:none}
  .items .nm{flex-wrap:wrap;gap:4px}
  .items .nm b{flex-basis:100%}
  .rows div{grid-template-columns:1fr;gap:5px}
}