:root{
  /* Gece gökyüzü: yapışkan cam üst bar, zodyak çarklı giriş, yıldız alanının üstünde süzülen cam bölümler.
     Renkler aktif paletten JS ile yazılır; aşağıdakiler varsayılan "Gece Yarısı Altını". */
  --bg:#070714; --bg2:#1d1240; --surface:#141230;
  --primary:#e8c47c; --secondary:#d97aa6; --accent:#7fd3ff;
  --text:#f3ecdf; --muted:#a9a3bf;
  --font-display:"Cinzel", "Trajan Pro", Georgia, serif;
  --font-body:"Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sym:"Noto Sans Symbols", "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", serif;
  --line: color-mix(in srgb, var(--text) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--primary) 42%, transparent);
  --glass: color-mix(in srgb, var(--surface) 58%, transparent);
  --glass-hi: color-mix(in srgb, var(--surface) 84%, transparent);
  /* Kartlar için: arkadaki canlı yıldız alanını her karede yeniden bulanıklaştırmamak adına backdrop-filter yerine daha dolgun cam rengi */
  --glass-solid: color-mix(in srgb, var(--surface) 76%, transparent);
  --glow: color-mix(in srgb, var(--primary) 55%, transparent);
  --soft: color-mix(in srgb, var(--text) 80%, transparent);
  --danger:#ff7a7a; --ok:#5ad19a; --warn:#f2b94b;
  --r-lg:26px; --r-md:16px; --r-sm:10px;
  --wrap:1200px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100% }
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-4;
  background:
    radial-gradient(120% 75% at 50% -12%, var(--bg2) 0%, transparent 62%),
    radial-gradient(80% 60% at 100% 110%, color-mix(in srgb, var(--bg2) 70%, transparent) 0%, transparent 60%),
    var(--bg);
}
img{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit; color:inherit }
h1,h2,h3,h4{ text-wrap:balance }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px }
::selection{ background:color-mix(in srgb, var(--primary) 40%, transparent); color:var(--text) }
.sym{ font-family:var(--font-sym); font-style:normal }
.muted{ color:var(--muted) }
.w100{ width:100%; justify-content:center }
.skip{ position:absolute; left:-999px; top:8px; z-index:500; padding:10px 16px; background:var(--primary); color:var(--bg); border-radius:10px }
.skip:focus{ left:12px }

/* ---------- Gökyüzü katmanları ---------- */
#sky,#trail{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none }
#sky{ z-index:-2 }
#trail{ z-index:95 }
.nebula{ position:fixed; inset:-10%; z-index:-3; pointer-events:none; overflow:hidden }
/* Performans: blur filtresi ve karışım modu yerine yumuşak geçişli degrade; yalnızca transform canlandırılır (ekran kartı katmanında) */
.nebula i{ position:absolute; border-radius:50%; opacity:.5; animation:drift 30s ease-in-out infinite alternate; will-change:transform }
.nebula i:nth-child(1){ width:58vw; height:58vw; left:-10vw; top:-12vw; background:radial-gradient(circle, color-mix(in srgb, var(--secondary) 50%, transparent) 0%, color-mix(in srgb, var(--secondary) 18%, transparent) 38%, transparent 70%) }
.nebula i:nth-child(2){ width:50vw; height:50vw; right:-8vw; top:22vh; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent) 0%, color-mix(in srgb, var(--accent) 11%, transparent) 38%, transparent 70%); animation-duration:36s; animation-delay:-9s }
.nebula i:nth-child(3){ width:64vw; height:64vw; left:18vw; bottom:-34vw; background:radial-gradient(circle, color-mix(in srgb, var(--primary) 28%, transparent) 0%, color-mix(in srgb, var(--primary) 10%, transparent) 38%, transparent 70%); animation-duration:44s; animation-delay:-18s }
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.no-nebula .nebula{ display:none }

