/* Shine Cafe — pages.css: sayfaya özgü kurallar. Ana sayfa (Task 9), Menü (Task 10), Nargile (Task 11), VIP (Task 12), Etkinlikler (Task 13), Geçmiş Etkinlikler (Task 14) ve Şubeler / şube sayfaları / Galeri / İletişim / 404 / Gizlilik (Task 15) — tamamı "Gece ışıkları" dilinde. */

/* ---------- Hero tabanı (ana sayfa .hero-home ve nargile .hero-nargile bunu genişletir) ---------- */
.hero { position: relative; display: grid; place-items: center; min-height: 78vh; min-height: 78svh; padding: 72px 0; overflow: hidden; isolation: isolate; text-align: center; }
.hero p { max-width: 560px; margin: 0 auto 28px; color: var(--gray-light); font-size: 1.1rem; }

/* =====================================================================
   Ana sayfa (Task 9) — "Gece ışıkları"
   Hero → etkinlik şeridi → gecenin ritmi → öne çıkanlar → şubeler → etkinlikler → mozaik → sosyal
   ===================================================================== */

/* ---------- Sinematik hero ----------
   Yükseklik: görünen alan − başlık (− duyuru şeridi, − mobil sekme çubuğu); kaydırma oku ilk ekranda kalır. */
.hero-home {
  --hero-cut: var(--header-h);
  --smoke-opacity: .085;
  min-height: calc(100vh - var(--hero-cut));
  min-height: calc(100svh - var(--hero-cut));
  padding: 56px 0 120px;
}
html[data-announce="on"] .hero-home { --hero-cut: calc(var(--header-h) + var(--announce-h)); }
@media (max-width: 860px) {
  .hero-home { --hero-cut: calc(var(--header-h) + var(--tabbar-h)); padding: 48px 0 104px; }
  html[data-announce="on"] .hero-home { --hero-cut: calc(var(--header-h) + var(--tabbar-h) + var(--announce-h)); }
}
/* Görsel katmanı: fotoğraf yoksa sıcak gradient; varsa .45 opaklıkta, yavaş "Ken Burns" yaklaşması + alttan zemine erime. */
.hero-home .hero-media {
  overflow: hidden;
  background:
    radial-gradient(55% 50% at 50% 44%, rgba(227,18,27,.20), transparent 70%),
    radial-gradient(36% 30% at 84% 16%, rgba(242,163,60,.14), transparent 70%),
    radial-gradient(30% 26% at 12% 78%, rgba(56,189,248,.06), transparent 70%),
    var(--bg);
}
.hero-home .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s var(--ease);
}
.hero-home .hero-media.is-loaded img { opacity: .45; animation: hero-drift 28s var(--ease) both; }
@keyframes hero-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-home .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 42%, transparent 45%, rgba(11,10,10,.72) 100%),
    linear-gradient(180deg, rgba(11,10,10,.5) 0%, transparent 20%, transparent 58%, var(--bg) 100%);
}

.hero-inner { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.hero-home .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: none;
  margin: 0 0 clamp(20px, 3.4vh, 32px);
  padding-left: .34em;
  color: var(--gray-light);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  animation: hero-rise 1s var(--ease) .1s both;
}
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: clamp(24px, 6vw, 56px); height: 1px; background: linear-gradient(90deg, transparent, rgba(242,163,60,.75)); }
.hero-eyebrow::after { transform: scaleX(-1); }
.hero-eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
@media (max-width: 400px) { .hero-home .hero-eyebrow { gap: 10px; letter-spacing: .24em; padding-left: .24em; } .hero-eyebrow::before, .hero-eyebrow::after { width: 16px; } }

/* Neon logo: tüp yanar gibi bir kez titreyerek açılır (yalnız filter — LCP öğesi baştan görünür). */
.hero-home .hero-logo {
  width: min(520px, 80vw);
  height: auto;
  margin: 0 auto;
  filter: brightness(1) drop-shadow(0 0 24px rgba(227,18,27,.45));
  animation: neon-ignite 1.8s linear .15s both;
}
@keyframes neon-ignite {
  0% { filter: brightness(.28) drop-shadow(0 0 0 rgba(227,18,27,0)); }
  9% { filter: brightness(1.18) drop-shadow(0 0 30px rgba(227,18,27,.6)); }
  13% { filter: brightness(.4) drop-shadow(0 0 4px rgba(227,18,27,.1)); }
  21% { filter: brightness(1.12) drop-shadow(0 0 28px rgba(227,18,27,.55)); }
  25% { filter: brightness(.62) drop-shadow(0 0 10px rgba(227,18,27,.2)); }
  36%, 100% { filter: brightness(1) drop-shadow(0 0 24px rgba(227,18,27,.45)); }
}
.hero-home .hero-slogan {
  max-width: 15.12em; /* ≈24ch */
  margin: clamp(22px, 4vh, 36px) auto clamp(28px, 5vh, 44px);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .005em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.65);
  animation: hero-rise 1s var(--ease) .75s both;
}
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; animation: hero-rise 1s var(--ease) .95s both; }
.hero-cta .btn { min-height: 52px; padding: 14px 30px; font-size: 1rem; }
.hero-cta .btn-neon { background: rgba(11,10,10,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-self: stretch; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 320px; }
}
@keyframes hero-rise { from { opacity: 0; translate: 0 16px; } }

/* Kaydırma oku: altta ortada, yavaşça süzülür. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  color: var(--gray-light);
  animation: hero-rise 1s var(--ease) 1.4s both;
  transition: color .2s;
}
.hero-scroll::before {
  content: '';
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-bob 2.6s ease-in-out 2.4s infinite;
}
.hero-scroll:hover { color: var(--cream); }
@keyframes scroll-bob { 0%, 100% { translate: 0 0; opacity: .55; } 50% { translate: 0 7px; opacity: 1; } }
/* Etkinlik şeridi hero'nun altına bindiğinde ok şeridin üstünde kalır. */
.hero-home:has(+ .event-alert-wrap:not([hidden])) .hero-scroll { bottom: 64px; }

/* ---------- Etkinlik şeridi (K1600 event-alert) ----------
   Hero'nun eriyen alt kenarına biner (ilk ekranda "göz kırpar"); cam zemin, ok biçimli kırmızı rozet, canlı sayaç. */
.event-alert-wrap { position: relative; z-index: 2; margin-top: -40px; animation: hero-rise .8s var(--ease) both; }
.event-alert {
  --ev-color: var(--neon);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "badge info cd go";
  align-items: center;
  column-gap: 22px;
  min-height: 76px;
  padding-right: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(20,16,17,.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.event-alert::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 8%, var(--red) 40%, var(--ev-color) 70%, transparent 95%);
  opacity: .85;
}
@media (hover: hover) {
  .event-alert:hover { transform: translateY(-2px); border-color: transparent; box-shadow: 0 0 0 1px var(--red), 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(227,18,27,.18); }
  .event-alert:hover .ea-go { color: #d6f1ff; translate: 3px 0; }
}
.ea-badge {
  grid-area: badge;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 30px 0 20px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.ea-badge::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: lamp 1.8s ease-in-out infinite; }
.ea-info { grid-area: info; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 0; }
.ea-info strong { overflow: hidden; color: var(--cream); font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ea-meta { overflow: hidden; color: var(--gray-light); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.ea-countdown { grid-area: cd; display: flex; gap: 6px; }
.ea-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  padding: 7px 6px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  perspective: 300px;
}
.ea-cd-num { display: block; color: var(--cream); font: 700 22px/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-shadow: 0 0 16px rgba(227,18,27,.3); }
.ea-cd i { margin-top: 5px; padding-left: .14em; color: var(--gray); font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ea-go { grid-area: go; color: var(--neon); font-size: .92rem; font-weight: 600; white-space: nowrap; transition: color .2s, translate .3s var(--ease); }
.event-alert .cd-live { grid-area: cd; padding: 8px 16px; font-size: .72rem; }
@media (max-width: 760px) {
  .event-alert { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "badge go" "info info" "cd cd"; padding: 0 0 16px; }
  .ea-badge { justify-self: start; padding: 9px 30px 9px 16px; }
  .ea-go { padding: 0 16px; }
  .ea-info { padding: 12px 16px 14px; }
  .ea-info strong, .ea-meta { white-space: normal; }
  .ea-countdown { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 16px; }
  .ea-cd { min-width: 0; }
  .event-alert .cd-live { justify-self: start; margin-left: 16px; }
}

/* ---------- Gecenin ritmi: Nargile · Mutfak · VIP ---------- */
.rhythm-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: rhythm; }
.rhythm-card {
  --k: var(--red);
  --k-text: #ff5c63;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 32px 28px 28px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background:
    radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--k) 16%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  counter-increment: rhythm;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.rhythm-card[data-kind="mutfak"] { --k: var(--amber); --k-text: var(--amber); }
.rhythm-card[data-kind="vip"] { --k: var(--neon); --k-text: var(--neon); }
.rhythm-card::after {
  content: counter(rhythm, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 22px;
  z-index: -1;
  color: rgba(245,239,230,.05);
  font: italic 600 5rem/1 var(--font-head);
  pointer-events: none;
}
.rhythm-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  margin-bottom: auto;
  border: 1px solid color-mix(in srgb, var(--k) 42%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--k) 10%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--k) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--k) 12%, transparent);
  color: var(--k-text);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.rhythm-icon .ic { width: 30px; height: 30px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--k) 70%, transparent)); }
.rhythm-card h3 { margin: 56px 0 8px; font-size: clamp(1.6rem, 2.4vw, 2rem); }
.rhythm-card p { margin: 0 0 22px; color: var(--gray-light); }
.rhythm-go { color: var(--k-text); font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
@media (hover: hover) {
  .rhythm-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 0 0 1px var(--k), 0 22px 50px rgba(0,0,0,.5), 0 0 44px color-mix(in srgb, var(--k) 20%, transparent); }
  .rhythm-card:hover .rhythm-icon { transform: scale(1.06); box-shadow: 0 0 44px color-mix(in srgb, var(--k) 40%, transparent), inset 0 0 18px color-mix(in srgb, var(--k) 18%, transparent); }
}
.rhythm-card:focus-visible { outline-offset: 4px; }
@media (max-width: 860px) {
  .rhythm-grid { grid-template-columns: 1fr; gap: 14px; }
  .rhythm-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; min-height: 0; padding: 22px 20px; border-radius: 18px; }
  .rhythm-icon { grid-row: span 3; width: 56px; height: 56px; margin: 0; }
  .rhythm-icon .ic { width: 26px; height: 26px; }
  .rhythm-card h3 { margin: 2px 0 4px; font-size: 1.45rem; }
  .rhythm-card p { margin: 0 0 10px; font-size: .95rem; }
  .rhythm-card::after { top: auto; bottom: -8px; font-size: 4rem; }
}

