/* ==========================================================================
   Harmoni QR Menü — ana stil
   Mobil öncelikli. Light tema sabit. iOS Safari / Chrome Android güvenli.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* yatay çevirince punto şişmesin */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;               /* iOS adres çubuğu zıplaması yok */
  background: var(--c-krem);
  color: var(--c-metin);
  font-family: var(--f-govde);
  font-size: var(--t-govde);
  line-height: var(--lh-govde);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;      /* aşağı çekip yenileme lastiği kapalı */
  overflow-x: hidden;
}

/* Kâğıt dokusu — çok hafif SVG gürültü. Sabit değil (iOS'ta fixed bozuk). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

/* Klavye kullanıcısı için görünür odak halkası */
:focus-visible {
  outline: 2px solid var(--c-kirmizi-canli);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sayfa kabı — telefon genişliğinde, büyük ekranda ortalı kart */
.kap {
  position: relative;
  z-index: 1;
  max-width: var(--genislik);
  margin: 0 auto;
  padding-bottom: calc(var(--b-8) + env(safe-area-inset-bottom));
}
@media (min-width: 34rem) {
  body { background: var(--c-krem-koyu); }
  .kap {
    background: var(--c-krem);
    box-shadow: var(--s-3);
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* ==========================================================================
   1 · TENTE + MARKA BAŞLIĞI
   ========================================================================== */

.tente {
  position: relative;
  height: clamp(3.5rem, 13vw, 4.75rem);
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
  /* Kırmızı-pembe dikey şeritler — afişteki tente */
  background: repeating-linear-gradient(
    90deg,
    var(--c-kirmizi)      0    12.5%,
    var(--c-pembe)   12.5%     25%
  );
  transform-origin: top center;
  animation: tente-in var(--h-yavas) var(--e-yumusak) both;
}
@keyframes tente-in { from { transform: scaleY(.55); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* Şeritlerin üstüne hafif ışık — kumaş hacmi */
.tente::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.10) 100%);
}

.marka {
  position: relative;
  text-align: center;
  /* Bant tentenin son festonu kadar yukarı taşar; feston ile bant AYNI
     kutunun iki arka plan katmanı, bu yüzden aralarında dikiş oluşmuyor.
     (Ayrı elemanla çizilince kesirli piksel sınırında ince çizgi çıkıyordu.) */
  margin-top: calc(-1 * var(--feston-boy));
  padding: calc(var(--b-6) + var(--feston-boy)) var(--b-4) var(--b-6);
  background:
    /* üst şerit: her şeride bir yarım elips oyuk (karo = %12.5) */
    radial-gradient(50% 100% at 50% 0, transparent 0 99%, var(--c-yesil-fon) 100%)
      0 0 / 12.5% var(--feston-boy) repeat-x,
    /* gövde: kreme çalan açık adaçayı. Feston şeridinin altına 1px giriyor —
       kesirli piksel yüksekliğinde iki katman arasında saç teli kalmasın. */
    linear-gradient(180deg, var(--c-yesil-fon) 0%, var(--c-yesil-fon2) 100%)
      0 calc(var(--feston-boy) - 1px) / 100% calc(100% - var(--feston-boy) + 1px) no-repeat;
}

/* Bandın altında krem sayfaya yumuşak geçiş */
.marka::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: var(--b-4);
  background: linear-gradient(180deg, transparent, rgba(59, 42, 40, .07));
  pointer-events: none;
}

.marka .logo {
  width: min(100%, 22rem);
  height: auto;
  margin: 0 auto;
  animation: logo-in var(--h-yavas) var(--e-yumusak) both;
  animation-delay: 120ms;
}
@keyframes logo-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.marka .fincan {
  width: clamp(3rem, 13vw, 4rem);
  height: auto;
  margin: 0 auto var(--b-3);
  color: var(--c-kirmizi);
  animation: yuksel var(--h-yavas) var(--e-yumusak) 120ms both;
}
.marka .fincan .buhar { animation: buhar 3.6s ease-in-out infinite; transform-origin: center bottom; }
.marka .fincan .buhar:nth-child(2) { animation-delay: .5s; }
.marka .fincan .buhar:nth-child(3) { animation-delay: 1s; }
@keyframes buhar {
  0%, 100% { opacity: .35; transform: translateY(0) scaleY(1); }
  50%      { opacity: .95; transform: translateY(-2px) scaleY(1.12); }
}

.marka h1 {
  font-family: var(--f-baslik);
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: var(--lh-sikisik);
  letter-spacing: var(--ls-dar);
  text-transform: uppercase;
  margin: 0;
  color: var(--c-kirmizi);                       /* background-clip yoksa yedek */
  background: var(--g-marka);
  -webkit-background-clip: text;
  background-clip: text;
  animation: yuksel var(--h-yavas) var(--e-yumusak) 200ms both;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .marka h1 { -webkit-text-fill-color: transparent; }
}

.marka .alt {
  margin: var(--b-2) 0 0;
  font-family: var(--f-baslik);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(.95rem, 4vw, 1.15rem);
  color: var(--c-pembe);
  animation: yuksel var(--h-yavas) var(--e-yumusak) 280ms both;
}

/* Süslü ayraç */
.ayrac {
  display: flex; align-items: center; justify-content: center; gap: var(--b-3);
  margin: var(--b-4) auto 0;
  max-width: 12rem;
  animation: yuksel var(--h-yavas) var(--e-yumusak) 340ms both;
}
.ayrac::before, .ayrac::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-pembe-acik));
}
.ayrac::after { background: linear-gradient(90deg, var(--c-pembe-acik), transparent); }
.ayrac span { width: 5px; height: 5px; border-radius: 50%; background: var(--c-pembe); flex: none; }

