@font-face{font-family:"Kudryashev";
  src:url(font/kudryashev.woff2) format("woff2"),
      url(font/kudryashev.ttf) format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
/* ════ MOBİL TABAN — masaüstü eklentileri en altta ════ */
:root{
  --murekkep:#172636; --ral5011:#1E2B3D;
  --kiremit:#C9622C; --kiremit-k:#A04E20; --gunisigi:#FC914D;
  --kagit:#F2EFE8; --mermer:#D7D7D9; --ara1:#3E4C58; --ara2:#7C8794; --ara3:#9AA3AB;
  --display:"Kudryashev",Didot,Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--kagit);color:var(--murekkep);font-family:var(--sans);font-weight:300;
  font-size:17px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.06}
p{margin:0}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--kiremit);outline-offset:4px}
.kenar{padding:0 20px}
.lab{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--ara2);margin:0}

/* ── açılış: ikonun kendi vektörü (neuf icon.pdf), RAL 5011 ── */
#acilis{position:fixed;inset:0;z-index:100;background:var(--kagit);
  display:flex;align-items:center;justify-content:center}
#acilis svg{width:min(56vw,250px);height:auto;overflow:visible}
#acilis .ciz{fill:none;stroke:var(--ral5011);stroke-linecap:round;stroke-linejoin:round}
#acilis .dolgu{fill:var(--ral5011)}
/* dolgu, ovalin n'ye değdiği yerden (sol gövde) başlayıp sağa akar */
#kirp{transform-box:fill-box;transform-origin:left center}
.basla .ciz{animation:ciz var(--s) var(--e) forwards var(--g)}
/* dolgu ovalin bittiği anda, ONUN hızıyla başlar: hızlı girer, yavaşlayarak oturur */
.basla #kirp{transform:scaleX(0);animation:akit .30s cubic-bezier(.12,.5,.35,1) forwards 1.09s}
.basla .n-ciz{animation:ciz var(--s) var(--e) forwards var(--g),
  sonder .30s linear forwards 1.09s}
@keyframes ciz{to{stroke-dashoffset:0}}
@keyframes akit{to{transform:scaleX(1)}}
@keyframes sonder{to{opacity:0}}
.bitti #acilis{animation:acilisCik .45s ease-in forwards}
@keyframes acilisCik{to{opacity:0;visibility:hidden}}
#perde{position:fixed;inset:0;z-index:99;backdrop-filter:blur(24px);
  background:rgba(242,239,232,.5);pointer-events:none}
.bitti #perde{animation:berrak .8s ease-out forwards}
@keyframes berrak{to{backdrop-filter:blur(0);background:rgba(242,239,232,0);visibility:hidden}}
.atla #acilis,.atla #perde{display:none}

/* ── üst şerit: sabit durur, kaydırınca incelir ──
   Kâğıt zemini KORUNUYOR: şeffaf olsa koyu fotoğrafta logo kaybolurdu. */
.ust{position:sticky;top:0;z-index:60;background:var(--kagit);
  padding:14px 0 13px;border-bottom:1px solid transparent;
  transition:padding .22s ease,border-color .22s ease}
.ust-ic{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Üst şeritte yalnız "neuf" kelimesi — alt satır kırpılıyor.
   Ölçüm: kelime %0-82, "PATISSERIE & BOULANGERIE" %92-99 → %84'ten kesik. */
.ust .logo{display:block;width:106px;aspect-ratio:546/268;background:currentColor;
  transition:width .2s ease;
  -webkit-mask:url(img/logo.png) no-repeat left top/100% auto;
  mask:url(img/logo.png) no-repeat left top/100% auto}
.gez{display:none}
body.kaydi .ust{padding:8px 0 8px;border-bottom-color:var(--mermer)}
/* kaydırınca alt satır ("PATISSERIE & BOULANGERIE") kırpılır, kelime kalır.
   Ölçüm: kelime %0-82, alt satır %92-99 → %84'ten kesiliyor. */
body.kaydi .ust .logo{width:88px}
#ac{width:44px;height:44px;margin-right:-10px;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}
#ac span{display:block;width:24px;height:1px;background:var(--murekkep);
  transition:background .18s ease-out}
#ac:hover span{background:var(--kiremit)}

/* ── panel ──
   Kompozisyon aşağı yaslı: "neuf" yukarıda tek başına durur, başlıklar ve
   pratik bilgi ekranın altında toplanır. Aradaki boşluk kaza değil —
   .ic'in margin-top:auto'su artan yeri oraya iter (430x932'de 288 px,
   375x667'de 37 px; ekran ne verirse).
   Punto 40, satır aralığı 1.3 (.ziyaret-adres de 1.3). Harften çalınan
   %9, satırların ARASINA gitti: kurşun payı 8,8 px'ten 12 px'e çıktı,
   blok yüksekliği neredeyse aynı kaldı (370 -> 364 px). Panel menüsü
   44'ü kullanmayan tek yer — liste taranıyor, okunmuyor.
   Alt kenar boşluğu yanla aynı: 20 px. Sıfır DEĞİL; iOS'ta o şerit
   tarayıcı çubuğunun ve ana ekran çizgisinin yeri, telefon numarası
   oraya inerse basılamıyor.
   Adres/saat/telefon sağa yaslı — üstteki kapatma çarpısının ekseni;
   sol sütun büyük başlıklara kalır.
   Panel kendi içinde kayar — kısa ekranda içerik kesilmesin diye. */
#panel{position:fixed;inset:0;z-index:80;background:var(--kagit);padding:16px 20px 20px;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;
  overflow-y:auto;overscroll-behavior:contain;
  transition:opacity .22s ease-out,visibility .22s}
body.acik #panel{opacity:1;visibility:visible}
#panel .panel-ust{display:flex;align-items:center;justify-content:space-between;gap:16px}
#panel .logo{display:block;width:106px;aspect-ratio:546/268;background:var(--murekkep);
  -webkit-mask:url(img/logo.png) no-repeat left top/100% auto;
  mask:url(img/logo.png) no-repeat left top/100% auto}
