/* =============================================================================
   [MARKA ADI] — 3D / AR Menü
   style.css   ·   mobil öncelikli (mobile-first) yazılmıştır:
   temel kurallar telefon için, @media (min-width) blokları büyük ekran için.

   İÇİNDEKİLER
   01. Tasarım belirteçleri (renk, tipografi, ölçü)
   02. Sıfırlama ve temel
   03. Yardımcı sınıflar
   04. Butonlar
   05. Fiyat ve rozet
   06. Üst çubuk
   07. Giriş (intro)
   08. Kategori sekmeleri
   09. Ürün kartı ve 3D sahne
   10. Kompakt satır (3D'siz kalemler)
   11. Yazılı menü
   12. Footer
   13. Modal
   14. Animasyon ve prefers-reduced-motion
   ========================================================================== */


/* =============================================================================
   01. TASARIM BELİRTEÇLERİ — renkleri değiştirmek için tek yer burası
   ========================================================================== */
:root {
  /* Çam yeşili paleti */
  --pine-950: #08150F;   /* sayfa zemini, en koyu */
  --pine-900: #0D2018;   /* kart zemini */
  --pine-800: #133024;   /* yükseltilmiş yüzey, üst çubuk */
  --pine-700: #1B4735;   /* kenarlık, ayraç */
  --pine-600: #26694A;   /* birincil marka yeşili, butonlar */
  --pine-500: #34875F;   /* hover */
  --moss:     #6FA882;   /* ikincil vurgu, ikonlar, menü fiyatı */
  --sage:     #B9D2C0;   /* ikincil metin */
  --cream:    #F3F1E7;   /* birincil metin */
  --brass:    #C9A24A;   /* fiyat ve rozet */

  /* Anlamsal eşlemeler */
  --bg:            var(--pine-950);
  --bg-yuzey:      var(--pine-900);
  --kenarlik:      var(--pine-700);
  --metin:         var(--cream);
  --metin-ikincil: var(--sage);

  /* Tipografi */
  --font-baslik: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-govde:  'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Yüzey */
  --radius:      16px;
  --radius-sm:   10px;
  --radius-pill: 999px;
  --parilti: 0 0 60px -24px rgba(38, 105, 74, .55);

  /* Ölçü */
  --kapsayici: 1100px;
  --ust-yukseklik: 60px;
  --gecis: 200ms cubic-bezier(.2, .7, .3, 1);
}


/* =============================================================================
   02. SIFIRLAMA VE TEMEL
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ust-yukseklik) + 12px);
  /* iOS Safari'de yatay taşmayı kesin olarak engelle */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body.kilitli { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-baslik);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 .5em;
  font-weight: 700;
  /* Uzun ürün adları dar ekranda taşmasın */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.75rem, 6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 4.5vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 3.4vw, 1.2rem); }

p { margin: 0 0 1rem; }

a { color: var(--cream); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--moss); }

img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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


/* =============================================================================
   03. YARDIMCI SINIFLAR
   ========================================================================== */
.kapsayici {
  width: 100%;
  min-width: 0;
  max-width: var(--kapsayici);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 700px) { .kapsayici { padding-inline: 28px; } }

.bolum { padding-block: clamp(36px, 7vw, 72px); }

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

.atla {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 999;
  background: var(--pine-600);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
}
.atla:focus { top: 10px; }

.ust-etiket {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 600;
  margin: 0 0 .7rem;
}


/* =============================================================================
   04. BUTONLAR
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-kenar: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  /* Dokunma hedefi en az 44px yüksekliğinde kalsın */
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--btn-kenar);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--cream);
  font-family: var(--font-govde);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}

.btn--birincil { --btn-bg: var(--pine-600); --btn-kenar: var(--pine-600); }
.btn--birincil:hover { --btn-bg: var(--pine-500); --btn-kenar: var(--pine-500); color: var(--cream); }

.btn--ikincil { --btn-kenar: var(--pine-700); }
.btn--ikincil:hover { --btn-bg: var(--pine-800); --btn-kenar: var(--pine-600); color: var(--cream); }

