/* Ana sayfa "Bizimle neler kazanırsınız" (bolumler/ana-kazanc.php) — 07.11.2026
   Hero B'nin açık gökyüzünden sonra beyaz zemin; pastel sonuç kutuları + gri durum kartları. */
.kz {
    --kz-yazi: #1d1d1b;
    --kz-gri: #8a8a85;
    --kz-durum: #f3f2ef;
    --kz-mavi: #d7ebfb;  --kz-mavi-y: #1f5f99;  --kz-mavi-v: #2b7fd4;
    --kz-pembe: #fbe1f1; --kz-pembe-y: #8c2a68;
    --kz-yesil: #dcf0dc; --kz-yesil-y: #2c6b35; --kz-yesil-v: #1f9d55;
    --kz-mor-v: #6b5bd6;
    --kz-kirmizi: #e5484d;
    background: #fff;
    color: var(--kz-yazi);
    padding: clamp(64px, 9vw, 120px) 16px clamp(56px, 8vw, 104px);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.kz-ic { max-width: 1080px; margin: 0 auto; }

/* --- Açıklama cümlesi --- */
.kz-cumle { max-width: 860px; margin: 0 auto clamp(64px, 9vw, 112px); }
.kz-ust {
    display: inline-block; margin-bottom: 20px; padding: 5px 12px; border-radius: 999px;
    background: #f1f0ec; color: #5b5b56; font-size: 13px; font-weight: 500; letter-spacing: .01em;
}
.kz-cumle p {
    margin: 0 0 .7em; font-size: clamp(22px, 2.9vw, 34px); line-height: 1.42; font-weight: 450;
    letter-spacing: -.02em; color: var(--kz-yazi);
}
.kz-cumle p:last-child { margin-bottom: 0; }
.kz-cizik { position: relative; text-decoration: none; color: var(--kz-kirmizi); white-space: nowrap; }
.kz-cizik::after {
    content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; border-radius: 2px;
    background: var(--kz-kirmizi); transform-origin: left center; transform: scaleX(1);
    transition: transform .7s cubic-bezier(.65, 0, .35, 1);
    transition-delay: var(--kz-g, 0s);
}
.kz-vurgu { white-space: nowrap; }
.kz-mavi.kz-vurgu  { color: var(--kz-mavi-v); }
.kz-yesil.kz-vurgu { color: var(--kz-yesil-v); }
.kz-mor.kz-vurgu   { color: var(--kz-mor-v); }
.kz-ikon {
    display: inline-flex; vertical-align: -0.08em; width: .9em; height: .9em; margin-left: .22em;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s;
    transition-delay: var(--kz-g, 0s);
}
.kz-ikon svg { width: 100%; height: 100%; }

/* --- Başlık (Hero B ile aynı serif dil) --- */
.kz-baslik {
    margin: 0 auto clamp(32px, 4.5vw, 52px); text-align: center;
    font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
    font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.035em; color: var(--kz-yazi);
}
.kz-baslik span { display: block; color: var(--kz-gri); font-style: italic; }

/* --- Izgara: durum kartı 2 sütun + 2 renkli kutu --- */
.kz-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kz-durum {
    grid-column: span 2; position: relative; display: flex; flex-direction: column; justify-content: space-between;
    gap: 22px; min-height: 196px; padding: 30px 46px 26px 34px; background: var(--kz-durum);
}
/* Kesik köşe + kutulara bakan ok ucu (referanstaki kart biçimi) */
.kz-durum-sol { clip-path: polygon(28px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 0 28px); }
.kz-durum-sag { clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 26px 100%, 0 50%); padding: 30px 34px 26px 50px; }
.kz-durum p { margin: 0; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.55; color: #3b3b37; }
.kz-durum p::before { content: "“"; } .kz-durum p::after { content: "”"; }
.kz-etiket {
    order: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 11px 5px 6px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 500; color: #55554f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.kz-etiket-lg { display: inline-flex; }
.kz-etiket-lg img { width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.kz-etiket-lg img + img { margin-left: -5px; box-shadow: 0 0 0 2px #fff; }

.kz-kutu {
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
    min-height: 196px; padding: 24px 22px 20px;
}
.kz-kutu strong {
    font-weight: 400; font-size: clamp(34px, 3.9vw, 50px); line-height: 1; letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.kz-kutu span { font-size: 13.5px; line-height: 1.4; font-weight: 500; }
.kz-kutu.kz-mavi  { background: var(--kz-mavi);  color: var(--kz-mavi-y); }
.kz-kutu.kz-pembe { background: var(--kz-pembe); color: var(--kz-pembe-y); }
.kz-kutu.kz-yesil { background: var(--kz-yesil); color: var(--kz-yesil-y); }
.kz-kutu strong { color: #17283a; }
.kz-kutu.kz-pembe strong { color: #3a1630; }
.kz-kutu.kz-yesil strong { color: #15301a; }

/* --- Alt çağrı --- */
.kz-alt { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 56px); }
.kz-dugme {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px;
    background: #141414; color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14); transition: transform .2s, box-shadow .2s;
}
.kz-dugme svg { width: 16px; height: 16px; transition: transform .2s; }
.kz-dugme:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.kz-dugme:hover svg { transform: translateX(3px); }
.kz-alt-not { font-size: 13.5px; color: var(--kz-gri); }
.kz-dipnot { margin: 18px 0 0; text-align: center; font-size: 12px; color: #a7a7a1; }

/* --- Kaydırmayla giriş (JS .kz-hazir ekler; JS yoksa her şey görünür) --- */
.kz-hazir .kz-cizik::after { transform: scaleX(0); }
.kz-hazir .kz-ikon { opacity: 0; transform: scale(.4) rotate(-20deg); }
.kz-hazir .kz-durum, .kz-hazir .kz-kutu { opacity: 0; transform: translateY(18px); }
.kz-hazir .kz-durum, .kz-hazir .kz-kutu { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--kz-g, 0s); }
.kz-cumle.kz-on .kz-cizik::after { transform: scaleX(1); }
.kz-cumle.kz-on .kz-ikon { opacity: 1; transform: none; }
.kz-izgara.kz-on .kz-durum, .kz-izgara.kz-on .kz-kutu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .kz-hazir .kz-cizik::after, .kz-hazir .kz-ikon, .kz-hazir .kz-durum, .kz-hazir .kz-kutu {
        transition: none !important; opacity: 1 !important; transform: none !important;
    }
}

/* --- Mobil / tablet --- */
@media (max-width: 860px) {
    .kz-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kz-durum { order: 0; }
    .kz-durum-sol, .kz-durum-sag {
        clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
        padding: 26px 24px 22px;
    }
    .kz-durum, .kz-kutu { min-height: 0; }
    .kz-kutu { min-height: 148px; padding: 20px 18px 18px; }
    /* Durum kartı her zaman kendi kutularının üstünde dursun */
    .kz-izgara > :nth-child(1) { order: 1; } .kz-izgara > :nth-child(2) { order: 2; } .kz-izgara > :nth-child(3) { order: 3; }
    .kz-izgara > :nth-child(4) { order: 5; } .kz-izgara > :nth-child(5) { order: 6; } .kz-izgara > :nth-child(6) { order: 4; }
    .kz-izgara > :nth-child(7) { order: 7; } .kz-izgara > :nth-child(8) { order: 8; } .kz-izgara > :nth-child(9) { order: 9; }
    .kz-izgara > :nth-child(6), .kz-izgara > :nth-child(7) { margin-top: 10px; }
}
@media (max-width: 480px) {
    .kz-cizik, .kz-vurgu { white-space: normal; }
    .kz-kutu strong { font-size: 32px; }
}

/* Google ile doğrudan kayıt (07.11.2026): düğmede G işareti, yanında e-posta seçeneği */
.kz-dugme .g-ikon { margin-right: 0; }
.kz-eposta { color: var(--kz-yazi); }
.kz-alt-not-sat { margin-top: 10px; text-align: center; }