/* ==========================================================================
   Çocuklar Okuyor Kulübü — ic sayfalar, uyelik ve abonelik arayuzu.
   PDF'teki palet: turkuaz / yesil / beyaz / acik krem / pastel tonlar.
   ========================================================================== */

:root {
    --kgm-turkuaz: #2fb8ad;
    --kgm-yesil:   #4caf7d;
    --kgm-krem:    #fdf8ef;
    --kgm-pastel:  #e8f6f4;

    /* Beyaz metin tasiyan koyu zeminler. Acik turkuaz/yesil uzerinde
       beyaz metnin kontrasti 2.45:1 idi (AA icin 4.5:1 gerekiyor);
       cagri bandi bu koyu karsiliklari kullaniyor. */
    --kgm-turkuaz-koyu: #1d7a72;  /* beyaz metinle 4.99:1 */
    --kgm-yesil-koyu:   #27754d;  /* beyaz metinle 5.44:1 */
}

/* ---------------------------------------------------------- Ust butonlar -- */

.kgm_ust_butonlar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 26px;
}

.kgm_hesap_link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--kgm-lacivert);
    white-space: nowrap;
}

.kgm_hesap_link:hover { color: var(--kgm-pembe); }

@media (max-width: 991px) {
    .kgm_ust_butonlar {
        margin: 14px 0 4px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------- Sayfa ustu ---- */

.kgm_sayfa_ustu {
    background: var(--kgm-pastel);
    padding: 68px 0 60px;
    position: relative;
    overflow: hidden;
}

.kgm_sayfa_baslik {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.25;
    color: var(--kgm-lacivert);
    margin: 0 0 14px;
}

.kgm_sayfa_metin {
    font-size: 17px;
    line-height: 1.75;
    color: var(--kgm-gri);
    max-width: 620px;
    margin: 0 auto 18px;
}

.kgm_yol { font-size: 14.5px; color: var(--kgm-gri); }
.kgm_yol a { color: var(--kgm-pembe); font-weight: 600; }
.kgm_yol a:hover { text-decoration: underline; }
.kgm_yol span { margin: 0 8px; }
.kgm_yol span:last-child { margin: 0; color: var(--kgm-lacivert); font-weight: 600; }

/* ---------------------------------------------------------- Bolum kabugu -- */

.kgm_bolum { padding: clamp(56px, 7vw, 90px) 0; }
.kgm_bolum--krem   { background: var(--kgm-krem); }
.kgm_bolum--pastel { background: var(--kgm-pastel); }

.kgm_bolum_baslik {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 38px);
    color: var(--kgm-lacivert);
    margin: 0 0 12px;
}

.kgm_bolum_alt {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--kgm-gri);
    max-width: 640px;
    margin: 0 0 40px;
}

.kgm_ortala { text-align: center; }
.kgm_ortala .kgm_bolum_alt { margin-inline: auto; }

/* ---------------------------------------------------------- Kartlar ------- */

.kgm_izgara {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.kgm_kart {
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .07);
    border-radius: 18px;
    padding: 30px 28px;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}

.kgm_kart:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(50, 53, 93, .09); }
.kgm_kart img { height: 54px; width: auto; margin-bottom: 18px; }

.kgm_kart h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: var(--kgm-lacivert);
    margin: 0 0 10px;
}

.kgm_kart p { font-size: 15px; line-height: 1.75; color: var(--kgm-gri); margin: 0; }

/* Kutu icerigi kartlari (gorselli) */
.kgm_kart--gorsel { text-align: center; padding: 26px 22px 30px; }
.kgm_kart--gorsel .kgm_kart_gorsel {
    height: 170px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 20px;
}
.kgm_kart--gorsel .kgm_kart_gorsel img {
    height: 100%; width: auto; max-width: 100%;
    object-fit: contain; margin: 0;
}

/* ---------------------------------------------------------- Adimlar ------- */

.kgm_adimlar {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.kgm_adim {
    background: #fff;
    border-radius: 18px;
    padding: 34px 28px 30px;
    text-align: center;
    border: 1px solid rgba(50, 53, 93, .07);
}

.kgm_adim_no {
    width: 56px; height: 56px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kgm-pembe);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 22px;
}

.kgm_adim h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--kgm-lacivert);
    margin: 0 0 10px;
}

.kgm_adim p { font-size: 15px; line-height: 1.75; color: var(--kgm-gri); margin: 0; }

/* ---------------------------------------------------------- SSS ---------- */

