/* ============ finans · design tokens ============ */
:root {
  /* light theme (default) */
  --bg: #f7f7f4;
  --bg-elev: #ffffff;
  --bg-sunk: #efefea;
  --bg-hover: #f0f0eb;
  --ink: #0e1116;
  --ink-2: #3a3f47;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;
  --line: #e5e5df;
  --line-2: #d8d8d0;
  --accent: #14213d;        /* brand navy */
  --accent-2: #1d3a63;
  --accent-soft: #eaeef6;
  --gold: #eab308;          /* brand gold — CTA'lar ve vurgu için */
  --gold-2: #f2c46a;
  --gold-soft: #fdf3d9;
  --gold-ink: #2a1c02;      /* altın zemin üstü metin rengi */
  --pos: #166534;
  --pos-soft: #e6f4ea;
  --neg: #991b1b;
  --neg-soft: #fbe9e9;
  --warn: #92400e;
  --warn-soft: #fef3c7;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 0 rgba(14,17,22,.04);
  --font-sans: "IBM Plex Sans", "Söhne", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --header-h: 68px;      /* 2026-09-22: 76px'ten sıkılaştırıldı — site "ekrandan büyükmüş gibi" görünüyordu */
  --nav-pill-bg: #14213d; --nav-pill-ink: #d5dbe8;
}

[data-theme="dark"] {
  /* 2026-09-18'de yeniden dengelendi: eski değerler (#0e1014 vb.) mavi kanalı
     kırmızıdan belirgin şekilde yüksek tutuyordu, bu da koyu temanın "gerçekten
     koyu" değil, soluk lacivert-gri bir sis gibi görünmesine yol açıyordu.
     Yeni skala hem daha koyu (siyaha yakın) hem de kart/kenarlık seviyeleri
     arasında daha net bir kontrast basamağı kuruyor — lacivert tonu sadece
     kenarlıklarda (--line/--line-2) belirgin ve amaçlı kalıyor. */
  --bg: #08080b;
  --bg-elev: #131319;
  --bg-sunk: #040405;
  --bg-hover: #1b1b23;
  --ink: #f4f4ef;
  --ink-2: #c8cad0;
  --ink-3: #8b8f99;
  --ink-4: #5b5f6a;
  --line: #272733;
  --line-2: #34343f;
  --accent: #f2c46a;        /* koyu zeminde altın vurgu */
  --accent-2: #e8b64a;      /* 2026-09-19'da #f7d68c'den koyulaştırıldı — o kadar soluktu ki metin/ikon rengi olarak kullanılınca göz yoruyordu */
  --accent-soft: #3a2e10;
  --gold: #eab308;
  --gold-2: #f2c46a;
  --gold-soft: #3a2e10;
  --gold-ink: #241a02;
  --pos: #6ee0a0;
  --pos-soft: #122a1c;
  --neg: #ff8b8b;
  --neg-soft: #2c1414;
  --warn: #f4c069;
  --warn-soft: #2b2010;
}

[data-theme="warm"] {
  --bg: #f3ece1;
  --bg-elev: #fbf6ec;
  --bg-sunk: #ebe2d2;
  --bg-hover: #ece3d3;
  --ink: #2a1e10;
  --ink-2: #4d3a26;
  --ink-3: #7a6648;
  --ink-4: #a89372;
  --line: #ddd1bc;
  --line-2: #cdbfa4;
  --accent: #163a63;
  --accent-2: #23558f;
  --accent-soft: #e7e0d0;
  --gold: #eab308;
  --gold-2: #f2c46a;
  --gold-soft: #f6e6bd;
  --gold-ink: #2a1c02;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Tema değişimi (light/dark/warm) — data-theme değişirken tüm renk token'ları
   anında "çat" diye değişmesin diye kısa bir crossfade. boot.jsx bu sınıfı
   `data-theme` her değiştiğinde ~420ms için ekleyip kaldırır (kalıcı olmaz,
   böylece kartların/butonların kendi transform/box-shadow geçişleriyle
   çakışmaz — !important yalnızca bu pencere içinde etkilidir). */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color .32s ease, border-color .32s ease, color .32s ease,
    fill .32s ease, stroke .32s ease, box-shadow .32s ease !important;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.mono { font-family: var(--font-mono); }

/* ============ header / shell ============ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.logo-mark {
  width: 30px; height: 30px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
}
.logo-text {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo-text::after {
  content: "·";
  margin-left: 6px;
  color: var(--ink-4);
}
.logo-sub {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  display: inline-block;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.header-spacer { flex: 1; }

.period-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--bg);
}
.period-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }

.header-user {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--line);
}

/* ============ küçük mono etiket (profil menüsü / filtre başlıkları) ============ */
.drawer-label {
  padding: 0 20px 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-family: var(--font-mono);
}

/* ============ page shell ============ */
.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 26px 56px;   /* 2026-09-22: 28/32/80'den sıkılaştırıldı, bkz. --header-h notu */
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px;
}
.page-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.page-crumbs {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-bottom: 8px;
}
.page-sub { color: var(--ink-3); font-size: 13px; }

/* ============ sayfa başlığı (intro-banner) ============
   2026-09-19'da kart görünümünden (kenarlık + degrade parıltı + ikon karesi +
   mono büyük harfli etiket + kutulu istatistik hapları — kullanıcı "fazlaca AI
   hissi veriyor" dedi) kutusuz, sakin bir sayfa başlığına çevrildi. Markup
   değişmedi; tüm sayfalar (Standartlar, hesap planları, Mali Tablolar,
   Alıştırmalar, Hesaplayıcılar…) bu tek kuralı paylaşır. Yeni kart çerçevesi,
   degrade veya mono-uppercase etiket EKLEME. */
.intro-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 14px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.intro-icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: .85;
}
.intro-icon svg { width: 15px; height: 15px; }
.intro-copy { flex: 1 1 260px; min-width: 220px; }
.intro-eyebrow {
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink-3); font-family: var(--font-sans); margin-bottom: 2px;
}
.intro-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 3px; color: var(--ink); }
.intro-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; max-width: 640px; margin: 0; }
.intro-stats { display: flex; gap: 6px 18px; flex-wrap: wrap; flex-shrink: 0; align-items: baseline; }
.intro-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; background: none; border: none; min-width: 0; }
.intro-stat b { font-size: 14px; font-family: var(--font-sans); font-weight: 600; color: var(--ink); line-height: 1.2; }
.intro-stat span { font-size: 12.5px; color: var(--ink-3); text-transform: none; letter-spacing: 0; }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: background .12s;
}
.btn:hover { background: var(--bg-hover); }
.btn.primary {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
  font-weight: 600;
}
.btn.primary:hover { background: var(--gold-2); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-hover); }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============ card ============ */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.card-pad { padding: 16px 18px; }
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* ============ utility ============ */
.row { display: flex; align-items: center; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 14px; } .gap-20 { gap: 17px; } .gap-24 { gap: 20px; }
.stack { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.grid { display: grid; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-family: var(--font-mono);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--bg);
}
.tag.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tag.pos { color: var(--pos); border-color: color-mix(in oklab, var(--pos) 35%, var(--line)); background: var(--pos-soft); }
.tag.neg { color: var(--neg); border-color: color-mix(in oklab, var(--neg) 35%, var(--line)); background: var(--neg-soft); }
.tag.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, var(--line)); background: var(--warn-soft); }

.divider {
  height: 1px; background: var(--line); margin: 16px 0;
}

input[type="text"], input[type="number"], input[type="search"], select, textarea {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
th {
  font-weight: 500;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-sunk);
}
tbody tr:hover { background: var(--bg-hover); }
td.num, th.num { text-align: right; font-family: var(--font-mono); }

/* ============ ai-card variants ============ */
.ai-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  min-height: 140px;
}
.ai-card .kicker {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); font-family: var(--font-mono);
  display: flex; align-items: center; gap: 6px;
}
.ai-card .big {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}
.ai-card .label { font-size: 13px; color: var(--ink-2); }
.ai-card.insight { border-color: var(--line-2); }
.ai-card.insight .body {
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.ai-card.action {
  background: var(--ink);
  color: var(--bg-elev);
  border-color: var(--ink);
}
.ai-card.action .label,
.ai-card.action .kicker { color: var(--ink-4); }
.ai-card.action .body { color: var(--bg-elev); font-size: 14.5px; line-height: 1.45; }
.ai-card.action .btn {
  background: transparent; color: var(--bg-elev);
  border-color: rgba(255,255,255,.2);
}
.ai-card.action .btn:hover { background: rgba(255,255,255,.08); }

/* ============ home hero ============ */
.hero {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 32px 32px 48px;
  margin: -28px -32px 36px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(760px 460px at 90% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(520px 360px at 100% 90%, color-mix(in oklab, var(--pos) 8%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 4%, var(--bg)), var(--bg) 75%);
}
.hero-copy { flex: 1 1 400px; min-width: 300px; }
.hero-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.hero-brand-mark { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.hero-brand-text { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.hero-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}
.hero-accent {
  background: linear-gradient(100deg, var(--gold), var(--gold-2) 60%, #f7d68c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 480px;
  margin: 0 0 26px;
}
.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--gold-ink);
  font-size: 14px; font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--gold) 60%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hero-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -8px color-mix(in oklab, var(--gold) 65%, transparent); }
.hero-btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; background: transparent; padding: 0;
  font-size: 14px; font-weight: 500;
  font-family: var(--font-sans);
  color: var(--ink-2);
  cursor: pointer;
}
.hero-play {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-2);
  flex-shrink: 0;
}
.hero-features { display: flex; gap: 24px; flex-wrap: wrap; }
.hero-feature {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-size: 11.5px; font-weight: 500; color: var(--ink-3);
  max-width: 112px; line-height: 1.35;
}
.hero-feature svg { color: var(--accent); }

.hero-illustration {
  flex: 1 1 400px;
  min-width: 320px;
  max-width: 540px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-top: 36px;
}
.hero-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-step:nth-child(2) { margin-bottom: 20px; }
.hero-step:nth-child(3) { margin-bottom: 40px; }
.hero-step:nth-child(4) { margin-bottom: 60px; }

.hero-card {
  padding: 13px 11px 26px;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: 0 14px 26px -16px color-mix(in oklab, var(--ink) 30%, transparent), 0 2px 6px rgba(0,0,0,.04);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.hero-card:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -14px color-mix(in oklab, var(--ink) 34%, transparent), 0 2px 6px rgba(0,0,0,.05); }
.hero-card-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.hero-card-title { font-size: 12px; font-weight: 600; margin-bottom: 3px; color: var(--ink); line-height: 1.25; }
.hero-card-sub { font-size: 10.5px; color: var(--ink-3); line-height: 1.35; }
.hero-card-arrow {
  position: absolute; right: 9px; bottom: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-platform {
  height: 40px;
  border-radius: 9px 9px 3px 3px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--font-mono);
}

@media (max-width: 860px) {
  .hero-illustration { display: none; }
}

/* ============ landing page (marketing site) ============ */
/* Header + hero'nun tek/kesintisiz bir yapı gibi hissettirmesi için: header
   artık düz opak değil, hero'nun arkasındaki soft degrade/ızgara/mesh'in
   hafifçe sızdığı yarı saydam "cam" (glass) bir yüzey — .app-header'ın kendisi
   DEĞİŞTİRİLMEDİ (post-login Shell ile paylaşılıyor), sadece Landing'e özel
   bu modifier class ile eziliyor. 2026-09-19'da kullanıcının verdiği bir
   referansa göre iki şey netleşti: (1) "kesişimi oluşturan her şeyi kaldır" —
   border-bottom tamamen kaldırıldı; (2) arkadaki ızgara/mesh dokusu artık tam
   navbar bölgesinde ayrıca soluklaştırılıyor (bkz. .hero-v2::before ve
   .flow-mesh-svg'nin üst-kenar maskesi) — böylece cam yüzeyin arkasında "kalabalık"
   bir doku değil, sakin bir alan var; blur bu yüzden daha hafif tutulabildi. */
/* 2026-09-19'da navbar da TR/EN ve Giriş Yap ile aynı dile (elips + cam)
   çevrildi — artık kenardan kenara düz bir çubuk değil, üstten biraz boşluklu,
   yuvarlak köşeli, kendi içinde "yüzen" bir kapsül. .hero-v2'deki negatif
   margin-top / padding-top ikilisi bu yeni toplam yükseklik (14px boşluk +
   62px kapsül = 76px) ile eşleşecek şekilde güncellendi. */
.lp-header-glass {
  top: 14px;
  margin: 14px auto 0;
  max-width: 1180px;
  height: 62px;
  padding: 0 10px 0 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line) 45%, transparent);
  background: color-mix(in oklab, var(--bg-elev) 42%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .2), inset 0 1px 0 color-mix(in oklab, #ffffff 28%, transparent);
}

/* Logo solda, kontroller sağda — ikisi de flex:1 olduğu için nav ortada kalır */
.lp-header-side { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.lp-header-side.start { justify-content: flex-start; }
.lp-header-side.end { justify-content: flex-end; gap: 12px; }
.lp-header-nav { position: relative; display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.lp-header-nav button {
  background: none; border: none; cursor: pointer; padding: 4px 0;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  font-family: var(--font-sans); transition: color .12s;
}
.lp-header-nav button:hover { color: var(--accent); }
.lp-header-nav button.active { color: var(--accent); font-weight: 600; }
/* Aktif sekmenin altında kayan çizgi — left/width inline (JS ölçümü), geçiş burada.
   İlk ölçümden önce (ready yok) transition kapalı, çizgi başlangıçta "uçmasın". */
.lp-nav-underline {
  position: absolute; bottom: -4px; height: 2px; border-radius: 2px;
  background: var(--gold); pointer-events: none;
}
.lp-nav-underline.ready { transition: left .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1); }

/* TR/EN dil geçişi + Giriş Yap — 2026-09-19'da köşeli/dolgun kutucuklardan
   ("çok AI hissi veriyor") elips + cam (glass) formatına çevrildi, header'ın
   genel cam yüzeyiyle aynı dilde; kullanıcının verdiği referanstaki gibi daha
   ferah/dolgun bir "premium" his için boşluklar büyütüldü. */
.lp-lang-toggle {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
  background: color-mix(in oklab, var(--bg-elev) 38%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.lp-lang-toggle button {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  font-size: 11.5px; font-family: var(--font-mono); font-weight: 500;
  color: var(--ink-3); transition: background .15s, color .15s;
}
.lp-lang-toggle button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lp-header-login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 24px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--gold-ink); font-size: 13px; font-weight: 700;
  font-family: var(--font-sans); cursor: pointer;
  box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--gold) 55%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-header-login-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--gold) 60%, transparent); }

