/* ============================================================
   AS MANGAL / AS CAFE — Ortak Stil Dosyası (style.css)
   ------------------------------------------------------------
   Bu dosya tüm sayfalarda (index.html, ascafe.php, asmangal.php,
   hakkimizda.html, galeri.html, iletisim.html ...) kullanılır.
   Başka bir HTML sayfasında kullanmak için:
     <link rel="stylesheet" href="style.css">
   ve arka plan efekti için:
     <div class="vignette"></div>
     <canvas id="embers"></canvas>
     <script src="embers.js" defer></script>
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --coal:      #17130f;   /* ana zemin            */
  --coal-2:    #221b15;   /* kart / panel zemini  */
  --coal-3:    #2a2118;   /* hover zemini         */
  --line:      rgba(140,132,120,0.22); /* ince çizgiler */
  --ash:       #8c8478;   /* ikincil metin        */
  --bone:      #ede6db;   /* ana metin            */
  --ember:     #c1440e;   /* köz turuncusu        */
  --ember-2:   #7a2e12;   /* koyu köz             */
  --flame:     #e8a33d;   /* alev sarısı          */

  /* ürün meta renkleri (bilinçli olarak farklı) */
  --cal:       #e8a33d;   /* kalori  -> alev sarısı   */
  --ing:       #a99f8f;   /* içindekiler -> nötr gri  */
  --allergen:  #ff6a4d;   /* alerjen -> uyarı kırmızı */

  --nav-h: 68px;
  --maxw: 1120px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--coal);
  color:var(--bone);
  font-family:'Work Sans', system-ui, sans-serif;
  font-weight:300;
  line-height:1.6;
  min-height:100vh;
}

::selection{ background:rgba(193,68,14,0.55); color:var(--bone); }

img, svg{ max-width:100%; }

a{ color:var(--flame); text-decoration:none; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--flame);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Ambiyans: vinyet + köz partikülleri ---------- */

.vignette{
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 50% 65%, rgba(193,68,14,0.14), transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(193,68,14,0.25), transparent 60%);
  pointer-events:none;
  z-index:1;
}

canvas#embers{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:2;
  pointer-events:none;
}

/* Sayfa içeriği her zaman efektlerin üstünde */
.site-nav, .page, .stage, .site-footer{ position:relative; z-index:3; }

/* ---------- Üst gezinme (nav) ---------- */

