/* ============================================================
   Desiber Coffee — zine / gazete düzeni
   Bölümler zemin rengiyle ayrılır; kart yok, saç teli çizgi var.
   ============================================================ */

:root{
  /* palet */
  --bg:#EDE6DA;
  --yzy:#FFFFFF;
  --mrk:#2B1F17;
  --sus:#6F5F51;
  --vrg:#8C6239;
  --vrg-metin:#7A5430;
  --cizgi:#D9CEBD;
  --cizgi-koyu:#C4B49C;

  --koyu:#231A13;
  --koyu-metin:#EDE6DA;
  --koyu-sus:#B9A895;
  --koyu-vrg:#C89A63;
  --koyu-cizgi:#3D2F24;

  --kahve:#7C5530;
  --yesil:#5C6B36;

  /* tipografi */
  --dsp:'Newsreader',Georgia,'Times New Roman',serif;
  --snf:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --govde:clamp(1rem,.95rem + .25vw,1.0625rem);
  --kucuk:.875rem;
  --minik:.75rem;

  /* boşluk ritmi */
  --b1:.25rem; --b2:.5rem; --b3:.75rem; --b4:1rem; --b5:1.5rem;
  --b6:2rem; --b7:3rem; --b8:4rem; --b9:6rem; --b10:8rem;

  --kenar:clamp(1.25rem,5vw,6rem);
  --en:1320px;
  --eg:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--mrk);
  font-family:var(--snf);
  font-size:var(--govde);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--dsp);font-weight:600;letter-spacing:-.015em}
p{margin:0}
dl,dd,dt,ol,ul{margin:0;padding:0}
li{list-style:none}
button,input,select{font:inherit;color:inherit}

/* kâğıt dokusu — zine hissi */
body::before{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(43,31,23,.14) .5px,transparent 0);
  background-size:3px 3px;mix-blend-mode:multiply;
}

.kap{max-width:var(--en);margin-inline:auto;padding-inline:var(--kenar)}

.atla{
  position:absolute;left:var(--b3);top:var(--b3);z-index:60;
  transform:translateY(-160%);
  background:var(--mrk);color:var(--bg);padding:var(--b3) var(--b5);
  font-size:var(--kucuk);text-decoration:none;
}
.atla:focus{transform:none}

:focus-visible{outline:2px solid var(--vrg-metin);outline-offset:3px}
.bol-koyu :focus-visible,.abonelik :focus-visible,.dip :focus-visible{outline-color:var(--koyu-vrg)}

