/* ============================================================
   VIYA ETICKET — Siyah Apple "liquid glass" tema
   (yalnızca görünüm; fonksiyon koduna dokunmaz. Tüm sayfalara
    <style>'dan sonra link'lenir, değişkenleri ve yüzeyleri ezer.)
   ============================================================ */

:root, [data-theme="dark"], [data-theme="light"] {
  --bg-page: #000000;
  --bg-card: rgba(255,255,255,0.055);
  --bg-card-hover: rgba(255,255,255,0.10);
  --bg-input: rgba(255,255,255,0.045);
  --bg-drop: rgba(255,255,255,0.028);
  --bg-drop-active: rgba(10,132,255,0.14);
  --bg-btn-secondary: rgba(255,255,255,0.08);
  --text-primary: #f5f5f7;
  --text-secondary: rgba(235,235,245,0.62);
  --text-tertiary: rgba(235,235,245,0.45);
  --text-muted: rgba(235,235,245,0.32);
  --border: rgba(255,255,255,0.12);
  --border-soft: rgba(255,255,255,0.07);
  --btn-primary-bg: rgba(255,255,255,0.95);
  --btn-primary-text: #000;
  --accent-green: #30d158;   /* Apple system green */
  --accent-red:   #ff453a;
  --accent-blue:  #0a84ff;
  --accent-yellow:#ffd60a;
}

html { background:#000; }
body {
  background:#000 !important;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Arka plan: glass'ın bulanıklaştıracağı yumuşak renk parıltıları */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 45% at 12% -8%, rgba(10,132,255,0.22), transparent 60%),
    radial-gradient(50% 45% at 112% 8%, rgba(125,80,225,0.18), transparent 60%),
    radial-gradient(70% 55% at 50% 118%, rgba(48,209,88,0.10), transparent 60%),
    #000;
}

/* ---- Glass yüzeyler ---- */
.card, #drop, .panel, .auth-box, #log, #summary, #opts,
.airline-picker, .stats, .stage, .results, .chip {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.card:hover { background: var(--bg-card-hover) !important; border-color: rgba(255,255,255,0.22) !important; }

/* Drop zone — camsı ama kesik çizgili kalsın */
#drop {
  border-style: dashed !important;
  border-color: rgba(255,255,255,0.18) !important;
}
#drop.hover, body.dragging #drop {
  border-color: var(--accent-blue) !important;
  background: var(--bg-drop-active) !important;
}

/* Girişler */
input, textarea, select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
input:focus, textarea:focus { border-color: var(--accent-blue) !important; outline: none !important; }

/* Butonlar — pill, camsı */
button { border-radius: 14px !important; }
.airline-picker button, .btn-sec, button.secondary {
  background: var(--bg-btn-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.airline-picker button.active {
  background: rgba(10,132,255,0.22) !important;
  border-color: rgba(10,132,255,0.5) !important;
}

/* Tema toggle'ı gizle — sabit siyah estetik */
#theme-toggle { display: none !important; }

/* Eski üst nav'ı gizle — menü alta taşındı */
.topnav { display: none !important; }

/* ============================================================
   Alt "liquid glass" sekme çubuğu (glass.js enjekte eder)
   ============================================================ */
.glass-tabbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 2px;
  padding: 6px; border-radius: 24px;
  background: rgba(28,28,30,0.55);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 44px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.18);
  max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center;
}
/* kayan pill (glass.js konumlar) */
.glass-tabbar .tab-pill {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; opacity: 0;
  border-radius: 18px; background: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px rgba(0,0,0,0.25);
  transition: transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1), opacity .2s;
  z-index: 0; pointer-events: none;
}
.glass-tabbar a {
  position: relative; z-index: 1;
  padding: 9px 15px; border-radius: 18px; text-decoration: none;
  font-size: 13px; font-weight: 600; color: rgba(235,235,245,0.7);
  white-space: nowrap; transition: color .2s; line-height: 1;
}
.glass-tabbar a:hover, .glass-tabbar a.active { color: #fff; }
.glass-tabbar .sep { width:1px; height:20px; background:rgba(255,255,255,0.14); margin:0 4px; z-index:1; }
.glass-tabbar .report-btn {
  position: relative; z-index: 1;
  padding: 9px 15px; border-radius: 18px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1;
  color: var(--accent-yellow); background: rgba(255,214,10,0.14);
  transition: background .2s;
}
.glass-tabbar .report-btn:hover { background: rgba(255,214,10,0.26); }

/* ---- Sayfa geçiş yükleyici ---- */
#page-loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease;
}
#page-loader.show { opacity: 1; visibility: visible; }
.pl-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.16); border-top-color: #fff;
  animation: pl-spin .7s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
/* not: reduce-motion media query bilerek yok — pill kaymasının her zaman çalışması istendi */

/* İçerik alt bara değmesin */
body { padding-bottom: 112px; }
/* cam-logo tam-yükseklik düzeni: body değil, scroll alanlarına boşluk ver */
body:has(.panel) { padding-bottom: 0; }
.panel, .stage { padding-bottom: 104px !important; }

/* ============================================================
   Modern giriş ekranı (login) — index.html & ticket.html
   ============================================================ */
#auth-gate {
  background:
    radial-gradient(120% 90% at 50% -15%, rgba(10,132,255,0.22), transparent 55%),
    radial-gradient(90% 70% at 90% 110%, rgba(125,80,225,0.18), transparent 55%),
    #000 !important;
}
.auth-box {
  width: 350px !important; max-width: calc(100vw - 36px);
  padding: 42px 34px 34px !important; text-align: center;
  background: rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter: blur(44px) saturate(190%);
  backdrop-filter: blur(44px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 30px !important;
  box-shadow: 0 40px 90px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  animation: auth-in .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes auth-in { from { opacity:0; transform: translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
/* logo rozeti */
.auth-box::before {
  content: "V"; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 18px;
  font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -1px;
  background: linear-gradient(160deg, rgba(10,132,255,0.9), rgba(125,80,225,0.85));
  box-shadow: 0 10px 30px rgba(10,132,255,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.auth-box h2 {
  margin: 0 0 6px !important; font-weight: 600 !important;
  font-size: 22px !important; letter-spacing: -0.4px !important; color: #f5f5f7 !important;
}
.auth-box .sub { color: rgba(235,235,245,0.5) !important; font-size: 13px !important; margin-bottom: 26px !important; }
.auth-box input[type=password] {
  width: 100% !important; padding: 15px !important; text-align: center !important;
  letter-spacing: 6px !important; font-size: 18px !important;
  background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 14px !important; color: #fff !important;
}
.auth-box input[type=password]:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 4px rgba(10,132,255,0.18) !important;
}
.auth-box button {
  width: 100% !important; margin-top: 16px !important; padding: 14px !important;
  background: #fff !important; color: #000 !important; border: none !important;
  border-radius: 14px !important; font-size: 15px !important; font-weight: 700 !important;
  cursor: pointer; transition: transform .12s, opacity .2s;
}
.auth-box button:hover { transform: translateY(-1px); }
.auth-box button:active { transform: translateY(0); opacity: .85; }
.auth-remember { color: rgba(235,235,245,0.5) !important; }
.auth-remember input { accent-color: var(--accent-blue) !important; }