.site-nav{
  position:sticky;
  top:0;
  z-index:10;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 clamp(1rem, 4vw, 2.5rem);
  background:rgba(23,19,15,0.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.brand{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.7rem;
  letter-spacing:0.06em;
  line-height:1;
  color:var(--bone);
  white-space:nowrap;
}
.brand span{
  background:linear-gradient(180deg, var(--flame) 0%, var(--ember) 60%, var(--ember-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand small{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.52rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--ash);
  margin-top:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(0.4rem, 1.6vw, 1.4rem);
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{ display:none; }

.nav-links a{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ash);
  padding:0.55rem 0.65rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a.active{
  color:var(--flame);
  border-bottom-color:var(--ember);
}

/* ---------- Genel sayfa düzeni ---------- */

.page{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2rem, 6vh, 4.5rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}

/* Tam ekran "sahne" (Çok Yakında / 404 gibi sayfalar) */
.stage{
  min-height:calc(100vh - var(--nav-h) - 90px);
  min-height:calc(100svh - var(--nav-h) - 90px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4vh 6vw;
  width:100%;
  max-width:900px;
  margin:0 auto;
}

/* ---------- Başlıklar ---------- */

.hero-title, h1.giant{
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(4rem, 14vw, 9rem);
  line-height:0.9;
  letter-spacing:0.02em;
  color:var(--bone);
  text-shadow:0 0 40px rgba(193,68,14,0.35);
  font-weight:400;
}
.hero-title span, h1.giant span{
  display:block;
  background:linear-gradient(180deg, var(--flame) 0%, var(--ember) 60%, var(--ember-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

h2.section-title{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing:0.04em;
  color:var(--bone);
}

/* Mono üst-etiket ("status") */
.status, .kicker{
  font-family:'JetBrains Mono', monospace;
  font-size:clamp(0.8rem, 1.8vw, 1.05rem);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--bone);
}

.note{
  font-size:0.95rem;
  color:var(--ash);
  font-weight:300;
  max-width:520px;
}

/* ---------- Izgara çizgisi + köz noktaları (divider) ---------- */

.divider{
  width:100%;
  max-width:520px;
  margin:1.8rem auto 0;
  display:block;
}
@keyframes glow{
  0%, 100%{ opacity:0.15; filter:none; r:3; }
  50%{ opacity:1; filter:drop-shadow(0 0 6px #e8a33d); r:4; }
}

/* ---------- Etiket çipleri (Taptaze Etler, Doğayla İç İçe...) ---------- */

.tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.6rem;
  margin-top:1.6rem;
}
.tag{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--flame);
  border:1px solid rgba(232,163,61,0.35);
  background:rgba(232,163,61,0.06);
  padding:0.45rem 0.95rem;
  border-radius:999px;
  white-space:nowrap;
}

/* ---------- Kart butonlar (index'teki 3 büyük buton) ---------- */

.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem, 2.5vw, 1.6rem);
  margin-top:3rem;
  width:100%;
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:0.55rem;
  padding:1.7rem 1.5rem 1.5rem;
  background:linear-gradient(165deg, var(--coal-2), rgba(34,27,21,0.6));
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--bone);
  overflow:hidden;
  transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg, var(--flame), var(--ember), var(--ember-2));
  opacity:0.85;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(232,163,61,0.45);
  box-shadow:0 18px 40px rgba(0,0,0,0.5), 0 0 30px rgba(193,68,14,0.15);
}

.card-icon{
  font-size:1.9rem;
  line-height:1;
  filter:drop-shadow(0 0 10px rgba(232,163,61,0.35));
}

.card-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:0.6rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ash);
}

.card-title{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.75rem;
  line-height:1;
  letter-spacing:0.03em;
  color:var(--bone);
}

.card-desc{
  font-size:0.9rem;
  color:var(--ash);
  min-height:2.6em;
}

.card-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--flame);
  padding-top:0.9rem;
}
.card-cta::after{ content:"→"; transition:transform 0.2s ease; }
.card:hover .card-cta::after{ transform:translateX(5px); }

.card .badge-soon{
  position:absolute;
  top:1rem; right:1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.55rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ember);
  border:1px solid rgba(193,68,14,0.5);
  background:rgba(193,68,14,0.1);
  border-radius:999px;
  padding:0.3rem 0.7rem;
}

/* ---------- Düz buton (link görünümlü) ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--flame);
  border:1px solid rgba(232,163,61,0.35);
  padding:0.85rem 1.6rem;
  border-radius:2px;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.btn:hover, .btn:focus-visible{
  border-color:var(--flame);
  background:rgba(232,163,61,0.08);
}
.btn--solid{
  color:var(--coal);
  background:linear-gradient(120deg, var(--flame), var(--ember));
  border-color:transparent;
  font-weight:600;
}
.btn--solid:hover{ background:linear-gradient(120deg, var(--ember), var(--ember-2)); color:var(--bone); }

/* Buton sırası (ana sayfadaki 3 buton) — fotoğraftaki stil:
   dolu köz turuncusu menü butonları + çizgili altın rezervasyon butonu */
