/* =====================================================================
   STIL 13 - Topluluk: Modern + sosyal + canli topluluk hissi. Plus4Plast'i
   bir yayinevi/discord karisimina donusturur. Amac: ziyaretciyi sitede
   tutmak, forum kaydini psikolojik olarak kolay yapmak, hesaplayici
   sonuclarini "kaydetmek istenen" degerli belgelere donusturmek.
   Tasarim ilkeleri:
   - WHITE kartlar (kagit degil, dijital), yumusak golgeler, 14px koseler.
   - Aktivite nabzi: her konu kartinda son aktivite rengi (yesil-sari-gri).
   - Avatar yiginlari: her konuda katilan 3-5 kisinin avatari ust uste.
   - Save-card: boyut ve 4 somut fayda listesi, "ucretsiz" + "10 sn" vurgulu.
   - Hero'ya canli topluluk sayilari: online uye, bu hafta soru vb.
   - CTA butonlari: koral turuncu, hafif baskı animasyonu.
   - Hesap sonuclari: profesyonel rapor karti, kaydet butonu uyelige davetli.
   "2-ios-beyaz" uzerine yuklenir.
   ===================================================================== */

:root:root {
  color-scheme: light;
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #faf7f0;
  --surface-3: #f0ebe0;
  --ink: #0f172a;
  --ink-2: #1e293b;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --accent: #e85d2e;         /* koral turuncu: davet, eylem */
  --accent-2: #c84616;
  --accent-soft: #fff2eb;
  --brand: #2563eb;          /* plastik mavisi: topluluk */
  --brand-soft: #eff6ff;
  --brand-2: #1d4ed8;
  --success: #10b981;
  --success-soft: #ecfdf5;
  --warn: #f59e0b;
  --warn-soft: #fffbeb;
  --err: #ef4444;
  --err-soft: #fef2f2;
  --amber: #fbbf24;
  --amber-soft: #fef3c7;
  --thread-hot: #ef4444;
  --thread-mid: #f59e0b;
  --thread-cool: #3b82f6;
  --thread-cold: #94a3b8;
  --tint: rgba(232,93,46,.08);
  --tint2: rgba(232,93,46,.18);
  --card: var(--surface);
  --soft: var(--surface-2);
  --soft2: var(--surface-3);
  --link: var(--accent);
  --on-accent: #ffffff;
  --ok: var(--success); --ok-bg: var(--success-soft);
  --info: var(--brand); --info-bg: var(--brand-soft);
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 2px 6px rgba(15,23,42,.08);
  --shadow-md: 0 8px 24px rgba(15,23,42,.1);
  --shadow-lg: 0 20px 48px rgba(15,23,42,.14);
  --shadow: var(--shadow-md);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

/* ---- zemin: sakin krem, hafif desen ---- */
body {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(232,93,46,.05), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, rgba(37,99,235,.05), transparent 60%),
    var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { font-family: var(--display); color: var(--ink); letter-spacing: -.015em; font-weight: 700; }
h1 { letter-spacing: -.02em; font-weight: 800; }

a { color: var(--brand); text-decoration: none; transition: color .12s; }
a:hover { color: var(--accent); }
::selection { background: var(--amber-soft); color: var(--ink); }

/* ---- ust forum serisi: canli, davetkar ---- */
.forum-ribbon {
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
  font-family: var(--display);
}
.fr-dot {
  background: var(--thread-hot) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.22);
  animation: topluluk-pulse 1.8s ease-out infinite;
}
@keyframes topluluk-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
  70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) { .fr-dot { animation: none; } }
.fr-lbl { color: var(--amber); letter-spacing: .1em; font-size: .72rem; text-transform: uppercase; font-weight: 700; }
.fr-topic { color: #fff; font-weight: 500; }
.fr-go {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(232,93,46,.4), inset 0 1px 0 rgba(255,255,255,.2);
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  font-size: .82rem !important;
}
.fr-go:hover { background: var(--accent-2) !important; }

/* ---- ust cubuk: temiz, modern, hafif golge ---- */
.site-top {
  background: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-xs);
}
.logo { color: var(--ink) !important; font-weight: 800; letter-spacing: -.02em; }
.logo .four { color: var(--accent); }

