:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --tab-h: calc(64px + var(--safe-bot));
  --amber: #E89A45;
  --coral: #E25C3A;
  --grad: linear-gradient(135deg, #E89A45, #E25C3A);
  --ink: #140F0C;
  --cream: #F3EDE3;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #0A0908;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { min-height: 100dvh; }
button, a { font: inherit; color: inherit; }

/* desktop: phone frame; mobile: full bleed */
#frame {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
}
#app {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #080706;
  isolation: isolate;
}
@media (min-width: 500px) {
  #app {
    width: 390px;
    height: min(844px, 100dvh);
    max-height: 844px;
    border-radius: 28px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.55);
  }
}

/* MAP */
#map { position: absolute; inset: 0; z-index: 0; }
#map .maplibregl-canvas { filter: sepia(0.55) hue-rotate(-18deg) saturate(1.5) brightness(0.78) contrast(1.06); }
#map .maplibregl-ctrl-attrib {
  background: transparent; color: rgba(244,239,231,0.45);
  font-size: 9px; right: 8px;
  bottom: calc(var(--tab-h) + 8px);
}
#map .maplibregl-ctrl-attrib a { color: inherit; }
#map .maplibregl-ctrl-bottom-left { display: none; }
.map-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,7,6,0.42) 0%, rgba(8,7,6,0) 90px,
      rgba(8,7,6,0) 48%, rgba(8,7,6,0.35) 68%, rgba(8,7,6,0.82) 100%);
}
#app[data-screen="detay"] .map-veil { opacity: 0; }

/* orbs */
.orb {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1D0, #E89A45 52%, #E25C3A 100%);
  box-shadow: 0 0 12px 5px rgba(232,154,69,0.7), 0 0 28px 12px rgba(226,92,58,0.32);
  cursor: pointer; border: 0; padding: 0;
  transform-origin: center;
}
.orb.sel {
  width: 18px; height: 18px;
  box-shadow: 0 0 0 6px rgba(232,154,69,0.22), 0 0 18px 8px rgba(232,154,69,0.7), 0 0 36px 14px rgba(226,92,58,0.36);
}
.maplibregl-marker { z-index: 2; }

/* TOP SWITCH */
.top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20;
  padding: calc(10px + var(--safe-top)) 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.where {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,231,0.7);
}
.brand-pin { height: 30px; width: auto; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.switch {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; padding: 3px;
  background: rgba(16,13,11,0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.28);
}
.switch button {
  appearance: none; border: 0; background: transparent;
  min-width: 72px; height: 32px; padding: 0 14px;
  border-radius: 999px;
  font-family: Geist, Inter, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -0.02em;
  color: rgba(244,239,231,0.5);
  cursor: pointer;
}
.switch button.on {
  background: var(--grad);
  color: var(--ink);
}
.press:active { transform: scale(0.96); }

/* TABS */
.tabs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--tab-h);
  display: flex; align-items: flex-start; justify-content: space-around;
  padding: 6px 8px calc(10px + var(--safe-bot));
  background: #080706;
  pointer-events: none;
}
.tab {
  flex: 1; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 8.5px; font-weight: 500; letter-spacing: 0.14em;
  color: rgba(244,239,231,0.38);
}
.tab.on { color: #F4EFE7; }
.tab svg { display: block; }

/* ===== AFIŞ ticket ===== */
#ticket {
  position: absolute; left: 16px; right: 16px;
  bottom: calc(var(--tab-h) + 8px);
  z-index: 22;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.8  0 0 0 0 0.72  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  border-radius: 32px;
  padding: 16px 18px 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.28);
  display: none;
}
#app[data-style="afis"][data-screen="harita"] #ticket { display: block; }
#ticket .kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  color: #D4652A; margin-bottom: 4px;
}
#ticket h2 {
  font-family: Fraunces, serif;
  font-optical-sizing: auto; font-weight: 800;
  font-size: 46px; line-height: 0.9; letter-spacing: -0.035em;
  margin: 0 0 4px;
}
#ticket .acts {
  font-family: "Instrument Serif", Fraunces, serif;
  font-style: italic; font-size: 20px; line-height: 1.2;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
