/* =========================================================
   Apollo Park Gaziantep — Işık Parkı
   ========================================================= */

:root {
  --bg: #100322;
  --bg-soft: #0a0216;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --line: rgba(199, 214, 238, 0.14);
  --text: #fff;
  --muted: #fff;
  --navy: #0b1f6c;
  --ice: #c7d6ee;
  --lilac: #f3edf6;
  --glow-1: #8fa8ff;
  --glow-2: #c9a2ff;
  --warm: #ffd38a;
  --grad: linear-gradient(100deg, var(--ice) 0%, var(--glow-2) 55%, var(--warm) 100%);
  --radius: 22px;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 113px;   /* Disney Magic Kingdoms başlığıyla aynı yükseklik */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Clarity City", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
/* Başlıklar ve navbar Clarity City, geri kalan her şey Manrope */
h1, h2, h3, .site-header { font-family: var(--font-display); }
h2 { font-size: clamp(2rem, 4.6vw, 52px); text-wrap: balance; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }

.glow {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--glow-2); outline-offset: 3px;
}

/* ---------- Header (tam genişlik, şeffaf) ---------- */
.site-header {
  position: absolute; inset: 0 0 auto; z-index: 50; height: var(--header-h);
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,3,34,.55), rgba(16,3,34,0));   /* site zemin rengi (--bg) */
  transition: opacity .3s;
}
.header-inner {
  height: 100%; display: flex; align-items: center; gap: clamp(24px, 3vw, 48px);
  padding: 0 clamp(16px, 2.5vw, 36px);
}
.brand { flex: none; align-self: flex-start; padding-top: 30px; } /* logo üst kenardan 30px aşağıda */
.brand img { width: auto; height: clamp(56px, 6vw, 86px); } /* Apollo Park logosu; Disney'deki logo boyutunda (~86px yükseklik) */
.main-nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px); margin-right: auto; }
/* ---------- Dil menüsü: Riot Games navbarındaki açık dil kutusu gibi (çentiksiz) ---------- */
.lang-switch { position: relative; }
.lang { border: 0; background: none; color: inherit; cursor: pointer; font-family: inherit; }
.lang-panel { position: absolute; right: 0; top: calc(100% + 12px); width: 150px; padding: 6px 0; border-radius: 2px;
  background: #fcfcfc; box-shadow: 0 4px 16px rgba(16,3,34,.2);   /* Riot'un açık dil kutusu: beyaz, köşesiz, yumuşak gölge (çentik yok) */
  transform-origin: top right; transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: transform .3s var(--ease), opacity .2s, visibility 0s .3s; }
.lang-switch.is-open .lang-panel { transform: none; opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity .2s, visibility 0s; }
.lang-panel button { display: flex; width: 100%; align-items: center; height: 38px; padding: 0 20px; border: 0; border-radius: 0;
  background: none; color: #7e7e7e; font: inherit; font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: left; cursor: pointer;
  transition: color .2s, background .2s; }
.lang-panel button:hover { color: #111; background: #f0f0f0; }
.lang-panel button.is-active { color: #111; }
.lang-panel button i { display: none; }
.nav-lang, .nav-ticket { display: none; }   /* menüdeki Bilet Al yalnızca telefon menüsünde (navbarda zaten buton var) */
@media (max-width: 1080px) {
  /* dil seçimi: menü bağlantılarıyla aynı yazı (20px, 700, büyük harf); düz yazı, seçili dil koyu */
  .nav-lang { display: flex; justify-content: center; gap: 28px; align-self: stretch; margin-top: 36px; }
  .nav-lang button { padding: 0; border: 0; background: none; color: #a39bb5; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 33px; letter-spacing: .08em; cursor: pointer; transition: color .25s; }
  .nav-lang button.is-active { color: #100322; }
}
@media (prefers-reduced-motion: reduce) { .lang-panel, .lang-panel button { transition: none; } }

/* üzerine gelince yazı tek renk lila olur (hareket ve alt çizgi yok) */
.main-nav a {
  position: relative; padding: 10px 0;
  font-size: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: #fff; transition: color .2s;
}
.main-nav a:hover { color: #c9a2ff; }
@media (min-width: 1081px) and (max-width: 1240px) { .main-nav { left: 46%; gap: 20px; } .main-nav a { letter-spacing: .05em; } }   /* uzun menü (Sanal Tur) sağdaki düğmelere çarpmasın */
.header-actions { display: flex; align-items: center; gap: 20px; flex: none; }
/* masaüstünde menü bağlantıları sayfanın tam ortasında; logo solda, dil ve Bilet Al sağda kalır */
@media (min-width: 1081px) {
  .header-inner { position: relative; }
  .main-nav { position: absolute; left: 50%; translate: -50% 0; margin: 0; }
  .header-actions { margin-left: auto; }
}
.lang {   /* çerçevesiz: yalnızca dünya ikonu ve TR */
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px;
  font-size: 16px; font-weight: 800; letter-spacing: .08em;
}
/* Navbar bilet butonu: düz mor kapsül, beyaz yazı */
/* Bilet Al (başlık): Luminocity'nin "Get Tickets" düğmesi gibi — hap biçimi, kalın büyük harf.
   Renk sitenin düğme gradyanı (bannerdaki Bilet Al ile aynı). */
.header-cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 20px; border-radius: 12px;
  color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(90deg, #6f45d6, #4620b8);
  transition: transform .3s var(--ease), filter .3s var(--ease); }
.hero-mcta.hero-btn.has-arrow { height: 60px; margin-top: 26px; padding: 10px 22px 10px 10px; gap: 12px; border-radius: 20px; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; }   /* bilet bölümündeki butonun aynısı */
.hero-mcta .btn-arrow { width: 40px; height: 40px; }
.header-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* hamburger: sağa yaslı kısa · uzun · orta çizgi (gaziantepdepolife.com düzeni), düz beyaz.
   Açılınca 21st.dev "Menu Toggle Icon" gibi SVG çizgi morfu: üst ve alt çizgi kıvrılıp X'in kolları olur, orta çizgi kaybolur */
.menu-toggle { display: none; width: 56px; height: 48px; padding: 0 5px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: flex-end; }
.mt-ico { display: block; width: 51px; height: 51px; }   /* ilk boyutun %10 fazlası: çizgiler ~31px */
.mt-l { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round;
  transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1), stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
.mt-l1 { stroke-dasharray: 26 207; stroke-dashoffset: -34; }   /* kısa, sağda */
.mt-l2 { stroke-dasharray: 60 60; }                             /* uzun */
.mt-l3 { stroke-dasharray: 46 207; stroke-dashoffset: -14; }   /* orta, sağda */
.menu-open .mt-l1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
.menu-open .mt-l2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; }
.menu-open .mt-l3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
@media (prefers-reduced-motion: reduce) { .mt-l { transition: none; } }

/* ---------- Hero (tek video) ---------- */
.hero { /* Luminocity ölçüleri: 700px; 1440px+ ekranda genişliğin %50'si, 1920px+ %47'si; telefonda ekranın %90'ı */
  position: relative; overflow: hidden; background: var(--bg);
  height: 700px;
}
@media (min-width: 1440px) { .hero { height: 50vw; } }
@media (min-width: 1920px) { .hero { height: 47vw; } }
@media (max-width: 479px) { .hero { height: 90vh; height: 90svh; min-height: 780px; } }   /* kısa telefonlarda Bilet Al eklenince sayaç hero dışına taşmasın */
/* alt kenarda videonun ince çizgisi kalmasın: kesirli yükseklikte videonun son piksel sırası sayfa zeminine erimeden görünebiliyor;
   en alttaki 3px her boyutta düz sayfa rengiyle kapatılır */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; z-index: 2; background: var(--bg); pointer-events: none; }
.hero-inner { position: relative; height: 100%; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0 0 -2px; overflow: hidden; background: var(--bg) url("../video/poster.webp") center / cover no-repeat; }
.hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Luminocity gibi: videonun üstünde düz %20 karartma; solda yazı için hafif gölge; yalnızca en alttaki ince şeritte sayfa rengine erime (kesik görünmez) */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,3,34,.72) 0%, rgba(16,3,34,.35) 38%, rgba(16,3,34,0) 65%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 84%, var(--bg) 97%, var(--bg) 100%),
    rgba(0,0,0,.2);
}
/* Hero sağ alt: görselli bilgi kartları, kendi aralarında yatay kayar */
.hero-cards { position: absolute; z-index: 6; right: clamp(16px, 2.5vw, 36px); bottom: 18px; height: clamp(130px, 10.5vw, 180px); /* zemine yakın, sabit konum ve yükseklik; sayaca bağlı değil */ /* sağ kenar navbarla (Bilet Al butonu) aynı hizada */ width: calc(275px * 2 + 12px);
  display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; animation: heroIn .9s .5s var(--ease) both; }