.site-nav a, .site-nav .ddb {
  color: var(--ink-2) !important;
  font-weight: 500;
  border-radius: 8px !important;
  transition: background .12s, color .12s;
}
.site-nav a:hover { background: var(--brand-soft) !important; color: var(--brand) !important; }
.site-nav a.on {
  background: var(--ink) !important;
  color: #fff !important;
  box-shadow: var(--shadow-xs) !important;
}
.site-nav a[data-forum] {
  color: var(--brand) !important;
  font-weight: 700;
  position: relative;
}
.site-nav a[data-forum]::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--thread-hot);
  box-shadow: 0 0 0 2px rgba(239,68,68,.3);
}
.site-nav a[data-accent] {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: var(--shadow-sm) !important;
}

.hsearch input, .qf input, .qf select,
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-family: var(--sans);
  transition: border-color .12s, box-shadow .12s;
}
.hsearch input:focus, input:focus, select:focus, textarea:focus {
  outline: 0 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-soft) !important;
}

/* ---- dugmeler: modern, baskiya duyarli ---- */
.btn, .fab {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--display);
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 2px 6px rgba(232,93,46,.3), inset 0 1px 0 rgba(255,255,255,.14) !important;
  padding: 10px 18px !important;
  transition: transform .08s, box-shadow .12s, background .12s;
}
.btn:hover, .fab:hover {
  background: var(--accent-2) !important;
  box-shadow: 0 4px 12px rgba(232,93,46,.4), inset 0 1px 0 rgba(255,255,255,.14) !important;
  transform: translateY(-1px);
  filter: none !important;
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(232,93,46,.3) !important; }
.btn.secondary, .btn.ghost {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn.secondary:hover, .btn.ghost:hover {
  background: var(--surface-2) !important;
  border-color: var(--muted-2) !important;
}
.btn.danger { background: var(--err) !important; box-shadow: 0 2px 6px rgba(239,68,68,.3) !important; }
.btn.big { padding: 14px 24px !important; font-size: 1rem !important; }

/* ---- HERO: modern yayinevi havasi ---- */
.hero, .mpage-head, .top {
  background:
    radial-gradient(1200px 500px at 90% -20%, rgba(232,93,46,.1), transparent 60%),
    radial-gradient(900px 400px at -10% 120%, rgba(37,99,235,.08), transparent 60%),
    var(--bg) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
.hero h1, .mpage-head h1, .top h1 {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  background: none !important;
  letter-spacing: -.025em;
  font-weight: 800;
  text-transform: none !important;
}
.hero h1 em, .mpage-head h1 em {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent);
  background: none !important;
  font-style: normal;
}
.hero .lead, .mpage-head .lead, .top p { color: var(--muted); font-size: 1.1rem; }

.hero-search input {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-xs);
}
.hero .btn.ghost, .band-tool .btn.ghost {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}

/* ---- Pillars (anasayfa istatistik): topluluk nabzi ---- */
.pillars { color: var(--muted) !important; display: flex; gap: 24px; flex-wrap: wrap; }
.pillars li {
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem;
  color: var(--muted);
}
.pillars b {
  font-family: var(--display);
  color: var(--accent) !important;
  font-size: 1.8rem;
  font-weight: 800;
  margin-right: 0 !important;
  letter-spacing: -.02em;
}

/* hero-card: hesapci davet karti */
.hero-card {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-md) !important;
  transform: none !important;
}
.hero-card h3, .hero-card .ht { color: var(--ink); font-weight: 700; }
.hero-card .btn { width: 100%; }