/* ---------- Öne çıkanlar: fotoğraflı yatay şerit ---------- */
.feat-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.feat-photo { position: absolute; inset: 0; }
.feat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,10,0) 32%, rgba(11,10,10,.6) 62%, rgba(11,10,10,.94)); pointer-events: none; }
.feat-body { position: absolute; inset: auto 0 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 12px; padding: 14px 16px; }
.feat-cat { grid-column: 1 / -1; overflow: hidden; color: var(--gray-light); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.feat-name { display: -webkit-box; overflow: hidden; color: var(--cream); font-size: .98rem; line-height: 1.25; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.feat-card .price { font-size: 1.02rem; text-shadow: 0 0 14px rgba(242,163,60,.3); }
@media (hover: hover) {
  .feat-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 0 0 1px var(--red), 0 18px 40px rgba(0,0,0,.45), 0 0 32px rgba(227,18,27,.14); }
  .feat-card:hover .feat-photo img { transform: scale(1.06); }
  .feat-card:hover .price { text-shadow: 0 0 16px var(--amber-glow); }
}
#home-products .skeleton { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.rail-nav { display: flex; gap: 8px; margin-left: auto; }
.rail-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: var(--glass);
  color: var(--cream);
  transition: border-color .2s, box-shadow .2s, opacity .2s, transform .12s;
}
.rail-btn .ic { width: 18px; height: 18px; }
.rail-btn:hover:not(:disabled) { border-color: var(--red); box-shadow: var(--glow-red); }
.rail-btn:active:not(:disabled) { transform: scale(.94); }
.rail-btn:disabled { opacity: .3; cursor: default; }
@media (hover: none), (max-width: 600px) { .rail-nav { display: none; } }

/* ---------- Yaklaşan etkinlikler ---------- */
.events-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .events-grid { grid-template-columns: 1fr; } }

/* ---------- Galeri mozaiği ----------
   4 sütun: ilk öğe 2×2. Tam 6 fotoğrafta 3. öğe dikey, 5–6 yatay → 3 satır boşluksuz. Mobilde 2 sütun: [1 1][2 3][4 5][6 6]. */
.mosaic { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 17vw, 210px); grid-auto-flow: dense; }
.mosaic-item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  cursor: zoom-in;
}
.mosaic-item:first-child { grid-column: span 2; }
@media (min-width: 601px) {
  .mosaic-item:first-child { grid-row: span 2; }
  .mosaic[data-n="6"] .mosaic-item:nth-child(3) { grid-row: span 2; }
  .mosaic[data-n="6"] .mosaic-item:nth-child(5), .mosaic[data-n="6"] .mosaic-item:nth-child(6) { grid-column: span 2; }
}
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; }
.mosaic-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 60%, rgba(11,10,10,.45)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: box-shadow .3s; pointer-events: none; }
@media (hover: hover) {
  .mosaic-item:hover img { transform: scale(1.05); filter: brightness(1.08); }
  .mosaic-item:hover::after { box-shadow: inset 0 0 0 1px rgba(227,18,27,.7), inset 0 0 40px rgba(227,18,27,.18); }
}
@media (max-width: 600px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 40vw; gap: 8px; }
  .mosaic[data-n="6"] .mosaic-item:last-child { grid-column: span 2; }
}

/* ---------- Sosyal ---------- */
.social-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.social-grid:empty { display: none; }
.social-grid + .social-grid { margin-top: 12px; }
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt span { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font-size: .8rem; }
.ig { width: 100%; height: 420px; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); }

/* ---------- Azaltılmış hareket: giriş koreografisi ve Ken Burns kapalı, her şey baştan yerinde ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-home .hero-eyebrow, .hero-home .hero-logo, .hero-home .hero-slogan, .hero-cta, .hero-scroll, .hero-scroll::before,
  .event-alert-wrap, .hero-home .hero-media.is-loaded img, .ea-badge::before { animation: none; }
  .hero-home .hero-media img { transform: none; }
}

/* =====================================================================
   Menü (Task 10) — başlık → yapışkan kategori şeridi (scroll-spy) → kategori bantları → kartlar / satırlar → ürün modalı
   ===================================================================== */
/* Bölümler kendi scroll-margin-top'unu taşır (başlık + şerit); html'in genel scroll-padding'i burada sıfırlanır, yoksa ikisi toplanır.
   --rail-h JS'te şeridin gerçek yüksekliğiyle güncellenir. */
:root { --rail-h: 60px; }
html:has(body[data-page="menu"]) { scroll-padding-top: 0; }

/* ---------- Başlık: etiket, Playfair "Menü", arama + şube, filtreler, not ---------- */
.menu-hero { --smoke-opacity: .075; padding: clamp(40px, 7vw, 72px) 0 20px; }
.menu-hero h1 { margin: 14px 0 8px; }
.menu-hero h1 + .muted { max-width: 27.72em; /* ≈44ch */ margin: 0 0 28px; color: var(--gray-light); font-size: 1.05rem; }
.menu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 14px; }
.search-wrap { position: relative; flex: 1 1 280px; max-width: 520px; }
.search-wrap::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--gray);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: background-color .2s;
}
.search-wrap:focus-within::before { background: var(--neon); }
.search {
  width: 100%;
  min-height: 50px;
  padding: 12px 18px 12px 48px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(20,18,18,.85);
  color: var(--cream);
  font-size: 1rem; /* iOS yakınlaştırmasın */
  transition: border-color .2s, box-shadow .2s;
}
.search::placeholder { color: var(--gray); }
.search:hover { border-color: rgba(255,255,255,.2); }
.search:focus-visible { outline: none; border-color: var(--neon); box-shadow: 0 0 0 4px var(--neon-soft); }
.menu-tools .branch-toggle button { min-height: 40px; padding: 8px 16px; }
.menu-filters { margin: 0 0 4px; }
.menu-filters .chip { min-height: 36px; padding: 6px 14px; font-size: .85rem; }
.menu-filters .chip .ic { width: 15px; height: 15px; }
#menu-note { min-height: 1.6em; margin: 0; }

/* ---------- Yapışkan kategori şeridi ----------
   Cam zemin; kenarlarda maskeyle solma (başta/sonda ilgili kenar açılır); etkin çipin altında kayan kırmızı çizgi (.rail-ink). */