#ticket .meta {
  display: flex; align-items: baseline; gap: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; font-weight: 500; color: #3A312B;
  margin-bottom: 10px;
}
#ticket .meta .time {
  font-family: Fraunces, serif; font-weight: 700; font-size: 22px;
  letter-spacing: -0.03em; color: var(--ink);
}
#ticket .facts {
  padding: 10px 0 12px;
  border-top: 1px solid rgba(20,15,12,0.14);
  margin-bottom: 8px;
}
#ticket .genres { font-family: "Instrument Sans", Inter, sans-serif; font-size: 12.5px; font-weight: 500; margin-bottom: 5px; }
#ticket .price, #ticket .ig {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500;
  margin-bottom: 4px;
}
#ticket .ig { display: flex; gap: 8px; align-items: baseline; }
#ticket .who, .who {
  font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #7A7168;
}
#ticket .cta-ink, .cta-ink {
  display: flex; align-items: center; justify-content: center;
  height: 52px; border-radius: 999px; border: 0; width: 100%;
  background: var(--ink); color: var(--cream);
  font-family: "Instrument Sans", Geist, sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: -0.02em;
  cursor: pointer;
}
#ticket .cta-ink.is-on, .cta-ink.is-on { background: #2A211C; }
#ticket .more {
  display: flex; align-items: center; justify-content: center;
  height: 44px; gap: 6px; border: 0; background: none; width: 100%;
  font-family: "Instrument Sans", sans-serif; font-size: 14px; font-weight: 500;
  color: #3A312B; cursor: pointer;
}
.ch { color: #3A312B; text-decoration: none; }
.ch:hover { text-decoration: underline; }

/* ===== CAM cards ===== */
#carousel {
  display: none;
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--tab-h) + 6px);
  z-index: 22;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 40px 8px 16px;
  gap: 12px;
}
#carousel::-webkit-scrollbar { display: none; }
#app[data-style="cam"][data-screen="harita"] #carousel {
  display: flex;
}
.card {
  flex: 0 0 328px;
  scroll-snap-align: start;
  border-radius: 32px;
  background: rgba(18,14,12,0.58);
  -webkit-backdrop-filter: blur(36px) saturate(1.25);
  backdrop-filter: blur(36px) saturate(1.25);
  box-shadow: 0 28px 70px rgba(0,0,0,0.52), 0 8px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #F4EFE7;
  padding: 18px 18px 14px;
  display: flex; flex-direction: column;
  min-height: 280px;
  cursor: pointer;
}
.card .kicker {
  font-family: "Geist Mono", monospace;
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em;
  color: var(--amber); margin-bottom: 6px;
}
.card h2 {
  font-family: Inter, sans-serif; font-optical-sizing: auto;
  font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.04em;
  margin-bottom: 2px;
}
.card .place {
  font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  color: rgba(244,239,231,0.6); margin-bottom: 8px;
}
.card .acts {
  font-family: Inter, sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.card .when {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
}
.card .when .time {
  font-family: Inter, sans-serif; font-optical-sizing: auto;
  font-weight: 650; font-size: 20px; letter-spacing: -0.03em;
}
.card .when .extra { font-family: "Geist Mono", monospace; font-size: 10px; color: rgba(244,239,231,0.6); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.card .chips { flex-wrap: nowrap; overflow: hidden; }
.chip {
  height: 24px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-family: Geist, Inter, sans-serif; font-size: 11.5px; font-weight: 500;
  background: rgba(244,239,231,0.08); color: #F4EFE7; white-space: nowrap;
}
.chip.fmt { color: #F0C48A; background: rgba(232,154,69,0.14); }
.card .price, .card .ig {
  font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 500;
  margin-bottom: 4px;
}
.card .ig { display: flex; gap: 8px; align-items: baseline; }
.card .ig a, #ticket .ig a { color: inherit; text-decoration: none; }
.cta-grad {
  margin-top: auto;
  height: 52px; border-radius: 999px; border: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: var(--ink);
  font-family: Geist, Inter, sans-serif; font-weight: 650; font-size: 16px;
  letter-spacing: -0.02em; cursor: pointer;
  box-shadow: 0 8px 20px rgba(226,92,58,0.28);
}
.cta-grad.is-on { filter: saturate(0.85) brightness(1.05); }

/* ===== DETAIL ===== */
#detail {
  position: absolute; left: 0; right: 0; top: 0; bottom: var(--tab-h); z-index: 40;
  transform: translateY(110%);
  transition: transform 520ms var(--spring);
  pointer-events: none;
  background: #080706;
}
#app[data-screen="detay"] #detail {
  transform: translateY(0);
  pointer-events: auto;
}
.back {
  position: absolute; top: calc(10px + var(--safe-top)); left: 12px;
  z-index: 50;
  height: 40px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: rgba(16,13,11,0.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #F4EFE7;
  font-family: Geist, "Instrument Sans", sans-serif;
  font-size: 14px; font-weight: 550;
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
#app[data-style="afis"] .back { color: var(--ink); background: rgba(243,237,227,0.82); }

.hero {
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 80% 70% at 70% 30%, rgba(226,92,58,0.28), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(232,154,69,0.16), transparent 55%),
    #0C0A09;
  overflow: hidden;
}
#app[data-style="afis"] .hero {
  background:
    radial-gradient(ellipse 80% 48% at 110% -5%, rgba(232,154,69,0.38), transparent 58%),
    #F3EDE3;
}
.hero .vinyl {
  width: min(236px, 62vw); height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 28px rgba(232,154,69,0.25));
  pointer-events: none;
}