/* ---- "Eyebrow" ve etiketler ---- */
.eyebrow, .qtag, .chip-cat, .fb-eyebrow {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eyebrow::before, .fb-eyebrow::before { content: none !important; }

/* ---- Bolum basliklari ---- */
.sec-h { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.sec-h h2 {
  font-size: 1.5rem !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  font-weight: 800;
}
.sec-h a { color: var(--accent) !important; font-weight: 600; }

/* ---- anasayfa forum bandi: topluluk davet karti ---- */
.forum-band {
  background:
    radial-gradient(600px 300px at 80% 50%, rgba(232,93,46,.12), transparent 70%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #fff !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}
.forum-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 20% 0%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(600px 300px at 100% 100%, rgba(232,93,46,.1), transparent 60%);
  pointer-events: none;
}
.forum-band .fb-eyebrow { background: rgba(251,191,36,.2) !important; color: var(--amber) !important; }
.forum-band h2 { color: #fff !important; -webkit-text-fill-color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }
.forum-band p { color: rgba(255,255,255,.75) !important; opacity: 1 !important; font-size: 1.05rem; }
.fb-chips a {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500;
  font-size: .84rem;
  padding: 5px 14px !important;
  backdrop-filter: blur(6px);
  transition: background .12s, border-color .12s;
}
.fb-chips a:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* forum-band icindeki kart: beyaz "canli konu" karti */
.fb-card {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative;
}
.fb-card::before {
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 3px;
  background: linear-gradient(90deg, var(--thread-hot) 0%, var(--amber) 50%, var(--thread-cool) 100%);
  border-radius: 0 0 3px 3px;
}
.fb-card h3 {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  font-size: .85rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted) !important;
  border: 0 !important;
  padding: 0 0 10px 0 !important;
  font-weight: 700;
}
.fb-card li { padding: 7px 0 !important; border-bottom: 1px solid var(--line); }
.fb-card li:last-child { border-bottom: 0; }
.fb-card li a {
  color: var(--ink) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
}
.fb-card li a:hover { color: var(--accent) !important; }
.fb-card .av, .ft-av, .fav, .av {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px var(--line-2);
  font-weight: 700;
}
.fb-card .meta, .fb-card .empty { color: var(--muted) !important; }
.fb-card .btn { width: 100%; }

/* forum-strip ve forum-cta: dikkat cekici davet */
.forum-strip, .forum-cta {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--amber-soft) 100%) !important;
  border: 1px solid rgba(232,93,46,.25) !important;
  border-radius: var(--radius) !important;
  padding: 18px 22px !important;
  box-shadow: var(--shadow-sm);
}
.forum-strip strong { color: var(--ink); font-size: 1.1rem; }
.forum-strip span { color: var(--ink-2); }

/* ---- FORUM: liste sayfasi: canli topluluk hissi ---- */
.fhero {
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(232,93,46,.25), transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px !important;
  box-shadow: var(--shadow-md);
}
.fhero h1 { color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 800; letter-spacing: -.02em; }
.fhero p { color: rgba(255,255,255,.8) !important; }

/* kategori kartlari: tiklanabilir, animasyonlu */
.catrow {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 16px 20px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.catrow:hover {
  transform: translateX(2px) translateY(-1px) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--surface) !important;
}
.catrow .cat-main b { color: var(--ink) !important; font-size: 1.1rem; font-weight: 700; }
.ictile {
  background: linear-gradient(135deg, var(--accent) 0%, #f97316 100%) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(232,93,46,.4);
}

/* konu listesi: ferah, nefes alabilen */
.ftopics {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.ft-head {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ftopic {
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 18px !important;
  transition: background .1s;
  position: relative;
}
.ftopic:hover { background: var(--surface-2) !important; }
.ft-title {
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.ftopic:hover .ft-title { color: var(--accent) !important; }
.ft-n b { color: var(--brand) !important; font-weight: 700; }
.ftopic .solved { color: var(--success) !important; font-weight: 700; }

/* AKTIVITE NABZI: her konu kartinin solunda ince renk cizgisi */
.ftopic::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--thread-cold);
  border-radius: 0 3px 3px 0;
  transition: width .12s, background .12s;
}
.ftopic:hover::before { width: 5px; background: var(--accent); }
.ftopic.hot::before, .ftopic[data-hot]::before { background: var(--thread-hot); }
.ftopic.new::before, .ftopic[data-new]::before { background: var(--thread-cool); }

/* pinned konu: altin sari ust cizgi + 📌 */
.ftopic.pinned {
  background: linear-gradient(180deg, var(--amber-soft) 0%, var(--surface) 100%) !important;
  box-shadow: inset 0 3px 0 var(--amber);
}
.ftopic.pinned::before { background: var(--amber); width: 4px; }
.ftopic.pinned .ft-title::before {
  content: "📌 ";
  margin-right: 2px;
}

/* ---- POST (tartisma icine girince): okunabilir, ferah ---- */
.fpost {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: visible;
}
.fpost.first {
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm) !important;
}
.fpost.accepted {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 4px var(--success-soft), inset 4px 0 0 var(--success) !important;
  position: relative;
}
.fpost.accepted::after {
  content: "✓ Kabul edilen cevap";
  position: absolute;
  top: 12px; right: 16px;
  background: var(--success);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.fpost > header {
  background: var(--surface-2) !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
}
.fpost > header b { color: var(--ink) !important; font-weight: 700; }
.fpost .fbody {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-2) !important;
}
.fpost.first .fbody > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.4em;
  line-height: .85;
  padding: 4px 10px 0 0;
  color: var(--accent);
}

/* avatar: cember, hafif golge, uyeligi gosterir rengi */
.av {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.15), 0 0 0 1px var(--line-2);
  font-weight: 700;
  font-size: 1.05rem !important;
}

