/* ============================================================
   EntryX Web — "Gece Programı" tasarımı (v2)
   Editoryal gece rehberi: sinematik poster duvarı, dev tipografi,
   gün gün akan program. Marka: mavi #2F6EDB → teal #1FA98F,
   derin siyah zemin. Syne (display) + Instrument Sans + IBM Plex Mono.
   ============================================================ */
:root {
  --bg0: #04050A;
  --bg1: #07080E;
  --panel: #0B0D15;
  --card: #0E111A;
  --card-2: #131725;
  --line: #1D2434;
  --line-soft: #151B29;
  --ink: #F2F4FA;
  --muted: #97A1B8;
  --dim: #5A6478;
  --blue: #2F6EDB;
  --teal: #1FA98F;
  --ice: #BCD4FF;
  --grad: linear-gradient(96deg, #2F6EDB 0%, #1FA98F 100%);
  --ok: #34D399;
  --warn: #F5C76B;
  --err: #F87171;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --font-d: "Syne", "Instrument Sans", system-ui, sans-serif;
  --font-b: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-m: "IBM Plex Mono", Consolas, monospace;
  --wrap: 1240px;
  --nav-h: 66px;

  /* Tema ile degisen, daha once sabit yazilmis degerler */
  --nav-bg: rgba(4, 5, 10, .68);
  --ov-1: rgba(255, 255, 255, .05);
  --ov-2: rgba(255, 255, 255, .14);
  --dot:  rgba(255, 255, 255, .055);
  --mark: rgba(151, 161, 184, .22);
  --sh-1: 0 20px 50px rgba(0, 0, 0, .5);
  --sh-2: 0 18px 50px rgba(0, 0, 0, .55);
  --chip: rgba(14, 17, 26, .85);
  --scroll: #232C44;
  --scroll-hover: #2F3B5C;
  --pembe: #FFA9BC;
  --hap: rgba(4, 5, 10, .5);
  --panel-cam: rgba(14, 17, 26, .8);
}

/* ============================================================
   AÇIK TEMA
   ============================================================
   Site koyu tasarlandi; acik tema token seviyesinde kuruluyor.

   Afis fotograflarinin ustundeki karartmalar (rgba(4,5,10,...))
   BILEREK iki temada da koyu birakildi: onlar fotografin uzerindeki
   beyaz yaziyi okunur tutuyor. Acik yapilirsa yazi kaybolur.
   ============================================================ */

/* ============================================================
   KOYU KALAN YÜZEYLER
   ============================================================
   Bazi bolumlerin arkasinda afis fotografi ve uzerinde karartma var:
   kahraman bolumu, etkinlik detayinin bulanik afis basligi, sehir
   kartlari ve afis kartlari. (Mekan basligi .venue-hero LISTEDE DEGIL:
   arkasinda fotograf yok, olcumle dogrulandi -- eklenince acik temada
   beyaz zemine beyaz baslik yaziyordu.) Bunlar
   acik temada da koyu kalir -- karartmayi acmak fotograf uzerindeki
   yaziyi okunmaz yapardi.

   Dolayisiyla ICLERINDEKI yazi da acik kalmali. Token'lari burada
   yeniden tanimliyoruz; CSS degiskenleri miras alindigi icin bu blok
   tum alt ogelere iniyor ve tek tek kural yazmak gerekmiyor.

   Bu olmadan acik temada kahraman basligi koyu fotograf uzerinde
   koyu yaziya donusuyor ve kayboluyordu.
   ============================================================ */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .detail-bg,
:root[data-theme="light"] .detail-top,
:root[data-theme="light"] .city-card,
:root[data-theme="light"] .poster,
:root[data-theme="light"] .venue-card {
  /* color BURADA yeniden cozulmeli. body { color: var(--ink) } govdede
     HESAPLANIP asagi miras kaliyor; degiskeni derinde yeniden tanimlamak
     coktan hesaplanmis rengi degistirmiyor. Bu satir olmadan kahraman
     basligi koyu fotograf uzerinde koyu kaliyordu. */
  color: var(--ink);
  --ink: #F2F4FA;
  --muted: #97A1B8;
  --dim: #7C8699;
  --ice: #BCD4FF;
  --line: #1D2434;
  --line-soft: #151B29;
  /* .detail-bg::after gradyani var(--bg0) ile bitiyor. Acik temada bu
     acik bir renk oluyor ve fotograf basliginin alt yarisi aciyor,
     uzerindeki beyaz baslik kayboluyordu. Sozde ogeler de bu blogun
     degiskenlerini aliyor. */
  --bg0: #04050A;
  --card: #0E111A;
  --panel: #0B0D15;
}

:root[data-theme="light"] {
  --bg0: #F4F6FA;
  --bg1: #FFFFFF;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #EEF1F7;
  --line: #D7DDE9;
  --line-soft: #E6EAF2;
  --ink: #0E1420;
  --muted: #4C5769;
  --dim: #78839A;
  --blue: #1F56B8;
  --teal: #127866;
  --ice: #1B4489;
  --grad: linear-gradient(96deg, #1F56B8 0%, #127866 100%);
  --ok: #12805A;
  --warn: #8A5A00;
  --err: #C0392F;

  --nav-bg: rgba(255, 255, 255, .80);
  --ov-1: rgba(14, 20, 32, .05);
  --ov-2: rgba(14, 20, 32, .10);
  --dot:  rgba(14, 20, 32, .06);
  --mark: rgba(76, 87, 105, .20);
  --sh-1: 0 14px 34px rgba(14, 20, 32, .10);
  --sh-2: 0 18px 44px rgba(14, 20, 32, .14);
  --chip: #FFFFFF;
  --scroll: #C3CBD9;
  --scroll-hover: #A8B2C4;
  --pembe: #C2325A;
  --hap: #FFFFFF;
  --panel-cam: rgba(255, 255, 255, .88);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-color: #26304A var(--bg0); scrollbar-width: thin; }
/* Windows'un gri kaydırma çubuğu karanlık tasarımı bozuyor */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 99px; border: 3px solid var(--bg0); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
body {
  font-family: var(--font-b);
  background: var(--bg0);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
::selection { background: rgba(47, 110, 219, .4); }
a { color: var(--ice); text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: 14px; top: -46px; z-index: 300;
  background: var(--blue); color: #fff; padding: 9px 14px; border-radius: 9px;
  transition: top .2s;
}
.skip:focus { top: 10px; color: #fff; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }
.mono { font-family: var(--font-m); }

/* film greni — çok hafif doku */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.nav, main, footer, .modal-back, .toasts { position: relative; z-index: 2; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { display: flex; align-items: center; gap: 18px; height: var(--nav-h); }
.logo {
  display: flex; align-items: baseline;
  font-family: var(--font-d); font-weight: 800; font-size: 21px; color: var(--ink);
  letter-spacing: .01em; flex: none;
}
.logo:hover { color: var(--ink); }
.logo .x {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  color: var(--muted); font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: 99px; transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--ov-1); }
.nav-links a.on { color: var(--ink); background: rgba(47,110,219,.16); }
/* position: relative -> kullanici menusu buna gore konumlanir. Once menu
   .nav'a ekleniyordu; .nav tum pencere genisliginde oldugu icin
   right:22px menuyu pencerenin sag kenarina yapistiriyor, genis
   ekranlarda dugmeden metrelerce uzakta aciliyordu. */
.nav-right { display: flex; align-items: center; gap: 10px; position: relative; }
/* Bosluğu tema dugmesi yutuyor; boylece kendisi ve ondan sonraki hesap
   dugmeleri birlikte saga yaslaniyor. Once dugme nav baglantilarinin
   hemen yanindaydi ve navigasyonun ortasinda tek basina duruyordu. */
.tema-btn { margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  background: var(--grad); color: #fff; font-weight: 600; font-size: 14.5px;
  padding: 10px 20px; border-radius: 99px; border: none; cursor: pointer;
  transition: filter .15s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 22px rgba(47, 110, 219, .28);
}
.btn:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { border-color: var(--blue); filter: none; }
.btn.small { padding: 8px 15px; font-size: 13.5px; }
.btn.danger { background: none; border: 1px solid rgba(248,113,113,.4); color: var(--err); box-shadow: none; }
.btn.danger:hover { border-color: var(--err); filter: none; }
.btn.block { width: 100%; padding: 13px; font-size: 15.5px; }

.user-chip {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 99px; padding: 5px 13px 5px 5px;
  background: none; color: var(--ink); font-size: 14px; font-weight: 500;
}
.user-chip:hover { border-color: var(--blue); }
.user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  min-width: 190px; padding: 6px; box-shadow: var(--sh-2); z-index: 120;
}
.menu a, .menu button {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px; padding: 9px 12px; border-radius: 9px;
}
.menu a:hover, .menu button:hover { background: var(--ov-1); color: var(--ink); }
.menu .sep { border-top: 1px solid var(--line-soft); margin: 5px 0; }

main { min-height: 60vh; }

/* ============================================================
   HERO — poster duvarı + dev tipografi
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: min(88vh, 780px);
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--line-soft);
}
.hero-wall {
  position: absolute; inset: -4% -2%; z-index: 0; opacity: .38;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  transform: rotate(-4deg) scale(1.06);
  pointer-events: none;
}
.wall-row { display: flex; gap: 16px; width: max-content; animation: wall-slide 70s linear infinite; }
.wall-row.rev { animation-direction: reverse; animation-duration: 88s; }
.wall-row img {
  width: 220px; height: 220px; object-fit: cover; border-radius: 14px;
  filter: saturate(.9) brightness(.85);
}
@keyframes wall-slide { to { transform: translateX(-50%); } }
.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(90% 70% at 50% 88%, rgba(4,5,10,.2), rgba(4,5,10,.96) 78%),
    linear-gradient(180deg, rgba(4,5,10,.86) 0%, rgba(4,5,10,.34) 42%, rgba(4,5,10,.92) 100%);
}
/* width/min-width: esnek kutu, icindeki uzun kelimenin (PROGRAMI) asgari
   genisligi yuzunden 375 px ekranda 486 px'e buyuyup sagdan kirpiliyordu;
   yan bosluklar da kayboluyordu. */
/* Yatay padding .wrap'inkiyle ayni olmali: burada 0 yazildigi icin
   .wrap'in 22px'ini eziyor ve metin ekran kenarina yapisiyordu. */
.hero-in { position: relative; z-index: 2; padding: 90px 22px 64px; width: 100%; min-width: 0; }
.hero-eyebrow {
  font-family: var(--font-m); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ice); display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
}
.hero-eyebrow .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero-eyebrow a {
  color: inherit; text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.hero-eyebrow a:hover { color: #fff; border-bottom-color: var(--teal); }
.hero-eyebrow .sep { margin: 0 10px; color: var(--dim); }
.hero-eyebrow .canli { margin-left: 12px; color: var(--muted); }
.hero-title {
  font-family: var(--font-d); font-weight: 800; text-transform: uppercase;
  /* Alt sinir 52px'ti: kucuk telefonlarda "PROGRAMI" ekrana sigmiyordu.
     9vw, 320-430 px araliginda satiri kutuya sigdirir. */
  font-size: clamp(28px, 9vw, 128px); line-height: .92; letter-spacing: -.015em;
}
.hero-title .row { display: block; }
.hero-title .hollow {
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 244, 250, .85);
}
.hero-title .grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-stats {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px;
  font-family: var(--font-m); font-size: 12.5px; letter-spacing: .16em; color: var(--muted);
  text-transform: uppercase;
}
.hero-stats b { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; align-items: center; }
.hero-search {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; max-width: 420px;
  background: rgba(14, 17, 26, .75); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 99px; padding: 12px 18px;
}
.hero-search svg { color: var(--dim); flex: none; }
.hero-search input {
  background: none; border: none; outline: none; color: var(--ink);
  font-size: 15px; width: 100%; font-family: inherit;
}
.hero-search input::placeholder { color: var(--dim); }

/* ---------- marquee ayraç ---------- */
.tape {
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: var(--bg1); overflow: hidden; padding: 13px 0;
}
.tape-track { display: flex; width: max-content; animation: wall-slide 40s linear infinite; }
.tape span {
  font-family: var(--font-m); font-size: 12px; letter-spacing: .22em; color: var(--dim);
  text-transform: uppercase; white-space: nowrap; padding: 0 20px;
  display: flex; align-items: center; gap: 40px;
}
.tape span::after { content: "✦"; font-size: 9px; color: var(--teal); }

/* ============================================================
   PROGRAM — gün gün akış
   ============================================================ */
.section { padding: 74px 0 10px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.kicker {
  font-family: var(--font-m); font-size: 11.5px; letter-spacing: .26em;
  color: var(--teal); text-transform: uppercase; display: block; margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-d); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 54px); line-height: 1; letter-spacing: -.01em;
}
.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 22px 0 10px; position: sticky; top: var(--nav-h); z-index: 50;
  /* Arka plan SAYDAM DEGIL. Once gradyanla saydama geciyordu ve altindan
     kayan gun basligi ("31 PAZARTESI") cubugun icinden gorunuyordu.
     Yumusak gecis de yok: afis kartinin uzerine dusen solma bandi
     kotu duruyordu. Cubuk bastan sona duz. */
  background: var(--bg0);
}
.chip {
  border: 1px solid var(--line); background: var(--chip); color: var(--muted);
  font-size: 13px; font-weight: 500; padding: 7px 15px; border-radius: 99px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--blue); color: var(--ink); }
.chip.on { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.chip-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; }

.day-group { padding: 34px 0 8px; }
.day-head {
  display: flex; align-items: baseline; gap: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 14px;
}
.day-head .d-num {
  font-family: var(--font-d); font-weight: 800; font-size: clamp(38px, 5vw, 58px);
  line-height: 1; letter-spacing: -.02em;
}
.day-head .d-meta { display: flex; flex-direction: column; }
.day-head .d-day { font-family: var(--font-m); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
.day-head .d-month { color: var(--muted); font-size: 14px; }
.day-head .d-count { margin-left: auto; font-family: var(--font-m); font-size: 11.5px; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }
.d-badge {
  align-self: center; margin-left: 14px;
  font-family: var(--font-m); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--grad); color: #fff; border-radius: 99px; padding: 5px 12px;
}
.d-badge.sonra { background: none; border: 1px solid var(--line); color: var(--teal); }

.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.poster {
  display: block; color: inherit; text-decoration: none;
  position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  aspect-ratio: 3 / 4; background: linear-gradient(150deg, #131B30, #0B111C);
  border: 1px solid var(--line-soft);
  transition: transform .25s, box-shadow .3s, border-color .25s;
}
.poster:hover, .venue-card:hover { color: inherit; }
.poster:hover, .poster:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(47,110,219,.5);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(31,169,143,.12);
}
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.poster:hover img { transform: scale(1.04); }
.poster .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 52px; font-weight: 800; color: rgba(255,255,255,.12);
}
.poster .p-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,5,10,.05) 40%, rgba(4,5,10,.94) 96%);
}
.poster .p-top {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.p-save {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,10,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16); color: #fff; cursor: pointer;
  transition: transform .12s, border-color .15s, color .15s, background .15s;
}
.p-save:hover { border-color: #fff; transform: scale(1.08); }
.p-save svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; transition: fill .15s; }
.p-save.on { color: #FF6B8A; border-color: rgba(255,107,138,.5); background: rgba(255,107,138,.14); }
.p-save.on svg { fill: currentColor; stroke: currentColor; }
.p-date {
  background: rgba(4,5,10,.78); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 11px;
  padding: 7px 11px; text-align: center; line-height: 1.1;
}
.p-date b { display: block; font-family: var(--font-d); font-size: 17px; }
.p-date span { font-family: var(--font-m); font-size: 9px; letter-spacing: .16em; color: var(--ice); text-transform: uppercase; }
.p-tag {
  background: rgba(31, 169, 143, .9); color: #04110D;
  font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 5px 11px;
  letter-spacing: .02em;
}
.poster .p-body { position: absolute; left: 14px; right: 14px; bottom: 13px; }
.poster h3 { font-family: var(--font-d); font-weight: 700; font-size: 19px; line-height: 1.12; }
.poster .p-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.poster .p-cta {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--ice);
  opacity: 0; transform: translateY(5px); transition: all .25s;
}
.poster:hover .p-cta { opacity: 1; transform: none; }