/* ---------- Ortak efektler ---------- */
.shimmer{
  background:linear-gradient(100deg, var(--primary) 0%, var(--text) 18%, var(--secondary) 36%, var(--primary) 52%, var(--accent) 72%, var(--text) 86%, var(--primary) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 10s linear infinite;
}
@keyframes shimmer{ to{ background-position:-200% center } }
@keyframes drift{ 0%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(6vw,4vh,0) scale(1.15) } 100%{ transform:translate3d(-4vw,-3vh,0) scale(.95) } }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes spinrev{ to{ transform:rotate(-360deg) } }
@keyframes rot{ to{ --ang:360deg } }
@keyframes twinkle{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.7) } }
@keyframes breathe{ 0%,100%{ opacity:.65; transform:scale(1) } 50%{ opacity:1; transform:scale(1.08) } }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes sweep{ 0%,55%{ left:-60% } 100%{ left:140% } }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent), 0 8px 28px -8px var(--glow) } 50%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 85%, transparent), 0 10px 46px -4px var(--glow) } }
@keyframes rise{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes popIn{ from{ opacity:0; transform:translateY(18px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes shake{ 10%,90%{ transform:translateX(-2px) } 20%,80%{ transform:translateX(4px) } 30%,50%,70%{ transform:translateX(-8px) } 40%,60%{ transform:translateX(8px) } }
@keyframes marquee{ to{ transform:translateX(-50%) } }
@keyframes lineflow{ to{ background-position:-200% 0 } }

/* ---------- Butonlar ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:999px;
  text-decoration:none; font-weight:500; letter-spacing:.06em; font-size:.95rem; cursor:pointer;
  border:1px solid var(--line-strong); background:color-mix(in srgb, var(--surface) 72%, transparent);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background .35s;
}
.btn:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:0 0 26px -6px var(--glow), inset 0 0 18px -10px var(--glow) }
.btn .arr{ transition:transform .35s var(--ease) }
.btn:hover .arr{ transform:translateX(4px) }
.btn-gold, .btn-login{
  position:relative; overflow:hidden; color:var(--bg); border:0; font-weight:600;
  background:linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--secondary)));
  animation:pulseGlow 3.4s ease-in-out infinite;
}
.btn-gold::after, .btn-login::after{
  content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform:skewX(-20deg);
  animation:sweep 4s ease-in-out infinite; pointer-events:none;
}
.btn-gold:hover{ border-color:transparent }
.btn-sm{ padding:9px 18px; font-size:.85rem }

/* ---------- Üst bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 62%, transparent));
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; opacity:.75;
  background:linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--accent), var(--primary), transparent);
  background-size:200% 100%; animation:lineflow 8s linear infinite;
}
.topbar-in{ max-width:var(--wrap); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0 }
.brand-mark{ position:relative; flex:none; width:46px; height:46px; display:grid; place-items:center; font-size:22px; color:var(--primary); border-radius:50% }
.brand-mark::before{
  content:""; position:absolute; inset:0; border-radius:50%; padding:1.5px;
  background:conic-gradient(from 0deg, var(--primary), var(--secondary), var(--accent), transparent 70%, var(--primary));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin 7s linear infinite;
}
.brand-mark::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%) }
.brand-mark .sym{ position:relative; z-index:1; text-shadow:0 0 14px var(--glow) }
.brand-text{ display:flex; flex-direction:column; min-width:0 }
.brand-name{ font-family:var(--font-display); font-size:1.18rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; white-space:nowrap; line-height:1.2 }
.brand-tag{ font-size:.7rem; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nav{ display:flex; gap:4px; margin-left:auto }
.nav a{
  position:relative; padding:8px 14px; text-decoration:none; font-size:.92rem; letter-spacing:.05em;
  color:var(--soft); border-radius:999px; transition:color .3s, background .3s;
}
.nav a:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 6%, transparent) }
.nav a::after{ content:""; position:absolute; left:50%; bottom:3px; width:0; height:1px; background:var(--primary); box-shadow:0 0 8px var(--primary); transition:left .35s var(--ease), width .35s var(--ease) }
.nav a:hover::after{ left:22%; width:56% }
.btn-login{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; text-decoration:none; font-size:.86rem; letter-spacing:.06em; white-space:nowrap; flex:none; transition:transform .3s var(--ease) }
.btn-login:hover{ transform:translateY(-2px) scale(1.02) }
.btn-login .sym{ font-size:.95rem }

/* ---------- Giriş (hero) ---------- */
.hero{ max-width:var(--wrap); margin:0 auto; padding:64px 24px 40px; display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center }
.hero-copy > *{ animation:rise .9s var(--ease) both }
.hero-copy > *:nth-child(2){ animation-delay:.08s }
.hero-copy > *:nth-child(3){ animation-delay:.16s }
.hero-copy > *:nth-child(4){ animation-delay:.24s }
.hero-copy > *:nth-child(5){ animation-delay:.32s }
.eyebrow{ display:inline-flex; align-items:center; gap:14px; font-size:.78rem; letter-spacing:.34em; text-transform:uppercase; color:var(--primary) }
.eyebrow::before,.eyebrow::after{ content:""; width:38px; height:1px; background:linear-gradient(90deg, transparent, var(--primary)) }
.eyebrow::after{ transform:scaleX(-1) }
.hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.5rem, 5.4vw, 4.6rem); line-height:1.06;
  margin:18px 0 20px; letter-spacing:.01em; filter:drop-shadow(0 0 26px color-mix(in srgb, var(--primary) 30%, transparent));
}
.lead{ font-size:1.14rem; color:var(--soft); max-width:50ch; margin:0 0 30px }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap }
.skybox{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px }
.sky-chip{
  display:flex; align-items:center; gap:12px; padding:10px 18px 10px 12px; border-radius:16px;
  background:var(--glass-solid); border:1px solid var(--line);
}
.sky-chip .g{ font-size:1.55rem; color:var(--primary); width:38px; height:38px; display:grid; place-items:center; text-shadow:0 0 12px var(--glow) }
.sky-chip .g svg{ width:30px; height:30px; overflow:visible }
.sky-chip small{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); line-height:1.3 }
.sky-chip b{ font-weight:500; font-size:.94rem; line-height:1.35 }
.sky-note{ width:100%; font-size:.74rem; color:var(--muted); margin:0; letter-spacing:.02em }

.wheel-wrap{ position:relative; width:min(100%, 520px); aspect-ratio:1; justify-self:center; animation:fadeIn 1.4s var(--ease) both }
.wheel-wrap::before{ content:""; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent) 0%, color-mix(in srgb, var(--primary) 12%, transparent) 42%, transparent 72%); animation:breathe 6s ease-in-out infinite; will-change:transform, opacity }
.wheel{ position:relative; width:100%; height:100%; overflow:visible }
.wheel .spin{ transform-box:fill-box; transform-origin:center; animation:spin 160s linear infinite }
.wheel .spin-rev{ transform-box:fill-box; transform-origin:center; animation:spinrev 90s linear infinite }
.wheel .orb{ transform-box:view-box; transform-origin:0 0; animation:spin 24s linear infinite }
.wheel .orb.o2{ animation-duration:40s; animation-direction:reverse }
.wheel .orb.o3{ animation-duration:62s }
body.no-wheel .wheel .spin, body.no-wheel .wheel .spin-rev, body.no-wheel .wheel .orb{ animation:none }
.wheel .ring{ fill:none; stroke:color-mix(in srgb, var(--primary) 60%, transparent); stroke-width:1 }
.wheel .ring.thin{ stroke:color-mix(in srgb, var(--text) 22%, transparent); stroke-width:.7 }
.wheel .ring.dash{ stroke-dasharray:2 6; stroke:color-mix(in srgb, var(--accent) 55%, transparent) }
.wheel .tick{ stroke:color-mix(in srgb, var(--primary) 55%, transparent); stroke-width:.8 }
.wheel .div{ stroke:color-mix(in srgb, var(--primary) 35%, transparent); stroke-width:.8 }
.wheel .star{ fill:none; stroke:color-mix(in srgb, var(--secondary) 55%, transparent); stroke-width:.8 }
.wheel .star2{ fill:color-mix(in srgb, var(--primary) 5%, transparent); stroke:color-mix(in srgb, var(--accent) 40%, transparent); stroke-width:.6 }
.wheel .wg text{ fill:var(--primary); font-family:var(--font-sym); font-size:19px; opacity:.85 }
.wheel .wg.on text{ fill:var(--text); font-size:22px; opacity:1 }
.wheel .wg-halo{ fill:color-mix(in srgb, var(--primary) 26%, transparent); stroke:var(--primary); stroke-width:.8 }
.wheel .planet{ fill:var(--accent) }
.wheel .planet.p2{ fill:var(--secondary) }
.wheel .planet.p3{ fill:var(--primary) }
.wheel .core{ fill:color-mix(in srgb, var(--bg) 70%, transparent); stroke:color-mix(in srgb, var(--primary) 50%, transparent); stroke-width:1 }
.moon-dark{ fill:color-mix(in srgb, var(--bg2) 75%, #000); stroke:color-mix(in srgb, var(--text) 22%, transparent); stroke-width:.8 }
.moon-lit{ fill:var(--text) }
.wheel .moon-label{ fill:var(--muted); font-family:var(--font-body); font-size:9px; letter-spacing:2px; text-transform:uppercase }

/* ---------- Bölümler ---------- */
.section{ max-width:var(--wrap); margin:0 auto; padding:84px 24px }
.sec-head{ text-align:center; max-width:720px; margin:0 auto 46px }
.sec-head.left{ text-align:left; margin:0 }
.sec-head h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4vw, 3.05rem); line-height:1.1; margin:14px 0 12px; filter:drop-shadow(0 0 18px color-mix(in srgb, var(--primary) 22%, transparent)) }
.sec-head p{ color:var(--muted); margin:0; font-size:1.05rem }
.ornament{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--primary) }
.sec-head.left .ornament{ justify-content:flex-start }
.ornament::before,.ornament::after{ content:""; height:1px; width:min(110px, 18vw); background:linear-gradient(90deg, transparent, var(--primary)) }
.ornament::after{ background:linear-gradient(90deg, var(--primary), transparent) }
.sec-head.left .ornament::before{ display:none }
.ornament .sym{ font-size:.95rem; text-shadow:0 0 10px var(--glow); animation:twinkle 3s ease-in-out infinite }
.empty-note{ grid-column:1/-1; text-align:center; color:var(--muted); padding:40px; border:1px dashed var(--line); border-radius:var(--r-md) }