#panel .kapat{width:44px;height:44px;margin-right:-6px;
  display:grid;place-items:center;color:var(--ara1)}
#panel .kapat svg{width:22px;height:22px;stroke:currentColor;stroke-width:1;fill:none}
#panel .ic{margin-top:auto;display:flex;flex-direction:column}
#panel a.bag{font-family:var(--display);font-size:40px;line-height:1.3;color:var(--murekkep)}
#panel a.bag:hover{color:var(--kiremit)}
#panel .panel-yol{min-width:0;flex:0 0 auto}
/* Adres bloğu: yalnız sağa yaslı bir yığın. Kendi çizgisi YOK — üstündeki
   satırın çizgisi ayırmaya yetiyordu, iki çizgi 24 px arayla üst üste
   biniyordu. Punto 13: SSS/Blog ile aynı basamak. */
#panel .alt-bilgi{margin-top:16px;display:flex;flex-direction:column;
  align-items:flex-end;text-align:right;gap:4px}
#panel .alt-bilgi p{font-size:13px;color:var(--ara1);letter-spacing:.01em}
/* Instagram telefonun altında, aynı sağ eksende. İkon SATIR İÇİ SVG:
   ikon paketi yok, ayrı ağ isteği yok, rengi siteden geliyor. Lucide
   "instagram" çizimi; çizgi kalınlığı 24'lük viewBox'ta 1.5 — 16 px'e
   çizilince tam 1 px eder, yani kapatma çarpısıyla aynı kıl payı. */
#panel .panel-instagram a{display:inline-flex;align-items:center;gap:7px}
#panel .panel-instagram a:hover{color:var(--kiremit)}
#panel .panel-instagram svg{width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#panel .alt-bilgi a:not(.dugme){color:var(--murekkep)}

/* ── düğme ── */
.dugme{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 20px;border-radius:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--kiremit);background:var(--kiremit);color:#FFF6EF;white-space:nowrap}
.dugme:hover{background:var(--kiremit-k);border-color:var(--kiremit-k)}
.dugme-h{background:transparent;color:var(--murekkep);border-color:var(--murekkep)}
.dugme-h:hover{background:var(--murekkep);color:var(--kagit)}
/* ── çerçeve düğmeler: tek tarif, iki boy ──
   Hero kartının içindeki ikili ile menü panelindeki tek düğme aynı
   dili konuşur: dolgu yok yalnız çerçeve, üç köşe keskin, SOL ÜST köşe
   yuvarlak — kartın kendi köşesinin küçük ölçekteki karşılığı, yarıçap
   yüksekliğin ~%40'ı. Renk zemine göre değişir: laciverdin üstünde
   kâğıt, kâğıdın üstünde mürekkep.
   BOY ayrı, çünkü iş ayrı: panelde tek düğme var (44 px), hero kartında
   YAN YANA İKİ düğme var ve kartın içi 375 px'lik telefonda 206 px —
   ikisi oraya 40 px boyla ve 10 punto ile giriyor. */
.vid-bilgi .dugme,#panel .panel-yol,.magaza-adres .dugme{background:transparent}
.vid-bilgi .dugme,#panel .panel-yol{width:auto}
#panel .panel-yol,.magaza-adres .dugme{min-height:44px;font-size:11px;letter-spacing:.24em;
  padding:0 22px;border-radius:20px 0 0 0;border-color:var(--murekkep);color:var(--murekkep)}
#panel .panel-yol:hover,.magaza-adres .dugme:hover{background:var(--murekkep);
  border-color:var(--murekkep);color:var(--kagit)}

/* ── hero ── */
.hero-masa{display:none}
/* Kâğıt kanal: üstteki şeritten inen raylar. Video alttan yuvarlanarak
   kapanır, arada bej bir nefes kalır, sonra şerit üstten yuvarlanarak
   başlar ve menüye kadar dik iner. Videodan akışa geçiş yumuşar. */
:root{--ray:12px; --yay:30px}
.hero-mobil{aspect-ratio:900/1366;position:relative;
  margin:0 var(--ray);border-radius:0 0 var(--yay) var(--yay);overflow:hidden}

/* Videonun sağ alt köşesi. Ölçüm: o bölge 104-122 arası gri —
   çıplak yazı hiçbir tonda okunmaz, zemin şart. Büyük yarıçap
   SOL ÜSTTE: saat şeridindeki panelin aynası. */
.vid-bilgi{position:absolute;right:0;bottom:0;z-index:2;text-align:right;
  background:rgba(23,38,54,.92);color:var(--kagit);
  padding:15px 20px 17px;width:min(70%,298px);border-top-left-radius:54px}
.vid-bilgi .lab{color:var(--ara3)}
.vid-saat{font-family:var(--display);font-size:24px;line-height:1.1;margin:9px 0 0;
  font-variant-numeric:tabular-nums}
