/* ==========================================================================
   Beacon — TEMA MÜHƏRRİKİ
   Bütün rənglər yalnız bu faylda təyin olunur; style.css yalnız token istifadə edir.
   Tətbiq: <html data-theme="aurora" data-base="dark" data-font="grotesk"
                 data-radius="soft" data-density="comfortable" data-hero="aurora">
   Admin paneldən dəyişdirilən accent rəngləri inline style ilə override olunur.
   ========================================================================== */

/* ---------------------------------------------------------------- FONTLAR */
:root[data-font="grotesk"] { --ff-head:"Space Grotesk"; --ff-body:"Inter"; --head-ls:-.03em; --head-w:700; }
:root[data-font="sora"]    { --ff-head:"Sora";          --ff-body:"Inter"; --head-ls:-.035em; --head-w:700; }
:root[data-font="manrope"] { --ff-head:"Manrope";       --ff-body:"Manrope"; --head-ls:-.03em; --head-w:800; }
:root[data-font="playfair"]{ --ff-head:"Playfair Display"; --ff-body:"Inter"; --head-ls:-.01em; --head-w:600; }
:root[data-font="mono"]    { --ff-head:"JetBrains Mono"; --ff-body:"Inter"; --head-ls:-.04em; --head-w:700; }

:root{
  --font-head:var(--ff-head,"Space Grotesk"),system-ui,sans-serif;
  --font-body:var(--ff-body,"Inter"),system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* --------------------------------------------------------------- RADİUS */
:root[data-radius="sharp"]{ --r-xs:3px;  --r-sm:6px;  --r:10px; --r-lg:14px; --r-xl:18px; --r-pill:8px;   --r-ic:8px; }
:root[data-radius="soft"] { --r-xs:6px;  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:100px; --r-ic:14px; }
:root[data-radius="round"]{ --r-xs:10px; --r-sm:16px; --r:24px; --r-lg:34px; --r-xl:44px; --r-pill:100px; --r-ic:20px; }

/* -------------------------------------------------------------- SIXLIQ */
:root[data-density="compact"]     { --sec-pad:74px;  --card-pad:24px; --gap:16px; --lead:1.6; }
:root[data-density="comfortable"] { --sec-pad:108px; --card-pad:30px; --gap:22px; --lead:1.68; }
:root[data-density="airy"]        { --sec-pad:148px; --card-pad:38px; --gap:28px; --lead:1.78; }

/* ==========================================================================
   TEMALAR — hər tema öz fon/mətn/xətt palitrasını və default accent-ləri verir
   ========================================================================== */

/* ---- 1. AURORA (default) — gecə mavisi + siyan/bənövşəyi ---------------- */
:root[data-theme="aurora"]{
  --bg:#060b18; --bg-2:#080f20; --panel:#0b1226;
  --panel-1:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.018);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --text:#e9eefb; --muted:#94a3c0; --muted-2:#6c7c9c;
  --on-accent:#04101c;
  --a1:#31d9ff; --a2:#6f5cff; --a3:#ff8ad1;
  --glow:.42;
}

/* ---- 2. CARBON — qara karbon + qızıl (premium, ciddi) ------------------ */
:root[data-theme="carbon"]{
  --bg:#0a0a0b; --bg-2:#101012; --panel:#151517;
  --panel-1:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.015);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#f2efe9; --muted:#a3a09a; --muted-2:#7a7873;
  --on-accent:#171204;
  --a1:#f0b64a; --a2:#e08e3c; --a3:#fce1a8;
  --glow:.3;
}

/* ---- 3. OCEAN — dərin okean + turkuaz/yaşıl --------------------------- */
:root[data-theme="ocean"]{
  --bg:#04141c; --bg-2:#061c26; --panel:#08222e;
  --panel-1:rgba(255,255,255,.06); --panel-2:rgba(255,255,255,.02);
  --line:rgba(160,240,255,.12); --line-2:rgba(160,240,255,.22);
  --text:#e4f6fb; --muted:#8fb6c2; --muted-2:#6a929e;
  --on-accent:#022029;
  --a1:#2ff1c8; --a2:#22a6e0; --a3:#a6f7e2;
  --glow:.4;
}