/* Sayfa tek bir yüzey gibi hissettirsin diye (2026-09-19, kullanıcı: "hero ile
   Neden Ledgr arasında ince bir çizgi var, iki yapı ayrı gibi görünsün
   istemiyorum, tüm alan tek bir bütün olmalı") — bantlar arasındaki
   border-top/border-bottom çizgileri VE farklı arka plan renk blokları
   (var(--bg-elev)) kaldırıldı. Hero + "Neden Ledgr" artık AYNI .lp-band
   kapsayıcısını paylaşıyor (bkz. Landing.jsx), diğer bantlar da (istatistik
   şeridi, Popüler Konular) düz var(--bg) üzerinde, kenarlıksız akıyor. Tek
   zenginleştirilmiş yüzey Hero'nun kendisi (soft gradyan + mesh) — o da alttaki
   içerikle aynı renk tonuna (var(--bg)) sabit piksel değerinde (yüzdeyle değil,
   kutunun toplam yüksekliği artık Hero+Neden Ledgr'ı birlikte kapsadığı için)
   erken sönümleniyor ki geçiş her zaman hero'nun kendi yüksekliği içinde
   tamamlansın, Neden Ledgr'ın kart alanına taşmasın. */
.lp-band { width: 100%; }
.lp-band.soft {
  /* Üçüncü (taban) katman kasıtlı olarak %100 opak DEĞİL — Hero + Neden
     Ledgr, .lp-mesh-wrap içindeki paylaşılan SiteMesh'in ÜSTÜNDE oturuyor;
     taban gradyan tam opak olsaydı mesh'i tamamen örterdi ("hero ve neden
     ledgr kısmında hiçbir spiral yapı yok" şikayetinin nedeni buydu). Mesh
     olmayan alanlarda görünüm birebir aynı kalıyor (%X opaklıkta var(--bg)
     üstüne yine var(--bg) zemin = fark etmiyor), sadece çizgilerin olduğu
     yerlerde hafifçe sızıyorlar. */
  background:
    radial-gradient(760px 420px at 88% 0%, color-mix(in oklab, var(--gold) 13%, transparent), transparent 70%),
    radial-gradient(520px 360px at 100% 480px, color-mix(in oklab, var(--accent) 7%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--bg-elev) 55%, transparent),
      color-mix(in oklab, var(--bg) 55%, transparent) 560px,
      color-mix(in oklab, var(--bg) 55%, transparent) 100%);
}
.lp-section { max-width: 1320px; margin: 0 auto; padding: 88px 32px; }
.lp-section.tight { padding: 64px 32px; }

.lp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent); margin: 0 0 12px; }
.lp-heading { font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.22; letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; }
.lp-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 620px; margin: 0; }
.lp-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.lp-section-head-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer; white-space: nowrap; padding: 0;
}

/* ── Hero (soft/açık band, "Findly" referansının uyarlaması) ───────────────
   Arkada: soft degrade (.lp-band.soft) + hafif ızgara doku (.hero-v2::before,
   ortada belirgin, kenarlara doğru radial maskeyle sönümlenir) + site geneline
   yayılan flowing mesh (.site-mesh-sticky, bkz. Landing.jsx SiteMesh). Önde: merkezi
   başlık/CTA/arama vitrini + sitenin gerçek kapsamını gösteren, hafifçe yüzen
   dağınık etiketler (bkz.
   Landing.jsx hero-float-tag, HERO_SHOWCASE_CARDS).
   2026-09-19'da düzeltildi: mesh/etiketler önceden .lp-section (max-width:
   1320px) içindeydi, bu da ekranın yanlarından kırpılmış bir dikdörtgen gibi
   duruyordu — artık ikisi de .hero-v2'nin doğrudan çocuğu, tam genişlikte.
   Header'ın "ayrı bir katman" gibi durmaması için de hero'nun arka planı,
   negatif margin-top + eşdeğer padding-top ile sticky header'ın ARKASINA
   kadar uzatıldı (header kendisi .lp-header-glass ile büyük ölçüde saydam —
   böylece nav, sayfanın en tepesinde bile hero ile aynı yüzeyde durur, sadece
   scroll'da değil). */
.hero-v2 {
  position: relative; overflow: hidden;
  /* 76px = navbar'ın yeni kapsül (pill) yüksekliği (62px) + üst boşluğu (14px) —
     bkz. .lp-header-glass. Sabit --header-h yerine bu değer kullanılıyor çünkü
     Landing'in navbar'ı artık post-login Shell'inkiyle aynı yükseklikte değil. */
  margin-top: -76px;
  padding-top: 76px;
}
.hero-v2::before {
  /* top:90px (inset:0 değil) — kullanıcının verdiği referanstaki gibi, ızgara
     dokusu navbar bölgesinde hiç başlamıyor (mask ile soluklaştırmak yerine
     doğrudan orada render edilmiyor), cam yüzeyin arkası orada sakin kalıyor. */
  content: ''; position: absolute; top: 82px; left: 0; right: 0; bottom: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(180deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .4;
  -webkit-mask-image: radial-gradient(55% 65% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(55% 65% at 50% 40%, #000 0%, transparent 78%);
}
.hero-v2 .lp-section { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 72px; }

/* "Flowing mesh" — 2026-09-19'da kullanıcının verdiği bir referans <script>'in
   uyarlamasıyla ortaya çıktı; aynı gün önce sitenin geneline (bölüm-bölüm,
   scroll'a bağlı çizilen/silinen 4 ayrı örnek) yayıldı, sonra kullanıcı bunu
   da istemedi: "ana sayfa gibi ayrı, hakkımızda gibi ayrı olmasın — Hero'dan
   SSS'e kadar uzanan TEK bir yapı, adeta bir DNA gibi olmalı; yukarı/aşağı
   kaydırınca silinmesin, hep var olsun; gerekirse dönen bir yapı gibi olsun"
   dedi. Son hâli: SiteMesh artık TEK bir örnek (bkz. Landing.jsx), position:
   sticky ile Hero'dan SSS'in sonuna kadar olan bölümleri saran ortak
   .lp-mesh-wrap kapsayıcısının içinde viewport'a sabitleniyor — dış kapsayıcı
   (.site-mesh-sticky) height:0 olduğu için sayfa akışında hiç yer kaplamıyor,
   sadece "buraya sabitlen" diyen bir çapa; gerçek görsel iç kapsayıcıda
   (.site-mesh-inner, height:100vh) çiziliyor. .lp-mesh-wrap 2026-09-19'dan
   itibaren Footer'ı da KAPSIYOR (footer'ın kendi zemini/üst çizgisi yok) —
   mesh footer'ın arkasında da devam ediyor, sayfanın sonunda birlikte kayıyor. Artık scroll'a bağlı çizilme/silinme
   YOK, her zaman tam görünür — tek hareketi çok yavaş (dakikalar süren) bir
   tam tur döndürme (kullanıcının "dönen yapı" isteği), o kadar yavaş ki an be
   an bakıldığında sabit/bozulmamış görünüyor. Çizgi rengi --ink token'ına
   bağlı (stroke-opacity ile) — light temada koyu, dark temada açık. */
/* display:flow-root (overflow:hidden DEĞİL) — Hero'nun negatif margin-top
   numarası (bkz. .hero-v2) bu kapsayıcıdan "kaçıp" kapsayıcının kendi üst
   kenarını da yukarı çekmesin (margin collapsing) diye yeni bir block
   formatting context kuruyor. Bilinçli olarak overflow:hidden KULLANILMADI:
   CSS'te overflow'u 'visible' dışında herhangi bir değere ayarlamak (hidden
   dahil) o elementi position:sticky çocukları için "scroll container"
   yapıyor — bu da mesh'in gerçek sayfa scroll'una göre değil, hiç scroll
   olmayan bu kapsayıcıya göre "sticky" hesaplanmasına, yani hiç sabitlenmeden
   sadece en üstte (Hero'nun kendi opak arka planının ARKASINDA, dolayısıyla
   tamamen görünmez) durmasına yol açıyordu — mesh "hiçbir yerde görünmüyor"
   şikayetinin kök nedeni buydu. display:flow-root margin'i aynı şekilde
   kapsıyor ama scroll container OLUŞTURMUYOR, sticky doğru çalışıyor. */
.lp-mesh-wrap { position: relative; display: flow-root; }
.site-mesh-sticky {
  position: sticky; top: 0; height: 0; z-index: -1; pointer-events: none;
}
.site-mesh-inner {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 94%, transparent 100%);
}
.flow-mesh-svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  animation: site-mesh-spin 260s linear infinite;
  transform-origin: center;
}
@keyframes site-mesh-spin { to { transform: rotate(360deg); } }
.mesh-line, .mesh-line--soft, .mesh-line--strong {
  fill: none; stroke: var(--ink); vector-effect: non-scaling-stroke;
}
.mesh-line { stroke-opacity: .16; stroke-width: .8; }
.mesh-line--soft { stroke-opacity: .09; stroke-width: .6; }
.mesh-line--strong { stroke-opacity: .26; stroke-width: 1.1; }
@media (prefers-reduced-motion: reduce) {
  .flow-mesh-svg { animation: none; }
}
@media (max-width: 900px) {
  .site-mesh-sticky { display: none; }
}

.hero-centered { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; text-align: center; }
.hero-centered .lp-eyebrow { display: inline-flex; }
.lp-hero-title {
  font-size: clamp(28px, 4.2vw, 46px); font-weight: 700; line-height: 1.16;
  letter-spacing: -.02em; color: var(--ink); margin: 14px 0 16px;
}
.lp-hero-title .gold { color: var(--gold); }
.lp-hero-sub { font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 560px; margin: 0 auto 30px; }
.hero-cta-row { display: flex; justify-content: center; margin-bottom: 22px; }
.hero-search-mock {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-3);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, .18);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.hero-search-mock:hover { border-color: var(--line-2); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .22); transform: translateY(-1px); }
.hero-search-mock svg { color: var(--ink-4); flex-shrink: 0; }

/* Perdenin üzerine iliştirilmiş "ne sunuyoruz" etiketleri — Findly'deki
   içerik-türü pill'lerinin karşılığı. Artık köşelere rastgele dağılmıyor;
   HERO_TAG_POS (Landing.jsx) ile perdenin kıvrımlarıyla AYNI sol-alt → sağ-üst
   akışını takip ediyor. Etiketler de hafifçe camsı (yarı saydam + backdrop-blur)
   ki perdeyle aynı görsel dilde, bütünleşik dursunlar. Dış kapsayıcı
   (.hero-float-tag) konum (statik, inline), iç kapsayıcı (.hero-float-tag-inner)
   sürekli hafif yüzme animasyonunu taşır — iki ayrı transform aynı elementte
   çakışmasın diye (bkz. orbit-item aynı ilke). */
/* Yüksekliği sabit: Hero + "Neden Ledgr" tek .lp-band paylaştığı için inset:0
   kullanılsaydı yüzde bazlı konumlar (t:%) artık çok daha uzun olan kutuya
   göre hesaplanıp etiketleri Neden Ledgr'ın kart alanına kaydırırdı. */
.hero-float-tags { position: absolute; top: 0; left: 0; width: 100%; height: 640px; z-index: 0; }
.hero-float-tag { position: absolute; }
.hero-float-tag-inner {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--bg-elev) 72%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  color: var(--ink-2); font-size: 12px; font-weight: 600;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .16);
  animation: hero-tag-float 6s ease-in-out infinite;
}
.hero-float-tag-inner svg { color: var(--accent); flex-shrink: 0; }
@keyframes hero-tag-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-float-tag-inner { animation: none; }
}
@media (max-width: 1180px) {
  /* Dar/orta genişliklerde ortadaki metin sütununa (.hero-centered,
     max-width:700px) yetecek kenar boşluğu kalmıyor — etiketler kapatmasın
     diye bu genişliklerde hiç gösterilmiyor. */
  .hero-float-tags { display: none; }
}
@media (max-width: 560px) {
  .hero-search-mock { font-size: 12.5px; padding: 10px 16px 10px 14px; }
}

/* ── Genel 4'lü kart grid'i (Neden Biz) ───────────────────── */
.lp-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lp-feature-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.lp-feature-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.lp-feature-desc { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* ── İstatistik şeridi — yatay akan (marquee) şerit ─────────────────────────
   Artık sabit lacivert değil, normal tema token'larını kullanır (light/dark/warm
   ile birlikte değişir). Şerit kenarları maskeyle yumuşatılır, kart dizisi
   iki kopya halinde render edilip (bkz. Landing.jsx) %-50 translateX ile
   kesintisiz döner; üzerine gelince durur, prefers-reduced-motion'da hiç dönmez. */