.menu-tabs {
  position: sticky;
  top: var(--header-h-sm);
  z-index: 40;
  background: rgba(11,10,10,.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-block: 1px solid var(--glass-border);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.menu-rail {
  --fade-l: 32px;
  --fade-r: 32px;
  position: relative;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 9px 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.menu-rail::-webkit-scrollbar { display: none; }
.menu-tabs.at-start .menu-rail { --fade-l: 0px; }
.menu-tabs.at-end .menu-rail { --fade-r: 0px; }
.menu-rail .chip { min-height: 38px; padding: 7px 14px; border-color: transparent; background: transparent; font-size: .88rem; }
.menu-rail .chip::after { display: none; }
.menu-rail .chip:hover { background: var(--glass); }
.menu-rail .chip.active { color: #fff; background: rgba(227,18,27,.12); border-color: rgba(227,18,27,.4); }
.menu-rail .chip:focus-visible { outline-offset: -2px; }
.rail-ink {
  position: absolute;
  left: 0;
  bottom: 14px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(227,18,27,.75);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s;
}
@media (max-width: 600px) {
  .menu-tabs .wrap { padding-inline: 0; }
  .menu-rail { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); --fade-l: 20px; --fade-r: 20px; }
}

/* ---------- Kategori bölümü: kapak bandı + bandın altına taşan başlık ---------- */
.menu-section { padding-top: 40px; }
.menu-cat { --k: var(--amber); scroll-margin-top: calc(56px + var(--rail-h) + 12px); }
.menu-cat[data-kind="nargile"], .pm-photo[data-kind="nargile"] { --k: var(--red); }
.menu-cat[data-kind="soguk"], .pm-photo[data-kind="soguk"] { --k: var(--neon); }
.menu-cat[data-kind="sicak"], .pm-photo[data-kind="sicak"] { --k: var(--amber); }
.menu-cat[data-kind="mutfak"], .pm-photo[data-kind="mutfak"] { --k: #ff7a3d; }
.menu-cat + .menu-cat { margin-top: clamp(56px, 8vw, 88px); }
.menu-cat-head { position: relative; margin-bottom: 28px; }
.menu-cat-band {
  position: relative;
  aspect-ratio: 3 / 1;
  max-height: 300px;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(60% 120% at 85% 0%, color-mix(in srgb, var(--k) 28%, transparent), transparent 70%),
    linear-gradient(135deg, var(--surface-2), var(--bg-2));
}
.menu-cat-band img { width: 100%; height: 100%; object-fit: cover; }
.menu-cat-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(11,10,10,.35) 100%),
    linear-gradient(180deg, rgba(11,10,10,0) 35%, rgba(11,10,10,.6) 72%, var(--bg) 100%);
}
.menu-cat-band.is-plain { aspect-ratio: auto; height: clamp(110px, 14vw, 150px); max-height: none; box-shadow: inset 0 0 0 1px var(--glass-border); }
.menu-cat-band.is-plain::after { background: linear-gradient(180deg, transparent 40%, rgba(11,10,10,.7) 100%); }
.menu-cat-glyph { position: absolute; right: clamp(16px, 5vw, 48px); top: 50%; font-size: clamp(56px, 9vw, 96px); line-height: 1; opacity: .5; transform: translateY(-50%) rotate(-8deg); filter: saturate(.8) drop-shadow(0 0 30px color-mix(in srgb, var(--k) 40%, transparent)); }
.menu-cat-title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: -52px;
  padding-inline: clamp(16px, 3vw, 28px);
}
.menu-cat-title h2 { margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.menu-cat-title h2:focus { outline: none; }
.menu-cat-title h2:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; border-radius: 6px; }
.menu-cat-count { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-light); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-cat-count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
@media (max-width: 600px) {
  .menu-cat-band { border-radius: 16px; aspect-ratio: 5 / 2; }
  .menu-cat-title { margin-top: -40px; }
}

/* ---------- Fotoğraflı ürün kartı (.p-card): 4:3 foto (blur-up), ad, 2 satır açıklama, fiyat altta hizalı ---------- */
.menu-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .menu-grid { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .menu-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-card { min-width: 0; }
.p-card .p-open {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.p-card .p-open:active { transform: scale(.985); }
.p-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.p-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-blur { filter: blur(12px); transform: scale(1.1); }
.p-img { opacity: 0; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.p-img.loaded { opacity: 1; }
.p-photo.is-broken img, .menu-cat-band.is-broken img { visibility: hidden; }
.p-photo.is-broken { background: radial-gradient(70% 80% at 70% 20%, color-mix(in srgb, var(--k, var(--amber)) 22%, transparent), transparent 70%), var(--surface-2); }
.p-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.p-name { color: var(--cream); font-size: .9rem; font-weight: 600; line-height: 1.3; letter-spacing: .03em; overflow-wrap: anywhere; }
.p-card .p-name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.p-desc { display: -webkit-box; overflow: hidden; color: var(--gray); font-size: .82rem; line-height: 1.45; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.p-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: auto; padding-top: 8px; }
.p-card .price { font-size: 1.05rem; }
.menu-list .tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.menu-list .tags:empty { display: none; }
@media (hover: hover) {
  .p-card .p-open:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 0 0 1px var(--red), 0 18px 40px rgba(0,0,0,.45), 0 0 32px rgba(227,18,27,.14); }
  .p-card .p-open:hover .p-img { transform: scale(1.05); }
  .p-open:hover .price { text-shadow: 0 0 16px var(--amber-glow); }
}
@media (max-width: 600px) {
  .p-body { padding: 12px 12px 14px; gap: 4px; }
  .p-name { font-size: .82rem; }
  .p-desc { font-size: .78rem; }
  .p-card .price { font-size: .98rem; }
}

/* ---------- Fotoğrafsız ürün: kompakt satır (ad ··· fiyat), 2 sütun ---------- */
.menu-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin: 0; padding: 0; list-style: none; }
.menu-grid + .menu-rows { margin-top: 32px; }
@media (max-width: 700px) { .menu-rows { grid-template-columns: 1fr; } }
.p-row { min-width: 0; border-bottom: 1px solid var(--glass-border); }
.p-row .p-open {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 15px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.p-row .p-name { flex: 0 1 auto; min-width: 0; transition: color .2s; }
.p-row .tags { flex: none; align-self: center; }
.p-dots { flex: 1 1 16px; min-width: 16px; border-bottom: 1px dotted rgba(245,239,230,.22); transform: translateY(-4px); }
.p-row .price { flex: none; font-size: 1rem; }
.p-row:has(.p-desc) .p-open { padding-bottom: 4px; }
.p-row > .p-desc { margin: 0 64px 14px 0; }
.p-row .p-open:hover .p-name { color: #fff; }
.p-row .p-open:focus-visible { outline-offset: 2px; border-radius: 6px; }

/* Seçili şubede yok / tükendi: fotoğraf gri ve karanlık, ad soluk, fiyat üstü çizili. Metin opaklıkla soldurulmaz —
   .5 opaklık gri fiyatı/etiketi 2.1:1'e düşürüyordu; --gray (5.4:1) ve --gray-light AA kontrastta kalır. */
.is-out .p-photo img { filter: grayscale(1) brightness(.55); }
.is-out .p-name { color: var(--gray-light); }
.is-out .price, .product-box.is-out .pm-price { color: var(--gray); text-decoration: line-through; }
.menu-empty { margin-top: 8px; }
#menu-list > .skeleton { height: 220px; margin-bottom: 16px; border-radius: 20px; }

/* ---------- Ürün modalı: masaüstünde foto solda %50, ≤680px foto üstte, ≤600px alttan tam genişlik ---------- */
.product-box { width: min(880px, 100%); }
.pm-photo {
  --k: var(--amber);
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 70% 20%, color-mix(in srgb, var(--k) 30%, transparent), transparent 70%),
    linear-gradient(135deg, var(--surface-2), var(--bg-2));
}
.pm-photo img { width: 100%; height: 100%; object-fit: cover; }
.pm-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(72px, 14vw, 120px); line-height: 1; opacity: .75; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--k) 50%, transparent)); }
.pm-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 24px 28px; }
.pm-body h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: .01em; overflow-wrap: anywhere; }
.pm-body .label { margin-bottom: -2px; }
.pm-body #pm-desc { margin: 0; color: var(--gray-light); line-height: 1.65; }
.pm-body .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-body .tags:empty { display: none; }
.pm-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; padding-top: 14px; border-top: 1px solid var(--glass-border); }
.pm-price { font-size: 1.9rem; line-height: 1.1; text-shadow: 0 0 22px rgba(242,163,60,.3); }
.pm-body .btn-wa { margin-top: 4px; }
.pm-body .btn-wa .ic { width: 20px; height: 20px; }
.pm-body > .small { margin: -4px 0 0; }
@media (min-width: 681px) {
  .product-box { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
  .product-box .modal-close { position: absolute; top: 14px; right: 14px; margin: 0; }
  .product-box .pm-photo { aspect-ratio: auto; min-height: 420px; }
  .product-box .pm-photo img { position: absolute; inset: 0; }
  .product-box .pm-body { max-height: 92vh; max-height: 92dvh; overflow: auto; justify-content: center; padding: 56px 36px 36px; }
}

/* =====================================================================
   Nargile (Task 11) — dumanlı hero → aroma kartları → Aroma Karıştırıcı → nargile menüsü
   Aile renkleri (ShineLib.FAMILY_COLORS) karta --fam, karıştırıcıya --fa/--fb olarak gelir.
   ===================================================================== */
/* Kayıtlı renk özellikleri: aroma değişince kart zemini ve halka rengi yumuşakça geçer. */
@property --fa { syntax: '<color>'; inherits: true; initial-value: #ec4899; }
@property --fb { syntax: '<color>'; inherits: true; initial-value: #10b981; }
@property --ring { syntax: '<color>'; inherits: true; initial-value: #38BDF8; }

/* ---------- Hero: kategori fotoğrafı + yoğun duman ---------- */
.hero-nargile {
  --smoke-opacity: .09;
  min-height: 62vh;
  min-height: 62svh;
  padding: 72px 0 88px;
  /* Duman + ışık lekeleri alt kenarda keskin bitmesin: bölüm son 80 px'te zemine erir (içerik bu bölgeye inmez). */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent);
}
.hero-nargile .hero-media {
  overflow: hidden;
  background:
    radial-gradient(55% 55% at 50% 48%, rgba(227,18,27,.22), transparent 70%),
    radial-gradient(34% 30% at 86% 14%, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(32% 30% at 10% 82%, rgba(242,163,60,.12), transparent 70%),
    var(--bg);
}
.hero-nargile .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.4s var(--ease), transform 9s var(--ease);
}
.hero-nargile .hero-media.is-loaded img { opacity: .4; transform: scale(1); }
.hero-nargile .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 50% 45%, transparent 40%, rgba(11,10,10,.75) 100%),
    linear-gradient(180deg, rgba(11,10,10,.45) 0%, transparent 25%, transparent 60%, var(--bg) 100%);
}
.hero-nargile .label { animation: hero-rise .9s var(--ease) .05s both; }
.hero-nargile h1 {
  max-width: 8.19em; /* ≈13ch */
  margin: 18px auto 16px;
  font-size: clamp(2.3rem, 6.6vw, 4.8rem);
  line-height: 1.04;
  text-wrap: balance;
  text-shadow: 0 4px 32px rgba(0,0,0,.6);
  animation: hero-rise 1s var(--ease) .2s both;
}
.hero-nargile h1 em { text-shadow: 0 0 28px rgba(227,18,27,.45); }
.hero-nargile .hero-inner > p { max-width: 28.98em; /* ≈46ch */ margin: 0 auto 32px; color: var(--gray-light); font-size: clamp(1rem, 1.6vw, 1.15rem); animation: hero-rise 1s var(--ease) .4s both; }
.hero-nargile .hero-cta { animation-delay: .55s; }
.hero-nargile .hero-cta .btn:not(.btn-red) { background: rgba(11,10,10,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- Marka çipleri + aroma ızgarası ---------- */
#flavor-brands { margin: -8px 0 24px; }
.chip-count { color: var(--gray); font-size: .78em; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: var(--gray-light); }
.flavor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .flavor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) { .flavor-grid { grid-template-columns: minmax(0, 1fr); } }
.flavor-grid > .skeleton { height: 420px; border-radius: var(--radius); }
.flavor-grid > .empty { grid-column: 1 / -1; }

.flavor-card {
  --fam: var(--red);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  transition: border-color .3s, box-shadow .35s var(--ease), translate .35s var(--ease);
}
.flavor-card:focus-within { border-color: color-mix(in srgb, var(--fam) 50%, transparent); }
@media (hover: hover) {
  .flavor-card:hover {
    translate: 0 -3px;
    border-color: color-mix(in srgb, var(--fam) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fam) 45%, transparent), 0 22px 50px -22px color-mix(in srgb, var(--fam) 55%, transparent);
  }
  .flavor-card:hover .flavor-photo img { transform: scale(1.045); }
  .flavor-card:hover .flavor-glyph { transform: translateY(-4px) scale(1.06); }
}

/* Görsel alanı 4:3 — fotoğraf yoksa aile renginde duman gradyanı + alev */
.flavor-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(70% 65% at 28% 78%, color-mix(in srgb, var(--fam) 45%, transparent), transparent 70%),
    radial-gradient(55% 55% at 82% 18%, color-mix(in srgb, var(--fam) 24%, transparent), transparent 70%),
    radial-gradient(40% 40% at 60% 60%, rgba(245,239,230,.06), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
}
.flavor-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .3s; }
.flavor-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11,10,10,.4), transparent 32%, transparent 58%, rgba(11,10,10,.7));
}
.flavor-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--fam) 70%, #fff);
  transition: transform .5s var(--ease);
}
.flavor-glyph .ic { width: 72px; height: 72px; stroke-width: 1.2; opacity: .85; filter: drop-shadow(0 0 22px var(--fam)); }
.flavor-fam {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(11,10,10,.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.flavor-fam i { width: 7px; height: 7px; border-radius: 50%; background: var(--fam); box-shadow: 0 0 8px var(--fam); }
.flavor-mix {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(11,10,10,.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cream);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.flavor-mix span { font-size: 1.1em; line-height: 1; color: color-mix(in srgb, var(--fam) 65%, #fff); }
.flavor-mix:hover { border-color: var(--fam); background: color-mix(in srgb, var(--fam) 28%, rgba(11,10,10,.7)); }
.flavor-mix:active { transform: scale(.96); }

.flavor-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.flavor-brand { margin: 0; color: color-mix(in srgb, var(--fam) 50%, #fff); font-family: var(--font-head); font-size: .98rem; font-style: italic; }
.flavor-body h3 { margin: -4px 0 0; font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere; }
.flavor-body .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.flavor-notes { flex: 1; margin: 0; color: var(--gray-light); font-size: .92rem; line-height: 1.55; }
.flavor-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--glass-border); }
.flavor-int { display: inline-flex; align-items: center; gap: 8px; color: var(--gray); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.flavor-card .intensity i.on { background: var(--fam); border-color: var(--fam); box-shadow: 0 0 6px var(--fam); }
.flavor-price { display: inline-flex; align-items: center; gap: 8px; }
.flavor-price:empty { display: none; }
.flavor-price .price { font-size: 1.2rem; }
.flavor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.flavor-actions:empty { display: none; }
.flavor-actions .btn { flex: 1 1 auto; }
.flavor-actions .btn-wa { flex-grow: 2; }
.flavor-actions .ic { width: 18px; height: 18px; }
.flavor-card.is-out .flavor-photo img { filter: grayscale(.75) brightness(.7); }
/* "Kararsız mısınız?" kutusu: son satırdaki boşluğu doldurur (3 sütunda kalan 1/2/3 hücre, 2 sütunda 1/2, tek sütunda tam). */
.flavor-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  min-height: 240px;
  padding: 30px 28px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(139,92,246,.20), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(16,185,129,.16), transparent 70%),
    radial-gradient(50% 60% at 75% 95%, rgba(236,72,153,.14), transparent 70%),
    var(--surface);
  transition: border-color .3s;
}
.flavor-cta strong { max-width: 11.34em; /* ≈18ch */ font-family: var(--font-head); font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.2; text-wrap: balance; }
.flavor-cta:hover { border-color: rgba(255,255,255,.2); }
.flavor-cta-orb {
  position: absolute;
  top: 50%;
  right: -60px;
  z-index: -1;
  width: 260px;
  height: 260px;
  margin-top: -130px;
  border-radius: 50%;
  background: conic-gradient(#8b5cf6, #10b981, #f59e0b, #ec4899, #E3121B, #a16207, #8b5cf6);
  filter: blur(42px);
  opacity: .38;
  animation: cta-orb 24s linear infinite;
}
@keyframes cta-orb { to { transform: rotate(1turn); } }
.flavor-grid > .flavor-cta { grid-column: 1 / -1; }
@media (min-width: 901px) {
  .flavor-grid > .flavor-cta:nth-child(3n+2) { grid-column: span 2; }
  .flavor-grid > .flavor-cta:nth-child(3n) { grid-column: auto; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .flavor-grid > .flavor-cta:nth-child(2n) { grid-column: auto; }
}
.tag-klasik { color: #c4b5fd; background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.32); }
.tag-sert { color: #ff6b3d; background: rgba(255,107,61,.12); border-color: rgba(255,107,61,.32); }

/* ---------- Aroma Karıştırıcı ---------- */
#aroma-karistirici .section-head { justify-content: center; text-align: center; }
#aroma-karistirici .section-head p { margin-inline: auto; }
.mixer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 16px 20px;
  max-width: 880px;
  margin: 0 auto;
}
.mixer-field { --fam: var(--red); position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mixer-field > span { color: var(--gray-light); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mixer-field select {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px;
  color: var(--cream);
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.mixer-field select:hover { border-color: color-mix(in srgb, var(--fam) 60%, transparent); }
.mixer-field select:focus-visible { outline: none; border-color: var(--neon); box-shadow: 0 0 0 4px var(--neon-soft); background-color: #161414; }
.mixer-field select option, .mixer-field select optgroup { background: #161414; color: var(--cream); }
/* Seçili aromanın aile rengi: select'in solunda parlayan nokta */
.mixer-field::after {
  content: '';
  position: absolute;
  left: 17px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fam);
  box-shadow: 0 0 10px var(--fam);
  pointer-events: none;
  transition: background .4s, box-shadow .4s;
}
.mixer-field.is-picked select { animation: mix-picked .9s var(--ease); }
@keyframes mix-picked { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fam) 70%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
.mixer-plus {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: -4px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--fa), var(--fb), var(--fa));
  box-shadow: -6px 0 22px -6px var(--fa), 6px 0 22px -6px var(--fb);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.7rem;
  line-height: 1;
  transition: --fa .6s var(--ease), --fb .6s var(--ease);
}
.mixer-plus::before { content: ''; position: absolute; inset: 3px; z-index: -1; border-radius: 50%; background: var(--bg-2); }
.mixer.is-mixing .mixer-plus { animation: mix-spin .7s var(--ease); }
@keyframes mix-spin { 40% { transform: rotate(120deg) scale(1.14); } to { transform: rotate(180deg); } }
.mixer-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px auto 0; }
.mixer-tools .ic { width: 16px; height: 16px; }
.mixer-tools [aria-disabled="true"] { opacity: .6; cursor: progress; }
#mix-random[aria-disabled="true"] .ic { animation: mix-spin .9s linear infinite; }

.mix-result { max-width: 880px; margin: 28px auto 0; }
.mix-card {
  --ring: var(--neon);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px 36px;
  padding: 30px 34px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background:
    radial-gradient(55% 90% at 0% 0%, color-mix(in srgb, var(--fa) 22%, transparent), transparent 70%),
    radial-gradient(55% 90% at 100% 100%, color-mix(in srgb, var(--fb) 18%, transparent), transparent 70%),
    var(--surface);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.8);
  transition: --fa .6s var(--ease), --fb .6s var(--ease), --ring .6s var(--ease);
}
.mix-card.is-new { animation: mix-glow 1s var(--ease); }
@keyframes mix-glow { from { border-color: color-mix(in srgb, var(--ring) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ring) 40%, transparent), 0 0 48px -8px color-mix(in srgb, var(--ring) 45%, transparent); } }
.mix-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mix-ring { position: relative; width: 120px; height: 120px; }
.mix-fams { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--gray-light); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mix-fams span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mix-fams i { width: 7px; height: 7px; border-radius: 50%; background: var(--fam); box-shadow: 0 0 8px var(--fam); }
.mix-fams b { color: var(--gray); font-weight: 400; line-height: 1; }
.mix-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.ring-fill {
  fill: none;
  stroke: var(--ring);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px var(--ring));
  transition: stroke-dashoffset .9s var(--ease);
}
.mix-score { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 34px; gap: 2px; }
.mix-score b { font-family: var(--font-head); font-size: 2.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mix-score small { color: var(--gray-light); font-size: .95rem; }
.mix-label { margin: 0; color: color-mix(in srgb, var(--ring) 30%, #fff); font-family: var(--font-head); font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; line-height: 1.15; text-shadow: 0 0 26px color-mix(in srgb, var(--ring) 40%, transparent); }
.mix-text { margin: 8px 0 0; color: var(--gray-light); line-height: 1.6; }
.mix-card.is-new .mix-label { animation: mix-in .55s var(--ease) both; }
.mix-card.is-new .mix-text { animation: mix-in .55s var(--ease) .07s both; }
@keyframes mix-in { from { opacity: 0; translate: 0 8px; } }
.mix-meters { display: grid; gap: 10px; margin-top: 20px; }
.mix-meter { display: grid; grid-template-columns: 76px minmax(0, 1fr) 30px; align-items: center; gap: 12px; font-size: .86rem; }
.mm-name { color: var(--cream); }
.mm-bar { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.mm-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fa), var(--fb));
  transform: scaleX(calc(var(--v, 0) / 5));
  transform-origin: left;
  transition: transform .8s var(--ease);
}
.mix-meter:nth-child(2) .mm-bar i { transition-delay: .06s; }
.mix-meter:nth-child(3) .mm-bar i { transition-delay: .12s; }
.mm-val { color: var(--gray-light); font-variant-numeric: tabular-nums; text-align: right; }
.mix-products { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.mix-products:empty { display: none; }
.mix-products-label { margin-right: 2px; color: var(--gray); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mix-prod {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--fam) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fam) 10%, transparent);
  font-size: .8rem;
  font-weight: 600;
  transition: border-color .2s, background .2s;
}
.mix-prod:hover { border-color: var(--fam); background: color-mix(in srgb, var(--fam) 20%, transparent); }
.mix-prod .price { font-size: .9rem; }
.mix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.mix-actions .btn-wa .ic { width: 20px; height: 20px; }
.mix-share .ic { width: 16px; height: 16px; }
.mix-empty {
  margin: 0;
  padding: 36px 20px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 22px;
  color: var(--gray-light);
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-style: italic;
  text-align: center;
}
@media (max-width: 640px) {
  .mixer { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mixer-plus { justify-self: center; width: 44px; height: 44px; margin: 10px 0 2px; font-size: 1.4rem; }
  .mix-card { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 26px 18px 22px; text-align: center; }
  .mix-fams { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
  .mix-info { width: 100%; }
  .mix-meters, .mix-products, .mix-actions { text-align: left; }
  .mix-products, .mix-actions { justify-content: center; }
  .mix-actions .btn-wa { flex: 1 1 100%; }
  .mix-actions .mix-share { flex: 1 1 100%; }
}

/* ---------- Nargile menüsü ---------- */
#ng-products .p-open { text-decoration: none; }
#ng-products .p-open:hover .price { color: #ffc070; }

/* ---------- Azaltılmış hareket: halka, ölçekler, renkler anında; hero ve kart koreografisi kapalı ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-nargile .label, .hero-nargile h1, .hero-nargile .hero-inner > p, .hero-nargile .hero-cta,
  .mixer.is-mixing .mixer-plus, .mix-card.is-new, .flavor-cta-orb, #mix-random .ic, .mix-card.is-new .mix-label, .mix-card.is-new .mix-text, .mixer-field.is-picked select { animation: none; }
  .hero-nargile .hero-media img { transform: none; transition: none; }
  .ring-fill, .mm-bar i, .mix-card, .mixer-plus, .flavor-card, .flavor-photo img, .flavor-glyph { transition: none; }
  .flavor-card:hover { translate: none; }
}

/* =====================================================================
   VIP Odalar (Task 12) — kapı kemeri hero → oda kartları (cam panel) → kurallar → oda modalı (galeri + rezervasyon)
   Vurgu: neon (VIP), amber (oda numarası, minimum harcama). Çekmeköy şube sayfasındaki .vip-teaser da burada.
   ===================================================================== */
/* ---------- Hero: iki ışık kemeri ("özel bir kapı") + üstten neon spot ---------- */
.hero-vip {
  --smoke-opacity: .07;
  min-height: 56vh;
  min-height: 56svh;
  padding: 72px 0 84px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent);
}
.hero-vip .hero-media {
  overflow: hidden;
  background:
    radial-gradient(42% 58% at 50% -6%, rgba(56,189,248,.20), transparent 72%),
    radial-gradient(30% 40% at 14% 86%, rgba(242,163,60,.11), transparent 70%),
    radial-gradient(30% 40% at 88% 80%, rgba(227,18,27,.12), transparent 70%),
    var(--bg);
}
.hero-vip .hero-media::before, .hero-vip .hero-media::after {
  content: '';
  position: absolute;
  left: 50%;
  border-radius: 999px 999px 0 0;
  translate: -50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 25%, transparent 88%);
}
.hero-vip .hero-media::before {
  top: 9%;
  width: min(560px, 86vw);
  height: 110%;
  border: 1px solid rgba(56,189,248,.28);
  box-shadow: 0 0 46px rgba(56,189,248,.14), inset 0 0 70px rgba(56,189,248,.07);
  animation: vip-arch 1.6s var(--ease) both;
}
.hero-vip .hero-media::after {
  top: 15%;
  width: min(470px, 72vw);
  height: 110%;
  border: 1px solid rgba(242,163,60,.2);
  box-shadow: 0 0 30px rgba(242,163,60,.08);
  animation: vip-arch 1.6s var(--ease) .15s both;
}
@keyframes vip-arch { from { opacity: 0; scale: .94; } }
.hero-vip .pill { animation: hero-rise .9s var(--ease) .05s both; }
.hero-vip h1 {
  max-width: 9.45em; /* ≈15ch */
  margin: 18px auto 16px;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  line-height: 1.05;
  text-shadow: 0 4px 32px rgba(0,0,0,.6);
  animation: hero-rise 1s var(--ease) .2s both;
}
.hero-vip h1 em { color: var(--neon); text-shadow: var(--glow-neon); }
.hero-vip .hero-inner > p { max-width: 28.98em; /* ≈46ch */ margin: 0 auto 30px; color: var(--gray-light); font-size: clamp(1rem, 1.6vw, 1.15rem); animation: hero-rise 1s var(--ease) .4s both; }
.hero-vip .hero-cta { animation-delay: .55s; }
.vip-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 0; margin: 36px 0 0; padding: 0; list-style: none; animation: hero-rise 1s var(--ease) .7s both; }
.vip-facts:empty { display: none; }
.vip-facts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 clamp(14px, 3.4vw, 32px); }
.vip-facts li + li { border-left: 1px solid rgba(255,255,255,.12); }
.vip-facts b { color: var(--amber); font-family: var(--font-head); font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(242,163,60,.3); }
.vip-facts span { color: var(--gray); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Nasıl çalışır: 3 adım ---------- */
.vip-steps { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.vip-steps li { display: inline-flex; align-items: center; gap: 10px; color: var(--gray-light); font-size: .88rem; }
.vip-steps b {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border: 1px solid rgba(56,189,248,.45);
  border-radius: 50%;
  color: var(--neon);
  font-size: .8rem;
  box-shadow: 0 0 12px rgba(56,189,248,.18);
}

/* ---------- Oda kartları: 4:3 foto + alttan binen cam panel ---------- */
.room-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-grid > .skeleton { min-height: 380px; border-radius: var(--radius); }
.room-grid > .empty { grid-column: 1 / -1; }
.room-card { min-width: 0; }
.room-open {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s, box-shadow .35s var(--ease), translate .4s var(--ease);
}
.room-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: radial-gradient(70% 80% at 70% 20%, rgba(56,189,248,.16), transparent 70%), var(--surface-2);
}
.room-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.room-photo.is-loaded img { opacity: 1; }
.room-photo.is-broken img { visibility: hidden; }
.room-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,10,.25) 0%, transparent 30%, transparent 55%, rgba(11,10,10,.7) 100%); pointer-events: none; }
.room-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--neon); }
.room-glyph .ic { width: 64px; height: 64px; stroke-width: 1.2; opacity: .7; filter: drop-shadow(0 0 18px rgba(56,189,248,.5)); }
.room-no {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 4px 11px;
  border: 1px solid rgba(242,163,60,.38);
  border-radius: 999px;
  background: rgba(11,10,10,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--amber);
  font-family: var(--font-head);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.room-no::before { content: 'No. '; font-size: .8em; opacity: .8; }
.room-card .room-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  margin: -46px 10px 10px;
  padding: 16px 18px 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: calc(var(--radius) - 5px);
  background: rgba(22,20,20,.74);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.room-name { color: var(--cream); font-family: var(--font-head); font-size: clamp(1.45rem, 2.2vw, 1.7rem); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.room-tag { color: var(--gray-light); font-size: .9rem; line-height: 1.4; }
.room-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 12px; }
.room-tag + .room-foot, .room-name + .room-foot { margin-top: 10px; border-top: 1px solid var(--glass-border); }
.room-cap { display: inline-flex; align-items: center; gap: 7px; color: var(--cream); font-size: .88rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.room-cap .ic { width: 18px; height: 18px; color: var(--neon); }
.room-feats { display: inline-flex; gap: 6px; }
.room-feat { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: var(--glass); color: var(--gray-light); }
.room-feat .ic { width: 16px; height: 16px; }
.room-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--neon); font-size: .86rem; font-weight: 600; letter-spacing: .02em; }
.room-go span { transition: translate .3s var(--ease); }
@media (hover: hover) {
  .room-open:hover {
    border-color: rgba(56,189,248,.5);
    box-shadow: 0 0 0 1px rgba(56,189,248,.3), 0 22px 54px -14px rgba(56,189,248,.38);
    translate: 0 -4px;
  }
  .room-open:hover .room-photo img { transform: scale(1.05); }
  .room-open:hover .room-feat { border-color: rgba(56,189,248,.3); color: var(--neon); }
  .room-open:hover .room-go span { translate: 4px 0; }
}
.room-open:active { translate: 0 0; scale: .99; }
/* Son satırdaki boş hücreleri dolduran "Kararsız mısınız?" kartı (data-r3/data-r2: oda sayısının 3'e/2'ye bölümünden kalan). */
.room-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px dashed rgba(56,189,248,.35);
  border-radius: var(--radius);
  background: radial-gradient(70% 90% at 100% 0%, rgba(56,189,248,.12), transparent 65%), radial-gradient(60% 80% at 0% 100%, rgba(242,163,60,.08), transparent 60%), var(--bg-2);
}
.room-cta h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.room-cta p { max-width: 27.72em; /* ≈44ch */ margin: 0 0 8px; color: var(--gray-light); }
.room-cta .btn .ic { width: 20px; height: 20px; }
.room-cta[data-r3="0"] { grid-column: 1 / -1; }
.room-cta[data-r3="1"] { grid-column: span 2; }
.room-open:focus-visible { outline-offset: 3px; }