/* ---- 4. ROYAL — bənövşəyi/maqenta lüks -------------------------------- */
:root[data-theme="royal"]{
  --bg:#0b0718; --bg-2:#120b22; --panel:#180f2c;
  --panel-1:rgba(255,255,255,.06); --panel-2:rgba(255,255,255,.02);
  --line:rgba(200,170,255,.14); --line-2:rgba(200,170,255,.26);
  --text:#f0eaff; --muted:#a698c8; --muted-2:#7f72a0;
  --on-accent:#12061f;
  --a1:#a855f7; --a2:#ec4899; --a3:#facc15;
  --glow:.45;
}

/* ---- 5. EMERALD — texnoloji zümrüd ------------------------------------ */
:root[data-theme="emerald"]{
  --bg:#04140f; --bg-2:#061c15; --panel:#08251b;
  --panel-1:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.018);
  --line:rgba(150,255,210,.12); --line-2:rgba(150,255,210,.24);
  --text:#e6fbf1; --muted:#8fc2ac; --muted-2:#679b85;
  --on-accent:#02231a;
  --a1:#34d399; --a2:#10b981; --a3:#a7f3d0;
  --glow:.38;
}

/* ---- 6. SUNSET — tünd şabalıdı + narıncı/mərcan ----------------------- */
:root[data-theme="sunset"]{
  --bg:#140a0c; --bg-2:#1c0f11; --panel:#241417;
  --panel-1:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.018);
  --line:rgba(255,190,170,.13); --line-2:rgba(255,190,170,.25);
  --text:#fdeee9; --muted:#c9a79e; --muted-2:#9d7d75;
  --on-accent:#22090a;
  --a1:#ff7a45; --a2:#ff4d6d; --a3:#ffd166;
  --glow:.4;
}

/* ---- 7. NORDIC — işıqlı, minimal, korporativ -------------------------- */
:root[data-theme="nordic"]{
  --bg:#f6f8fc; --bg-2:#eef2f9; --panel:#ffffff;
  --panel-1:rgba(255,255,255,.9); --panel-2:rgba(255,255,255,.6);
  --line:rgba(16,32,64,.10); --line-2:rgba(16,32,64,.2);
  --text:#0d1a2f; --muted:#4d5f7a; --muted-2:#7d8ba3;
  --on-accent:#ffffff;
  --a1:#2563eb; --a2:#7c3aed; --a3:#0ea5e9;
  --glow:.18;
}

/* ---- İşıqlı rejimin universal düzəlişləri ----------------------------- */
:root[data-base="light"]{
  --panel-1:rgba(255,255,255,.92);
  --panel-2:rgba(255,255,255,.65);
  --shadow:0 22px 50px -24px rgba(16,32,64,.35);
  --shadow-sm:0 10px 24px -14px rgba(16,32,64,.3);
}
:root[data-base="dark"]{
  --shadow:0 28px 64px -22px rgba(0,0,0,.8);
  --shadow-sm:0 14px 34px -18px rgba(0,0,0,.7);
}

/* ---- Törəmə tokenlər (bütün temalar üçün ortaq) ----------------------- */
:root{
  --grad:linear-gradient(120deg,var(--a1) 0%,var(--a2) 55%,var(--a3) 100%);
  --grad-r:linear-gradient(300deg,var(--a1) 0%,var(--a2) 55%,var(--a3) 100%);
  --grad-soft:linear-gradient(135deg,
      color-mix(in srgb,var(--a1) 18%,transparent),
      color-mix(in srgb,var(--a2) 18%,transparent));
  --a1-10:color-mix(in srgb,var(--a1) 10%,transparent);
  --a1-15:color-mix(in srgb,var(--a1) 15%,transparent);
  --a1-25:color-mix(in srgb,var(--a1) 25%,transparent);
  --a1-40:color-mix(in srgb,var(--a1) 40%,transparent);
  --a1-60:color-mix(in srgb,var(--a1) 60%,transparent);
  --a2-15:color-mix(in srgb,var(--a2) 15%,transparent);
  --a2-30:color-mix(in srgb,var(--a2) 30%,transparent);
  --a3-20:color-mix(in srgb,var(--a3) 20%,transparent);
  --surface:var(--panel-1);
  --glass:color-mix(in srgb,var(--bg) 72%,transparent);
  --ok:#3ddc97; --warn:#ffb648; --err:#ff6b6b;
}

