/* Sensational klan teması — artifact'ın renk değişkenlerini mavi-gümüşe çeker, banner'ı ve
   süslemeleri ekler. Sayfanın DOM'una dokunmaz; yalnızca var olan sınıfları biçimlendirir.
   Seçiciler "html:root" ile başlar: bu dosya <head>'de, sayfanın <body> içindeki stillerinden
   önce yüklendiği için onlardan daha özgül olmalı. */

/* ---------- Renkler ---------- */
html:root{
  --bg:#eef1f7; --panel:#fbfcff; --panel2:#f3f5fb; --ink:#141a2e; --muted:#566079; --line:#d3d9e6; --line2:#e3e7f0;
  --gold:#3a55c4; --gold-ink:#2b43a3; --gold-soft:#e2e8fb; --gold-line:#a8b7ea;
  --act:#3a55c4; --act-soft:#e2e8fb; --stg:#6a4bb8; --stg-soft:#ece6f9;
  --mark:#c7d4ff; --shadow:0 1px 0 rgba(20,26,46,.04), 0 10px 26px -14px rgba(30,45,110,.35);
  --silver:linear-gradient(180deg,#2a3352 0%,#46557f 100%);
  --sheen:#ffffff;
  --hero:url("banner-acik.webp"); --hero-sm:url("banner-acik-960.webp"); --hero-pos:71% 62%;
  --arka:url("arka-acik.webp"); --arka-op:.16;
  --amblem:url("amblem.webp"); --amblem-filtre:brightness(.82) contrast(1.25) drop-shadow(0 0 .7px #1a2347) drop-shadow(0 0 .7px #1a2347) drop-shadow(0 3px 6px rgba(30,45,110,.35));
}
@media (prefers-color-scheme: dark){
  html:root:not([data-theme="light"]){
    --bg:#0a0e1a; --panel:#111729; --panel2:#0d1222; --ink:#e4e8f2; --muted:#98a2bd; --line:#252e4a; --line2:#1c2440;
    --gold:#8aa4ff; --gold-ink:#a9bcff; --gold-soft:#1a2347; --gold-line:#3b4c8f;
    --act:#8aa4ff; --act-soft:#1a2347; --stg:#b59cf0; --stg-soft:#231d3d;
    --mark:#2d3b78; --shadow:0 1px 0 rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.8);
    --silver:linear-gradient(180deg,#ffffff 0%,#c9d2e8 55%,#8e9bbd 100%);
    --sheen:#8fa6ff;
    --hero:url("banner-koyu.webp"); --hero-sm:url("banner-koyu-960.webp"); --hero-pos:73% 60%;
    --arka:url("arka-koyu.webp"); --arka-op:.22; --amblem-filtre:drop-shadow(0 0 10px rgba(143,166,255,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.6));
  }
}
html:root[data-theme="dark"]{
  --bg:#0a0e1a; --panel:#111729; --panel2:#0d1222; --ink:#e4e8f2; --muted:#98a2bd; --line:#252e4a; --line2:#1c2440;
  --gold:#8aa4ff; --gold-ink:#a9bcff; --gold-soft:#1a2347; --gold-line:#3b4c8f;
  --act:#8aa4ff; --act-soft:#1a2347; --stg:#b59cf0; --stg-soft:#231d3d;
  --mark:#2d3b78; --shadow:0 1px 0 rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.8);
  --silver:linear-gradient(180deg,#ffffff 0%,#c9d2e8 55%,#8e9bbd 100%);
  --sheen:#8fa6ff;
  --hero:url("banner-koyu.webp"); --hero-sm:url("banner-koyu-960.webp"); --hero-pos:73% 60%;
  --arka:url("arka-koyu.webp"); --arka-op:.22; --amblem-filtre:drop-shadow(0 0 10px rgba(143,166,255,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
html:root{ --hero-h:clamp(300px, 36vw, 520px); --hero-ust:120px }
@media (max-width:1100px){ html:root{ --hero-ust:70px } }
@media (max-width:700px){ html:root{ --hero-h:250px; --hero-ust:70px } }

html:root body{ background:var(--bg); scrollbar-color:var(--gold-line) var(--bg) }
::selection{ background:color-mix(in srgb, var(--gold) 30%, transparent) }

/* ---------- Arka plan: tam genişlik banner + sayfa boyu soluk sahne ---------- */
html:root body::before{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--hero-h); z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 45%),
    var(--hero) var(--hero-pos)/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 50%, transparent 100%);
}
@media (max-width:700px){ html:root body::before{ background:var(--hero-sm) var(--hero-pos)/cover no-repeat } }
html:root body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--arka) center/cover no-repeat; opacity:var(--arka-op);
}
html:root .wrap{ position:relative; z-index:1; padding-top:calc(var(--hero-h) - var(--hero-ust)) }

/* ---------- Başlık ---------- */
html:root .top{ border-bottom:0; padding-bottom:20px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent) bottom/100% 1px no-repeat }
html:root .eyebrow::before{ content:"♠ Sensational · "; letter-spacing:.14em }
html:root .top h1{ --amb-w:clamp(44px,5.4vw,60px); --amb-h:calc(var(--amb-w) * 1.085);
  position:relative; padding-left:calc(var(--amb-w) + 14px);
  /* tek satırda metni amblemin ortasına hizala; çok satırda dolgu sıfırlanır */
  padding-block:max(0px, calc((var(--amb-h) - 1.1em) / 2));
  background:var(--silver); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none; filter:drop-shadow(0 2px 10px color-mix(in srgb, var(--bg) 70%, transparent)) }
html:root .top h1::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:var(--amb-w); height:var(--amb-h);
  background:var(--amblem) center/contain no-repeat; filter:var(--amblem-filtre) }