/* ---------- Kurallar: numaralı neon liste ---------- */
.vip-rules-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 20px 64px; align-items: start; }
.vip-rules-wrap h2 { margin: 12px 0 0; }
.vip-rules { margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.vip-rules li { position: relative; min-height: 64px; padding: 20px 0 20px 60px; border-bottom: 1px solid var(--glass-border); color: var(--gray-light); counter-increment: rule; }
.vip-rules li:first-child { padding-top: 6px; min-height: 50px; }
.vip-rules li:first-child::before { top: 4px; }
.vip-rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(56,189,248,.45);
  border-radius: 50%;
  color: var(--neon);
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 14px rgba(56,189,248,.2), inset 0 0 10px rgba(56,189,248,.08);
}

/* ---------- Oda modalı ---------- */
.room-box { width: min(860px, 100%); }
.room-gallery { position: relative; background: var(--surface-2); }
.room-gallery .ev-track { gap: 0; margin: 0; padding: 0; scroll-snap-type: x mandatory; scroll-padding-inline: 0; }
.room-gallery .ev-track > * { flex: 0 0 100%; }
.room-gallery .ev-prev { left: 12px; }
.room-gallery .ev-next { right: 12px; }
.rm-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: var(--surface-2); cursor: zoom-in; scroll-snap-align: start; }
.rm-photo img { width: 100%; height: 100%; object-fit: cover; }
.rm-photo:focus-visible { outline-offset: -4px; }
.room-gallery::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(20,18,18,.85)); pointer-events: none; }
.rm-count { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(11,10,10,.6); color: var(--cream); font-size: .78rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.rm-empty { display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 4 / 3; background: radial-gradient(60% 70% at 50% 35%, rgba(56,189,248,.18), transparent 70%), var(--surface-2); color: var(--neon); font-family: var(--font-head); font-size: 1.4rem; }
.rm-empty .ic { width: 64px; height: 64px; stroke-width: 1.2; filter: drop-shadow(0 0 18px rgba(56,189,248,.5)); }
.room-box > .room-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 28px; }
.rm-head { display: flex; flex-direction: column; gap: 6px; }
.rm-kicker { color: var(--neon); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 0 12px rgba(56,189,248,.4); }
.rm-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; overflow-wrap: anywhere; }
.room-tagline { margin: 0; color: var(--gray-light); font-family: var(--font-head); font-size: 1.1rem; font-style: italic; }
.room-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 14px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass); color: var(--cream); font-size: .86rem; font-variant-numeric: tabular-nums; }
.rm-chip .ic { width: 17px; height: 17px; color: var(--neon); }
.rm-spend { border-color: rgba(242,163,60,.35); background: rgba(242,163,60,.08); color: var(--gray-light); }
.rm-spend b { color: var(--amber); }
.rm-desc { margin: 0; color: var(--gray-light); line-height: 1.65; }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--cream); font-size: .92rem; }
.feature-list .ic { width: 34px; height: 34px; flex: none; padding: 8px; border: 1px solid rgba(56,189,248,.3); border-radius: 50%; background: var(--neon-soft); color: var(--neon); }
.rm-jump { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2; align-self: stretch; min-height: 52px; background: rgba(11,10,10,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.55), var(--glow-neon); }
.rm-jump:hover { background: rgba(14,30,40,.9); }

