/* =============== Indra Restaurant Menu (Modern UI) — v2 (compact + iOS blur) =============== */
.indra-menu{
  --gap:18px;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --muted:#C7CDD6;              /* daha açık, koyu zeminde okunur */
  --surface:#0B1E17;            /* koyu arkaplan (solid tema) */
  --chip:#0f2a20;               /* koyu chip bg */
  --chip-active:#12442f;        /* aktif chip bg */
  --chip-border:rgba(255,255,255,.14);
  --text:#ffffff;               /* METİN BEYAZ */
  --brand:#0b4327;              /* İSTENEN BUTON RENGİ */
  --brand-strong:#09361f;
  --glass:rgba(11,67,39,.26);   /* frosted cam katmanı */
  --glass-soft:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.16);
  max-width:1180px;margin:0 auto;padding:24px 18px;color:var(--text);
}

/* Header */
.indra-menu__header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.indra-menu__title{font-family:Marcellus,serif;font-size:18px;letter-spacing:.2px} /* küçültüldü */
.indra-menu__search input{
  padding:10px 12px;border:1px solid var(--stroke);
  border-radius:12px;min-width:220px;background:var(--glass-soft);color:var(--text);
  transition:border .2s, box-shadow .2s
}
.indra-menu__search input::placeholder{color:rgba(255,255,255,.55)}
.indra-menu__search input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(11,67,39,.25)}

/* ---------- Scrollable Tabs (Chips as buttons) ---------- */
.indra-tabs{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;margin:8px 0 6px}
.indra-tabs__nav{
  width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);
  display:grid;place-items:center;cursor:pointer;user-select:none;border:1px solid var(--stroke);color:var(--text)
}
.indra-tabs__nav:hover{background:rgba(255,255,255,.1)}

.indra-tabs__scroller{display:flex;gap:10px;overflow:auto;scroll-snap-type:x mandatory;padding:2px 6px;scrollbar-width:thin}
.indra-tabs__scroller::-webkit-scrollbar{height:8px}
.indra-tabs__scroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}

/* TAB: default = SOLID BRAND GREEN with white text */
.indra-tab{
  scroll-snap-align:center;white-space:nowrap;cursor:pointer;
  border:1px solid var(--brand);padding:8px 13px;border-radius:999px;
  background:var(--brand); color:#fff; font-weight:700; letter-spacing:.2px;
  font-size:.9rem; /* küçültüldü */
  transition:background .2s, transform .15s, border-color .2s
}
.indra-tab:hover{transform:translateY(-1px);background:var(--brand-strong)}
.indra-tab.is-active{background:transparent;color:var(--text);border-color:#fff}

/* TAB (iOS blur görünümü) – İSTERSEN: .indra-tab--blur ekle */
.indra-tab--blur{
  background:rgba(11,67,39,.22);
  border-color:rgba(255,255,255,.28);
}
@supports (backdrop-filter: blur(10px)){
  .indra-tab--blur{
    backdrop-filter:saturate(160%) blur(14px);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
  }
}

/* ---------- Panels & Grid ---------- */
.indra-panels{margin-top:8px}
.indra-panel{display:none}
.indra-panel.is-active{display:block}

.indra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
@media (max-width:1024px){.indra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.indra-grid{grid-template-columns:1fr}}

/* ---------- Cards (default: solid dark; blur modu: .use-blur ile aktif) ---------- */
.indra-card{
  border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
	
	background: rgba(11, 67, 39, .22);
        backdrop-filter: saturate(160%) blur(18px);
        -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.indra-card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.24);}
.indra-card__inner{display:block;background: transparent;border: 0;width:100%;text-align:left;color:var(--text)}

.indra-card__media{position:relative}
.indra-card__media img,.indra-modal__media img{width:100%;height:220px;object-fit:cover;display:block}
.indra-card__placeholder{height:150px;}

.indra-card__body{padding:12px 12px 14px}
.indra-card__title{font-weight:800;margin-bottom:4px;font-size:0.9rem;line-height:1.25} /* küçültüldü */
.indra-card__excerpt{color:var(--muted);font-size:.9rem;line-height:1.55;margin-bottom:10px}
.indra-card__price{
  font-weight:900;display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:10px;background:rgba(11,67,39,.45);color:#fff;
  border:1px solid rgba(255,255,255,.22);font-size:.9rem
}