.hero-cards::-webkit-scrollbar { display: none; }
.hero-cards { cursor: grab; user-select: none; -webkit-user-select: none; }
.hero-cards.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } /* sürüklerken serbest, bırakınca karta oturur */
.hc-card { --ac: #fff; position: relative; flex: 0 0 275px; height: 100%; scroll-snap-align: start; overflow: hidden; border-radius: 12px; color: #fff;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.hc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.hc-card:hover .hc-img { transform: scale(1.05); }
/* kartın altında kartına özgü hafif renkli geçiş (mor, kırmızı, turuncu, mavi, yeşil); koyu karartma yok */
.hc-card { --tint: 48, 24, 100; }
.hc-card:nth-child(5n+2) { --tint: 90, 14, 34; }
.hc-card:nth-child(5n+3) { --tint: 104, 44, 10; }
.hc-card:nth-child(5n+4) { --tint: 16, 36, 104; }
.hc-card:nth-child(5n+5) { --tint: 10, 72, 40; }
.hc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--tint), .90) 0%, rgba(var(--tint), .50) 35%, rgba(var(--tint), 0) 70%); } /* alttan yukarı, kartın üst kısmına yakın biter */
.hc-body { text-shadow: 0 1px 10px rgba(10,4,24,.6); }
.hc-body { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; }
.hc-card .ic-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.16); border: 0;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ikon saydam, köşeleri yuvarlatılmış kare içinde */
.hc-card .ic-ico svg { width: 20px; height: 20px; }
.hc-card .pt-text { align-items: flex-start; text-align: left; }
.hc-card .pt-text b { font-size: 1rem; font-weight: 700; }
.hc-card .pt-text small { font-size: 12px; white-space: nowrap; color: #fff; font-weight: 600; }
/* dar ekranda (telefon, tablet): kartlar hero'nun dışına, hemen altına taşınır (main.js); tek kartlık şerit, yana kaydırılır
   ve kendiliğinden birer birer kayar. Hero'daki yazılar ve sayaç yerinde kalır */
@media (max-width: 1200px) {
  .hero-cards { display: none; }
  .hero-cards.is-below { display: flex; position: relative; left: auto; right: auto; bottom: auto; translate: none; z-index: 1;
    width: min(calc(100% - 2 * var(--gutter)), 480px); height: 200px; margin: 24px auto 0; }
  .hero-cards.is-below .hc-card { flex: 0 0 100%; }
  .hero-cards.is-below .hc-body { left: 16px; right: 16px; bottom: 16px; gap: 14px; }
  .hero-cards.is-below .ic-ico { width: 50px; height: 50px; border-radius: 13px; }
  .hero-cards.is-below .ic-ico svg { width: 26px; height: 26px; }
  .hero-cards.is-below .pt-text b { font-size: 1.3rem; }
  .hero-cards.is-below .pt-text small { font-size: 15px; }
}
.hero-content {
  --hero-pb: clamp(40px, 9vw, 130px); --cd-gap: 18px;   /* sayaç hero'nun altına bu boşlukla oturur (kartlarla aynı hiza): hiçbir ekranda dışarı taşmaz */
  position: relative; z-index: 1; align-self: stretch; width: 100%; max-width: var(--container); margin: 0 auto;
  padding: var(--header-h) var(--gutter) var(--hero-pb); text-align: left; /* alt boşluk yazıları biraz yukarı alır: altta asılı sayaca yer kalır */
}
/* büyük ekranda hero genişlikle uzar; sayaç butondan kopmasın diye alt boşluk da onunla büyür */
@media (min-width: 1201px) and (max-width: 1279px) { .hero-content { padding-left: 20px; } }   /* dar masaüstünde sayaç sağdaki kartlara binmesin */
@media (min-width: 1440px) { .hero-content { --cd-gap: max(18px, calc(25vw - 342px)); } }
@media (min-width: 1920px) { .hero-content { --cd-gap: calc(23.5vw - 342px); } }
.hero-title {
  font-size: clamp(1.9rem, 4vw, 3.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
  text-wrap: pretty;   /* son satırda tek kelime kalmaz: telefonda "Hiç görmediğin / bir gece." */
}
.hero-title .nowrap { white-space: nowrap; }
.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: fit-content; max-width: 100%; text-align: center; }
.hero-sub { max-width: 32em; margin-top: clamp(16px, 1.8vw, 24px); color: #fff; font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 500; line-height: 1.55; text-shadow: 0 2px 20px rgba(0,0,0,.45); }
/* Hero bilet butonu: cam mor kapsül, dışta saydam halka
   (gölgeyle çizilir, boyutu değiştirmez), altta pembe ışıma */
.hero-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: 38px; height: 60px; padding: 0 38px; border-radius: 999px;
  color: #fff; isolation: isolate;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em;
  background: radial-gradient(50.2% 67.5% at 50% 50%, #b683f7 0%, #9262e1 25%, #6f42ca 50%, #4b21b4 75%, #3910a8 87.5%, #27009d 100%);
  /* altta ışık yok: dış parlama ve alt kenar ışığı kaldırıldı; yalnızca üstte hafif cam parlaklığı */
  box-shadow: inset 0 0 5px rgba(255,255,255,.35), inset 0 5px 15px rgba(255,255,255,.22);
  transition: box-shadow .35s var(--ease), filter .35s var(--ease);
}
.hero-btn:hover { box-shadow: inset 0 0 7.5px rgba(255,255,255,.6), inset 0 5px 15px rgba(255,255,255,.28); filter: brightness(1.06); }

/* Geri sayım: hero'nun sağ altında beyaz kutu, hep açık; çarpıyla kapanır */
.countdown {
  position: absolute; bottom: calc(var(--cd-gap) - var(--hero-pb)); left: 50%; translate: -50% 0; /* yazıların altında ortalı, hero'nun alt kenarına bağlı: yazılar ortadaki yerinden kaymaz */
  padding: 20px 26px 18px; border-radius: 20px; color: #100322; background: #fff;
  box-shadow: 0 24px 60px -18px rgba(16,3,34,.6);
  animation: heroIn .7s .5s var(--ease) both;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.countdown.is-closed { opacity: 0; transform: translateY(12px) scale(.97); }
.countdown-close {
  position: absolute; top: -10px; right: -10px; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid rgba(16,3,34,.1); border-radius: 50%; background: #fff; color: rgba(16,3,34,.55); cursor: pointer; padding: 0;
  box-shadow: 0 4px 12px -4px rgba(16,3,34,.35);
  transition: background-color .2s, color .2s;
}
.countdown-close svg { width: 13px; height: 13px; }
.countdown-close:hover { background: #f1ebfb; color: #100322; }
.countdown-row { display: flex; align-items: flex-start; gap: 12px; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; }
/* rakam değişince eskisi bulanıklaşıp yukarı çıkar, yenisi aşağıdan gelir */
.countdown-num { position: relative; display: inline-grid; place-items: center; min-width: 2ch; height: 1em;
  font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.countdown-num > span { grid-area: 1 / 1; }
.countdown-num > .is-in { animation: cdIn .25s ease-out both; }
.countdown-num > .is-out { animation: cdOut .25s ease-out both; }
@keyframes cdIn { from { transform: translateY(12px); opacity: 0; filter: blur(4px); } }
@keyframes cdOut { to { transform: translateY(-12px); opacity: 0; filter: blur(4px); } }
.countdown-label { margin-top: 6px; font-size: .78rem; font-weight: 600; color: #100322; }
.countdown-sep { font-size: 1.6rem; font-weight: 800; line-height: 2.6rem; color: #100322; }
@media (prefers-reduced-motion: reduce) { .countdown-num > span { animation: none !important; } }

/* İçerik giriş animasyonu */
/* 1440px üstü: yazı bloğu ekranın solundan hep aynı oranda uzakta durur (1440'taki 140px = 9.72vw) */
@media (min-width: 1441px) {
  .hero-content { max-width: none; padding-left: 9.72vw; padding-right: 9.72vw; }
}
.hero-copy > * { animation: heroIn .9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .3s; }
.hero-copy > :nth-child(5) { animation-delay: .4s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } }


/* ---------- Rota: sanal tur ----------
   Bölüm uzun bir kaydırma alanı; içindeki sahne ekrana sabitlenir. Kaydırdıkça Elif rotada
   yürür: arka plan sıradaki durağa geçerken kamera sahnenin içine doğru ilerler, yanda o
   durağın bilgisi belirir, altta rota çizgisi dolar. */
.tour { position: relative; height: calc(100vh * (var(--stops, 9) + var(--intro, .9) + var(--outro, 0))); }
.tour-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); }
.tour-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.tour.is-3d .tour-3d { opacity: 1; }
/* giriş geçişi: --en 0→1; sahne hafif yakından geri çekilir, başlık aşağıdan yükselir */
.tour-pin { --en: 1; }
.tour-3d { transform: scale(calc(1.12 - var(--en) * .12)); }
.tour-head { --hen: calc(var(--en)); }
.tour .tour-head h2, .tour .tour-head p { opacity: var(--en); translate: 0 calc((1 - var(--en)) * 40px); }
.tour-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(16,3,34,.92) 0%, rgba(16,3,34,.5) 22%, rgba(16,3,34,0) 45%, rgba(16,3,34,0) 62%, rgba(16,3,34,.75) 88%, var(--bg) 100%),
    linear-gradient(to right, rgba(16,3,34,.65) 0%, rgba(16,3,34,0) 45%);
}
.tour-head { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: max-content; max-width: 100%; padding: 0 var(--gutter); text-align: center; will-change: opacity, transform; }
.tour-head p { margin-top: 1rem; color: #fff; }
.js .tour-head::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 220vw; height: 220vh; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgba(16, 3, 34, .72), rgba(16, 3, 34, .52) 60%, rgba(16, 3, 34, .42)); }   /* başlangıçta zemin koyu; başlıkla birlikte kaybolur */
/* Açılış başlığı: ilk satır düz beyaz, "BÜYÜLÜ BİR FANTEZİYE" mor gradyan (.h-violet) */
.tour .tour-head h2 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.tour-head h2 { filter: drop-shadow(0 4px 28px rgba(16,3,34,.85)); }
.tour-head p { color: #fff; font-size: 1.1rem; text-shadow: 0 2px 18px rgba(16,3,34,.9); }
/* durak bilgisi sol altta; kart alttan hizalanır, uzun metin yukarı doğru büyür */
/* Sanal tur kulakçığı: ekranın sağında sabit beyaz daire, içinde siyah 360 simgesi */
.tour-tab { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; transition: scale .25s var(--ease), translate .25s var(--ease), visibility .25s; }
.tour-tab svg { position: relative; display: block; width: 46px; height: 46px; }
/* zemin e-posta alanının (.bulten-form) birebir aynısı: normal ve hover hali, kurallar o bölümde ortak */
.tour-tab.is-away { translate: 0 calc(100% + 24px); visibility: hidden; }
.tour-tab:focus-visible { outline: 3px solid var(--glow-2); outline-offset: 2px; }
.menu-open .tour-tab { display: none; }
@media (max-width: 600px) { .tour-tab { right: 16px; bottom: 16px; } }

/* Kaydırma göstergesi: daire, üstünde yukarı ok, altında aşağı ok.
   Fareyle: rota sahnesinde imlecin yerini alır. Dokunmatikte: rotanın başında ekranın altında görünür */
.tour-scrollhint { position: absolute; left: 50%; bottom: 40px; translate: -50% 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.tour-scrollhint.is-on { opacity: 1; visibility: visible; }
.tour-scrollhint-circle { display: block; width: 42px; height: 42px; box-shadow: inset 0 0 0 2.5px #fff; border-radius: 50%; transition: scale .25s var(--ease); }
.tour-scrollhint.is-moving .tour-scrollhint-circle { scale: 1.12; }
.tour-scrollhint-arrow { display: block; width: 32px; height: 28px; animation: scrollHintDown 1.3s ease-in-out infinite; transition: color .15s; }
.tour-scrollhint-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tour-scrollhint-arrow.is-up { animation-name: scrollHintUp; }
.tour-scrollhint.at-start .tour-scrollhint-arrow.is-up, .tour-scrollhint.at-end .tour-scrollhint-arrow:not(.is-up) { visibility: hidden; }
/* oklar beyaz; kaydırılan yöndeki ok lila yanar */
.tour-scrollhint.go-up .tour-scrollhint-arrow.is-up, .tour-scrollhint.go-down .tour-scrollhint-arrow:not(.is-up) { color: var(--glow-2); }
.tour-scrollhint-arrow.is-up svg { rotate: 180deg; }
@keyframes scrollHintDown { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@keyframes scrollHintUp { 0%, 100% { translate: 0 3px; } 50% { translate: 0 -2px; } }
@media (hover: hover) and (pointer: fine) {
  .tour-scrollhint { position: fixed; left: 0; top: 0; bottom: auto; z-index: 10; translate: calc(var(--cx, 0px) - 21px) calc(var(--cy, 0px) - 50px);   /* dairenin ortası farenin konumunda (21 + ok 24 + boşluk 5) */ transition: opacity .2s var(--ease), visibility .2s; }
  .tour-scrollhint-arrow { width: 27px; height: 24px; }
  .tour-pin.has-scroll-cursor { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .tour-scrollhint-arrow { animation: none; } }
.tour-cards { position: absolute; left: 3.5%; bottom: 8%; width: min(40rem, 60vw); }
.tour-card { position: absolute; left: 0; bottom: 0; width: 100%; transform: none; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility .5s; }
.tour-card.is-on { opacity: 1; visibility: visible; transform: none; }
.tour-card.is-before { transform: translateY(-28px); }
.tour-card.is-after { transform: translateY(28px); }
.tour-card h3 { white-space: nowrap; font-size: clamp(1.5rem, 2.4vw, 2.3rem); font-weight: 800; line-height: 1.3; color: #fff; text-shadow: 0 2px 24px rgba(16,3,34,.6); }
.tour-card p { max-width: 26rem; margin-top: .8rem; color: #fff; font-size: 1.05rem; line-height: 1.65; text-shadow: 0 1px 14px rgba(16,3,34,.7); }
/* Sağ alt: GTA tarzı mini harita. Elif ortada, harita onun yönüne göre döner. */
.tour-mini {
  position: absolute; right: 3.5%; bottom: 6%; width: clamp(210px, 19vw, 290px); aspect-ratio: 4 / 3; z-index: 3;
  border-radius: 16px; transition: opacity .4s;
  box-shadow: 0 0 0 2px #160c36;
}
.tour-mini { padding: 0; border: 0; cursor: pointer; font: inherit; }
.tour-mini:focus, .tour-mini:focus-visible { outline: none; }
.tour-mini-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 12px 10px; text-align: left; font-size: 11.5px; font-weight: 700; line-height: 1.25; color: #fff; background: linear-gradient(to top, rgba(10,6,30,.88), rgba(10,6,30,0)); pointer-events: none; }
.tour.map-open .tour-mini, .tour.map-open .tour-cards, .tour.map-open .tour-head { opacity: 0 !important; pointer-events: none; }
/* Atla: bannerdaki Bilet Al butonuyla aynı; ok, yukarı çık butonundaki çift okun sağa dönmüşü.
   Elif yürürken sol üstte görünür, kapıya varınca ve harita açıkken gizlenir */
/* Rota sayfası üst menüsü: solda ana sayfa düğmesi (404 sayfasındakiyle aynı), logo ortada */
.tour-page .brand { position: absolute; left: 50%; top: 0; translate: -50% 0; }
.tour-page .header-actions { margin-left: auto; }
.nav-home { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px 0 16px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #6f45d6, #4620b8); color: #fff; font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; transition: filter .2s, transform .25s var(--ease); }
.nav-home svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav-home:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav-home:hover svg { transform: translateX(-2px); }
.nav-home:focus-visible { outline: 2px solid #c9a2ff; outline-offset: 3px; }
@media (max-width: 760px) { .nav-home { width: 42px; padding: 0; justify-content: center; } .nav-home span { display: none; } .tour-page .site-header .header-cta { display: none; } }   /* dar ekranda ortadaki logoya çarpmasın: düğmede yalnızca ok, Bilet Al menüde */
/* Rota sayfasında üst menü hep ekranda; harita açıkken kapatma düğmesi görünsün diye gizlenir */
.tour-page .site-header { position: fixed; }
.tour-page:has(.tour.map-open) .site-header { visibility: hidden; }
/* Büyük 3D harita katmanı */
.tour-mapview { position: absolute; inset: 0; z-index: 6; cursor: grab; touch-action: none; }
.tour-mapview[hidden] { display: none; }
/* zemin ve sokaklar kenarlara doğru silinir */
.tour-mapview::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 58% 60% at 50% 52%, rgba(10,2,24,0) 50%, rgba(10,2,24,.75) 80%, #0a0218 100%); }
.tour-mapview:active { cursor: grabbing; }
.mapview-labels { position: absolute; inset: 0; pointer-events: none; }
.mapview-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .3s;
  padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 800;
  background: #c7d6ee; color: #18203f; box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
}
.mapview-label.is-fantasy { background: rgba(70,40,140,.92); color: #fff; }
.mapview-label.is-edge { background: #9b6cff; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.mapview-label.is-neutral { background: rgba(10,2,24,.88); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.mapview-label.is-mark { padding: 3px 9px; font-size: .7rem; font-weight: 700; background: rgba(10,2,24,.78); color: #ffd9e6; border: 1px solid rgba(255,190,214,.45); }
/* Elif'in imleci durak yazılarının altında kalır */
.mapview-label { z-index: 2; }
/* telefonda dikey harita: etiketler küçük, üst üste binmesin */
@media (max-width: 600px) { .tour-mapview .mapview-label { padding: 4px 8px; font-size: 11px; } .tour-mapview .mapview-label.is-mark { padding: 2px 7px; font-size: 10px; } }
.mapview-elif { z-index: 1; position: absolute; left: 0; top: 0; width: 34px; height: 34px; transition: opacity .3s; filter: drop-shadow(0 0 10px rgba(155,108,255,.9)) drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.mapview-elif svg { display: block; width: 100%; height: 100%; }
.mapview-head { position: absolute; left: 5%; top: 7%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; max-width: 70%; }
.mapview-head h3 { width: 100%; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 800; }
.mapview-head span { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: #fff; }
.mapview-head i { width: 12px; height: 12px; border-radius: 50%; }
.lg-n { background: #c7d6ee; } .lg-f { background: #c9a2ff; }
.mapview-close { position: absolute; right: 4%; top: 6%; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #9b6cff; color: #fff; }
.mapview-close:hover { background: #b28cff; }
.mapview-hint { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); margin: 0; white-space: nowrap; font-size: .85rem; color: #fff; pointer-events: none; }
.tour:not(.is-walking) .tour-mini { opacity: 0; }
.tour:not(.is-3d) .tour-mini { display: none; }
.tour-mini { overflow: hidden; background: #05021c; }
/* hafif yatık: harita düzlemi biraz geriye eğilir, perspektifle uzaklaşır.
   Kare tuval 4:3 kutuya taşar; Elif kutunun ortasının biraz altında kalır */
.tour-mini canvas {
  position: absolute; left: -20%; top: -54%; width: 140%; height: 186.67%; display: block;
  transform: perspective(320px) rotateX(34deg); transform-origin: 50% 62%;
}
@media (max-width: 900px) {
  .tour-shade { background: linear-gradient(to bottom, rgba(16,3,34,.85) 0%, rgba(16,3,34,.35) 30%, rgba(16,3,34,0) 50%, rgba(16,3,34,.8) 82%, var(--bg) 100%); }
  .tour-cards { left: var(--gutter); right: var(--gutter); top: auto; bottom: 4%; width: auto; transform: none; }
  .tour-card { top: auto; bottom: 0; transform: none; }
  .tour-card.is-on { transform: none; }
  .tour-card.is-before { transform: translateY(-20px); }
  .tour-card.is-after { transform: translateY(20px); }
  .tour-card { padding: 14px 16px; border-radius: 16px; background: rgba(16,3,34,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .tour-card h3 { font-size: min(1.45rem, 6.2vw); }
  .tour-card p { font-size: .95rem; }
  .tour-mini { width: 150px; border-radius: 12px; right: var(--gutter); top: calc(var(--header-h) + 8px); bottom: auto; }   /* sabit üst menünün altında */
  .tour-mini-cta { font-size: 9.5px; padding: 14px 8px 7px; }
}
/* JS yoksa: duraklar alt alta */
html:not(.js) .tour { height: auto; }
html:not(.js) .tour-pin { position: static; height: auto; overflow: visible; padding: 120px var(--gutter); }
html:not(.js) .tour-shade, html:not(.js) .tour-mini, html:not(.js) .tour-mapview { display: none; }
html:not(.js) .tour-head, html:not(.js) .tour-cards, html:not(.js) .tour-card { position: static; transform: none; width: auto; opacity: 1; visibility: visible; }
html:not(.js) .tour-card { margin-top: 32px; }

/* ---------- Pratik bilgiler: Apollo Park başlığının altında, çerçevesiz — üstte mor ince ikon, altında ortalı başlık/açıklama ---------- */
.promo-facts { list-style: none; padding: 0; margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(36px, 4.5vw, 68px); }
.pf-item { --ac: #b98cff; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff; text-shadow: 0 2px 16px rgba(16,3,34,.75); }
.ic-ico { flex: none; display: grid; place-items: center; color: var(--ac); }
.ic-ico svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pt-text { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pt-text b { font-family: var(--font-display); font-size: clamp(1rem, 1.2vw, 1.15rem); font-weight: 800; line-height: 1.2; }
.pt-text small { font-size: 14px; font-weight: 500; line-height: 1.3; color: #fff; }
@media (max-width: 600px) { .promo-facts { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 22px; } }

/* ---------- Deneyim: kavisli fotoğraf şeridi ---------- */
.exp-head h2, .tour-head h2 { margin: 0 auto; text-align: center; font-size: min(clamp(2rem, 4.6vw, 52px), 5.85vw); text-wrap: nowrap; line-height: 1.3; font-weight: 800; }
/* Büyük başlıklar (Deneyim, Rota): bütün blokta soluk buz mavisi gradyan, sonu mor gradyan */
.exp-head h2, .tour-head h2 {
  width: fit-content;
  color: #fff; -webkit-text-fill-color: #fff;   /* başlığın gri kısmı beyaz; mor vurgu (.h-violet) ayrı kalır */
}
.exp-head h2 { filter: drop-shadow(0 0 22px rgba(155, 108, 255, .55)); }   /* sezonluk başlığındaki mor parıltı */
.h-violet {
  background: linear-gradient(90deg, #dcc4ff 0%, #a77dff 45%, #6a3cf0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Başlık üstündeki cam yıldız: üstünden ışık geçer; üstüne gelince biraz küçülür */
.exp-star { position: relative; display: block; width: clamp(64px, 6.25vw, 90px); aspect-ratio: 1; margin: 0 auto 20px; perspective: 600px; animation: starFloat 7s ease-in-out infinite; }
.exp-star-spin {
  position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: scale .8s var(--ease);
}
.exp-star:hover .exp-star-spin { scale: .86; }
.exp-star img { width: 100%; height: 100%; }
.exp-star-spin::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url("../img/star.webp") center / contain no-repeat; mask: url("../img/star.webp") center / contain no-repeat;
  background: linear-gradient(115deg, transparent 45.5%, rgba(255,255,255,.8) 50%, transparent 54.5%) 100% 0 / 300% 100% no-repeat;
  animation: starShine 3.6s ease-in-out infinite;
}
@keyframes starShine { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
@keyframes starFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.curve {
  position: relative; height: clamp(280px, 32vw, 520px); margin: clamp(48px, 7vw, 88px) 0 0; overflow: hidden; container-type: size;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.curve.dragging { cursor: grabbing; }
.curve-band { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.curve-band.ready { opacity: 1; }
.curve-tile { position: absolute; transform-style: preserve-3d; }
.curve-strip { position: absolute; top: 0; overflow: hidden; background: var(--bg-soft); }
.curve-strip:first-child { border-radius: 10px 0 0 10px; }
.curve-strip:last-child { border-radius: 0 10px 10px 0; }
.curve-strip img { position: absolute; top: 0; max-width: none; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .curve-tile { animation-play-state: paused; } }
.exp-text { max-width: 780px; margin-top: clamp(40px, 6vw, 72px); text-align: center; }
.experience .exp-text, .about .exp-text { max-width: calc(750px + 2 * var(--gutter)); }   /* metnin kendisi en fazla 750 piksel */
.exp-text p { color: var(--muted); font-size: 20px; line-height: 1.6; }
.exp-text p + p { margin-top: 1.2rem; }
/* telefonda: başlıklar 32px (sığmayan satır dengeli ikiye bölünür), alt metinler 16px */
@media (max-width: 600px) { .exp-head h2, .tour-head h2 { font-size: 32px; text-wrap: balance; } .exp-text p, .tour-head p { font-size: 16px; line-height: 1.6; } .exp-text p + p { margin-top: 1rem; } }

/* ---------- Section head ---------- */
.section-head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 84px); }
.section-head p { margin-top: 1.2rem; color: var(--muted); font-size: 1.08rem; }

/* Deneyim'in hemen ardından gelir: iki bölüm arası tek bir boşluk; başlık-metin arası daha sıkı */
.experience:has(+ .journey) { padding-bottom: clamp(24px, 3vw, 48px); }
.experience + .journey { padding-top: clamp(24px, 3vw, 48px); }
.journey .exp-text { margin-top: clamp(20px, 2.6vw, 36px); }
/* Hakkında videosu ile "Apollo Park Gaziantep" başlığı arası: masaüstünde 120px, mobilde 60px */
/* renk sınırı aradaki boşluğun tam ortasında: video zeminden ayrı durur */
#hakkinda { padding-bottom: 120px; }
#konum { padding-top: 120px; }
@media (max-width: 760px) { #hakkinda { padding-bottom: 60px; } #konum { padding-top: 60px; } }

/* Gece gökyüzü: Deneyim, Eşik ve Hakkında bölümlerinin boş yanlarında hafifçe yanıp sönen yıldızlar.
   Yıldızlar 1px'lik iki katmanın gölgeleriyle çizilir; ortadaki metin sütunu maskeyle boş bırakılır. */
.experience, .journey, .about, .visit { isolation: isolate; }
.sky-stars { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 36%, transparent 64%, #000 78%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 36%, transparent 64%, #000 78%, #000 100%); }
.sky-stars i { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }
.sky-stars i:nth-child(1) { box-shadow: 32.38vw 181px 0 0px rgba(200,214,238,0.64), 9.41vw 699px 0 0px rgba(255,255,255,0.76), 8.59vw 502px 0 1px rgba(255,255,255,0.46), 82.69vw 149px 0 0px rgba(200,214,238,0.45), 58.55vw 60px 0 0px rgba(226,214,255,0.45), 41.91vw 649px 0 0px rgba(255,255,255,0.61), 58.16vw 767px 0 0px rgba(200,214,238,0.52), 5.96vw 247px 0 1px rgba(226,214,255,0.66), 46.56vw 1108px 0 0px rgba(255,255,255,0.51), 69.90vw 293px 0 1px rgba(226,214,255,0.61), 72.94vw 346px 0 0px rgba(200,214,238,0.79), 41.81vw 909px 0 1px rgba(226,214,255,0.42), 3.92vw 802px 0 0px rgba(226,214,255,0.69), 69.53vw 713px 0 1px rgba(255,255,255,0.61), 84.00vw 1134px 0 0px rgba(255,255,255,0.56), 73.12vw 372px 0 1px rgba(226,214,255,0.61), 71.66vw 1064px 0 1px rgba(226,214,255,0.51), 16.80vw 141px 0 0px rgba(255,255,255,0.38), 73.84vw 477px 0 1px rgba(255,255,255,0.76), 16.64vw 482px 0 0px rgba(226,214,255,0.48), 86.40vw 334px 0 0px rgba(200,214,238,0.54), 88.42vw 1149px 0 0px rgba(255,255,255,0.42), 23.20vw 280px 0 0px rgba(226,214,255,0.57), 28.19vw 175px 0 0px rgba(255,255,255,0.59), 69.05vw 619px 0 0px rgba(226,214,255,0.63), 89.95vw 936px 0 1px rgba(226,214,255,0.74), 39.90vw 124px 0 0px rgba(255,255,255,0.64), 6.73vw 251px 0 0px rgba(200,214,238,0.42), 5.26vw 0px 0 0px rgba(226,214,255,0.42), 61.37vw 84px 0 1px rgba(255,255,255,0.44), 63.44vw 1147px 0 1px rgba(255,255,255,0.62), 11.54vw 586px 0 1px rgba(226,214,255,0.79), 31.19vw 173px 0 0px rgba(226,214,255,0.69), 82.89vw 194px 0 0px rgba(255,255,255,0.36), 69.01vw 1097px 0 0px rgba(200,214,238,0.69), 86.33vw 835px 0 0px rgba(255,255,255,0.47), 35.57vw 267px 0 0px rgba(200,214,238,0.59), 22.30vw 974px 0 0px rgba(255,255,255,0.79), 81.83vw 888px 0 1px rgba(226,214,255,0.45), 73.10vw 1188px 0 1px rgba(226,214,255,0.71), 19.36vw 726px 0 0px rgba(226,214,255,0.50), 8.05vw 123px 0 0px rgba(255,255,255,0.56), 48.27vw 1182px 0 0px rgba(226,214,255,0.62), 90.92vw 413px 0 0px rgba(226,214,255,0.64), 78.23vw 900px 0 0px rgba(226,214,255,0.57), 78.91vw 399px 0 1px rgba(226,214,255,0.71), 40.14vw 1136px 0 0px rgba(255,255,255,0.68), 2.75vw 709px 0 0px rgba(200,214,238,0.56), 82.65vw 1176px 0 0px rgba(255,255,255,0.65), 54.87vw 157px 0 0px rgba(200,214,238,0.36), 74.95vw 167px 0 0px rgba(255,255,255,0.79), 2.80vw 255px 0 0px rgba(226,214,255,0.58), 54.44vw 1001px 0 0px rgba(226,214,255,0.38), 66.25vw 978px 0 0px rgba(200,214,238,0.58), 15.18vw 613px 0 0px rgba(200,214,238,0.74), 0.39vw 959px 0 1px rgba(200,214,238,0.43), 72.52vw 668px 0 1px rgba(255,255,255,0.50), 88.32vw 68px 0 0px rgba(255,255,255,0.44), 50.77vw 674px 0 0px rgba(226,214,255,0.69), 32.56vw 1168px 0 0px rgba(200,214,238,0.62), 27.72vw 610px 0 0px rgba(200,214,238,0.71), 52.32vw 1051px 0 0px rgba(226,214,255,0.77), 13.71vw 146px 0 0px rgba(200,214,238,0.55), 24.06vw 88px 0 0px rgba(255,255,255,0.65), 93.95vw 772px 0 0px rgba(255,255,255,0.51), 96.75vw 264px 0 1px rgba(226,214,255,0.78), 16.28vw 801px 0 1px rgba(200,214,238,0.45), 40.38vw 506px 0 0px rgba(200,214,238,0.51), 36.60vw 406px 0 0px rgba(226,214,255,0.56), 33.15vw 749px 0 0px rgba(255,255,255,0.58), 98.51vw 946px 0 0px rgba(255,255,255,0.79), 26.56vw 48px 0 0px rgba(255,255,255,0.70), 81.98vw 1020px 0 0px rgba(226,214,255,0.65), 14.94vw 1103px 0 0px rgba(255,255,255,0.61), 27.91vw 960px 0 0px rgba(226,214,255,0.43), 93.83vw 761px 0 0px rgba(200,214,238,0.71), 85.62vw 80px 0 1px rgba(255,255,255,0.74), 33.92vw 664px 0 0px rgba(200,214,238,0.77), 12.92vw 632px 0 0px rgba(255,255,255,0.46), 26.19vw 217px 0 0px rgba(200,214,238,0.77), 75.95vw 348px 0 0px rgba(226,214,255,0.58), 34.70vw 22px 0 0px rgba(255,255,255,0.46), 73.31vw 661px 0 1px rgba(255,255,255,0.44), 93.46vw 128px 0 1px rgba(200,214,238,0.72), 49.50vw 1002px 0 0px rgba(200,214,238,0.53), 21.52vw 275px 0 0px rgba(226,214,255,0.44), 98.94vw 1178px 0 0px rgba(255,255,255,0.73), 62.54vw 1056px 0 0px rgba(255,255,255,0.54), 66.52vw 457px 0 0px rgba(200,214,238,0.58), 24.22vw 352px 0 0px rgba(226,214,255,0.56), 44.58vw 316px 0 0px rgba(255,255,255,0.78), 3.44vw 1059px 0 0px rgba(255,255,255,0.45), 33.53vw 101px 0 0px rgba(255,255,255,0.48), 50.47vw 6px 0 0px rgba(255,255,255,0.47), 39.95vw 50px 0 0px rgba(200,214,238,0.36), 23.28vw 703px 0 0px rgba(200,214,238,0.59), 89.28vw 941px 0 0px rgba(200,214,238,0.62), 98.47vw 179px 0 0px rgba(255,255,255,0.68), 82.49vw 858px 0 1px rgba(200,214,238,0.58), 70.11vw 607px 0 0px rgba(200,214,238,0.76), 58.41vw 1071px 0 0px rgba(255,255,255,0.66), 3.12vw 160px 0 0px rgba(226,214,255,0.51), 83.58vw 670px 0 0px rgba(226,214,255,0.63), 26.38vw 548px 0 0px rgba(200,214,238,0.38), 52.60vw 895px 0 0px rgba(226,214,255,0.56), 23.48vw 908px 0 1px rgba(226,214,255,0.45), 84.55vw 92px 0 0px rgba(255,255,255,0.76), 61.70vw 771px 0 0px rgba(226,214,255,0.38), 25.39vw 892px 0 0px rgba(255,255,255,0.49), 48.24vw 583px 0 0px rgba(200,214,238,0.79); animation: twinkle 5s ease-in-out infinite, drift 38s ease-in-out infinite alternate; }
.sky-stars i:nth-child(2) { box-shadow: 21.77vw 588px 0 1px rgba(226,214,255,0.82), 46.59vw 921px 0 1px rgba(255,255,255,0.95), 31.17vw 103px 0 1px rgba(226,214,255,0.71), 7.65vw 608px 0 1px rgba(226,214,255,0.95), 20.98vw 1135px 0 1px rgba(255,255,255,0.59), 14.17vw 629px 0 0px rgba(200,214,238,0.93), 82.02vw 610px 0 1px rgba(226,214,255,0.90), 23.14vw 1077px 0 0px rgba(255,255,255,0.72), 0.36vw 590px 0 1px rgba(200,214,238,0.70), 14.07vw 413px 0 1px rgba(255,255,255,0.64), 32.45vw 406px 0 0px rgba(200,214,238,0.68), 1.17vw 888px 0 0px rgba(226,214,255,0.61), 39.02vw 1044px 0 1px rgba(226,214,255,0.53), 85.43vw 337px 0 1px rgba(226,214,255,0.52), 63.50vw 179px 0 1px rgba(200,214,238,0.94), 31.56vw 928px 0 1px rgba(255,255,255,0.85), 81.20vw 757px 0 1px rgba(200,214,238,0.91), 20.34vw 97px 0 1px rgba(226,214,255,0.92), 61.49vw 166px 0 1px rgba(255,255,255,0.89), 91.19vw 660px 0 1px rgba(226,214,255,0.58), 28.17vw 307px 0 1px rgba(226,214,255,0.83), 40.62vw 286px 0 1px rgba(226,214,255,0.72), 11.97vw 772px 0 1px rgba(226,214,255,0.53), 55.04vw 544px 0 1px rgba(226,214,255,0.65), 13.96vw 231px 0 1px rgba(200,214,238,0.54), 9.11vw 287px 0 1px rgba(255,255,255,0.62), 88.73vw 900px 0 1px rgba(200,214,238,0.69), 52.42vw 452px 0 0px rgba(226,214,255,0.65), 27.75vw 1161px 0 1px rgba(200,214,238,0.56), 62.96vw 1035px 0 1px rgba(255,255,255,0.60), 38.46vw 775px 0 1px rgba(255,255,255,0.69), 12.72vw 510px 0 1px rgba(200,214,238,0.84), 48.98vw 88px 0 1px rgba(226,214,255,0.92), 97.22vw 298px 0 0px rgba(255,255,255,0.55), 52.24vw 818px 0 1px rgba(200,214,238,0.92), 64.73vw 918px 0 1px rgba(255,255,255,0.71), 0.14vw 151px 0 0px rgba(200,214,238,0.76), 71.50vw 1155px 0 1px rgba(200,214,238,0.78), 43.74vw 917px 0 1px rgba(200,214,238,0.54), 94.35vw 230px 0 1px rgba(255,255,255,0.62), 1.05vw 362px 0 1px rgba(200,214,238,0.71), 83.94vw 291px 0 1px rgba(255,255,255,0.74), 2.93vw 494px 0 0px rgba(255,255,255,0.79), 19.41vw 1062px 0 0px rgba(226,214,255,0.79), 22.78vw 509px 0 1px rgba(255,255,255,0.67); animation: twinkle 3.6s ease-in-out 1.4s infinite, drift 26s ease-in-out -9s infinite alternate-reverse; }
/* Footer: yıldızlar biraz daha sık; orta sütun tamamen boş bırakılmaz, hafifçe yıldızlı (ek iki katman, orta ağırlıklı) */
.site-footer .sky-stars { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, rgba(0,0,0,.45) 38%, rgba(0,0,0,.45) 62%, #000 78%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 22%, rgba(0,0,0,.45) 38%, rgba(0,0,0,.45) 62%, #000 78%, #000 100%); }
.site-footer .sky-stars i:nth-child(3) { box-shadow: 31.24vw 428px 0 0px rgba(200,214,238,0.69), 77.42vw 486px 0 0px rgba(226,214,255,0.42), 51.54vw 3px 0 1px rgba(226,214,255,0.52), 30.12vw 237px 0 0px rgba(226,214,255,0.37), 77.86vw 416px 0 0px rgba(255,255,255,0.73), 52.25vw 118px 0 0px rgba(200,214,238,0.36), 63.50vw 90px 0 1px rgba(255,255,255,0.53), 52.91vw 351px 0 0px rgba(255,255,255,0.42), 24.08vw 240px 0 1px rgba(255,255,255,0.43), 76.25vw 72px 0 1px rgba(200,214,238,0.57), 43.73vw 349px 0 0px rgba(226,214,255,0.51), 42.45vw 462px 0 0px rgba(200,214,238,0.75), 43.65vw 27px 0 0px rgba(255,255,255,0.64), 77.60vw 507px 0 1px rgba(255,255,255,0.57), 63.90vw 227px 0 0px rgba(200,214,238,0.57), 56.87vw 185px 0 0px rgba(226,214,255,0.49), 73.92vw 354px 0 0px rgba(200,214,238,0.45), 31.45vw 178px 0 0px rgba(200,214,238,0.41), 24.06vw 532px 0 0px rgba(255,255,255,0.51), 77.39vw 14px 0 0px rgba(200,214,238,0.55), 59.35vw 251px 0 1px rgba(255,255,255,0.53), 44.82vw 494px 0 1px rgba(200,214,238,0.37), 36.45vw 296px 0 1px rgba(255,255,255,0.42), 25.89vw 346px 0 0px rgba(255,255,255,0.74), 63.77vw 490px 0 1px rgba(255,255,255,0.73), 51.44vw 490px 0 1px rgba(255,255,255,0.71), 42.48vw 157px 0 0px rgba(226,214,255,0.66), 49.13vw 488px 0 0px rgba(226,214,255,0.59), 29.80vw 10px 0 0px rgba(255,255,255,0.73), 23.32vw 333px 0 0px rgba(226,214,255,0.52), 60.26vw 141px 0 1px rgba(255,255,255,0.51), 32.45vw 457px 0 0px rgba(255,255,255,0.70), 58.70vw 129px 0 0px rgba(200,214,238,0.51), 71.73vw 170px 0 1px rgba(200,214,238,0.43), 63.68vw 47px 0 0px rgba(226,214,255,0.70), 65.36vw 8px 0 0px rgba(255,255,255,0.51), 53.75vw 238px 0 0px rgba(226,214,255,0.59), 63.77vw 250px 0 0px rgba(200,214,238,0.64), 77.47vw 515px 0 0px rgba(200,214,238,0.73), 27.52vw 61px 0 0px rgba(226,214,255,0.48), 50.94vw 298px 0 0px rgba(226,214,255,0.65), 32.61vw 333px 0 0px rgba(200,214,238,0.38), 58.85vw 430px 0 1px rgba(255,255,255,0.61), 57.09vw 458px 0 0px rgba(255,255,255,0.62), 61.52vw 482px 0 0px rgba(200,214,238,0.70); animation: twinkle 6s ease-in-out infinite, drift 42s ease-in-out infinite alternate; animation-delay: -2s, -9s; }
.site-footer .sky-stars i:nth-child(4) { box-shadow: 7.04vw 25px 0 1px rgba(200,214,238,0.37), 27.56vw 414px 0 0px rgba(200,214,238,0.67), 39.89vw 335px 0 0px rgba(226,214,255,0.72), 65.43vw 38px 0 0px rgba(200,214,238,0.50), 60.46vw 221px 0 0px rgba(226,214,255,0.60), 61.95vw 268px 0 1px rgba(200,214,238,0.50), 61.47vw 536px 0 0px rgba(255,255,255,0.41), 20.20vw 400px 0 0px rgba(255,255,255,0.57), 7.95vw 309px 0 0px rgba(200,214,238,0.65), 46.23vw 110px 0 0px rgba(255,255,255,0.63), 20.58vw 343px 0 0px rgba(226,214,255,0.62), 26.09vw 29px 0 1px rgba(200,214,238,0.73), 96.72vw 519px 0 1px rgba(226,214,255,0.63), 71.62vw 160px 0 0px rgba(200,214,238,0.51), 46.07vw 287px 0 0px rgba(226,214,255,0.50), 27.24vw 192px 0 0px rgba(255,255,255,0.36), 81.04vw 376px 0 1px rgba(226,214,255,0.58), 39.82vw 451px 0 0px rgba(255,255,255,0.75), 94.16vw 151px 0 1px rgba(200,214,238,0.43), 37.06vw 3px 0 0px rgba(255,255,255,0.58), 91.20vw 442px 0 0px rgba(255,255,255,0.47), 41.71vw 250px 0 1px rgba(226,214,255,0.72), 88.36vw 18px 0 0px rgba(255,255,255,0.38), 89.97vw 192px 0 1px rgba(200,214,238,0.68), 60.65vw 503px 0 0px rgba(226,214,255,0.49), 26.97vw 361px 0 1px rgba(226,214,255,0.60), 89.01vw 72px 0 0px rgba(255,255,255,0.55), 67.80vw 194px 0 0px rgba(200,214,238,0.37), 3.71vw 506px 0 1px rgba(226,214,255,0.51), 3.24vw 238px 0 0px rgba(226,214,255,0.45), 19.90vw 198px 0 0px rgba(226,214,255,0.52), 32.46vw 224px 0 1px rgba(255,255,255,0.64), 60.67vw 178px 0 1px rgba(200,214,238,0.55), 16.20vw 452px 0 0px rgba(200,214,238,0.62), 21.73vw 546px 0 0px rgba(255,255,255,0.74), 39.01vw 475px 0 0px rgba(200,214,238,0.35), 35.19vw 271px 0 0px rgba(200,214,238,0.61), 16.15vw 549px 0 0px rgba(200,214,238,0.43), 99.81vw 292px 0 0px rgba(226,214,255,0.66), 95.50vw 84px 0 1px rgba(226,214,255,0.42); animation: twinkle 4.4s ease-in-out infinite, drift 34s ease-in-out infinite alternate-reverse; animation-delay: -1s, -5s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes drift { from { translate: -14px 0; } to { translate: 14px -22px; } } /* yıldızlar çok yavaş süzülür */
@media (max-width: 700px) { .sky-stars { -webkit-mask-image: linear-gradient(#000, #000); mask-image: none; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .sky-stars i { animation: none; } }
/* kaydırma sürerken süs animasyonları durur (main.js → is-scrolling): yıldız katmanları her karede maskesiyle yeniden çizilmez,
   kaydırma akıcı kalır; çok yavaş hareket ettikleri için duraklama fark edilmez, kaydırma bitince kaldıkları yerden sürer */
.is-scrolling .sky-stars i, .is-scrolling .exp-star, .is-scrolling .exp-star-spin::after { animation-play-state: paused; }
.journey { padding-bottom: clamp(40px, 5vw, 72px); }
/* ---------- Journey: dikey fotoğraf kartları. Şerit kendiliğinden akar, elle sürüklenir;
   kart üstünde 3D eğim, imleci izleyen kenar ışığı ---------- */
.journey { overflow: hidden; }
.journey-track {
  list-style: none; margin: clamp(20px, 3vw, 44px) 0 0; padding: 40px 0 64px; overflow: hidden;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.journey-track.dragging { cursor: grabbing; }
.jt-row { list-style: none; margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); /* ilk kart içerikle hizalı başlar */ display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content; will-change: transform; }
.journey-track li {
  --rx: 0deg; --ry: 0deg; --mx: -999px; --my: -999px; --lift: 0px;
  position: relative; flex: 0 0 clamp(247px, 22.8vw, 314px); aspect-ratio: 5 / 6; list-style: none;
  border-radius: 22%; /* gölge/geçiş için yaklaşık; asıl biçim aşağıdaki squircle maskesi */ isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform .5s var(--ease);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.25));
}
.journey-track li.is-tilt { --lift: -12px; transition: transform .12s linear; }
/* referanstaki yumuşak kutu: kenarları neredeyse düz, köşeleri sürekli eğriyle dönen süperelips (squircle) */
.jt-media { position: absolute; inset: 0; overflow: hidden; z-index: -1;
  -webkit-mask: url("../img/squircle.svg?v=2") center / 100% 100% no-repeat; mask: url("../img/squircle.svg?v=2") center / 100% 100% no-repeat; }
.jt-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); pointer-events: none; }
.journey-track li.is-tilt .jt-media img { scale: 1.06; }
.jt-media::before { /* hover: alttan hafif mor; metin daha okunur */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
  background: linear-gradient(0deg, rgba(50,20,120,.6) 0%, rgba(50,20,120,.28) 32%, transparent 58%);
}
.journey-track li.is-tilt .jt-media::before { opacity: 1; }
.jt-media::after { /* alt yarı koyu mor cama erir */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, transparent 38%, rgba(30,10,70,.55) 62%, rgba(20,6,48,.92) 100%);
}
.journey-track li::before { /* imleci izleyen kenar ışığı: squircle'ın 1.5px'lik çerçevesi */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(220,196,255,.95), rgba(167,125,255,.45) 35%, transparent 70%);
  -webkit-mask: url("../img/squircle.svg?v=2") center / 100% 100% no-repeat, url("../img/squircle.svg?v=2") center / calc(100% - 3px) calc(100% - 3px) no-repeat;
  -webkit-mask-composite: xor;
  mask: url("../img/squircle.svg?v=2") center / 100% 100% no-repeat exclude, url("../img/squircle.svg?v=2") center / calc(100% - 3px) calc(100% - 3px) no-repeat;
}
.jt-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 34px 40px; transform: translateZ(30px); }
.journey-track li h3 { margin: 0 0 .45rem; font-size: clamp(1.2rem, 1.6vw, 1.5rem); font-weight: 700; color: #fff; }
.journey-track li p { color: #fff; font-size: .9rem; line-height: 1.45; }

/* ---------- Visit ---------- */

/* ---------- Community ---------- */

/* ---------- Promo: ışıklı tepe sahnesi, ortada başlık, etrafta hafif hareketli heykeller ---------- */
/* yükseklik = sahne + başlık için gökyüzü payı */
/* --sw: sahne genişliği, --sh: sahne yüksekliği, --pt: başlık için üstte ek gökyüzü payı */
/* Kaydırmaya bağlı giriş: banner ekrana sabitlenir, önce sahne, sonra yazılar gelir, kısa bir süre sabit kalır */
/* Duyuru pop-up'ı: görsel veya video kendi boyutunda, çerçevesiz; yalnızca ekrandan büyükse sığacak kadar küçülür */
.popup { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(16, 3, 34, .82); animation: popupIn .3s var(--ease); }
.popup[hidden] { display: none; }
.popup:focus { outline: none; }
.popup-open { overflow: hidden; }
.popup-box { position: relative; width: fit-content; }
.popup-track { cursor: grab; touch-action: pan-y; }
.popup-slide { display: none; }
.popup-slide.is-on { display: block; }
.popup-slide img, .popup-slide video { display: block; width: auto; height: auto; max-width: calc(100vw - 24px); max-height: calc(100vh - 88px); max-height: calc(100svh - 88px); user-select: none; -webkit-user-drag: none; }
.popup-close { position: absolute; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--bg); cursor: pointer; }
.popup-close { top: 10px; right: 10px; width: 32px; height: 32px; color: #fff; background: rgba(16, 3, 34, .55); }   /* yarı saydam daire, çerçevesiz */
.popup-close svg { position: relative; width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgba(10, 3, 24, .5)); }
.popup-close:focus-visible { outline: 3px solid var(--glow-2); outline-offset: 2px; }
.popup-dots { position: absolute; left: 0; right: 0; top: calc(100% + 17px); display: flex; justify-content: center; gap: 6px; }
.popup-dots i { position: relative; cursor: pointer; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.popup-dots i::before { content: ""; position: absolute; inset: -10px -3px; }   /* küçük noktaya kolay tıklama */
.popup-dots i.is-on { background: #fff; }
@keyframes popupIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .popup { animation: none; } }

/* Bilet fiyatları: koyu mor geçişli kart; üstte ad ve rozet, altta düğme ve küçük not. Ölçüler kart genişliğine bağlı (cqw) */
.tickets { padding-top: clamp(8px, 1vw, 12px); padding-bottom: clamp(70px, 9vw, 120px); isolation: isolate; }
.tk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 1320px; margin-top: clamp(36px, 5vw, 64px); list-style: none; }
.tk { --mx: -999px; --my: -999px; container-type: inline-size; display: grid; }
.tk-in { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: max(32px, 10cqw) 8cqw max(32px, 10cqw); border-radius: 20px; color: #fff; font-family: var(--font); text-align: left;
  background: linear-gradient(180deg, rgba(155, 108, 255, .27), rgba(155, 108, 255, 0) 60%), #100826; }   /* üstte Sanal Tur moru (#9b6cff), altta aynı tonda koyu mor */
.tk-in::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;   /* her yanda eşit ince kenar; üstüne imleci izleyen ışık */
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(220, 196, 255, .95), rgba(167, 125, 255, .45) 35%, transparent 70%), rgba(155, 108, 255, .28);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tk-in::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);   /* üzerine gelince düz üstten mor ışık */
  background: linear-gradient(180deg, rgba(155, 108, 255, .4), transparent 46%); }
@media (hover: hover) { .tk-in:hover::after { opacity: 1; } }
.tk-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
.tk-name { margin: 0; font: inherit; font-size: min(28px, 9cqw); font-weight: 600; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: #fff; }
html[lang="en"] .tk-name { font-size: min(28px, 8cqw); }   /* uzun İngilizce adlar tek satırda kalsın */
.tk-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1; color: #fff; letter-spacing: .02em; white-space: nowrap; background: linear-gradient(90deg, #a77dff, #6a3cf0); }
.tk-priceline { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; margin: max(30px, 10cqw) 0 0; }
.tk-amount { flex: none; display: flex; justify-content: flex-start; align-items: baseline; gap: 1.2cqw; margin: 0; font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: normal; }
.tk-amount b { font-weight: inherit; color: #fff; }
.tk-cur { line-height: 1; color: #fff; }
.tk-day { min-width: 0; margin: 0; color: #fff; font-family: var(--font); font-size: max(12px, min(16px, 4.3cqw)); font-weight: 400; line-height: 1.25; }
.tk-desc { display: grid; gap: 14px; margin: max(28px, 9cqw) 0 0; padding: 0; list-style: none; font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.4; color: #fff; }
.tk-desc li { position: relative; min-height: 22px; padding-left: 30px; }
.tk-desc li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 66% no-repeat; }
.tk-cta { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 9px; flex: none; width: 100%; height: 48px; padding: 8px 24px; margin-top: max(26px, 8.5cqw); border-radius: 6px; color: #100322; font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1;
  background: linear-gradient(180deg, #e4e4e6, #fff 22%, #fff); transition: color .3s var(--ease); }
.tk-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .3s var(--ease);   /* üzerine gelince navbardaki Bilet Al'ın gradienti */
  background: linear-gradient(90deg, #6f45d6, #4620b8); }
.tk-cta:hover, .tk-cta:focus-visible { color: #fff; }
.tk-cta:hover::before, .tk-cta:focus-visible::before { opacity: 1; }
.tk-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Cuma–Pazar: Bilet Al altında kutu; gün solda, fiyat sağda */
.tk-more { width: 100%; margin: max(14px, 4cqw) 0 0; padding: 12px 16px; border-radius: 6px; background: rgba(155, 108, 255, .2); font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1.4; color: #fff; text-align: center; }
.tk-more span { display: block; }
.tk-more-row + .tk-more-row { margin-top: 12px; }
.tk-more .tk-more-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tk-more-price { flex: none; font-size: 16px; font-weight: 600; line-height: 1.2; }
@media (max-width: 900px) {
  .tk-list { grid-template-columns: minmax(0, 462px); justify-content: center; gap: 24px; }
}
.tk-note { max-width: 1320px; margin-top: clamp(36px, 4vw, 56px); text-align: center; font-size: 14px; opacity: .78; }
@media (max-width: 900px) {
  .tk-list { grid-template-columns: minmax(0, 462px); justify-content: center; gap: 24px; }
}

/* Sezonluk giriş kartları: ortada rozet ve başlık; solda metin, sağda eğik duran iki parlak kart; altta bilet tipi iki kart */
.sezon { padding-top: clamp(16px, 2vw, 32px); padding-bottom: clamp(70px, 9vw, 120px); isolation: isolate; overflow: hidden; }
.sezon::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask: linear-gradient(transparent, #000 24%, #000 76%, transparent);   /* bölüm sınırında renk kesilmesin */
  background: radial-gradient(46% 52% at 0 62%, rgba(111, 69, 214, .26), transparent), radial-gradient(40% 46% at 100% 38%, rgba(111, 69, 214, .2), transparent); }
.sz-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.sz-pill { padding: 9px 18px; border-radius: 999px; background: linear-gradient(90deg, #6f45d6, #4620b8); box-shadow: 0 0 24px rgba(155, 108, 255, .55); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.sz-head h2 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 52px); font-weight: 800; line-height: 1.15; filter: drop-shadow(0 0 22px rgba(155, 108, 255, .55)); }
.sz-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: center; max-width: 1320px; margin-top: clamp(52px, 6.4vw, 92px); }
.sz-text { min-width: 0; color: #fff; }
.sz-p { font-size: 18px; font-weight: 400; line-height: 1.6; color: #fff; }
.sz-p + .sz-p { margin-top: 16px; }
.sz-cards { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 1 / .92; margin: 0; padding: 0; list-style: none; }
.szc { position: absolute; width: 48cqw; aspect-ratio: 5 / 7; padding: 1cqw; border-radius: 4.2cqw; box-shadow: 0 24px 60px rgba(6, 2, 13, .65); transition: transform .4s var(--ease); }
.szc-1 { left: 1cqw; bottom: 2cqw; z-index: 2; transform: rotate(-7deg); background: conic-gradient(from 210deg, #ffe39f, #ff9a3d, #ff5f6d, #ffd27a, #8ff0cf, #ffe39f); }
.szc-2 { right: 1cqw; top: 2cqw; transform: rotate(9deg); background: conic-gradient(from 30deg, #c8f6ff, #4f8cff, #2dd4bf, #dccdff, #7fe9ff, #c8f6ff); }
.szc:hover { transform: rotate(0deg) translateY(-6px); z-index: 3; }
.szc-in { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow: hidden; padding: 4.4cqw 2.6cqw; text-align: center; border-radius: 3.4cqw; color: #fff; }
.szc-1 .szc-in { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='white'%3E%3Cpath fill-opacity='.09' d='M0 0h60L0 60z'/%3E%3Cpath fill-opacity='.05' d='M60 0l60 60H60z'/%3E%3Cpath fill-opacity='.07' d='M0 60h60v60z'/%3E%3Cpath fill-opacity='.11' d='M120 60v60H60z'/%3E%3Cpath fill-opacity='.04' d='M60 60l30-30 30 30z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 14cqw 14cqw, linear-gradient(155deg, #e0920f, #99600b 52%, #33220a); }
.szc-2 .szc-in { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='white'%3E%3Cpath fill-opacity='.09' d='M0 0h60L0 60z'/%3E%3Cpath fill-opacity='.05' d='M60 0l60 60H60z'/%3E%3Cpath fill-opacity='.07' d='M0 60h60v60z'/%3E%3Cpath fill-opacity='.11' d='M120 60v60H60z'/%3E%3Cpath fill-opacity='.04' d='M60 60l30-30 30 30z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 14cqw 14cqw, linear-gradient(155deg, #2470e0, #0f6079 52%, #071d33); }
.szc-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-70%); transition: transform .9s var(--ease);   /* üzerine gelince kartın üstünden geçen parlama */
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .28) 48%, transparent 62%); }
.szc:hover .szc-in::after { transform: translateX(70%); }
.szc-chip { margin-top: 2cqw; padding: .9cqw 1.8cqw; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #150822; font-family: var(--font); font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: .03em; white-space: nowrap; }
.szc-icon { display: block; width: 13cqw; height: 13cqw; color: #fff; }
.szc-icon svg { display: block; width: 100%; height: 100%; }
.szc-name { margin-top: 3.4cqw; font-family: var(--font-display); font-size: min(36px, 8.6cqw); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
@media (max-width: 900px) {
  .sz-grid { grid-template-columns: minmax(0, 1fr); }
  .sz-cards { max-width: 480px; margin: 0 auto; }
}
html[lang="en"] .szc-name { font-size: min(36px, 6.3cqw); }   /* uzun İngilizce adlar kart içinde kalsın */
.sezon .tk-list { margin-top: clamp(48px, 6vw, 80px); }
.sezon .tk-desc { font-size: 14px; }
.sezon .tk-desc li { min-height: 0; padding-left: 16px; }
.sezon .tk-desc li::before { top: .55em; width: 5px; height: 5px; background: #fff; box-shadow: none; }   /* tik yerine nokta */
@media (min-width: 901px) { .sezon .tk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; } }
@media (prefers-reduced-motion: reduce) { .szc, .szc-in::after { transition: none; } .szc-1:hover { transform: rotate(-7deg); } .szc-2:hover { transform: rotate(9deg); } .szc:hover .szc-in::after { transform: translateX(-70%); } }

/* Ziyaret saatleri: sezonluk bölümüyle aynı düzen; sağda bilet kartı zemininde saat listesi */
.about { padding-bottom: clamp(36px, 4.6vw, 64px); }   /* altındaki ziyaret saatlerine yakın dursun */
.saatler::before { display: none; }   /* yan mor ışıklar yok */
.saatler .sz-grid { margin-top: 0; }
.saatler .sz-head h2 { font-size: clamp(1.7rem, 3vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }   /* Konum başlığıyla aynı */
.saatler .tk-in::after { display: none; }   /* tabloda hover ışığı yok */
.saatler .tk-in::before { background: rgba(155, 108, 255, .28); }
.saatler .sz-text .sz-head { align-items: flex-start; margin-bottom: clamp(20px, 2.4vw, 32px); text-align: left; }
.sh-list { width: 100%; margin: 0; padding: 0; list-style: none; font-family: var(--font); font-size: 18px; font-weight: 500; line-height: 1.4; color: #fff; }
.sh-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; }
.sh-list li:first-child { padding-top: 0; }
.sh-list li:last-child { padding-bottom: 0; }
.sh-list .sh-head { margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid rgba(196, 187, 214, .4); }   /* başlık altında ayırıcı çizgi */
.sh-head span:last-child { text-align: right; }
.sh-time { flex: none; }

@media (max-width: 900px) {   /* tek sütunda metinler ortalı */
  .sz-text { text-align: center; }
  .saatler .sz-text .sz-head { align-items: center; text-align: center; }
}

.js .promo-scroll { height: 220vh; height: 220svh; }
.promo {
  --sw: max(100vw, 1100px); --sh: calc(var(--sw) * 1343 / 2400);
  position: sticky; top: 0; overflow: hidden; height: 100vh; height: 100svh; min-height: 560px; background: #0a0c22; /* görselin gökyüzü rengi */
}
/* sahne görselin oranında; heykeller yüzdeyle tepeye oturur. Dar ekranda yanlardan kırpılır */
.promo-stage {
  position: absolute; left: 50%; bottom: 0; width: var(--sw); height: var(--sh); /* görsel biraz aşağıda: üstte daha çok gökyüzü; banner yakından geri çekilerek belirir */
  transform: translateX(-50%) translateY(13%); transform-origin: 50% 50%;
}
.promo-stage::after { /* üstte sayfa rengine erime */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: none;
}
.promo-bg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% * 1763 / 1343); object-fit: cover; } /* uzun görsel: alttaki 1343px'lik sahne alana oturur, eklenen gökyüzü yukarı uzanır */
/* banner'ın alt kenarı: zemin renginde kase biçimli çimenlik, sonraki bölüme bağlar */
.promo-grass { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(140px, 19vw, 300px); z-index: 1; pointer-events: none; }
/* çimenin ortasından bileti kaldıran çocuk: belden hafifçe sallanır */
.promo-kid { position: absolute; left: 50%; bottom: -3%; width: 21%; pointer-events: none;
  translate: -43.7% 0; }
.promo-kid img { display: block; width: 100%; height: auto; transform-origin: 44% 100%; animation: kidSway 3.2s ease-in-out infinite; }
@keyframes kidSway { 0%, 100% { rotate: 0deg; } 30% { rotate: -2.2deg; } 70% { rotate: 1.8deg; } }
@media (prefers-reduced-motion: reduce) { .promo-kid img { animation: none; } }
/* uçan heykeller: sahnede süzülerek dolaşır */
.pf-fly { position: absolute; height: auto; filter: drop-shadow(0 0 14px rgba(201,162,255,.55)); }
.pf-fly.is-a { left: 18%; top: 37%; width: 7%; animation: flyA 12s ease-in-out infinite; }
.pf-fly.is-b { left: 74%; top: 31%; width: 8%; animation: flyB 15s ease-in-out infinite; }
@keyframes flyA {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  20% { transform: translate(40%, -30%) rotate(4deg) scaleX(.85); }
  45% { transform: translate(110%, 10%) rotate(-3deg); }
  70% { transform: translate(60%, 35%) rotate(6deg) scaleX(.85); }
}
@keyframes flyB {
  0%, 100% { transform: translate(0, 0) rotate(4deg); }
  30% { transform: translate(-70%, 25%) rotate(-4deg); }
  60% { transform: translate(-30%, -30%) rotate(6deg); }
  80% { transform: translate(20%, 10%) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .pf-fly { animation: none; } }
.promo-content { /* tepenin üstündeki gökyüzünde */
  position: absolute; z-index: 2; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(72px, 11vh, 125px) var(--gutter) 0;
}
@media (max-width: 600px) and (max-height: 720px) { .promo-content { padding-top: 40px; } .promo-facts { margin-top: 12px; gap: 8px 16px; } .pf-item { gap: 4px; } .pf-item .ic-ico svg { width: 24px; height: 24px; } .promo-actions { margin-top: 16px; } }   /* kısa telefonda Bilet Al ekrana sığsın: simgeler küçülür */
.promo-content > * { margin-left: auto; margin-right: auto; }
.promo-title { /* tek satır, düz beyaz */
  width: fit-content; font-family: var(--font-display); font-size: min(52px, 8vw); font-weight: 800; line-height: 1.3;
  text-wrap: nowrap; /* tek satır: dar ekranda yazı küçülür, taşmaz */ letter-spacing: -0.02em;
  color: #fff;
  filter: drop-shadow(0 4px 28px rgba(16,3,34,.85));
}

.promo-actions { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.promo-actions .hero-btn { margin-top: 0; } /* herodaki camlı mor bilet butonu */
/* Riot'taki gibi: solda koyu yuvarlak içinde ok, ardından yazı */
.hero-btn.has-arrow { padding: 0 30px 0 7px; gap: 14px; }
.btn-arrow {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: #0a0614; color: #f0f0f0; filter: drop-shadow(0 4px 3px rgba(10,10,10,.4));
  transition: transform .25s var(--ease);
}
.btn-arrow svg { transition: transform .25s var(--ease); }
.hero-btn.has-arrow:hover .btn-arrow svg { transform: translateX(3px); }
/* Apollo Park bannerındaki Bilet Al: Riot'un hero butonu ölçüleri (72px yükseklik, 24px köşe, 12px iç boşluk, 48px ikon, ~31px yazı) */
.promo-actions .hero-btn.has-arrow { height: 72px; padding: 12px 28px 12px 12px; gap: 16px; border-radius: 24px; font-size: 1.94rem; font-weight: 800; letter-spacing: -0.03em; }
.promo-actions .hero-btn.has-arrow .btn-arrow { width: 48px; height: 48px; }
.promo-actions .hero-btn.has-arrow .btn-arrow svg { width: 24px; height: 24px; }
@media (max-width: 600px) { .promo-actions .hero-btn.has-arrow { height: 60px; padding: 10px 22px 10px 10px; gap: 12px; border-radius: 20px; font-size: 1.45rem; } .promo-actions .hero-btn.has-arrow .btn-arrow { width: 40px; height: 40px; } }

/* ---------- Tickets ---------- */

/* ---------- FAQ ---------- */
/* SSS: referanstaki açık panel — beyazdan griye degrade panel, ortalı başlık, açık gri hap satırlar,
   solda küçük numara rozeti, sağda parlak siyah daire içinde +; açık satır beyaz ve gökkuşağı çerçeveli, × çerçeveli dairede */
/* açık tema bölüm: üst kenar kase biçimli yay, alt kenar ortası aşağı taşan kubbe.
   Yaylar, sayfa renginde iki geniş elipsin bölüme taşmasıyla çizilir. */
.faq { position: relative; color: #111; /* SSS zemini: başlıklardaki mor gradyan, çapraz; kenarları düz */
  background: linear-gradient(150deg, #d0b4ff 0%, #bf9cff 26%, #a77dff 52%, #8c5df6 76%, #6a3cf0 100%);   /* en açık ton (#dcc4ff) çıkarıldı */
  padding: clamp(70px, 8vw, 120px) 0; }
/* E-bülten şeridi: tam genişlik, 375px. Sol ve sağ illüstrasyon ayrı görseller; kenarlara yaslanır, ortaya en az 330px
   uzak durur (geniş ekranda daha da açılır). Ortada yıldızlı zemin. */
.bulten { position: relative; height: 375px; overflow: hidden; display: grid; place-items: center; text-align: center;
  background: url("../img/bulten/bulten-yildiz.webp?v=4") center / cover no-repeat, #170730; }
.bulten-side { position: absolute; top: 0; height: 100%; width: auto; max-width: none; pointer-events: none; }
.bulten-side.is-left { left: min(0px, calc(50% - 803px)); }
.bulten-side.is-right { right: min(0px, calc(50% - 826px)); }
.bulten-copy { position: relative; z-index: 1; max-width: 660px; padding: 0 var(--gutter); }
.bulten-copy h2 { font-size: clamp(1.7rem, 3vw, 42px); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.bulten-copy p { text-wrap: balance; margin-top: 10px; color: #fff; font-size: 1rem; line-height: 1.5; }
/* e-posta barı: Dynamic Island gibi siyah kapsül; kenarında dönen pembe-mor (#ff6bd8) ve mavi-mor (#5f6bff) ışık, dışında yumuşak parıltı */
/* E-posta kutusu: "shiny button" ışığı — kenarda dönen parlak ışık şeridi, içte dönen noktalı desen ve parıltı.
   Üstüne gelince / yazarken (focus) ışık genişler, renklenir ve iç parıltı nefes alır. */
@property --bf-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --bf-off { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --bf-pct { syntax: '<percentage>'; inherits: false; initial-value: 5%; }
@property --bf-shine { syntax: '<color>'; inherits: false; initial-value: white; }
.bulten-form, .tour-tab-bf { --bf-bg: #06020d; --bf-hl: #9b6cff; --bf-hl-soft: #c9a2ff; --bf-dur: 4s; --bf-ease: 800ms cubic-bezier(.25, 1, .5, 1);
  position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 8px; width: min(100%, 380px); margin: 63px auto 0; padding: 9px;
  border: 1px solid transparent; border-radius: 999px;
  /* kenar: dolgu padding-box'ta, ışık şeridi border-box'ta dönen conic-gradient */
  background: linear-gradient(var(--bf-bg), var(--bf-bg)) padding-box,
    /* beyaz ışık yumuşak geçişli: renk durakları arası geniş, uçlar saydama yavaşça söner */
    conic-gradient(from calc(var(--bf-ang) - var(--bf-off)), transparent 0%, rgba(155,108,255,.35) calc(var(--bf-pct) * .8), var(--bf-hl) calc(var(--bf-pct) * 1.5),
      var(--bf-shine) calc(var(--bf-pct) * 2.2), var(--bf-hl) calc(var(--bf-pct) * 2.9), rgba(155,108,255,.35) calc(var(--bf-pct) * 3.6), transparent calc(var(--bf-pct) * 4.6)) border-box;
  box-shadow: inset 0 0 0 1px #1a1428;
  transition: var(--bf-ease); transition-property: --bf-off, --bf-pct, --bf-shine; }
.bulten-form::before, .bulten-form::after, .tour-tab-bf::before, .tour-tab-bf::after, .bf-glow { content: ""; pointer-events: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; }
/* iç: ince nokta deseni — sabit, yalnızca üstüne gelince / yazarken belirir */
.bulten-form::before, .tour-tab-bf::before { --pos: 2px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: inherit; opacity: .4;
  background: radial-gradient(circle at var(--pos) var(--pos), #fff calc(var(--pos) / 4), transparent 0) padding-box;
  background-size: calc(var(--pos) * 2) calc(var(--pos) * 2); background-repeat: space;
  /* sabit: dönmez, kenarlara doğru yumuşakça söner */
  -webkit-mask-image: radial-gradient(ellipse 60% 120% at 30% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 120% at 30% 50%, #000, transparent 75%); opacity: 0; transition: opacity var(--bf-ease); }
/* iç: dönen mor parıltı */
.bulten-form::after, .tour-tab-bf::after { width: 100%; aspect-ratio: 1; opacity: .6; background: linear-gradient(-50deg, transparent, var(--bf-hl), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000); mask-image: radial-gradient(circle at bottom, transparent 40%, #000); }
/* iç: üstüne gelince nefes alan alt parıltı */
.bf-glow { width: calc(100% + 1rem); height: calc(100% + 1rem); box-shadow: inset 0 -1ex 2rem 4px var(--bf-hl); opacity: 0;
  transition: opacity var(--bf-ease); animation: bfBreathe calc(var(--bf-dur) * 1.5) linear infinite; }
.bulten-form, .tour-tab-bf { animation: bfSpin var(--bf-dur) linear infinite, bfSpin calc(var(--bf-dur) / .4) linear infinite reverse paused; animation-composition: add; }
.bulten-form::after, .tour-tab-bf::after { animation: bfShimmer var(--bf-dur) linear infinite, bfShimmer calc(var(--bf-dur) / .4) linear infinite reverse paused; animation-composition: add; }
.bulten-form:is(:hover, :focus-within), .tour-tab:is(:hover, :focus-visible) .tour-tab-bf { --bf-pct: 20%; --bf-off: 95deg; --bf-shine: var(--bf-hl-soft); }
.bulten-form:is(:hover, :focus-within), .bulten-form:is(:hover, :focus-within)::after, .tour-tab:is(:hover, :focus-visible) .tour-tab-bf, .tour-tab:is(:hover, :focus-visible) .tour-tab-bf::after { animation-play-state: running; }
.bulten-form:is(:hover, :focus-within)::before, .tour-tab:is(:hover, :focus-visible) .tour-tab-bf::before { opacity: .35; }
.bulten-form:is(:hover, :focus-within) .bf-glow, .tour-tab:is(:hover, :focus-visible) .bf-glow { opacity: 1; }
@keyframes bfSpin { to { --bf-ang: 360deg; } }
@keyframes bfShimmer { to { rotate: 360deg; } }
@keyframes bfBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) { .bulten-form, .bulten-form::before, .bulten-form::after, .bf-glow { animation: none; } }
/* düğmede yerleşim: bütün daireyi kaplar */
.tour-tab-bf { position: absolute; inset: 0; z-index: -1; display: block; width: auto; margin: 0; padding: 0; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .tour-tab-bf, .tour-tab-bf::before, .tour-tab-bf::after, .tour-tab .bf-glow { animation: none; } }
.bulten-form input { position: relative; z-index: 1; flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 14px; outline: none; }
.bulten-form input::placeholder { color: rgba(243,237,246,.55); font-size: 14px; }
/* Abone Ol: Bilet Al butonunun aynısı (camlı mor), ok sağda */
.bulten-form .bulten-btn { position: relative; z-index: 1; flex: none; height: 52px; margin-top: 0; padding: 6px 24px; font-size: 16px; gap: 12px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 800; }
.bulten-btn .btn-arrow { width: 40px; height: 40px; }
.bulten-ok { display: none; margin-top: 16px; color: var(--ice); }
/* boş/hatalı e-posta uyarısı: kutunun içinde, yazının yerinde; kırmızı ünlem + beyaz metin */
.bf-error { position: absolute; z-index: 2; left: 22px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 7px; pointer-events: none;
  font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; animation: bfErr .3s var(--ease); }
.bf-error[hidden] { display: none; }
.bf-error svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #ff4d5e; stroke-width: 2; stroke-linecap: round; }
.bulten-form.has-error input, .bulten-form.has-error input::placeholder { color: transparent; }
@keyframes bfErr { 0% { opacity: 0; transform: translateX(-6px); } 40% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { opacity: 1; transform: none; } }
.bulten-form.done { display: none; } .bulten-form.done + .bulten-ok { display: block; }
@media (max-width: 700px) { .bulten { height: auto; padding: 236px 0 52px; } .bulten-side { height: 190px; } .bulten-form { margin-top: 32px; }   /* başlık görsellerden 46px aşağıda, form metne yakın */ .bulten-side.is-left { left: -20px; } .bulten-side.is-right { right: -60px; } }
/* SSS'de fare imleci: 3B sihirli asa (JS ile fareyi izler); hareket ettikçe arkasında beyaz ışık
   şeridi ve dağılan ışık tozu bırakır (yalnızca efekt için şeffaf bir çizim katmanı, .wand-trail).
   Yerel imleç yalnızca asa hazırsa gizlenir (html.wand-on) */
.wand-on .faq, .wand-on .faq * { cursor: none; }
.wand-cursor { position: fixed; left: 0; top: 0; z-index: 9999; width: 64px; height: 64px; pointer-events: none; opacity: 0;
  transform-origin: 19px 19px; will-change: transform; transition: opacity .2s; filter: drop-shadow(0 6px 6px rgba(30,8,70,.35)); }
.wand-cursor.on { opacity: 1; }
.wand-cursor svg { display: block; width: 100%; height: 100%; }
.wand-trail { position: fixed; inset: 0; z-index: 9998; width: 100%; height: 100%; pointer-events: none; }
.faq-inner { max-width: 1240px; }
.faq-inner .section-head { max-width: none; margin: 0 0 clamp(36px, 5vw, 64px); text-align: center; }
.faq-inner .section-head h2 { color: var(--bg); font-size: clamp(1.7rem, 3vw, 42px); line-height: 1.15; } /* site zemin rengi */
.faq-list { display: grid; gap: 10px; max-width: 980px; margin: 0 auto; }
.faq-list details { position: relative; border-radius: 28px; border: 1.5px solid transparent;
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) padding-box, linear-gradient(transparent, transparent) border-box;
  transition: background .35s; }
.faq-list details:hover { background: linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.65)) padding-box, linear-gradient(transparent, transparent) border-box; }
.faq-list details { overflow: hidden; }
.faq-list details p a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }   /* cevaplardaki bağlantılar (Konum, Bilet, Ziyaret Kuralları) metinden ayrılsın */   /* açılıp kapanırken yükseklik JS ile yumuşakça değişir (main.js) */
.faq-list details.is-open { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff) border-box; }
.faq-list summary { list-style: none; position: relative; display: flex; align-items: center; gap: 18px;
  padding: 26px 96px 26px 28px; font-weight: 500; font-size: 18px; color: #151515; }   /* sorular 18px */
.faq-list summary::-webkit-details-marker { display: none; }
/* sağdaki daire: site zemin renginde; kapalıyken beyaz +, açıkken dönerek beyaz × olur */
.faq-list summary::before { content: ""; position: absolute; right: 24px; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%;
  background: var(--bg); /* site zemin rengi, düz, gölgesiz */
  transition: background .3s; }
.faq-list summary::after { content: ""; position: absolute; right: 37px; top: 50%; width: 20px; height: 20px; translate: 0 -50%;
  background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat;
  transition: rotate .45s var(--ease), background .3s; }
.faq-list details.is-open summary::before { background: var(--bg); } /* açıkken de koyu daire kalır, içinde beyaz × */
.faq-list details.is-open summary::after { rotate: 45deg;
  background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat; }
.faq-list details p { padding: 0 96px 28px 28px; margin-top: -8px; color: #111; font-size: 16px; }   /* cevaplar 16px */
.faq-list details.is-open p { animation: faqIn .45s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; } to { opacity: 1; } }
/* altta: "Başka sorunuz mu var?" ve altı çizili bağlantı + gri daire içinde ok */
.faq-more { margin-top: clamp(36px, 4vw, 56px); text-align: center; }
.faq-more p { color: #fff; font-size: 1.05rem; } /* gradyanın koyu mor ucunda okunsun */ /* gradyanın koyu mor ucunda okunsun */
.faq-more a { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.faq-more a span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; transition: background .25s, translate .25s var(--ease); }
.faq-more a:hover span { background: #160530; translate: 3px 0; }

/* ---------- Location ---------- */

/* ---------- Footer ---------- */
/* ---------- Footer: cdbureau.com düzeni. Zemin sitenin zemin rengi, yazılar açık ---------- */
.site-footer { --ink: var(--text); position: relative; isolation: isolate; overflow: hidden; padding: clamp(57.3px, 7.81vw, 120px) 0 var(--below); color: var(--ink);
  background: var(--bg); }
.footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 40px; }
.footer-col { display: grid; gap: 22px; align-content: start; }
.footer-right { justify-items: end; text-align: right; }
.footer-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 18px; font-weight: 500; line-height: 1.45; } /* reachdigital.nl gibi alt alta; alt çizgisiz */
.footer-menu a:hover { color: var(--glow-2); }
/* cdbureau hover'ı: sol-üste kayar, gölge bırakır */
.footer-menu a, .footer-btn { transition: color .2s; }
.footer-social a { transition: transform .2s ease-out, text-shadow .2s ease-out, filter .2s ease-out, box-shadow .2s ease-out; }
.footer-place { display: flex; gap: 10px; align-items: flex-start; justify-content: flex-end; font-style: normal; font-size: 16px; font-weight: 500; line-height: 1.5; }
.footer-btn { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; } /* kutu değil, menü gibi düz link */
.footer-btn:hover { color: var(--glow-2); }
.footer-logo { display: block; padding-top: 4px; }
.footer-logo .lg-svg { display: block; width: clamp(150px, 13vw, 190px); height: auto; overflow: visible; }
/* Logo animasyonu (JS): yazı bir kez kalemle yazılır; harflerin dış hattı ucunda parlayan kalem noktasıyla çizilir, sonra harf
   dolar (Apollo → Park → GAZİANTEP). Sonra yıldızlar dönerek belirir; yıldız parıltısı ve ışık süpürmesi sürekli tekrar eder.
   JS çalışmazsa logo düz görünür. */
.lg-part { transform-box: fill-box; transform-origin: center; }
.lg-anim .lg-part { stroke: #efe8ff; stroke-width: .32; stroke-linejoin: round; stroke-linecap: round; }
.lg-pen { fill: #fff; filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 2.5px #c9a2ff); }
.lg-shine { opacity: 0; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { display: grid; place-items: center; width: 28px; height: 28px; }
.footer-social a:hover { transform: translate(-3px, -3px); filter: drop-shadow(4px 4px 1px rgba(201,162,255,.45)); }
.footer-mail { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.footer-mail { transition: color .2s; }
.footer-mail:hover { color: var(--glow-2); }   /* footer menü bağlantılarıyla aynı: yalnızca lila renk */
.site-footer { --pad: clamp(24px, 6.2vw, 90px); --below: clamp(17px, calc(2.2vw - 7px), 25px); --above: clamp(39.6px, 3.823vw, 55.05px); } /* cdbureau.com: kenarlardan ~90px içeride */
@media (max-width: 576px) { .site-footer { --pad: 16px; } }
@media (max-width: 760px) { .site-footer { --below: 17.6px; --above: 17.6px; } }
.site-footer > .container { max-width: none; padding: 0 var(--pad); }
/* telif satırı: solda telif yazısı ve yanında yasal linkler, sağda TAAF */
.footer-bottom { margin-top: clamp(14px, 1.785vw, 80px); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 15px;
  align-items: center; position: relative; font-size: 14px; font-weight: 500; line-height: 1; color: var(--muted); } /* cdbureau.com alt satırı gibi küçük; büyük harfe çevrilmez */
/* telif satırında TAAF logosu (sitenin yapımcısı). Üzerine gelince Apollo logosundaki gibi bir cam parıltısı yazının içinden geçer:
   bağlantı logo şekliyle maskelenir, parıltı yalnızca harflerin üstünde görünür */
.footer-taaf { position: relative; display: block; width: 63px; height: 32px; overflow: hidden; /* logo 63×28px; kutu 32px kalır, satır hizası değişmez */
  -webkit-mask: url("../img/taaf.svg") center / contain no-repeat; mask: url("../img/taaf.svg") center / contain no-repeat; }
.footer-taaf img { display: block; width: 100%; height: 100%; }
.footer-taaf::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(90deg, rgba(201,162,255,0) 0%, rgba(230,214,255,.7) 35%, #fff 50%, rgba(230,214,255,.7) 65%, rgba(201,162,255,0) 100%);
  transform: translateX(-130%) skewX(-20deg); }
.footer-taaf:hover::after, .footer-taaf:focus-visible::after { animation: taafShine .9s ease-in-out; }
@keyframes taafShine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) { .footer-taaf:hover::after { animation: none; } } /* telif satırında, sağda küçük TAAF logosu (sitenin yapımcısı) */
/* masaüstünde solda telif + yasal linkler, sağda TAAF logosu */
@media (min-width: 761px) {
  .footer-taaf { margin-left: auto; }
}
.footer-copy { margin: 0; color: var(--text); line-height: 1.5; } /* telif yazısı "Yol Tarifi Al" ile aynı: beyaz, 500 ağırlık */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 15px; line-height: 1.5; } /* telif yazısının hemen yanında */
.footer-legal a { color: #77708c; font: inherit; transition: color .2s; padding: 10px 0; margin: -10px 0; }   /* görünüm aynı, dokunma alanı 40px+ */ /* soluk, mora çalan gri */
.footer-legal a:hover { color: #fff; }
.site-footer > .footer-bottom { padding-top: calc(var(--above) + var(--above) - var(--below)); } /* satır ekranın altına yakın: alttaki boşluk küçüldükçe üstteki aynı oranda büyür, üstteki içerik yerinde kalır */
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 20px; }
  .footer-logo { order: -1; margin-bottom: 26px; }   /* menü logoya yapışmasın */
  .footer-col, .footer-right { justify-items: center; text-align: center; }
  .footer-menu { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; justify-items: center; gap: 12px 30px; font-size: 17px; }   /* telefonda yan yana, dengeli iki satır (3 + 3) */
  .footer-btn { justify-self: center; }
  .footer-place { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-legal { justify-content: center; gap: 4px 24px; }
  .footer-taaf { margin-top: 22px; }   /* TAAF logosu, çerez ikonu ve yukarı ok yasal linklere yapışmasın */
}

/* Yukarı çık: yalnızca footer'da, sağ kenar boşluğunda; dikeyde telif yazısıyla aynı hizada
   (footer'ın alt boşluğu --below + satırın yarısı 16px (TAAF logosu 32px) − okun yarısı 18.5px) */
.to-top { position: absolute; right: 25px; bottom: calc(var(--below) - 2.5px); z-index: 2; width: 37px; height: 37px; padding: 0; border: 0;
  background: none; color: #fff; cursor: pointer; transition: color .2s; }
.to-top svg { display: block; }
.to-top path { fill: currentColor; }
.to-top:hover, .to-top.launch { color: var(--glow-2); } /* üzerine gelince ve uçarken mor */
.to-top:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
/* kalkış: ok esnemez; önce hafifçe çöker, sonra hızlanarak ekranın üstünden çıkar (uçarken JS onu sabit konuma alır) */
.to-top.launch { animation: ttLaunch 1s forwards; }
@keyframes ttLaunch {
  0% { transform: none; animation-timing-function: ease-out; }
  20% { transform: translateY(6px); animation-timing-function: cubic-bezier(.55, 0, .85, .2); }
  100% { transform: translateY(var(--fly, -100vh)); } }
/* kuyruktaki yıldızlar: gökyüzü noktaları ve 4 köşeli pırıltılar; aşağı süzülüp söner */
.tt-star { position: fixed; z-index: 59; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; pointer-events: none;
  background: #fff; box-shadow: 0 0 6px 1px rgba(201,162,255,.8); animation: ttStar .9s ease-out forwards; }
.tt-star.is-spark { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 0; box-shadow: none; background: #f3edf6;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px #c9a2ff); }
@keyframes ttStar {
  from { opacity: 1; transform: scale(var(--s, 1)); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0) rotate(120deg); } }
@media (max-width: 600px) { .to-top { right: 8px; } }
/* çerez ayarları: sol altta beyaz daire, koyu çerez ikonu (to-top ile aynı hizada) */
.footer-cookie { position: absolute; left: 25px; bottom: calc(var(--below) - 2.5px); z-index: 2; display: grid; place-items: center; width: 37px; height: 37px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: #100322; cursor: pointer; transition: transform .3s var(--ease), background .2s; }
.footer-cookie svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-cookie:hover { transform: rotate(-15deg) scale(1.06); background: #f3edff; }
.footer-cookie:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 3px; }
@media (max-width: 600px) { .footer-cookie { left: 8px; } } /* ortalı telif yazısına binmesin */

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Ziyaretini planla (riotgames.com "Riot'ta neler oluyor?" ölçüleri): solda büyük konum kartı (%60), sağda dört yatay bilgi kartı (%40).
   Riot gibi akışkan: içerik en fazla 1890px; kenar boşluğu 20px, 960px'ten itibaren 40px, 1280px'ten itibaren 80px */
.visit > .container { max-width: 1890px; padding: 0 20px; }
@media (min-width: 960px) { .visit > .container { padding: 0 40px; } }
@media (min-width: 1280px) { .visit > .container { padding: 0 80px; } }
.visit-head { margin-bottom: clamp(36px, 5vw, 64px); }
/* "Apollo Park Gaziantep Nerede?": SSS başlığıyla ("Sıkça Sorulan Sorular") aynı tip ve boyut, renk beyaz */
.visit-head h2#visit-title { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  text-wrap: balance; background: none; -webkit-text-fill-color: #fff; color: #fff; } /* başlık: diğer büyük başlıklar gibi ortalı, gradyanlı (.exp-head h2) */
.visit-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.visit-main { display: block; color: #fff; }
.vm-title { display: block; margin: 20px 0 10px; font-family: var(--font-display); font-size: 1.563rem; font-weight: 600; line-height: 1.25; }
.vm-addr { display: block; font-size: 1rem; line-height: 1.5; color: #fff; } /* adres: açıklama yazısıyla aynı boyut ve ağırlık */
.visit-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* bilgi kartı: yazı solda, görsel sağda tam yükseklikte (Riot: 243/138 oranında) */
.visit-item { display: flex; justify-content: space-between; height: 150px; overflow: hidden; border-radius: 8px; background: rgba(155, 108, 255, .2); color: #fff; transition: background .2s, transform .3s var(--ease); }
.visit-item:hover { background: rgba(155, 108, 255, .28); }
.vi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 18px 10px 18px 20px; }
.vi-title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.vi-sub { display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; line-height: 1.45; color: #fff; }
.visit-item img { flex: none; display: block; height: 100%; width: 200px; max-width: 45%; object-fit: cover; /* dar kartta yazıya yer bırakır */ border-radius: 8px; transition: transform .5s var(--ease); }
.visit-item:hover img { transform: scale(1.05); }
/* tablet: bilgi kartları ikişerli */
@media (min-width: 600px) { .visit-list { grid-template-columns: 1fr 1fr; } }
/* telefonda (tek sütun): görsel üstte tam genişlikte, yazı altta; alt yazı kesilmez */
@media (max-width: 599px) {
  .visit-item { flex-direction: column-reverse; justify-content: flex-start; height: auto; }
  .visit-item img { width: 100%; max-width: none; height: auto; aspect-ratio: 2.3 / 1; object-position: 50% 68% !important; border-radius: 8px 8px 0 0; }   /* görsel daha basık, alt kısmı (figürler, tramvay, araba) görünür */
  .vi-text { padding: 20px 22px 24px; gap: 6px; }
  .vi-title { font-size: 1.15rem; }
  .vi-sub { font-size: 15px; }
  .vi-sub { white-space: normal; overflow: visible; }
}
/* masaüstü (Riot 960px): yan yana %60 / %40, 24px boşluk */
@media (min-width: 960px) {
  .visit-grid { grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }
  .vm-title { font-size: 36px; }
  .visit-list { grid-template-columns: 1fr; gap: 24px; }
  .visit-item { height: 150px; }
  .vi-text { padding: 20px 8px 20px 26px; }
  .vi-title { font-size: 1.125rem; }
}
@media (min-width: 960px) and (max-width: 1279px) { .vi-text { padding-left: 20px; } .vi-title { font-size: 1rem; } }
/* 3'ten fazla kart: hero kartları gibi yatay kayan şerit (main.js cardStrip); telefonda bir, tablette iki, masaüstünde üç kart görünür */
/* en fazla 2 kart varken kartlar büyür */
@media (min-width: 760px) {
  .visit-list.is-big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .visit-list.is-big .visit-item:only-child { grid-column: 1 / -1; }
  .visit-list.is-big .visit-item { height: 240px; }
  .visit-list.is-big .vi-text { padding: 24px 12px 24px 30px; gap: 6px; }
  .visit-list.is-big .vi-title { font-size: 1.5rem; }
  .visit-list.is-big .vi-sub { font-size: 16px; white-space: normal; }
  .visit-list.is-big img { width: 330px; max-width: 50%; }
}
.visit-list.is-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
  cursor: grab; user-select: none; -webkit-user-select: none; }
.visit-list.is-strip::-webkit-scrollbar { display: none; }
.visit-list.is-strip.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.visit-list.is-strip > .visit-item { flex: 0 0 100%; scroll-snap-align: start; }
.visit-list.is-strip img { -webkit-user-drag: none; }
@media (min-width: 600px) { .visit-list.is-strip > .visit-item { flex-basis: calc((100% - 16px) / 2); } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* acarkon.com menüsü gibi: navbarın altından açılan beyaz, köşeleri yuvarlak kutu; bağlantılar ortalı, koyu.
     Arkadaki sayfa hafifçe kararır */
  .main-nav {
    position: fixed; top: calc(var(--header-h) + 18px); left: 12px; right: 12px; z-index: -1; margin: 0;   /* logonun altından açılır */
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px;
    max-height: calc(100svh - var(--header-h) - 24px); overflow-y: auto;
    padding: 26px 32px 56px; border-radius: 20px; background: #fff;   /* alt boşluk: kart yüksekliği aynı kalsın */ box-shadow: 0 30px 60px -20px rgba(16,3,34,.6);
    /* SSS kartlarının açılışı gibi: kutu yukarıdan aşağı yumuşakça uzar (0,48 sn, aynı eğri), yazılar hafifçe belirir; kapanış 0,36 sn */
    clip-path: inset(0 0 100% 0 round 20px); visibility: hidden;
    transition: clip-path .36s cubic-bezier(.4, 0, .2, 1), visibility 0s .36s;
  }
  .main-nav > * { opacity: 0; transition: opacity .2s; }
  .menu-open .main-nav > * { opacity: 1; transition: opacity .45s var(--ease); }
  .main-nav a { font-size: 20px; font-weight: 700; color: #100322; }   /* büyük harf, harf aralıklı; 20px, 700 */
  .main-nav a:hover { color: #6a3cf0; }
  .menu-open .main-nav { clip-path: inset(0 0 0 0 round 20px); visibility: visible; transition: clip-path .48s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  body::after { content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(16,3,34,.55);   /* bulanıklık yok, yalnızca hafif karartma */
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; pointer-events: none; }
  body.menu-open::after { opacity: 1; visibility: visible; }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: flex; }

}
@media (max-width: 600px) {
  body { font-size: 16px; }
  :root { --header-h: 70px; }
  .brand { padding-top: 14px; }
  .lang-switch { display: none; } /* telefonda dil seçimi menünün içinde (.nav-lang) */
  .header-actions { gap: 10px; }
  .header-cta { height: 42px; padding: 0 18px; font-size: 16px; }
  .site-header .header-cta { display: none; }   /* telefonda navbarda değil, hero'da açıklamanın altında */
  .main-nav .nav-ticket { display: block; }
  .hero-title { font-size: 32px; text-wrap: balance; }   /* uzun satır ikiye bölünürken tek kelime ortada kalmasın */
  @media (max-height: 760px) { .hero { height: 100vh; height: 100svh; min-height: 580px; } }   /* kısa telefonlarda sayaç ilk ekrana sığsın; çok kısa ekranda yazıların üstüne binmesin */
  .brand img { height: 64px; }   /* telefonda logo bir tık büyük */

  .hero-btn { height: 54px; padding: 0 30px; font-size: 1.05rem; margin-top: 30px; }
  .countdown { padding: 14px 18px 12px; border-radius: 16px; }
  .countdown-num { font-size: 1.8rem; }
  .countdown-sep { font-size: 1.2rem; line-height: 1.8rem; }
  .countdown-row { gap: 8px; }
  .promo { --sw: 820px; } /* üst boşluk görselin gökyüzü rengine akar */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Şerit kartları animasyonsuz üst üste biner; onlar kaldırılmaz, kendi kuralıyla duraklatılır */
  *:not(.curve-tile), *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media (max-width: 600px) { .faq-list summary { padding: 20px 72px 20px 18px; gap: 12px; font-size: 18px; } .faq-list summary::before { right: 14px; width: 40px; height: 40px; } .faq-list summary::after { right: 25px; width: 18px; height: 18px; } .faq-list details p { padding: 0 20px 22px 18px; } }

/* ---------- Hakkında: video kartı (aşağıdan süzülerek gelir) ---------- */
.about-video { display: flex; justify-content: center; margin-top: clamp(56px, 7vw, 104px); }
.video-trigger { position: relative; display: block; width: min(920px, 100%); padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.js .video-trigger { opacity: 0; transform: translateY(300px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .about-video.in .video-trigger { opacity: 1; transform: none; }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--bg-soft); }
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.video-trigger:hover .video-thumb img { transform: scale(1.04); }
.video-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: clamp(52px, 5.3vw, 76px); aspect-ratio: 1;
  border-radius: 50%; translate: -50% -50%; color: #fff;
  background: linear-gradient(90deg, #6f45d6, #4620b8);   /* navbardaki Bilet Al ile aynı */
  transition: transform .35s var(--ease); }
.video-play svg { width: clamp(22px, 2.25vw, 32px); height: auto; } /* ikon boyutu sabit, yalnızca daire küçük */
.video-trigger:hover .video-play { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .js .video-trigger { opacity: 1; transform: none; } }

.video-modal { width: min(1280px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; color: #fff; }
/* video kartında ve popup'ta odak çerçevesi görünmesin (açılış/kapanışta seçili alan gibi duruyordu) */
.video-trigger:focus, .video-trigger:focus-visible, .video-modal:focus, .video-modal:focus-visible, .video-modal *:focus, .video-modal *:focus-visible { outline: none; }
.video-modal::backdrop { background: rgba(6, 1, 14, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.video-modal[open] { animation: videoIn .35s var(--ease); }
.video-modal-frame { width: 100%; max-height: calc(100vh - 120px); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.video-modal-frame.is-vertical { width: auto; height: calc(100vh - 120px); aspect-ratio: 9 / 16; margin-inline: auto; }
.video-modal-frame iframe, .video-modal-frame video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
/* kapat: pop-up'taki çarpıyla aynı renk ve boyut */
.video-modal-close { position: absolute; right: 0; bottom: calc(100% + 12px); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(16, 3, 34, .55); cursor: pointer; }
.video-modal-close svg { position: relative; width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgba(10, 3, 24, .5)); }
@keyframes videoIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
body.video-open { overflow: hidden; }


/* ---------- Konum: dijital 3D harita (rota haritasıyla aynı tasarım) ----------
   Bölümün ortasında tam genişlik; altında adres ve üç bilgi kartı yan yana. */
/* Konum bölümünün tamamı 3D haritanın zeminiyle aynı düz renk (konum3d.js → BG); Hakkında ile arası geçişsiz, net ayrılır */
.visit { --konum-bg: #0a0320; background: var(--konum-bg); }
.konum-map { position: relative; width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 16 / 8; max-height: 88vh;
  overflow: hidden; background: var(--konum-bg); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.konum-map.is-drag { cursor: grabbing; }
/* çerçevesiz: kenarlar ve üst/alt sayfa zeminine yumuşakça karışır */
.konum-map::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--konum-bg) 0%, rgba(10,3,32,0) 16%, rgba(10,3,32,0) 82%, var(--konum-bg) 100%),
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(10,3,32,0) 60%, var(--konum-bg) 100%); }
.km-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .5s; }
/* sabit harita görüntüsü: 3D hazır olana kadar (ya da açılamazsa) görünür, 3D gelince yumuşakça yerini ona bırakır */
.km-fallback, .km-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.km-fallback { transition: opacity .5s; }
.konum-map.is-3d .km-fallback { opacity: 0; }
.konum-map:not(.is-3d) .km-canvas, .konum-map:not(.is-3d) .km-labels { opacity: 0; }
.km-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.km-labels .mapview-label { will-change: transform; }
.konum-map + .visit-main .vm-title { margin-top: 28px; }
/* adres ile kartlar arası tam 32px (ızgara boşluğu: mobil 32px, masaüstü 24px + 8px) */
.visit-main + .visit-list { margin-top: 0; }
@media (min-width: 960px) { .visit-main + .visit-list { margin-top: 8px; } }
/* 3D konum haritasında yazılar üç boyutta: 16px (Botanik Bahçesi), 14px (durak adları, lejant), 12px (alt yazı, yol adları, otopark) */
.km-labels .mapview-label { font-size: 14px; }
.km-labels .km-park--3 { margin-left: 60px; } /* soldaki otopark işareti ekran kenarına yapışmasın */
.km-labels .km-garden { font-size: 16px; margin-left: -30px; font-weight: 800; -webkit-text-stroke: .45px currentColor; paint-order: stroke fill; } /* bahçe alanının biraz solunda; Manrope en fazla 800: ince çizgiyle bir kademe daha kalın (900 gibi) */
/* durak isimlikleri ekran kenarından içeri: Masal Parkı biraz sağa, Harikalar Diyarı biraz sola */
.km-labels .km-road--zubeyde { margin-left: -60px; margin-top: -14px; } /* bulvar adı bahçe alanından biraz sola ve yukarı */
.km-labels .km-stop--masal { margin-left: 80px; margin-top: -46px; } /* rayların üstünde dursun */
.km-labels .km-stop--harika { margin-left: -80px; margin-top: -12px; }
.km-labels .km-stop small { font-size: 12px; }
.km-labels .is-mark, .km-labels .km-park { font-size: 12px; }
.km-head span { font-size: 14px; }

.km-labels .km-stop { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.km-labels .km-stop small { font-weight: 800; letter-spacing: .02em; color: #7d55e0; } /* lila */
.km-labels .km-park { padding: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #3b5bdb; color: #fff; }
.km-labels .km-garden { padding: 8px 16px; }
.km-head { position: absolute; z-index: 3; right: calc(max(0px, (100vw - 1890px) / 2) + 80px); bottom: 12%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 18px; max-width: 70%; pointer-events: none; }
.km-head span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.km-head i { width: 12px; height: 12px; border-radius: 50%; font-style: normal; }
.km-head .lg-tram { background: #9b6cff; width: 18px; height: 4px; border-radius: 2px; }
.km-head .lg-park { width: 18px; height: 18px; border-radius: 4px; background: #3b5bdb; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding-top: 1px; flex: none; } /* P harfi kutunun tam ortasında */
@media (min-width: 960px) {
  .visit-grid { grid-template-columns: 1fr; }
  .visit-list { grid-template-columns: repeat(3, 1fr); }
  .visit-list .vi-sub { white-space: normal; } /* üçlü dizilimde kart dar: alt yazı kesilmesin, iki satıra insin */
  .visit-list.is-strip > .visit-item { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 760px) {
  .konum-map { aspect-ratio: 4 / 5; max-height: none; }
  .km-head { left: 50%; right: auto; translate: -50% 0; bottom: 8%; width: max-content; max-width: calc(100% - 32px); justify-content: center; gap: 6px 14px; }   /* telefonda lejant ortalı */
  .km-labels .mapview-label { padding: 4px 9px; }
  .km-labels .km-garden { padding: 6px 12px; }
  .km-labels .is-mark { font-size: 11px; padding: 2px 8px; } /* telefonda yol adları küçük ama görünür */
}

/* ---------- Çerez onayı: 21st.dev "Cookie Consent" düzeni, beyaz ----------
   Sol altta 400px kart; aşağıdan süzülerek gelir. Özelleştir'de kategoriler ve anahtarlar açılır. */
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 90; width: min(400px, calc(100vw - 32px)); overflow: hidden;
  border-radius: 16px; background: #fff; color: #18122b; border: 1px solid rgba(16,3,34,.08);
  box-shadow: 0 24px 60px -18px rgba(16,3,34,.55), 0 2px 8px rgba(16,3,34,.12);
  transform: translateY(24px); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.cookie[hidden] { display: none; }
.cookie.is-in { transform: none; opacity: 1; }
.cookie-main { padding: 22px 22px 16px; }
.cookie-head { display: flex; align-items: center; gap: 12px; }
.cookie-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #f3edf6; color: #6f42ca; }
.cookie svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cookie-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; text-wrap: nowrap; }
.cookie-x { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px 0 auto; padding: 0; border: 0; border-radius: 8px; background: none; color: #9a93ab; cursor: pointer; transition: color .2s, background .2s; }   /* sağ üstte soluk çarpı; butonlarla yarışmaz */
.cookie-x:hover { color: #18122b; background: #f7f4fb; }
.cookie-x:focus-visible { outline: 2px solid #6f42ca; outline-offset: 1px; }
.cookie-text { margin: 14px 0 12px; font-size: 14px; line-height: 1.55; color: #100322; }
.cookie-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: #18122b; }
.cookie-link svg { width: 14px; height: 14px; transition: transform .2s; }
.cookie-link:hover svg { transform: translateX(2px); }
.cookie-prefs { display: grid; gap: 8px; margin-top: 16px; }
.cookie-prefs[hidden] { display: none; }
.cookie-cat { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #f7f4fb; cursor: pointer; }
.cookie-cat input { position: absolute; opacity: 0; pointer-events: none; }
.cc-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; color: #6f42ca; }
.cc-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cc-txt b { font-size: 14px; font-weight: 700; }
.cc-txt small { font-size: 12px; line-height: 1.4; color: #100322; }
.cc-toggle { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: #d9d3e4; transition: background .25s; }
.cc-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s var(--ease); }
.cookie-cat input:checked + .cc-toggle { background: #6f42ca; }
.cookie-cat input:checked + .cc-toggle::after { transform: translateX(16px); }
.cookie-cat input:disabled + .cc-toggle { opacity: .55; }
.cookie-cat input:focus-visible + .cc-toggle { outline: 2px solid #6f42ca; outline-offset: 2px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid #eee9f3; }
.cookie-btn { flex: 1; height: 40px; border-radius: 10px; border: 1px solid #e3dcef; background: #fff; color: #18122b; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.cookie-btn:hover { background: #f7f4fb; }
.cookie-btn.is-primary { background: #100322; border-color: #100322; color: #fff; }
.cookie-btn.is-primary:hover { background: #2a1060; border-color: #2a1060; }
.cookie-btn[hidden] { display: none; }
.cookie-btn { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }   /* Özelleştir/Kaydet · Reddet · Tümünü Kabul Et; uzun yazı sığsın diye genişlik içeriğe göre */
@media (max-width: 600px) { .cookie { left: 16px; bottom: 16px; } .cookie-actions { gap: 8px; } .cookie-btn { font-size: 13px; } }   /* 360px'te üçü tek sırada; daha darda Tümünü Kabul Et alt satıra iner */
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }



/* metin seçim rengi */
::selection { background: #6f45d6; color: #fff; }