/* Rezervasyon formu */
.res-form { gap: 14px; margin-top: 4px; padding-top: 24px; border-top: 1px solid var(--glass-border); }
.res-form h3 { margin: 0 0 2px; font-size: 1.45rem; }
.res-form h3::after { content: ''; display: block; width: 44px; height: 2px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--neon), transparent); box-shadow: 0 0 10px rgba(56,189,248,.5); }
.res-form .reg-grid-2 { gap: 14px; }
.res-form textarea { min-height: 96px; }
.res-form input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.res-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.res-form input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; filter: invert(.8); }
.res-form [aria-invalid="true"] { border-color: rgba(227,18,27,.75) !important; box-shadow: 0 0 0 3px rgba(227,18,27,.16); }
.res-form > .small { margin: 0; }
.res-form .small a { color: var(--gray-light); text-decoration: underline; text-underline-offset: 2px; }
#res-msg:empty { display: none; }
.res-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.res-actions .btn { flex: 1 1 200px; min-height: 52px; }
.res-actions .btn-wa .ic { width: 20px; height: 20px; }
.res-form[aria-busy="true"] [type="submit"] { cursor: progress; }
.res-success { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 32px 8px 8px; text-align: center; }
.res-success:focus { outline: none; }
.res-success h3 { margin: 14px 0 0; font-size: 1.7rem; }
.res-success p { margin: 0; color: var(--gray-light); }
.res-summary { margin-top: 10px !important; padding: 10px 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm); background: var(--glass); color: var(--cream) !important; font-size: .92rem; }
.res-summary:empty { display: none; }
.res-success .res-actions { width: 100%; margin-top: 20px; }
.res-check { position: relative; width: 68px; height: 68px; border: 1px solid rgba(52,211,153,.45); border-radius: 50%; background: rgba(52,211,153,.1); box-shadow: 0 0 30px rgba(52,211,153,.25); animation: res-pop .5s var(--ease) both; }
.res-check::after { content: ''; position: absolute; left: 25px; top: 18px; width: 15px; height: 27px; border: solid #5ee6a8; border-width: 0 3px 3px 0; transform: rotate(45deg); }
@keyframes res-pop { from { scale: .6; opacity: 0; } }

/* Geniş ekran: solda galeri + oda bilgisi, sağda form (form ilk bakışta görünür). */
@media (min-width: 960px) {
  .room-box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr; width: min(1040px, 100%); }
  .room-box > .room-body { display: contents; }
  .room-box .modal-close { grid-column: 2; grid-row: 1 / -1; justify-self: end; align-self: start; margin: 12px 12px 0 0; }
  .room-gallery { grid-column: 1; grid-row: 1; }
  .rm-head, .room-meta, .rm-desc, .feature-list { grid-column: 1; margin-inline: 28px; }
  .rm-head { grid-row: 2; margin-top: 24px; }
  .room-meta { grid-row: 3; margin-top: 16px; }
  .rm-desc { grid-row: 4; margin-top: 16px; }
  .feature-list { grid-row: 5; align-self: start; margin-top: 18px; margin-bottom: 28px; }
  .rm-jump { display: none; }
  .res-form, .res-success { grid-column: 2; grid-row: 1 / -1; align-self: stretch; margin: 0; padding: 30px 28px 28px; border-top: 0; border-left: 1px solid var(--glass-border); background: linear-gradient(180deg, rgba(56,189,248,.05), transparent 40%), var(--bg-2); }
  .res-form { align-content: start; }
  .res-success { justify-content: center; padding-top: 30px; }
  .res-form h3 { padding-right: 52px; }
}
@media (max-width: 600px) {
  .room-box > .room-body { padding: 18px 18px 24px; }
  .feature-list { gap: 10px 12px; }
  .feature-list li { font-size: .88rem; }
}
@media (max-width: 359px) { .feature-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Çekmeköy şube sayfası: VIP teaser ---------- */
.vip-teaser {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 32px;
  padding: clamp(28px, 5vw, 52px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(56,189,248,.4);
  border-radius: var(--radius);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, rgba(242,163,60,.10), transparent 60%),
    var(--surface);
  box-shadow: 0 0 0 1px rgba(56,189,248,.08), 0 0 40px -10px rgba(56,189,248,.3);
  transition: border-color .3s, box-shadow .35s var(--ease);
}
.vip-teaser::after {
  content: '';
  position: absolute;
  right: clamp(-60px, -4vw, -20px);
  bottom: -40%;
  z-index: -1;
  width: 260px;
  height: 160%;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.vip-teaser .pill { grid-column: 1; justify-self: start; }
.vip-teaser h2 { grid-column: 1; margin: 6px 0 0; }
.vip-teaser p { grid-column: 1; margin: 0; max-width: 32.76em; /* ≈52ch */ color: var(--gray-light); }
.vip-teaser .btn { grid-column: 2; grid-row: 1 / span 3; }
@media (hover: hover) { .vip-teaser:hover { border-color: rgba(56,189,248,.7); box-shadow: 0 0 0 1px rgba(56,189,248,.25), 0 0 56px -8px rgba(56,189,248,.45); } }
@media (max-width: 760px) {
  .vip-teaser { grid-template-columns: minmax(0, 1fr); }
  .vip-teaser .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
}

@media (max-width: 900px) {
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .room-cta[data-r3] { grid-column: auto; }
  .room-cta[data-r2="0"] { grid-column: 1 / -1; }
  .vip-rules-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .room-cta[data-r2] { grid-column: auto; min-height: 0; }
  .vip-steps { gap: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-vip .pill, .hero-vip h1, .hero-vip .hero-inner > p, .hero-vip .hero-cta, .vip-facts, .hero-vip .hero-media::before, .hero-vip .hero-media::after, .res-check { animation: none; }
  .room-open, .room-photo img, .room-go span { transition: none; }
  .room-open:hover { translate: none; }
  .room-open:hover .room-photo img { transform: none; }
}

/* =====================================================================
   Etkinlikler (Task 13, K1600 1:1) — sayfa başlığı + tür çipleri → geri sayım → yaklaşanlar → takvim → arşiv bağlantısı
   Modül bileşenleri (geri sayım bölümü, featured-event, karusel başlıkları, detay modalı, kayıt formu) components.css'te.
   ===================================================================== */
.ev-hero { --smoke-opacity: .07; }
.ev-hero h1 em { color: var(--red); }
.ev-type-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.ev-type-chip {
  --ev-color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px 8px 14px;
  border: 1px solid color-mix(in srgb, var(--ev-color) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ev-color) 8%, transparent);
  color: var(--cream);
  font-size: .86rem;
  font-weight: 600;
  transition: border-color .2s, box-shadow .25s, background-color .2s, translate .25s var(--ease);
}
.ev-type-chip .ic { width: 17px; height: 17px; color: var(--ev-color); }
.ev-type-chip b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ev-color); color: #0b0a0a; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-type-chip:not(:has(b)) { padding-right: 14px; }
.ev-type-chip:hover { border-color: var(--ev-color); background: color-mix(in srgb, var(--ev-color) 14%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--ev-color) 30%, transparent); translate: 0 -2px; }
@media (max-width: 600px) {
  .ev-type-nav { flex-wrap: nowrap; margin: 26px calc(-1 * var(--gutter)) 0; padding: 2px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ev-type-nav::-webkit-scrollbar { display: none; }
  .ev-type-chip { flex: none; min-height: 40px; font-size: .82rem; }
}
#upcomingCards > .skeleton { height: 250px; border-radius: 20px; }
#takvim .section-head { align-items: center; }
.ev-cat { scroll-margin-top: calc(var(--header-h-sm) + 24px); }
.archive-link { display: flex; justify-content: center; }
.section:has(> .archive-link) { padding: 48px 0 72px; }
@media (prefers-reduced-motion: reduce) { .ev-type-chip:hover { translate: none; } }

/* =====================================================================
   Geçmiş Etkinlikler (Task 14, K1600 arşiv sayfası) — istatistik şeridi → tür filtreleri → yıl grupları (dev soluk yıl)
   → ge-card ızgarası (3/2/1) → detay modalı (8px tür şeridi) + fotoğraf albümü (ShineUI.lightbox).
   .ec-type, .ev-type/.ev-date, .modal-*, .chip, .page-hero, .archive-link Task 13 / components.css'ten.
   ===================================================================== */
.ge-hero { --smoke-opacity: .06; }
.ge-hero h1 em { color: var(--red); }
.ge-hero .wrap > p a { color: var(--neon); text-decoration: underline; text-decoration-color: rgba(56,189,248,.4); text-underline-offset: 3px; }
.ge-hero .wrap > p a:hover { text-decoration-color: var(--neon); }
.ge-section { padding-top: 8px; }

/* İstatistik şeridi: 4 sütun (≤600px 2×2), büyük tabular rakamlar, üstte tür renginde neon çizgi */
.ge-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
.ge-stat {
  --st: var(--cream);
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 22px 22px 20px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--st) 10%, transparent), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--surface);
}
.ge-stat::before { content: ''; position: absolute; inset: 0 auto auto 22px; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--st); box-shadow: 0 0 14px var(--st); }
.ge-stat strong { color: var(--cream); font: 700 clamp(2.2rem, 4.6vw, 3.4rem)/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ge-stat span { color: var(--gray-light); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ge-stat:first-child strong { color: transparent; background: linear-gradient(120deg, var(--cream), #ffb8bb 55%, var(--red)); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 600px) {
  .ge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
  .ge-stat { padding: 18px 16px 16px; }
  .ge-stat::before { left: 16px; }
  .ge-stat span { letter-spacing: .1em; }
}

.ge-filters { margin-bottom: 8px; }

/* Yıl grupları: dev soluk yıl grubun arkasında, kartlar üstünde */
.ge-year-group { position: relative; isolation: isolate; padding-top: clamp(52px, 9vw, 104px); }
.ge-year-group + .ge-year-group { margin-top: clamp(24px, 4vw, 48px); }
/* Dev yıl filigranı yalnız süs (::before içerik — erişilebilirlik ağacına ve kontrast denetimine girmez);
   yılı taşıyan gerçek başlık .ge-year-h, filigranın alt kenarında küçük, AA kontrastlı. */
.ge-year-group::before {
  content: attr(data-y);
  position: absolute;
  top: 0; left: -.04em;
  z-index: -1;
  color: var(--cream);
  font: 700 clamp(64px, 14vw, 160px)/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
.ge-year-h {
  position: absolute;
  top: calc(clamp(52px, 9vw, 104px) - 30px);
  left: 0;
  margin: 0;
  color: var(--gray-light);
  font: 600 .78rem/1 var(--font-body);
  letter-spacing: .24em;
}
.ge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .ge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ge-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Kart: tür gradientli başlık (kapak varsa fotoğraf + tür rengi örtü), tarih, "Tamamlandı" rozeti */
.ge-card { --ev-color: var(--red); min-width: 0; }
.ge-open {
  display: flex;
  flex-direction: column;
  width: 100%; height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.ge-open:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.ge-head {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ev-color), #0f1f4a);
  background-size: 300% 300%;
  animation: ecGradientShift 6s ease infinite;
}
.ge-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .6s var(--ease); }
.ge-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,.74)),
    linear-gradient(135deg, color-mix(in srgb, var(--ev-color) 42%, transparent), color-mix(in srgb, #0f1f4a 30%, transparent));
  pointer-events: none;
}
.ge-date { position: absolute; left: 18px; bottom: 14px; z-index: 1; display: flex; align-items: baseline; gap: 8px; color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.ge-date b { font-size: 2.3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ge-done {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(52,211,153,.4);
  border-radius: 999px;
  background: rgba(11,10,10,.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #5ee6a8;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ge-done .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.ge-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 20px; }
.ge-title { color: var(--cream); font: 600 1.3rem/1.2 var(--font-head); }
.ge-card .ge-desc { display: -webkit-box; overflow: hidden; color: var(--gray-light); font-size: .9rem; line-height: 1.55; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.ge-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; padding-top: 4px; color: var(--gray); font-size: .84rem; }
.ge-meta .ic { width: 15px; height: 15px; margin-right: -2px; color: var(--ev-color); }
.ge-sep { opacity: .6; }
@media (hover: hover) {
  .ge-open:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 0 0 1.5px var(--red), 0 14px 34px rgba(227,18,27,.22); }
  .ge-open:hover .ge-head img { transform: scale(1.04); }
}
#ge-years > .skeleton { height: 320px; margin-top: 40px; border-radius: var(--radius); }
.ge-empty { margin-top: 32px; }

/* Detay modalı (K1600 .ge-box): 8px tür şeridi, rozetler, başlık, açıklama, bilgi satırları, albüm */
.ge-box { --ev-color: var(--red); --pad: clamp(20px, 4vw, 34px); width: min(720px, 100%); padding-bottom: 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--ev-color) 8%, transparent), transparent 260px), #121010; }
.ge-strip { position: sticky; top: 0; z-index: 4; display: block; height: 8px; background: linear-gradient(90deg, var(--ev-color), color-mix(in srgb, var(--ev-color) 55%, var(--neon))); box-shadow: 0 0 18px color-mix(in srgb, var(--ev-color) 55%, transparent); }
.ge-box > .modal-close { top: 18px; margin-top: 10px; }
.ge-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px var(--pad) 16px; padding-right: 52px; }
.ge-done-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(52,211,153,.35); border-radius: 999px; background: rgba(52,211,153,.08); color: #5ee6a8; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.ge-done-badge .ic { width: 14px; height: 14px; stroke-width: 2.4; }
#ge-title { margin: 0 var(--pad) 12px; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.ge-box .ge-desc { margin: 0 var(--pad); color: var(--gray-light); line-height: 1.7; }
.ge-info-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px var(--pad) 0; }
.ge-info-item { display: flex; flex: 1 1 170px; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass); }
.ge-info-item:first-child { flex: 2 1 250px; }
.ge-info-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--ev-color) 14%, transparent); color: var(--ev-color); }
.ge-info-ic .ic { width: 17px; height: 17px; }
.ge-info-item small { display: block; margin-bottom: 2px; color: var(--gray); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ge-info-item strong { display: block; color: var(--cream); font-size: .9rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ge-album-title { display: flex; align-items: center; gap: 10px; margin: 28px var(--pad) 14px; padding-top: 22px; border-top: 1px solid var(--glass-border); font-size: 1.25rem; }
.ge-album-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass); color: var(--gray-light); font: 600 .78rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.ge-album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 var(--pad); }
.ge-thumb { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--ev-color) 30%, #141212), #0f1f4a); cursor: zoom-in; }
.ge-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), opacity .2s; }
.ge-thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .25s; pointer-events: none; }
.ge-thumb:hover img { transform: scale(1.06); }
.ge-thumb:hover::after { box-shadow: inset 0 0 0 1.5px var(--red), inset 0 0 24px rgba(227,18,27,.25); }
.ge-thumb:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.ge-thumb.is-broken img { opacity: 0; }
/* Kapak büyür, ızgarada boşluk kalmaz (gecmis.js data-m3 = n % 3, data-m2 = n % 2) */
.ge-album[data-m3="0"] .ge-thumb:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.ge-album[data-m3="1"] .ge-thumb:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.ge-album[data-m3="2"] .ge-thumb:first-child { grid-column: span 2; aspect-ratio: auto; }
.ge-album-empty { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; color: var(--gray); }
.ge-album-empty .ic { width: 18px; height: 18px; color: var(--ev-color); }
@media (max-width: 480px) {
  .ge-album { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ge-album[data-m3] .ge-thumb:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .ge-album[data-m2="1"] .ge-thumb:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .ge-head { animation: none; }
  .ge-open:hover { transform: none; }
  .ge-open:hover .ge-head img, .ge-thumb:hover img { transform: none; }
}

/* =====================================================================
   Şubeler, şube sayfaları, Galeri, İletişim, 404, Gizlilik (Task 15)
   ===================================================================== */
/* page-hero'dan sonra gelen ilk bölüm: hero zaten alt boşluk bırakır */
.sb-section, .gal-section, .ct-section, .gz-section { padding-top: 8px; }
@media (min-width: 900px) { .sb-section, .gal-section, .ct-section, .gz-section { padding-top: 16px; } }

/* ---------- Şubeler: kart üstünde şubenin fotoğrafı (kart kenarına taşar) ---------- */
.branch-card.has-photo { padding-top: 0; }
.sb-media { position: relative; display: block; aspect-ratio: 16 / 9; margin: 0 -24px 10px; overflow: hidden; background: var(--surface-2); }
.sb-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; }
.sb-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--surface) 100%); pointer-events: none; }
.sb-section + .section { padding-top: 0; }
@media (hover: hover) { .branch-card:hover .sb-media img { transform: scale(1.04); filter: brightness(1.08); } }
@media (max-width: 600px) { .sb-media { margin: 0 -20px 8px; } }
#branch-list > .skeleton { min-height: 260px; border-radius: var(--radius); }