/* ---------------------------------------------------- ortak parçalar */
.etiket{
  font-size:var(--minik);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;line-height:1.4;color:var(--sus);margin-bottom:var(--b4);
}
.bol-koyu .etiket{color:var(--koyu-vrg)}
.abonelik .etiket{color:#F2E0C8}

.dugme{
  display:inline-flex;align-items:center;gap:var(--b3);
  background:var(--mrk);color:var(--bg);
  padding:var(--b3) var(--b5);border:1px solid var(--mrk);border-radius:0;
  font-size:var(--kucuk);font-weight:600;letter-spacing:.02em;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--eg),color .25s var(--eg);
}
.dugme .ok{transition:transform .25s var(--eg)}
.dugme:hover{background:var(--vrg-metin);border-color:var(--vrg-metin);color:#fff}
.dugme:hover .ok{transform:translateX(4px)}
.dugme-kucuk{padding:var(--b3) var(--b5);min-height:44px}
.dugme-tam{width:100%;justify-content:space-between}

.bag-ok{
  display:inline-flex;align-items:center;gap:var(--b2);min-height:44px;
  font-size:var(--kucuk);font-weight:600;color:var(--vrg-metin);
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
}
.bag-ok>span:first-child{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:2px;transition:background-size .35s var(--eg);
}
.bag-ok .ok{transition:transform .25s var(--eg)}
.bag-ok:hover>span:first-child{background-size:100% 1px}
.bag-ok:hover .ok{transform:translateX(4px)}
.bag-acik{color:var(--bg)}
.bag-d{min-height:44px;padding-inline:var(--b2)}

.bol{padding-block:clamp(var(--b8),9vw,var(--b10));border-top:1px solid var(--cizgi)}
.bol-krem{background:var(--bg)}
.bol-beyaz{background:var(--yzy)}
.bol-koyu{background:var(--koyu);color:var(--koyu-metin);border-top:0}

.bol-bas{max-width:62ch;margin-bottom:var(--b7)}
.bol-bas h2,.mekan h3{font-size:clamp(1.75rem,3vw,3rem);line-height:1.15}
.bol-metin{margin-top:var(--b4);color:var(--sus);max-width:62ch;line-height:1.7}
.bol-koyu .bol-metin{color:var(--koyu-sus)}

/* ================================================== üst bar */
.ust{
  position:sticky;top:0;z-index:40;
  background:rgba(237,230,218,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cizgi);
}
.ust-ic{display:flex;align-items:center;gap:var(--b5);min-height:64px}
.imza{
  display:inline-flex;align-items:center;gap:var(--b3);min-height:44px;
  text-decoration:none;color:var(--mrk);flex:0 1 auto;min-width:0;
}
.isaret{color:var(--vrg);transition:transform .5s var(--eg)}
.imza:hover .isaret{transform:rotate(-24deg)}
.imza-ad{font-family:var(--dsp);font-size:1.2rem;font-weight:600;letter-spacing:-.01em}

.gez{display:flex;gap:var(--b5);margin-left:auto}
.gez a{
  font-size:var(--kucuk);font-weight:500;text-decoration:none;color:var(--mrk);
  padding-block:var(--b2);
  background-image:linear-gradient(var(--vrg),var(--vrg));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--eg);
}
.gez a:hover{background-size:100% 1px}

.ust-sag{display:flex;align-items:center;gap:var(--b4)}
.dil{display:flex;align-items:center;gap:var(--b1);font-size:var(--minik);letter-spacing:.1em}
.dil-d{
  background:none;border:0;padding:var(--b2) var(--b1);cursor:pointer;
  min-height:44px;min-width:32px;
  font-weight:600;color:var(--sus);letter-spacing:.1em;
  transition:color .25s var(--eg);
}
.dil-d[aria-pressed="true"]{color:var(--mrk);text-decoration:underline;text-underline-offset:4px}
.dil-d:hover{color:var(--vrg-metin)}
.dil-ayrac{color:var(--cizgi-koyu)}

.gez-d{
  display:none;align-items:center;gap:var(--b2);background:none;border:0;
  padding:var(--b2) 0;cursor:pointer;font-size:var(--minik);min-height:44px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap;
}
.gez-cizgi{width:20px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}