.btn svg { width: 16px; height: 16px; flex: none; }


/* =============================================================================
   05. FİYAT VE ROZET
   ========================================================================== */
.rozet {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid rgba(201, 162, 74, .45);
  background: rgba(201, 162, 74, .1);
  padding: .25rem .55rem;
  border-radius: var(--radius-pill);
}

.fiyat {
  font-family: var(--font-baslik);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brass);
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

/* "+ kutu içecekle 645 ₺" — menü (kombo) fiyatı */
.fiyat-menu {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--moss);
  white-space: nowrap;
}


/* =============================================================================
   06. ÜST ÇUBUK
   ========================================================================== */
.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--ust-yukseklik);
  background: rgba(19, 48, 36, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kenarlik);
}

.ust__ic {
  min-height: var(--ust-yukseklik);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.marka {
  font-family: var(--font-baslik);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cream);
  /* Uzun marka adı telefonda taşmasın */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marka span { color: var(--moss); }

.ust__saglik { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Telefon butonunda dar ekranda yalnızca ikon kalır */
.ust__tel-yazi { display: none; }
@media (min-width: 560px) { .ust__tel-yazi { display: inline; } }


/* =============================================================================
   07. GİRİŞ
   ========================================================================== */
.intro { padding-block: clamp(32px, 8vw, 64px) clamp(24px, 5vw, 40px); }

.intro h1 { margin-bottom: .6rem; }
.intro h1 .vurgu { color: var(--moss); }

.intro__aciklama {
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  color: var(--metin-ikincil);
  max-width: 62ch;
  margin: 0;
}
.intro__aciklama strong { color: var(--cream); font-weight: 600; }

.intro__notlar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: 1.2rem;
  font-size: .8rem;
  color: var(--metin-ikincil);
}
.intro__notlar li { display: flex; align-items: center; gap: .4rem; }
.intro__notlar li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--moss);
  flex: none;
}


/* =============================================================================
   08. KATEGORİ SEKMELERİ
   ========================================================================== */
.sekmeler {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  /* Telefonda kenardan kenara kaysın ama içerik hizası korunsun */
  margin-inline: -16px;
  padding: 0 16px .6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--pine-700) transparent;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 700px) { .sekmeler { margin-inline: -28px; padding-inline: 28px; } }

.sekmeler::-webkit-scrollbar { height: 5px; }
.sekmeler::-webkit-scrollbar-thumb { background: var(--pine-700); border-radius: 3px; }

.sekme {
  flex: none;
  min-height: 40px;
  padding: .5rem 1rem;
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--metin-ikincil);
  font-family: var(--font-govde);
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.sekme:hover { color: var(--cream); border-color: var(--pine-600); }
.sekme[aria-selected='true'] {
  background: var(--pine-600);
  border-color: var(--pine-600);
  color: var(--cream);
}


/* =============================================================================
   09. ÜRÜN KARTI VE 3D SAHNE
   ========================================================================== */
.izgara {
  display: grid;
  gap: 14px;
  /* minmax içindeki min(), 320px altı ekranlarda taşmayı önler */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  margin-top: 1.4rem;
}
@media (max-width: 519px) {
  .izgara { grid-template-columns: minmax(0, 1fr); }
  .kart { min-width: 0; width: 100%; }
  .intro h1, .intro__aciklama { overflow-wrap: anywhere; }
}

@media (max-width: 419px) {
  .ust__saglik > .btn--ikincil { display: none; }
}

.kart {
  display: flex;
  flex-direction: column;
  background: var(--bg-yuzey);
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius);
  box-shadow: var(--parilti);
  overflow: hidden;
  transition: border-color var(--gecis);
}
.kart:hover { border-color: var(--pine-600); }