html:root .top p.beta-note{ background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(6px);
  border-left-color:var(--gold) }
html:root .top .btn{ background:color-mix(in srgb, var(--panel) 85%, transparent); backdrop-filter:blur(6px) }

/* ---------- Bölüm başlıkları ---------- */
html:root .presets h2::before, html:root .sec-h::before, html:root .group-h h2::before, html:root .dv-side .card h3::before{
  content:"♠"; color:var(--gold); font-size:.8em; margin-right:.5em; opacity:.85 }
html:root .dv-head h2{ background:var(--silver); -webkit-background-clip:text; background-clip:text; color:transparent }
/* Artifact Marcellus SC'de Türkçe "i"yi ayrı bir <t-i> kutusuna koyup noktasını ::after ile
   çiziyor. Gümüş başlıklarda yazı rengi şeffaf ve gümüş efekt ayrı kutudaki harfe geçmiyor:
   harfe efekti doğrudan uygula, noktaya da başlık rengini ver. */
html:root .top h1 t-i, html:root .dv-head h2 t-i{
  background:var(--silver); -webkit-background-clip:text; background-clip:text; color:transparent }
html:root .top h1 t-i::after, html:root .dv-head h2 t-i::after{ background:var(--ink) }
html:root .dv{ border-top:0; background:linear-gradient(90deg, transparent, var(--gold-line), transparent) top/100% 1px no-repeat }
html:root .legal{ border-top:0; background:linear-gradient(90deg, transparent, var(--gold-line), transparent) top/100% 1px no-repeat }

/* ---------- Kartlar ---------- */
html:root .card, html:root .plate, html:root .list, html:root .preset, html:root .dv-board, html:root .dv-guide{
  background-image:linear-gradient(180deg, color-mix(in srgb, var(--sheen) 5%, transparent), transparent 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--sheen) 14%, transparent), var(--shadow);
}
html:root .plate{ border-color:var(--gold-line) }
html:root .plate-h{ background:
  radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%),
  linear-gradient(180deg, var(--panel2), var(--panel)) }
html:root .plate-h img{ box-shadow:0 0 18px -4px var(--sheen) }

/* ---------- Seçili durumlar ve kontroller ---------- */
html:root .preset[aria-pressed="true"], html:root .cls-switch button[aria-pressed="true"], html:root .dv-tab[aria-pressed="true"], html:root .dv-quick button[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px var(--gold), 0 0 18px -6px var(--sheen) }
html:root .row.cur{ background:linear-gradient(90deg, var(--gold-soft), transparent) }
html:root .btn.primary{ background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 80%, #fff), var(--gold)); border-color:var(--gold);
  box-shadow:0 0 18px -6px var(--sheen) }
html:root .bar i{ background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 45%, #fff));
  box-shadow:0 0 10px -2px var(--sheen) }
html:root .bar.over i{ background:var(--warn); box-shadow:none }
html:root .slot.on{ box-shadow:0 0 16px -6px var(--stg) }

/* ---------- Alt bilgi ---------- */
html:root .legal::before{ content:""; display:block; width:66px; aspect-ratio:365/396; margin:6px 0 8px;
  background:var(--amblem) center/contain no-repeat; filter:var(--amblem-filtre) }

/* ---------- Açık/koyu mod düğmesi (tema.js ekler) ---------- */
html:root .tema-dugme svg{ flex:none }
html:root .tema-dugme-yuzen{ position:fixed; top:12px; right:12px; z-index:50 }

/* ---------- Discord davet düğmesi (tema.js ekler) ----------
   Logodaki gümüş-lacivert dilinde, iki ucu sivri bir plaka. Şekil iç katmanlarda kesilir
   (::before metalik çerçeve, ::after lacivert yüz + üzerine gelince geçen parıltı); düğmenin
   kendisi kesilmez ki ışıma ve klavye odağı plakanın çevresinde görünebilsin. */
