/* =========================================================================
   TypeFlow — Redesign katmanı
   Bu dosya diğer CSS dosyalarından SONRA yüklenir; renk/tipografi/kart
   dilini değiştirir, yerleşim (grid/flex) mantığına dokunmaz. Böylece
   app.js'in bağlı olduğu tüm id/class'lar bozulmadan kalır.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#F6F5FC;
  --surface:#FFFFFF;
  --surface-2:#FBFAFF;
  --surface-3:#F0EDFB;
  --text:#171225;
  --muted:#6B6690;
  --faint:#9C97B8;
  --line:#E6E1F7;
  --line-strong:#D6CDF2;
  --primary:#6C5CE7;
  --primary-2:#8578FF;
  --primary-soft:#EEEBFF;
  --primary-shadow:rgba(108,92,231,.20);
  --secondary:#0EA5C4;
  --green:#12A76A;
  --green-soft:#E7F9F0;
  --red:#E23A5D;
  --red-soft:#FDEAEF;
  --orange:#DB8B12;
  --shadow:0 18px 46px rgba(40,25,90,.08);
  --radius:14px;
  --font-display:'JetBrains Mono',ui-monospace,monospace;
}
html[data-theme="dark"]{
  --bg:#0A0912;
  --surface:#14121F;
  --surface-2:#1A1729;
  --surface-3:#231D3B;
  --text:#F2F0FA;
  --muted:#9C97B8;
  --faint:#6B6688;
  --line:#2A2440;
  --line-strong:#3A3258;
  --primary:#7C6CFF;
  --primary-2:#9B8CFF;
  --primary-soft:#211C3D;
  --primary-shadow:rgba(124,108,255,.35);
  --secondary:#46E1FF;
  --green:#4ADE80;
  --green-soft:#123322;
  --red:#FF5C7C;
  --red-soft:#3A1B28;
  --orange:#FFC163;
  --shadow:0 22px 60px rgba(0,0,0,.45);
}

body{
  font-family:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(ellipse 900px 480px at 12% -8%, color-mix(in srgb,var(--primary) 10%,transparent), transparent),
    radial-gradient(ellipse 700px 460px at 100% 6%, color-mix(in srgb,var(--secondary) 9%,transparent), transparent),
    var(--bg);
}
html[data-theme="dark"] .site-main:before{ display:none; }

/* Data / numeric / display typography → monospace, matches the "typing" subject */
.brand strong,
.premium-hero h1, .page-heading h1, .page-title h1, .guide-hero h1, .auth-card h1, .profile-v5-identity h1, .admin-header h1,
.metric strong, .summary-card strong, .stat strong, .result-score strong, .hero-result-score strong,
.analysis-primary-stats strong, .char-breakdown-value, .word-summary strong, .profile-level-orb strong,
.leader-list strong, .proof-item strong, .home-xp-copy small, .admin-stat strong, .rank{
  font-family:var(--font-display);
  letter-spacing:-0.02em;
}
.premium-hero h1, .page-heading h1, .page-title h1, .guide-hero h1{ font-weight:700; }

/* ---- Header: keycap-style logo mark ---- */
.brand-symbol{ display:none; }
.brand{ gap:11px; }
.brand:before{
  content:"K";
  width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 6px 16px var(--primary-shadow);
}
.header-inner{ box-shadow:var(--shadow); }
.main-nav a.active:after{ background:linear-gradient(90deg,var(--primary),var(--secondary)); }
.admin-nav{ color:var(--orange)!important; }

/* ---- Buttons: keycap bevel ---- */
.primary-btn{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border-bottom:2px solid color-mix(in srgb,var(--primary) 55%, #000 12%);
  box-shadow:0 10px 22px var(--primary-shadow);
}
.outline-btn, .option-btn, .icon-button, .tool-icon-btn{
  border-bottom-width:2px;
  border-bottom-color:var(--line-strong);
}
.option-btn.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--primary-soft));
  border-color:color-mix(in srgb,var(--primary) 55%,var(--line));
  color:var(--primary);
}

/* ---- Cards: subtle keycap bevel on the bottom edge ---- */
.card{
  border-bottom:2px solid color-mix(in srgb,var(--line-strong) 70%, transparent);
  transition:transform .15s ease, border-color .15s ease;
}