/* ================================================== kahraman */
.kahraman{position:relative;background:var(--koyu);color:var(--koyu-metin);overflow:hidden}
.kh-kare{position:absolute;inset:0}
.kh-kare img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);transition:transform 1.6s var(--eg);
}
body.yuklu .kh-kare img{transform:none}
.kh-perde{
  position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(23,16,11,.9) 0%,rgba(23,16,11,.72) 42%,rgba(23,16,11,.18) 78%),
             linear-gradient(to top,rgba(23,16,11,.75),transparent 46%);
}
.kh-ic{
  position:relative;
  min-height:clamp(520px,86svh,860px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(var(--b8),12vw,var(--b10)) var(--b7);
}
.kh-kunye{
  color:var(--koyu-vrg);border-top:1px solid rgba(237,230,218,.35);
  padding-top:var(--b3);width:fit-content;max-width:100%;
}
.kh-baslik{
  font-size:clamp(2.75rem,8.5vw,5.5rem);line-height:1.05;font-weight:600;
  letter-spacing:-.03em;margin-bottom:var(--b5);
}
.kh-baslik .satir{display:block;overflow:hidden}
.kh-baslik .satir>span{display:block;padding-bottom:.16em;margin-bottom:-.16em}
.kh-metin{max-width:52ch;color:#E2D6C6;margin-bottom:var(--b6)}
.kh-eylem{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b5)}
.kahraman .dugme{background:var(--bg);color:var(--mrk);border-color:var(--bg)}
.kahraman .dugme:hover{background:var(--koyu-vrg);border-color:var(--koyu-vrg);color:var(--koyu)}

/* açılış sahnelemesi */
.kh-kunye,.kh-baslik .satir>span,.kh-metin,.kh-eylem{will-change:transform,opacity}
.kh-kunye,.kh-metin,.kh-eylem{opacity:0;transform:translateY(16px)}
.kh-baslik .satir>span{transform:translateY(108%)}
body.yuklu .kh-kunye,body.yuklu .kh-metin,body.yuklu .kh-eylem{
  opacity:1;transform:none;transition:opacity .8s var(--eg),transform .8s var(--eg);
}
body.yuklu .kh-baslik .satir>span{transform:none;transition:transform .9s var(--eg)}
body.yuklu .kh-kunye{transition-delay:.1s}
body.yuklu .kh-baslik .satir:nth-child(1)>span{transition-delay:.18s}
body.yuklu .kh-baslik .satir:nth-child(2)>span{transition-delay:.28s}
body.yuklu .kh-metin{transition-delay:.42s}
body.yuklu .kh-eylem{transition-delay:.52s}

/* künye şeridi */
.kunye-serit{
  position:relative;background:var(--bg);color:var(--mrk);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--mrk);
}
.kunye-serit>div{
  padding:var(--b5) var(--b4);
  border-left:1px solid var(--cizgi);
  padding-inline-start:max(var(--b4),calc((100vw - var(--en))/2 + var(--kenar)));
}
.kunye-serit>div:first-child{border-left:0}
.kunye-serit>div:not(:first-child){padding-inline-start:var(--b5)}
.kunye-serit dt{font-size:var(--minik);letter-spacing:.14em;text-transform:uppercase;color:var(--sus);font-weight:600}
.kunye-serit dd{font-family:var(--dsp);font-size:clamp(1.15rem,2vw,1.6rem);font-variant-numeric:tabular-nums;margin-top:var(--b1)}

/* ================================================== kahve listesi */
.suz{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b3);margin-bottom:var(--b6)}
.suz-d{
  background:none;border:1px solid var(--cizgi-koyu);border-radius:0;
  padding:var(--b3) var(--b4);min-height:44px;font-size:var(--kucuk);font-weight:600;
  color:var(--sus);cursor:pointer;
  transition:background .25s var(--eg),color .25s var(--eg),border-color .25s var(--eg);
}
.suz-d:hover{border-color:var(--mrk);color:var(--mrk)}
.suz-d.etkin{background:var(--mrk);border-color:var(--mrk);color:var(--bg)}
.suz-sayi{margin-left:auto;font-size:var(--kucuk);color:var(--sus);font-variant-numeric:tabular-nums}

.kah-liste{border-top:2px solid var(--mrk)}
.kahve{
  display:grid;align-items:start;gap:var(--b5);
  grid-template-columns:2.5rem minmax(0,1.05fr) minmax(0,1.15fr) auto;
  padding:var(--b6) var(--b3);border-bottom:1px solid var(--cizgi);
  transition:background .3s var(--eg);
}
.kahve:hover{background:#FBF7F0}
.kahve[hidden]{display:none}
.kah-no{font-family:var(--dsp);font-size:1.5rem;color:var(--cizgi-koyu);line-height:1.1}
.kah-kimlik h3{font-size:clamp(1.25rem,1.9vw,1.65rem);line-height:1.2}
.kah-tat{margin-top:var(--b2);color:var(--sus);font-size:var(--kucuk);max-width:30ch}
.kah-veri{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--b5)}
.kah-veri>div{
  display:flex;justify-content:space-between;gap:var(--b3);
  padding:var(--b2) 0;border-bottom:1px solid var(--cizgi);
}
.kah-veri dt{font-size:var(--minik);letter-spacing:.1em;text-transform:uppercase;color:var(--sus);font-weight:600}
.kah-veri dd{font-size:var(--kucuk);text-align:right;display:flex;align-items:center;gap:var(--b2)}
.olcer{display:inline-flex;gap:2px}
.olcer span{width:5px;height:5px;background:var(--cizgi-koyu);border-radius:50%}
.olcer span.dolu{background:var(--vrg)}
.kah-al{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:var(--b3)}
.kah-fiyat{font-family:var(--dsp);font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.kah-gram{font-family:var(--snf);font-size:var(--minik);color:var(--sus);letter-spacing:.02em}
.kah-bos{margin-top:var(--b6);color:var(--sus);font-size:var(--kucuk)}

/* ================================================== kavurma eğrisi */
.egri-yol{min-height:300svh}
.egri-sahne{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding-block:var(--b8)}
.egri-ic{width:100%}
.egri-bas{max-width:60ch;margin-bottom:var(--b6)}
.egri-bas h2{font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.15}
.egri-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(var(--b6),4vw,var(--b8));align-items:center}