@keyframes yuksel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   2 · YAPIŞKAN KATEGORİ BARI
   ========================================================================== */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: var(--b-5);
  padding: var(--b-3) 0;
  background: rgba(250, 245, 238, .94);          /* backdrop-filter yoksa yedek */
  border-bottom: 1px solid transparent;
  transition: border-color var(--h-orta) var(--e-keskin),
              box-shadow   var(--h-orta) var(--e-keskin);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bar {
    background: rgba(250, 245, 238, .72);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
            backdrop-filter: saturate(180%) blur(14px);
  }
}
.bar.yapisti {
  border-bottom-color: var(--c-kart-kenar);
  box-shadow: 0 4px 18px rgba(107, 45, 40, .06);
}

.bar-ic {
  display: flex;
  gap: var(--b-2);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--b-4);
  scroll-padding-inline: var(--b-4);
}
.bar-ic::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  font-size: var(--t-chip);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .55rem .95rem;
  border-radius: var(--r-tam);
  border: 1px solid var(--c-kart-kenar);
  background: var(--c-kart);
  color: var(--c-metin-soft);
  cursor: pointer;
  transition: color var(--h-hizli) var(--e-keskin),
              border-color var(--h-hizli) var(--e-keskin),
              transform var(--h-hizli) var(--e-keskin);
}
.chip:active { transform: scale(.95); }
.chip[aria-current="true"] {
  background: var(--g-marka);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--s-2);
}

/* ==========================================================================
   3 · KATEGORİLER VE MENÜ SATIRLARI
   ========================================================================== */

.kategori {
  padding: var(--b-6) var(--b-4) 0;
  scroll-margin-top: calc(var(--bar-yuksekligi) + var(--b-3));
}

.kategori-basligi {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  margin-bottom: var(--b-4);
}
.kategori-basligi .ikon {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--r-tam);
  background: var(--c-pembe-sis);
  color: var(--c-kirmizi);
}
.kategori-basligi .ikon svg { width: 1.15rem; height: 1.15rem; }
.kategori-basligi h2 {
  font-family: var(--f-baslik);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-baslik);
  color: var(--c-kirmizi-koyu);
  margin: 0;
}
.kategori-basligi .sayi {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--c-metin-silik);
  font-variant-numeric: tabular-nums;
}

/* Ürün listesi kartı */
.liste {
  list-style: none;
  margin: 0;
  padding: var(--b-2) var(--b-4);
  background: var(--c-kart);
  border: 1px solid var(--c-kart-kenar);
  border-radius: var(--r-buyuk);
  box-shadow: var(--s-2), var(--s-ic);
}

.urun {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--b-3);
  padding: var(--b-3) 0;
  transition: transform var(--h-hizli) var(--e-keskin);
}
.urun + .urun { border-top: 1px solid rgba(239, 226, 212, .75); }
.urun:active { transform: scale(.985); }