.kgm_sss { max-width: 860px; margin-inline: auto; }

.kgm_sss_oge {
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .08);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}

.kgm_sss_oge summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 20px 24px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--kgm-lacivert);
    list-style: none;
}

.kgm_sss_oge summary::-webkit-details-marker { display: none; }

.kgm_sss_oge summary::after {
    content: '+';
    flex: none;
    font-size: 24px;
    font-weight: 700;
    color: var(--kgm-pembe);
    line-height: 1;
}

.kgm_sss_oge[open] summary::after { content: '\2212'; }
.kgm_sss_oge[open] summary { border-bottom: 1px solid rgba(50, 53, 93, .07); }

.kgm_sss_cevap { padding: 20px 24px 24px; }
.kgm_sss_cevap p { font-size: 15.5px; line-height: 1.8; color: var(--kgm-gri); margin: 0 0 12px; }
.kgm_sss_cevap p:last-child { margin-bottom: 0; }
.kgm_sss_cevap strong { color: var(--kgm-lacivert); }

/* ---------------------------------------------------------- Paketler ----- */

.kgm_paketler {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
}

.kgm_paket {
    position: relative;
    background: #fff;
    border: 2px solid rgba(50, 53, 93, .08);
    border-radius: 20px;
    padding: 34px 30px 30px;
    display: flex;
    flex-direction: column;
}

.kgm_paket--one_cikan {
    border-color: var(--kgm-pembe);
    box-shadow: 0 20px 46px rgba(254, 75, 123, .13);
}

.kgm_paket_etiket {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--kgm-pembe);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.kgm_paket h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--kgm-lacivert);
    margin: 0 0 8px;
}

.kgm_paket_aciklama { font-size: 14.5px; line-height: 1.7; color: var(--kgm-gri); margin: 0 0 20px; }

.kgm_fiyat { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.kgm_fiyat b {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 38px;
    color: var(--kgm-pembe);
}
.kgm_fiyat span { font-size: 15px; color: var(--kgm-gri); }
.kgm_fiyat_alt { font-size: 14px; color: var(--kgm-gri); margin: 0 0 22px; }

.kgm_paket ul { list-style: none; margin: 0 0 26px; padding: 0; }
.kgm_paket li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--kgm-gri);
    margin-bottom: 10px;
}
.kgm_paket li::before {
    content: '\2713';
    position: absolute;
    left: 0; top: 0;
    color: var(--kgm-yesil);
    font-weight: 700;
}

.kgm_paket .cu_btn { margin-top: auto; text-align: center; }

/* ---------------------------------------------------------- Formlar ------ */

.kgm_form_kutu {
    max-width: 560px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .08);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 44px);
}

.kgm_form_kutu--genis { max-width: 820px; }

.kgm_form_kutu h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: var(--kgm-lacivert);
    margin: 0 0 8px;
    text-align: center;
}

.kgm_form_alt {
    text-align: center;
    font-size: 15px;
    color: var(--kgm-gri);
    margin: 0 0 28px;
}

.kgm_ikili {
    display: grid;
    gap: 0 18px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.kgm_form_alt_link {
    text-align: center;
    font-size: 15px;
    color: var(--kgm-gri);
    margin: 22px 0 0;
}

.kgm_form_alt_link a { color: var(--kgm-pembe); font-weight: 700; }
.kgm_form_alt_link a:hover { text-decoration: underline; }

.kgm_alan textarea {
    width: 100%;
    min-height: 140px;
    padding: 14px 18px;
    font: inherit;
    font-size: 15px;
    color: var(--kgm-lacivert);
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .14);
    border-radius: 12px;
    resize: vertical;
}

.kgm_alan textarea:focus {
    outline: none;
    border-color: var(--kgm-pembe);
    box-shadow: 0 0 0 3px rgba(254, 75, 123, .14);
}

.kgm_alan .form-control {
    width: 100%;
    height: 54px;
    padding: 12px 18px;
    font-size: 15px;
    color: var(--kgm-lacivert);
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .14);
    border-radius: 12px;
    box-shadow: none;
}

.kgm_alan .form-control:focus {
    border-color: var(--kgm-pembe);
    box-shadow: 0 0 0 3px rgba(254, 75, 123, .14);
}

.kgm_alan_ipucu { font-size: 13.5px; color: var(--kgm-gri); margin: 6px 0 0; }

/* ---------------------------------------------------------- Uyarilar ----- */

.kgm_uyari {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.7;
}