.lp-stats-band {
  overflow: hidden;
  padding: 34px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
.lp-stats-track {
  display: flex; width: max-content;
  animation: lp-stats-scroll 26s linear infinite;
}
.lp-stats-band:hover .lp-stats-track,
.lp-stats-band:focus-within .lp-stats-track { animation-play-state: paused; }
@keyframes lp-stats-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lp-stat {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 0 40px; border-left: 1px solid var(--line);
  white-space: nowrap;
}
.lp-stat-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-soft); color: var(--accent);
}
.lp-stat-num { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1; }
.lp-stat-num .tabular-nums { font-variant-numeric: tabular-nums; }
.lp-stat-label { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .lp-stats-track { animation: none; }
}
@media (max-width: 720px) {
  .lp-stats-band { padding: 26px 0; }
  .lp-stat { padding: 0 26px; }
}

/* ── 3 adım (Nasıl Çalışır) ─────────────────────────────────── */
.lp-steps { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; text-align: center; }
.lp-step { flex: 1 1 220px; max-width: 300px; display: flex; flex-direction: column; align-items: center; }
.lp-step-num {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 16px;
  margin-bottom: 16px;
}
.lp-step-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.lp-step-desc { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; }

@media (max-width: 980px) {
  .lp-cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lp-cards-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Popüler Konular — orbit showcase ─────────────────────────────────────
   Kullanıcının verdiği bir "CommunityOrbit" (React+TS+framer-motion, kullanıcı
   avatarları) referans bileşeninin vanilla uyarlaması (bkz. Landing.jsx
   OrbitShowcase) — framer-motion YOK, gerçek fotoğraf/avatar YOK, iki eş
   merkezli yay üzerinde gerçek IFRS/TDHP/VUK/GAAP içeriğini temsil eden
   ikon+etiket (pill), ikon-rozet (card), durum (status) ve dekoratif onay
   (check) öğeleri döner. Tüm renkler tema token'larına bağlı (light/dark/warm
   ile birlikte değişir) — sadece Hero/İstatistik Şeridi/İletişim kartı gibi
   sabit lacivert bantlar bundan muaf, bu bölüm onlardan biri değil. */
.orbit-frame { position: relative; width: 100%; overflow: hidden; }
.orbit-stage { position: absolute; left: 50%; top: 0; transform-origin: top center; }

.orbit-arcs {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.orbit-showcase.visible .orbit-arcs { opacity: 1; }
.orbit-arc-outer, .orbit-arc-inner { fill: none; }
.orbit-arc-outer { stroke: var(--line); stroke-width: 1.5; }
.orbit-arc-inner { stroke: var(--line-2); stroke-width: 2; }

.orbit-item {
  position: absolute; transform: translate(-50%, -50%) scale(0.7); opacity: 0;
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.orbit-showcase.visible .orbit-item { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.orbit-item:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 2; }
.orbit-item-float { animation: orbit-float 5s ease-in-out infinite; }
@keyframes orbit-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.orbit-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--ink-2); font-size: 12.5px; font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.orbit-pill svg { flex-shrink: 0; color: var(--ink-3); }
.orbit-card {
  position: relative; width: 52px; height: 52px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.orbit-card-code {
  position: absolute; bottom: -6px; right: -8px;
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 5px;
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-3);
}
.orbit-status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 12px; border-radius: 99px;
  border: 1px solid color-mix(in oklab, var(--pos) 35%, transparent);
  background: var(--pos-soft); color: var(--pos); font-size: 12.5px; font-weight: 600;
}
.orbit-check {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklab, var(--pos) 35%, transparent);
  background: var(--pos-soft); color: var(--pos);
}

.orbit-stats { display: flex; justify-content: center; gap: 48px; margin-top: 4px; flex-wrap: wrap; }
.orbit-stat { text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.orbit-showcase.visible .orbit-stat { opacity: 1; transform: translateY(0); }
.orbit-stat-num { font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; }
.orbit-stat-label { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

.orbit-headline {
  max-width: 640px; margin: 26px auto 0; text-align: center;
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 600; line-height: 1.32; color: var(--ink);
  opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease;
}
.orbit-showcase.visible .orbit-headline { opacity: 1; transform: translateY(0); }

.orbit-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.orbit-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 16px 6px 6px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  cursor: pointer; opacity: 0; transform: translateY(10px); font-family: inherit;
  transition: opacity .5s ease, transform .5s ease, border-color .2s, box-shadow .2s;
}
.orbit-showcase.visible .orbit-tag { opacity: 1; transform: translateY(0); }
.orbit-tag:hover { border-color: var(--line-2); box-shadow: 0 6px 16px -8px rgba(0,0,0,.18); transform: translateY(-2px); }
.orbit-tag-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .orbit-item, .orbit-item-float, .orbit-arcs, .orbit-stat, .orbit-headline, .orbit-tag {
    transition: none; animation: none; opacity: 1; transform: none;
  }
}
@media (max-width: 640px) {
  .orbit-stats { gap: 28px; }
  .orbit-stat-num { font-size: 26px; }
}

/* ── SSS + İletişim (split) ─────────────────────────────────── */
.lp-split { display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start; }
.lp-split > * { flex: 1 1 420px; min-width: min(300px, 100%); }
.lp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.lp-faq-item { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elev); overflow: hidden; }
.lp-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; background: none; border: none; text-align: left;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; font-family: inherit;
}
.lp-faq-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); color: var(--ink-3); transition: transform .15s, background .15s, color .15s;
}
.lp-faq-item.open .lp-faq-icon { transform: rotate(45deg); background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.lp-faq-a { padding: 0 18px 16px; font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0; }

.lp-contact-card {
  background: linear-gradient(160deg, #16294d, #0c1930 68%);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.lp-contact-card .lp-eyebrow { color: var(--gold); }
.lp-contact-card .lp-heading { font-size: clamp(19px, 2.4vw, 25px); color: #f4f4ef; }
.lp-contact-card .lp-sub { margin-bottom: 24px; color: rgba(244, 244, 239, .72); }
.lp-contact-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-contact-chip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(244, 244, 239, .18); background: rgba(244, 244, 239, .06);
  color: rgba(244, 244, 239, .72); font-size: 12.5px; font-weight: 500; transition: all .12s;
}
.lp-contact-chip:hover { background: rgba(244, 244, 239, .12); color: #f4f4ef; }
.lp-contact-chip.active { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }
.lp-contact-form { display: flex; flex-direction: column; gap: 12px; }
.lp-contact-row { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-contact-row > * { flex: 1 1 180px; min-width: 0; }
.lp-contact-field {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid rgba(244, 244, 239, .18); border-radius: 7px;
  background: rgba(244, 244, 239, .06); color: #f4f4ef;
  font-size: 13.5px; font-family: inherit;
}
.lp-contact-field::placeholder { color: rgba(244, 244, 239, .4); }
.lp-contact-label { font-size: 11px; color: rgba(244, 244, 239, .55); margin-bottom: 5px; font-family: var(--font-mono); }

/* ── Footer ─────────────────────────────────────────────────── */
/* 2026-09-19'da tek satırlık logo+link+copyright şeridinden 4 sütunlu (marka /
   sayfalar / içerikler / başla) + alt çubuklu (copyright + yukarı çık) bir
   footer'a çevrildi. Uydurma sosyal medya/gizlilik linki YOK (bkz. §9.5). */
.lp-footer { padding: 24px 32px 0; }  /* zemin/üst çizgi YOK — mesh footer'ın altında da devam etsin, sayfadan kopuk görünmesin */
.lp-footer-inner { max-width: 1320px; margin: 0 auto; }
.lp-footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: 40px;
  padding-bottom: 40px;
}
.lp-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; }
.lp-footer-head {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px;
}
.lp-footer-tag { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 300px; }
.lp-footer-col > button {
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font-size: 13.5px; color: var(--ink-2); font-family: inherit; transition: color .12s;
}
.lp-footer-col > button:hover { color: var(--accent); }
.lp-footer-col > button.lp-footer-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 13px;
  background: var(--gold); color: var(--gold-ink);
  transition: transform .15s, box-shadow .15s;
}
.lp-footer-col > button.lp-footer-cta:hover { color: var(--gold-ink); transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--gold) 60%, transparent); }
.lp-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 20px 0 24px; border-top: 1px solid var(--line);
}
.lp-footer-copy { font-size: 11.5px; color: var(--ink-4); }
.lp-footer-top {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--ink-3); font-family: inherit; transition: color .12s;
}
.lp-footer-top:hover { color: var(--accent); }
@media (max-width: 900px) {
  .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .lp-footer { padding: 40px 20px 0; }
  .lp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* sparkline */
.spark { height: 28px; display: flex; align-items: flex-end; gap: 2px; }
.spark span {
  flex: 1; background: var(--accent); border-radius: 1px; opacity: .85;
  min-height: 2px;
}
.spark.muted span { background: var(--ink-4); opacity: .5; }

/* progress bar */
.pbar { height: 6px; background: var(--bg-sunk); border-radius: 99px; overflow: hidden; }
.pbar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.pbar.pos > span { background: var(--pos); }
.pbar.warn > span { background: var(--warn); }
.pbar.neg > span { background: var(--neg); }

/* checkbox */
.chk {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  cursor: pointer; flex-shrink: 0;
  transition: all .12s;
}
.chk.on {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}

/* keyboard hint */
kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-2);
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* page transitions */
.page-enter { animation: pageIn .22s cubic-bezier(.2,.7,.2,1); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bilgi Kartları (InfoCards.jsx) — bir sonraki karta geçiş (swipe / Önceki-Sonraki):
   arkadaki "peek" kartı öne, tam boyuta büyüyerek gelir. "from" değerleri
   CardPeek'in dinaklama halindeki transform'uyla (translateY(10px) scale(.95)
   opacity .55) BİREBİR aynı — böylece görünmezden aniden belirmek yerine,
   gözün zaten gördüğü soluk peek halinin kaldığı yerden büyümesi izlenimi
   verir (2026-09-22: eskiden opacity:0'dan başlıyordu, üstteki "flying" kart
   onu örttüğü için ortaya çıkışı ani/"ışınlanma gibi" hissettiriyordu). Küçük
   bir gecikme (.06s), eski kartın uçup gitmesinin arkasından gelen bir "rölay"
   hissi versin diye — ikisi tam aynı anda değil, art arda oynuyor. */
@keyframes infoCardEnter {
  from { opacity: .55; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.info-card-enter {
  animation: infoCardEnter .44s cubic-bezier(.22, 1, .36, 1) .06s both;
  transform-origin: center;
}

/* ─── Notes (Rapor Dipnotları) ───────────────────────────────────────────── */
.notes-layout {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
  z-index: 1;
  background: var(--bg);
}

.notes-sidebar {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-elev);
  min-height: 0;
}

.notes-sidebar-top {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.notes-sidebar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

.dipnot-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.dipnot-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 100ms;
  border-left: 2px solid transparent;
}
.dipnot-item:hover { background: var(--bg-hover); }
.dipnot-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.dipnot-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: background 100ms, border-color 100ms;
}
.dipnot-check.on { background: var(--accent); border-color: var(--accent); }

.dipnot-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
  flex-shrink: 0;
  margin-top: 1px;
  min-width: 16px;
}

.dipnot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}

.dipnot-title {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.dipnot-item.active .dipnot-title { color: var(--accent); font-weight: 500; }

.dipnot-legend {
  padding: 7px 14px 9px;
  font-size: 10.5px;
  color: var(--ink-4);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.dipnot-edit {
  border-top: 1px solid var(--line);
  padding: 13px 14px;
  flex-shrink: 0;
  background: var(--bg-sunk);
}

.dipnot-edit-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-bottom: 9px;
}

.dipnot-edit-sublabel {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-family: var(--font-mono);
  margin-bottom: 7px;
}

.dipnot-edit-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.dipnot-block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

/* ─── Notes content area ─────────────────────────────────────────────────── */
.notes-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.notes-export-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px 28px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--bg-elev);
}

.notes-count {
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-right: 10px;
}
.notes-count strong { color: var(--ink); font-weight: 600; }

.note-doc-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 36px 52px 80px;
}

.note-doc-header { margin-bottom: 28px; }

.note-doc-company {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-bottom: 5px;
}

.note-doc-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.note-doc-period-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.note-doc-meta {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.note-doc-currency {
  font-size: 12px;
  color: var(--ink-4);
  font-style: italic;
  margin-top: 4px;
}

.note-doc-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

.note-doc-body { max-width: 800px; }

.note-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-bottom: 6px;
}

.note-big-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.25;
}

.note-block { margin-bottom: 20px; }

.note-block-para {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.78;
  text-align: justify;
  margin: 0;
}

.note-block-policy-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}

.note-block-policy-text {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.78;
  text-align: justify;
  margin: 0;
}

.note-block-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}

.note-table-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.note-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}

.note-table {
  width: 100%;
  border-collapse: collapse;
}

.note-table th {
  background: var(--bg-sunk);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: right;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
}
.note-table th:first-child { text-align: left; }