.urun .ad {
  font-weight: 700;
  font-size: var(--t-h3);
  letter-spacing: var(--ls-dar);
  color: var(--c-metin);
}
/* Ad ile fiyat arasındaki noktalı ayraç */
.urun .cizgi {
  flex: 1 1 auto;
  min-width: 1.25rem;
  border-bottom: 1.5px dotted var(--c-pembe-acik);
  transform: translateY(-.28em);
}
.urun .fiyat {
  font-weight: 800;
  font-size: var(--t-fiyat);
  color: var(--c-kirmizi-canli);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.urun .fiyat .para { font-size: .82em; margin-left: .12em; opacity: .8; }
.urun .aciklama {
  flex: 1 0 100%;
  margin: 3px 0 0;
  font-size: var(--t-kucuk);
  color: var(--c-metin-soft);
}
.urun .rozet {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .45rem;
  border-radius: var(--r-tam);
  background: var(--c-pembe-sis);
  color: var(--c-kirmizi);
  white-space: nowrap;
  align-self: center;
}

/* Görünüme girince belirme.
   Yalnızca JS çalışıyorsa gizlenir (<html class="js">) — JavaScript kapalı
   telefonda menü ilk anda görünür kalsın. */
.js .belir { opacity: 0; transform: translateY(22px); }
.js .belir.gorundu {
  opacity: 1; transform: none;
  transition: opacity var(--h-yavas) var(--e-yumusak),
              transform var(--h-yavas) var(--e-yumusak);
}
@media (prefers-reduced-motion: reduce) {
  .js .belir, .js .belir.gorundu { opacity: 1; transform: none; transition: none; }
  .tente, .marka .logo, .marka h1, .marka .alt, .ayrac { animation: none; }
  .marka .fincan .buhar { animation: none; opacity: .7; }
}

/* ==========================================================================
   4 · ALT BİLGİ + YUKARI ÇIK
   ========================================================================== */

.dipnot {
  margin-top: var(--b-7);
  padding: var(--b-6) var(--b-4) 0;
  text-align: center;
}
.dipnot .not {
  margin: 0 0 var(--b-2);
  font-size: var(--t-kucuk);
  color: var(--c-metin-silik);
}
.dipnot .imza {
  margin: var(--b-5) 0 0;
  font-family: var(--f-baslik);
  font-style: italic;
  font-size: .9rem;
  color: var(--c-pembe);
}
.dipnot .telif {
  margin: var(--b-2) 0 0;
  font-size: .6875rem;
  color: var(--c-metin-silik);
}
.dipnot .yapimci {
  margin: var(--b-3) 0 0;
  font-size: .6875rem;
  color: var(--c-metin-silik);
}
.dipnot a { color: var(--c-kirmizi); text-decoration: none; font-weight: 700; }
.dipnot .yapimci a {
  color: var(--c-metin-soft);
  font-weight: 700;
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-color: var(--c-pembe-acik);
}
.dipnot .yapimci a:hover, .dipnot .yapimci a:focus-visible { color: var(--c-kirmizi); }

.yukari {
  position: fixed;
  right: max(var(--b-4), env(safe-area-inset-right));
  bottom: calc(var(--b-4) + env(safe-area-inset-bottom));
  z-index: 30;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-tam);
  background: var(--g-marka);
  color: #fff;
  box-shadow: var(--s-3);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity var(--h-orta) var(--e-yumusak),
              transform var(--h-orta) var(--e-yumusak),
              visibility var(--h-orta);
}
.yukari.gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari:active { transform: scale(.9); }
.yukari svg { width: 1.1rem; height: 1.1rem; }

/* Yükleniyor / hata */
.durum { padding: var(--b-8) var(--b-4); text-align: center; color: var(--c-metin-silik); font-size: var(--t-kucuk); }

/* ==========================================================================
   5 · YAZDIRMA (A4 menü çıktısı)
   ========================================================================== */
