:root {
  --bg: #020a18;
  --bg-soft: #06152e;
  --panel: rgba(5, 23, 51, 0.70);
  --panel-strong: rgba(6, 29, 65, 0.90);
  --border: rgba(104, 168, 255, 0.20);
  --border-strong: rgba(91, 157, 255, 0.42);
  --text: #f4f7ff;
  --muted: #a9b9d4;
  --primary: #2d7df7;
  --primary-2: #6258f6;
  --cyan: #78b9ff;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  /* İkincil metin (auth modalı vb.) — önceden tanımsızdı, hep #94a3b8 fallback'e düşüyordu */
  --text-soft: #94a3b8;
  /* Kontrollü vurgu renkleri (tanıtım kartları + ipucu kartı). Değerler koyu kart
     zemininde ≥5.8:1; açık tema karşılıkları body.light'ta (≥4.7:1). */
  --accent-visual: #2dd4bf;
  --accent-steps: #a78bfa;
  --accent-figure: #60a5fa;
  --accent-exam: #fbbf24;
  --accent-warm: #fbbf24;
  /* Hero 2. satır: koyu temada degrade metin, açık temada düz renk */
  --hero-accent-from: #6ea8ff;
  --hero-accent-to: #a08bff;
  --hero-accent-solid: #7f95ff;
  /* Ana CTA (Çöz). Başlangıç mavisi --primary'nin bir ton koyusu: beyaz metin AA (4.6:1) */
  --cta-from: #2f6fe8;
  --cta-to: var(--primary-2);
  --cta-glow: rgba(84, 92, 246, 0.30);
  --cta-glow-strong: rgba(84, 92, 246, 0.45);
  --cta-disabled-bg: #1a2a45;
  --cta-disabled-text: #8394b0;
  --focus-ring-inner: #020a18;
  --focus-ring-outer: #9cc6ff;
  /* Üst bardaki ikincil butonlar (Giriş/Kayıt, Paketler) — Çöz'ün altında kalsın */
  --btn2-bg: rgba(45, 125, 247, 0.12);
  --btn2-bg-hover: rgba(45, 125, 247, 0.22);
  --btn2-border: rgba(91, 157, 255, 0.42);
  --btn2-text: #dbe7ff;
  --btn2-text-hover: #ffffff;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 52% 28%, rgba(0, 110, 255, 0.19), transparent 34%),
    radial-gradient(circle at 92% 15%, rgba(41, 82, 171, 0.22), transparent 26%),
    linear-gradient(150deg, #020918 0%, #031127 45%, #010713 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.light {
  --bg: #ecedf1;
  --bg-soft: #e2e4ea;
  --panel: rgba(250, 250, 247, 0.82);
  --panel-strong: rgba(252, 252, 249, 0.95);
  --border: rgba(58, 104, 178, 0.15);
  --border-strong: rgba(49, 113, 218, 0.28);
  --text: #24303f;
  --muted: #5a6675;
  --text-soft: #52607a;
  --accent-visual: #0f766e;
  --accent-steps: #6d28d9;
  --accent-figure: #1d4ed8;
  --accent-exam: #b45309;
  --accent-warm: #b45309;
  --hero-accent-solid: #4338ca;
  --cta-glow: rgba(70, 80, 230, 0.22);
  --cta-glow-strong: rgba(70, 80, 230, 0.32);
  --cta-disabled-bg: #dde2ea;
  --cta-disabled-text: #667185;
  --focus-ring-inner: #ffffff;
  --focus-ring-outer: #1d4ed8;
  --btn2-bg: rgba(37, 99, 235, 0.07);
  --btn2-bg-hover: rgba(37, 99, 235, 0.14);
  --btn2-border: rgba(37, 99, 235, 0.35);
  --btn2-text: #1d4ed8;
  --btn2-text-hover: #1e40af;
  background:
    radial-gradient(circle at 50% 18%, rgba(120, 150, 200, 0.10), transparent 38%),
    linear-gradient(150deg, #edeef2 0%, #e6e7ec 52%, #f2f1ec 100%);
}

button, textarea, input { font: inherit; }
button { color: inherit; }

/* Erişilebilirlik: klavye odağı HER YERDE görünür olsun (fare kullanıcısını
   rahatsız etmeden — yalnız :focus-visible, yani klavyeyle gezinirken). Bazı
   öğelerin kendi özel odak stili varsa (ör. .auth-form input, aşağıda) o
   spesifik kural burada daha geniş olan bu genel kuralın üzerine yazar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #5ea2ff;
  outline-offset: 2px;
  border-radius: 4px;
}

.app-shell {
  position: relative;
  min-height: 100vh;
  padding: 32px 34px;
  isolation: isolate;
}

.glass-panel {
  background: linear-gradient(180deg, rgba(13, 40, 78, 0.66), rgba(3, 19, 44, 0.72));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

body.light .glass-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(235,245,255,.8));
}

/* Aydınlık modda koyu-mod için sabitlenmiş açık metinleri okunaklı yap. */
body.light .hero-copy p { color: #47546a; }
body.light .upload-zone p { color: #3f4b5e; }
body.light .upload-zone small { color: #6a7688; }
body.light .nav-item { color: #46536a; }
body.light .file-name { color: #2f6fd0; }
body.light .feature-card h3 { color: var(--card-accent, #2f6fd0); }
body.light .feature-card p { color: #55627a; }

.sidebar {
  position: fixed;
  z-index: 5;
  inset: 32px auto 32px 34px;
  width: 204px;
  padding: 26px 14px 20px;
  border-radius: 34px;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 14px 0 28px;
}

.brain-logo {
  width: 92px;
  height: 92px;
  padding: 9px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  font-size: 44px;
  color: #79b5ff;
  border: 1.5px solid #557ff4;
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(49, 136, 255, 0.28), inset 0 0 14px rgba(49, 136, 255, 0.12);
  text-shadow: 0 0 18px #3188ff;
}

.brain-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.brand h1 { margin: 0; font-size: 30px; letter-spacing: -1px; }
.brand h1 span { color: #4c8fff; }
.brand p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }

.navigation {
  display: grid;
  gap: 10px;
}

.nav-item {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: #c6d2e6;
  text-align: left;
  transition: .2s ease;
}

.nav-item span:first-child {
  width: 22px;
  color: #86b9ff;
  font-size: 20px;
  text-align: center;
}

.nav-item:hover { background: rgba(72, 132, 230, .14); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(35, 126, 249, .94), rgba(40, 74, 158, .62));
  box-shadow: 0 8px 26px rgba(28, 102, 223, .32);
}

.sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 18px;
  padding: 0 10px;
}

.language-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: 999px;
  background: rgba(3, 18, 42, .52);
}

.language-switch button {
  border: 0;
  border-radius: 999px;
  padding: 8px;
  background: transparent;
  cursor: pointer;
}

.language-switch button.active {
  color: #fff;   /* açık temada da mavi zeminde okunur (koyu metin 2.8:1 idi) */
  background: linear-gradient(90deg, #0d6ee8, #244f98);
  box-shadow: 0 0 18px rgba(35, 137, 255, .4);
}
/* Açık temada dil seçici koyu hap gibi kalıyordu → açık zemin + görünür kenarlık */
body.light .language-switch { background: rgba(30, 60, 120, .06); border-color: var(--border-strong); }
body.light .language-switch button.active { box-shadow: 0 0 12px rgba(35, 137, 255, .25); }

.theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}

.theme-row input { display: none; }
.toggle-ui {
  width: 42px;
  height: 23px;
  margin-left: auto;
  border-radius: 99px;
  background: #214775;
  padding: 3px;
}
.toggle-ui::after {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  margin-left: 0;
  border-radius: 50%;
  background: white;
  transition: .2s;
}
.theme-row input:checked + .toggle-ui {
  background: linear-gradient(90deg, #1d73e8, #456cff);
}
.theme-row input:checked + .toggle-ui::after { margin-left: 19px; }

.main-content {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 120px);
  margin-left: 0;
  padding: 8px 20px 116px;
}
/* Geniş ekranda sağdaki "Bugünün Sözü" kartına yer bırak (yalnız o görünürken). */
@media (min-width: 1201px) {
  .main-content { padding-right: 268px; }
}

.topbar {
  position: absolute;
  top: 0;
  right: 0;
}

.mode-button {
  border: 1px solid var(--border);
  background: rgba(4, 20, 44, .58);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--muted);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.hero {
  max-width: 900px;
  margin: 34px auto 0;
}

.hero-copy { text-align: center; }
.hero h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;   /* px yerine em: mobil boyutta da orantılı */
  text-wrap: balance;
}
/* 1. satır kendi bloğunda dengelensin: <br> + 2. satırla tek paragraf sayılınca
   balance etkisizdi (mobilde "Matematiği Sadece / Çözme" yetim kelime kalıyordu). */
.hero h2 > span:first-child { display: inline-block; }
.hero h2 strong { font-weight: 700; }
/* 2. satır = ana vurgu. Düz renk her yerde güvenli taban; koyu temada (destek
   varsa) mavi→mor degrade metin. Negatif harf aralığı son harfin mürekkebini
   kutudan taşırabildiği için küçük yatay iç boşluk + eşit negatif margin. */
.hero h2 strong span:first-child {
  color: var(--hero-accent-solid);
  padding: 0 .06em;
  margin: 0 -.06em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body:not(.light) .hero h2 strong span:first-child {
    background: linear-gradient(100deg, var(--hero-accent-from) 0%, var(--hero-accent-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 16px rgba(98, 110, 255, .22));
  }
}
@media (forced-colors: active) {
  .hero h2 strong span:first-child { background: none; -webkit-text-fill-color: currentColor; filter: none; }
}
.hero-copy p {
  max-width: 520px;
  margin: 18px auto 24px;
  color: #d4dded;
  font-size: 17px;
  line-height: 1.55;
}

.workspace { position: relative; }
.upload-zone {
  min-height: 140px;
  border: 1px dashed rgba(94, 159, 255, .6);
  border-radius: 17px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 20px;
  background: rgba(2, 17, 39, .27);
  transition: .2s ease;
  cursor: pointer;
}
.upload-zone:hover { border-color: rgba(128, 185, 255, .85); background: rgba(9, 30, 60, .35); }
.upload-zone.dragover {
  border-color: #80b9ff;
  border-style: solid;
  background: rgba(21, 80, 155, .24);
  transform: translateY(-2px);
}
.upload-zone:focus-visible { outline-offset: 3px; }
.upload-icon { font-size: 42px; color: #76b1ff; line-height: 1; }
.upload-zone p { margin: 7px 0 4px; color: #bed1ec; }
.upload-zone small { color: var(--muted); }
.file-name { margin-top: 8px; color: #79b9ff; font-size: 13px; }

/* Task 12G: serbest-metin soru girişi kaldırıldı — çözüm yolu tek: yüklenen
   görsel. Solve butonu artık kendi başına, orta hizalı, kasıtlı bir satırda. */
.solve-row {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
/* Sayfadaki TEK güçlü dolu CTA. Durumlar renkten başka ipuçlarıyla da ayrışır:
   pasifte düz/soluk zemin + gölgesiz + not-allowed imleç; odakta çift halka. */
.solve-button {
  min-width: 220px;
  padding: 18px 36px;
  border: 0;
  border-radius: 30px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(110deg, var(--cta-from), var(--cta-to));
  box-shadow: 0 8px 24px var(--cta-glow);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
@media (hover: hover) {
  .solve-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px var(--cta-glow-strong);
    filter: brightness(1.06);
  }
}
/* Klavye odağı: iç halka (zemin rengi) + dış halka. Genel button:focus-visible
   kuralı border-radius:4px veriyordu → hap biçimi odakta köşeleşiyordu; korunur. */
.solve-button:focus-visible {
  outline: 2px solid var(--focus-ring-outer);
  outline-offset: 3px;
  border-radius: 30px;
  box-shadow: 0 0 0 3px var(--focus-ring-inner), 0 8px 24px var(--cta-glow);
}
.solve-button:disabled {
  cursor: not-allowed;
  color: var(--cta-disabled-text);
  background: var(--cta-disabled-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  filter: none;
  transform: none;
}
/* Yükleniyor durumu: yalnız "disabled" değil, GÖRÜNÜR bir ilerleme göstergesi
   (dönen halka) — öğrenci butonun donduğunu değil çalıştığını anlasın. Buton bu
   sırada disabled'dır ama "pasif" değil "çalışıyor" görünmeli → dolu degrade kalır. */
.solve-button.is-loading { position: relative; color: transparent; }
.solve-button.is-loading:disabled {
  color: transparent;
  cursor: progress;
  background: linear-gradient(110deg, var(--cta-from), var(--cta-to));
  box-shadow: 0 8px 24px var(--cta-glow);
}
.solve-button.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: solve-spin .7s linear infinite;
}
@keyframes solve-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .solve-button.is-loading::after { animation: none; }
  .solve-button { transition: none; }
  .solve-button:hover:not(:disabled) { transform: none; }
}

.result-box {
  margin-top: 15px;
  padding: 18px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(6, 29, 65, .88);
}
.result-head { display: flex; align-items: center; justify-content: space-between; }
.result-head h3 { margin: 0; }
.result-head button { border: 0; background: transparent; font-size: 26px; cursor: pointer; }
.result-box p { color: #c8d7ed; line-height: 1.7; }
body.light .result-box p { color: #3a4759; }

/* Açık temada koyu-mod arka plan kalıntılarını düzelt (kontrast/uyum) */
body.light .upload-zone { background: rgba(255, 255, 255, .55); border-color: rgba(58, 104, 178, .40); }
body.light .upload-zone:hover { background: rgba(255, 255, 255, .8); border-color: rgba(58, 104, 178, .65); }
body.light .upload-zone.dragover { background: rgba(220, 232, 250, .8); }
body.light .result-box { background: rgba(255, 255, 255, .94); border-color: #d3dbe8; }

/* RÖTUŞ 4 — Çözüm geldiğinde FERAH/GENİŞ ekran: ipucu kartı + tanıtım kartları +
   başlık gizlenir; çözüm tam genişlik kaplar. Mobilde de tam genişlik. */
body.showing-result .quote-card,
body.showing-result .ticker,
body.showing-result .feature-grid,
body.showing-result .hero-copy { display: none !important; }
body.showing-result .main-content { padding: 26px 28px 40px 20px; }
body.showing-result .hero { max-width: 1180px; margin: 6px auto 0; }
body.showing-result #reportFrame { height: 84vh; }
@media (max-width: 860px) {
  body.showing-result .main-content { padding: 60px 10px 24px; }
  body.showing-result #reportFrame { height: 80vh; }
}

/* Geri bildirim (👍/👎) satırı */
.feedback-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 2px 2px;
  color: var(--muted);
  font-size: 14px;
}
.feedback-row[hidden] { display: none; }   /* display:flex, [hidden]'ı ezmesin */
.fb-q { margin-right: 2px; }
.fb-btn {
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: .15s ease;
}
.fb-btn:hover:not(:disabled) { background: rgba(72, 132, 230, .18); transform: translateY(-1px); }
.fb-btn:disabled { cursor: default; }
.fb-btn.selected { background: rgba(72, 132, 230, .28); border-color: #4884e6; box-shadow: 0 0 0 2px rgba(72, 132, 230, .35); }
.fb-btn:disabled:not(.selected) { opacity: .45; }
.fb-send {
  border: 1px solid #4884e6;
  background: #2f6fd6;
  color: #fff;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s ease;
}
.fb-send:hover:not(:disabled) { background: #3a7be4; }
.fb-send:disabled { opacity: .45; cursor: default; }
.fb-thanks { color: #37a06b; font-weight: 600; font-size: 13px; }
.fb-error { color: #e06c6c; font-weight: 600; font-size: 13px; }
.fb-comment { flex: 1 1 200px; min-width: 160px; max-width: 340px; font-size: 13px;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(3,18,42,.4); color: var(--text); }
.fb-comment::placeholder { color: var(--muted); opacity: .8; }
.fb-comment:disabled { opacity: .5; }
body.light .fb-comment { background: rgba(255,255,255,.7); border-color: #d7dde8; }
body.light .feedback-row { color: #5a6675; }
body.light .fb-btn { background: rgba(30, 60, 120, .05); }
body.light .fb-btn.selected { background: rgba(47, 111, 214, .14); border-color: #2f6fd6; box-shadow: 0 0 0 2px rgba(47, 111, 214, .25); }
body.light .fb-thanks { color: #2f855a; }
body.light .fb-error { color: #c53030; }

/* Gizlilik / KVKK onay notu + modal */
.privacy-note {
  margin: 12px 6px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.privacy-link {
  border: 0;
  background: none;
  padding: 0 0 0 4px;
  color: #6ba3ff;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
body.light .privacy-link { color: #2f6fd0; }

.privacy-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.privacy-modal[hidden] { display: none; }   /* display:grid, [hidden]'ı ezmesin */
.privacy-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 20, 0.6); backdrop-filter: blur(3px); }
.privacy-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 20px;
  padding: 22px 24px;
}
.privacy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.privacy-head h3 { margin: 0; font-size: 18px; }
.privacy-head button { border: 0; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.privacy-body { color: var(--muted); font-size: 14px; }
.pv-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.pv-item strong { display: block; color: var(--text); margin-bottom: 3px; font-size: 14px; }
.pv-item p { margin: 0; line-height: 1.55; }
.pv-footer { margin: 14px 0 0; font-size: 12px; font-style: italic; opacity: .85; }
.pv-footer a { color: #6ba3ff; }                      /* .privacy-link ile aynı; UA mavisi koyu zeminde okunmuyordu */
body.light .pv-footer a { color: #2f6fd0; }

/* ===== ÜST HEADER (sol panel kaldırıldı) ===== */
.app-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-radius: 22px;
  margin-bottom: 6px;
}
.app-header .brand {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 13px;
  margin: 0;
}
.app-header .brain-logo {
  width: 54px;
  height: 54px;
  padding: 5px;
  margin-bottom: 0;
  font-size: 26px;
  box-shadow: 0 0 14px rgba(49, 136, 255, 0.25);
}
.app-header .brand-text h1 { margin: 0; font-size: 22px; letter-spacing: -0.5px; }
.app-header .brand-text p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.header-controls { display: flex; align-items: center; gap: 14px; }
.app-header .language-switch { min-width: 96px; }
.theme-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #cfe0ff;
  font-size: 19px;
  cursor: pointer;
  transition: .15s ease;
}
.theme-btn:hover { background: rgba(72, 132, 230, 0.18); }
body.light .theme-btn { color: #2f6fd0; background: rgba(30, 60, 120, 0.05); }

/* ===== AÇIK MOD OKUNABİLİRLİK ===== */
/* Kayan matematik sembolleri açık zeminde de görünür (ama içeriği bastırmayacak kadar hafif) */
body.light .symbol {
  color: rgba(64, 110, 190, 0.30);
  text-shadow: 0 0 8px rgba(64, 110, 190, 0.16);
}
body.light .background-glow { opacity: 0.08; }
/* Açık modda soluk kalan metinler → yeterli koyuluk */
body.light .quote-card h3 { color: var(--accent-warm); }
body.light .quote-card blockquote { color: #2b3648; }
body.light .quote-mark { color: #4a86dd; }
body.light .upload-icon { color: #3f7fd6; }
body.light .result-head h3,
body.light .privacy-head h3 { color: #1b2740; }
body.light .fb-q { color: #52607a; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.feature-card {
  min-height: 153px;
  padding: 22px 21px;
  border-radius: 18px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Kart başına TEK vurgu rengi: yalnız ikon (+ hafif hale), başlık tonu ve hover
   kenarlık/ışıması. Zemin ve gövde metni tüm kartlarda ortak kalır. */
.feature-card--visual { --card-accent: var(--accent-visual); }
.feature-card--steps  { --card-accent: var(--accent-steps); }
.feature-card--figure { --card-accent: var(--accent-figure); }
.feature-card--exam   { --card-accent: var(--accent-exam); }
/* Kaldırma/ışıma yalnız gerçek hover'ı olan cihazlarda (dokunmatikte "yapışmasın") */
@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-strong);
    border-color: color-mix(in srgb, var(--card-accent, #5ea2ff) 55%, transparent);
    box-shadow: var(--shadow), 0 12px 34px color-mix(in srgb, var(--card-accent, #5ea2ff) 16%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover { transform: none; }
}
.feature-icon {
  display: grid;   /* inline-grid satır taban çizgisi boşluğu ekleyip kartı uzatıyordu */
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 25px;
  line-height: 1;
  color: var(--card-accent, #5ea2ff);
  background: color-mix(in srgb, var(--card-accent, #5ea2ff) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent, #5ea2ff) 22%, transparent);
}
/* ⌁ glifi diğerlerinden belirgin biçimde küçük çiziliyor → yalnız boyut telafisi */
.feature-card--figure .feature-icon { font-size: 36px; }
.feature-card h3 {
  margin: 13px 0 7px;
  font-size: 15px;
  color: #8fc0ff;
  color: color-mix(in srgb, var(--card-accent, #8fc0ff) 72%, #ffffff);
}
.feature-card p { margin: 0; color: #bdc9dc; font-size: 13px; line-height: 1.55; }

.quote-card {
  position: fixed;
  z-index: 3;
  width: 232px;
  right: 34px;
  top: 50%;
  transform: translateY(-41%);
  min-height: 320px;
  border-radius: 23px;
  padding: 28px 24px;
}
.quote-mark { color: #5ca7ff; font-size: 43px; }
/* Sıcak (amber) vurgu: yalnız başlık tonu + üstte ince ışık çizgisi. Emoji
   CSS rengini yok saydığı için 💡'ye güvenilmez. */
.quote-card h3 {
  color: #8dbfff;
  color: color-mix(in srgb, var(--accent-warm) 82%, #ffffff);
  font-size: 16px;
}
.quote-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22%;
  right: 22%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-warm), transparent);
  opacity: .75;
  pointer-events: none;
}
.quote-card blockquote {
  margin: 18px 0;
  font-style: italic;
  line-height: 1.65;
}
.quote-dots {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.quote-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #35557f;
  cursor: pointer;
}
.quote-dots button.active { background: #4099ff; box-shadow: 0 0 10px #4099ff; }

/* Kayan söz bandı (ticker) — GERİ YÜKLENDİ, önceki halinden 2 kasıtlı farkla:
   1) artık position:fixed DEĞİL — normal akışta, footer'ın HEMEN ÜSTÜNDE; bu
      yüzden footer'ı asla kaplayamaz (eski sürümün gerçek kök nedeni buydu).
   2) daha yavaş (30s->48s) ve daha soluk (düşük opaklık/kontrast kenarlık) —
      "ana göreve rakip olmayan, ikincil" bir dekor. */
.ticker {
  max-width: 900px;
  margin: 22px auto 0;
  padding: 16px 0;
  border-radius: 18px;
  overflow: hidden;
  opacity: .82;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  padding-left: 24px;
  animation: ticker 48s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  width: 240px;
  padding-right: 30px;
  border-right: 1px solid rgba(118, 173, 245, .28);
}
.ticker-item p { margin: 0 0 6px; line-height: 1.45; font-size: 13px; color: var(--muted); }
.ticker-item small { color: var(--muted); opacity: .85; }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }   /* sürekli otomatik kaydırma YOK */
}
@media (max-width: 680px) {
  .ticker { margin-top: 16px; }
}
/* Modal (giriş/kayıt/paket/gizlilik) açıkken veya çözüm ekranındayken arka plan
   temiz olsun → kayan bant + semboller + parıltılar gizlenir. */
body:has(.auth-modal:not([hidden])) .ticker,
body:has(.privacy-modal:not([hidden])) .ticker,
body:has(.auth-modal:not([hidden])) .symbol-rain,
body:has(.privacy-modal:not([hidden])) .symbol-rain,
body.showing-result .symbol-rain,
body:has(.auth-modal:not([hidden])) .background-glow,
body:has(.privacy-modal:not([hidden])) .background-glow,
body.showing-result .background-glow { display: none !important; }

.symbol-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.symbol {
  position: absolute;
  top: -14vh;
  color: rgba(116, 183, 255, .76);
  text-shadow: 0 0 12px rgba(43, 132, 255, .55);
  animation: fall linear infinite;
  user-select: none;
}
.background-glow {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .16;
  z-index: -1;
}
.glow-one { top: 12%; left: 30%; background: #046bff; }
.glow-two { right: 5%; bottom: 3%; background: #143dd7; }

@keyframes fall {
  to { transform: translateY(120vh) rotate(360deg); opacity: .15; }
}

@media (max-width: 1200px) {
  .quote-card { display: none; }
  .main-content { padding-right: 20px; }
  .hero { max-width: 900px; }
}

@media (max-width: 860px) {
  .app-shell { padding: 14px; }
  .app-header { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .app-header .brand { justify-content: center; text-align: left; }
  /* Girişli durumda kota + Paketler + Çıkış + tema + dil tek satırda ~470px'e
     çıkıp sayfayı 375px'te ~499px'e genişletiyordu → kontroller satırlara sarılır,
     hiçbiri gizlenmez; hesap grubu kendi içinde de sarılabilir (320px). */
  .header-controls { justify-content: center; flex-wrap: wrap; row-gap: 10px; }
  .auth-area { max-width: 100%; }
  .user-box { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .main-content { margin-left: 0; padding: 6px 2px 124px; }
  .hero { margin-top: 16px; }
}

@media (max-width: 680px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .solve-row { width: 100%; }
  .solve-button { width: 100%; min-width: 0; }
  .navigation { grid-template-columns: repeat(6, 1fr); }
  .navigation .nav-item:nth-child(n+7) { display: none; }
}

@media (max-width: 460px) {
  .feature-grid { grid-template-columns: 1fr; }
  .hero h2 { font-size: 35px; }
  .hero-copy p { font-size: 15px; }
}

/* ===== Kullanıcı sistemi (auth) ===== */
.auth-area { display: flex; align-items: center; }
.user-box { display: flex; align-items: center; gap: 10px; }
.user-box[hidden], .auth-btn[hidden] { display: none; }   /* hidden attr, display'i ezsin */
.quota-badge {
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(37, 99, 235, .15); color: #93c5fd; border: 1px solid rgba(37,99,235,.35);
  white-space: nowrap;
}
.quota-badge b { color: #fff; }
.quota-badge.empty { background: rgba(239,68,68,.15); color:#fca5a5; border-color: rgba(239,68,68,.4); }
.user-email { font-size: 13px; color: var(--text-soft, #94a3b8); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(37,99,235,.5);
  background: linear-gradient(135deg,#2563eb,#4f46e5); color: #fff; transition: filter .15s;
}
.auth-btn:hover { filter: brightness(1.1); }
.auth-btn.ghost { background: transparent; color: var(--text-soft,#94a3b8); border-color: rgba(148,163,184,.35); }
.auth-btn.ghost:hover { color:#fff; }
.auth-btn.primary { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }
/* Üst bar: Giriş/Kayıt ve Paketler İKİNCİL görünür (dolu degrade yalnız Çöz'de).
   Modal içindeki .auth-btn.primary'ler etkilenmez (kapsam: .app-header). */
.app-header .auth-btn:not(.ghost) {
  background: var(--btn2-bg);
  border-color: var(--btn2-border);
  color: var(--btn2-text);
}
.app-header .auth-btn:not(.ghost):hover {
  background: var(--btn2-bg-hover);
  color: var(--btn2-text-hover);
  filter: none;
}

/* body.light uyarlamaları */
body.light .quota-badge { background: rgba(37,99,235,.1); color:#1d4ed8; }
body.light .quota-badge b { color:#0f172a; }
/* body.light .quota-badge (0,2,1) .empty'yi (0,2,0) eziyordu → açık temada "hak bitti" mavi görünüyordu */
body.light .quota-badge.empty { background: rgba(239,68,68,.1); color: #b91c1c; border-color: rgba(239,68,68,.4); }
body.light .user-email { color:#475569; }
body.light .auth-btn.ghost { color:#475569; border-color:#cbd5e1; }
body.light .auth-btn.ghost:hover { color:#0f172a; }

/* Modal */
.auth-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.auth-modal[hidden] { display: none; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.6); backdrop-filter: blur(4px); }
.auth-card { position: relative; width: min(400px, 92vw); padding: 26px; border-radius: 18px; }
.auth-head { display:flex; justify-content: space-between; align-items:center; margin-bottom: 18px; }
.auth-head h3 { font-size: 20px; font-weight: 800; margin: 0; }
.auth-head button { background: none; border: none; font-size: 26px; line-height:1; cursor: pointer; color: var(--text-soft,#94a3b8); }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label { font-size: 12px; font-weight: 600; color: var(--text-soft,#94a3b8); margin-top: 8px; }
.auth-form input {
  font-family: inherit; font-size: 15px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(148,163,184,.3); background: rgba(15,23,42,.5); color: inherit;
}
body.light .auth-form input { background:#fff; border-color:#cbd5e1; color:#0f172a; }
.auth-form input:focus { outline: none; border-color: #2563eb; }
.auth-error { font-size: 13px; color: #fca5a5; margin-top: 8px; background: rgba(239,68,68,.12); padding: 8px 11px; border-radius: 8px; }
.auth-toggle { font-size: 13px; text-align: center; margin-top: 16px; color: var(--text-soft,#94a3b8); }
.linklike { background:none; border:none; color:#60a5fa; font-weight:700; cursor:pointer; font-family:inherit; font-size:13px; }
@media (max-width: 640px) { .user-email { display:none; } }

/* ===== Paket seçim modalı ===== */
.plan-card { position: relative; width: min(560px, 94vw); padding: 26px; border-radius: 18px; }
.plan-testnote { font-size: 12px; color:#f59e0b; background: rgba(245,158,11,.12); padding:6px 10px; border-radius:8px; text-align:center; margin-bottom: 14px; }
.plan-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px){ .plan-list { grid-template-columns: 1fr; } }
.plan-item { border:1px solid rgba(148,163,184,.28); border-radius:14px; padding:16px 14px; text-align:center; display:flex; flex-direction:column; gap:6px; }
.plan-item.current { border-color:#22c55e; box-shadow: 0 0 0 1px #22c55e inset; }
.plan-item.featured { border-color:#4f46e5; }
.plan-item .p-name { font-weight:800; font-size:16px; }
.plan-item .p-price { font-size:22px; font-weight:800; color:#93c5fd; }
.plan-item .p-desc { font-size:12.5px; color: var(--text-soft,#94a3b8); min-height:32px; }
.plan-item .p-badge { font-size:10.5px; font-weight:700; color:#22c55e; }
.plan-item button { margin-top:6px; }
body.light .plan-item { border-color:#e2e8f0; }
body.light .plan-item .p-price { color:#1d4ed8; }
.plan-toast { position: fixed; top: 18px; left:50%; transform: translateX(-50%); z-index:1100;
  background:#16a34a; color:#fff; font-weight:700; padding:10px 18px; border-radius:999px; font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.3); }

/* ===== Şifre kuralları + e-posta doğrulama ===== */
.pw-rules { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; gap: 4px; }
.pw-rules[hidden] { display: none; }
.pw-rules li { font-size: 12px; color: var(--text-soft,#94a3b8); display: flex; align-items: center; gap: 7px; }
.pw-rules li .mark { font-size: 13px; width: 14px; text-align: center; color: #64748b; }
.pw-rules li.ok { color: #22c55e; }
.pw-rules li.ok .mark { color: #22c55e; }
body.light .pw-rules li { color: #64748b; }
body.light .pw-rules li.ok { color: #16a34a; }

.verify-msg { font-size: 14px; color: var(--text-soft,#cbd5e1); margin: 0 0 12px; line-height: 1.5; }
.verify-dev { font-size: 12.5px; background: rgba(245,158,11,.12); color: #f59e0b;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; }
.verify-dev[hidden] { display: none; }
.verify-dev b { font-size: 16px; letter-spacing: 3px; color: #fbbf24; margin-left: 4px; }
#verifyCode { text-align: center; font-size: 22px; letter-spacing: 8px; font-weight: 700; }

.verify-badge { font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(245,158,11,.5);
  background: rgba(245,158,11,.15); color: #f59e0b; transition: filter .15s; }
.verify-badge:hover { filter: brightness(1.12); }
.verify-badge[hidden] { display: none; }

.auth-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* ===== Footer (yasal linkler) ===== */
.app-footer { max-width: 900px; margin: 40px auto 0; padding: 20px 8px 8px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.app-footer a { color: var(--muted); text-decoration: none; }
.app-footer a:hover { color: var(--cyan); text-decoration: underline; }
body.light .app-footer a { color: #44526a; }              /* açık temada biraz daha koyu/okunur */
body.light .app-footer a:hover { color: #1d4ed8; }
.app-footer .sep { opacity: .5; }
.app-footer .foot-copy { width: 100%; text-align: center; opacity: .8; font-size: 12px; }

/* ===== Yasal sayfalar (yasal.html = TR, legal.html = EN) ===== */
html.pre-light { background: #ecedf1; }   /* legal.js: kayıtlı açık tema, body boyanmadan önce */
.legal-wrap { max-width: 860px; margin: 0 auto; padding: 28px 22px 80px; }
.legal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 8px; }
/* Logo flex satırında EZİLMESİN (mobilde 21×52 boş ovale dönüşüyordu) */
.legal-head .brain-logo { flex: 0 0 auto; width: 52px; height: 52px; font-size: 24px; margin: 0; }
.legal-head h1 { flex: 1 1 220px; min-width: 0; font-size: 22px; margin: 0; }
.legal-head h1 span { color: var(--primary); }
.legal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.legal-back, .legal-theme, .legal-lang { border: 1px solid var(--border); background: var(--panel);
  color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legal-back:hover, .legal-theme:hover, .legal-lang:hover { border-color: var(--border-strong); }
.legal-warn { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35);
  color: #f59e0b; border-radius: 12px; padding: 12px 16px; font-size: 13px; margin: 14px 0 22px; line-height: 1.5; }
/* Bant içi bağlantı: tarayıcı varsayılan mavisi (#00e) koyu amber zeminde okunmuyordu */
.legal-warn a { color: inherit; font-weight: 600; text-decoration: underline; }
body.light .legal-warn { color: #92400e; border-color: rgba(180, 83, 9, .35); }   /* açık zeminde #f59e0b ~2:1 idi */
.legal-updated { margin: -12px 0 12px; font-size: 12px; color: var(--muted); }
.legal-nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0; margin-bottom: 8px; background: var(--bg); }
.legal-nav a { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  text-decoration: none; color: var(--muted); border: 1px solid var(--border); background: var(--panel); }
.legal-nav a:hover { color: var(--text); border-color: var(--border-strong); }
/* Klavye odağı: genel kural 4px köşe veriyor → hap biçimli öğelerde halka da hap */
.legal-nav a:focus-visible, .legal-back:focus-visible, .legal-theme:focus-visible,
.legal-lang:focus-visible { border-radius: 999px; }
.legal-doc { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 26px; margin-bottom: 22px; box-shadow: var(--shadow); }
/* Çapa ofseti yapışkan menüyü (en fazla 2 satır ≈108px) aşsın; eski bağlantılar
   (#mesafeli, #iptal-iade) .legal-anchor ile Satış bölümüne iner */
.legal-doc, .legal-anchor { scroll-margin-top: 124px; }
.legal-anchor { display: block; height: 0; }
.legal-doc h2 { font-size: 19px; margin: 0 0 6px; color: var(--text); }
.legal-doc h2 .num { color: var(--primary); margin-right: 2px; }   /* metinde boşluk var: "1. KVKK" */
.legal-doc h3 { font-size: 15px; margin: 18px 0 6px; color: var(--cyan); }
.legal-doc p, .legal-doc li { color: var(--text); font-size: 14.5px; line-height: 1.65; opacity: .92; }
.legal-doc ul { padding-left: 20px; margin: 8px 0; }
.legal-doc li { margin: 5px 0; }
.legal-doc a { color: var(--primary); }
.legal-doc .meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.legal-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px;
  margin-top: 8px; color: var(--muted); font-size: 13px; }
.legal-footer a { color: var(--muted); }
.legal-footer a:hover { color: var(--text); }
.legal-footer .sep { opacity: .5; }
.legal-footer .foot-copy { width: 100%; margin: 4px 0 0; text-align: center; font-size: 12px; opacity: .8; }
/* Dar ekranda sekmeler 2-3 satıra sarılıyor (≈141px): yapışkan menü, çapayla
   gidilen bölüm başlığını örtüyordu → burada menü normal akışta, ofset küçük. */
@media (max-width: 899px) {
  .legal-nav { position: static; background: none; }
  .legal-doc, .legal-anchor { scroll-margin-top: 16px; }
}

/* ===== Kayıt onay kutusu ===== */
.consent-row { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 2px; font-size: 12.5px; color: var(--muted); }
.consent-row[hidden] { display: none; }   /* hidden attr, display'i ezsin */
.consent-row input { margin-top: 2px; flex: 0 0 auto; }
.consent-row label { line-height: 1.45; }
.consent-row a { color: var(--primary); text-decoration: underline; }