.egri-cizim{margin:0}
.izgara line{stroke:var(--koyu-cizgi);stroke-width:1}
.izgara text{fill:var(--koyu-sus);font-family:var(--snf);font-size:11px;letter-spacing:.06em}
.egri-hat{stroke:var(--koyu-cizgi);stroke-width:2}
.egri-iz{stroke:var(--koyu-vrg);stroke-width:3;stroke-linecap:round}
.egri-top{fill:var(--koyu-vrg);stroke:var(--koyu);stroke-width:3}
.faz-isaret{fill:var(--koyu);stroke:var(--koyu-sus);stroke-width:2}
.faz-isaret.gecti{fill:var(--koyu-vrg);stroke:var(--koyu-vrg)}

.okuma{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--koyu-cizgi);margin-top:var(--b4)}
.okuma>div{padding:var(--b4) var(--b4) 0 0}
.okuma>div+div{border-left:1px solid var(--koyu-cizgi);padding-left:var(--b4)}
.okuma dt{font-size:var(--minik);letter-spacing:.12em;text-transform:uppercase;color:var(--koyu-sus);font-weight:600}
.okuma dd{font-family:var(--dsp);font-size:clamp(1.4rem,2.6vw,2rem);font-variant-numeric:tabular-nums;margin-top:var(--b1)}

.fazlar{border-top:1px solid var(--koyu-cizgi)}
.faz{
  padding:var(--b4) 0;border-bottom:1px solid var(--koyu-cizgi);
  color:var(--koyu-sus);transition:color .4s var(--eg),padding-left .4s var(--eg);
  position:relative;
}
.faz::before{
  content:"";position:absolute;left:0;top:var(--b4);bottom:var(--b4);width:2px;
  background:var(--koyu-vrg);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--eg);
}
.faz.etkin{color:var(--koyu-metin);padding-left:var(--b4)}
.faz.etkin::before{transform:scaleY(1)}
.faz h3{font-size:1.15rem;line-height:1.25;margin-block:var(--b1)}
.faz p{font-size:var(--kucuk);line-height:1.6;max-width:44ch}
.faz-ust{display:flex;gap:var(--b4);font-size:var(--minik);letter-spacing:.12em;font-weight:600;font-variant-numeric:tabular-nums;color:var(--koyu-vrg)}

/* ================================================== çekirdek bandı */
.cekirdek{padding-top:0}
.tam-kare{margin:0 0 var(--b7)}
.kare-kap{overflow:hidden}
.tam-kare .kare-kap img{width:100%;height:clamp(260px,42vw,540px);object-fit:cover}
.tam-kare figcaption,.dem-kare figcaption{
  margin-top:var(--b3);padding-inline:var(--kenar);
  font-size:var(--minik);color:var(--sus);letter-spacing:.02em;
}
.cek-alt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(var(--b6),5vw,var(--b9));align-items:start}
.cek-yazi h2{font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.15;margin-bottom:var(--b5)}
.cek-yazi p{max-width:62ch;margin-bottom:var(--b4)}
.cek-yazi p+p{color:var(--sus)}
.cek-veri{border-top:2px solid var(--mrk)}
.cek-veri>div{padding:var(--b4) 0;border-bottom:1px solid var(--cizgi)}
.cek-veri dt{font-size:var(--minik);letter-spacing:.14em;text-transform:uppercase;color:var(--sus);font-weight:600}
.cek-veri dd{font-family:var(--dsp);font-size:1.5rem;font-variant-numeric:tabular-nums;margin-top:var(--b1)}