.vid-durum{font-size:13px;letter-spacing:.06em;color:#AAB4C0;margin:6px 0 0}
/* İkisi kartın genişliğini EŞİT paylaşır: genişliğe metnin uzunluğu
   değil kart karar verir, böylece 360 px'lik telefonda da taşmaz ve
   iki düğme birbirinin aynası olur. */
.vid-dugmeler{display:flex;gap:8px;margin-top:16px}
.vid-bilgi .dugme{flex:1;min-height:40px;font-size:10px;letter-spacing:.2em;
  padding:0 8px;border-radius:16px 0 0 0;
  border-color:rgba(242,239,232,.55);color:var(--kagit)}
.vid-bilgi .dugme:hover{background:var(--kagit);border-color:var(--kagit);color:var(--murekkep)}

/* ── saat şeridi ─────────────────────────────────────────────
   JS YOKSA: dördü alt alta (bugünkü hâli). JS varsa .dondur gelir,
   tek ekrana iner ve kendi kendine döner. Yön böyle: sade hâl temel. */
.serit{padding:76px 0;display:flex;flex-direction:column;gap:76px}
.hal{display:flex;flex-direction:column;gap:28px}
.hal-gorsel{aspect-ratio:4/5;border-radius:10px;overflow:hidden}
.hal-metin{padding:0 20px}
.hal h2{font-size:24px;margin:18px 0 14px}
.hal p{font-size:17px;color:var(--ara1);max-width:40ch}
.hal .lab{margin-top:20px;padding-top:16px;border-top:1px solid var(--mermer);display:block}

/* ── dönen hâl ── */
.serit.dondur{padding:0;display:block;position:relative;overflow:hidden;
  height:100vh;height:100svh;min-height:560px;max-height:900px;background:var(--murekkep);
  margin:18px var(--ray) 0;border-radius:var(--yay) var(--yay) 0 0}
.serit.dondur .hal{position:absolute;inset:0;display:block;gap:0;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.serit.dondur .hal.etkin{opacity:1;visibility:visible}
.serit.dondur .hal-gorsel{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.serit.dondur .hal-metin{display:none}          /* yerini ortak panel alır */

/* ── tek ortak panel: fotoğraf arkada geçer, saat yerinde çevrilir ── */
.panel-saat{position:absolute;left:0;bottom:0;z-index:2;padding:18px 22px 19px 20px;
  width:min(82%,392px);border-top-right-radius:54px;
  transition:background-color .55s ease,color .55s ease}
.panel-saat[data-ton="koyu"]{background:rgba(23,38,54,.9);color:var(--kagit)}
.panel-saat[data-ton="acik"]{background:rgba(242,239,232,.9);color:var(--murekkep)}

/* flap: her hane kendi kulesinde, steps() ile tık tık iner */
.panel-bas{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1;
  margin:4px 0 0}
.panel-bas.gir{animation:basGir .3s cubic-bezier(.2,.7,.35,1)}
/* Bağlantı GÖRÜNÜR olacak. Gizli dokunma alanı müşteriye anlatılamaz. */
.hal-bag{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:10px 0 8px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:inherit;
  border-bottom:1px solid currentColor}
.hal-bag i{font-style:normal;transition:transform .2s ease}
.hal-bag:hover i{transform:translateX(4px)}
.serit.dondur .hal-bag{margin-top:5px}
.panel-saat .hal-bag.gir{animation:basGir .3s cubic-bezier(.2,.7,.35,1) .06s backwards}
@keyframes basGir{from{opacity:0;transform:translateY(10px)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── menü ── */
/* Ana sayfada menü bölümü TEK BUTON (13 Eyl). Punto, sayfanın "Bugün vitrinde"
   başlığından (44px) %10 küçük: 40px. Kudryashev + bizim çerçeveli düğme. */
.satir{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--mermer);align-items:baseline}
.grup:first-of-type .grup-bas{margin-top:34px}
.satir h4{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1;margin:0 0 4px}
.satir p{font-size:13px;letter-spacing:.02em;color:var(--ara2);max-width:52ch}


/* ── toptan kataloğu: fiyatsız ürün listesi ── */
.katalog{padding-bottom:64px}
.katalog h3{font-family:var(--display);font-weight:400;font-size:24px;margin:12px 0 24px}
.katalog-grup{margin-bottom:28px}
.katalog-grup h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ara2);font-family:inherit;margin:0 0 10px}
.katalog-liste{list-style:none;margin:0;padding:0;columns:2;column-gap:44px}
.katalog-liste li{font-size:17px;color:var(--ara1);padding:5px 0;
  border-bottom:1px solid var(--mermer);break-inside:avoid}
.katalog-liste .koli{font-size:13px;color:var(--ara2);letter-spacing:.04em}
@media (max-width:700px){.katalog-liste{columns:1}}

/* ── toptan ── */
.toptan{background:var(--murekkep);color:var(--kagit);padding:76px 0}
.toptan .lab{color:var(--gunisigi)}
.toptan h2{font-size:44px;margin:12px 0 20px;max-width:16ch}
.toptan p{color:#BCC6D2;max-width:50ch;margin-bottom:32px}
.toptan .dugme-h{color:var(--kagit);border-color:var(--kagit)}
.toptan .dugme-h:hover{background:var(--kagit);color:var(--murekkep)}

.alt{padding-top:40px;padding-bottom:56px;font-size:13px;letter-spacing:.06em;color:var(--ara2);
  display:flex;flex-direction:column;gap:8px}

/* ── imleç izi: yalnız fare olan cihazda ── */
#iz{display:none}
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  #iz{display:block;position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;
    background:var(--kiremit);pointer-events:none;z-index:90;transform:translate(-50%,-50%);
    transition:width .18s ease-out,height .18s ease-out}
  #iz.buyuk{width:34px;height:34px;background:transparent;border:1px solid var(--kiremit)}
}

/* ════ MASAÜSTÜ ════ */
@media(min-width:900px){
  /* ── MASAÜSTÜ GENİŞLİK DÜZENİ (14 Eyl) ───────────────────────────────
     1400px'ti ve her şey o genişliğe yayılıyordu. Menüde ürün adı solda,
     fiyat 1320px ötedeydi — göz ikisini birden takip edemiyor (ölçüldü).
     Metinde de satırlar 95+ karaktere çıkıyordu; okunur aralık ~65.

     İki katman:
       --en-genis : galeri, şerit, hero gibi GÖRSEL içerik — 1280px
       --en-okuma : metin ve liste — 860px, göz satır sonundan başına dönebilsin
     Mobilde ikisi de yok; orası zaten dar ve etkilenmiyor. */
  :root{--en-genis:1280px; --en-okuma:860px}
  .kenar{max-width:var(--en-genis);margin:0 auto;padding:0 40px}
  .ust{padding:30px 0 24px}
  .ust .logo{width:152px}
  body.kaydi .ust{padding:12px 0 12px}
  body.kaydi .ust .logo{width:124px}
  #ac{display:none}
  /* ÜST GEZİNTİ — marka fontuyla (14 Eyl). Sans 12px'ti ve site dilinden
     kopuktu; kategori şeridinde Kudryashev'e geçilince orası da eşitlendi.
     Kalınlık font-weight ile DEĞİL text-stroke ile: Kudryashev'in tek ağırlığı
     var, 600/700 sahte kalın çizdirir ve bu ince yüzü bulanıklaştırır (§10.1). */
  .gez{display:flex;gap:30px;align-items:center}
  .gez a{font-family:var(--display);font-size:19px;font-weight:400;
    letter-spacing:.03em;text-transform:none;-webkit-text-stroke:.35px currentColor;
    color:var(--ara1);min-height:44px;display:inline-flex;align-items:center;
    transition:color .2s}
  .gez a:hover{color:var(--murekkep)}
  /* "Yol tarifi" hero kartındaki düğmenin aynısı: şeffaf zemin, ince çerçeve,
     sol üst köşesi yuvarlak. Aynı işi yapan iki düğme aynı görünmeli. */
  .gez .dugme{font-family:var(--display);font-size:16px;font-weight:400;
    letter-spacing:.04em;text-transform:none;-webkit-text-stroke:0;
    min-height:42px;padding:0 20px;border-radius:16px 0 0 0;
    background:transparent;border-color:var(--murekkep);color:var(--murekkep)}
  .gez .dugme:hover{background:var(--murekkep);border-color:var(--murekkep);color:var(--kagit)}
  :root{--ray:20px; --yay:40px}
  .hero-masa{display:block;aspect-ratio:1.94/1;position:relative;
    margin:0 var(--ray);border-radius:0 0 var(--yay) var(--yay);overflow:hidden}
  .serit.dondur{margin:24px var(--ray) 0}
  .hero-mobil{display:none}
  .vid-bilgi{padding:21px 28px 23px;width:auto;min-width:264px;border-top-left-radius:66px;
    right:max(0px,calc((100% - 1400px)/2))}
  .serit{padding:104px 0;gap:104px}
  .serit.dondur{padding:0;max-height:820px}
  .panel-saat{width:min(42%,468px);padding:26px 34px 27px 32px;border-top-right-radius:72px;
    left:max(0px,calc((100% - 1400px)/2 + 40px));bottom:52px}
  .menu{padding-top:104px;padding-bottom:104px}
  .menu-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .menu-bas .dugme{margin-top:0;width:auto;min-height:44px}

  .toptan{padding:104px 0}
  .alt{flex-direction:row;justify-content:space-between;padding-top:44px;padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #acilis,#perde{display:none}
  *{animation:none!important;transition:none!important}
}

/* ═══════════ ALT SAYFALAR ═══════════ */
.sayfa-bas{padding:44px 0 34px}
.sayfa-bas .lab{margin-bottom:12px}
.sayfa-bas h1{font-size:44px;margin:0}
.sayfa-bas .giris{font-size:17px;color:var(--ara1);max-width:46ch;margin-top:16px}
.sayfa-bas.koyu-sayfa{background:var(--murekkep);color:var(--kagit);padding:44px 0 40px}
.sayfa-bas.koyu-sayfa .lab{color:var(--gunisigi)}
.sayfa-bas.koyu-sayfa .giris{color:#BCC6D2}

main,.ikili,.galeri,.sss,.blog,.metin{display:block}
.ikili{display:grid;gap:44px;padding-top:8px;padding-bottom:64px}
.ikili h3,.metin h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 10px}
.ikili .ara-bas,.metin h3+p+h3{margin-top:32px}
.ikili p,.metin p{font-size:17px;color:var(--ara1);max-width:46ch;margin-bottom:10px}
.ikili p b,.metin p b{font-weight:400;color:var(--murekkep)}
.ikili a:not(.dugme),.metin a{border-bottom:1px solid var(--mermer)}
.ikili a:not(.dugme):hover,.metin a:hover{border-color:var(--kiremit);color:var(--kiremit)}
.ikili .dugme{margin-top:14px}
.saat-satir{display:flex;justify-content:space-between;gap:16px;max-width:320px;
  padding-bottom:10px;border-bottom:1px solid var(--mermer)}
.not{font-size:13px;color:var(--ara2);letter-spacing:.02em;max-width:48ch}
.etiket{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ara3);margin-top:5px}
.adim{margin:0 0 18px;padding-left:20px;color:var(--ara1);font-size:17px}
.adim li{margin-bottom:7px}
/* ── mağaza: başlık · fotoğraf · bilgiler ──────────────────────────
   Fotoğrafın ORANI SABİT (2,2:1) ve görsel ÜSTTEN hizalı. Sebep: kaynak
   kare 1,94:1 ve alt kenarında bir araba tavanı var; cover + üstten
   hizalama o şeridi kırpar. Oran sabit olduğu için kırpma telefonda ve
   masaüstünde AYNI — genişliğe göre değişen bir kadraj olmuyor.
   Yer önceden ayrıldığı için görsel inerken sayfa zıplamıyor. */
.magaza-gorsel{aspect-ratio:2.2/1;overflow:hidden;border-radius:10px}
.magaza-gorsel img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

.magaza-bilgi{padding-top:28px;padding-bottom:64px}
/* Telefonda adres üstte, düğme altta TAM GENİŞLİK; 900'den sonra aynı
   satıra geçer, adres solda düğme sağda. */
.magaza-adres{display:flex;flex-direction:column;gap:16px;
  padding-bottom:22px;border-bottom:1px solid var(--mermer)}
.magaza-adres p{font-size:17px;color:var(--ara1);max-width:46ch}
/* Telefonda tam genişlik. Üst sınır tablet içindir: kırılma noktası 900
   olduğu için iPad dikeyde (834) düğme 794 px'e uzuyordu — ölçüldü. 420
   telefonda hiç devreye girmez (en geniş telefonda kap 390 px). */
.magaza-adres .dugme{width:100%;max-width:420px}

/* Etiket solda, değer sağda. Ayraç çizgisi saat satırının aynısı. */
.magaza-liste{margin:0;padding:0}
.magaza-liste > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;padding:14px 0;border-bottom:1px solid var(--mermer)}
.magaza-liste dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ara2);flex:0 0 auto}
.magaza-liste dd{margin:0;font-size:17px;color:var(--murekkep);text-align:right}
.magaza-liste a{border-bottom:1px solid var(--mermer)}
.magaza-liste a:hover{color:var(--kiremit);border-color:var(--kiremit)}