.kgm_uyari--hata   { background: #fdecef; color: #a3243f; border: 1px solid #f6c9d3; }
.kgm_uyari--basari { background: #e9f7f0; color: #1d6b47; border: 1px solid #bfe5d3; }
.kgm_uyari--bilgi  { background: var(--kgm-pastel); color: #1f5f5a; border: 1px solid #bfe3e0; }

.kgm_uyari ul { margin: 8px 0 0; padding-left: 20px; }
.kgm_uyari li { margin-bottom: 4px; }

/* ---------------------------------------------------------- Rozetler ----- */

.kgm_rozet {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.kgm_rozet--yesil   { background: #e4f6ec; color: #1d6b47; }
.kgm_rozet--sari    { background: #fdf3d9; color: #8a6410; }
.kgm_rozet--gri     { background: #eef0f4; color: #5a6076; }
.kgm_rozet--kirmizi { background: #fdecef; color: #a3243f; }

/* ---------------------------------------------------------- Hesap -------- */

.kgm_hesap_duzen {
    display: grid;
    gap: 30px;
    grid-template-columns: 260px 1fr;
    align-items: start;
}

.kgm_yan_menu {
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .08);
    border-radius: 18px;
    padding: 14px;
    list-style: none;
    margin: 0;
}

.kgm_yan_menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--kgm-lacivert);
}

.kgm_yan_menu a:hover { background: var(--kgm-pastel); }
.kgm_yan_menu a.aktif { background: var(--kgm-pembe); color: #fff; }

.kgm_panel {
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .08);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 36px);
}

.kgm_panel h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 23px;
    color: var(--kgm-lacivert);
    margin: 0 0 20px;
}

.kgm_ozet_izgara {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 30px;
}

.kgm_ozet_kutu { background: var(--kgm-pastel); border-radius: 14px; padding: 20px; }
.kgm_ozet_kutu span { display: block; font-size: 13.5px; color: var(--kgm-gri); margin-bottom: 6px; }
.kgm_ozet_kutu b { font-family: 'Nunito', sans-serif; font-size: 20px; color: var(--kgm-lacivert); }

.kgm_abonelik_kart {
    border: 1px solid rgba(50, 53, 93, .1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 18px;
}

.kgm_abonelik_ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.kgm_abonelik_ust h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: var(--kgm-lacivert);
    margin: 0;
}

.kgm_abonelik_bilgi {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 18px;
}

.kgm_abonelik_bilgi span { display: block; font-size: 13px; color: var(--kgm-gri); }
.kgm_abonelik_bilgi b { font-size: 15.5px; color: var(--kgm-lacivert); }

.kgm_islem_satiri { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.kgm_kucuk_btn {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(50, 53, 93, .16);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--kgm-lacivert);
    cursor: pointer;
}

.kgm_kucuk_btn:hover { border-color: var(--kgm-pembe); color: var(--kgm-pembe); }

@media (max-width: 767px) {
    .kgm_hesap_duzen { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- Blog --------- */

.kgm_blog_izgara {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.kgm_blog_kart {
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .07);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}

.kgm_blog_kart:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(50, 53, 93, .1); }
.kgm_blog_kart img { width: 100%; height: 200px; object-fit: cover; }

.kgm_blog_govde { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.kgm_blog_tarih { font-size: 13.5px; color: var(--kgm-pembe); font-weight: 700; margin-bottom: 8px; }

.kgm_blog_govde h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.4;
    color: var(--kgm-lacivert);
    margin: 0 0 10px;
}

.kgm_blog_govde p { font-size: 15px; line-height: 1.7; color: var(--kgm-gri); margin: 0 0 18px; }

.kgm_devam { margin-top: auto; font-size: 15px; font-weight: 700; color: var(--kgm-pembe); }
.kgm_devam:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Yazi --------- */

.kgm_yazi { max-width: 760px; margin-inline: auto; }
.kgm_yazi > img { width: 100%; border-radius: 18px; margin-bottom: 32px; }
.kgm_yazi p { font-size: 16.5px; line-height: 1.9; color: #55596d; margin: 0 0 20px; }

.kgm_yazi h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--kgm-lacivert);
    margin: 34px 0 14px;
}

/* ---------------------------------------------------------- Metin sayfa -- */

.kgm_metin { max-width: 800px; margin-inline: auto; }
.kgm_metin p { font-size: 16px; line-height: 1.9; color: #55596d; margin: 0 0 18px; }

.kgm_metin h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--kgm-lacivert);
    margin: 36px 0 14px;
}

.kgm_metin h2:first-child { margin-top: 0; }
.kgm_metin ul { margin: 0 0 20px; padding-left: 22px; }
.kgm_metin li { font-size: 16px; line-height: 1.85; color: #55596d; margin-bottom: 8px; }
.kgm_metin strong { color: var(--kgm-lacivert); }

/* ---------------------------------------------------------- WhatsApp ----- */

.kgm_wa_sabit {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 90;
    width: 58px; height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .4);
    transition: transform .2s ease;
}

.kgm_wa_sabit:hover { transform: scale(1.07); color: #fff; }

@media (max-width: 575px) {
    .kgm_wa_sabit { right: 14px; bottom: 14px; width: 52px; height: 52px; font-size: 23px; }
}

/* ---------------------------------------------------------- CTA bandi ---- */

.kgm_cta {
    background: linear-gradient(135deg, var(--kgm-turkuaz-koyu), var(--kgm-yesil-koyu));
    border-radius: 22px;
    padding: clamp(34px, 5vw, 56px);
    text-align: center;
    color: #fff;
}

.kgm_cta h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 34px);
    margin: 0 0 12px;
    color: #fff;
}

.kgm_cta p {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto 26px;
    max-width: 560px;
    color: #fff;
}

.kgm_cta .cu_btn { background: #fff; border-color: #fff; color: var(--kgm-lacivert); }
.kgm_cta .cu_btn:hover { background: var(--kgm-lacivert); border-color: var(--kgm-lacivert); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .kgm_kart:hover, .kgm_blog_kart:hover, .kgm_wa_sabit:hover { transform: none; }
}

/* ---------------------------------------------------------- Ek yardimci -- */

.kgm_form_bolum {
    text-align: left !important;
    font-size: 20px !important;
    margin: 26px 0 16px !important;
    padding-top: 22px;
    border-top: 1px solid rgba(50, 53, 93, .08);
}

.kgm_form_kutu form > .kgm_form_bolum:first-of-type {
    padding-top: 0;
    border-top: 0;
    margin-top: 0 !important;
}

.kgm_kisa_alan { min-height: 100px !important; }

/* kart bicimindeki baglantilar */
a.kgm_kart { display: block; color: inherit; }
a.kgm_kart:hover h3 { color: var(--kgm-pembe); }

/* blog kart basliklari baglanti */
.kgm_blog_govde h3 a { color: inherit; }
.kgm_blog_govde h3 a:hover { color: var(--kgm-pembe); }

/* paket butonu tam genislik */
.kgm_paket .cu_btn { display: block; width: 100%; padding-inline: 18px; }

/* ------------------------------------------------- Ust menu sikistirma --- */

/* 1200-1400 arasi menu genis geliyor; aralik ve punto kisilir. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-nav .dropdown-item { font-size: 14px; padding-inline: 9px; }
    .kgm_ust_butonlar { gap: 12px; margin-left: 14px; }
    .kgm_ust_butonlar .cu_btn { padding: 14px 20px; font-size: 15px; }
    .kgm_hesap_link { font-size: 14px; }
}

/* xl esiginin altinda menu acilir panel olur */
@media (max-width: 1199.98px) {
    .kgm_ust_butonlar {
        margin: 14px 0 6px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Ust bar CTA butonu tek satirda kalsin */
.kgm_ust_butonlar .cu_btn { white-space: nowrap; }

/* ==========================================================================
   Anasayfa: SSS (sol) + kutu fotografi (sag)
   ========================================================================== */

.kgm_sss_anasayfa { background: var(--kgm-krem); }

.kgm_sss_ikili {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(30px, 5vw, 64px);
    align-items: center;
}

.kgm_sss_sol .kgm_bolum_alt { margin-bottom: 30px; }

/* bolum icindeki SSS listesi tam genislik kullansin */
.kgm_sss_anasayfa .kgm_sss { max-width: none; margin: 0; }

.kgm_sss_tumu { display: inline-block; margin-top: 8px; }

.kgm_kutu_foto {
    background: #fff;
    border: 1px solid rgba(50, 53, 93, .07);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 40px);
    box-shadow: 0 22px 50px rgba(50, 53, 93, .08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kgm_kutu_foto img {
    width: 100%;
    height: auto;
    max-width: 460px;
    display: block;
}

.kgm_kutu_foto_not {
    text-align: center;
    font-size: 14.5px;
    color: var(--kgm-gri);
    margin: 16px 0 0;
}

@media (max-width: 900px) {
    .kgm_sss_ikili { grid-template-columns: 1fr; }
    .kgm_sss_sag { order: -1; }
    .kgm_kutu_foto img { max-width: 360px; margin-inline: auto; }
}

/* ==========================================================================
   Footer alt bandi: telif (sol) + ajans logosu (sag)
   ========================================================================== */

.kgm_footer_alt {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    max-width: 1170px;
    margin: 0 auto;
    padding: 18px 15px 22px;
}

.kgm_footer_alt .copy_text {
    margin: 0;
    text-align: left;
}

.kgm_ajans {
    display: inline-flex;
    align-items: center;
    opacity: .85;
    transition: opacity .2s ease, transform .22s ease;
}

.kgm_ajans:hover { opacity: 1; transform: translateY(-2px); }

/* Yaninda yazi kalmadigi icin logo tek basina biraz daha buyuk. */
.kgm_ajans img {
    height: 40px;
    width: auto;
    display: block;
}

@media (max-width: 575px) {
    .kgm_footer_alt { justify-content: center; text-align: center; }
    .kgm_footer_alt .copy_text { text-align: center; width: 100%; }
    .kgm_ajans img { height: 34px; }
}

/* Sablon .copy_text'i mutlak konumluyor; alt bantta akisa geri aliyoruz. */
.kgm_footer_alt .copy_text {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left;
}

/* Ajans logosu arkadaki illustrasyonla karismasin diye yumusak zemin */
.kgm_ajans {
    background: rgba(255, 255, 255, .78);
    border-radius: 999px;
    padding: 7px 16px 7px 18px;
    backdrop-filter: blur(2px);
}

.kgm_ajans:hover { background: #fff; }

.kgm_footer_alt .copy_text {
    background: rgba(255, 255, 255, .7);
    border-radius: 999px;
    padding: 8px 18px !important;
    backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   Ust menu: 8 baglanti + hesap + buton dar masaustunde satiri tasiriyordu.
   1400px altinda araliklari ve yazi boyutunu kademeli kisiyoruz.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1520px) {
    .header_part .navbar-nav > li > a { padding-inline: 9px !important; font-size: 14.5px; }
    .kgm_ust_butonlar { gap: 12px; margin-left: 14px; }
    .kgm_ust_butonlar .cu_btn { padding-inline: 20px; font-size: 14.5px; }
    .kgm_hesap_link { font-size: 14px; }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .header_part .navbar-nav > li > a { padding-inline: 6px !important; font-size: 13.5px; }
    .kgm_ust_butonlar { gap: 9px; margin-left: 10px; }
    .kgm_ust_butonlar .cu_btn { padding-inline: 15px; font-size: 13.5px; }
    .kgm_hesap_link span { display: none; }   /* sadece ikon kalsin */
}

/* --------------------------------------------------------------------------
   Ust pembe serit — mobil
   E-posta dar ekranda satiri sisiriyordu; kaldirdik. Telefon ve sosyal
   ikonlar alt alta yerine tek satirda yan yana duruyor.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* e-posta gizli */
    .sub_header .header_contact_info a[href^="mailto:"] { display: none !important; }

    /* iki sutunu tek satira al */
    .sub_header .row {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .sub_header .row > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        padding-inline: 0 !important;
    }

    .sub_header .header_contact_info,
    .sub_header .header_social_icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-align: center !important;
        margin: 0 !important;
        float: none !important;
    }

    .sub_header .header_contact_info a,
    .sub_header .header_social_icon a {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13.5px;
        white-space: nowrap;
    }

    .sub_header .header_social_icon a { font-size: 15px; }
    .sub_header .header_social_icon p { display: none !important; }

    /* serit yuksekligi tek satira insin */
    .sub_header { padding-block: 9px !important; }
}

@media (max-width: 420px) {
    .sub_header .row { gap: 10px; }
    .sub_header .header_social_icon { gap: 9px; }
    .sub_header .header_contact_info a { font-size: 12.5px; }
    .sub_header .header_social_icon a { font-size: 14px; }
}

/* 360px altindaki cok dar ekranlarda (iPhone SE 1. nesil vb.) sablondan
   gelen kucuk bir yatay kayma kaliyor; kaynagi tek bir ogeye
   baglanamadi. Bu genislikte yatay kaydirmayi kapatiyoruz. */
@media (max-width: 359px) {
    html, body { overflow-x: hidden; }
}

/* ======================================================================
   Kuruculuk rozeti - "Okusan Fena Olmaz Kitap Okuma Kulubu" projesi

   Logo kartin ustunden tasar, zemin onun etrafindan dolasir.

   ONEMLI: daire, gorselin KENDISINE degil ARKASINDAKI katmana
   (::before) uygulanir. Gorsele border-radius verilirse logonun sol
   ustundeki renkli noktalar kirpilir - logo icerigi 320px kutunun
   284x270'ini dolduruyor, yani neredeyse tamamini.

   Daire capi = gorsel kutusu x 1.23 (icerigin kosegeni) + pay.
   ====================================================================== */

.kgm_footer_alt .kgm_kulup {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 62px 0 0;
    padding: 60px 26px 16px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(50, 53, 93, .07);
}

/* logonun arkasindaki yuvarlak zemin */
.kgm_footer_alt .kgm_kulup::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 50%;
    z-index: 0;
}

/* logo: hicbir kirpma yok */
.kgm_footer_alt .kgm_kulup img {
    position: absolute;
    top: -46px;
    left: 50%;
    width: 92px;
    height: 92px;
    display: block;
    border-radius: 0;
    background: none;
    padding: 0;
    z-index: 1;
    transform: translateX(-50%);
    transition: transform .32s cubic-bezier(.34, 1.3, .64, 1);
}

.kgm_footer_alt .kgm_kulup:hover img {
    transform: translateX(-50%) rotate(-6deg) scale(1.05);
}

.kgm_footer_alt .kgm_kulup span {
    position: relative;
    z-index: 1;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #515374;
}

/* Uc rozet yan yana: dar masaustunde ortadaki sikismasin */
@media (max-width: 1199.98px) {
    .kgm_footer_alt { gap: 12px 16px; }

    .kgm_footer_alt .kgm_kulup {
        margin-top: 54px;
        padding: 53px 22px 14px;
    }

    .kgm_footer_alt .kgm_kulup::before {
        top: -53px;
        width: 106px;
        height: 106px;
    }

    .kgm_footer_alt .kgm_kulup img {
        top: -40px;
        width: 80px;
        height: 80px;
    }

    .kgm_footer_alt .kgm_kulup span { font-size: 12px; }
}

/* Tablet ve altinda uc oge alt alta, ortali */
@media (max-width: 991.98px) {
    .kgm_footer_alt { justify-content: center; text-align: center; }
    .kgm_footer_alt .copy_text { width: auto; text-align: center; }
}

@media (max-width: 575px) {
    .kgm_footer_alt .kgm_kulup {
        margin-top: 48px;
        padding: 48px 18px 14px;
    }

    .kgm_footer_alt .kgm_kulup::before {
        top: -48px;
        width: 96px;
        height: 96px;
    }

    .kgm_footer_alt .kgm_kulup img {
        top: -36px;
        width: 72px;
        height: 72px;
    }

    .kgm_footer_alt .kgm_kulup span { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .kgm_footer_alt .kgm_kulup:hover img { transform: translateX(-50%); }
}

/* ======================================================================
   AYIN KUTUSU BANDI  (anasayfa, "Neden..." bolumunun altinda)

   Tasarim dili sitedeki mor "Okuma Alışkanlığını" bandindan alindi
   (zemin rengi o bolumun arka plan gorselinden ornekiendi: #45427E).
   Solda kitaplar, sagda cagri.

   Kitaplar 2x2 izgara DEGIL: ust uste binen, hafifce egik bir yelpaze.
   "Kutuda neler var" sayfasindaki izgaradan bilerek farkli.
   ====================================================================== */

.kgm_kutu_bant {
    background: linear-gradient(135deg, #45427E 0%, #514c94 100%);
    padding: clamp(56px, 7vw, 92px) 0;
    position: relative;
    overflow: hidden;
}

.kgm_kutu_bant_ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(30px, 5vw, 64px);
}

/* ----------------------------------------------------- kitap yelpazesi -- */

.kgm_kutu_yelpaze {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 300px;
    padding: 10px 0;
}

.kgm_yelpaze_kitap {
    /* --sira: 0..3  -> her kitap bir oncekinin uzerine biner ve egilir */
    --egim: calc((var(--sira) - 1.5) * 7deg);
    --kaydir: calc((var(--sira) - 1.5) * 74px);
    --derinlik: calc(1 - (var(--sira) - 1.5) * 0.02);

    position: absolute;
    left: 50%;
    bottom: 0;
    width: clamp(130px, 15vw, 168px);
    margin: 0;
    transform: translateX(-50%) translateX(var(--kaydir)) rotate(var(--egim)) scale(var(--derinlik));
    transform-origin: bottom center;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15, 14, 40, .34);
    transition: transform .38s cubic-bezier(.22, .61, .36, 1),
                box-shadow .38s ease;
}

/* ortadakiler ustte kalsin: kenardan merkeze dogru artan katman */
.kgm_yelpaze_kitap:nth-child(1) { z-index: 1; }
.kgm_yelpaze_kitap:nth-child(2) { z-index: 3; }
.kgm_yelpaze_kitap:nth-child(3) { z-index: 4; }
.kgm_yelpaze_kitap:nth-child(4) { z-index: 2; }

.kgm_yelpaze_kitap img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/* kapak yoksa okunur bir yer tutucu */
.kgm_yelpaze_bos {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 2 / 3;
    padding: 14px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    color: #6b6f96;
    background: repeating-linear-gradient(45deg, #f3f4f9 0 8px, #eceef6 8px 16px);
}

/* uzerine gelince yelpaze acilir */
.kgm_kutu_yelpaze:hover .kgm_yelpaze_kitap {
    --egim: calc((var(--sira) - 1.5) * 10deg);
    --kaydir: calc((var(--sira) - 1.5) * 92px);
}

.kgm_yelpaze_kitap:hover {
    --egim: 0deg;
    --derinlik: 1.06;
    z-index: 5;
    box-shadow: 0 22px 44px rgba(15, 14, 40, .44);
}

/* --------------------------------------------------------------- metin -- */

.kgm_kutu_bant_metin { color: #fff; }

.kgm_kutu_rozet {
    display: inline-block;
    padding: 6px 15px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #ffd6a1;
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}

.kgm_kutu_bant_metin h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.25;
    color: #fff;
    margin: 0 0 16px;
}

.kgm_kutu_bant_metin p {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.8;
    color: rgba(255, 255, 255, .84);
    margin: 0 0 28px;
    max-width: 46ch;
}

.kgm_kutu_bant_islem {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.kgm_kutu_bant_link {
    font-size: 15px;
    font-weight: 700;
    color: #ffd6a1;
    transition: color .2s ease, transform .2s ease;
}

.kgm_kutu_bant_link:hover { color: #fff; transform: translateX(3px); }

/* ------------------------------------------------------------- duyarli -- */

@media (max-width: 991.98px) {
    .kgm_kutu_bant_ic {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .kgm_kutu_bant_metin { text-align: center; }
    .kgm_kutu_bant_metin p { margin-inline: auto; }
    .kgm_kutu_bant_islem { justify-content: center; }

    .kgm_kutu_yelpaze { min-height: 260px; }
}

@media (max-width: 575px) {
    .kgm_yelpaze_kitap {
        width: clamp(104px, 30vw, 128px);
        --kaydir: calc((var(--sira) - 1.5) * 52px);
        --egim: calc((var(--sira) - 1.5) * 6deg);
    }

    .kgm_kutu_yelpaze { min-height: 220px; }
    .kgm_kutu_yelpaze:hover .kgm_yelpaze_kitap {
        --kaydir: calc((var(--sira) - 1.5) * 58px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kgm_yelpaze_kitap,
    .kgm_kutu_yelpaze:hover .kgm_yelpaze_kitap,
    .kgm_yelpaze_kitap:hover { transition: none; }
}

/* Anasayfadaki video bolumu: yuklenen dosya icin HTML5 oynatici.
   Sablonun kapak gorseliyle ayni olculerde dursun. */
.pr_video .kgm_video_oynatici {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #000;
}

/* ------------------------------------------- Sabit "Abone Ol" butonu ----- */
/* Her sayfanin sol alt kosesinde durur. Sag alt kose WhatsApp'a ait,
   bu yuzden karsi kosede; yukari cik dugmesiyle de cakismaz. */

.kgm_abone_sabit {
    position: fixed;
    left: 22px; bottom: 22px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px 11px 15px;
    border-radius: 999px;
    background: #22315e;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(34, 49, 94, .34);
    transition: transform .2s ease, background .2s ease;
}

.kgm_abone_sabit:hover,
.kgm_abone_sabit:focus {
    background: #fe4b7b;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(254, 75, 123, .38);
}

.kgm_abone_sabit:focus-visible {
    outline: 3px solid rgba(254, 75, 123, .55);
    outline-offset: 3px;
}

.kgm_abone_sabit svg { flex: none; }

@media (max-width: 575px) {
    .kgm_abone_sabit {
        left: 14px; bottom: 14px;
        padding: 10px 15px 10px 13px;
        font-size: 14px;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kgm_abone_sabit { transition: none; }
    .kgm_abone_sabit:hover,
    .kgm_abone_sabit:focus { transform: none; }
}

/* ------------------------------------------------- Hesap kapatma ---------- */

/* Yan menusuz tek panel (hesap kapatildiktan sonraki ekran). */
.kgm_panel--tek {
    max-width: 620px;
    margin: 0 auto;
}

/* "Bilgilerim" sayfasinin altindaki tehlikeli islem kutusu.
   Kaydet formundan gorsel olarak ayrilmali ki yanlislikla tiklanmasin. */
.kgm_tehlike_kutu {
    margin-top: 34px;
    padding: 22px 24px;
    border: 1px solid rgba(214, 60, 60, .28);
    border-radius: 14px;
    background: rgba(214, 60, 60, .04);
}

.kgm_tehlike_kutu h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #b3312f;
    margin: 0 0 8px;
}

.kgm_tehlike_kutu p {
    margin: 0 0 14px;
    font-size: 15px;
    color: #5b6070;
    line-height: 1.75;
}

.kgm_tehlike_bag {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #d63c3c;
    border-radius: 999px;
    background: #fff;
    color: #b3312f;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.kgm_tehlike_bag:hover,
.kgm_tehlike_bag:focus {
    background: #d63c3c;
    color: #fff;
    text-decoration: none;
}

/* Silme formunun gonder dugmesi kirmizi olmali; kaydet dugmesiyle
   ayni renkte olsa yanlislikla tiklanabilir. */
.kgm_gonder--tehlike { background: #d63c3c; }
.kgm_gonder--tehlike:hover { background: #b3312f; }
.kgm_gonder--tehlike:focus-visible { outline-color: rgba(214, 60, 60, .55); }

@media (prefers-reduced-motion: reduce) {
    .kgm_tehlike_bag { transition: none; }
}

/* --------------------------------------------- Firma bilgileri tablosu ---- */
/* Sozlesme, KVKK ve iletisim sayfalarinda saticinin yasal bilgileri. */

.kgm_firma_tablo {
    width: 100%;
    max-width: 620px;
    margin: 0 0 22px;
    border-collapse: collapse;
    font-size: 15px;
}

.kgm_firma_tablo th,
.kgm_firma_tablo td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(50, 53, 93, .09);
    line-height: 1.65;
}

.kgm_firma_tablo th {
    width: 170px;
    font-weight: 700;
    color: var(--kgm-lacivert);
    background: rgba(50, 53, 93, .03);
}

.kgm_firma_tablo tr:last-child th,
.kgm_firma_tablo tr:last-child td { border-bottom: 0; }

@media (max-width: 575px) {
    .kgm_firma_tablo,
    .kgm_firma_tablo tbody,
    .kgm_firma_tablo tr,
    .kgm_firma_tablo th,
    .kgm_firma_tablo td { display: block; width: auto; }
    .kgm_firma_tablo th { border-bottom: 0; padding-bottom: 2px; background: none; }
    .kgm_firma_tablo td { padding-top: 0; }
}

/* ------------------------------------------------- Guvenli odeme bandi ---- */

.kgm_odeme_guven {
    margin-top: 26px;
    padding: 22px 24px;
    border: 1px solid rgba(50, 53, 93, .1);
    border-radius: 16px;
    background: #fff;
}

.kgm_odeme_guven_ust {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: #1f8a4c;
    font-size: 16px;
}

.kgm_odeme_guven p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #5b6070;
}

.kgm_kart_rozetleri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kgm_kart_rozetleri span {
    padding: 6px 13px;
    border: 1px solid rgba(50, 53, 93, .14);
    border-radius: 7px;
    background: #f7f8fb;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #4a5068;
}

/* iyzico resmi bandi. Kaynak gorsel 429x32; buyutulurse bulaniklasir,
   bu yuzden dogal boyutu ust sinir, dar ekranda oranli kuculur. */
.kgm_iyzico_bant {
    display: block;
    width: 100%;
    max-width: 429px;
    height: auto;
}

.kgm_guven_not {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: #7a8092;
}

/* Footer'daki iyzico bandi: telif satirinin hemen ustunde, ortali. */
.kgm_odeme_bant {
    display: flex;
    justify-content: center;
    padding: 0 0 22px;
}

.kgm_odeme_bant img {
    width: 100%;
    max-width: 429px;
    height: auto;
    opacity: .95;
}