/* --- Sahne: fotoğraf ya da 3D model --- */
.kart__sahne {
  position: relative;
  flex: none;
  /* Kare oran. İçerik mutlak konumlandığı için farklı en-boy oranındaki bir
     fotoğraf bu oranı esnetemez — ızgaradaki kartlar aynı yükseklikte kalır. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pine-950);
  border-bottom: 1px solid var(--kenarlik);
}

.kart__sahne > .kart__foto,
.kart__sahne > .foto-yok,
.kart__sahne > model-viewer { position: absolute; inset: 0; }

.kart__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* Fotoğrafı olmayan ürünler için yer tutucu */
.foto-yok {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1rem;
  text-align: center;
  color: var(--metin-ikincil);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(27, 71, 53, .22) 12px 13px),
    var(--pine-900);
}
.foto-yok svg { width: 30px; height: 30px; color: var(--pine-600); }
.foto-yok span { font-size: .85rem; font-weight: 600; }
.foto-yok small { font-size: .72rem; color: var(--moss); }

model-viewer {
  width: 100%;
  height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  /* AR'ı kendi butonumuzdan başlatıyoruz */
  --ar-button-display: none;
}
model-viewer::part(default-ar-button) { display: none; }

.sahne__ipucu {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: .68rem;
  font-weight: 600;
  color: var(--sage);
  background: rgba(8, 21, 15, .75);
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius-pill);
  padding: .25rem .6rem;
  pointer-events: none;
}

.sahne__geri {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  min-height: 32px;
  padding: .3rem .7rem;
  font-family: var(--font-govde);
  font-size: .72rem;
  font-weight: 600;
  color: var(--cream);
  background: rgba(8, 21, 15, .8);
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.sahne__geri:hover { background: var(--pine-800); border-color: var(--pine-600); }

/* Model yüklenirken ek görsel yerine hafif metin durumu */
.model-durumu {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem;
  color: var(--metin-ikincil);
  background: var(--pine-950);
  font-size: .82rem;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 200ms ease;
}
[data-yuklendi='true'] .model-durumu { opacity: 0; visibility: hidden; }
[data-model-hata='true'] .model-durumu { color: var(--cream); }
.model-durumu__nokta {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--brass);
  animation: nabiz 1s ease-in-out infinite alternate;
}
@keyframes nabiz { to { opacity: .3; transform: scale(.75); } }

/* --- Kart gövdesi --- */
.kart__govde {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 14px;
  flex: 1;
}

.kart__ust-sira { min-height: 22px; }
.kart__ad { margin: 0; font-size: 1.05rem; }

.kart__aciklama {
  margin: 0;
  color: var(--metin-ikincil);
  font-size: .85rem;
  line-height: 1.45;
}

.kart__fiyat { margin-top: auto; padding-top: .6rem; }
.fiyat-bekleniyor { color: var(--metin-ikincil); font-size: .78rem; }

.kart__butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .8rem;
}
.kart__butonlar .btn { flex: 1 1 120px; padding-inline: .6rem; }
.kart__butonlar .ar-yok { flex: 1 1 100%; }
.uc-boyut-yok {
  width: 100%;
  margin: 0;
  color: var(--metin-ikincil);
  font-size: .76rem;
  line-height: 1.4;
}

/* AR desteklenmiyorsa butonun yerine geçen not */
.ar-yok {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border: 1px dashed var(--kenarlik);
  border-radius: var(--radius-sm);
  background: rgba(8, 21, 15, .5);
  font-size: .76rem;
  line-height: 1.35;
  color: var(--metin-ikincil);
}
.ar-yok img { width: 40px; height: 40px; border-radius: 5px; flex: none; }
.ar-yok svg { width: 20px; height: 20px; flex: none; color: var(--brass); }


/* =============================================================================
   10. KOMPAKT SATIR — 3D modeli olmayan kalemler (içecekler)
   ========================================================================== */
.satirlar {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin-top: 14px;
}

.satir {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  background: var(--bg-yuzey);
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius-sm);
}
.satir__ikon {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 8px;
  background: var(--pine-800);
  padding: 7px;
}
.satir__metin { flex: 1; min-width: 0; }
.satir__ad { font-weight: 600; font-size: .93rem; }
.satir__aciklama { font-size: .76rem; color: var(--metin-ikincil); }
.satir__fiyat {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--brass);
  white-space: nowrap;
}

