/* ==========================================================================
   Karia "Aurora" teması — style.css ve site.css'ten sonra yüklenir.
   Daha koyu zemin, turkuaz ana renk + gök mavisi / mor / pembe / kehribar / yeşil.
   ========================================================================== */
:root{
  --bg:#050608;--surface:#0b0d10;--surface2:#12151a;--panel:#090b0e;--panel-soft:#0b0d10;
  --line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);
  --accent:#3fe0c5;--teal:#3fe0c5;--sky:#38bdf8;--violet:#a78bfa;--pink:#f472b6;--amber:#fbbf24;--green:#4ade80;--blurple:#818cf8;
  --grad:linear-gradient(110deg,#3fe0c5 0%,#38bdf8 45%,#a78bfa 100%);
  --grad-warm:linear-gradient(110deg,#a78bfa 0%,#f472b6 55%,#fbbf24 100%);
}
html{background:var(--bg)}
body,body.site{background:transparent}

/* ---------- Aurora zemin ---------- */
body::before{
  content:"";position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 18% 12%,rgba(63,224,197,.13),transparent 70%),
    radial-gradient(34vmax 28vmax at 86% 8%,rgba(167,139,250,.14),transparent 70%),
    radial-gradient(40vmax 30vmax at 70% 78%,rgba(56,189,248,.09),transparent 70%),
    radial-gradient(30vmax 24vmax at 10% 88%,rgba(244,114,182,.07),transparent 70%);
  filter:saturate(1.2);animation:aurora 38s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 0%,#000 30%,transparent 80%);
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(3vmax,-2vmax,0) rotate(6deg)}
  100%{transform:translate3d(-3vmax,2vmax,0) rotate(-4deg)}
}
.antigravity{opacity:.75}

/* ---------- Renk yardımcıları ----------
   Emojiler turkuaz çizildiği için renk tonu kaydırılarak (hue-rotate) diğer renklere boyanır. */
.c-teal{--c:var(--teal);--hue:0deg}
.c-sky{--c:var(--sky);--hue:28deg}
.c-blurple{--c:var(--blurple);--hue:62deg}
.c-violet{--c:var(--violet);--hue:88deg}
.c-pink{--c:var(--pink);--hue:158deg}
.c-amber{--c:var(--amber);--hue:228deg}
.c-green{--c:var(--green);--hue:-30deg}
.tint img:not(.no-tint){filter:hue-rotate(var(--hue,0deg)) saturate(1.15)}
.no-tint{filter:none!important}