.empty {
  text-align: center; color: var(--muted); padding: 70px 20px; margin-top: 20px;
  border: 1px dashed var(--line); border-radius: var(--r-lg); font-size: 14.5px;
}
.empty b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; font-family: var(--font-d); }

/* ============================================================
   MEKANLAR
   ============================================================ */
.venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 26px; }
.venue-card {
  display: block; color: inherit; text-decoration: none;
  position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 9; border: 1px solid var(--line-soft);
  background: linear-gradient(150deg, #131B30, #0B111C);
  transition: transform .25s, border-color .25s, box-shadow .3s;
}
.venue-card:hover { transform: translateY(-4px); border-color: rgba(47,110,219,.5); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.venue-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: transform .4s, filter .3s; }
.venue-card:hover img { transform: scale(1.05); filter: brightness(.85); }
.venue-card .v-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(4,5,10,.92)); }
.venue-card .v-body { position: absolute; left: 16px; right: 16px; bottom: 14px; }
.venue-card h3 { font-family: var(--font-d); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: -.01em; }
.venue-card .v-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.venue-card .v-count { font-family: var(--font-m); font-size: 10.5px; letter-spacing: .14em; color: var(--teal); text-transform: uppercase; }

/* Şehir keşif ızgarası (Luma tarzı) */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* Kompakt hap-kart: kullanıcı büyük kartları fazla buldu — buton hissi,
   ama içinde blur afiş dokusu ve şehir rengi korunur. */