/* Kayan bant */
.ticker{
  position:relative; overflow:hidden; padding:18px 0; margin:24px 0; border-block:1px solid var(--line);
  background:linear-gradient(90deg, color-mix(in srgb, var(--surface) 45%, transparent), color-mix(in srgb, var(--bg2) 55%, transparent));
  -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  transform:rotate(-1.2deg) scale(1.03);
}
.ticker-track{ display:flex; width:max-content; animation:marquee 46s linear infinite }
.ticker-track span{ display:flex; align-items:center; gap:52px; padding-right:52px; font-family:var(--font-display); font-size:1.25rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap }
.ticker-track span::after{ content:"✦"; font-family:var(--font-sym); color:var(--primary); font-size:.9rem; text-shadow:0 0 10px var(--glow) }
.ticker:hover .ticker-track{ animation-play-state:paused }

/* ---------- Kartlar ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:22px }
.card{
  position:relative; isolation:isolate; display:flex; flex-direction:column; gap:10px; min-height:100%;
  padding:28px 24px 24px; border-radius:var(--r-lg);
  background:var(--glass-solid); border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; z-index:-1;
  background:conic-gradient(from var(--ang), transparent 0 20%, var(--primary), var(--secondary), var(--accent), transparent 80% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s; animation:rot 4s linear infinite;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 17%, transparent), transparent 46%);
  opacity:0; transition:opacity .4s;
}
.card:hover::before, .card:hover::after, .card.hl::before{ opacity:1 }
.card:hover{ box-shadow:0 32px 64px -32px color-mix(in srgb, var(--primary) 50%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent) }
.card.hl{ background:linear-gradient(165deg, color-mix(in srgb, var(--primary) 13%, var(--glass)), var(--glass) 60%) }
.card-icon{
  width:60px; height:60px; display:grid; place-items:center; font-size:1.8rem; border-radius:50%; margin-bottom:6px;
  color:var(--primary); border:1px solid var(--line-strong); text-shadow:0 0 16px var(--glow);
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%);
  transition:transform .6s var(--ease), box-shadow .6s;
}
.card:hover .card-icon{ transform:rotate(-12deg) scale(1.08); box-shadow:0 0 30px -4px var(--glow) }
.card-img{ margin:-28px -24px 8px; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; aspect-ratio:16/10 }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.card:hover .card-img img{ transform:scale(1.06) }
.card .sub{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--primary) }
.card h3{ font-family:var(--font-display); font-weight:600; font-size:1.24rem; line-height:1.25; margin:0; letter-spacing:.02em }
.card p{ margin:0; color:var(--soft); font-size:.97rem }
.badge{
  position:absolute; top:16px; right:16px; padding:4px 10px; border-radius:999px; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bg); background:linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow:0 0 18px -4px var(--glow); font-weight:600;
}
.card-btn{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding-top:10px;
  color:var(--primary); text-decoration:none; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
}
.card-btn .arr{ transition:transform .35s var(--ease) }
.card-btn:hover .arr{ transform:translate(3px,-3px) }

/* Neon stil */
.style-neon .card{
  background:color-mix(in srgb, var(--bg) 72%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 22px -8px var(--accent), inset 0 0 34px -20px var(--accent);
}
.style-neon .card h3{ color:var(--accent); text-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent) }
.style-neon .card-icon{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 60%, transparent); text-shadow:0 0 16px var(--accent) }
.style-neon .card:hover{ box-shadow:0 0 40px -6px var(--accent), inset 0 0 44px -18px var(--accent) }

