/* ============================================================
   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; }
/* KAPAK GÖRSELİ (15 Ekim 2026): her içerik sayfasında bir adet,
   1200×800 JPEG ~31–57 KB. width/height BİLİNÇLİ yazılır: tarayıcı
   alanı önceden ayırır, kaydırma sırasında metin zıplamaz (CLS=0).
   loading="lazy" görünen alandaki resmi bekletemez; ekranın dışındaki
   resimde ise ilk açılışta boşuna indirme yaptırmaz (PV kotası). */
.gorsel { margin: 0 0 24px; }
.gorsel img {
  display: block; width: 100%; height: auto; background: #0a1223;
  border: 1px solid #1c2c47; border-radius: 12px;
}
.gorsel figcaption { color: #7b8fac; font-size: 14px; line-height: 1.5; margin-top: 8px; }
.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; }
/* HAZIR METİN (15 Ekim 2026): kopyalanacak şablon satırları. pre-line
   satır sonlarını korur — okuyucu metni seçip kopyaladığında satır
   satır yapışır. Vurgu çizgisi, kutunun kendisinden ayırt edilir. */
.metin {
  background: #0a1223; border-left: 3px solid #38bdf8; border-radius: 0 8px 8px 0;
  padding: 11px 14px; margin: 10px 0 4px; font-size: 16px; white-space: pre-line; color: #dbe7f7;
}
.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;
  transition: border-color .16s ease, background .16s ease, color .16s ease,
    transform .16s ease, box-shadow .16s ease;
}
/* 15 Ekim: ana sayfadaki Rehberler menüsüyle aynı hover dili — kart ısınıyor,
   hafif kalkıyor, alt açıklama netleşiyor. Metin/HTML değişmedi. */
.related a:hover { border-color: #38bdf8; background: #0d1a2f; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.related a:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.related a:hover span { color: #aec8ea; }
.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; } }