.galeri{display:grid;gap:14px;padding-bottom:64px}
.galeri .gorsel{aspect-ratio:4/5}

/* form */
.form{display:flex;flex-direction:column;gap:14px;max-width:420px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ara2)}
.form input,.form select,.form textarea{font:inherit;font-size:17px;color:var(--murekkep);
  background:#FAF8F4;border:1px solid var(--mermer);border-radius:0;padding:12px 14px;
  min-height:48px;text-transform:none;letter-spacing:0}
.form textarea{min-height:96px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--kiremit)}
.form label.onay{flex-direction:row;align-items:flex-start;gap:10px;text-transform:none;
  letter-spacing:.01em;font-size:13px;color:var(--ara1)}
.form label.onay input{min-height:0;width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.form .dugme{align-self:flex-start;margin-top:4px}

/* SSS */
.sss{padding-bottom:64px}
.sss-madde{border-bottom:1px solid var(--mermer)}
.sss-madde summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--display);
  font-size:24px;line-height:1.2;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.sss-madde summary::-webkit-details-marker{display:none}
.sss-madde summary::after{content:"+";color:var(--kiremit);font-family:var(--sans);font-size:24px}
.sss-madde[open] summary::after{content:"–"}
.sss-madde p{font-size:17px;color:var(--ara1);max-width:52ch;padding:0 0 20px}