/* ================================================== demleme rehberi */
.dem-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(var(--b6),4vw,var(--b8));align-items:start}
.dem-kare{margin:0;position:sticky;top:96px}
.dem-kare .kare-kap img{width:100%;height:auto}
.dem-kare figcaption{padding-inline:0}

.yontemler{border-top:2px solid var(--mrk);margin-bottom:var(--b6)}
.yon-d{
  width:100%;display:grid;grid-template-columns:2.5rem 1fr auto;align-items:baseline;
  gap:var(--b4);text-align:left;background:none;border:0;
  border-bottom:1px solid var(--cizgi);padding:var(--b4) var(--b2);cursor:pointer;
  color:var(--sus);transition:color .3s var(--eg),background .3s var(--eg);
}
.yon-d:hover{color:var(--mrk);background:#FBF7F0}
.yon-no{font-family:var(--dsp);font-size:.9rem;color:var(--cizgi-koyu)}
.yon-ad{font-family:var(--dsp);font-size:clamp(1.4rem,3vw,2.25rem);line-height:1.1;color:var(--mrk);letter-spacing:-.02em}
.yon-not{font-size:var(--kucuk);text-align:right}
.yon-d.etkin{color:var(--mrk)}
.yon-d.etkin .yon-ad{color:var(--vrg-metin)}
.yon-d.etkin .yon-no{color:var(--vrg)}

.recete-veri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--cizgi);margin-bottom:var(--b6)}
.recete-veri>div{padding:var(--b4) var(--b4) var(--b4) 0;border-bottom:1px solid var(--cizgi)}
.recete-veri>div:nth-child(3n+2),.recete-veri>div:nth-child(3n){border-left:1px solid var(--cizgi);padding-left:var(--b4)}
.recete-veri dt{font-size:var(--minik);letter-spacing:.12em;text-transform:uppercase;color:var(--sus);font-weight:600}
.recete-veri dd{font-family:var(--dsp);font-size:clamp(1.35rem,2.4vw,1.9rem);font-variant-numeric:tabular-nums;margin-top:var(--b1)}

.olcu{display:flex;flex-wrap:wrap;align-items:center;gap:var(--b4);margin-bottom:var(--b5)}
.olcu-et{font-size:var(--minik);letter-spacing:.14em;text-transform:uppercase;color:var(--sus);font-weight:600}
.olcu-alan{display:flex;align-items:center;gap:var(--b4);flex:1 1 240px}
.olcu-deger{font-family:var(--dsp);font-size:1.5rem;font-variant-numeric:tabular-nums;min-width:1.5ch}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;
  height:24px;background:none;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--cizgi-koyu)}
input[type=range]::-moz-range-track{height:2px;background:var(--cizgi-koyu)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--mrk);margin-top:-9px;border:0;
  transition:transform .2s var(--eg),background .2s var(--eg);
}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--mrk);border:0}
input[type=range]:hover::-webkit-slider-thumb{background:var(--vrg-metin);transform:scale(1.15)}