.bos-durum { padding: 2rem 0; color: var(--metin-ikincil); text-align: center; }


/* =============================================================================
   11. YAZILI MENÜ — menünün tamamı, düz metin
   ========================================================================== */
.yazili { border-top: 1px solid var(--kenarlik); }

.yazili__izgara {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  margin-top: 1.6rem;
}
@media (min-width: 760px) { .yazili__izgara { grid-template-columns: 1fr 1fr; } }

.yazili__grup { break-inside: avoid; }

.yazili__baslik {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 700;
  padding-bottom: .5rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--kenarlik);
}

.yazili__satir {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px dashed rgba(27, 71, 53, .55);
}
.yazili__satir:last-child { border-bottom: 0; }

.yazili__ad { font-size: .95rem; font-weight: 500; min-width: 0; }

/* Noktalı dolgu: ad ile fiyat arasını doldurur, dar ekranda kaybolur */
.yazili__nokta {
  flex: 1;
  border-bottom: 1px dotted rgba(111, 168, 130, .35);
  transform: translateY(-4px);
  min-width: .5rem;
}

.yazili__fiyatlar { text-align: right; flex: none; }
.yazili__fiyat {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1rem;
  color: var(--brass);
  white-space: nowrap;
}

.yazili__not {
  margin-top: 1.6rem;
  font-size: .8rem;
  color: var(--metin-ikincil);
}


/* =============================================================================
   12. FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--kenarlik);
  background: var(--pine-900);
  padding-block: 32px 24px;
}

.footer__ic {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}
.footer p, .footer a { color: var(--metin-ikincil); font-size: .87rem; margin: 0 0 .35rem; }
.footer a:hover { color: var(--cream); }

.footer__telif {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--kenarlik);
  font-size: .78rem;
  color: var(--metin-ikincil);
}


/* =============================================================================
   13. MODAL
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 11, 8, .75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal[hidden] { display: none; }
@media (min-width: 800px) { .modal { align-items: center; padding: 24px; } }

.modal__kutu {
  position: relative;
  width: min(900px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-yuzey);
  border: 1px solid var(--pine-700);
  border-radius: var(--radius) var(--radius) 0 0;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .modal__kutu { grid-template-columns: 1fr 1fr; border-radius: var(--radius); }
}

.modal__sahne {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--pine-950);
  border-bottom: 1px solid var(--kenarlik);
}
@media (min-width: 800px) {
  .modal__sahne { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--kenarlik); }
}

/* Modal içinde sahne kabuğu sütunun tamamını doldurur */
.modal__sahne .kart__sahne {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-bottom: 0;
  background: transparent;
}

.modal__kapat {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 6;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--kenarlik);
  background: rgba(8, 21, 15, .85);
  color: var(--cream);
  cursor: pointer;
}
.modal__kapat:hover { background: var(--pine-800); border-color: var(--pine-600); }

.modal__govde { padding: 18px; }
@media (min-width: 700px) { .modal__govde { padding: 26px; } }

.modal__govde h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); margin-bottom: .4rem; }
.modal__aciklama { color: var(--metin-ikincil); font-size: .92rem; }

.modal__baslik-kucuk {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 600;
  margin: 1.2rem 0 .5rem;
}

.malzemeler { display: flex; flex-wrap: wrap; gap: .35rem; }
.malzemeler li {
  font-size: .78rem;
  color: var(--metin-ikincil);
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius-pill);
  padding: .25rem .65rem;
}

.alerjen-not {
  font-size: .8rem;
  color: var(--metin-ikincil);
  border-left: 2px solid var(--brass);
  padding-left: .75rem;
  margin-top: 1rem;
}

.modal__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--kenarlik);
}
.modal__butonlar { display: flex; gap: .45rem; flex-wrap: wrap; }


/* =============================================================================
   14. ANİMASYON
   ========================================================================== */
.beliren {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms ease, transform 450ms cubic-bezier(.2, .7, .3, 1);
}
.beliren.gorunur { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .beliren { opacity: 1; transform: none; }
  .model-durumu__nokta { animation: none; }
}