/* ============================================================
   B1 — Gölge standardı
   Ölçüldü: dokuz sayfada altı ayrı gölge tanımı vardı.
   Üç seviyeye indirildi:
     sm  · bilgi kartı, liste öğesi
     md  · öne çıkan kart, form kutusu
     lg  · ekran görüntüsü, açılır menü, yüzen öğe
   Yalnızca gölge değerleri değişir; düzen ve renk sabit.
   ============================================================ */
:root {
  --golge-sm: 0 1px 2px rgba(15,45,91,.04), 0 2px 8px -2px rgba(15,45,91,.06);
  --golge-md: 0 2px 6px rgba(15,45,91,.05), 0 12px 28px -12px rgba(15,45,91,.16);
  --golge-lg: 0 8px 18px rgba(15,45,91,.07), 0 32px 64px -28px rgba(15,45,91,.3);
}
.shadow-sm, .shadow { box-shadow: var(--golge-sm) !important; }
.shadow-md, .shadow-kart { box-shadow: var(--golge-md) !important; }
.shadow-lg, .shadow-xl, .shadow-2xl, .shadow-isik { box-shadow: var(--golge-lg) !important; }
.il-guven-kart, .kn-ozellik { box-shadow: var(--golge-sm) !important; }
.ks-bento-kart, .ks-kisi, .yk-kart { box-shadow: var(--golge-md) !important; }
.ks-tarayici, .ks-telefon { box-shadow: var(--golge-lg) !important; }
.kn-rakam:hover, .ks-bento-kart:hover, .ks-kisi:hover { box-shadow: var(--golge-lg) !important; }

/* ============================================================
   B1 — Fiyat kartlarında hiyerarşi (notlar 20–21)
   Kartlar JavaScript ile üretiliyor; JS'e DOKUNULMADI, yalnızca
   biçem. Önce paket adı, daire aralığı, fiyat ve detay satırları
   birbirine yakın ağırlıktaydı; kullanıcının önce görmesi gereken
   üç şey öne çıkarıldı: kaç daire · aylık ne kadar · neler dahil.
   ============================================================ */
/* YALNIZCA ana fiyat (p etiketi). dd içindeki detay rakamları
   ilk denemede yanlışlıkla büyümüştü. */
.fy-kart p.num.font-veri { font-size: 38px !important; letter-spacing: -.03em; }
.fy-kart p.num.font-veri span { font-size: 16px !important; }
.fy-kart dl dd.num.font-veri { font-size: 12.5px !important; }
.fy-kart > p:first-child { opacity: .7; }
.fy-kart dl { font-size: 12.5px !important; opacity: .85; }
.fy-kart dl dd { font-size: 12.5px !important; }
/* önerilen paket: ölçek ve kenarlık belirginleşti */
@media (min-width: 1024px) {
  .fy-kart.shadow-isik { transform: translateY(-6px); border-width: 2px; }
}
.fy-kart .rounded-hap.bg-mavi-600 { font-size: 11px !important; padding: 3px 10px !important; letter-spacing: .06em; }

/* ============================================================
   B1 — Ürün sayfası: modül ızgarası katlanır (notlar 15)
   İçerik HTML'DEN KALDIRILMAZ; yalnızca görsel olarak katlanır,
   böylece arama motorları tamamını okumaya devam eder.
   ============================================================ */
.ks-moduller.katli { position: relative; max-height: 268px; overflow: hidden; }
.ks-moduller.katli::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, rgba(241,245,249,0) 0%, var(--ks-yuzey) 82%);
  pointer-events: none;
}
.ks-moduller.acik { max-height: none; }
.ks-moduller.acik::after { display: none; }
.ks-modul-ac {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0;
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--ks-tel);
  background: #fff; font-size: 13.5px; font-weight: 700; color: var(--ks-lac);
  cursor: pointer; transition: border-color .2s, transform .2s;
}
.ks-modul-ac:hover { border-color: var(--ks-tur); transform: translateY(-1px); }
.ks-modul-ac svg { width: 16px; height: 16px; transition: transform .3s; }
.ks-modul-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
.ks-modul-ac-sar { display: flex; justify-content: center; }