/* ---------- Şube sayfası: başlık (fotoğraf + duman + ışık), adres kartı + saatler, gece haritası, mozaik ---------- */
.branch-hero {
  --smoke-opacity: .08;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 56vh, 560px);
  min-height: clamp(340px, 56svh, 560px);
  padding: 40px 0 clamp(36px, 6vw, 64px);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
.branch-hero > .wrap { position: relative; display: grid; justify-items: start; gap: 14px; }
.branch-hero .hero-media {
  overflow: hidden;
  background:
    radial-gradient(50% 70% at 12% 100%, rgba(227,18,27,.26), transparent 70%),
    radial-gradient(40% 60% at 88% 10%, rgba(242,163,60,.16), transparent 70%),
    radial-gradient(30% 40% at 60% 40%, rgba(56,189,248,.07), transparent 70%),
    var(--bg);
}
.branch-hero .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--ease); }
.branch-hero .hero-media.is-loaded img { opacity: .5; animation: hero-drift 24s var(--ease) both; }
.branch-hero .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,10,10,.78) 0%, rgba(11,10,10,.25) 60%, transparent 100%),
    linear-gradient(180deg, rgba(11,10,10,.45) 0%, transparent 30%, transparent 55%, var(--bg) 100%);
}
.branch-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 10vw, 6.75rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-shadow: 0 4px 40px rgba(0,0,0,.6), 0 0 60px rgba(227,18,27,.22);
  animation: hero-rise .9s var(--ease) .1s both;
}
.branch-hero .label, .bh-badge { animation: hero-rise .9s var(--ease) .25s both; }
.bh-badge .badge { padding: 7px 14px; font-size: .85rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bh-back { margin-bottom: 4px; color: var(--gray-light); font-size: .85rem; font-weight: 500; transition: color .2s; }
.bh-back:hover { color: var(--cream); }

.b-info { padding-top: 8px; }
@media (min-width: 900px) { .b-info { padding-top: 16px; } }
.b-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: stretch; }
.b-grid:not(:has(.b-map-wrap)) { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
@media (max-width: 900px) { .b-grid { grid-template-columns: minmax(0, 1fr); } }
.b-card {
  padding: clamp(22px, 3vw, 32px);
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(242,163,60,.08), transparent 65%),
    linear-gradient(160deg, var(--surface), var(--surface-2));
}
.b-h { margin: 0 0 8px; color: var(--gray-light); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.b-h-hours { margin-top: 28px; }
.b-address { margin: 0 0 14px; color: var(--cream); font-size: 1.05rem; }
.b-card .branch-actions .btn .ic { width: 16px; height: 16px; }

.hours { width: 100%; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 10px 12px; border-bottom: 1px solid var(--glass-border); font-weight: 400; }
.hours th { padding-left: 14px; color: var(--gray-light); text-align: left; }
.hours td { color: var(--cream); text-align: right; white-space: nowrap; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr.today th, .hours tr.today td { color: var(--amber); font-weight: 600; background: rgba(242,163,60,.08); }
.hours tr.today th { box-shadow: inset 3px 0 0 var(--amber); border-radius: 8px 0 0 8px; }
.hours tr.today td { border-radius: 0 8px 8px 0; text-shadow: 0 0 14px var(--amber-glow); }
.today-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--amber); color: #1a1208; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }

/* Harita: Google gömülü haritası gece tonuna çevrilir (invert + hue-rotate; kırmızı iğne kırmızı kalır). */
.b-map-wrap { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--surface-2); box-shadow: 0 0 0 1px rgba(56,189,248,.06), 0 24px 60px -24px rgba(0,0,0,.7); }
.b-map-wrap::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(56,189,248,.18), inset 0 0 80px rgba(11,10,10,.55); pointer-events: none; }
/* Odak harita iframe'inin içindeyken (klavye) neon halka kapsayıcıda — iframe'in kendi halkası overflow:hidden ile kırpılıyordu. */
.b-map-wrap:focus-within { outline: 2px solid var(--neon); outline-offset: 3px; }
.map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.75) contrast(.95); }
@media (max-width: 900px) { .b-map-wrap { min-height: 0; aspect-ratio: 4 / 3; } }

