/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; background: #f4f6fb; color: #1a1a2e; line-height: 1.6; }
a { color: #1565c0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Header ───────────────────────────────────── */
header { background: #0d47a1; color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 54px; }
.logo { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.logo span { color: #90caf9; }
nav { display: flex; gap: 4px; }
nav a { color: rgba(255,255,255,.8); padding: 6px 13px; border-radius: 5px; font-size: 13px; font-weight: 500; transition: background .15s; }
nav a:hover, nav a.active { background: rgba(255,255,255,.18); color: #fff; text-decoration: none; }

/* ── Main ─────────────────────────────────────── */
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 40px; }

/* ── Page Title ───────────────────────────────── */
.page-title { margin-bottom: 20px; }
.page-title h1 { font-size: 22px; font-weight: 700; color: #0d47a1; }
.updated { font-size: 12px; color: #888; margin-top: 3px; display: block; }

/* ── Stat Cards ───────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: #fff; border: 1px solid #e0e7f0; border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.stat-label { font-size: 11.5px; color: #666; margin-bottom: 4px; }
.stat-value { font-size: 26px; font-weight: 700; color: #0d47a1; }
.stat-changes { display: flex; gap: 10px; margin-top: 6px; font-size: 12px; font-weight: 600; }
.stat-changes .up   { color: #c62828; }   /* faiz artışı = kötü → kırmızı */
.stat-changes .down { color: #2e7d32; }   /* faiz düşüşü = iyi → yeşil */

/* ── Charts ───────────────────────────────────── */
.charts-section { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.chart-card { background: #fff; border: 1px solid #e0e7f0; border-radius: 10px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.chart-card h3 { font-size: 14px; color: #0d47a1; margin-bottom: 12px; }
.chart-container { width: 100%; height: 380px; }
.chart-container > div { width: 100% !important; height: 100% !important; }

/* ── Commentary ───────────────────────────────── */
.commentary-box { background: #e8f0fe; border: 1px solid #c5d5f5; border-radius: 10px; padding: 16px 20px; }
.commentary-label { font-size: 13px; font-weight: 700; color: #0d47a1; margin-bottom: 8px; }
.commentary-box p { font-size: 13.5px; color: #333; line-height: 1.7; }
.commentary-footer { font-size: 11px; color: #888; margin-top: 10px; }

/* ── Footer ───────────────────────────────────── */
footer { background: #0d47a1; color: rgba(255,255,255,.7); margin-top: 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; gap: 24px; font-size: 12px; flex-wrap: wrap; }
.footer-inner a { color: rgba(255,255,255,.85); }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 700px) {
  nav { display: none; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .chart-container { height: 280px; }
}