.note-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.note-table td:first-child {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.note-table tr:last-child td { border-bottom: none; }
.note-table tr.total-row td {
  border-top: 1.5px solid var(--line-2);
  border-bottom: none;
  font-weight: 700;
  color: var(--ink);
}

/* ─── Edit mode ─────────────────────────────────────────────────────────── */
.note-edit-textarea {
  width: 100%;
  min-height: 80px;
  padding: 9px 11px;
  font-size: 13.5px;
  line-height: 1.78;
  font-family: var(--font-sans);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--ink);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.note-edit-cell {
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  outline: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 3px 7px;
  width: 100%;
  color: var(--ink);
  border-radius: 3px;
  box-sizing: border-box;
}

/* ─── Modals ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.32);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.notes-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg-elev);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 999;
  animation: fadeIn 150ms ease;
  pointer-events: none;
}

/* ── print / PDF export ─────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .app-header, .top-header, .drawer, .drawer-backdrop, .tweaks-panel { display: none !important; }
  main.page-enter { animation: none !important; }
  .page { max-width: 100% !important; padding: 12px 16px !important; }
  .btn, button:not(.print-visible) { display: none !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  .ai-card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  .pbar { background: #eee !important; }
  .pbar > span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ============ Üst nav çubuğu (2026-09-19) ============
   Hamburger drawer'ın yerine: solda logo, ortada koyu (lacivert) pill nav —
   aktif sekme altın (marka birincil rengi) — sağda arama/tema/dil/avatar.
   ≤960px'de pill gizlenir, hamburger + drawer (tam liste) geri gelir. */
[data-theme="dark"] { --nav-pill-bg: #1b1b23; --nav-pill-ink: #c9ccd6; }
[data-theme="warm"] { --nav-pill-bg: #163a63; --nav-pill-ink: #dfe6f1; }

.top-header {
  position: sticky; top: 0; z-index: 30;
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 32px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.top-side { flex: 1 1 0; display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-side.start { justify-content: flex-start; }
.top-side.end { justify-content: flex-end; }
.top-nav {
  position: relative; display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px; flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
  background: var(--nav-pill-bg);
  box-shadow: 0 14px 30px -16px rgba(10, 18, 40, .55), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.top-nav::-webkit-scrollbar { display: none; }
.top-nav-item { position: relative; flex-shrink: 0; }
.top-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border: none; border-radius: 999px;
  background: transparent; color: var(--nav-pill-ink);
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.top-nav-btn:hover, .top-nav-btn.open { background: rgba(255, 255, 255, .09); color: #fff; }
.top-nav-btn.active { background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.top-nav-btn svg { opacity: .7; transition: transform .15s; }
.top-nav-btn.open svg { transform: rotate(180deg); }

.top-menu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 40;
  min-width: 250px; padding: 6px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 50px -22px rgba(10, 18, 40, .45);
  animation: pageIn .16s ease;
}
.top-menu-right { left: auto; right: 0; padding: 6px 0; }
.top-menu-fixed { position: fixed; top: auto; left: auto; z-index: 60; width: 264px; }
.top-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; border-radius: 10px; background: transparent;
  font-size: 13.5px; color: var(--ink-2); text-align: left; cursor: pointer;
}
.top-menu-item:hover { background: var(--bg-hover); color: var(--ink); }
.top-menu-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.top-menu-item .ic { display: inline-flex; color: var(--ink-3); }
.top-menu-item.active .ic { color: var(--accent); }

.top-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-2);
  box-shadow: 0 6px 16px -10px rgba(10, 18, 40, .3);
  cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
/* Tema ikonu (güneş/ay/kahve) değişince pop-in döner — eskiden anında değişip
   tıklamanın bir şey yaptığı belli olmuyordu. boot.jsx `key={theme}` ile
   yeniden monte eder, animasyon her tıklamada baştan oynar. */
@keyframes themeGlyphIn {
  from { opacity: 0; transform: scale(.4) rotate(-100deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
.theme-glyph { display: inline-block; animation: themeGlyphIn .38s cubic-bezier(.34, 1.56, .64, 1); }
.top-icon-btn:hover { background: var(--bg-hover); color: var(--ink); transform: translateY(-1px); }
.top-avatar-wrap { position: relative; }
.top-avatar { width: 40px; height: 40px; font-size: 12px; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(10, 18, 40, .3); }
.top-avatar.open { background: var(--accent); color: #fff; }

.logo-text { white-space: nowrap; }
/* Nav pill her ekran genişliğinde korunur (hamburger YOK): dar ekranda pill
   yatay kayar, aktif sekme ortalanır, açılır menüler portal ile pill'in dışına
   çizilir. */
@media (max-width: 1040px) {
  .top-header { padding: 0 16px; gap: 12px; }
  .top-side { flex: 0 0 auto; }
  .top-nav { margin: 0 auto; }
}
@media (max-width: 760px) { .top-hide-sm { display: none; } }
/* Telefon / küçük tablet (≤820px): 5 sekmelik pill tek satırda ~280px'e sıkışıp kenarlardaki
   etiketleri yarım kesiyordu ("dartlar", "Hesap Pla" — üst üste binmiş gibi görünüyordu).
   Landing header'ı gibi iki satır: 1. satır logo + avatar, 2. satır tam genişlikte
   (yatay kayan) pill. `--header-h` iki satırın toplamıdır — sabit yükseklik varsayan
   yerleşimler (Muhasebe Haritası vb.) bu token'ı kullanır. */
@media (max-width: 820px) {
  :root { --header-h: 94px; }
  .top-header {
    flex-wrap: wrap; align-content: center; align-items: center;
    padding: 8px 12px; row-gap: 8px; column-gap: 8px;
  }
  .top-side.start { flex: 1 1 0; order: 1; }
  .top-side.end { flex: 0 0 auto; order: 2; }
  .top-nav { order: 3; flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0; }
  .top-nav-btn { padding: 8px 13px; font-size: 13px; }
  .top-icon-btn, .top-avatar { width: 36px; height: 36px; }
}

/* ============ Ana Sayfa dashboard (2026-09-19) ============
   Kullanıcının verdiği bir finans dashboard referansına göre: başlık + CTA,
   4 özet kartı, filtre satırı, koyu ana panel (liste + detay). Referanstaki
   mor/indigo palet marka kimliğine (lacivert + altın) çevrildi; kartlardaki
   sayılar/grafikler gerçek veriden (STANDARDS_LIST, ACCOUNTS_DATA_REACT)
   türetilir, uydurma kullanıcı/finans verisi YOK. Koyu panel temadan
   bağımsız sabit lacivert (Landing'in navy bantlarıyla aynı ilke). */
.dash { --dash-shadow: 0 18px 40px -26px rgba(20, 33, 61, .38); }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.dash-title { font-size: 34px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 4px; }
.dash-sub { margin: 0; font-size: 14px; color: var(--ink-3); max-width: 560px; }
.dash-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-btn-gold, .dash-btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
}
.dash-btn-gold { border: none; background: var(--gold); color: var(--gold-ink); }
.dash-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px color-mix(in oklab, var(--gold) 65%, transparent); }
.dash-btn-white { border: none; background: #fff; color: #14213d; }
.dash-btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); }

.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.dash-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 250px;
  padding: 22px 22px 20px; border-radius: 24px;
  background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--dash-shadow);
}
.dash-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dash-card-label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.dash-card-ic {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.dash-big { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.dash-big-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-card-note { font-size: 12.5px; color: var(--ink-3); }
.dash-hbars { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 12px; }
.dash-hbar { display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-3); }
.dash-hbar b { text-align: right; color: var(--ink); font-weight: 500; }
.dash-hbar .pbar { height: 8px; }
.dash-hbar .pbar > span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: auto; padding-top: 10px; }
.dash-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.dash-bar { width: 100%; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); opacity: .78; transition: opacity .15s; }
.dash-bar-col:hover .dash-bar { opacity: 1; background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.dash-bar-col span { font-size: 10px; color: var(--ink-4); }
.dash-links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; }
.dash-links button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dash-links button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dash-card-dark {
  background: linear-gradient(160deg, #14213d 0%, #1d3a63 100%);
  border-color: transparent; color: #f4f4ef;
}
.dash-card-dark .dash-card-label { color: rgba(244, 244, 239, .72); }
.dash-card-dark .dash-card-ic { background: rgba(242, 196, 106, .16); color: var(--gold-2); }
.dash-daily-code { font-size: 26px; font-weight: 600; color: var(--gold-2); letter-spacing: -0.02em; margin-top: 2px; }
.dash-daily-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.dash-daily-body {
  margin: 2px 0 12px; font-size: 12.5px; line-height: 1.55; color: rgba(244, 244, 239, .68);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-card-dark .dash-btn-white { margin-top: auto; align-self: flex-start; padding: 10px 18px; }



.top-header .logo-text::after { content: none; }


.dash .card, .dash .ai-card { border-radius: 20px; }

@media (max-width: 1180px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
@media (max-width: 640px) {
  .dash-title { font-size: 28px; }
  .dash-stats { grid-template-columns: minmax(0, 1fr); }
  .dash-card { min-height: 0; }
}

/* ── Ana Sayfa alt bölümler: devam et / hızlı tekrar / gruplar (2026-09-19) ── */
.dash-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.dash-sec-title { margin: 0 0 3px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.dash-sec-sub { margin: 0; font-size: 13px; color: var(--ink-3); }

.dash-duo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 18px; margin-bottom: 34px; align-items: stretch; }
.dash-continue {
  padding: 24px; border-radius: 28px; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--dash-shadow);
}
.dash-feed { display: flex; flex-direction: column; gap: 10px; }
.dash-feed-row {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg);
  color: inherit; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.dash-feed-row:hover { background: var(--bg-elev); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 12px 26px -18px rgba(20, 33, 61, .5); }
.dash-feed-ic { width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.dash-feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-feed-title { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-feed-sub { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-feed-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.dash-feed-time { font-size: 10.5px; color: var(--ink-4); }
.dash-feed-go {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-3);
  transition: background .15s, color .15s, border-color .15s;
}
.dash-feed-more { margin: 6px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.dash-feed-row:hover .dash-feed-go { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

.dash-quick {
  display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 28px;
  background:
    radial-gradient(260px 180px at 100% 0%, rgba(242, 196, 106, .22), transparent 70%),
    linear-gradient(160deg, #14213d 0%, #1d3a63 100%);
  color: #f4f4ef; box-shadow: 0 30px 60px -34px rgba(10, 18, 40, .7);
}
.dash-quick .dash-card-ic { background: rgba(242, 196, 106, .16); color: var(--gold-2); width: 38px; height: 38px; }
.dash-quick-title { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.dash-quick-body { margin: 0; font-size: 13.5px; line-height: 1.65; color: rgba(244, 244, 239, .72); }
.dash-quick-stack { display: flex; align-items: center; justify-content: center; margin-top: auto; padding: 8px 0 4px; }
.dash-quick-stack span {
  width: 76px; height: 100px; margin: 0 -5px; padding: 10px; border-radius: 15px;
  display: flex; align-items: flex-end;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--gold-2);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .7);
  transform: rotate(-11deg) translateY(6px); transition: transform .2s;
}
.dash-quick-stack span:nth-child(2) { background: rgba(255, 255, 255, .16); transform: translateY(-4px); z-index: 1; }
.dash-quick-stack span:nth-child(3) { transform: rotate(11deg) translateY(6px); }
.dash-quick:hover .dash-quick-stack span:nth-child(1) { transform: rotate(-15deg) translate(-6px, 6px); }
.dash-quick:hover .dash-quick-stack span:nth-child(3) { transform: rotate(15deg) translate(6px, 6px); }
.dash-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 10px; }
.dash-btn-outline {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff;
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.dash-btn-outline:hover { background: rgba(255, 255, 255, .1); }

.dash-find { margin-bottom: 8px; }
.dash-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dash-group {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden;
  padding: 22px; border-radius: 26px;
  background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--dash-shadow);
  transition: transform .18s, box-shadow .18s;
}
.dash-group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent 75%); }
.dash-group:hover { transform: translateY(-2px); box-shadow: 0 26px 46px -26px rgba(20, 33, 61, .5); }
.dash-group-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-group-ic {
  width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #14213d, #1d3a63); color: var(--gold-2);
}
.dash-group-metric { text-align: right; line-height: 1.15; }
.dash-group-metric b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.dash-group-metric span { font-size: 11px; color: var(--ink-3); }
.dash-group-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.dash-group-desc { font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; }
.dash-group-rows { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.dash-group-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; margin: 0 -8px; width: calc(100% + 16px);
  border: none; border-radius: 12px; background: transparent; color: var(--ink-2);
  font-size: 13px; text-align: left; cursor: pointer; transition: background .15s, color .15s;
}
.dash-group-row:hover { background: var(--accent-soft); color: var(--accent); }
.dash-group-row-ic { display: inline-flex; color: var(--ink-3); }
.dash-group-row:hover .dash-group-row-ic { color: var(--accent); }
.dash-group-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dash-group-row-n { font-size: 11px; color: var(--ink-4); }
.dash-group-row-go { display: inline-flex; color: var(--ink-4); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.dash-group-row:hover .dash-group-row-go { opacity: 1; transform: none; color: var(--accent); }

/* İlk kez giren kullanıcı boş durumu (2026-09-19) */
.dash-empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px; border-radius: 22px; border: 1px dashed var(--line-2); background: var(--bg);
}
.dash-empty-ic {
  width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #14213d, #1d3a63); color: var(--gold-2);
}
.dash-empty-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.dash-empty-body { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); max-width: 560px; }
.dash-empty-steps { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-empty-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.dash-empty-steps b {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600;
}

/* ── Bölünmüş (liste + detay) sayfalar: dar ekranda yığılır (2026-09-19) ──
   Standartlar / VUK / GAAP / Standart Farkları / TDHP / GAAP Hesap Planı,
   masaüstünde sabit yükseklikli 2 sütun (sidebar + detay). ≤900px'de sayfa
   normal akışa döner: liste üstte (sınırlı yükseklik, kendi içinde kayar),
   detay altta tam genişlikte. Sayfada inline stil olduğu için !important. */
@media (max-width: 900px) {
  .split-page { height: auto !important; overflow: visible !important; padding-left: 16px; padding-right: 16px; }
  .split-grid { display: flex !important; flex-direction: column; overflow: visible !important; border-top: none !important; gap: 16px; }
  .split-grid > :first-child {
    border: 1px solid var(--line) !important; border-radius: var(--radius-lg);
    max-height: 400px; min-height: 0; overflow: hidden;
  }
  .split-detail { overflow: visible !important; min-height: 320px; }
  .split-detail > * { overflow: visible !important; }
}

/* Genel sayfa kabuğu — küçük ekranlarda daha dar kenar boşlukları */
@media (max-width: 900px) { .page { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 640px) {
  .page { padding: 20px 16px 60px; }
  .intro-banner { padding: 0 0 14px; gap: 12px; }
  .intro-stats { width: 100%; }
}

/* ── Telefon uyumu (2026-09-19) ─────────────────────────────────────────────
   Gerçek telefonda görülen sorunlar: Landing menü bağlantıları kayboluyordu,
   "Kayıt Ol" iki satıra bölünüyordu, orbit görseli okunmayacak kadar
   küçülüyordu, 320px'te SSS/iletişim bloğu taşıyordu. */
.lp-header-glass .logo-text::after { content: none; }
.lp-header-login-btn { white-space: nowrap; }
@media (max-width: 900px) {
  /* Landing header: menü gizlenmez — ikinci satırda yatay kayan bağlantılar */
  .lp-header-glass { height: auto; flex-wrap: wrap; border-radius: 26px; padding: 8px 10px 0 16px; row-gap: 0; }
  .lp-header-side.start { flex: 1 1 auto; }
  .lp-header-side.end { flex: 0 0 auto; gap: 8px; }
  .lp-header-glass .lp-header-nav {
    display: flex; order: 3; flex: 0 0 100%; min-width: 0; gap: 2px; margin-top: 4px; padding: 2px 0 9px;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
  }
  .lp-header-nav::-webkit-scrollbar { display: none; }
  .lp-header-nav button { padding: 8px 12px; white-space: nowrap; flex-shrink: 0; }
  .lp-nav-underline { bottom: 3px; }
  /* header artık iki satır: hero'nun altına girdiği pay büyür */
  .hero-v2 { margin-top: -124px; padding-top: 124px; }
}
@media (max-width: 560px) {
  .lp-header-login-btn { padding: 9px 16px; font-size: 12.5px; }
  .lp-lang-toggle button { padding: 6px 10px; }
}
@media (max-width: 640px) {
  .orbit-frame { display: none; }
}

/* Telefonda istatistik şeridi kayan bant yerine sabit 2×2 kutu — yarım/kesik
   görünmesin. İkinci kopya (aria-hidden) gizlenir, animasyon kapanır. */
@media (max-width: 720px) {
  .lp-stats-band { -webkit-mask-image: none; mask-image: none; padding: 26px 20px; }
  .lp-stats-track { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; width: 100%; animation: none; transform: none; }
  .lp-stat { padding: 0; border-left: none; white-space: normal; gap: 10px; min-width: 0; }
  .lp-stat[aria-hidden="true"] { display: none; }
  .lp-stat-icon { width: 36px; height: 36px; }
  .lp-stat-num { font-size: 20px; }
}

/* Tab şeritlerinde kaydırma çubuğu görünmesin (yatay kayar) */
.top-nav, .lp-header-nav { -ms-overflow-style: none; }

/* ── Ana Sayfa alt bölümleri: duyarlı kurallar EN SONDA (2026-09-19) ────────
   .dash-duo / .dash-groups / .dash-feed-* temel kuralları dosyada media
   query'lerden SONRA tanımlıydı; aynı özgüllükte sonradan yazılan kazandığı
   için telefonda tek sütuna inmiyorlardı (4 dar sütun + taşma). Yeni duyarlı
   kural eklerken temel kuralın ALTINA yaz. */
@media (max-width: 1180px) {
  .dash-duo { grid-template-columns: minmax(0, 1fr); }
  .dash-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dash-groups { grid-template-columns: minmax(0, 1fr); }
  .dash-continue, .dash-quick { padding: 18px; border-radius: 22px; }
  .dash-feed-meta { display: none; }
  .dash-group { padding: 18px; border-radius: 22px; }
}

/* Açılış ekranı: oturum sorgulanırken / korumalı paket indirilirken kısa süre görünür */
.boot-screen { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.boot-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: boot-pulse 1s ease-in-out infinite; }
@keyframes boot-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .boot-dot { animation: none; opacity: .7; } }

/* ── Yasal sayfalar: Gizlilik/KVKK + Kullanım Şartları (2026-09-20, components/Legal.jsx) ──
   Sakin, dokümantasyon görünümü: kart/gradyan yok, okunaklı tek sütun. Header tek satırdır (--header-h'a
   bağlı DEĞİL — o değişken ≤820px'de iki satırlı Shell için 104px olur). */
.legal-page { min-height: 100vh; background: var(--bg); }
.legal-header {
  position: sticky; top: 0; z-index: 30; height: 64px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bg-elev); border-bottom: 1px solid var(--line);
}
.legal-header-end { display: flex; align-items: center; gap: 14px; }
.legal-home { font-size: 13px; color: var(--ink-2); }
.legal-home:hover { color: var(--accent); }
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 32px 24px 72px; }
.legal-wrap.embedded { padding-top: 24px; }
.legal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.legal-tab {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; color: var(--ink-2); background: var(--bg-elev);
}
.legal-tab:hover { border-color: var(--line-2); color: var(--ink); }
.legal-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.legal-title { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.legal-meta { font-size: 12.5px; color: var(--ink-3); margin-bottom: 18px; }
.legal-intro { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin: 0; }
.legal-sec { margin-top: 30px; }
.legal-sec h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.legal-sec p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.legal-sec ul { margin: 0 0 10px; padding-left: 20px; }
.legal-sec li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.legal-sec a, .legal-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 4px 0 14px; background: var(--bg-elev); }
.legal-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.55; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.legal-table th { background: var(--bg-sunk); color: var(--ink); font-weight: 600; font-size: 12px; }
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) {
  .legal-wrap { padding: 24px 16px 56px; }
  .legal-title { font-size: 22px; }
  .legal-header { padding: 0 16px; }
}

/* Landing footer: telif satırının yanındaki yasal bağlantılar */
.lp-footer-legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-footer-legal a { font-size: 12.5px; color: var(--ink-3); transition: color .12s; }
.lp-footer-legal a:hover { color: var(--accent); }
.legal-inline-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.lp-contact-legal { font-size: 11.5px; line-height: 1.5; color: rgba(244, 244, 239, .68); }
.lp-contact-legal a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Ayarlar (components/Settings.jsx, 2026-09-25) + tarayıcı tercihleri (boot.jsx → <html data-text / data-motion>)
   ═══════════════════════════════════════════════════════════════════════════ */
/* yazı boyutu: yalnızca sayfa içeriği ölçeklenir (üst nav sabit kalır) */
html[data-text="s"] main.page-enter { zoom: .92; }
html[data-text="l"] main.page-enter { zoom: 1.1; }
/* hareketleri azalt: tüm animasyon/geçişler kapanır */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}

/* profil menüsü başlığı */
.profile-head { display: flex; align-items: center; gap: 10px; padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.profile-head-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
[data-theme="dark"] .profile-head-av { color: #1a1406; }
.profile-head-tx { display: flex; flex-direction: column; min-width: 0; }
.profile-head-tx b { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-head-tx small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-settings-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.profile-settings-btn span { flex: 1; }
.profile-settings-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

.set-page { max-width: 1120px; }
.set-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.set-nav { position: sticky; top: calc(var(--header-h) + 16px); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.set-nav-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none; transition: background .15s; }
.set-nav-i:hover { background: var(--bg-hover); color: var(--ink); }
.set-nav-i.on { background: var(--accent-soft); color: var(--ink); }
.set-nav-ic { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--bg-sunk); color: var(--ink-3); }
.set-nav-i.on .set-nav-ic { background: var(--accent); color: #fff; }
[data-theme="dark"] .set-nav-i.on .set-nav-ic { color: #1a1406; }
.set-nav-tx { display: flex; flex-direction: column; min-width: 0; }
.set-nav-tx b { font-size: 13.5px; font-weight: 600; }
.set-nav-tx small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.set-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: set-in .25s ease both; }
@keyframes set-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.set-main-h h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); }
.set-main-h p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.set-card { padding: 0; overflow: hidden; }
.set-card-h { padding: 18px 22px 0; }
.set-card-h h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.set-card-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.set-card-b { padding: 8px 22px 18px; }
.set-card-h + .set-card-b { padding-top: 14px; }
.set-card.danger { border-color: color-mix(in srgb, var(--neg) 30%, var(--line)); }
.set-card.danger .set-card-h h2 { color: var(--neg); }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.set-card-b > .set-row:first-child { border-top: 0; }
.set-row.stack { flex-direction: column; align-items: stretch; }
.set-row-l { min-width: 0; flex: 1; }
.set-row-t { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.set-row-s { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.set-row-r { flex: none; display: flex; align-items: center; gap: 8px; }
.set-inline-ic { display: inline-flex; align-items: center; gap: 8px; }
.set-inline-ic svg { color: var(--ink-3); }

.set-switch { position: relative; width: 44px; height: 26px; flex: none; padding: 0; border: 0; border-radius: 13px; background: var(--line-2); cursor: pointer; transition: background .2s; }
.set-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.set-switch.on { background: var(--accent); }
.set-switch.on span { transform: translateX(18px); }
.set-switch:focus-visible, .set-seg button:focus-visible, .set-theme:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.set-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--bg-sunk); }
.set-seg button { min-width: 64px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.set-seg button.on { background: var(--bg-elev); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.set-aa { font-weight: 600; line-height: 1; } .set-aa.s { font-size: 11px; } .set-aa.m { font-size: 13.5px; } .set-aa.l { font-size: 17px; }

.set-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.set-theme { padding: 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-elev); cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: border-color .2s, transform .2s; }
.set-theme:hover { transform: translateY(-2px); }
.set-theme.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.set-theme svg { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.set-theme-l { display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; font-size: 13px; font-weight: 500; }
.set-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.set-theme.on .set-radio { border: 5px solid var(--accent); }

.set-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.set-field input { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-elev); color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.set-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.set-field small { font-weight: 400; color: var(--ink-4); font-size: 12px; }
.set-readonly { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; background: var(--bg-sunk); color: var(--ink-2); font-size: 14px; font-weight: 400; overflow: hidden; }
.set-readonly svg { flex: none; color: var(--ink-4); }
.set-profile { display: flex; gap: 22px; align-items: flex-start; }
.set-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: #fff; font-size: 22px; font-weight: 600; }
[data-theme="dark"] .set-avatar { color: #1a1406; }
.set-profile-f { flex: 1; display: grid; gap: 14px; max-width: 460px; min-width: 0; }
.set-meta { font-size: 12.5px; color: var(--ink-3); } .set-meta b { color: var(--ink-2); font-weight: 500; }
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.set-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.set-status.ok { color: var(--pos); } .set-status.err { color: var(--neg); } .set-status.busy { color: var(--ink-3); }
.set-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.set-hint.err { color: var(--neg); }
.set-hint a { color: var(--accent); }
.set-p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.set-pwform { display: grid; gap: 12px; max-width: 460px; }
.set-strength { display: flex; align-items: center; gap: 10px; margin-top: -4px; font-size: 12px; color: var(--ink-3); }
.set-strength-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; max-width: 220px; }
.set-strength-bar i { height: 5px; border-radius: 3px; background: var(--line); }
.set-strength.s1 i.on { background: var(--neg); } .set-strength.s2 i.on { background: var(--warn); }
.set-strength.s3 i.on, .set-strength.s4 i.on { background: var(--pos); }
.set-session { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--bg-sunk); }
.set-session-ic { width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--pos-soft); color: var(--pos); }
.set-btn-danger { color: var(--neg) !important; border-color: color-mix(in srgb, var(--neg) 35%, var(--line)) !important; }
.set-btn-danger.solid { background: var(--neg) !important; color: #fff !important; border-color: var(--neg) !important; }
.set-btn-danger:disabled { opacity: .5; cursor: default; }
.set-del { display: grid; gap: 12px; max-width: 460px; margin-top: 8px; }
.set-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.set-check input { margin-top: 2px; accent-color: var(--neg); }
.set-link { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.set-card-b > .set-link:first-child { border-top: 0; }
.set-link span { flex: 1; }
.set-link svg { color: var(--ink-3); }
.set-link:hover span { color: var(--accent); }

@media (max-width: 860px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .set-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav-i { flex: none; padding: 8px 12px; }
  .set-nav-ic { width: 28px; height: 28px; }
  .set-nav-tx small { display: none; }
  .set-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .set-row-r { justify-content: flex-start; }
  .set-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .set-profile { flex-direction: column; }
  .set-card-h { padding: 16px 16px 0; } .set-card-b { padding: 8px 16px 16px; }
}

/* şifre alanı + göz düğmesi (Icons.jsx → PwInput) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap .pw-input { width: 100%; box-sizing: border-box; }
.pw-input::-ms-reveal, .pw-input::-ms-clear { display: none; }
.pw-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.pw-eye:hover { color: var(--ink); background: var(--bg-hover); }
.pw-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: var(--accent); }

/* ═══ Standartlar — sıcak "çalışma masası" önizlemesi (components/StandardsStudio.jsx, yalnızca localhost) ═══ */
.sx-root {
  --sx-paper: #fffdf8; --sx-cream: #fbf5ea; --sx-sand: #f3e9d7; --sx-edge: #ece2cf; --sx-edge-2: #e2d4bb;
  --sx-gold-soft: #fdf1d3; --sx-gold-line: #f1d48b; --sx-brown: #6b4f2c;
  --sx-glow: #fde8b8; --sx-desk: #e9dcc5; --sx-scene-a: #f7ecdb; --sx-scene-b: #efdfc5; --sx-floor: #e6d3b4;
  --sx-shadow: 0 1px 2px rgba(80,55,20,.05), 0 6px 18px -8px rgba(80,55,20,.16);
  max-width: 1360px;
}
[data-theme="dark"] .sx-root {
  --sx-paper: #16151a; --sx-cream: #1b1a20; --sx-sand: #24222a; --sx-edge: #2c2a33; --sx-edge-2: #38353f;
  --sx-gold-soft: #3a2e10; --sx-gold-line: #6b5520; --sx-brown: #e7c98f;
  --sx-glow: #4a3a18; --sx-desk: #2a241c; --sx-scene-a: #2b2620; --sx-scene-b: #221e19; --sx-floor: #302820;
  --sx-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px -10px rgba(0,0,0,.6);
}
[data-theme="warm"] .sx-root { --sx-paper: #fffaf0; --sx-cream: #f8efe0; }


/* Filtre çubuğu */
.sx-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; height: 46px; border: 1px solid var(--sx-edge); background: var(--sx-cream); border-radius: 12px; color: var(--ink-3); transition: border-color .15s, box-shadow .15s; }
.sx-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.sx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; }
.sx-search-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.sx-search-x:hover { background: var(--bg-hover); color: var(--ink); }
.sx-select { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 46px; border: 1px solid var(--sx-edge); background: var(--sx-paper); border-radius: 12px; color: var(--ink-2); min-width: 220px; }
.sx-select select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; flex: 1; cursor: pointer; padding-right: 4px; }
.sx-select:focus-within { border-color: var(--gold); }
.sx-select > svg:last-child { pointer-events: none; color: var(--ink-3); }
.sx-sort { height: 46px; min-width: 58px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sx-gold-line); background: var(--sx-gold-soft); color: var(--sx-brown); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.sx-sort.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.sx-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.sx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 11px; border: 1px solid var(--sx-edge); background: var(--sx-paper); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sx-chip svg { color: #c8900a; }
.sx-chip:hover { border-color: var(--sx-edge-2); background: var(--sx-cream); }
.sx-chip.on { background: #14213d; border-color: #14213d; color: #f4f4ef; }
.sx-chip.on svg { color: var(--gold-2); }
.sx-chip-n { font-family: var(--font-mono); font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--sx-sand); color: var(--ink-3); }
.sx-chip.on .sx-chip-n { background: rgba(255,255,255,.14); color: #f4f4ef; }
.sx-chip-clear { border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; margin-left: 4px; }

/* Gövde: liste + detay */


.sx-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; background: #14213d; color: #f4f4ef; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; }
.sx-pill.soft { background: var(--sx-gold-soft); color: var(--sx-brown); border: 1px solid var(--sx-gold-line); font-family: var(--font-sans); font-size: 12px; }

/* Seçim yok */

/* Ders — kahraman */
.sx-hero-tags { display: flex; gap: 6px; margin-bottom: 12px; }
.sx-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.sx-cta { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #f6cf62, #eab308); color: #231800; font: inherit; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(170,120,0,.7); text-align: left; transition: transform .15s, box-shadow .15s; }
.sx-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(170,120,0,.75); }
.sx-cta b { display: block; font-size: 15px; font-weight: 600; }
.sx-cta small { display: block; font-size: 12px; opacity: .75; }
.sx-cta-play { width: 36px; height: 36px; border-radius: 50%; background: #14213d; color: #fff; display: grid; place-items: center; }
.sx-cta-play svg { margin-left: 2px; }
.sx-cta2 { display: inline-flex; align-items: center; gap: 9px; padding: 0 15px; min-height: 56px; border: 1px solid var(--sx-edge); background: var(--sx-paper); border-radius: 14px; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: var(--sx-shadow); transition: border-color .15s, transform .15s; }
.sx-cta2:hover { border-color: var(--sx-gold-line); transform: translateY(-1px); }
.sx-progress { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 12px; color: var(--ink-3); }
.sx-progress-bar { width: 140px; height: 6px; border-radius: 99px; background: var(--sx-sand); overflow: hidden; }
.sx-progress-bar span { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width .4s cubic-bezier(.2,.7,.2,1); }

/* Kahraman görseli */

/* Sekmeler */
.sx-tabs { display: flex; gap: 6px; margin: 18px 0 14px; padding: 6px; background: var(--sx-paper); border: 1px solid var(--sx-edge); border-radius: 16px; box-shadow: var(--sx-shadow); overflow-x: auto; scroll-margin-top: calc(var(--header-h) + 12px); scrollbar-width: none; }
.sx-tabs::-webkit-scrollbar { display: none; }
.sx-tab { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; flex: 1 0 auto; justify-content: center; transition: background .15s, color .15s; }
.sx-tab svg { color: #c8900a; }
.sx-tab:hover { background: var(--sx-cream); }
.sx-tab.on { background: #14213d; color: #f4f4ef; box-shadow: 0 6px 14px -8px rgba(20,33,61,.7); }
.sx-tab.on svg { color: var(--gold-2); }
.sx-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); position: absolute; top: 8px; right: 8px; }

.sx-panel { background: var(--sx-paper); border: 1px solid var(--sx-edge); border-radius: 22px; padding: 26px; box-shadow: var(--sx-shadow); display: flex; flex-direction: column; gap: 18px; animation: sx-in .28s cubic-bezier(.2,.7,.2,1); }
@keyframes sx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sx-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; align-items: center; }
.sx-num { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #c8900a; }
.sx-num::after { content: ''; width: 44px; height: 1.5px; background: var(--sx-gold-line); }
.sx-h3 { margin: 8px 0 10px; font-size: 28px; letter-spacing: -.02em; font-weight: 600; line-height: 1.15; }
.sx-h3.sm { font-size: 18px; margin: 6px 0 -4px; }
.sx-p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.sx-simple { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--sx-gold-soft); border: 1px solid var(--sx-gold-line); }
.sx-simple p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.sx-simple b { color: var(--ink); }


.sx-card3 { display: flex; gap: 14px; align-items: center; text-align: left; padding: 18px; border-radius: 16px; border: 1px solid var(--sx-edge); background: var(--sx-paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sx-card3:hover { border-color: var(--sx-gold-line); transform: translateY(-2px); box-shadow: var(--sx-shadow); }
.sx-card3-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-card3-main b { font-size: 15.5px; }
.sx-card3-main span { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.sx-box { border: 1px solid var(--sx-edge); background: var(--sx-cream); border-radius: 16px; padding: 18px 20px; min-width: 0; }
.sx-box.in { background: color-mix(in srgb, var(--pos-soft) 55%, var(--sx-cream)); }
.sx-box.out { background: color-mix(in srgb, var(--neg-soft) 45%, var(--sx-cream)); }
.sx-box.warn { background: color-mix(in srgb, var(--warn-soft) 55%, var(--sx-cream)); }
.sx-box-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; margin-bottom: 12px; color: var(--ink); flex-wrap: wrap; }
.sx-box-title svg { color: #c8900a; }
.sx-box.in .sx-box-title svg { color: var(--pos); }
.sx-box.out .sx-box-title svg { color: var(--neg); }
.sx-box.warn .sx-box-title svg { color: var(--warn); }
.sx-box-sub { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.sx-box.in .sx-list-icons svg { color: var(--pos); }
.sx-box.out .sx-list-icons svg { color: var(--neg); }
.sx-small { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

.sx-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sx-type { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px; border-radius: 13px; border: 1px solid var(--sx-edge); background: var(--sx-paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.sx-type:hover { border-color: var(--sx-gold-line); transform: translateY(-1px); }
.sx-type-code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #b7790a; }
.sx-type b { font-size: 14px; }
.sx-type span:last-child { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

.sx-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-point { position: relative; padding: 18px 20px; border-radius: 16px; background: var(--sx-cream); border: 1px solid var(--sx-edge); }
.sx-point-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #c8900a; margin-bottom: 6px; }
.sx-point b { font-size: 15px; }
.sx-point p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.sx-note-inline { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 11px; background: var(--sx-gold-soft); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.sx-note-inline b { font-size: inherit; }
.sx-note-inline svg { color: #c8900a; flex-shrink: 0; margin-top: 1px; }

.sx-rule { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 16px; background: #14213d; color: #f4f4ef; }
.sx-rule span { font-family: 'Caveat', cursive; font-size: 22px; color: var(--gold-2); flex-shrink: 0; }
.sx-rule p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.45; }
.sx-inout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-formulas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sx-formula { padding: 14px; border-radius: 13px; border: 1px solid var(--sx-edge); background: var(--sx-cream); }
.sx-formula b { display: block; font-size: 13.5px; margin: 8px 0 4px; }
.sx-formula p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.sx-formula-tag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--pos-soft); color: var(--pos); }
.sx-formula.no { background: color-mix(in srgb, var(--neg-soft) 50%, var(--sx-cream)); }
.sx-formula.no b { text-decoration: line-through; text-decoration-color: var(--neg); }
.sx-formula.no .sx-formula-tag { background: var(--neg-soft); color: var(--neg); }

/* NGD laboratuvarı + quiz */
.sx-quiz { border: 1px solid var(--sx-gold-line); background: linear-gradient(180deg, var(--sx-gold-soft), var(--sx-cream) 70%); border-radius: 18px; padding: 20px; }

.sx-journal { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sx-je { border: 1px solid var(--sx-edge); background: var(--sx-paper); border-radius: 12px; overflow: hidden; }
.sx-je-title { padding: 8px 12px; font-size: 12.5px; font-weight: 600; background: var(--sx-sand); }
.sx-je-row { display: flex; gap: 10px; align-items: center; padding: 8px 12px; font-family: var(--font-mono); font-size: 12.5px; }
.sx-je-row.cr { padding-left: 34px; border-top: 1px dashed var(--sx-edge); }
.sx-je-row b { margin-left: auto; }
.sx-je-side { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; }
.sx-je-side.dr { background: var(--pos-soft); color: var(--pos); }
.sx-je-side.cr { background: var(--neg-soft); color: var(--neg); }

.sx-accs { display: flex; flex-direction: column; gap: 4px; }
.sx-acc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: var(--sx-paper); color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; transition: border-color .15s; }
.sx-acc:hover { border-color: var(--sx-gold-line); }
.sx-acc-code { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #b7790a; min-width: 32px; }
.sx-acc-name { flex: 1; min-width: 0; }
.sx-acc > svg { color: var(--ink-4); }

.sx-scenario { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; border-radius: 18px; background: var(--sx-cream); border: 1px solid var(--sx-edge); }
.sx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sx-steps li { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--sx-paper); border: 1px solid var(--sx-edge); font-family: var(--font-mono); font-size: 13px; }
.sx-steps li span, .sx-summary li span { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; font-family: var(--font-mono); }

.sx-quiz-q { margin: 0 0 12px; font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.sx-quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-opt { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sx-edge); background: var(--sx-paper); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s; }
.sx-opt:hover:not(:disabled) { border-color: var(--sx-gold-line); }
.sx-opt:disabled { cursor: default; }
.sx-opt span { width: 24px; height: 24px; border-radius: 7px; background: var(--sx-sand); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.sx-opt.right { border-color: var(--pos); background: var(--pos-soft); }
.sx-opt.right span { background: var(--pos); color: #fff; }
.sx-opt.wrong { border-color: var(--neg); background: var(--neg-soft); }
.sx-opt.wrong span { background: var(--neg); color: #fff; }
.sx-opt.dim { opacity: .55; }
.sx-quiz-why { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sx-gold-soft); font-size: 13.5px; line-height: 1.5; flex-wrap: wrap; }
.sx-quiz-why.ok { background: var(--pos-soft); }
.sx-quiz-why span { flex: 1; min-width: 200px; }

.sx-related { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 16px; border-top: 1px dashed var(--sx-edge-2); }
.sx-related-label { font-size: 13px; color: var(--ink-3); margin-right: 4px; }
.sx-related-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px; border-radius: 99px; border: 1px solid var(--sx-edge); background: var(--sx-cream); color: var(--ink); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.sx-related-chip:hover { border-color: var(--sx-gold-line); background: var(--sx-gold-soft); }

.sx-modal { background: var(--sx-paper, var(--bg-elev)); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 50px -20px rgba(0,0,0,.35); }
.sx-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 17px; }
.sx-modal-x { margin-left: auto; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.sx-modal-x:hover { background: var(--bg-hover); }
.sx-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.sx-summary li { display: flex; gap: 12px; align-items: flex-start; }

/* Ders görünümü olmayan standartlar */

@media (max-width: 1180px) {
  .sx-sec { grid-template-columns: 1fr; }
  .sx-formulas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sx-search { flex-basis: 100%; }
  .sx-select { flex: 1; min-width: 0; }
  .sx-tab { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  .sx-panel { padding: 16px; border-radius: 18px; }
  .sx-hero-ctas .sx-cta { width: 100%; }
  .sx-hero-ctas .sx-cta2 { flex: 1; justify-content: center; min-height: 48px; }
  .sx-types, .sx-formulas, .sx-quiz-opts { grid-template-columns: minmax(0, 1fr); }
  .sx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sx-chip { flex: 0 0 auto; }
  .sx-h3 { font-size: 23px; }
  .sx-rule { flex-direction: column; align-items: flex-start; gap: 4px; }
}

[data-theme="dark"] .sx-chip.on, [data-theme="dark"] .sx-tab.on { background: var(--gold-2); border-color: var(--gold-2); color: #241a02; }
[data-theme="dark"] .sx-chip.on svg, [data-theme="dark"] .sx-tab.on svg { color: #241a02; }
[data-theme="dark"] .sx-chip.on .sx-chip-n { background: rgba(0,0,0,.14); color: #241a02; }
[data-theme="dark"] .sx-rule { background: #1c2740; }
[data-theme="dark"] .sx-pill:not(.soft) { background: #26324d; }

/* ── Standartlar önizlemesi v2: görseldeki uygulama düzeni (ray + üst arama + karakterli kahraman) ── */
.sx-root { max-width: 1480px; }
.sx-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 28px; align-items: start; }
.sx-rail { position: sticky; top: calc(var(--header-h) + 14px); height: calc(100vh - var(--header-h) - 28px); display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.sx-nav { display: flex; flex-direction: column; gap: 4px; }
.sx-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; text-align: left; transition: background .15s; }
.sx-nav-item svg { color: var(--ink-2); }
.sx-nav-item:hover { background: var(--sx-cream); }
.sx-nav-item.on { background: var(--sx-gold-soft); font-weight: 600; }
.sx-nav-item.on svg { color: #c8900a; }
.sx-picker { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 8px; border: 1px solid var(--sx-edge); border-radius: 16px; background: var(--sx-paper); box-shadow: var(--sx-shadow); }
.sx-picker-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sx-picker-head span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); background: var(--sx-sand); padding: 1px 7px; border-radius: 99px; }
.sx-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--sx-sand); }
.sx-seg button { flex: 1 1 auto; border: 0; background: transparent; border-radius: 7px; padding: 5px 8px; white-space: nowrap; font: inherit; font-size: 11px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.sx-seg button.on { background: var(--sx-paper); color: var(--ink); box-shadow: 0 1px 2px rgba(60,40,10,.12); font-weight: 600; }
.sx-mini-select { position: relative; display: flex; align-items: center; border: 1px solid var(--sx-edge); border-radius: 9px; background: var(--sx-cream); padding: 0 8px; color: var(--ink-3); }
.sx-mini-select select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink); padding: 6px 0; flex: 1; min-width: 0; cursor: pointer; }
.sx-rows { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -4px; padding: 0 4px; position: relative; scrollbar-width: thin; }
.sx-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.sx-row:hover { background: var(--sx-cream); color: var(--ink); }
.sx-row.on { background: var(--sx-gold-soft); color: var(--ink); font-weight: 600; }
.sx-row-code { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); min-width: 46px; flex-shrink: 0; }
.sx-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-row-star { color: #d19b05; display: inline-flex; }
.sx-journey { position: relative; display: grid; gap: 6px; text-align: left; padding: 14px 14px 12px; border: 1px solid var(--sx-edge); border-radius: 16px; background: var(--sx-paper); box-shadow: var(--sx-shadow); color: var(--ink); font: inherit; cursor: pointer; flex-shrink: 0; }
.sx-journey:hover { border-color: var(--sx-gold-line); }
.sx-journey-top { display: flex; gap: 10px; align-items: center; }
.sx-journey-top small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.sx-journey-star { color: #eab308; display: inline-flex; }
.sx-journey b { font-size: 13px; margin-top: 4px; }
.sx-journey-bar { display: block; height: 5px; border-radius: 99px; background: var(--sx-sand); overflow: hidden; margin-right: 86px; }
.sx-journey-bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width .4s; }
.sx-journey-pct { position: absolute; right: 50px; bottom: 9px; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.sx-journey-go { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--sx-cream); border: 1px solid var(--sx-edge); display: grid; place-items: center; color: var(--ink); }

.sx-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.sx-top { position: relative; max-width: 560px; z-index: 30; }
.sx-topsearch { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 16px; border-radius: 14px; background: var(--sx-paper); border: 1px solid var(--sx-edge); box-shadow: var(--sx-shadow); color: var(--ink-3); }
.sx-topsearch:focus-within { border-color: var(--gold); }
.sx-topsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.sx-topsearch kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--sx-sand); color: var(--ink-3); border: 0; }
.sx-top-drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--sx-paper); border: 1px solid var(--sx-edge); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(60,40,10,.35); padding: 6px; max-height: 380px; overflow-y: auto; }
.sx-top-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.sx-top-item.hi { background: var(--sx-gold-soft); }
.sx-top-code { font-family: var(--font-mono); font-size: 11px; min-width: 60px; color: var(--ink-3); }
.sx-top-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-top-kind { font-size: 11px; color: var(--ink-3); }
.sx-top-empty { padding: 12px; font-size: 13px; color: var(--ink-3); }

.sx-ico { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: #fbf8f2; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(80,55,20,.06); }
.sx-ico img { width: 112%; height: 112%; object-fit: cover; }
.sx-view { display: flex; flex-direction: column; gap: 18px; animation: sx-in .28s cubic-bezier(.2,.7,.2,1); }

/* Kahraman */
.sx-hero2 { position: relative; min-height: 360px; display: flex; align-items: center; border-radius: 24px; overflow: hidden; }
.sx-hero2-img { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; }
.sx-hero2-img img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%); }
.sx-hero2-copy { position: relative; z-index: 1; max-width: 560px; padding: 26px 0 26px 6px; }
.sx-crumbs { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.sx-crumbs b { color: var(--ink); font-weight: 600; }
.sx-hero2-title { margin: 0; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; color: var(--ink); }
.sx-hero2-sub { margin: 16px 0 24px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 500px; }
.sx-hero-tags { display: flex; gap: 6px; align-items: center; margin: -10px 0 20px; flex-wrap: wrap; }
.sx-hero-eff { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-left: 4px; }
.sx-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Genel bakış görseli (koliler + notlar) */
.sx-photo { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--sx-shadow); }
.sx-photo img { display: block; width: 100%; height: auto; }
.sx-hot { position: absolute; border: 2px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; transition: border-color .15s, background .15s; }
.sx-hot:hover, .sx-hot:focus-visible { border-color: var(--gold); background: rgba(234,179,8,.12); outline: 0; }
.sx-hot.h0 { left: 3%; top: 8%; width: 21%; height: 29%; }
.sx-hot.h1 { left: 64%; top: 3%; width: 21%; height: 28%; }
.sx-hot.h2 { left: 76%; top: 44%; width: 21%; height: 39%; }
.sx-quick { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 18px 10px 10px; border-radius: 14px; border: 1px solid var(--sx-edge); background: var(--sx-paper); box-shadow: var(--sx-shadow); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.sx-quick span:last-child { color: var(--ink-3); font-size: 13px; }
.sx-quick-play { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #231800; display: grid; place-items: center; }
.sx-quick-play svg { margin-left: 2px; }
.sx-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-card3 { display: flex; gap: 14px; align-items: center; text-align: left; padding: 18px; border-radius: 16px; border: 1px solid var(--sx-edge); background: var(--sx-paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sx-card3:hover { border-color: var(--sx-gold-line); transform: translateY(-2px); box-shadow: var(--sx-shadow); }
.sx-card3 > svg { color: var(--ink-4); flex-shrink: 0; }
.sx-card3-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-card3-main b { font-size: 15.5px; }
.sx-card3-main span { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.sx-simple { margin-top: 0; align-items: center; }
.sx-simple > .sx-simple-ic { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; }
.sx-simple > .sx-simple-ic img { width: 34px; height: 34px; border-radius: 50%; }
.sx-next-quiz { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--sx-gold-line); background: var(--sx-gold-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sx-next-quiz > span:not(.sx-ico) { flex: 1; }
.sx-next-quiz b { display: block; font-size: 15.5px; }
.sx-next-quiz span span { font-size: 13px; color: var(--ink-2); }
.sx-plain-body { padding: 24px; }
.sx-plain-body .card { border-radius: 14px; border-color: var(--sx-edge); background: var(--sx-cream); }

/* Mini Quiz alanı */
/* Mini Quiz, Pratik → Alıştırmalar içinde (SxQuizPage, 2026-09-27) */
.sx-root.sx-embed { max-width: none; }
.sx-qz-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.sx-qz-pick .sx-mini-select { flex: 0 1 420px; min-width: 0; }
.sx-qz-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-qz-mode { display: flex; gap: 14px; align-items: center; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid var(--sx-edge); background: var(--sx-paper); color: var(--ink); font: inherit; cursor: pointer; position: relative; transition: border-color .15s, transform .15s; }
.sx-qz-mode:hover { transform: translateY(-2px); border-color: var(--sx-gold-line); }
.sx-qz-mode.on { border-color: var(--gold); background: var(--sx-gold-soft); }
.sx-qz-mode b { display: block; font-size: 15px; }
.sx-qz-mode > span:nth-child(2) > span { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; padding-right: 40px; }
.sx-qz-n { position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: var(--sx-sand); color: var(--ink-3); }
.sx-qz-empty { align-items: center; text-align: center; color: var(--ink-3); padding: 40px; }
.sx-qz-empty p { margin: 0; }
.sx-qz-card { gap: 14px; }
.sx-qz-top { display: flex; align-items: center; gap: 14px; }
.sx-qz-step { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sx-qz-track { flex: 1; height: 8px; border-radius: 99px; background: var(--sx-sand); overflow: hidden; }
.sx-qz-track i { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width .35s; }
.sx-qz-ask { font-size: 12.5px; font-weight: 600; color: #b7790a; }
.sx-quiz-q { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.55; }
.sx-qz-result { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; }
.sx-qz-ring { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--p) * 1%), var(--sx-sand) 0); }
.sx-qz-ring b { width: 108px; height: 108px; border-radius: 50%; background: var(--sx-paper); display: grid; place-items: center; font-size: 28px; font-family: var(--font-mono); }
.sx-qz-review { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-qz-review li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--sx-cream); font-size: 13px; color: var(--ink-2); }
.sx-qz-review li.ok svg { color: var(--pos); flex-shrink: 0; }
.sx-qz-review li.no svg { color: var(--neg); flex-shrink: 0; }
.sx-qz-review li span { flex: 1; min-width: 0; }
.sx-qz-review button { border: 1px solid var(--sx-edge); background: var(--sx-paper); border-radius: 99px; padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; color: var(--ink); }

/* Sözlük */
.sx-gl-hero { position: relative; min-height: 300px; display: flex; align-items: center; border-radius: 24px; overflow: hidden; }
.sx-gl-hero-img { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
.sx-gl-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 20%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 20%, #000 40%); }
.sx-gl-hero-copy { position: relative; z-index: 1; max-width: 540px; padding: 22px 0 22px 6px; }
.sx-gl-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink); margin-bottom: 14px; }
.sx-gl-eyebrow svg { color: #d19b05; }
.sx-gl-hero .sx-hero2-title { font-size: clamp(32px, 3.8vw, 52px); }
.sx-gl-filter { padding: 0; }
.sx-gl-row { display: flex; gap: 8px; align-items: center; }
.sx-gl-row .sx-search { flex: 0 1 300px; height: 36px; border-radius: 9px; padding: 0 10px; background: var(--sx-paper); }
.sx-gl-row .sx-search input { font-size: 13.5px; }
.sx-gl-row .sx-select { min-width: 170px; height: 36px; border-radius: 9px; }
.sx-gl-row .sx-sort { height: 36px; min-width: 48px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; }
.sx-gl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.sx-gl-body.has-detail { grid-template-columns: minmax(0, 1fr) 380px; }
.sx-gl-count { font-size: 13px; color: var(--ink-3); margin: 4px 0 12px; }
.sx-gl-count b { color: var(--ink); font-size: 19px; margin-right: 6px; }
.sx-gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sx-term { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 16px 14px; border-radius: 16px; border: 1px solid var(--sx-edge); background: var(--sx-paper); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sx-term:hover { transform: translateY(-2px); box-shadow: var(--sx-shadow); }
.sx-term.on { border-color: var(--gold); background: var(--sx-gold-soft); }
.sx-term > svg { color: var(--ink-4); flex-shrink: 0; margin-top: 2px; }
.sx-term-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-term-main b { font-size: 14.5px; }
.sx-term-main span { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sx-gl-detail { position: sticky; top: calc(var(--header-h) + 14px); background: var(--sx-paper); border: 1px solid var(--sx-edge); border-radius: 20px; padding: 20px; box-shadow: var(--sx-shadow); max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto; }
.sx-gl-dhead { display: flex; align-items: center; gap: 12px; }
.sx-gl-dhead h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.sx-gl-star { color: #eab308; display: inline-flex; }
.sx-gl-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 14px; border-bottom: 1px solid var(--sx-edge); }
.sx-gl-tabs button { border: 0; background: transparent; padding: 9px 4px; font: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sx-gl-tabs button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.sx-gl-detail h4 { margin: 16px 0 8px; font-size: 15px; }
.sx-gl-detail h4:first-of-type { margin-top: 4px; }
.sx-gl-p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.sx-gl-simple { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sx-gold-soft); border: 1px solid var(--sx-gold-line); }
.sx-gl-simple img { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.sx-gl-simple p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.sx-gl-ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sx-gl-ex div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; background: #f7f3ec; border: 1px solid var(--sx-edge); font-size: 11.5px; color: #3a3f47; }
.sx-gl-ex img { width: 100%; max-width: 76px; aspect-ratio: 92 / 66; object-fit: cover; border-radius: 8px; }
.sx-gl-stds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-gl-stds button { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--sx-edge); background: var(--sx-cream); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sx-gl-stds button:hover { border-color: var(--sx-gold-line); }
.sx-gl-stds button > span { flex: 1; min-width: 0; }
.sx-gl-stds b { display: block; font-size: 13.5px; }
.sx-gl-stds small { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-gl-exbox { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--sx-cream); border: 1px solid var(--sx-edge); margin-bottom: 12px; }
.sx-gl-exbox svg { color: #c8900a; flex-shrink: 0; margin-top: 2px; }
.sx-gl-exbox p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.sx-gl-rel { display: flex; flex-direction: column; gap: 6px; }
.sx-gl-rel button { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--sx-edge); background: var(--sx-cream); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sx-gl-rel button > span:not(.sx-ico) { flex: 1; min-width: 0; }
.sx-gl-rel b { display: block; font-size: 13.5px; }
.sx-gl-rel small { display: block; font-size: 12px; color: var(--ink-3); }
.sx-gl-quiz { margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; border: 1px dashed var(--sx-gold-line); background: transparent; color: var(--sx-brown); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }

[data-theme="dark"] .sx-hero2-img img, [data-theme="dark"] .sx-gl-hero-img img { opacity: .85; }

@media (max-width: 1240px) {
  .sx-gl-body.has-detail { grid-template-columns: minmax(0, 1fr) 330px; }
  .sx-qz-modes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1040px) {
  .sx-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sx-rail { position: static; height: auto; }
  .sx-nav { flex-direction: row; overflow-x: auto; }
  .sx-nav-item { flex: 1 0 auto; justify-content: center; }
  .sx-picker { max-height: 280px; }
  .sx-journey { display: none; }
  .sx-top { max-width: none; }
  .sx-gl-body.has-detail { grid-template-columns: minmax(0, 1fr); }
  .sx-gl-detail { position: static; max-height: none; order: -1; }
}
@media (max-width: 760px) {
  .sx-hero2, .sx-gl-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .sx-hero2-img, .sx-gl-hero-img { position: relative; width: 100%; height: 220px; }
  .sx-hero2-img img, .sx-gl-hero-img img { -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%); }
  .sx-hero2-copy, .sx-gl-hero-copy { padding: 4px 2px 8px; margin-top: -6px; }
  .sx-cards3 { grid-template-columns: minmax(0, 1fr); }
  .sx-gl-row { flex-wrap: wrap; }
  .sx-gl-row .sx-search { flex-basis: 100%; }
  .sx-gl-row .sx-select { flex: 1; min-width: 0; }
  .sx-qz-result { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .sx-points, .sx-inout, .sx-scenario { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sx-hero2-title { font-size: 32px; }
  .sx-gl-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-gl-stds { grid-template-columns: minmax(0, 1fr); }
}
.sx-hero2.compact { min-height: 250px; }
.sx-hero2.compact .sx-hero2-img img { object-position: 70% 22%; }

/* Genel ders görünümü: not panosu + kapsam kartları */
.sx-board { position: relative; aspect-ratio: 520 / 280; border-radius: 18px; overflow: hidden; border: 1px solid var(--sx-edge);
  background: radial-gradient(70% 90% at 50% 60%, #fff7e4 0%, #f5ead6 55%, #ead9bd 100%); box-shadow: var(--sx-shadow); }
.sx-board-glow { position: absolute; left: 30%; right: 30%; bottom: 8%; height: 16%; border-radius: 50%; background: rgba(90,60,20,.18); filter: blur(10px); }
.sx-board-art { position: absolute; left: 50%; top: 52%; width: 34%; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: multiply; }
.sx-board-code { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: #14213d; color: #f4f4ef; }
.sx-board-note { position: absolute; font-family: 'Caveat', cursive; font-size: clamp(15px, 1.45vw, 20px); font-weight: 600; line-height: 1.05; color: #2f2412; padding: 9px 12px 11px; max-width: 30%; text-align: left; border: 0; cursor: pointer; box-shadow: 0 6px 12px -6px rgba(60,40,10,.45); transition: transform .18s; }
.sx-board-note:hover { transform: rotate(0deg) scale(1.05) !important; }
.sx-board-note.n0 { left: 4%; top: 9%; background: #fdefa8; transform: rotate(-5deg); }
.sx-board-note.n1 { right: 4%; top: 7%; background: #fde1a0; transform: rotate(4deg); }
.sx-board-note.n2 { right: 3%; bottom: 12%; background: #fbe7b5; transform: rotate(3deg); }
.sx-board-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sx-board-arrows path { fill: none; stroke: #3a2e1c; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-theme="dark"] .sx-board { background: radial-gradient(70% 90% at 50% 60%, #3a3122 0%, #2b251c 60%, #221d16 100%); }
[data-theme="dark"] .sx-board-art { mix-blend-mode: normal; }
[data-theme="dark"] .sx-board-arrows path { stroke: #d8c7a6; }
.sx-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.sx-scope-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sx-paper); border: 1px solid var(--sx-edge); }
.sx-scope-item span { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.sx-scope-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.sx-hero2-img img { animation: sx-img-in .45s ease both; }
@keyframes sx-img-in { from { opacity: 0; } to { opacity: 1; } }
.sx-board.has-photo { background: #efe6d6; }
.sx-board-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-board.has-photo .sx-board-arrows path { stroke: #3a2e1c; }


/* ═══════════════════════════════════════════════════════════════════════════
   Ana Sayfa — sade dashboard (components/HomeStudio.jsx, 2026-09-27, localhost önizleme)
   2 satır: büyük devam kartı + Günün Standardı; altta 4 eşit kart. .sx-root sıcak tonlarını kullanır.
   ═══════════════════════════════════════════════════════════════════════════ */
.hs-root { max-width: 1320px; display: flex; flex-direction: column; gap: 18px; }
.hs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hs-title { font-size: 28px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.hs-sub { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.hs-head-actions { display: flex; gap: 10px; align-items: center; }
.hs-head-actions .btn.primary { height: 40px; border-radius: 999px; padding: 0 18px; }

.hs-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.hs-hero { position: relative; min-height: 300px; border-radius: 26px; overflow: hidden; background: var(--sx-cream); border: 1px solid var(--sx-edge); display: flex; }
.hs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hs-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sx-cream) 30%, color-mix(in srgb, var(--sx-cream) 70%, transparent) 52%, transparent 75%); pointer-events: none; }
.hs-hero-copy { position: relative; z-index: 1; padding: 28px 30px; max-width: 58%; display: flex; flex-direction: column; gap: 8px; }
.hs-kicker { font-size: 12px; font-weight: 600; color: var(--sx-brown); }
.hs-kicker.on-dark { color: var(--gold-2); }
.hs-hero-crumb { font-size: 12.5px; color: var(--ink-3); }
.hs-hero-crumb b { color: var(--ink); }
.hs-hero-title { font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -.02em; margin: 2px 0 0; }
.hs-hero-text { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.hs-hero-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.hs-hero-meta b { color: var(--ink); font-family: var(--font-mono); }
.hs-hero-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.hs-btn-dark, .hs-btn-light, .hs-btn-white { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; }
.hs-btn-dark { background: #14213d; color: #fff; }
.hs-btn-dark.sm { height: 36px; padding: 0 16px; font-size: 13px; }
.hs-btn-light { background: var(--sx-paper); color: var(--ink); border: 1px solid var(--sx-edge); }
.hs-btn-white { background: #fff; color: #14213d; height: 38px; font-size: 13px; margin-top: auto; align-self: flex-start; }

.hs-daily { border-radius: 26px; padding: 20px 22px 22px; background: linear-gradient(160deg, #1d3a63, #14213d 70%); color: #f4f4ef; display: flex; flex-direction: column; gap: 6px; min-height: 300px; }
.hs-daily-img { height: 110px; margin: -6px -8px 8px; border-radius: 16px; overflow: hidden; }
.hs-daily-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-daily-code { font-size: 22px; font-weight: 600; color: var(--gold-2); }
.hs-daily-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.hs-daily-text { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: rgba(244, 244, 239, .72); }

.hs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hs-card { border-radius: 22px; background: var(--sx-paper); border: 1px solid var(--sx-edge); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 230px; }
.hs-card-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.hs-card-ic { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--sx-gold-soft); color: var(--sx-brown); }
.hs-card-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.hs-muted { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.hs-big { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-family: var(--font-mono); }
.hs-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; font-weight: 500; }

.hs-recent { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.hs-recent-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.hs-recent-row:hover { background: var(--sx-cream); }
.hs-recent-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hs-recent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hs-recent-main b { font-size: 13px; font-weight: 600; }
.hs-recent-main small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-recent-time { font-size: 10.5px; color: var(--ink-4); flex-shrink: 0; }


.hs-lib-top { display: flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.hs-lib-bars { display: flex; flex-direction: column; gap: 6px; }
.hs-lib-bar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 24px; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.hs-lib-bar i { height: 6px; border-radius: 99px; background: var(--sx-sand); overflow: hidden; }
.hs-lib-bar em { display: block; height: 100%; border-radius: 99px; background: #14213d; }
.hs-lib-bar b { text-align: right; color: var(--ink); font-size: 11.5px; }
.hs-lib-list { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.hs-lib-list button { border: 0; background: none; padding: 3px 0; font: inherit; font-size: 12.5px; color: var(--ink-2); text-align: left; cursor: pointer; }
.hs-lib-list button:hover { color: var(--accent); }
.hs-lib-list b { color: var(--ink); }

.hs-calcs { display: flex; flex-direction: column; gap: 6px; }
.hs-calcs button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--sx-edge); border-radius: 12px; background: var(--sx-cream); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; text-align: left; }
.hs-calcs button:hover { border-color: var(--gold); }

[data-theme="dark"] .hs-btn-dark { background: var(--gold); color: var(--gold-ink); }
[data-theme="dark"] .hs-lib-bar em { background: var(--gold); }

@media (max-width: 1100px) { .hs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .hs-top { grid-template-columns: minmax(0, 1fr); }
  .hs-hero { min-height: 0; flex-direction: column; }
  .hs-hero-img { position: relative; inset: auto; flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 400px; object-position: center 20%; }
  .hs-hero::after { inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 9; max-height: 400px; background: linear-gradient(0deg, var(--sx-cream) 0%, transparent 45%); }
  .hs-hero-copy { max-width: none; padding: 4px 22px 22px; }
  .hs-daily, .hs-card { min-height: 0; }
  .hs-daily-img { height: auto; aspect-ratio: 16 / 9; max-height: 300px; }
}
@media (max-width: 560px) {
  .hs-root { gap: 14px; }
  .hs-head { align-items: stretch; }
  .hs-head-actions, .hs-head-actions .btn.primary { width: 100%; justify-content: center; }
  .hs-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hs-hero, .hs-daily, .hs-card { border-radius: 20px; }
  .hs-hero-copy { padding: 4px 18px 18px; }
  .hs-hero-title { font-size: 26px; }
  .hs-hero-actions > * { flex: 1 1 auto; justify-content: center; }
  .hs-title { font-size: 23px; }
  .hs-daily { padding: 16px 18px 20px; }
  .hs-btn-white { align-self: stretch; justify-content: center; }
}

/* Muhasebe Haritası önizleme kartı */
.hs-map-card { cursor: pointer; transition: border-color .15s, transform .15s; }
.hs-map-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.hs-map { position: relative; flex: 1; min-height: 150px; display: grid; grid-template-columns: 30% 22% 48%; align-items: stretch; }
.hs-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hs-map-lines path { fill: none; stroke: var(--sx-edge-2); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.hs-map-root { grid-column: 1; align-self: center; position: relative; z-index: 1; border-radius: 12px; background: #14213d; color: #f4f4ef; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.hs-map-root b { color: var(--gold-2); font-size: 13px; }
.hs-map-root small { font-size: 10.5px; color: rgba(244, 244, 239, .7); }
.hs-map-kids { grid-column: 3; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 4px; }
.hs-map-kid { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--sx-edge); border-radius: 8px; background: var(--sx-cream); font-size: 11px; min-width: 0; }
.hs-map-kid b { color: var(--sx-brown); font-size: 11px; }
.hs-map-kid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.hs-map-kid.more { justify-content: center; border-style: dashed; background: transparent; }
.hs-map-kid.more span { color: var(--ink-3); }

/* ── Hesap Planları: Standartlar görünümüyle ortak çerçeve (AccountsStudio.jsx) ── */
.ac-search { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px; border: 1px solid var(--sx-edge); border-radius: 9px; background: var(--sx-cream); color: var(--ink-3); }
.ac-search:focus-within { border-color: var(--gold); }
.ac-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; color: var(--ink); }
.ac-group { position: sticky; top: 0; z-index: 1; margin: 8px 0 2px; padding: 4px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); background: var(--sx-sand); border-radius: 6px; }
.ac-row .sx-row-name small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-3); }
.ac-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--sx-gold-soft); border: 1px solid var(--sx-gold-line); color: var(--sx-brown); }
.ac-tag.pos { background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 30%, var(--line)); color: var(--pos); }
.ac-info { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--sx-edge); font-size: 13.5px; }
.ac-info:last-child { border-bottom: 0; }
.ac-info span { color: var(--ink-3); }
.ac-info b { font-weight: 600; text-align: right; }
.ac-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink-4); }
.ac-chip { display: inline-flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--sx-cream); border: 1px solid var(--sx-edge); color: var(--ink); }
.ac-chip b { font-family: var(--font-mono); font-size: 12.5px; }
.ac-chip small { font-size: 11.5px; color: var(--ink-3); }
.ac-chip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.ac-chip.on small { color: var(--gold-ink); opacity: .8; }
.sx-list-dots { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.sx-sec-art { min-width: 0; }

/* ── Ana sayfa: 2027'de uygulanacak standartlar (GEÇİCİ, 2026-10-19; HomeStudio.jsx → HsNotice2027) ── */
.hs-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--sx-gold-line); background: var(--sx-gold-soft); }
.hs-notice-head { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.hs-notice-head b { display: block; font-size: 14px; color: var(--ink); }
.hs-notice-head small { display: block; font-size: 12px; color: var(--sx-brown); font-family: var(--font-mono); }
.hs-notice-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--sx-paper); color: var(--sx-brown); }
.hs-notice-items { flex: 1 1 520px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hs-notice-item { flex: 1 1 220px; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--sx-edge); background: var(--sx-paper); font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); text-align: left; cursor: pointer; transition: border-color .15s; }
.hs-notice-item:hover { border-color: var(--sx-gold-line); }
.hs-notice-item b { flex-shrink: 0; font-size: 12px; color: var(--ink); }
.hs-notice-foot { width: 100%; margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.hs-notice-foot .hs-link { font-size: 12px; }
@media (max-width: 640px) {
  .hs-notice { padding: 12px; }
  .hs-notice-item { flex-basis: 100%; }
}