.sayac{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:var(--b5);padding:var(--b5) 0;border-block:2px solid var(--mrk);
}
.sayac-rakam{font-family:var(--dsp);font-size:clamp(2.25rem,5vw,3.25rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sayac-durum{font-size:var(--kucuk);font-weight:600;margin-bottom:var(--b2)}
.sayac-cubuk{height:3px;background:var(--cizgi)}
.sayac-cubuk span{display:block;height:100%;background:var(--vrg);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.sayac-dugmeler{display:flex;align-items:center;gap:var(--b4)}

.adimlar{margin-top:var(--b5)}
.adimlar li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--b4);
  align-items:baseline;padding:var(--b3) var(--b2);
  border-bottom:1px solid var(--cizgi);color:var(--sus);
  transition:color .3s var(--eg),background .3s var(--eg);
}
.adimlar li.etkin{color:var(--mrk);background:#FBF7F0}
.adimlar li.bitti{color:var(--cizgi-koyu)}
.adim-no{font-family:var(--dsp);font-size:.9rem;color:var(--cizgi-koyu)}
.adim-ad{font-weight:600;font-size:var(--kucuk)}
.adim-hedef{font-size:var(--minik);color:var(--sus);letter-spacing:.04em}
.adim-sure{font-size:var(--kucuk);font-variant-numeric:tabular-nums;text-align:right}

/* ================================================== künye / hikâye */
.sutunlar{
  columns:3;column-gap:clamp(var(--b6),4vw,var(--b8));
  column-rule:1px solid var(--cizgi);
  max-width:none;margin-bottom:var(--b8);
}
.sutunlar p{margin-bottom:var(--b4);break-inside:avoid;line-height:1.75}
.ilk-p::first-letter{
  float:left;font-family:var(--dsp);font-size:3.6em;line-height:.82;
  padding:.06em .12em 0 0;color:var(--vrg-metin);
}
.istat{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--mrk)}
.istat>div{padding:var(--b5) var(--b4) 0 0}
.istat>div+div{border-left:1px solid var(--cizgi);padding-left:var(--b4)}
.istat dt{font-size:var(--minik);letter-spacing:.14em;text-transform:uppercase;color:var(--sus);font-weight:600;order:2;margin-top:var(--b1)}
.istat dd{font-family:var(--dsp);font-size:clamp(1.75rem,3.6vw,2.75rem);font-variant-numeric:tabular-nums;line-height:1}
.istat>div{display:flex;flex-direction:column}

/* ================================================== abonelik */
.abonelik{background:var(--kahve);color:var(--bg);border-top:0}
.abo-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(var(--b6),5vw,var(--b9));align-items:start}
.abo-yazi h2{font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.15;margin-bottom:var(--b5)}
.abo-yazi p{max-width:56ch;color:#EFE2D2}
.abo-plan{margin-top:var(--b6);border-top:1px solid rgba(237,230,218,.35)}
.abo-plan>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--b4);
  padding:var(--b4) 0;border-bottom:1px solid rgba(237,230,218,.35);
}
.abo-plan dt{font-size:var(--kucuk);font-weight:600}
.abo-plan dd{font-family:var(--dsp);font-size:clamp(1.35rem,2.4vw,1.75rem);font-variant-numeric:tabular-nums;white-space:nowrap}
.abo-donem{font-family:var(--snf);font-size:var(--minik);color:#E2CDB4;margin-left:var(--b1)}

.abo-form{background:var(--bg);color:var(--mrk);padding:clamp(var(--b5),3vw,var(--b7))}
.abo-form h3{font-size:1.5rem;margin-bottom:var(--b5)}
.alan{display:flex;flex-direction:column;gap:var(--b2);margin-bottom:var(--b5)}
.alan label{font-size:var(--minik);letter-spacing:.12em;text-transform:uppercase;color:var(--sus);font-weight:600}
.alan input[type=email],.alan select{
  background:var(--yzy);border:1px solid var(--cizgi-koyu);border-radius:0;
  padding:var(--b3) var(--b4);font-size:var(--govde);min-height:46px;
  transition:border-color .25s var(--eg);
}
.alan input[type=email]:hover,.alan select:hover{border-color:var(--vrg)}
.alan-onay{flex-direction:row;align-items:center;gap:var(--b3)}
.alan-onay input{width:20px;height:20px;accent-color:var(--vrg-metin);flex:0 0 auto}
.alan-onay label{text-transform:none;letter-spacing:0;font-size:var(--kucuk);color:var(--mrk);font-weight:400}
.uyari{margin-top:var(--b3);font-size:var(--kucuk);min-height:1.4em}
.uyari.hata{color:#9B2C1E}
.uyari.tamam{color:#4A5A2C}
.abo-kucuk{margin-top:var(--b3);font-size:var(--minik);color:var(--sus);line-height:1.5}

/* ================================================== ziyaret */
.mekanlar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--b6),5vw,var(--b9));border-top:2px solid var(--mrk)}
.mekan{padding-top:var(--b6)}
.mekan h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.mekan-not{margin-top:var(--b3);color:var(--sus);max-width:44ch}
.mekan dl{margin-top:var(--b5)}
.mekan dl>div{padding:var(--b4) 0;border-bottom:1px solid var(--cizgi)}
.mekan dt{font-size:var(--minik);letter-spacing:.14em;text-transform:uppercase;color:var(--sus);font-weight:600}
.mekan dd{margin-top:var(--b1);font-size:var(--kucuk);line-height:1.6}
.mekan dd a{color:var(--vrg-metin);text-decoration-thickness:1px;text-underline-offset:3px}

