/* 12astroloji — başka sitelere gömülen günlük burç yorumu kutusu.
   Sayfa arka planı saydamdır; köşeleri yuvarlatılmış kutu, gömüldüğü sitenin zemininde durur.
   Kök öğeye color-scheme verilmez: verilseydi tarayıcılar çerçeveyi opak boyardı. */

@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin-ext.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }
@font-face { font-family: "Astro"; src: url("../fonts/astro-symbols.woff2") format("woff2"); font-display: block; }

:root {
  --paper: #fcfaf7; --paper-2: #f6f1f5;
  --ink: #221b33; --ink-2: #5e566e; --ink-3: #736b82;
  --line: #e7dfea;
  --accent: #93278f; --accent-soft: #f4e5f3;
  --glow-1: rgba(147, 39, 143, .10); --glow-2: rgba(224, 191, 104, .16);
  --font-display: "Marcellus", "Times New Roman", serif;
  --font-text: "Jost", "Segoe UI", system-ui, sans-serif;
  --font-glyph: "Astro", "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0a1e; --paper-2: #161230;
    --ink: #ece6f5; --ink-2: #aea6c4; --ink-3: #8f88a8;
    --line: #2c2650;
    --accent: #e8c97c; --accent-soft: #2a2342;
    --glow-1: rgba(120, 90, 220, .16); --glow-2: rgba(232, 201, 124, .08);
  }
}
:root[data-theme="dark"] {
  --paper: #0d0a1e; --paper-2: #161230;
  --ink: #ece6f5; --ink-2: #aea6c4; --ink-3: #8f88a8;
  --line: #2c2650;
  --accent: #e8c97c; --accent-soft: #2a2342;
  --glow-1: rgba(120, 90, 220, .16); --glow-2: rgba(232, 201, 124, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { font: 400 15px/1.55 var(--font-text); color: var(--ink); -webkit-text-size-adjust: 100%; }
a { color: inherit; }

.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }

/* Kutu: köşelerden yayılan hafif renk lekeleri; gündüz mor ve altın, gece lacivert */
.w {
  position: relative; overflow: hidden;
  padding: 18px 20px 14px; border: 1px solid var(--line); border-radius: 18px;
  background:
    radial-gradient(120% 70% at 100% 0%, var(--glow-1), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, var(--glow-2), transparent 65%),
    var(--paper);
}

/* Burç seçici: on iki sembol; dar kutuda iki sıra */
.w-signs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: -4px -6px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.w-signs a {
  display: grid; place-items: center; aspect-ratio: 1; min-height: 28px; border-radius: 50%;
  font: 17px/1 var(--font-glyph); font-variant-emoji: text; color: var(--ink-2); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.w-signs a:hover { color: var(--accent); }
.w-signs a[aria-current] { background: var(--accent); color: var(--paper); }
@media (max-width: 379px) { .w-signs { grid-template-columns: repeat(6, 1fr); row-gap: 4px; } .w-signs a { aspect-ratio: auto; height: 32px; border-radius: 16px; } }

.w-head { display: flex; align-items: center; gap: 12px; }
.w-sign { flex: none; width: 56px; height: 56px; }
.w-sign img { width: 100%; height: 100%; }
.w-head h1 { margin: 0; font: 400 1.45rem/1.15 var(--font-display); letter-spacing: .01em; }
.w-date { margin: 2px 0 0; font-size: .85rem; color: var(--ink-3); }

.w-title { margin: 14px 0 4px; font: 400 1.12rem/1.35 var(--font-display); color: var(--accent); }
.w-text { margin: 0; color: var(--ink-2); }

.w-scores { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px 12px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.w-scores div { display: grid; gap: 4px; }
.w-scores dt { font-size: .8rem; color: var(--ink-3); }
.w-scores dd { display: flex; gap: 3px; margin: 0; }
.w-scores i { width: 8px; height: 8px; border-radius: 50%; border: 1.3px solid var(--accent); }
.w-scores i.on { background: var(--accent); }
@media (max-width: 299px) { .w-scores { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 28px; } }

.w-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.w-more { font-weight: 500; font-size: .92rem; color: var(--accent); text-underline-offset: 3px; }
.w-brand { display: inline-flex; align-items: center; gap: 6px; font: 400 1rem/1 var(--font-display); color: var(--ink); text-decoration: none; }
.w-brand b { font-weight: 400; color: var(--accent); }
.w-mark { width: 20px; height: 20px; background: currentColor; -webkit-mask: url("../img/zodiac-icon.png") center / contain no-repeat; mask: url("../img/zodiac-icon.png") center / contain no-repeat; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.w-signs a:focus-visible { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) { .w-signs a { transition: none; } }