/* blog */
.blog{display:grid;gap:2px;padding-bottom:64px}
.yazi{display:block;padding:22px 0;border-bottom:1px solid var(--mermer)}
.yazi h3{font-family:var(--display);font-weight:400;font-size:24px;margin:6px 0 5px}
.yazi p:last-child{font-size:15px;color:var(--ara2);max-width:52ch}
.yazi:hover h3{color:var(--kiremit)}
/* ── ana sayfa blog şeridi ─────────────────────────────────────────────
   Blog listesindeki kartın KÜÇÜK hâli. Listede kart geniş, yanında özet
   var; ana sayfada üç kart yan yana girer ve yalnız başlık taşır. Aynı
   kartı olduğu gibi koymak denendi, satır başına 250 px yer kaplıyor ve
   ana sayfayı ikinci bir blog listesine çeviriyordu. */
.serit-blog{padding:56px 0}
.serit-blog .blog{display:grid;gap:26px;padding-bottom:20px}
.serit-blog .yazi{display:block;padding:0;border-bottom:0}
.serit-blog .yazi-gorsel{aspect-ratio:3/2;border-radius:10px;overflow:hidden}
.serit-blog .yazi h3{font-size:22px;margin:10px 0 0}
.metin{padding-bottom:64px}

/* alt bilgi
   Telefonda DÖRT sütun alt alta düşünce alt bilgi üç ekran boyu oluyordu
   (13 Eyl ölçümü). Çözüm: telefonda İKİ sütunlu ızgara, kimlik bloğu tam
   genişlik. Masaüstünde dört sütun geri geliyor (bkz. 900px kırılması). */
.alt{padding-top:36px;padding-bottom:24px;border-top:1px solid var(--mermer);margin-top:0}
.alt-ic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;padding-bottom:20px}
.alt-kimlik{grid-column:1/-1}
.alt-kimlik p{font-size:14px;line-height:1.5}
.alt-sutun{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ara1)}
.alt-sutun .lab{margin-bottom:2px}
.alt-sutun a:hover{color:var(--kiremit)}
.alt-logo{width:76px;aspect-ratio:546/268;background:var(--murekkep);margin-bottom:8px;
  -webkit-mask:url(img/logo.png) no-repeat left top/100% auto;
  mask:url(img/logo.png) no-repeat left top/100% auto}
/* yasal şerit — tek satır, sarar. Sütun DEĞİL: yasal bağlantılar büyüdükçe
   sütun olsa alt bilgi yeniden uzardı; sarmalı şerit uzamaz, sıkışır. */
.alt-yasal{display:flex;flex-wrap:wrap;gap:3px 14px;padding-bottom:14px;
  font-size:12px;letter-spacing:.04em;color:var(--ara2)}
.alt-yasal a:hover{color:var(--kiremit)}
.alt-son{display:flex;justify-content:space-between;gap:16px;padding-top:14px;
  border-top:1px solid var(--mermer);font-size:12px;letter-spacing:.06em;color:var(--ara2)}

/* çerez rızası — en küçük hâli tek satırlık bir hap.
   İsteyen üstüne basar, açıklama açılır. Sayfayı hiçbir zaman kapatmaz. */
/* ÖNCE BU: #riza{display:flex} ID seçicisi tarayıcının [hidden]{display:none}
   kuralını eziyordu — kart "kapandım" diyip ekranda kalıyordu. */
#riza[hidden]{display:none!important}
#riza{position:fixed;right:12px;bottom:12px;left:auto;z-index:85;
  width:auto;max-width:calc(100vw - 24px);
  background:var(--kagit);border:1px solid var(--mermer);border-radius:999px;
  padding:4px 5px 4px 16px;display:flex;align-items:center;gap:12px;
  animation:rizaGir .4s cubic-bezier(.2,.7,.35,1) 1.2s backwards}
@keyframes rizaGir{from{opacity:0;transform:translateY(10px)}}
#riza .riza-ac{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ara2);
  background:none;border:0;padding:0;white-space:nowrap}
#riza .riza-ac:hover{color:var(--kiremit)}
#riza p,#riza .riza-bag{display:none}
.riza-dugmeler{display:flex;gap:5px}
.riza-dugmeler .dugme{min-height:40px;font-size:10px;letter-spacing:.14em;
  padding:0 16px;border-radius:999px}
#riza.acik{border-radius:22px;padding:16px 18px 14px;flex-direction:column;
  align-items:flex-start;gap:10px;width:min(calc(100vw - 24px),320px)}