/* ================================================== akan şerit */
.serit{
  background:var(--yesil);color:var(--bg);
  display:flex;align-items:center;gap:var(--b5);overflow:hidden;
  padding-block:var(--b4);
}
.serit-ad{
  flex:0 0 auto;padding-left:var(--kenar);padding-right:var(--b5);
  font-size:var(--minik);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  border-right:1px solid rgba(237,230,218,.4);
}
.serit-ray{display:flex;width:max-content;animation:kay 42s linear infinite}
.serit-metin{
  flex:0 0 auto;padding-right:var(--b5);white-space:nowrap;
  font-family:var(--dsp);font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:.01em;
}
@keyframes kay{to{transform:translateX(-50%)}}

/* ================================================== dip */
.dip{background:var(--koyu);color:var(--koyu-metin);padding-block:var(--b8) var(--b5)}
.dip-ic{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr);gap:var(--b6);padding-bottom:var(--b7);border-bottom:1px solid var(--koyu-cizgi)}
.dip .imza{color:var(--koyu-metin)}
.dip .isaret{color:var(--koyu-vrg)}
.dip-imza p{margin-top:var(--b3);font-size:var(--kucuk);color:var(--koyu-sus);max-width:30ch}
.dip-gez{display:flex;flex-direction:column;gap:var(--b2)}
.dip-gez a{
  font-size:var(--kucuk);text-decoration:none;color:var(--koyu-sus);
  width:fit-content;min-height:44px;display:flex;align-items:center;
  transition:color .25s var(--eg);
}
.dip-gez a:hover{color:var(--koyu-metin)}
.dip-veri>div{padding-bottom:var(--b4)}
.dip-veri dt{font-size:var(--minik);letter-spacing:.14em;text-transform:uppercase;color:var(--koyu-sus);font-weight:600}
.dip-veri dd{margin-top:var(--b1);font-size:var(--kucuk)}
.dip-veri a{color:var(--koyu-vrg);text-decoration-thickness:1px;text-underline-offset:3px}
.dip-yasal{
  max-width:var(--en);margin-inline:auto;padding:var(--b5) var(--kenar) 0;
  font-size:var(--minik);color:var(--koyu-sus);
}

/* ================================================== açılım */
.ac{opacity:0;transform:translateY(22px);transition:opacity .8s var(--eg),transform .8s var(--eg)}
.ac.gor{opacity:1;transform:none}
.kahve.gor:nth-child(2){transition-delay:.06s}
.kahve.gor:nth-child(3){transition-delay:.12s}
.kahve.gor:nth-child(4){transition-delay:.18s}
.mekan.gor:nth-child(2){transition-delay:.08s}