/* Tarot stil */
.style-tarot .cards{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:24px }
.tarot{ position:relative; perspective:1200px; aspect-ratio:2/3.15; cursor:pointer; border-radius:20px; outline-offset:6px; transition:transform .5s var(--ease) }
.tarot-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1s var(--ease) }
@media (hover:hover){ .tarot:hover .tarot-inner{ transform:rotateY(180deg) } }
.tarot.flipped .tarot-inner{ transform:rotateY(180deg) }
.tarot-face{
  position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px;
}
.tarot-front{
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 40%, color-mix(in srgb, var(--primary) 7%, transparent) 0 4deg, transparent 4deg 18deg),
    linear-gradient(170deg, var(--surface), var(--bg));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 0 0 7px color-mix(in srgb, var(--bg) 55%, transparent), inset 0 0 0 8px color-mix(in srgb, var(--primary) 38%, transparent), 0 24px 50px -28px #000;
}
.tarot-glyph{ position:relative; font-family:var(--font-sym); font-size:3.8rem; line-height:1; color:var(--primary); text-shadow:0 0 22px var(--glow), 0 0 60px var(--glow); animation:floaty 5s ease-in-out infinite }
.tarot-glyph::before, .tarot-glyph::after{ content:""; position:absolute; left:50%; top:50%; border-radius:50%; translate:-50% -50% }
.tarot-glyph::before{ width:118px; height:118px; border:1px dashed color-mix(in srgb, var(--primary) 50%, transparent); animation:spin 22s linear infinite }
.tarot-glyph::after{ width:148px; height:148px; border:1px solid color-mix(in srgb, var(--secondary) 28%, transparent) }
.tarot-name{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.2em; text-transform:uppercase; margin-top:46px }
.tarot-sub{ font-size:.74rem; color:var(--muted); letter-spacing:.1em; margin-top:2px }
.tarot-hint{ position:absolute; bottom:18px; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.75 }
.tc{ position:absolute; font-family:var(--font-sym); font-size:.75rem; color:var(--primary); opacity:.85 }
.tc.tl{ top:16px; left:18px } .tc.tr{ top:16px; right:18px } .tc.bl{ bottom:16px; left:18px } .tc.br{ bottom:16px; right:18px }
.tarot-back{
  transform:rotateY(180deg); align-items:flex-start; justify-content:flex-start; text-align:left; gap:10px; padding:24px 22px;
  background:linear-gradient(200deg, color-mix(in srgb, var(--secondary) 22%, var(--surface)), var(--bg) 85%);
  border:1px solid var(--line-strong); box-shadow:inset 0 0 40px -18px var(--glow);
}
.tb-head{ display:flex; align-items:center; gap:10px; width:100% }
.tb-head .sym{ font-size:1.6rem; color:var(--primary); text-shadow:0 0 12px var(--glow) }
.tb-head b{ font-family:var(--font-display); font-size:1.12rem; letter-spacing:.1em; font-weight:600 }
.tb-head .pill{ margin-left:auto }
.tarot-back p{ margin:0; font-size:.93rem; color:var(--soft); overflow:auto; flex:1; min-height:0 }
.pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line-strong); color:var(--primary) }
.tarot.is-now .tarot-front{ box-shadow:inset 0 0 0 7px color-mix(in srgb, var(--bg) 55%, transparent), inset 0 0 0 8px var(--primary), 0 0 50px -10px var(--glow) }
.now-flag{ position:absolute; top:-10px; left:50%; right:auto; translate:-50% 0; z-index:3; white-space:nowrap }

/* ---------- Blog ---------- */
.blog-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; margin-bottom:38px }
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.chip{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--glass); cursor:pointer;
  font-size:.84rem; letter-spacing:.04em; color:var(--soft); transition:all .3s var(--ease);
}
.chip:hover{ border-color:var(--primary); color:var(--text) }
.chip.on{ background:linear-gradient(135deg, var(--primary), var(--secondary)); color:var(--bg); border-color:transparent; box-shadow:0 0 22px -6px var(--glow); font-weight:500 }
.search{ display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass); color:var(--muted) }
.search:focus-within{ border-color:var(--primary) }
.search input{ border:0; background:none; color:var(--text); font:inherit; font-size:.88rem; width:150px; outline:none }
.posts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px }
.post-card{
  position:relative; isolation:isolate; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  background:var(--glass-solid); border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.post-card:hover{ border-color:var(--line-strong); box-shadow:0 34px 70px -34px color-mix(in srgb, var(--primary) 55%, transparent) }
.post-card.featured{ grid-column:1/-1; display:grid; grid-template-columns:1.15fr 1fr }
.cover{
  position:relative; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center;
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--primary) 42%, transparent), transparent 55%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--secondary) 44%, transparent), transparent 55%),
    conic-gradient(from var(--a, 0deg) at 50% 50%, var(--bg2), var(--surface), color-mix(in srgb, var(--accent) 22%, var(--bg)), var(--bg2));
}
.post-card.featured .cover{ aspect-ratio:auto; min-height:320px; height:100% }
.cover::before{
  content:""; position:absolute; inset:0; opacity:.8;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, var(--text), transparent), radial-gradient(1px 1px at 68% 32%, var(--text), transparent),
    radial-gradient(1.4px 1.4px at 38% 74%, var(--text), transparent), radial-gradient(1px 1px at 86% 12%, var(--text), transparent),
    radial-gradient(1px 1px at 22% 58%, var(--text), transparent), radial-gradient(1.3px 1.3px at 92% 64%, var(--text), transparent),
    radial-gradient(1px 1px at 54% 8%, var(--text), transparent), radial-gradient(1px 1px at 8% 88%, var(--text), transparent);
}
.cover::after{ content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:50%; border:1px dashed color-mix(in srgb, var(--primary) 45%, transparent); animation:spin 40s linear infinite }
.cover .cg{ position:relative; z-index:1; font-family:var(--font-sym); font-size:clamp(3.6rem, 7vw, 5.6rem); color:var(--text); text-shadow:0 0 30px var(--glow), 0 0 80px var(--glow); transition:transform .8s var(--ease) }
.post-card.featured .cover .cg{ font-size:clamp(5rem, 10vw, 8rem) }
.post-card:hover .cover .cg{ transform:scale(1.12) rotate(-6deg) }
.cover.has-img::after, .cover.has-img::before{ display:none }
.cover.has-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease) }
.post-card:hover .cover.has-img img{ transform:scale(1.06) }
.post-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1 }
.post-card.featured .post-body{ padding:38px 40px; justify-content:center }
.meta{ display:flex; gap:6px 14px; flex-wrap:wrap; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.meta .cat{ color:var(--primary) }
.post-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.26rem; line-height:1.28; margin:0 }
.post-card.featured h3{ font-size:clamp(1.6rem, 3vw, 2.3rem) }
.post-card p{ margin:0; color:var(--soft); font-size:.96rem }
.read-more{ margin-top:auto; padding-top:6px; color:var(--primary); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; gap:8px; align-items:center }
.read-more .arr{ transition:transform .35s var(--ease) }
.post-card:hover .read-more .arr{ transform:translateX(6px) }
.feat-flag{ position:absolute; top:16px; left:16px; right:auto; z-index:2 }