/* BLUR MODE: Kartları iOS cam efekti yap */
.use-blur .indra-card{ background:rgba(11,67,39,.22) }
@supports (backdrop-filter: blur(10px)){
  .use-blur .indra-card{
    backdrop-filter:saturate(160%) blur(16px);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
  }
}

/* ---------- CTA Buttons (global) ---------- */
.btn, .indra-modal__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:14px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;text-decoration:none;font-weight:800;
  box-shadow:0 8px 22px rgba(11,67,39,.35);transition:transform .12s ease, background .2s, border-color .2s
}
.btn:hover, .indra-modal__cta:hover{transform:translateY(-1px);background:var(--brand-strong)}
.btn:active, .indra-modal__cta:active{transform:translateY(0)}

/* BLUR BUTON varyantı: .btn--blur ekle */
.btn--blur{
  background:rgba(11,67,39,.28);border-color:rgba(255,255,255,.28)
}
@supports (backdrop-filter: blur(10px)){
  .btn--blur{
    backdrop-filter:saturate(160%) blur(14px);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
  }
}

/* ---------- Empty ---------- */
.indra-empty{color:var(--muted);padding:12px}

/* ---------- Modal (yüksek z-index + glassy) ---------- */
.indra-modal{position:fixed;inset:0;display:none; z-index:9999}
.indra-modal.is-open{display:block}
.indra-modal__backdrop{
  position:absolute;inset:0;background:rgba(5,10,8,.55)
}
@supports (backdrop-filter: blur(10px)){
  .indra-modal__backdrop{backdrop-filter:saturate(120%) blur(6px);-webkit-backdrop-filter:saturate(120%) blur(6px)}
}
.indra-modal__dialog{
  position:relative;z-index:10000;max-width:980px;margin:5vh auto;background:#0b1713;color:#fff;
  border:1px solid var(--stroke);border-radius:24px;overflow:hidden;
  display:grid;grid-template-columns:1.2fr 1fr; box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(12px); opacity:0; animation:indraModalIn .22s ease forwards
}
@supports (backdrop-filter: blur(10px)){
  .indra-modal__dialog{
    background:rgba(11,67,39,.22);
    backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
  }
}
@keyframes indraModalIn{to{transform:translateY(0);opacity:1}}

@media (max-width:980px){.indra-modal__dialog{grid-template-columns:1fr;margin:5vh 16px}}
.indra-modal__media img{height:100%;min-height:260px;max-height:520px}
.indra-modal__content{padding:18px}
.indra-modal__title{font-size:20px;margin-bottom:8px;letter-spacing:.2px} /* küçültüldü */
.indra-modal__desc{color:var(--muted);line-height:1.75;margin-bottom:14px;font-size:.95rem}
.indra-modal__footer{display:flex;justify-content:space-between;align-items:center;gap:12px}
.indra-modal__price{
  font-weight:900;font-size:.95rem;padding:7px 10px;border-radius:12px;
  background:rgba(11,67,39,.4);border:1px solid rgba(255,255,255,.22);color:#fff
}
.indra-modal__cta{padding:11px 14px}
.indra-modal__close{
  position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:12px;
  background:#0c2018;color:#fff;font-size:22px;display:grid;place-items:center;border:1px solid var(--stroke);
  box-shadow:0 6px 20px rgba(0,0,0,.35)
}

/* ---------- Micro polish ---------- */
a{color:#dff7ec}
.indra-card__body a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.indra-card__body a:hover{opacity:.85}

/* Accessibility focus */
:where(.indra-menu) :is(button, [role="button"], .btn, .indra-tab, .indra-tabs__nav, .indra-modal__close, .indra-modal__cta){
  outline:none
}
:where(.indra-menu) :is(button, [role="button"], .btn, .indra-tab, .indra-tabs__nav, .indra-modal__close, .indra-modal__cta):focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.25), 0 0 0 5px rgba(11,67,39,.35)
}

/* Utility: space */
.spacer-8{height:8px}
.spacer-12{height:12px}

/* OPTIONAL: Eğer listeleri daha da kompakt istersen */
.compact .indra-card__title{font-size:.85rem}
.compact .indra-card__excerpt{font-size:.85rem}
.compact .indra-card__price{font-size:.85rem;padding:4px 8px}
.compact .indra-tab{font-size:.85rem;padding:7px 12px}