/* ============================================================
   HOLO TEMA — holografik cam yüzeyler + siyan ışık
   ------------------------------------------------------------
   Renk token'ları main.css içindeki [data-theme="holo"] bloğunda.
   Bu dosya SADECE yapısal/görsel efektleri taşır: cam panel,
   kenar ışıması, akan ışık şeridi, holografik parlama.

   KURAL: hiçbir kural layout'a dokunmaz — yalnızca background,
   border, box-shadow, backdrop-filter, color, border-radius,
   opacity ve pseudo-element katmanları. display/grid/flex/
   position/width/height kesinlikle değiştirilmez ki diğer
   temalarla birebir aynı yerleşim korunsun.

   Tüm seçiciler [data-theme="holo"] ile kapsanır → tema
   seçilmediğinde bu dosyanın hiçbir etkisi yoktur.
   ============================================================ */

/* ── Ortam: akan ışık şeritleri ─────────────────────────────
   Referans tasarımdaki siyan ışık akışları. Sabit konumlu,
   tıklamayı engellemeyen, en arkada duran iki katman. */

[data-theme="holo"] body::before,
[data-theme="holo"] body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  /* z-index:-1 → canvas'a yayilan body arka planinin ustunde, TUM icerigin
     altinda boyanir. Icerige "position:relative;z-index:1" vermek gerekmez;
     oyle yapmak #venue-bottom-bar gibi position:fixed ogeleri bozuyordu. */
  z-index: -1;
  inset: -20% -10%;
  opacity: 0.5;
  will-change: transform;
}

[data-theme="holo"] body::before {
  background:
    radial-gradient(38% 22% at 20% 38%, rgba(63,216,255,0.16), transparent 70%),
    radial-gradient(30% 18% at 72% 62%, rgba(157,123,255,0.13), transparent 70%);
  filter: blur(28px);
  animation: holo-drift-a 34s ease-in-out infinite alternate;
}

[data-theme="holo"] body::after {
  background:
    radial-gradient(26% 16% at 84% 26%, rgba(63,240,212,0.12), transparent 72%),
    radial-gradient(34% 20% at 34% 84%, rgba(63,216,255,0.10), transparent 72%);
  filter: blur(36px);
  animation: holo-drift-b 46s ease-in-out infinite alternate;
}

@keyframes holo-drift-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@keyframes holo-drift-b {
  from { transform: translate3d(3%, 2%, 0) scale(1.08); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1); }
}

/* ── Cam yüzeyler ───────────────────────────────────────────
   Panel ve kartlar buzlu cam: yarı saydam zemin + blur +
   üstte ince ışık çizgisi (holografik kenar). */

[data-theme="holo"] .panel,
[data-theme="holo"] .vc-card,
[data-theme="holo"] .modal-box,
[data-theme="holo"] .settings-card,
[data-theme="holo"] .action-queue-container,
[data-theme="holo"] .activity-log-section,
[data-theme="holo"] #gunluk-panel,
[data-theme="holo"] #queue-panel,
[data-theme="holo"] .activities-container {
  background: var(--holo-glass) !important;
  backdrop-filter: blur(var(--holo-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--holo-blur)) saturate(1.25);
  border-color: var(--holo-line);
}

[data-theme="holo"] .panel {
  box-shadow: inset 0 1px 0 rgba(63,216,255,0.10);
}

/* Kart üst kenarındaki ışık çizgisi — referanstaki
   "aydınlatılmış cam kenar" hissi. */
[data-theme="holo"] .vc-card,
[data-theme="holo"] .modal-box,
[data-theme="holo"] .settings-card {
  box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(63,216,255,0.14);
}

/* ── Eylem kartları (klasik ızgara görünümü) ────────────────*/

[data-theme="holo"] .action-card {
  background:
    linear-gradient(180deg, rgba(63,216,255,0.05), transparent 55%),
    var(--holo-glass-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--holo-line);
  box-shadow: inset 0 1px 0 rgba(63,216,255,0.12);
}

[data-theme="holo"] .action-card:hover {
  border-color: var(--clr-primary);
  box-shadow:
    0 0 0 1px var(--holo-glow),
    0 6px 28px rgba(63,216,255,0.22),
    inset 0 1px 0 rgba(63,216,255,0.30);
}

[data-theme="holo"] .action-icon {
  box-shadow: 0 0 18px rgba(63,216,255,0.20);
}

/* ── Eylem destesi (varsayılan görünüm) ─────────────────────*/

[data-theme="holo"] .deck-card {
  background:
    linear-gradient(180deg, rgba(63,216,255,0.06), transparent 60%),
    var(--holo-glass-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--holo-line);
}

[data-theme="holo"] .deck-card:hover,
[data-theme="holo"] .deck-card:focus-visible,
[data-theme="holo"] .deck-card.is-active {
  border-color: var(--clr-primary);
  box-shadow:
    0 0 0 1px var(--holo-glow),
    0 8px 30px rgba(63,216,255,0.25);
}