/* ---- Hero proof icons recolored to the new palette ---- */
.proof-icon.violet{ background:linear-gradient(145deg,var(--primary),var(--primary-2)); }
.proof-icon.blue{ background:linear-gradient(145deg,var(--secondary),#3fb9e0); }
.proof-icon.green{ background:linear-gradient(145deg,#4fd68f,var(--green)); }
.hero-eyebrow{ font-family:var(--font-display); font-weight:600; }

/* ---- Typing workspace: correct/incorrect feedback stays legible & bold ---- */
.word-stream{ font-family:var(--font-display); }
.typing-input{ font-family:'Inter',sans-serif; }
.word-viewport[data-highlight="box"] .test-word.active{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 45%,transparent), 0 0 14px color-mix(in srgb,var(--primary) 25%,transparent);
}

/* ---- Progress ring / xp bar accent ---- */
.progress-ring{ background:conic-gradient(var(--primary) calc(var(--progress)*1%), var(--surface-3) 0); }
.home-xp-track span, .profile-xp-track span{
  background:linear-gradient(90deg,var(--secondary),var(--primary),var(--primary-2));
}

/* ---- Result modal score accent ---- */
.hero-result-score>strong{ color:var(--primary); }
.legend-wpm{ color:var(--primary); }

/* =========================================================================
   AdSense-ready ad slots
   Bu kutular reklam yerleşimi için ayrılmıştır. Google AdSense onayı
   aldıktan sonra base.html <head> içindeki adsbygoogle script etiketine
   yayıncı kimliğini (ca-pub-XXXXXXXXXXXXXXXX) ekleyin ve aşağıdaki
   .ad-slot içine kendi <ins class="adsbygoogle"> kodunuzu yerleştirin.
   ========================================================================= */
.ad-slot{
  width:100%;
  margin:28px 0;
  padding:14px;
  border:1px dashed var(--line-strong);
  border-radius:12px;
  background:var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  text-align:center;
  color:var(--faint);
  font-size:12px;
  font-family:var(--font-display);
  letter-spacing:.06em;
}
.ad-slot--banner{ min-height:100px; }
.ad-slot--rectangle{ min-height:250px; }
.ad-slot--in-feed{ min-height:120px; margin:20px 0; }

@media(max-width:720px){
  .ad-slot{ min-height:100px; }
}

.footer{ gap:16px; flex-wrap:wrap; }
.footer-links a{ color:var(--primary); font-weight:700; }

/* =========================================================================
   Leaderboard V2 — daily / weekly / monthly / all-time competitive filters
   ========================================================================= */
.leaderboard-page-v2{max-width:1180px;margin:0 auto;padding:34px 20px 48px}
.leaderboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:20px}
.leaderboard-hero h1{margin:6px 0 6px;font-size:40px;line-height:1.05;letter-spacing:-1.4px}
.leaderboard-hero p{margin:0;color:var(--muted);font-size:15.5px}
.leaderboard-period-tabs{display:flex;align-items:center;gap:7px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-soft)}
.period-tab{min-height:38px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:var(--muted);font-size:14px;font-weight:750;text-decoration:none;white-space:nowrap}
.period-tab:hover{color:var(--text);background:var(--surface-2)}
.period-tab.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 8px 20px var(--primary-shadow)}
.leaderboard-filter-card{display:grid;grid-template-columns:1fr 1.25fr 1fr auto;gap:14px;align-items:end;padding:18px 20px;border-radius:16px}
.leaderboard-filter-card label{display:grid;gap:7px;color:var(--muted);font-size:12.5px;font-weight:760}
.leaderboard-filter-card select{width:100%;height:43px;padding:0 38px 0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--text);font-size:14px;font-weight:650}
.leaderboard-filter-btn{height:43px;min-width:118px;padding:0 18px;border:0;border-radius:10px;cursor:pointer}
.leaderboard-context-row{display:flex;flex-wrap:wrap;gap:8px;margin:15px 2px}
.leaderboard-context-pill{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:720}
.leaderboard-table-card{overflow:hidden;border-radius:17px}
.leaderboard-table-card table{width:100%;border-collapse:collapse}
.leaderboard-table-card th{height:48px;padding:0 18px;background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:800;text-align:left;border-bottom:1px solid var(--line)}
.leaderboard-table-card td{height:61px;padding:0 18px;border-bottom:1px solid var(--line);font-size:14px}
.leaderboard-table-card tbody tr:last-child td{border-bottom:0}
.leaderboard-table-card tbody tr:hover{background:color-mix(in srgb,var(--primary) 4%,var(--surface))}
.leaderboard-table-card td:nth-child(2){display:flex;align-items:center;gap:11px}
.leaderboard-rank{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-weight:850;font-size:12.5px;background:var(--surface-3);color:var(--muted)}
.leaderboard-rank.rank-1{background:#fff0b8;color:#9d6b00}.leaderboard-rank.rank-2{background:#edf1f7;color:#68748a}.leaderboard-rank.rank-3{background:#ffe1c6;color:#9d582f}
.leaderboard-username{font-size:14.5px}.leaderboard-country{display:inline-flex;padding:4px 8px;border-radius:7px;background:var(--surface-3);font-weight:700}.leaderboard-wpm{font-size:17px;color:var(--primary)}
.leaderboard-empty{padding:42px 12px;text-align:center;color:var(--muted);font-size:15px}
html[data-theme="dark"] .leaderboard-period-tabs,html[data-theme="dark"] .leaderboard-filter-card,html[data-theme="dark"] .leaderboard-table-card{border-color:#29364d}
@media(max-width:860px){.leaderboard-hero{align-items:flex-start;flex-direction:column}.leaderboard-period-tabs{width:100%;overflow-x:auto}.period-tab{flex:1}.leaderboard-filter-card{grid-template-columns:1fr 1fr}.leaderboard-filter-btn{width:100%}}
@media(max-width:560px){.leaderboard-page-v2{padding:24px 12px 36px}.leaderboard-hero h1{font-size:32px}.leaderboard-filter-card{grid-template-columns:1fr}.leaderboard-table-card{overflow-x:auto}.leaderboard-table-card table{min-width:620px}.period-tab{font-size:13px;padding-inline:12px}}


/* v6.2.1 — Typing tool above-the-fold layout */
.typing-tool-page{
  padding-top: 10px;
}
.typing-tool-page .tool-breadcrumb{
  margin-bottom: 2px;
}
.typing-tool-page .premium-hero{
  min-height: 108px;
  padding-top: 4px;
  padding-bottom: 12px;
  margin-bottom: 6px;
}
.typing-tool-page .premium-hero h1{
  margin-top: 7px;
  margin-bottom: 4px;
}
.typing-tool-page .premium-hero p{
  line-height: 1.45;
}
.typing-tool-page .premium-grid{
  margin-top: 0;
}
.typing-tool-page .typing-below-ad{
  margin-top: 22px;
  margin-bottom: 16px;
}
@media (max-width: 900px){
  .typing-tool-page .premium-hero{
    min-height: 0;
    padding-bottom: 10px;
    margin-bottom: 4px;
  }
}