.btn-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:2.8rem;
  width:100%;
}
.btn-row .btn{
  min-width:270px;
  justify-content:center;
  gap:0.55rem;
  padding:1rem 1.9rem;
  border-radius:8px;
  font-family:'Work Sans', sans-serif;
  font-weight:700;
  font-size:0.98rem;
  letter-spacing:0.02em;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

/* dolu turuncu — menü butonları */
.btn--primary{
  background:#f95c1e;
  border-color:#f95c1e;
  color:#1c130c;
  box-shadow:0 10px 26px rgba(249,92,30,0.25);
}
.btn--primary:hover, .btn--primary:focus-visible{
  background:#ff6b31;
  border-color:#ff6b31;
  color:#1c130c;
  transform:translateY(-2px);
}

/* çizgili altın — rezervasyon */
.btn--ghost{
  background:rgba(23,19,15,0.35);
  border-color:var(--flame);
  color:var(--flame);
}
.btn--ghost:hover, .btn--ghost:focus-visible{
  background:rgba(232,163,61,0.1);
  border-color:#f2b45c;
  color:#f2b45c;
  transform:translateY(-2px);
}

@media (max-width: 600px){
  .btn-row .btn{ width:100%; min-width:0; }
}

/* ---------- Bilgi / uyarı kutusu ---------- */

.notice{
  position:relative;
  width:100%;
  max-width:760px;
  margin:1.6rem auto 0;
  padding:1.05rem 1.25rem 1.05rem 1.45rem;
  background:rgba(232,163,61,0.05);
  border:1px solid var(--line);
  border-left:3px solid var(--flame);
  border-radius:6px;
  color:var(--ash);
  font-size:0.85rem;
  text-align:left;
}
.notice p + p{ margin-top:0.45rem; }
.notice.error{
  border-left-color:var(--allergen);
  background:rgba(255,106,77,0.06);
  color:#e0a294;
}

/* ============================================================
   MENÜ (ascafe.php) — referans akış: kategori seçimi → ürün listesi
   ============================================================ */

.menu-hero{
  text-align:center;
  padding-top:1rem;
}
.menu-title-xl{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  font-size:clamp(2.8rem,8vw,4.6rem);
  line-height:1;
  letter-spacing:0.03em;
  color:var(--bone);
  text-shadow:0 0 40px rgba(193,68,14,0.35);
}
.menu-title-xl span{
  background:linear-gradient(180deg, var(--flame) 0%, var(--ember) 60%, var(--ember-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.menu-chooser-title{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:0.06em;
  color:var(--bone);
  text-align:center;
  margin-bottom:1.8rem;
}

/* ---------- Kategori seçim ekranı ---------- */

.kategori-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}
.kategori-buton{
  background:linear-gradient(145deg, var(--coal-2), #2b1d0e);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 18px;
  cursor:pointer;
  text-align:center;
  font-family:'Work Sans', sans-serif;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--bone);
  width:100%;
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
.kategori-buton:hover,
.kategori-buton:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(193,68,14,0.3);
  border-color:var(--ember);
  color:var(--flame);
  outline:none;
}
.kategori-buton i{
  display:block;
  font-size:1.6rem;
  color:var(--ember);
  margin-bottom:10px;
}

@media (max-width: 520px){
  .kategori-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .kategori-buton{ font-size:0.8rem; padding:16px 10px; }
}
@media (max-width: 360px){
  .kategori-grid{ grid-template-columns:1fr; }
}

/* ---------- Geri butonu ---------- */

.menu-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1.5px solid var(--ember);
  color:var(--flame);
  font-family:'Work Sans', sans-serif;
  font-size:0.9rem;
  font-weight:600;
  padding:0.55rem 1.15rem;
  border-radius:8px;
  cursor:pointer;
  margin-bottom:1.6rem;
  transition:background 0.2s, color 0.2s;
}
.menu-back:hover{ background:var(--ember); color:var(--bone); }

/* ---------- Ürün listesi ekranı ---------- */

#urun-listesi{ padding-bottom:70px; }

.urun-baslik{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  font-size:clamp(2rem, 4.5vw, 3rem);
  letter-spacing:0.04em;
  color:var(--flame);
  text-shadow:0 0 20px rgba(232,163,61,0.3);
  margin:0.4rem 0 1rem;
  border-bottom:3px solid var(--ember);
  padding-bottom:0.55rem;
  word-break:break-word;
}

/* KDV — belirgin */
.menu-vat-note{
  font-family:'JetBrains Mono', monospace;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--flame);
  margin:0 0 0.5rem;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.menu-calorie-note{
  font-size:0.84rem;
  font-weight:400;
  color:var(--ash);
  margin:0 0 0;
  font-style:italic;
}

.menu-panel{
  background:rgba(34,27,21,0.6);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 20px;
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
}

/* DÜZELTİLMİŞ LİSTE — isim solda, fiyat + meta sağda (grid hizalı) */
.menu-list{
  list-style:none;
  padding:0;
  margin:1.4rem 0 0;
  display:flex;
  flex-direction:column;
}
.menu-item{
  display:grid;
  grid-template-columns:1fr 145px;
  align-items:center;
  gap:8px 18px;
  padding:14px 10px;
  border-bottom:1px dashed rgba(140,132,120,0.25);
}
.menu-item:last-child{ border-bottom:none; }

.item-info{ display:flex; flex-direction:column; min-width:0; }
.item-name{
  font-size:1.03rem;
  font-weight:600;
  color:var(--bone);
  word-break:break-word;
  line-height:1.35;
}
.item-type{
  font-size:0.82rem;
  color:var(--ash);
  font-weight:400;
  margin-top:2px;
}

.item-price{
  font-family:'JetBrains Mono', monospace;
  font-size:1.15rem;
  font-weight:600;
  color:var(--flame);
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:0.2px;
}
/* meta: kalori alev sarısı / içindekiler nötr gri / alerjen uyarı kırmızısı */
.item-calorie,
.item-ingredients,
.item-allergens{
  font-size:0.74rem;
  text-align:right;
  margin-top:3px;
  line-height:1.35;
}
.item-calorie{ color:var(--cal); font-family:'JetBrains Mono', monospace; }
.item-ingredients{ color:var(--ing); font-style:italic; }
.item-allergens{ color:var(--allergen); font-weight:600; }

@media (max-width: 560px){
  .menu-item{ grid-template-columns:1fr 110px; gap:6px 10px; padding:12px 6px; }
  .item-price{ font-size:1rem; }
  .item-name{ font-size:0.97rem; }
  .menu-panel{ padding:14px 12px; }
}

/* Yükleniyor */
.loading-spinner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 0;
  gap:18px;
  color:var(--ash);
  font-size:1rem;
}
.loading-spinner i{
  font-size:2.5rem;
  color:var(--ember);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.menu-error{
  text-align:center;
  padding:40px 20px;
  color:var(--allergen);
  font-size:1rem;
  background:rgba(255,106,77,0.07);
  border:1px solid rgba(255,106,77,0.35);
  border-radius:10px;
}
.menu-error small{ color:var(--ing); }

.info-note{
  margin-top:28px;
  padding:16px 18px;
  background:rgba(34,27,21,0.7);
  border-radius:8px;
  border-left:4px solid var(--ember);
  text-align:center;
  color:var(--ash);
  font-size:0.88rem;
}

/* ekran geçiş animasyonu */
.fade-in{ animation:fadeIn 0.28s ease forwards; }
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- Alt bilgi ---------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:1.6rem clamp(1rem, 4vw, 2.5rem) 2.2rem;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ash);
  opacity:0.85;
}
.site-footer .foot-note{
  display:block;
  margin-top:0.6rem;
  font-family:'Work Sans', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.02em;
  text-transform:none;
  opacity:0.75;
  max-width:760px;
  margin-left:auto; margin-right:auto;
}