#riza.acik p{display:block;font-size:13px;line-height:1.5;color:var(--ara1)}
#riza.acik .riza-bag{display:inline-block;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ara3)}
#riza.acik .riza-bag:hover{color:var(--kiremit)}
#riza.acik .riza-dugmeler{width:100%}
#riza.acik .riza-dugmeler .dugme{flex:1;min-height:40px}
/* Menü açıkken rıza hapı çekilir: panelin sağ alt köşesi artık dolu —
   yol tarifi düğmesi orada duruyor, ikisi üst üste biniyordu (ölçüldü:
   375x812'de düğme tamamen kartın altında kalıyordu). Panel kapanınca
   kart geri gelir; tercih sorulmadan kaybolmuş olmaz. */
body.acik #riza{opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .18s ease-out,visibility .18s}
/* pointer-events ŞART: visibility geçişi bittiği anda uygulanmıyor (ölçüldü),
   hap görünmez kalıyor ama TIKLANABİLİR oluyordu. Panelin sağ alt köşesine
   basan kişi, gizli "Ret" düğmesine basıp çerezleri istemeden reddediyordu. */

@media(min-width:900px){
  .sayfa-bas{padding:64px 0 44px}
  .sayfa-bas h1{font-size:92px}
  .ikili{grid-template-columns:1fr 1fr;gap:72px;padding-bottom:96px}
  .magaza-bilgi{padding-top:36px;padding-bottom:96px}
  .magaza-adres{flex-direction:row;justify-content:space-between;align-items:center;gap:40px}
  .magaza-adres .dugme{width:auto;flex:0 0 auto}
  .galeri{grid-template-columns:1fr 1fr;gap:20px;padding-bottom:96px}
  .galeri .gorsel{aspect-ratio:3/2}
  .alt{padding-top:52px;padding-bottom:32px}
  .alt-ic{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:28px}
  /* kimlik bloğu telefonda tam genişlikti; burada kendi sütununa döner */
  .alt-kimlik{grid-column:auto}
  .alt-sutun{font-size:15px;gap:6px}
  #riza{right:24px;bottom:24px}
  #riza.acik{width:340px}
  .sss,.blog,.metin{padding-bottom:96px}
}

/* Alt satır tek sıra: solda SSS/Blog, sağda yol tarifi. Düğme adresin
   ÜSTÜNDE duruyor ve kendi satırını yemiyor — kazanılan yer büyük
   başlıkların üstüne geçiyor. */
#panel .panel-ikincil{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--mermer)}
#panel .ikincil-baglar{display:flex;flex-wrap:wrap;gap:4px 18px}
#panel .ikincil-baglar a{font-size:13px;letter-spacing:.06em;color:var(--ara1);
  min-height:34px;display:inline-flex;align-items:center}
#panel .ikincil-baglar a:hover{color:var(--kiremit)}
#panel .ic{margin-top:auto;padding-top:48px}
/* Kısa ekran (iPhone SE, 667 px): punto 44'te KALIR — küçülen boşluklardır,
   ızgaranın bir alt basamağına iner. Ölçüldü: 375x667'de 80 px taşma vardı,
   bu blokla kapanıyor; yol tarifi düğmesi ekranda kalıyor. */
@media(max-height:700px){
  #panel a.bag{line-height:1.2}
  #panel .ic{padding-top:24px}
  #panel .panel-ikincil{margin-top:12px;padding-top:12px}
  #panel .alt-bilgi{margin-top:12px}
}

.galeri.tek{grid-template-columns:1fr}
.galeri.tek .gorsel{aspect-ratio:3/2}
.ziyaret{padding:40px 20px 64px;text-align:center;border-top:1px solid var(--mermer)}
.ziyaret .lab{margin-bottom:14px}
.ziyaret-adres{font-family:var(--display);font-size:24px;line-height:1.3;margin-bottom:8px}
.ziyaret-saat{font-size:17px;color:var(--ara1);margin-bottom:22px}
.ziyaret .dugme{display:inline-flex}
.kiyas{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:15px}
.kiyas th,.kiyas td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--mermer);vertical-align:top}
.kiyas th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ara2);font-weight:400}
@media(min-width:900px){.ziyaret{padding:64px 40px 96px}.ziyaret-adres{font-size:44px}}

/* blog listesi + yazı sayfası */
.blog{gap:0}
.yazi{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;padding:20px 0}
/* <picture> satır içi bir kutudur ve img'in height:%100'ü ona dayanır.
   Blok yapılmazsa görsel kabını tanımıyor — ölçüldü: 393 px genişlikte
   852 px boyunda çizdi, yazının tamamını ekrandan itti. */
.yazi-gorsel picture{display:block;width:100%;height:100%}
.yazi-gorsel{border-radius:10px;overflow:hidden;aspect-ratio:1}
.yazi-gorsel img{width:100%;height:100%;object-fit:cover}
.yazi h3{margin:5px 0 5px;font-size:24px;line-height:1.15}
/* Yer ÖNCEDEN ayrılıyor (3:2): görsel inerken yazı zıplamıyor.
   Oran KABIN kendisine değil picture'a veriliyor — kap .kenar'ın yan
   dolgusunu taşıyor, oranı ona yazsaydık 3:2 dolgu kadar şaşardı. */
.yazi-gorsel-buyuk{margin-bottom:30px}
.yazi-gorsel-buyuk picture{display:block;width:100%;aspect-ratio:3/2;
  border-radius:10px;overflow:hidden}
.yazi-gorsel-buyuk img{width:100%;height:100%;object-fit:cover}
.yazi-govde{padding-bottom:64px;max-width:none}
.yazi-govde .giris{font-size:24px;line-height:1.4;font-family:var(--display);color:var(--murekkep);
  max-width:30ch;margin-bottom:26px}