/* ================================================== duyarlılık */
@media (max-width:1100px){
  .kahve{grid-template-columns:2.5rem minmax(0,1fr) minmax(0,1fr);row-gap:var(--b4)}
  .kah-al{grid-column:2 / -1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .dem-grid{grid-template-columns:1fr}
  .dem-kare{position:static;max-width:420px}
  .cek-alt{grid-template-columns:1fr}
  .abo-grid{grid-template-columns:1fr}
  .sutunlar{columns:2}
}
@media (max-width:1000px){
  .gez{
    position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--cizgi);
    padding:var(--b4) var(--kenar) var(--b6);
    transform:translateY(-108%);transition:transform .45s var(--eg);
    z-index:39;max-height:calc(100svh - 64px);overflow-y:auto;
  }
  .gez.acik{transform:none}
  .gez a{padding-block:var(--b4);border-bottom:1px solid var(--cizgi);font-size:1.15rem;font-family:var(--dsp)}
  .gez-d{display:inline-flex}
  .egri-grid{grid-template-columns:1fr;gap:var(--b6)}
  .egri-yol{min-height:auto}
  .egri-sahne{position:static;min-height:0;padding-block:clamp(var(--b8),9vw,var(--b10))}
}
@media (max-width:860px){
  .kunye-serit{grid-template-columns:1fr 1fr}
  .kunye-serit>div{padding-inline:var(--kenar) !important;border-left:0;border-top:1px solid var(--cizgi)}
  .kunye-serit>div:nth-child(2n){border-left:1px solid var(--cizgi)}
  .kunye-serit>div:nth-child(-n+2){border-top:0}
  .mekanlar{grid-template-columns:1fr;gap:var(--b6)}
  .mekan+.mekan{border-top:1px solid var(--cizgi)}
  .istat{grid-template-columns:1fr 1fr}
  .istat>div:nth-child(2n+1){border-left:0;padding-left:0}
  .istat>div:nth-child(n+3){border-top:1px solid var(--cizgi);margin-top:var(--b4)}
  .dip-ic{grid-template-columns:1fr;gap:var(--b6)}
  .sutunlar{columns:1}
  .recete-veri{grid-template-columns:1fr 1fr}
  .recete-veri>div:nth-child(3n+2),.recete-veri>div:nth-child(3n){border-left:0;padding-left:0}
  .recete-veri>div:nth-child(2n){border-left:1px solid var(--cizgi);padding-left:var(--b4)}
}
@media (max-width:700px){
  .kahve{grid-template-columns:2rem minmax(0,1fr)}
  .kah-veri{grid-column:1 / -1;grid-template-columns:1fr}
  .kah-al{grid-column:1 / -1}
  .kah-tat{max-width:none}
  .yon-d{grid-template-columns:2rem 1fr;row-gap:var(--b1)}
  .yon-not{grid-column:2;text-align:left}
  .sayac{grid-template-columns:1fr;gap:var(--b4);text-align:left}
  .sayac-dugmeler{justify-content:space-between}
  .okuma{grid-template-columns:1fr}
  .okuma>div+div{border-left:0;padding-left:0;border-top:1px solid var(--koyu-cizgi)}
  .adimlar li{grid-template-columns:auto minmax(0,1fr);row-gap:var(--b1)}
  .adim-sure{grid-column:2;text-align:left}
  .cek-veri dd,.kah-fiyat{font-size:1.35rem}
  .suz-sayi{margin-left:0;width:100%}
}
@media (max-width:560px){
  .ust-ic{gap:var(--b3)}
  .imza{gap:var(--b2)}
  .isaret{width:26px;height:26px}
  .imza-ad{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ust-sag{gap:var(--b3);flex:0 0 auto}
  .dil{gap:0}
  .dil-d{min-width:28px;padding-inline:2px}
}
@media (max-width:420px){
  .kunye-serit{grid-template-columns:1fr}
  .kunye-serit>div:nth-child(2n){border-left:0}
  .kunye-serit>div+div{border-top:1px solid var(--cizgi)}
  .istat{grid-template-columns:1fr}
  .istat>div+div{border-left:0;padding-left:0;border-top:1px solid var(--cizgi);margin-top:var(--b4)}
}

/* ================================================== hareket kısıtı */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .serit-ray{animation:none}
  .ac,.kh-kunye,.kh-metin,.kh-eylem{opacity:1;transform:none}
  .kh-baslik .satir>span,.kh-kare img{transform:none}
  .faz{color:var(--koyu-metin)}
}