/* ---------- Alıntı ---------- */
.quote{ position:relative; overflow:hidden; text-align:center; padding:110px 24px }
.quote::before{
  content:""; position:absolute; left:50%; top:50%; width:1400px; height:1400px; translate:-50% -50%; z-index:-1;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 10%, transparent) 0 2.5deg, transparent 2.5deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 0, transparent 46%); mask:radial-gradient(circle, #000 0, transparent 46%);
  animation:spin 140s linear infinite;
}
.quote blockquote{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:clamp(1.9rem, 4.4vw, 3.4rem); line-height:1.2; max-width:22ch; margin:0 auto }
.quote blockquote::before{ content:"“"; display:block; font-size:5.5rem; line-height:.7; color:var(--primary); opacity:.7; text-shadow:0 0 20px var(--glow) }
.quote cite{ display:block; margin-top:24px; font-style:normal; letter-spacing:.32em; text-transform:uppercase; font-size:.78rem; color:var(--muted) }

/* ---------- Metin bölümü ---------- */
.about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center }
.emblem{ position:relative; width:min(100%, 360px); aspect-ratio:1; justify-self:center; display:grid; place-items:center }
.emblem .orbit{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-strong); animation:spin 32s linear infinite }
.emblem .orbit:nth-child(2){ inset:13%; border-style:dashed; border-color:color-mix(in srgb, var(--accent) 45%, transparent); animation-direction:reverse; animation-duration:22s }
.emblem .orbit:nth-child(3){ inset:26%; border-color:color-mix(in srgb, var(--secondary) 45%, transparent); animation-duration:15s }
.emblem .orbit::after{ content:""; position:absolute; top:-5px; left:calc(50% - 5px); width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 18px 2px var(--primary) }
.emblem .orbit:nth-child(2)::after{ background:var(--accent); box-shadow:0 0 18px 2px var(--accent) }
.emblem .orbit:nth-child(3)::after{ background:var(--secondary); box-shadow:0 0 18px 2px var(--secondary); width:8px; height:8px }
.emblem .core{ position:relative; width:40%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-family:var(--font-sym); font-size:clamp(3.2rem, 7vw, 4.6rem); color:var(--primary); text-shadow:0 0 30px var(--glow); background:radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 72%); overflow:hidden }
.emblem .core img{ width:100%; height:100%; object-fit:cover }
.emblem .core.has-img{ width:64% }
.about-text .sec-head{ margin-bottom:22px }
.about-text .prose{ padding:0; margin:0; font-size:1.06rem }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px }
.chips span{ padding:8px 16px; border-radius:12px; border:1px solid var(--line-strong); background:color-mix(in srgb, var(--primary) 8%, transparent); font-family:var(--font-display); font-size:.86rem; letter-spacing:.08em }

/* Bağlantı butonları bölümü */
.link-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:820px; margin:0 auto }
.link-grid a{ min-width:220px; justify-content:center }

/* ---------- Alt bilgi ---------- */
.footer{ position:relative; margin-top:40px; border-top:1px solid var(--line); background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 85%, transparent)) }
.footer-in{ max-width:var(--wrap); margin:0 auto; padding:56px 24px 34px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px }
.footer h4{ font-family:var(--font-display); letter-spacing:.2em; font-size:.8rem; text-transform:uppercase; color:var(--primary); margin:4px 0 16px; font-weight:600 }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.footer a{ text-decoration:none; color:var(--muted); transition:color .3s }
.footer a:hover{ color:var(--text) }
.footer p{ margin:14px 0; color:var(--muted); font-size:.95rem; max-width:40ch }
.socials{ display:flex; gap:10px; flex-wrap:wrap }
.social{ padding:8px 14px; border-radius:999px; border:1px solid var(--line); font-size:.84rem; display:inline-flex; gap:6px; align-items:center }
.social:hover{ border-color:var(--primary) }
.footer-bottom{ max-width:var(--wrap); margin:0 auto; padding:18px 24px 30px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line) }
.admin-link{ opacity:.5 }
.admin-link:hover{ opacity:1 }

/* ---------- Modal, okuyucu ---------- */
.overlay{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px; background:color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); animation:fadeIn .35s var(--ease) }
.overlay[hidden], .reader[hidden], .admin[hidden], .adm-float[hidden]{ display:none }
.modal{ position:relative; width:min(100%, 430px); border-radius:var(--r-lg); padding:40px 32px 32px; background:var(--glass-hi); border:1px solid var(--line-strong); box-shadow:0 40px 120px -30px #000, 0 0 70px -24px var(--glow); animation:popIn .55s var(--ease) }
.modal.shake{ animation:shake .5s }
.modal h2{ font-family:var(--font-display); text-align:center; margin:14px 0 4px; font-size:1.6rem; font-weight:600 }
.modal > p{ text-align:center; margin:0 0 24px; font-size:.94rem }
.x{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:1.3rem; line-height:1; color:var(--muted) }
.x:hover{ color:var(--text); border-color:var(--primary) }
.medallion{ position:relative; width:84px; height:84px; margin:0 auto; display:grid; place-items:center; border-radius:50%; font-size:2.2rem; color:var(--primary); text-shadow:0 0 18px var(--glow); background:radial-gradient(circle, color-mix(in srgb, var(--primary) 24%, transparent), transparent 70%) }
.medallion::before, .medallion::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--line-strong); animation:spin 12s linear infinite }
.medallion::after{ inset:-10px; border-style:dashed; animation-direction:reverse; animation-duration:18s; border-color:color-mix(in srgb, var(--accent) 40%, transparent) }
.form-err{ min-height:1.4em; margin:0 0 12px; color:var(--danger); font-size:.88rem; text-align:center }

.field{ display:grid; gap:6px; margin-bottom:14px }
.field > label, .lbl{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.inp{
  width:100%; padding:11px 14px; border-radius:11px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 72%, transparent); color:var(--text); font:inherit; font-size:.95rem;
  transition:border-color .2s, box-shadow .2s;
}
.inp:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) }
.inp.bad{ border-color:var(--danger) }
textarea.inp{ min-height:110px; resize:vertical; line-height:1.6 }
select.inp{ cursor:pointer }
select.inp option{ background:var(--surface); color:var(--text) }