@media print {
  body::before, .bar, .yukari { display: none !important; }
  body { background: #fff; }
  .kap { box-shadow: none; max-width: none; }
  .liste { box-shadow: none; break-inside: avoid; }
  .kategori { break-inside: avoid; }
  .js .belir { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   6 · KATEGORİ VİTRİNİ (yatay kaydırmalı kartlar)
   Ana sayfada tentenin altında durur. Parmakla kaydırılır, karta dokununca
   o kategorinin kendi sayfasına gider.
   ========================================================================== */

.vitrin { margin-top: var(--b-3); }

.vitrin-basligi {
  display: flex;
  align-items: baseline;
  gap: var(--b-3);
  padding: 0 var(--b-4);
  margin-bottom: var(--b-4);
}
.vitrin-basligi h2 {
  font-family: var(--f-baslik);
  font-weight: 700;
  font-size: clamp(1.35rem, 5.5vw, 1.7rem);
  color: var(--c-kirmizi-koyu);
  margin: 0;
}
.vitrin-basligi .ipucu {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-metin-silik);
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}
.vitrin-basligi .ipucu svg { width: .85rem; height: .85rem; }
.vitrin-basligi .ipucu svg { animation: kaydir-ipucu 2.4s var(--e-yumusak) infinite; }
@keyframes kaydir-ipucu {
  0%, 60%, 100% { transform: translateX(0); opacity: .55; }
  30%           { transform: translateX(4px); opacity: 1; }
}

/* Kaydırma şeridi — scroll-snap ile kartlar hizada durur */
.vitrin-seridi {
  display: flex;
  gap: var(--b-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Kenar boşluğu şeridin içinde: son kart da nefes alsın */
  padding: var(--b-1) var(--b-4) var(--b-4);
  scroll-padding-left: var(--b-4);
  /* Kaydırınca sayfanın kendisi yana kaymasın */
  overscroll-behavior-x: contain;
}
.vitrin-seridi::-webkit-scrollbar { display: none; }

/* Kart — küçük ikon rozetli kompakt kare; 3 kategori kaydırmadan tek
   ekrana sığar, kategori sayısı artarsa şerit kendiliğinden kayar */
.vitrin-kart {
  flex: 0 0 auto;
  width: clamp(5.75rem, 27vw, 7.5rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
  padding: var(--b-4) var(--b-2);
  text-decoration: none;
  color: inherit;
  background: var(--c-kart);
  border: 1px solid var(--c-kart-kenar);
  border-radius: var(--r-orta);
  box-shadow: var(--s-2);
  transition: transform var(--h-orta) var(--e-yumusak),
              box-shadow var(--h-orta) var(--e-yumusak);
}
.vitrin-kart:active { transform: scale(.965); box-shadow: var(--s-1); }
@media (hover: hover) {
  .vitrin-kart:hover { transform: translateY(-4px); box-shadow: var(--s-3); }
}

.vitrin-kart .ikon-rozet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--g-marka);
  box-shadow: var(--s-1);
  transition: transform var(--h-orta) var(--e-yumusak);
}
.vitrin-kart .ikon-rozet svg { width: 1.5rem; height: 1.5rem; color: #fff; }
@media (hover: hover) {
  .vitrin-kart:hover .ikon-rozet { transform: scale(1.08) rotate(-4deg); }
}

.vitrin-kart .govde { display: block; }
.vitrin-kart .ad {
  display: block;
  font-weight: 800;
  font-size: .8125rem;
  letter-spacing: var(--ls-dar);
  color: var(--c-metin);
  line-height: 1.25;
}
.vitrin-kart .adet {
  display: block;
  margin-top: .2rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-metin-silik);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7 · KATEGORİ SAYFASI
   ========================================================================== */

.hero {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 15rem;
  overflow: hidden;
  background: var(--c-krem-koyu);
}
@supports not (aspect-ratio: 16 / 9) {
  .hero { height: 13rem; }
}
.hero picture { display: block; width: 100%; height: 100%; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(59, 42, 40, .34) 0%,
              rgba(59, 42, 40, .05) 42%,
              var(--c-krem) 100%);
}

/* Geri düğmesi — hero'nun üstünde yüzer */
.geri {
  position: absolute;
  top: calc(var(--b-3) + env(safe-area-inset-top));
  left: var(--b-3);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .85rem .5rem .65rem;
  border-radius: var(--r-tam);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-kirmizi);
  background: rgba(255, 252, 247, .88);
  box-shadow: var(--s-2);
  transition: transform var(--h-hizli) var(--e-keskin);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .geri {
    background: rgba(255, 252, 247, .68);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
  }
}
.geri:active { transform: scale(.94); }
.geri svg { width: .9rem; height: .9rem; }

/* Kategori sayfasının başlık bloğu — hero'nun üstüne biner */
.kat-ust {
  position: relative;
  z-index: 2;
  margin-top: -3.25rem;
  padding: 0 var(--b-4);
  text-align: center;
}
.kat-ust .rozet-kat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: var(--r-tam);
  background: var(--g-marka);
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--s-2);
}
.kat-ust .rozet-kat svg { width: .8rem; height: .8rem; }
.kat-ust h1 {
  font-family: var(--f-baslik);
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: var(--lh-baslik);
  color: var(--c-kirmizi-koyu);
  margin: var(--b-3) 0 0;
}
.kat-ust .tanim {
  margin: var(--b-2) auto 0;
  max-width: 22rem;
  font-size: var(--t-kucuk);
  color: var(--c-metin-soft);
}

/* Kategori sayfasında ürün listesi üst boşluğu */
.kategori.tek { padding-top: var(--b-5); }

/* Diğer kategoriler — kategori sayfasının altındaki geçiş şeridi */
.diger { margin-top: var(--b-7); }
.diger .vitrin-basligi h2 { font-size: 1.25rem; }