[data-theme="holo"] .deck-detail {
  background: var(--holo-glass) !important;
  backdrop-filter: blur(var(--holo-blur));
  -webkit-backdrop-filter: blur(var(--holo-blur));
  border-color: var(--holo-line);
}

/* deck-dot varsayılanı sabit indigo — holo'da siyana çevrilir. */
[data-theme="holo"] .deck-dot.is-active {
  background: var(--clr-primary);
  box-shadow: 0 0 10px var(--holo-glow);
}

/* ── Mekan mikro-eylemleri ──────────────────────────────────*/

[data-theme="holo"] .venue-micro-action {
  background: var(--holo-glass-2);
  border-color: rgba(63,240,212,0.30);
  box-shadow: inset 0 1px 0 rgba(63,240,212,0.16);
}
[data-theme="holo"] .venue-micro-action:hover {
  border-color: var(--clr-teal);
  box-shadow: 0 0 0 1px rgba(63,240,212,0.45), 0 6px 24px rgba(63,240,212,0.20);
}

/* ── Topbar & dock ──────────────────────────────────────────*/

[data-theme="holo"] .topbar {
  background: rgba(5,10,20,0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--holo-line);
}

[data-theme="holo"] .topbar-icon-btn:hover,
[data-theme="holo"] .btn-icon:hover {
  box-shadow: 0 0 0 1px var(--holo-glow), 0 0 16px rgba(63,216,255,0.25);
}

[data-theme="holo"] #venue-bottom-bar {
  background: rgba(5,10,20,0.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--holo-line);
}

[data-theme="holo"] .dock-item:hover .dock-circle,
[data-theme="holo"] .dock-item.active .dock-circle {
  filter: drop-shadow(0 0 8px var(--holo-glow));
}

/* ── Butonlar ───────────────────────────────────────────────*/

[data-theme="holo"] .btn-primary {
  background: linear-gradient(135deg, #3fd8ff, #6ee7ff);
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(63,216,255,0.30);
}
[data-theme="holo"] .btn-primary:hover {
  box-shadow: 0 6px 28px rgba(63,216,255,0.45);
}

[data-theme="holo"] .btn-ghost {
  background: rgba(63,216,255,0.06);
  border-color: var(--holo-line);
}
[data-theme="holo"] .btn-ghost:hover {
  background: rgba(63,216,255,0.12);
  border-color: var(--clr-primary);
}

/* ── Stat satırları — referanstaki ışıklı ilerleme barları ──*/

[data-theme="holo"] .stat-bar-fill,
[data-theme="holo"] .aq-progress-fill,
[data-theme="holo"] .aq-bar-fill {
  background: linear-gradient(90deg, #2bb8e8, #3fd8ff 60%, #7ee7ff);
  box-shadow: 0 0 10px rgba(63,216,255,0.45);
}

[data-theme="holo"] .stat-bar,
[data-theme="holo"] .aq-progress-bar,
[data-theme="holo"] .aq-bar-wrap {
  background: rgba(63,216,255,0.08);
}

/* ── Form alanları ──────────────────────────────────────────*/

[data-theme="holo"] input,
[data-theme="holo"] select,
[data-theme="holo"] textarea {
  background: rgba(8,18,32,0.7);
  border-color: var(--holo-line);
}
[data-theme="holo"] input:focus,
[data-theme="holo"] select:focus,
[data-theme="holo"] textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(63,216,255,0.18);
}

/* ── Sekme / seçili durum ───────────────────────────────────*/

[data-theme="holo"] .tab-btn.active,
[data-theme="holo"] .shop-tab-btn.shop-tab-active {
  box-shadow: 0 2px 14px rgba(63,216,255,0.30);
}

[data-theme="holo"] .theme-option.active .theme-preview {
  box-shadow: 0 0 0 2px var(--clr-primary), 0 0 18px rgba(63,216,255,0.40);
}

/* ── Modal arka planı ───────────────────────────────────────*/

[data-theme="holo"] .modal {
  background: rgba(2,6,14,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Kaydırma çubuğu ────────────────────────────────────────*/

[data-theme="holo"] ::-webkit-scrollbar-thumb {
  background: rgba(63,216,255,0.28);
  border-radius: 8px;
}
[data-theme="holo"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(63,216,255,0.45);
}
[data-theme="holo"] ::-webkit-scrollbar-track { background: transparent; }

/* ── Erişilebilirlik & performans ───────────────────────────
   Hareket azaltma tercihinde akan ışıklar durur (kaybolmaz,
   sabit kalır). Dar ekranlarda blur maliyeti düşürülür. */

@media (prefers-reduced-motion: reduce) {
  [data-theme="holo"] body::before,
  [data-theme="holo"] body::after { animation: none; }
}

@media (max-width: 900px) {
  [data-theme="holo"] { --holo-blur: 10px; }
  [data-theme="holo"] body::after { display: none; }
}