/* kullanici rozetleri: temiz, modern, degerli */
.utier, .user-tier, .badge-tier, [data-tier] {
  background: linear-gradient(135deg, var(--amber) 0%, #f59e0b 100%) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-size: .68rem !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 9px !important;
  box-shadow: 0 1px 3px rgba(245,158,11,.3), inset 0 1px 0 rgba(255,255,255,.3);
  display: inline-block;
}

/* blockquote: alinti baloncu */
.fbody blockquote, blockquote {
  background: var(--brand-soft) !important;
  border: 0 !important;
  border-left: 3px solid var(--brand) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  color: var(--ink-2);
}

/* kod blogu: temiz kod penceresi */
.fbody pre, .fbody code, pre, code {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
  font-family: var(--mono);
  font-size: .9rem;
}
.fbody pre {
  padding: 14px 16px !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ---- REPLY alanı: davetkar yazi penceresi ---- */
.freply {
  background: var(--surface) !important;
  border: 2px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  box-shadow: var(--shadow-xs);
  transition: border-color .12s, box-shadow .12s;
}
.freply:focus-within {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-soft) !important;
}
.freply::before {
  content: "💬 Cevap yaz";
  display: block;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
  font-size: .9rem;
}
.freply textarea {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 100px;
  font-family: var(--sans) !important;
  font-size: 1rem;
}

/* ---- SIDEBAR widget: profil karti hissi ---- */
.widget, .cpanel, .scard {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  box-shadow: var(--shadow-xs);
}
.widget h3, .cpanel h3 {
  color: var(--ink) !important;
  font-size: .95rem !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 12px !important;
  font-weight: 700;
}

/* ---- HESAPLAYICI sayfalari: profesyonel rapor hissi ---- */
.picker {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--brand) !important;
  border-radius: var(--radius) !important;
  padding: 14px 18px !important;
  box-shadow: var(--shadow-xs);
}
.picker label {
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  font-family: var(--display);
}
.picker select {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-weight: 500;
}

.brand h1, .top h1, .mpage-head h1 {
  font-weight: 800;
  letter-spacing: -.025em;
}
.brand p, .top p, .mpage-head p { color: var(--muted); }
.star-note {
  color: var(--muted) !important;
  font-size: .85rem !important;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 14px;
  border-left: 3px solid var(--amber);
}

/* "inputs" formu: formu ferah ve guven veren */
.inputs {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-sm);
}
.inputs fieldset, .inputs .group, .inputs .inp-group {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 14px !important;
}
.inputs legend, .inputs .leg {
  color: var(--ink) !important;
  background: var(--surface);
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.inputs label { color: var(--ink-2); font-weight: 500; }
.inputs input, .inputs select {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  padding: 10px 12px !important;
}
.inputs input:focus, .inputs select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-soft) !important;
}

/* sonuclar: profesyonel rapor karti */
.results {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.results li, .results .row, .results .r-row {
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 20px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .12s;
}
.results li:hover { background: var(--surface-2) !important; }
.results li:last-child { border-bottom: 0 !important; }
.results strong, .results b, .results .val {
  color: var(--accent) !important;
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--display);
  letter-spacing: -.01em;
}
.results a { color: var(--brand) !important; }