.yazi-govde h2{font-family:var(--display);font-weight:400;font-size:24px;margin:34px 0 12px}
.yazi-govde p{font-size:17px;color:var(--ara1);max-width:46ch;margin-bottom:14px}
.yazi-govde p b{font-weight:400;color:var(--murekkep)}
.yazi-govde ul,.yazi-govde ol{max-width:46ch;padding-left:20px;margin:0 0 18px;
  color:var(--ara1);font-size:17px}
.yazi-govde li{margin-bottom:8px}
/* Yazı içindeki tablo: KENDİ kabında kayar, sayfa yana kaymaz.
   Çerçeve değil satır çizgisi — sitede kutu yok, ayraç var. */
.yazi-tablo{overflow-x:auto;margin:0 0 22px}
.yazi-tablo table{border-collapse:collapse;font-size:15px;color:var(--ara1)}
.yazi-tablo th,.yazi-tablo td{text-align:left;vertical-align:top;
  padding:10px 24px 10px 0;border-bottom:1px solid var(--mermer)}
.yazi-tablo th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ara2);font-weight:400;white-space:nowrap}
/* Yazının sonundaki SSS, /sss sayfasındaki akordeonun aynısı. */
.yazi-govde .sss-madde{max-width:52ch}
.yazi-govde a{border-bottom:1px solid var(--mermer)}
.yazi-govde a:hover{color:var(--kiremit);border-color:var(--kiremit)}
.yazi-son{padding-top:22px;border-top:1px solid var(--mermer);margin-top:34px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase}
@media(min-width:900px){
  .yazi{grid-template-columns:200px 1fr;gap:28px;padding:26px 0}
  /* Şerit kartları geniş ekranda yan yana; liste kartının iki sütunlu
     düzenine DÖNMESİN diye burada yeniden tek blok. */
  .serit-blog .blog{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .serit-blog .yazi{display:block;padding:0}
  .serit-blog .yazi h3{font-size:24px}
  .yazi-govde .giris{font-size:44px;max-width:22ch}
  .yazi-govde h2{font-size:44px;margin:52px 0 16px}
}

.saat-serit{padding-bottom:8px}
.saat-serit p{font-size:15px;color:var(--ara1);letter-spacing:.02em;
  padding:14px 0;border-top:1px solid var(--mermer);border-bottom:1px solid var(--mermer)}
.saat-serit b{font-weight:400;color:var(--murekkep)}

/* kurumsal ↔ toptan ayrımı — karışmasın diye yan yana */
.ayrim{display:grid;gap:14px;padding-bottom:8px}
.ayrim-kart{border:1px solid var(--murekkep);padding:20px 20px 22px;border-top-right-radius:40px}
.ayrim-kart.sonuk{border-color:var(--mermer)}
.ayrim-kart .lab{margin-bottom:8px}
.ayrim-kart h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 8px}
.ayrim-kart p{font-size:15px;color:var(--ara1);margin-bottom:6px}
.ayrim-kart p b{font-weight:400;color:var(--murekkep)}
.ayrim-kart .hal-bag{margin-top:8px;font-size:12px}
@media(min-width:900px){.ayrim{grid-template-columns:1fr 1fr;gap:20px}
  .ayrim-kart{padding:28px 30px 30px;border-top-right-radius:56px}}

/* ═══════════ MENÜ SAYFASI ═══════════
   HIZ ÖNCE: görseller VARSAYILAN KAPALI. Metin menüsü ~22 KB, resim 0 bayt.
   İsteyen "Görseller"e basar; o zaman bile yalnız ekrana gelen iner (lazy). */
/* KATEGORİ ŞERİDİ — 13 Eyl'de yeniden kuruldu.
   Eski hâli yatay kaydırmalıydı ve müşteri "menünün devamı nerede" diye soruyordu:
   kayabildiği görünmüyordu, kayarken sayfa dikeyde de zıplıyordu. Artık kaydırma YOK —
   beş kategori de aynı anda ekranda, satırlar doğal sarıyor (kutu değil, tipografi).
   Aşağı inince (body.kaydi) punto ve boşluk küçülür ama HİÇBİRİ KAYBOLMAZ;
   en yukarı dönünce geri büyür. */
.menu-sekme{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;
  border-bottom:1px solid var(--mermer);position:sticky;top:80px;z-index:50;
  background:var(--kagit)}
/* Kudryashev'in TEK ağırlığı var; font-weight:700 demek tarayıcıya sahte kalın
   çizdirir ve bu ince didone yüzü bulanıklaştırır. Kalınlık bunun yerine
   text-stroke ile veriliyor — harf formu korunur, çizgi kalınlaşır. */
/* TEK İVME (13 Eyl): küçülme takılıyordu çünkü üç ayrı özellik — şeridin gap'i,
   linkin font-size'ı ve padding'i — ayrı ayrı animasyon ediliyordu; üçü farklı
   elemanda olunca aynı anda başlayıp bitmiyorlardı. Şimdi YALNIZ font-size
   animasyonlu; padding ve letter-spacing em cinsinden ondan türüyor, yani
   kendiliğinden aynı eğriyi izliyor. Tek özellik = tek ivme, daha az reflow. */
.menu-sekme a{font-family:var(--display);font-size:19px;font-weight:400;
  letter-spacing:.04em;text-transform:none;-webkit-text-stroke:.35px currentColor;
  color:var(--ara2);padding:.58em 0 .47em;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:font-size .3s cubic-bezier(.33,0,.25,1),color .2s}
.menu-sekme a.etkin{color:var(--murekkep);border-bottom-color:var(--kiremit)}
body.kaydi .menu-sekme{gap:2px 20px}
body.kaydi .menu-sekme a{font-size:15px}   /* gerisi em'den kendiliğinden gelir */

.menu-govde{padding-bottom:72px}
/* Gruba kayınca başlığın ŞERİDİN ALTINDA kalmaması için.
   ÖLÇÜLDÜ (375px, canlı 14 Eyl): üst başlık 80px + kategori şeridi 108px = 188px.
   Değer 118px'di — 70px eksikti, her grup başlığının üstü kesiliyordu.
   6px pay bırakıldı ki başlık şeride yapışık durmasın. */
