/* ============================================================
   FinKasa — içerik (rehber/karşılaştırma) sayfaları stil dosyası
   ------------------------------------------------------------
   Bu sayfalar JS çalışmadan okunur: arama motoru botu da tarayıcı da
   aynı ham HTML'i görür. Uygulamanın app.css'ine BAĞLI DEĞİLDİR —
   içerik sayfası açmak için 300 KB'lik arayüz stilini indirmek israf
   olur (PV kotası + hızlı render). Marka paleti app.css ile aynıdır:
   #060b14 zemin, #38bdf8 → #6366f1 vurgu.
   Yollar kök-göreli tutulur (href="/..."), alt klasörden de çalışır.
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #060b14; color: #dbe7f7;
  font: 17px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 28px 20px 64px; }
.top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid #16233b; margin-bottom: 26px;
}
.brand { color: #7dd3fc; text-decoration: none; font-weight: 700; letter-spacing: .3px; }
.brand:hover { text-decoration: underline; }
.crumb { color: #8aa0bf; font-size: 14px; }
.crumb a { color: #8aa0bf; text-decoration: none; }
.crumb a:hover { color: #7dd3fc; }
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.25; margin: 6px 0 10px; color: #f2f7ff; }
h2 { font-size: 22px; margin: 38px 0 10px; color: #eaf2ff; border-bottom: 1px solid #16233b; padding-bottom: 8px; }
h3 { font-size: 18px; margin: 26px 0 6px; color: #eaf2ff; }
p, li { color: #c9d7ec; }
strong { color: #f2f7ff; }
a { color: #7dd3fc; }
.lead { font-size: 19px; color: #e8f0fb; margin: 0 0 8px; }
.meta { color: #7b8fac; font-size: 14px; margin: 0 0 26px; }
ul, ol { padding-left: 24px; }
li { margin: 6px 0; }
table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
th, td { border: 1px solid #1c2c47; padding: 9px 11px; text-align: left; vertical-align: top; }
th { background: #0d1830; color: #eaf2ff; }
td { background: #0a1223; }
.note {
  background: #0d1a30; border: 1px solid #1e3355; border-radius: 10px;
  padding: 14px 16px; margin: 20px 0; font-size: 15.5px;
}
.note b { color: #7dd3fc; }
.ck { background: #0d1830; border: 1px solid #1c2c47; border-radius: 10px; padding: 14px 18px; margin: 18px 0; }
.ck h3 { margin-top: 0; }
.cta {
  background: linear-gradient(135deg, #0c2036, #131a33);
  border: 1px solid #27406b; border-radius: 14px; padding: 20px 22px; margin: 40px 0 10px;
}
.cta h2 { margin: 0 0 8px; border: 0; padding: 0; font-size: 20px; }
.btn {
  display: inline-block; background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #061018; font-weight: 700; text-decoration: none; border-radius: 10px;
  padding: 10px 18px; margin: 8px 10px 0 0;
}
.btn.alt { background: transparent; color: #7dd3fc; border: 1px solid #2c4a78; }
.related { display: grid; gap: 10px; margin: 16px 0 4px; padding: 0; list-style: none; }
.related li { margin: 0; }
.related a {
  display: block; background: #0a1223; border: 1px solid #1c2c47; border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: #eaf2ff;
}
.related a:hover { border-color: #38bdf8; }
.related span { display: block; color: #8aa0bf; font-size: 14px; margin-top: 3px; }
details { border: 1px solid #1c2c47; border-radius: 10px; padding: 6px 14px; margin: 10px 0; background: #0a1223; }
summary { cursor: pointer; font-weight: 600; color: #eaf2ff; padding: 6px 0; }
details p { margin: 8px 0 10px; }
.foot { margin-top: 46px; padding-top: 18px; border-top: 1px solid #16233b; color: #7b8fac; font-size: 14px; }
.foot a { color: #8aa0bf; }
@media (max-width: 560px) {
  body { font-size: 16px; }
  table { font-size: 13.5px; }
  th, td { padding: 7px 8px; }
}
@media print { body { background: #fff; color: #111; } .wrap { max-width: none; } a { color: #111; } }