/* ---------- Gezinme ---------- */
.nav-wrap.container{
  background:rgba(11,13,16,.62);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 20px 50px rgba(0,0,0,.55);
}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links a{color:#c9d1d3}
.nav-links a:hover,.nav-links a[aria-current=page]{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.nav-links a[aria-current=page]{background:linear-gradient(#15191e,#15191e) padding-box,var(--grad) border-box;border:1px solid transparent;color:#fff;box-shadow:0 0 22px -8px rgba(56,189,248,.7)}

/* ---------- Düğmeler ---------- */
.btn-primary,.site .btn-primary{background:var(--grad);background-size:160% 100%;color:#04121a;box-shadow:0 10px 30px -8px rgba(56,189,248,.55),inset 0 1px 0 rgba(255,255,255,.35);transition:background-position .4s,transform .18s,box-shadow .18s}
.btn-primary:hover,.site .btn-primary:hover{background:var(--grad);background-size:160% 100%;background-position:100% 0;transform:translateY(-1px);box-shadow:0 14px 36px -8px rgba(167,139,250,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- Hero ---------- */
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.hero h1 .grad-warm{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#9aa6aa}
.orbit path{stroke:url(#orbitGrad)}
.orbit circle{fill:#fff;filter:drop-shadow(0 0 6px rgba(56,189,248,.9))}
.node{
  background:linear-gradient(160deg,color-mix(in srgb,var(--c,#3fe0c5) 26%,#0e1114),#0b0d10 85%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#3fe0c5) 38%,transparent),0 20px 44px rgba(0,0,0,.6),0 0 40px -12px var(--c,#3fe0c5);
}
.node-mid,.node-big{background:linear-gradient(160deg,color-mix(in srgb,var(--c,#3fe0c5) 16%,#101317),#0a0c0f 85%)}
.n-c{background:#000;box-shadow:0 0 0 2px transparent,0 0 0 2px #3fe0c5,0 0 70px -6px rgba(63,224,197,.55),0 0 120px -20px rgba(167,139,250,.6)}
.n-c::after{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:3px;background:conic-gradient(from var(--spin,0deg),#3fe0c5,#38bdf8,#a78bfa,#f472b6,#3fe0c5);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ring-spin 6s linear infinite;pointer-events:none}
.n-c{overflow:visible}
.n-c img{border-radius:inherit}
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ring-spin{to{--spin:360deg}}

/* ---------- Yüzen kutucuklar ---------- */
.float-tile{
  background:linear-gradient(170deg,color-mix(in srgb,var(--c,#3fe0c5) 14%,#111418),#0a0c0f 80%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#3fe0c5) 26%,transparent),0 24px 50px rgba(0,0,0,.55);
}
.float-tile.is-banner,.float-tile.is-logo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 50px rgba(0,0,0,.55)}
.float-copy h2{background:linear-gradient(180deg,#fff 30%,#b8c4c8);-webkit-background-clip:text;background-clip:text;color:transparent}

.icon-tile{background:linear-gradient(160deg,color-mix(in srgb,var(--c,#3fe0c5) 20%,#12151a),#0b0d10);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#3fe0c5) 32%,transparent),0 16px 36px rgba(0,0,0,.45),0 0 36px -14px var(--c,#3fe0c5)}

/* ---------- Bölüm başlıkları ---------- */
.big-head h2 .grad,.arc-card h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.big-head p{color:#9aa6aa}

/* ---------- Kapı kartları: her biri kendi renginde ---------- */
.door{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.door::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--c,#3fe0c5) 16%,transparent),transparent 60%);opacity:.9;transition:opacity .3s}
.door>*{position:relative}
a.door:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#3fe0c5) 60%,transparent),0 24px 60px -24px var(--c,#3fe0c5);transform:translateY(-3px)}
a.door{transition:box-shadow .25s,transform .25s,opacity .7s,filter .7s}
.door h3{color:#fff}
.door-art{margin-bottom:18px}
.art-chart{background:linear-gradient(90deg,rgba(255,255,255,.03) 0 13%,transparent 13% 87%,rgba(255,255,255,.03) 87%)}
.mini,.chip,.sheet,.live-tile,.ring i,.ring-core{background:rgba(18,21,26,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 16px 30px rgba(0,0,0,.4)}
.bars{border-bottom-color:rgba(255,255,255,.08)}
.bars i{background:rgba(255,255,255,.08)}
.bars i:nth-child(4){background:linear-gradient(var(--violet),#6d28d9)}
.bars i:nth-child(2){background:linear-gradient(color-mix(in srgb,var(--violet) 55%,#12151a),#12151a)}
.art-rings{background:radial-gradient(circle,transparent 0 62px,rgba(63,224,197,.16) 62px 63px,transparent 63px 112px,rgba(63,224,197,.12) 112px 113px,transparent 113px 170px,rgba(63,224,197,.08) 170px 171px,transparent 171px)}
.chip-icon{background:color-mix(in srgb,var(--teal) 20%,#0b0d10)}
.chip-2{background:#15201f}.chip-3{background:#101917}
.art-cards{background:repeating-linear-gradient(90deg,rgba(74,222,128,.08) 0 1px,transparent 1px 46px)}
.art-badge{background:linear-gradient(160deg,color-mix(in srgb,var(--green) 28%,#0e1114),#0b0d10);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 40%,transparent),0 0 40px -10px var(--green)}
.live-tile strong{color:#fff}
.live-tile:nth-child(1) strong{color:var(--sky)}
.live-tile:nth-child(2) strong{color:var(--pink)}
.live-tile:nth-child(3) strong{color:var(--green)}
.live-tile strong[data-tone=on]{color:var(--win)}
.ring-core{background:color-mix(in srgb,var(--blurple) 22%,#0b0d10);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blurple) 45%,transparent),0 0 50px -10px var(--blurple)}

/* ---------- Adımlar (yay) ---------- */
.arc-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);position:relative}
.arc-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 100%,rgba(167,139,250,.14),transparent 70%),radial-gradient(40% 40% at 50% 0%,rgba(56,189,248,.1),transparent 70%)}
.arc-card>*{position:relative}
.arc-stage button{background:linear-gradient(160deg,color-mix(in srgb,var(--c,#3fe0c5) 16%,#12151a),#0b0d10);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#3fe0c5) 25%,transparent)}
.arc-stage [data-pos="0"] button{box-shadow:inset 0 0 0 1.5px var(--c,#3fe0c5),0 0 60px -14px var(--c,#3fe0c5)}
.arc-caption strong{color:#fff}

/* ---------- Özellik kartları ---------- */
.quote{background:linear-gradient(180deg,color-mix(in srgb,var(--c,#3fe0c5) 9%,#0d1013),#0a0c0f 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#3fe0c5) 22%,transparent),0 24px 50px rgba(0,0,0,.5)}
.quote small{color:var(--c,var(--accent))}
.quote-nav button{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.quote-nav button:hover{background:rgba(255,255,255,.09)}

/* ---------- Alt bilgi ---------- */
.footer-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.footer-col a:hover{color:#fff}
.footer-social{background:color-mix(in srgb,var(--blurple) 18%,#0b0d10);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blurple) 35%,transparent)}
.footer-social:hover{box-shadow:inset 0 0 0 1px var(--blurple),0 0 30px -8px var(--blurple)}
.footer-social img{filter:hue-rotate(62deg) saturate(1.15)}
.footer-word{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}

/* ---------- Minecraft sayfası ---------- */
.b-card{background:var(--panel-soft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.b-coin{background:linear-gradient(160deg,color-mix(in srgb,var(--amber) 22%,#0b0d10),#0b0d10 70%)}
.b-coin .b-art{filter:hue-rotate(228deg)}
.b-link{background:linear-gradient(200deg,color-mix(in srgb,var(--sky) 22%,#0b0d10),#0b0d10 70%)}
.b-link .b-art{filter:hue-rotate(28deg)}
.b-discord{background:linear-gradient(160deg,color-mix(in srgb,var(--blurple) 22%,#0b0d10),#0b0d10 75%)}
.b-help{background:linear-gradient(200deg,color-mix(in srgb,var(--violet) 20%,#0b0d10),#0b0d10 75%)}
.b-online-main strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.b-wide{background:linear-gradient(90deg,rgba(5,6,8,.94) 30%,rgba(5,6,8,.25)),url('/img/karia-banner.png') right 40%/cover}

@media (prefers-reduced-motion:reduce){
  body::before,.n-c::after{animation:none}
}