.mgrup{scroll-margin-top:var(--yapiskan,194px)}   /* ölçüm menu.js'ten; 194 yalnız yedek */
/* Başlıklar ORİJİNAL tarifte — yalnız bir tık büyük (44→48 · 24→27).
   13 Eyl'de bir tur fazla gitmiştim: ayraç kalınlaştırılmış, alt gruba kiremit
   işaret konmuş, rengi koyulaştırılmıştı. Tasarımı bozuyordu, geri alındı. */
.mgrup-bas{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin:44px 0 2px;padding-bottom:10px;border-bottom:1px solid var(--murekkep)}
.mgrup-bas h2{font-size:48px;margin:0}
.malt{font-family:var(--display);font-weight:400;font-size:27px;margin:26px 0 0;color:var(--ara1)}
/* İlave notu: grup başlığının hemen altında TEK satır. İlaveler ürün bazında
   değil grup bazında tanımlı (kahvaltının 16 ürününde aynı altı grup), o yüzden
   her satıra yazmak tekrar olurdu. Sepet yok, seçim yok — yalnız bilgi. */
.milave{font-size:14px;line-height:1.5;color:var(--ara1);margin:10px 0 2px;
  font-style:italic;font-weight:500}   /* 13→14px · koyu + italik: ilaveler fiyatlı, gözden kaçmasın */
.msatir{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--mermer)}
.msatir h4{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1;margin:0}
.macik{font-size:15px;color:var(--ara2);max-width:46ch;margin-top:4px}
.mfiyat{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:3px}
.mroz{margin-top:6px}
.rozet{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kiremit-k);border:1px solid var(--kiremit);padding:2px 7px;margin-right:5px}

/* Sağ alttaki kutu: artık düğme değil, "bu üründe fotoğraf var" İŞARETİ.
   Basmak yine çalışır ama şart değil — satırın tamamı tıklanabilir (13 Eyl). */
.msatir[data-gorsel]{cursor:pointer}
.msatir[data-gorsel]:hover .mgorsel{border-color:var(--kiremit)}
.mgorsel{width:30px;height:30px;border:1px solid var(--mermer);grid-column:2;
  background:transparent;position:relative;justify-self:end;margin-top:4px;
  pointer-events:none}   /* tıklamayı satır yakalar — çift iş olmasın */
.mgorsel::before,.mgorsel::after{content:"";position:absolute;background:var(--ara2)}
.mgorsel::before{left:7px;right:7px;top:9px;height:1px}
.mgorsel::after{left:7px;right:7px;bottom:9px;height:1px;
  clip-path:polygon(0 100%,32% 30%,55% 60%,72% 40%,100% 100%)}
.mgorsel:hover{border-color:var(--kiremit)}
/* ── FOTO AÇIKKEN SATIR (13 Eyl) ─────────────────────────────────────
   Önce foto satırın ALTINA tam genişlikte açılıyordu; listeyi ikiye bölüyor
   ve ekranı yiyordu. Artık satırın İÇİNDE yaşıyor:
     sol sütun  → ad · açıklama · fiyat (fiyat sağdan ürünün ALTINA indi)
     sağ sütun  → foto, sağ üstte, satırın alt çizgisine dayanacak kadar
   Satırın boyu fotoyla aynı oluyor — foto 120px, alt boşluk sıfırlanıyor ki
   bir sonraki ürünün üstündeki çizgiye tam dayansın. */
.msatir img{grid-column:1/-1;width:100%;max-width:240px;border-radius:8px;margin-top:10px}

.msatir.foto-var{position:relative;grid-template-columns:1fr 140px;
  column-gap:16px;padding-bottom:0}
.msatir.foto-var > div{grid-column:1;grid-row:1}
.msatir.foto-var .mfiyat{grid-column:1;grid-row:2;justify-self:start;
  align-self:start;padding-top:8px;padding-bottom:15px}
.msatir.foto-var img{grid-column:2;grid-row:1/span 2;align-self:start;
  width:140px;max-width:none;height:auto;margin:0;border-radius:6px}
/* kapatma tuşu fotonun sağ üst köşesine biner — satırı uzatmasın */
.msatir.foto-var .mgorsel{position:absolute;top:13px;right:5px;z-index:2;
  margin:0;width:26px;height:26px;background:var(--kagit)}

.menu-not{margin-top:34px;padding-top:18px;border-top:1px solid var(--mermer)}
/* fiyat dipnotu: menunun EN ALTI, kucuk punto — musteri gorsun ama bagirmasin */
.menu-dip{margin-top:10px;font-size:11px;line-height:1.5;color:var(--ara2);opacity:.75;letter-spacing:.02em}
.msatir.gizli{display:none}
/* Menü listesi masaüstünde okuma genişliğinde — 1320px'lik satırda ürün adı
   ile fiyat arası göz için çok uzaktı. Kategori şeridi ve grup başlıkları
   aynı hizaya oturuyor ki liste ortada kaymış görünmesin. */
@media(min-width:900px){
  .menu-govde,.menu-sekme,.menu-arac{max-width:var(--en-okuma)}
  .menu-govde{margin-inline:auto}
  .menu-sekme{margin-inline:auto}
  /* Foto açılınca satır iki sütun: solda metin, sağda 160px görsel */
  /* Masaüstünde kutu büyük: 160px'ti, fotoğraf küçük kalıyordu (14 Eyl).
     220px + 800w kaynak = retinada net. */
  .msatir.foto-var{grid-template-columns:1fr 220px}
  .msatir.foto-var img{width:220px}
}

@media(min-width:900px){
  .menu-sekme{top:104px;gap:34px}
  .mgrup{scroll-margin-top:var(--yapiskan,200px)}
  .mgrup-bas h2{font-size:92px}
  .msatir{padding:18px 0}
}

/* Bal küpü: botlar her alanı doldurur, insan bunu GÖREMEZ.
   display:none DEĞİL — bazı botlar onu atlar; ekran dışına alıyoruz.
   aria-hidden + tabindex=-1 ile klavye ve ekran okuyucu da uğramaz. */
.bal{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}