/* ---------- Giriş animasyonları ---------- */

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.anim{ opacity:0; animation:rise 1s ease-out forwards; }
.d1{ animation-delay:0.2s; } .d2{ animation-delay:0.4s; }
.d3{ animation-delay:0.6s; } .d4{ animation-delay:0.8s; }
.d5{ animation-delay:1.0s; } .d6{ animation-delay:1.2s; }

/* ---------- Küçük ekran ---------- */

@media (max-width: 760px){
  .cards{ grid-template-columns:1fr; }
  .card-desc{ min-height:0; }
  .site-nav{ height:auto; min-height:var(--nav-h); flex-wrap:wrap; padding-block:0.4rem; }
  .menu-item-top h3{ font-size:0.95rem; }
}

@media (prefers-reduced-motion: reduce){
  .anim, .menu-category{ animation:none; opacity:1; transform:none; }
  canvas#embers{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Yazdırma (menüyü basmak isterseniz) ---------- */

@media print{
  .site-nav, canvas#embers, .vignette, .menu-back, .site-footer,
  #kategori-secim, .toc{ display:none !important; }
  body{ background:#fff; color:#000; }
  #urun-listesi{ display:block !important; }
  .urun-baslik, .item-name, .item-price, .menu-vat-note{ color:#000 !important; text-shadow:none; }
  .menu-panel{ background:#fff; border-color:#999; box-shadow:none; }
}