.reader{ position:fixed; inset:0; z-index:110; overflow-y:auto; overscroll-behavior:contain; background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--bg2) 38%, var(--bg)), var(--bg) 70%) var(--bg); animation:fadeIn .4s var(--ease) }
.reader-bar{ position:sticky; top:0; z-index:3; height:3px; background:linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); transform-origin:left; transform:scaleX(var(--p, 0)); box-shadow:0 0 12px var(--glow) }
.reader-close{ position:fixed; top:18px; right:18px; z-index:4; display:inline-flex; align-items:center; gap:8px }
.reader-hero{ max-width:900px; margin:0 auto; padding:70px 24px 10px; text-align:center; animation:rise .8s var(--ease) both }
.reader-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.12; margin:18px 0 16px }
.reader-hero .meta{ justify-content:center }
.reader-hero .lead{ margin:16px auto 0; text-align:center }
.reader-cover{ max-width:1000px; margin:34px auto 0; padding:0 24px }
.reader-cover .cover{ border-radius:var(--r-lg); aspect-ratio:21/9; border:1px solid var(--line) }
.reader-cover .cover .cg{ font-size:clamp(5rem, 12vw, 9rem) }
.prose{ max-width:68ch; margin:0 auto; padding:40px 24px 30px; font-size:1.1rem; line-height:1.85; color:color-mix(in srgb, var(--text) 90%, transparent) }
.prose h2{ font-family:var(--font-display); font-weight:600; font-size:1.55rem; margin:1.9em 0 .6em; color:var(--primary); line-height:1.25 }
.prose h3{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin:1.6em 0 .5em }
.prose p{ margin:0 0 1.1em }
.prose > p:first-child::first-letter{ float:left; font-family:var(--font-display); font-size:3.7em; line-height:.86; padding:8px 12px 0 0; color:var(--primary); text-shadow:0 0 20px var(--glow) }
.about-text .prose > p:first-child::first-letter{ float:none; font-size:inherit; padding:0; line-height:inherit; color:inherit; text-shadow:none; font-family:inherit }
.prose ul, .prose ol{ padding-left:1.4em; margin:0 0 1.2em }
.prose li{ margin:.35em 0; padding-left:.3em }
.prose ul li::marker{ content:"✦  "; color:var(--primary); font-size:.85em }
.prose ol li::marker{ color:var(--primary); font-family:var(--font-display) }
.prose blockquote{ margin:1.8em 0; padding:18px 26px; border-left:2px solid var(--primary); font-family:var(--font-serif); font-style:italic; font-size:1.42rem; line-height:1.45; background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 11%, transparent), transparent); border-radius:0 14px 14px 0 }
.prose a{ color:var(--accent); text-underline-offset:3px }
.prose strong{ color:var(--text); font-weight:600 }
.prose hr{ border:0; height:1px; margin:2em 0; background:linear-gradient(90deg, transparent, var(--primary), transparent) }
.reader-foot{ max-width:68ch; margin:0 auto; padding:0 24px 90px }
.reader-foot h4{ font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; color:var(--primary); margin:40px 0 18px }
.related{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px }
.related .post-card .cover{ aspect-ratio:16/9 }
.related .post-card h3{ font-size:1rem }
.related .post-body{ padding:16px 18px 18px }
.reader-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; padding:10px 0 0 }

