/* Ana sayfa kalabalık sahnesi (hero altı, bolumler/ana-kalabalik.php + js/ana-kalabalik.js).
   Yalnız sahne; metin yok. Sınıflar kl- önekli (sitedeki .hero vb. ile çakışmasın). Zemin kazanç bölümüyle aynı beyaz. */
.kl {
    --kl-zemin: #ffffff;
    --kl-ust: #ffffff;
    position: relative;
    background: var(--kl-zemin);
    overflow: hidden;
}
.kl-sahne {
    position: relative;
    height: min(48vh, 460px);
    min-height: 300px;
    overflow: hidden;
    contain: strict;
    cursor: default;
}
.kl-sahne.kl-uzerinde { cursor: pointer; }
.kl-sahne svg {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    opacity: 0; transition: opacity .9s ease;
}
.kl-sahne.kl-hazir svg { opacity: 1; }
/* üst ve alt sis: kalabalık zemine erisin */
.kl-sahne::before, .kl-sahne::after {
    content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2;
}
/* ince sis: yalnız en uzak başları ve en yakın bulanık bacakları yumuşatır, beyaz şerit bırakmaz */
.kl-sahne::before { top: 0; height: 9%; background: linear-gradient(var(--kl-ust), rgba(255, 255, 255, 0)); }
.kl-sahne::after { bottom: 0; height: 9%; background: linear-gradient(rgba(255, 255, 255, 0), var(--kl-zemin)); }

/* Hero A (lacivert) alt dolgusu (80px / mobilde 60px) beyaza erimiş boş alan: sahne o kadar yukarı çıkar, bitişik görünür */
/* üst kısım saydam: hero'nun kendi beyaza erime geçişi kesilmeden sürer (opak zemin düz bir çizgi çiziyordu) */
section.hero ~ .kl { margin-top: -80px; z-index: 1; --kl-ust: rgba(255, 255, 255, 0); background: linear-gradient(rgba(255, 255, 255, 0), #fff 90px); }
@media (max-width: 768px) { section.hero ~ .kl { margin-top: -60px; } }

/* Hero B: vitrin penceresi hero'nun dışına taşan keskin bir görüntü; sitenin tasarımında taşan kısmı bir sonraki bölümün
   beyazı hero sınırında keser. Sahne de tam o sınırdan başlar (yukarı çekmek ya da saydam yapmak vitrini kırpıyordu). */

/* Kazanç bölümü sahnenin hemen ardından geliyorsa üst boşluğu küçülür (kalabalığa bitişik) */
.kl ~ .kz { padding-top: clamp(20px, 3vw, 40px); }

.kl-etiket-ad { font: 600 9.5px Inter, system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; fill: #fff; }
.kl-etiket-alt { font: 500 10px Inter, system-ui, sans-serif; fill: #5f5f5f; paint-order: stroke; stroke: var(--kl-zemin); stroke-width: 3px; stroke-linejoin: round; }
.kl-bag-yazi { font: 600 8.5px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; paint-order: stroke; stroke: var(--kl-zemin); stroke-width: 3.5px; stroke-linejoin: round; }
.kl-olay-yazi { font: 500 9px Inter, system-ui, sans-serif; fill: #6f6f6f; letter-spacing: .01em; }
.kl-ipucu { font: 500 9.5px Inter, system-ui, sans-serif; fill: #8a8a8a; paint-order: stroke; stroke: var(--kl-zemin); stroke-width: 3px; }

@media (max-width: 760px) {
    .kl-sahne { height: 42vh; min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
    .kl-sahne svg { transition: none; }
}