html:root .discord-dugme{
  --dd-uc:14px; --dd-ic:13px;
  position:absolute; top:16px; right:20px; z-index:2; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px; padding:12px 28px 12px 24px; white-space:nowrap;
  font:400 15.5px/1 var(--f-head); letter-spacing:.07em; color:#eef2ff; text-decoration:none;
  filter:drop-shadow(0 0 9px rgba(110,135,255,.6)) drop-shadow(0 6px 12px rgba(8,12,40,.45));
  transition:transform .2s ease, filter .2s ease;
}
html:root .discord-dugme::before, html:root .discord-dugme::after{ content:""; position:absolute; z-index:-1; pointer-events:none }
html:root .discord-dugme::before{ inset:0; clip-path:polygon(var(--dd-uc) 0, calc(100% - var(--dd-uc)) 0, 100% 50%, calc(100% - var(--dd-uc)) 100%, var(--dd-uc) 100%, 0 50%);
  background:linear-gradient(135deg,#ffffff 0%,#b4c0e4 20%,#6f80d8 45%,#dfe5f5 70%,#8d9ad0 88%,#ffffff 100%) }
html:root .discord-dugme::after{ inset:1.5px; clip-path:polygon(var(--dd-ic) 0, calc(100% - var(--dd-ic)) 0, 100% 50%, calc(100% - var(--dd-ic)) 100%, var(--dd-ic) 100%, 0 50%);
  background:
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.3) 50%, transparent 62%),
    radial-gradient(120% 150% at 50% -30%, rgba(120,140,255,.6), transparent 60%),
    linear-gradient(180deg,#1d2858 0%,#0c1230 100%);
  background-size:260% 100%, 100% 100%, 100% 100%; background-repeat:no-repeat;
  background-position:160% 0, 0 0, 0 0; transition:background-position .8s ease, filter .2s ease }
html:root .discord-dugme svg{ flex:none; color:#bcc8ff; filter:drop-shadow(0 0 6px rgba(140,160,255,.9)) }
html:root .discord-dugme span{ background:linear-gradient(180deg,#ffffff 0%,#d6ddf3 55%,#a3b0db 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; padding-top:1px }
html:root .discord-dugme:hover{ transform:translateY(-1px);
  filter:drop-shadow(0 0 16px rgba(140,165,255,.95)) drop-shadow(0 8px 14px rgba(8,12,40,.5)) }
html:root .discord-dugme:hover::after{ background-position:-60% 0, 0 0, 0 0; filter:brightness(1.3) }
html:root .discord-dugme:hover::before{ filter:brightness(1.12) }
html:root .discord-dugme:focus-visible{ outline:none;
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 12px rgba(255,255,255,.9)) }
html:root .discord-dugme-yuzen{ position:fixed }
/* Dar ekranda (tema.js düğmeyi .wrap'a koyar) logo banner'ın sağında kaldığı için düğme sol üste geçer. */
@media (max-width:1199.98px){ html:root .discord-dugme{ right:auto; left:20px } }
/* Geniş ekranda tema.js düğmeyi not kutusunun sütununa taşır; düğme notun soluna, başlıkla
   not arasındaki boşluğa oturur. */
html:root .top .side{ position:relative }
html:root .discord-dugme.discord-dugme-notta{ top:0; left:auto; right:calc(100% + 28px); white-space:nowrap }
@media (max-width:520px){ html:root .discord-dugme{ --dd-uc:11px; --dd-ic:10px; top:12px; left:16px; padding:10px 22px 10px 19px; font-size:14px; gap:8px } }
@media (prefers-reduced-motion: reduce){ html:root .discord-dugme, html:root .discord-dugme::after{ transition:none }
  html:root .discord-dugme:hover{ transform:none } html:root .discord-dugme:hover::after{ background-position:160% 0, 0 0, 0 0 } }

/* Not kutusundaki Discord linki */
html:root .beta-note a.not-discord{ color:var(--gold-ink); font-weight:600; text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--gold-ink) 45%, transparent); text-underline-offset:2px }
html:root .beta-note a.not-discord:hover{ text-decoration-color:currentColor }
html:root .beta-note a.not-discord:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px }

/* JavaScript kapalıyken sayfanın üstünde görünen uyarı (scripts/olustur.mjs ekler) */
html:root .noscript-uyari{ position:relative; z-index:3; margin:0; padding:12px 20px; text-align:center;
  font:500 14px/1.5 var(--f-body); color:var(--ink); background:var(--gold-soft); border-bottom:1px solid var(--gold-line) }