/* PUSULA – Sade & Modern Açık Tema (2025) */
:root{
  --bg:#fafafa;
  --panel:#ffffff;
  --text:#0f172a;        /* slate-900 */
  --muted:#64748b;       /* slate-500 */
  --line:#e5e7eb;        /* gray-200 */
  --brand:#2563eb;       /* primary: blue-600 */
  --brand2:#f59e0b;      /* accent: amber-500 */
  --ring:#dbeafe;        /* blue-100 */
  --radius:14px;
  --shadow:0 10px 24px rgba(2,6,23,0.08); /* slate-950, 8% */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Ubuntu;
  color:var(--text);
  background:
    radial-gradient(800px 480px at 10% 10%, #eef2ff 0%, transparent 60%),
    radial-gradient(780px 460px at 90% 15%, #fffbeb 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1080px;margin:0 auto;padding:22px}

/* Üst şerit (sadece marka) */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:12px 18px;
  background:#ffffffcc; backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px}
.brand-text h1{
  margin:0; font-size:22px; letter-spacing:.2px;
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text p{margin:0; color:var(--muted); font-size:12px}
.brand.small .brand-text h1{font-size:18px}
.brand-link{color:var(--text); text-decoration:none; font-weight:800}

/* Pusula simgesi (hafif) */
.compass{width:46px;height:46px;display:grid;place-items:center}
.compass-svg{width:100%;height:100%}
.compass-ring{fill:none;stroke:var(--brand);stroke-width:2;opacity:.5}
.needle{transform-origin:60px 60px; animation:needle 7s ease-in-out infinite}
.needle-top{fill:var(--brand)} .needle-bottom{fill:var(--brand2)}
.hub{fill:#fff;stroke:var(--brand);stroke-width:2}
@keyframes needle{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}

/* Hero */
.hero{
  position:relative; overflow:hidden; border-radius:16px;
  padding:28px 20px; margin-top:12px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.hero-mini{padding:22px 20px}
.hero h2{margin:0 0 6px 0; font-size:26px}
.hero .sub{margin:0; color:var(--muted)}
.blob{position:absolute; filter:blur(16px); opacity:.7; animation:float 10s ease-in-out infinite}
.blob.b1{right:-60px; top:-46px; width:200px; height:200px; background:radial-gradient(closest-side,rgba(37,99,235,.18),transparent)}
.blob.b2{left:-60px; bottom:-46px; width:240px; height:240px; background:radial-gradient(closest-side,rgba(245,158,11,.18),transparent)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Bölüm başlığı */
.section-title{margin:10px 6px;font-size:18px}

/* Kart ızgara */
.grid-section{margin-top:12px}
.card-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.card{
  grid-column:span 12; background:var(--panel); border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow); padding:16px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media(min-width:640px){.card{grid-column:span 6}}
@media(min-width:980px){.card{grid-column:span 4}}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(2,6,23,0.10); border-color:#dbe0ea}
.card h3{margin:6px 0 4px 0; font-size:18px}
.card p{margin:0; color:var(--muted)}
.card .meta{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.card .meta .icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:var(--brand);
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.10), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(245,158,11,.10), transparent 60%);
  border:1px solid #eef2ff;
}
.card .meta .icon svg{width:20px;height:20px; fill:currentColor}
.card .cta{display:flex; justify-content:flex-end; margin-top:10px}

/* Butonlar */
.btn{
  appearance:none; border:none; border-radius:12px; padding:10px 14px; cursor:pointer;
  background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#0b1320; font-weight:800;
  box-shadow:0 8px 18px rgba(37,99,235,0.20);
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#0b1320}

/* Quiz */
.quiz-head h2{margin:0 0 6px 0}
.question-card{
  background:var(--panel); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; border:1px solid var(--line)
}
.question{font-size:18px;margin-bottom:12px}
.options{display:grid;gap:10px;margin-top:12px}
.option{justify-content:flex-start;background:#fff;color:var(--text);border:1px solid var(--line)}
.option.selected{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.quiz-actions{display:flex;justify-content:space-between;margin-top:12px}

.progress{width:100%;height:10px;background:#eef2ff;border-radius:999px;margin:16px 0;border:1px solid #e5e7eb}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:999px;transition:width .3s ease}

/* Sonuç */
.result-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:20px; max-width:720px; margin:12px auto 0; position:relative; overflow:hidden;
}
.result-badge{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#0b1320;padding:6px 12px;border-radius:999px;font-weight:800;font-size:12px}
.result-text{margin-top:6px}
.result-actions{display:flex;gap:10px;justify-content:center;margin:14px 0 6px}

/* Footer & anim */
.site-footer{padding:28px 24px;text-align:center;color:var(--muted)}
.muted{color:var(--muted)}
.fade-in{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
a{text-decoration:none;color:inherit}