.b-gallery-section .section-head h2 { margin: 12px 0 0; }
.b-gallery-section .section-head > p { margin: 0; }
.b-more { display: flex; justify-content: center; margin: 32px 0 0; }

/* ---------- Mozaik (şube galerisi + Galeri sayfası): ana sayfa .mosaic tabanı üstüne her fotoğraf sayısı için boşluksuz düzen.
   ≥601px 4 sütun: ilk öğe 2×2; 1–3 fotoğrafta özel düzen; ≥4'te son öğe son satırın boş hücrelerini doldurur
   (data-r4 = (n + 3) % 4). ≤600px 2 sütun: ilk öğe tam satır, n tek değilse son öğe tam satır (data-r2). ---------- */
.mosaic-flow .mosaic-item { text-align: left; }
.mosaic-flow > .skeleton { grid-column: 1 / -1; grid-row: span 2; border-radius: 14px; }
@media (min-width: 601px) {
  .mosaic-flow { grid-auto-rows: clamp(140px, 17vw, 220px); }
  .mosaic-flow:is([data-count="1"], [data-count="2"], [data-count="3"]) { grid-auto-rows: clamp(120px, 14vw, 180px); }
  .mosaic-flow[data-count="1"] .mosaic-item { grid-column: 1 / -1; }
  .mosaic-flow[data-count="2"] .mosaic-item { grid-column: span 2; grid-row: span 2; }
  .mosaic-flow[data-count="3"] .mosaic-item + .mosaic-item { grid-column: span 2; }
  .mosaic-flow[data-r4="1"] .mosaic-item:last-child { grid-column: span 4; }
  .mosaic-flow[data-r4="2"] .mosaic-item:last-child { grid-column: span 3; }
  .mosaic-flow[data-r4="3"] .mosaic-item:last-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .mosaic-flow[data-r2="1"] .mosaic-item:last-child { grid-column: span 2; }
}
.mosaic-cap {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  z-index: 1;
  overflow: hidden;
  color: var(--cream);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0,0,0,.8);
  transition: translate .35s var(--ease), opacity .35s;
}
.mosaic-cap small { margin-left: 6px; color: var(--amber); font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
@media (hover: hover) and (min-width: 601px) {
  .mosaic-cap { opacity: 0; translate: 0 6px; }
  .mosaic-item:hover .mosaic-cap, .mosaic-item:focus-visible .mosaic-cap { opacity: 1; translate: 0 0; }
}
@media (max-width: 600px) { .mosaic-cap { left: 10px; right: 10px; bottom: 8px; font-size: .76rem; } .mosaic-cap small { display: none; } }
.mosaic.is-empty { display: block; }

/* ---------- Galeri sayfası ---------- */
.gal-filter { margin-bottom: 24px; }
.chip-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--gray-light); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-n { background: var(--red); color: #fff; }

/* ---------- İletişim: form kartı | WhatsApp CTA + şube kartları ---------- */
.ct-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.ct-form-card {
  padding: clamp(22px, 3.4vw, 36px);
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(227,18,27,.09), transparent 65%),
    linear-gradient(160deg, var(--surface), var(--surface-2));
}
.ct-form-card .b-h { margin-bottom: 18px; }
.ct-form-card .form { max-width: none; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .ct-row { grid-template-columns: minmax(0, 1fr); } }
.form [aria-invalid="true"] { border-color: rgba(227,18,27,.75) !important; box-shadow: 0 0 0 3px rgba(227,18,27,.16); }
.form-msg .ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.ct-submit { justify-self: start; min-width: 160px; }
@media (max-width: 560px) { .ct-submit { justify-self: stretch; } }
.ct-note { margin: 0; }
.ct-note a { color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }
.ct-side { display: grid; gap: 16px; min-width: 0; }
.ct-branches { display: grid; gap: 16px; }
.ct-branches > .skeleton { min-height: 200px; border-radius: var(--radius); }
.ct-wa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px 22px 22px 20px;
  border: 1px solid rgba(37,211,102,.35);
  border-radius: var(--radius);
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(37,211,102,.16), transparent 65%),
    var(--surface);
  box-shadow: 0 0 40px -14px rgba(37,211,102,.45);
  transition: border-color .3s, box-shadow .35s var(--ease), translate .3s var(--ease);
}
.ct-wa-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #052e16; box-shadow: 0 0 24px rgba(37,211,102,.45); }
.ct-wa-ic .ic { width: 26px; height: 26px; }
.ct-wa-text { display: grid; gap: 2px; min-width: 0; }
.ct-wa-text small { color: #5ee6a8; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ct-wa-text strong { font-family: var(--font-head); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.ct-wa-text span { color: var(--gray-light); font-size: .85rem; }
@media (hover: hover) { .ct-wa:hover { border-color: rgba(37,211,102,.7); box-shadow: 0 0 56px -10px rgba(37,211,102,.6); translate: 0 -2px; } }
@media (max-width: 480px) {
  .ct-wa { grid-template-columns: auto minmax(0, 1fr); }
  .ct-wa .btn { grid-column: 1 / -1; }
}

/* ---------- 404: neon tabela ---------- */
.nf { display: grid; place-items: center; min-height: calc(100vh - var(--header-h) - 120px); min-height: calc(100svh - var(--header-h) - 120px); padding: 64px 0; text-align: center; --smoke-opacity: .09; }
.nf::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 46% at 50% 38%, rgba(227,18,27,.16), transparent 70%), radial-gradient(30% 30% at 80% 80%, rgba(56,189,248,.06), transparent 70%); }
.nf-num {
  margin: 0;
  color: #ff4d55;
  font-family: var(--font-head);
  font-size: clamp(7rem, 26vw, 15rem);
  font-weight: 700;
  font-style: italic;
  line-height: .9;
  letter-spacing: -.02em;
  text-shadow: 0 0 4px rgba(255,120,125,.9), var(--glow-red), 0 0 64px rgba(227,18,27,.55), 0 0 120px rgba(227,18,27,.3);
  animation: nf-ignite 2.2s linear .2s both;
}
@keyframes nf-ignite {
  0% { opacity: .2; text-shadow: none; }
  8% { opacity: 1; }
  12% { opacity: .35; text-shadow: none; }
  20% { opacity: 1; }
  24% { opacity: .55; }
  34%, 100% { opacity: 1; }
}
.nf-title { max-width: 13.86em; /* ≈22ch */ margin: clamp(20px, 3vw, 32px) auto 12px; font-size: clamp(1.5rem, 3.6vw, 2.3rem); font-weight: 600; }
.nf-sub { max-width: 28.98em; /* ≈46ch */ margin: 0 auto 28px; color: var(--gray-light); }
.nf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nf-cta .btn { min-width: 150px; }