/* ---------- Bildirim ---------- */
.toast-wrap{ position:fixed; z-index:400; left:50%; bottom:26px; translate:-50% 0; display:grid; gap:8px; justify-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 32px) }
.toast{ padding:12px 20px; border-radius:12px; background:color-mix(in srgb, var(--surface) 94%, #000); border:1px solid var(--line-strong); box-shadow:0 12px 40px -10px #000, 0 0 30px -12px var(--glow); animation:popIn .4s var(--ease); font-size:.92rem }
.toast.err{ border-color:var(--danger) }
.toast.out{ opacity:0; transform:translateY(10px); transition:all .4s }

/* ---------- Yönetim paneli ---------- */
.admin{ position:fixed; inset:0; z-index:200; display:grid; grid-template-columns:260px minmax(0,1fr); background:color-mix(in srgb, var(--bg) 96%, #000); font-size:15px; animation:fadeIn .3s }
.adm-side{ position:relative; display:flex; flex-direction:column; gap:4px; padding:22px 14px; border-right:1px solid var(--line); overflow-y:auto; background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--bg2) 30%, transparent)) }
.adm-logo{ display:flex; align-items:center; gap:12px; padding:2px 10px 20px }
.adm-logo .brand-mark{ width:40px; height:40px; font-size:19px }
.adm-logo b{ display:block; font-family:var(--font-display); letter-spacing:.12em; font-size:.92rem; font-weight:600 }
.adm-logo small{ color:var(--muted); font-size:.72rem; letter-spacing:.1em }
.adm-tab{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:12px; border:1px solid transparent; background:none; text-align:left; cursor:pointer; color:var(--muted); transition:all .25s }
.adm-tab:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 5%, transparent) }
.adm-tab.on{ color:var(--text); background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 20%, transparent), transparent); border-color:color-mix(in srgb, var(--primary) 30%, transparent) }
.adm-tab .sym{ width:22px; text-align:center; color:var(--primary); font-size:1.05rem }
.adm-side-foot{ margin-top:auto; display:grid; gap:8px; padding-top:18px }
.adm-main{ display:flex; flex-direction:column; min-width:0; min-height:0 }
.adm-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 32px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--surface) 30%, transparent) }
.adm-head h2{ font-family:var(--font-display); font-weight:600; margin:0; font-size:1.35rem; letter-spacing:.04em }
.adm-head-r{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.adm-status{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted) }
.adm-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok) }
.adm-status.dirty .dot{ background:var(--warn); box-shadow:0 0 8px var(--warn) }
.adm-status.error .dot{ background:var(--danger); box-shadow:0 0 8px var(--danger) }
.adm-body{ flex:1; min-height:0; overflow-y:auto; padding:28px 32px 80px }
.adm-body > * + *{ margin-top:18px }
.panel{ background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md); padding:22px }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px }
.panel h3{ margin:0; font-family:var(--font-display); font-size:1.06rem; letter-spacing:.04em; font-weight:600 }
.hint{ color:var(--muted); font-size:.86rem; margin:4px 0 16px; line-height:1.55 }
.hint b{ color:var(--text); font-weight:500 }
.row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0 14px }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px }
.abtn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:10px; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 72%, transparent); color:var(--text); cursor:pointer; font-size:.88rem; white-space:nowrap; text-decoration:none; transition:border-color .2s, background .2s, transform .2s }
.abtn:hover{ border-color:var(--primary) }
.abtn:active{ transform:translateY(1px) }
.abtn.pri{ background:linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 62%, var(--secondary))); color:var(--bg); border-color:transparent; font-weight:600 }
.abtn.danger{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent) }
.abtn.danger:hover{ background:color-mix(in srgb, var(--danger) 14%, transparent); border-color:var(--danger) }
.abtn.sm{ padding:6px 12px; font-size:.8rem }
.iconbtn{ width:34px; height:34px; flex:none; display:inline-grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:transparent; cursor:pointer; color:var(--muted); font-size:.95rem; transition:all .2s }
.iconbtn:hover{ color:var(--text); border-color:var(--primary) }
.iconbtn.on{ color:var(--primary); border-color:var(--line-strong); background:color-mix(in srgb, var(--primary) 12%, transparent) }
.iconbtn.danger:hover{ color:var(--danger); border-color:var(--danger) }
.list{ display:grid; gap:10px }
.li{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 14px; border-radius:13px; background:color-mix(in srgb, var(--surface) 58%, transparent); border:1px solid var(--line); transition:border-color .2s, box-shadow .2s, opacity .2s }
.li:hover{ border-color:color-mix(in srgb, var(--primary) 30%, transparent) }
.li.dragging{ opacity:.35 }
.li.drop-before{ box-shadow:0 -3px 0 0 var(--primary) }
.li.drop-after{ box-shadow:0 3px 0 0 var(--primary) }
.li.off{ opacity:.6 }
.handle{ cursor:grab; color:var(--muted); font-size:1.05rem; padding:6px 4px; user-select:none; -webkit-user-select:none; letter-spacing:-3px; touch-action:none }
.handle:active{ cursor:grabbing }
.grow{ flex:1; min-width:140px }
.li .t{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.li .s{ font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.li-acts{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.li-edit{ flex-basis:100%; padding-top:14px; border-top:1px dashed var(--line); margin-top:4px }
.li-inline{ flex:1; display:grid; grid-template-columns:1fr 1.6fr; gap:10px; min-width:220px }
.li-inline .inp{ padding:9px 12px }
.thumb{ width:58px; height:44px; flex:none; border-radius:9px; overflow:hidden; display:grid; place-items:center; color:var(--primary); font-size:1.3rem; background:linear-gradient(135deg, var(--bg2), var(--bg)); border:1px solid var(--line) }
.thumb img{ width:100%; height:100%; object-fit:cover }
.tag{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:.7rem; letter-spacing:.06em; border:1px solid var(--line); color:var(--muted) }
.tag.ok{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent) }
.tag.warn{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent) }
.switch{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-size:.9rem }
.switch input{ position:absolute; opacity:0; width:1px; height:1px }
.switch .trk{ width:42px; height:24px; border-radius:999px; background:color-mix(in srgb, var(--text) 16%, transparent); position:relative; transition:background .25s; flex:none }
.switch .trk::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text); transition:transform .25s var(--ease) }
.switch input:checked + .trk{ background:linear-gradient(135deg, var(--primary), var(--secondary)) }
.switch input:checked + .trk::after{ transform:translateX(18px); background:var(--bg) }
.switch input:focus-visible + .trk{ outline:2px solid var(--accent); outline-offset:2px }
.switches{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px }
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px }
.stat{ padding:18px 20px; border-radius:14px; border:1px solid var(--line); background:var(--glass); position:relative; overflow:hidden }
.stat::after{ content:""; position:absolute; right:-20px; top:-20px; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%) }
.stat b{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--primary); line-height:1.1; font-variant-numeric:tabular-nums }
.stat span{ font-size:.8rem; color:var(--muted); letter-spacing:.06em }
/* İstatistikler sekmesi */
.schart{ display:flex; align-items:flex-end; gap:4px; height:180px; margin-top:16px; border-bottom:1px solid var(--line) }
.sbar{ position:relative; flex:1; min-width:3px; height:100% }
.sbar i{ position:absolute; left:0; right:0; bottom:0; border-radius:4px 4px 0 0; background:color-mix(in srgb, var(--primary) 30%, transparent) }
.sbar i.u{ left:22%; right:22%; background:var(--primary) }
.saxis{ display:flex; justify-content:space-between; margin-top:6px; font-size:.75rem; color:var(--muted) }
.slegend{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted) }
.slegend i{ display:inline-block; width:10px; height:10px; border-radius:3px; background:color-mix(in srgb, var(--primary) 30%, transparent) }
.slegend i.u{ background:var(--primary); margin-left:8px }
.sgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; align-items:start }
.srows{ display:grid; gap:10px; margin-top:12px }
.srow{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:5px 12px; font-size:.88rem }
.srow .sl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.srow .sn{ font-variant-numeric:tabular-nums; color:var(--muted) }
.srow .sm{ grid-column:1 / -1; height:4px; border-radius:4px; background:color-mix(in srgb, var(--text) 8%, transparent); overflow:hidden }
.srow .sm i{ display:block; height:100%; border-radius:4px; background:var(--primary) }
#stat-wrap > * + *, #stat-wrap + .hint{ margin-top:18px }
.pal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px }
.pal{ border-radius:16px; padding:14px; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 55%, transparent); display:grid; gap:12px }
.pal.active{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 0 34px -12px var(--glow) }
.pal-prev{ position:relative; border-radius:12px; padding:16px; overflow:hidden; border:1px solid rgba(255,255,255,.08) }
.pal-prev .pt{ font-family:var(--font-display); font-weight:600; font-size:1.05rem }
.pal-prev .pm{ font-size:.78rem; margin-top:2px }
.pal-prev .pb{ display:inline-block; margin-top:10px; padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:600 }
.pal-prev .pg{ position:absolute; right:12px; top:8px; font-family:var(--font-sym); font-size:1.8rem }
.swatches{ display:flex; height:26px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.08) }
.swatches span{ flex:1 }
.pal-name{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:500 }
.color-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px }
.color-field{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb, var(--bg) 60%, transparent) }
.color-field input[type=color]{ width:40px; height:34px; border:0; padding:0; background:none; cursor:pointer; flex:none }
.color-field input[type=color]::-webkit-color-swatch-wrapper{ padding:0 }
.color-field input[type=color]::-webkit-color-swatch{ border:1px solid rgba(255,255,255,.2); border-radius:8px }
.color-field .cf-t{ flex:1; min-width:0 }
.color-field .cf-t span{ display:block; font-size:.72rem; color:var(--muted); letter-spacing:.06em }
.color-field .cf-t input{ width:100%; border:0; background:none; color:var(--text); font:inherit; font-size:.88rem; font-variant-numeric:tabular-nums; padding:0; outline:none; text-transform:lowercase }
.glyph-pick{ display:flex; flex-wrap:wrap; gap:6px }
.glyph-pick button{ width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:none; cursor:pointer; font-family:var(--font-sym); font-size:1.1rem; color:var(--text); transition:all .2s }
.glyph-pick button:hover{ border-color:var(--primary) }
.glyph-pick button.on{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 18%, transparent); color:var(--primary) }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:11px; overflow:hidden; flex-wrap:wrap }
.seg button{ padding:8px 14px; background:none; border:0; cursor:pointer; color:var(--muted); font-size:.86rem }
.seg button + button{ border-left:1px solid var(--line) }
.seg button.on{ background:color-mix(in srgb, var(--primary) 20%, transparent); color:var(--text) }
.mdtool{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px }
.mdtool .iconbtn{ width:auto; padding:0 10px; font-size:.82rem }
.md-prev{ min-height:200px; max-height:440px; overflow:auto; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb, var(--bg) 60%, transparent) }
.md-prev .prose{ padding:18px 22px; font-size:1rem }
.img-pick{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.img-pick .thumb{ width:120px; height:76px }
.adm-modal-wrap{ position:fixed; inset:0; z-index:260; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fadeIn .25s }
.adm-modal{ width:min(100%, 880px); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto; border-radius:18px; padding:26px 28px 0; background:color-mix(in srgb, var(--surface) 94%, #000); border:1px solid var(--line-strong); box-shadow:0 40px 120px -20px #000; animation:popIn .35s var(--ease); font-size:15px }
.adm-modal.small{ width:min(100%, 440px) }
.adm-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px }
.adm-modal-head h3{ margin:0; font-family:var(--font-display); font-size:1.2rem; font-weight:600 }
.adm-modal-foot{ position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin:20px -28px 0; padding:14px 28px 18px; background:color-mix(in srgb, var(--surface) 96%, #000); border-top:1px solid var(--line) }
.ask-t{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin:4px 0 6px; line-height:1.4 }
.adm-float{ position:fixed; z-index:210; right:22px; bottom:22px; display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; border:0; cursor:pointer; font-weight:600; color:var(--bg); background:linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow:0 10px 40px -8px var(--glow); animation:pulseGlow 3s ease-in-out infinite }
.font-prev{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px }
.font-opt{ padding:16px; border-radius:13px; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 55%, transparent); cursor:pointer; text-align:left; color:var(--text) }
.font-opt.on{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) }
.font-opt .fd{ font-size:1.35rem; display:block; line-height:1.2 }
.font-opt .fb{ font-size:.85rem; color:var(--muted) }
.notice{ padding:14px 16px; border-radius:12px; border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); background:color-mix(in srgb, var(--warn) 8%, transparent); font-size:.88rem; line-height:1.55 }
.notice b{ font-weight:600 }
.kbd{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.85em; padding:1px 6px; border-radius:6px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 60%, transparent) }