.sheet {
  position: absolute; left: 0; right: 0; top: 28%; bottom: 80px;
  z-index: 6;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 22px 28px;
}
#app[data-style="cam"] .sheet {
  top: 26%;
  background: rgba(14,12,11,0.92);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.35);
}
#app[data-style="afis"] .sheet {
  top: 26%;
  bottom: 80px;
  background: #F3EDE3;
  color: var(--ink);
  border-radius: 32px 32px 0 0;
}
.grab {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(244,239,231,0.18);
  margin: 0 auto 12px;
}
#app[data-style="afis"] .grab { background: rgba(20,15,12,0.18); }
#app[data-style="afis"] .grab { display: none; }

.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.sheet-head h1 {
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
}
#app[data-style="cam"] .sheet-head h1 {
  font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 32px;
}
#app[data-style="afis"] .sheet-head h1 {
  font-family: Fraunces, serif; font-optical-sizing: auto; font-weight: 800; font-size: 56px;
}
.sheet .place {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(244,239,231,0.6); margin-top: 4px;
}
#app[data-style="afis"] .sheet .place {
  font-family: "Instrument Serif", serif; font-style: italic; font-size: 20px;
  text-transform: none; letter-spacing: 0; color: #3A312B;
}
.row-k {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8C847C; margin: 8px 0 6px;
}
#app[data-style="afis"] .chip {
  background: rgba(20,15,12,0.06); color: var(--ink);
}
#app[data-style="afis"] .chip.fmt { background: rgba(212,101,42,0.12); color: #D4652A; }
.price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 0; margin: 8px 0;
  border-top: 1px solid rgba(244,239,231,0.1);
  border-bottom: 1px solid rgba(244,239,231,0.1);
  font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 11.5px;
}
#app[data-style="afis"] .price-row { border-color: rgba(20,15,12,0.14); color: var(--ink); }
.price-row .ch { color: #F0C48A; }
#app[data-style="afis"] .price-row .ch { color: #3A312B; }

.prog-kicker {
  font-family: "Geist Mono", "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em; color: var(--amber); margin: 8px 0 6px;
}
#app[data-style="afis"] .prog-kicker { color: #D4652A; }
.tl-item { display: grid; grid-template-columns: 52px 14px 1fr; margin-bottom: 6px; }
.tl-time {
  font-family: Inter, Fraunces, sans-serif; font-optical-sizing: auto;
  font-weight: 650; font-size: 16px; letter-spacing: -0.03em; padding-top: 1px;
}
#app[data-style="afis"] .tl-time { font-family: Fraunces, serif; font-weight: 700; }
.tl-rail { position: relative; }
.tl-rail .dot {
  position: absolute; top: 7px; left: 3px; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(244,239,231,0.4);
}
.tl-item:first-child .tl-rail .dot { background: var(--coral); box-shadow: 0 0 0 3px rgba(226,92,58,0.22); }
.tl-who { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
#app[data-style="cam"] .tl-who { font-family: Inter, sans-serif; }
#app[data-style="afis"] .tl-who { font-family: "Instrument Serif", serif; font-style: italic; font-size: 18px; }
.tl-sub { font-size: 12px; color: #8C847C; margin-top: 1px; }
.wk { display: grid; grid-template-columns: 52px 1fr; gap: 8px; margin-bottom: 6px; }
.wk-day { font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 9px; color: rgba(244,239,231,0.6); }
#app[data-style="afis"] .wk-day { color: #3A312B; }
.wk-day strong { display: block; font-family: Geist, Inter, sans-serif; font-size: 12px; font-weight: 600; color: inherit; }
.wk-line { display: grid; grid-template-columns: 40px 1fr; gap: 6px; align-items: baseline; }
.wk-time { font-family: "Geist Mono", monospace; font-size: 10.5px; }
.wk-who { font-size: 13px; line-height: 1.25; }
#app[data-style="afis"] .wk-who { font-family: "Instrument Serif", serif; font-style: italic; }
.room { color: #8C847C; font-style: normal; font-family: Geist, sans-serif; font-size: 11px; }
.empty-note { font-size: 12px; color: #8C847C; margin-top: 4px; }

.cta-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 28; height: 72px;
  padding: 8px 16px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(8,7,6,0), rgba(8,7,6,0.94) 30%);
}
#app[data-style="afis"] .cta-bar {
  background: linear-gradient(180deg, rgba(243,237,227,0), rgba(243,237,227,0.96) 30%);
}
.cta-bar .cta-grad, .cta-bar .cta-ink { flex: 1; height: 56px; margin: 0; }
.ghost {
  flex: 0 0 auto; height: 56px; min-width: 44px; padding: 0 12px;
  border-radius: 999px; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(244,239,231,0.08);
  box-shadow: inset 0 0 0 1px rgba(244,239,231,0.1);
  color: #F4EFE7; text-decoration: none;
  font-family: Geist, sans-serif; font-size: 13px; font-weight: 550;
  cursor: pointer;
}
#app[data-style="afis"] .ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(20,15,12,0.22);
  color: var(--ink);
}
.ghost.ig { font-family: "Geist Mono", "IBM Plex Mono", monospace; font-size: 11.5px; }
.ghost.row { flex-direction: row; gap: 6px; }
#app[data-style="cam"] .tabs { background: linear-gradient(180deg, transparent, rgba(8,7,6,0.98) 40%); }
#app[data-style="afis"][data-screen="detay"] .tabs {
  background: #F3EDE3;
}
#app[data-style="afis"][data-screen="detay"] .tab { color: rgba(20,15,12,0.35); }
#app[data-style="afis"][data-screen="detay"] .tab.on { color: var(--ink); }

.mock-tag {
  position: absolute; left: 16px; bottom: calc(var(--tab-h) + 4px);
  z-index: 21;
  font-family: "Geist Mono", monospace; font-size: 8px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(244,239,231,0.35);
  pointer-events: none;
  display: none;
}

.press { transition: transform 90ms ease; transform-origin: center; -webkit-user-select: none; user-select: none; }
.press:active { transform: scale(0.96); }
.card, #ticket, .sheet { touch-action: pan-y; }
#carousel { touch-action: pan-x; }
#detail { will-change: transform; }
.orb { transition: box-shadow 180ms ease, width 180ms ease, height 180ms ease; }

#app[data-style="afis"][data-screen="detay"] #detail { background: #F3EDE3; }
#app[data-style="cam"][data-screen="detay"] #detail { background: #080706; }
#app[data-style="cam"] .tabs { background: #080706; }
.link-row { display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.price { overflow:hidden; text-overflow:ellipsis; }