.city-card {
  position: relative; display: flex; align-items: center; overflow: hidden;
  text-decoration: none; color: inherit;
  min-height: 76px; padding: 14px 44px 14px 18px;
  border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background-color: #0A0F1E;
  transition: transform .2s, border-color .2s, box-shadow .25s;
}
/* Afiş, okunamayacak kadar blurlanmış atmosfer katmanı olarak */
.city-card .c-tex {
  position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover;
  filter: blur(16px) saturate(1.35) brightness(.5); transform: scale(1.1);
  opacity: .55; transition: opacity .3s, filter .3s; z-index: 0;
}
.city-card:hover .c-tex { opacity: .75; filter: blur(13px) saturate(1.45) brightness(.6); }
/* İnce nokta dokusu */
.city-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 17px 17px;
}
/* Köşeden gelen renk parıltısı — her şehir varyantında rengi değişir */
.city-card::after {
  content: ""; position: absolute; width: 150%; height: 150%; top: -62%; right: -46%;
  border-radius: 50%; filter: blur(34px); opacity: .55; transition: opacity .25s; z-index: 1;
}
.city-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.45); color: inherit; }
.city-card:hover::after { opacity: .8; }
.city-card .c-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  text-shadow: 0 2px 14px rgba(4,5,10,.7);
}
.city-card .c-name {
  font-family: var(--font-d); font-weight: 800;
  font-size: 16.5px;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.05;
  overflow-wrap: anywhere;
}
.city-card .c-count {
  font-family: var(--font-m); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.city-card .c-go {
  position: absolute; top: 50%; right: 16px; margin-top: -11px;
  font-size: 16px; color: #fff; z-index: 2; opacity: .45;
  transition: opacity .2s, transform .2s;
}
.city-card:hover .c-go { opacity: .9; transform: none; }

/* Şehir renk varyantları — marka paletinin içinde kalır */
.city-card.v0 { background-image: linear-gradient(155deg, #17305E 0%, #0A0F1E 64%); border-color: rgba(47,110,219,.28); }
.city-card.v0::after { background: radial-gradient(circle, rgba(47,110,219,.5), transparent 62%); }
.city-card.v0:hover { border-color: rgba(47,110,219,.6); }
.city-card.v1 { background-image: linear-gradient(155deg, #0F3D36 0%, #0A0F1E 64%); border-color: rgba(31,169,143,.28); }
.city-card.v1::after { background: radial-gradient(circle, rgba(31,169,143,.5), transparent 62%); }
.city-card.v1:hover { border-color: rgba(31,169,143,.6); }
.city-card.v2 { background-image: linear-gradient(155deg, #241F55 0%, #0A0F1E 64%); border-color: rgba(91,84,201,.28); }
.city-card.v2::after { background: radial-gradient(circle, rgba(91,84,201,.5), transparent 62%); }
.city-card.v2:hover { border-color: rgba(91,84,201,.6); }
.city-card.v3 { background-image: linear-gradient(155deg, #10343F 0%, #0A0F1E 64%); border-color: rgba(30,136,168,.28); }
.city-card.v3::after { background: radial-gradient(circle, rgba(30,136,168,.5), transparent 62%); }
.city-card.v3:hover { border-color: rgba(30,136,168,.6); }
.city-card.v4 { background-image: linear-gradient(155deg, #1B1F52 0%, #0A0F1E 64%); border-color: rgba(58,71,176,.28); }
.city-card.v4::after { background: radial-gradient(circle, rgba(58,71,176,.5), transparent 62%); }
.city-card.v4:hover { border-color: rgba(58,71,176,.6); }

/* Kaydedilenler filtre çipi */
.chip.chip-saved { border-color: rgba(255,107,138,.4); color: var(--pembe); }
.chip.chip-saved.on { background: linear-gradient(96deg, #FF6B8A, #C9457F); border-color: transparent; color: #fff; }

/* Detay: kaydet + paylaş */
.detail-actions { display: flex; gap: 10px; margin-top: 12px; }
.detail-actions .btn { flex: 1; padding: 11px; font-size: 14px; gap: 7px; }
.detail-actions .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.detail-actions #btn-save.on { border-color: rgba(255,107,138,.5); color: #FF6B8A; }
.detail-actions #btn-save.on svg { fill: currentColor; }

/* Nasıl çalışır — üç adım */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 26px 24px 28px; transition: border-color .2s, transform .2s;
}
.step:hover { border-color: #2A3550; transform: translateY(-3px); }
.step::after {
  content: ""; position: absolute; top: 33px; right: 24px; width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--teal), transparent);
}
.step .s-num {
  display: block; margin-bottom: 40px;
  font-family: var(--font-m); font-size: 12px; letter-spacing: .22em; color: var(--teal);
}
.step h3 { font-family: var(--font-d); font-weight: 700; font-size: 19px; text-transform: uppercase; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14px; }

/* DJ şeridi */
.dj-strip { display: flex; gap: 14px; overflow-x: auto; padding: 24px 4px 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.dj-card {
  flex: none; width: 150px; text-align: center;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 18px 12px;
}
.dj-card img, .dj-card .pfp {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px;
  border: 2px solid var(--line);
}
.dj-card .pfp { background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; }
.dj-card b { display: block; font-size: 14px; }
.dj-card span { color: var(--dim); font-size: 11.5px; }

/* ============================================================
   ETKİNLİK DETAY — sinematik
   ============================================================ */
.detail { position: relative; }
.detail-bg {
  position: absolute; inset: 0 0 auto 0; height: 560px; overflow: hidden; z-index: 0;
}
.detail-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(46px) saturate(1.15) brightness(.5); transform: scale(1.3); }
.detail-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,5,10,.35), var(--bg0) 92%); }
.detail-in { position: relative; z-index: 2; padding-top: 60px; }
.detail-top { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: end; }
.detail-poster {
  border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 34px 80px rgba(0,0,0,.6); aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, #131B30, #0B111C);
}
.detail-poster img { width: 100%; height: 100%; object-fit: cover; }
.detail-title-block .kicker { color: var(--ice); }
.detail-title-block h1 {
  font-family: var(--font-d); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 5.6vw, 72px); line-height: .96; letter-spacing: -.015em;
}
.detail-title-block .venue-line { color: var(--muted); margin-top: 12px; font-size: 16px; }
.detail-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 34px; margin-top: 44px; padding-bottom: 80px; }
.detail-main h2 { font-family: var(--font-d); font-size: 21px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .01em; }
.detail-main .desc { color: var(--muted); font-size: 15.5px; white-space: pre-line; max-width: 68ch; }
.side-card {
  background: var(--panel-cam); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 24px; position: sticky; top: calc(var(--nav-h) + 20px);
}
.side-card .row {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--muted);
}
.side-card .row:last-of-type { border-bottom: none; }
.side-card .row svg { color: var(--teal); flex: none; margin-top: 2px; }
.side-card .row b { color: var(--ink); font-weight: 600; display: block; }
.side-card .btn.block { margin-top: 16px; }
.note-17 { font-size: 12px; color: var(--dim); text-align: center; margin-top: 10px; }

/* mekan sayfası başlığı */
.venue-hero { padding: 74px 0 26px; border-bottom: 1px solid var(--line-soft); }
.venue-hero h1 {
  font-family: var(--font-d); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 7vw, 92px); line-height: .95; letter-spacing: -.015em;
}
.venue-hero .v-links { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }

/* ============================================================
   AUTH / FORM / BİLET / MODAL / TOAST
   ============================================================ */
.auth-wrap { max-width: 430px; margin: 60px auto 90px; padding: 0 22px; }
.auth-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: 22px; padding: 34px 30px; }
.auth-card h1 { font-family: var(--font-d); font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.auth-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); font-size: 15px; padding: 12px 14px; font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); }
.field .hint { color: var(--dim); font-size: 12.5px; line-height: 1.5; margin: 2px 0 0; }
.form-err {
  background: rgba(248,113,113,.09); border: 1px solid rgba(248,113,113,.35);
  color: #FCA5A5; border-radius: var(--r-sm); padding: 11px 14px; font-size: 13.5px; margin-bottom: 15px;
}
.form-ok {
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.3);
  color: #A7F3D0; border-radius: var(--r-sm); padding: 11px 14px; font-size: 13.5px; margin-bottom: 15px;
}
/* Google / Apple giriş */
.or-sep {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 16px; color: var(--dim);
  font-family: var(--font-m); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social-row { display: flex; flex-direction: column; gap: 10px; }
.btn.social {
  background: var(--card-2); border: 1px solid var(--line); color: var(--ink);
  box-shadow: none; width: 100%; padding: 12px; font-size: 14.5px; font-weight: 500;
}
.btn.social:hover { border-color: var(--blue); filter: none; background: #171C2C; }
.btn.social:disabled { opacity: .6; }
.btn.social svg { flex: none; }

.auth-alt { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }
.auth-alt a { color: var(--ice); font-weight: 600; }
.link-line { text-align: right; margin: -6px 0 14px; }
.link-line a { font-size: 13px; color: var(--muted); }
.link-line a:hover { color: var(--ice); }

.page-head { padding: 60px 0 8px; }
.page-head h1 {
  font-family: var(--font-d); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 60px); line-height: 1;
}
.page-sub { color: var(--muted); margin-top: 10px; max-width: 60ch; }

.ticket {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 20px 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.ticket + .ticket { margin-top: 14px; }
.ticket .t-main { flex: 1; min-width: 200px; }
.ticket h3 { font-size: 17px; font-family: var(--font-d); }
.ticket .t-meta { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.ticket .t-guests { color: var(--dim); font-size: 12.5px; margin-top: 5px; }
.status {
  font-family: var(--font-m); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 99px; padding: 5px 11px; white-space: nowrap;
}
.status.confirmed { color: var(--ok); border: 1px solid rgba(52,211,153,.35); background: rgba(52,211,153,.07); }
.status.pending { color: var(--warn); border: 1px solid rgba(245,199,107,.35); background: rgba(245,199,107,.07); }
.status.cancelled, .status.rejected { color: var(--err); border: 1px solid rgba(248,113,113,.3); background: rgba(248,113,113,.06); }
.ticket .t-actions { display: flex; gap: 9px; }

.modal-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2, 3, 6, .78); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  width: min(480px, 100%); max-height: 88vh; overflow-y: auto; padding: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
.modal h2 { font-family: var(--font-d); font-size: 21px; margin-bottom: 4px; }
.modal .sub { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.modal .close {
  float: right; background: none; border: 1px solid var(--line); color: var(--muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
}
.modal .close:hover { color: var(--ink); border-color: var(--blue); }
.qr-holder { background: #fff; border-radius: 16px; padding: 18px; width: fit-content; margin: 10px auto; }
.qr-holder img { width: 220px; height: 220px; image-rendering: pixelated; }
.qr-text {
  font-family: var(--font-m); font-size: 20px; letter-spacing: .14em; text-align: center;
  background: var(--card-2); border: 1px dashed var(--line); border-radius: 12px;
  padding: 18px; margin: 10px 0; word-break: break-all; color: var(--ice);
}
.modal .center-note { text-align: center; color: var(--dim); font-size: 12.5px; margin-top: 10px; }

.toasts { position: fixed; bottom: 22px; left: 16px; right: 16px; margin: 0 auto; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: 430px; }
.toast {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 12px; padding: 13px 16px; font-size: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.5);
  animation: toast-in .25s ease;
}
.toast.err { border-left-color: var(--err); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

.skel { border-radius: var(--r-lg); background: linear-gradient(100deg, var(--card) 40%, var(--card-2) 50%, var(--card) 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel.poster-skel { aspect-ratio: 3 / 4; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   APP BANDI + FOOTER
   ============================================================ */
.app-band {
  margin: 90px 0 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(120deg, rgba(47,110,219,.1), rgba(31,169,143,.07)), var(--bg1);
  padding: 54px 0;
}
.app-band .in { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.app-band h2 { font-family: var(--font-d); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3.4vw, 40px); line-height: 1; }
.app-band p { color: var(--muted); margin-top: 8px; max-width: 44ch; }
.appstore-pill {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 18px;
  color: var(--ink); background: var(--hap); transition: border-color .15s, transform .15s;
}
.appstore-pill:hover { border-color: var(--blue); color: var(--ink); transform: translateY(-2px); }
.appstore-pill small { display: block; color: var(--dim); font-size: 10.5px; line-height: 1.1; }
.appstore-pill b { display: block; font-size: 15px; line-height: 1.2; }

footer { background: var(--bg0); padding: 54px 0 0; overflow: hidden; }
/* Kurumsal footer ızgarası */
.foot-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 36px;
  padding-bottom: 44px; border-bottom: 1px solid var(--line-soft);
}
.foot-brand p { color: var(--dim); font-size: 13.5px; margin-top: 14px; max-width: 30ch; }
.foot-col h4 {
  font-family: var(--font-m); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); font-weight: 500; margin-bottom: 14px;
}
.foot-col-links { display: flex; flex-direction: column; gap: 9px; }
.foot-col-links a {
  color: var(--muted); font-size: 13.5px; text-decoration: none; width: fit-content;
  transition: color .15s;
}
.foot-col-links a:hover { color: var(--ink); }

.foot-links-row {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between;
  padding: 22px 0 30px;
}
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: 13.5px; }
.foot-links a:hover { color: var(--ink); }
.foot-copy { color: var(--dim); font-size: 12.5px; }
.giant-mark {
  font-family: var(--font-d); font-weight: 800; text-transform: uppercase;
  font-size: clamp(90px, 17vw, 250px); line-height: .78; letter-spacing: -.02em;
  text-align: center; user-select: none; padding-top: 34px; margin-bottom: -.12em;
  color: transparent; -webkit-text-stroke: 1.5px var(--mark);
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .detail-top { grid-template-columns: 220px 1fr; gap: 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .side-card { position: static; }
}
@media (max-width: 640px) {
  .nav-links a { padding: 7px 7px; font-size: 13px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .nav-in { gap: 8px; }
  .logo { font-size: 19px; }
  .nav-right .btn:not(.ghost) { display: none; }
  .nav-right .btn.ghost { border: none; padding: 8px 10px; }
  .hero { min-height: 78vh; }
  .hero-in { padding: 64px 22px 46px; }
  .wall-row img { width: 150px; height: 150px; }
  .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .poster h3 { font-size: 15.5px; }
  .poster .p-cta { display: none; }
  .detail-top { grid-template-columns: 1fr; }
  .detail-poster { max-width: 250px; }
  .venue-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 20px; }
  .filter-bar { top: calc(var(--nav-h) - 4px); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
}
/* Çok dar telefonlarda (≤400px) logo + iki bağlantı + giriş düğmesi
   menüye sığmıyor ve sayfayı yatay kaydırılabilir yapıyordu. "Program"
   gizlenir — logo zaten ana sayfaya götürüyor. */
@media (max-width: 400px) {
  .nav-links a.nav-home { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .wall-row, .tape-track { transform: none; }
}

/* ---------- tema dugmesi ---------- */
.tema-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); transition: color .18s, border-color .18s, background .18s;
}
.tema-btn:hover { color: var(--ink); border-color: var(--blue); background: var(--ov-1); }
.tema-btn svg { width: 17px; height: 17px; display: block; }
/* Aktif olmayan temanin simgesi gosterilir: koyudayken gunes, aciktayken ay. */
.tema-btn .ay { display: none; }
:root[data-theme="light"] .tema-btn .ay { display: block; }
:root[data-theme="light"] .tema-btn .gunes { display: none; }