/* ---------- Duyarlı düzen ---------- */
@media (max-width:1000px){
  .posts{ grid-template-columns:repeat(2, 1fr) }
  .post-card.featured{ grid-template-columns:1fr }
  .post-card.featured .cover{ min-height:240px; aspect-ratio:16/9 }
  .post-card.featured .post-body{ padding:26px 26px 30px }
  .footer-in{ grid-template-columns:1fr 1fr }
  .footer-in > :first-child{ grid-column:1/-1 }
}
@media (max-width:900px){
  .topbar-in{ flex-wrap:wrap; gap:10px 14px; padding:12px 16px 10px }
  .brand{ flex:1 1 0; min-width:0 }
  .btn-login{ margin-left:auto }
  .nav{ order:5; width:100%; margin:0 -16px; padding:2px 16px 4px; width:calc(100% + 32px); overflow-x:auto; scrollbar-width:none; -webkit-mask:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent) }
  .nav::-webkit-scrollbar{ display:none }
  .nav a{ flex:none; padding:7px 14px; border:1px solid var(--line); background:var(--glass); font-size:.84rem }
  .nav a::after{ display:none }
  .hero{ grid-template-columns:1fr; padding-top:36px; text-align:left }
  .wheel-wrap{ width:min(100%, 360px) }
  .about{ grid-template-columns:1fr; gap:34px }
  .emblem{ width:min(70%, 280px) }
  .admin{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) }
  .adm-side{ flex-direction:row; align-items:center; overflow-x:auto; overflow-y:hidden; padding:10px 12px; border-right:0; border-bottom:1px solid var(--line); gap:6px }
  .adm-logo{ padding:0 8px 0 2px }
  .adm-logo div{ display:none }
  .adm-tab{ width:auto; white-space:nowrap; padding:8px 12px }
  .adm-side-foot{ margin:0 0 0 auto; display:flex; padding:0 }
  .adm-head{ padding:14px 18px }
  .adm-body{ padding:20px 16px 80px }
}
@media (max-width:640px){
  body{ font-size:16px }
  .brand{ gap:10px }
  .brand-tag{ display:none }
  .brand-mark{ width:38px; height:38px; font-size:18px }
  .brand-name{ font-size:.92rem; letter-spacing:.1em; white-space:normal; line-height:1.15 }
  .btn-login{ padding:9px 14px; font-size:.76rem; letter-spacing:.03em }
  .posts{ grid-template-columns:1fr }
  .section{ padding:64px 18px }
  .footer-in{ grid-template-columns:1fr }
  .search input{ width:120px }
  .li-inline{ grid-template-columns:1fr }
  .adm-modal{ padding:20px 18px 0 }
  .adm-modal-foot{ margin:20px -18px 0; padding:12px 18px 16px }
}
@media (max-width:420px){
  .sky-chip{ width:100% }
  .btn-login{ padding:9px 12px; gap:6px }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}