/* ==========================================================================
   HERO FON STİLLƏRİ
   ========================================================================== */
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero__bg > *{position:absolute}

/* grid */
:root[data-hero="grid"] .hero__bg::after,
:root[data-hero="aurora"] .hero__bg::after,
:root[data-hero="beams"] .hero__bg::after{
  content:"";position:absolute;inset:-20% -10% 0;
  background-image:
    linear-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 72%);
}

/* aurora blobs */
.blob{border-radius:50%;filter:blur(90px);opacity:calc(var(--glow) + .1)}
:root[data-hero="aurora"] .blob-1{width:640px;height:640px;left:-8%;top:-22%;background:var(--a1)}
:root[data-hero="aurora"] .blob-2{width:560px;height:560px;right:-6%;top:-10%;background:var(--a2)}
:root[data-hero="aurora"] .blob-3{width:440px;height:440px;left:38%;bottom:-30%;background:var(--a3);opacity:calc(var(--glow) * .6)}
:root[data-hero="aurora"] .blob{animation:drift 22s ease-in-out infinite alternate}
:root[data-hero="aurora"] .blob-2{animation-delay:-7s}
:root[data-hero="aurora"] .blob-3{animation-delay:-13s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,3%,0) scale(1.08)}
  100%{transform:translate3d(-3%,-4%,0) scale(.96)}
}

/* mesh */
:root[data-hero="mesh"] .hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 60% at 15% 15%,color-mix(in srgb,var(--a1) 45%,transparent),transparent 60%),
    radial-gradient(55% 55% at 85% 10%,color-mix(in srgb,var(--a2) 45%,transparent),transparent 60%),
    radial-gradient(60% 60% at 70% 85%,color-mix(in srgb,var(--a3) 35%,transparent),transparent 60%),
    radial-gradient(50% 50% at 25% 90%,color-mix(in srgb,var(--a2) 30%,transparent),transparent 60%);
  filter:blur(40px);opacity:calc(var(--glow) + .12);
  animation:meshShift 26s ease-in-out infinite alternate;
}
@keyframes meshShift{to{transform:scale(1.15) rotate(6deg)}}

/* beams — fırlanan mayak şüası */
:root[data-hero="beams"] .hero__bg::before{
  content:"";position:absolute;left:-10%;top:-40%;width:70%;height:180%;
  background:conic-gradient(from 200deg at 0% 50%,
      transparent 0deg,
      color-mix(in srgb,var(--a1) 30%,transparent) 10deg,
      transparent 24deg,
      color-mix(in srgb,var(--a2) 22%,transparent) 34deg,
      transparent 48deg);
  transform-origin:0 50%;animation:sweep 16s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}

/* waves */
:root[data-hero="waves"] .hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 38px,
      color-mix(in srgb,var(--a1) 10%,transparent) 38px 40px),
    radial-gradient(80% 70% at 50% 0%,color-mix(in srgb,var(--a2) 30%,transparent),transparent 70%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 10%,transparent 78%);
  animation:waveShift 18s linear infinite;
}
@keyframes waveShift{to{background-position:400px 0,0 0}}

/* plain */
:root[data-hero="plain"] .hero__bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% -10%,color-mix(in srgb,var(--a1) 22%,transparent),transparent 70%);
}

/* ---- Dənəvər tekstura (grain) ---------------------------------------- */
:root[data-grain="on"] body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Kursor işıqlandırması (spotlight) ------------------------------- */
:root[data-spotlight="on"] .spotlight{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:1;pointer-events:none;
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,color-mix(in srgb,var(--a1) 12%,transparent),transparent 65%);
}
:root[data-spotlight="on"] .spotlight.is-on{opacity:1}

/* ---- Animasiyalar söndürülüb ----------------------------------------- */
:root[data-anim="off"] *,
:root[data-anim="off"] *::before,
:root[data-anim="off"] *::after{
  animation:none !important;transition-duration:.01ms !important
}
:root[data-anim="off"] .reveal{opacity:1 !important;transform:none !important}