#out, #out-main {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-md);
}
#out h2, #out h3 {
  color: var(--ink) !important;
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
#out h2:first-child, #out h3:first-child { margin-top: 0; }
#out table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 10px 0; }
#out table th {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  padding: 10px 14px !important;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  border-bottom: 1px solid var(--line) !important;
  text-align: left;
}
#out table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
#out table td.v, #out table .val {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--display);
  font-size: 1.05rem;
  text-align: right;
}

/* notice: ferah ikon uyari */
.notice {
  background: var(--info-bg) !important;
  color: var(--info) !important;
  border: 1px solid var(--info) !important;
  border-left: 4px solid var(--info) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-weight: 500;
}
.notice.error, .notice.err { background: var(--err-soft) !important; color: var(--err) !important; border-color: var(--err) !important; }
.notice.ok, .notice.success { background: var(--success-soft) !important; color: var(--success) !important; border-color: var(--success) !important; }
.notice.warn, .notice.warning { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: var(--warn) !important; }

/* ---- ASK-CARD: topluluga sor; sosyal kanit ---- */
.ask-card {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(232,93,46,.08), transparent 60%),
    var(--surface) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px 24px !important;
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md) !important;
  position: relative;
  overflow: hidden;
}
.ask-card::before {
  content: "💬";
  position: absolute;
  top: -10px; right: 20px;
  font-size: 2.2rem;
  opacity: .14;
}
.ask-card strong { color: var(--ink) !important; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.ask-card span { color: var(--muted); }
.ask-card .btn {
  background: var(--accent) !important;
}

/* ---- SAVE-CARD: 4 somut fayda listesi, "10sn ucretsiz" vurgu ----
   Dizayn: hesaplama sonucunu kaybetme korkusu + fayda listesi + hizli kayit.
*/
.save-card {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--amber-soft) 100%) !important;
  border: 2px solid var(--brand) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-md) !important;
  position: relative;
  overflow: hidden;
}
.save-card::before {
  content: "⚡";
  position: absolute;
  top: 14px; right: 18px;
  font-size: 1.6rem;
  background: var(--amber);
  color: var(--ink);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(245,158,11,.4);
}
.save-card strong {
  color: var(--ink) !important;
  font-size: 1.2rem !important;
  font-weight: 800;
  display: block;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.save-card span {
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.55;
}
/* Fayda listesi: span icindeki metni fayda cizgilerine donustur */
.save-card span::after {
  content: "✓ Hesabı kaydet  ✓ Makine ayarlarını topla  ✓ Foruma sorularını kaydet  ✓ Kart gerekmez · 10 saniye";
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.8;
  letter-spacing: -.005em;
}
.save-card .btn {
  background: var(--brand) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.3), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.save-card .btn:hover { background: var(--brand-2) !important; }

/* disclaimer */
.disclaimer {
  color: var(--muted) !important;
  font-size: .82rem !important;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.6;
}
.disclaimer strong { color: var(--ink-2); }

/* ---- Dropdown menu ---- */
.ddm, .langm, .sugg {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 6px !important;
}
.ddm a, .langm a {
  border-radius: 8px !important;
  color: var(--ink) !important;
}
.ddm a:hover, .langm a:hover, .ddm a.on {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

/* ---- footer ---- */
.site-foot {
  background: linear-gradient(180deg, var(--bg) 0%, #ebe5d7 100%) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--muted);
  margin-top: 40px;
  padding: 32px 0 !important;
}
.site-foot a { color: var(--ink-2) !important; }
.site-foot a:hover { color: var(--accent) !important; }

/* placeholders */
::placeholder { color: var(--muted-2); opacity: 1; }

/* mobil ozen */
@media (max-width: 760px) {
  .hero h1, .mpage-head h1, .top h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .fhero { padding: 20px !important; }
  .pillars { gap: 10px; }
  .pillars li { padding: 10px 14px; font-size: .85rem; }
  .save-card { padding: 18px !important; }
  .save-card::before { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 1.3rem; }
}

/* yazdirma */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .results, .inputs, #out { box-shadow: none !important; border: 1px solid #ccc !important; }
  .ask-card, .save-card, .no-print, .fr-dot, .fb-chips, .forum-strip { display: none !important; }
}

/* motion-reduce */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}