/* ---------- Gizlilik: okunur metin kartı ---------- */
.prose { max-width: 760px; padding: clamp(24px, 4vw, 44px); }
.prose h2 { margin: 28px 0 8px; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--gray-light); }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .branch-hero h1, .branch-hero .label, .bh-badge, .branch-hero .hero-media.is-loaded img, .nf-num { animation: none; }
  .sb-media img, .mosaic-cap, .ct-wa { transition: none; }
  .ct-wa:hover { translate: none; }
}

/* ---------- Task 16: CLS yuvaları — veri gelmeden ilk ekranda ayrılan yükseklikler ----------
   Değerler dolu hâlin ölçülen yükseklikleridir (CDP, 375 ve 1280 px). Veri gelene dek (aria-busy) iskelet çerçeve görünür,
   içi gizlidir (visibility: yerini korur, odaklanmaz). */
#eaTitle:empty::before, #eaMeta:empty::before, #countdownTitle:empty::before, #countdownMeta:empty::before { content: '\00a0'; }
.event-alert-wrap[aria-busy="true"] .event-alert > *, .countdown-section[aria-busy="true"] .wrap > :not(.cd-pill), .vip-facts[aria-busy="true"] b { visibility: hidden; }
#menu-filters:empty { min-height: 46px; }
.menu-rail:empty { min-height: 57px; }
#flavor-brands:empty, #gal-filter:empty { min-height: 51px; }
.ev-type-nav:empty { min-height: 42px; }
@media (max-width: 600px) { .ev-type-nav:empty { min-height: 48px; } }
#b-badge:empty { min-height: 35px; }
#b-address:empty { min-height: 54px; }
#b-actions:empty { min-height: 80px; }
#b-hours:not(:has(tbody)) { height: 325px; }
#branch-list > .skeleton { height: 540px; }
@media (max-width: 720px) { #branch-list > .skeleton { height: 440px; } }