/* ============ 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: 76px;      /* 2026-09-19: üst nav çubuğu (pill) yüksekliği */
  --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; }
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: 34px; height: 34px;
  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: 28px 32px 80px;
}
.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: 14px;
  padding: 2px 2px 18px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.intro-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: .85;
}
.intro-icon svg { width: 17px; height: 17px; }
.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: 22px; 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: 7px 13px;
  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 9px; 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: 18px 20px; }
.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: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.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); }
}

/* ─── 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: 10px 18px; border: none; border-radius: 999px;
  background: transparent; color: var(--nav-pill-ink);
  font-size: 13.5px; 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: 40px; height: 40px; 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;
}
.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: 104px; }
  .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: 9px 14px; font-size: 13px; }
  .top-icon-btn, .top-avatar { width: 38px; height: 38px; }
}

/* ============ 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-ghost, .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-ghost { border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-2); box-shadow: 0 6px 16px -10px rgba(10,18,40,.3); }
.dash-btn-ghost:hover { background: var(--bg-hover); }
.dash-btn-ghost kbd { font-size: 10.5px; }
.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; }

.dash-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-filters-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); padding-right: 6px; }
.dash-badge {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #14213d; color: #fff; font-size: 12px; font-weight: 600;
}
.dash-input {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-3);
  box-shadow: 0 6px 16px -12px rgba(10, 18, 40, .3);
}
.dash-input:focus-within { border-color: var(--accent); }
.dash-input input, .dash-input select {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--ink); font-size: 13.5px;
}
.dash-input-grow { flex: 1 1 260px; }
.dash-select { flex: 0 0 200px; }
.dash-select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 4px; }
.dash-select svg { pointer-events: none; }
.dash-clear { border: none; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 10px; }
.dash-clear:hover { text-decoration: underline; }

.dash-panel {
  border-radius: 28px; padding: 22px 22px 22px;
  background: #0f1a33; color: #f4f4ef;
  box-shadow: 0 30px 60px -34px rgba(10, 18, 40, .7);
  margin-bottom: 34px;
}
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 6px 18px; }
.dash-panel-title { font-size: 17px; font-weight: 600; }
.dash-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); flex-wrap: wrap; }
.dash-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: none; border-radius: 999px;
  background: transparent; color: rgba(244, 244, 239, .72); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.dash-tab:hover { color: #fff; }
.dash-tab.active { background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.dash-tab-n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12);
}
.dash-tab.active .dash-tab-n { background: rgba(42, 28, 2, .16); }

.dash-panel-body { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr); gap: 16px; height: 380px; }
.dash-list { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding-right: 6px; }
.dash-list::-webkit-scrollbar { width: 6px; }
.dash-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }
.dash-list-empty { padding: 24px 12px; font-size: 13px; line-height: 1.6; color: rgba(244, 244, 239, .6); }
.dash-row {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; flex-shrink: 0;
  border: none; border-radius: 14px; background: transparent;
  color: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.dash-row:not(.active)::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -3px; height: 1px; background: rgba(255, 255, 255, .06); }
.dash-row:hover { background: rgba(255, 255, 255, .06); }
.dash-row.active { background: rgba(255, 255, 255, .11); box-shadow: inset 3px 0 0 var(--gold); }
.dash-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-row-code { font-size: 12.5px; font-weight: 600; color: var(--gold-2); }
.dash-row-name { font-size: 13px; color: rgba(244, 244, 239, .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row.active .dash-row-name { color: #fff; }
.top-header .logo-text::after { content: none; }
.dash-row-calc { display: inline-flex; color: var(--gold-2); opacity: .85; flex-shrink: 0; }

.dash-detail {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; overflow: hidden;
  padding: 26px 28px; border-radius: 22px;
  background: linear-gradient(155deg, #223f78 0%, #182e5c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.dash-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-detail-eyebrow { font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .55); }
.dash-detail-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-chip {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8);
}
.dash-chip.on { background: rgba(242, 196, 106, .2); color: var(--gold-2); }
.dash-detail-code { font-size: 13px; font-weight: 600; color: var(--gold-2); margin-bottom: 4px; }
.dash-detail-name { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.dash-detail-purpose {
  margin: 0; max-width: 620px; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .76);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-detail-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.dash-detail-meta b { color: #fff; font-weight: 600; margin-right: 3px; }
.dash-detail-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; }
.dash-detail-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; border: none; background: transparent;
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .78); cursor: pointer;
}
.dash-detail-link:hover { color: #fff; text-decoration: underline; }

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

@media (max-width: 1180px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-panel-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .dash-list { max-height: 320px; }
  }
@media (max-width: 640px) {
  .dash-title { font-size: 28px; }
  .dash-stats { grid-template-columns: minmax(0, 1fr); }
  .dash-card { min-height: 0; }
    .dash-select { flex: 1 1 100%; }
  .dash-tabs { border-radius: 22px; width: 100%; }
  .dash-tab { flex: 1 1 auto; justify-content: center; border-radius: 18px; }
  .dash-panel { border-radius: 22px; padding: 14px; }
}

/* ── 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; }
  .dash-panel { padding: 14px; border-radius: 22px; }
  .dash-detail { padding: 18px; }
  .dash-detail-name { font-size: 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; }