/* ======================================================================
   Kitaplar Geldi Mi - site geneli hareket katmani

   Sablonun WOW.js kurulumu yalnizca anasayfadaki Elementor bloklarini
   kapsiyor. Bizim yazdigimiz ic sayfalar (abonelik, sss, kutuda neler var,
   hesap, blog...) hicbir gecise sahip degildi. Bu dosya onlari tamamlar.

   Tum hareketler "hareketi azalt" tercihinde kapanir (dosyanin sonu).
   ====================================================================== */

/* ---------------------------------------------------------- anahtarlar -- */

@keyframes kgm_gir {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

@keyframes kgm_sol {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: none; }
}

@keyframes kgm_buyu {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes kgm_don {
    to { transform: rotate(360deg); }
}

@keyframes kgm_suzul {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ==================================================================== */
/*  1. Kaydirinca belirme                                               */
/*     JS ogelere .kgm_belir ekler, gorununce .kgm_belir--acik.          */
/* ==================================================================== */

.kgm_belir {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .62s cubic-bezier(.22, .61, .36, 1) var(--kgm-gecikme, 0ms),
                transform .62s cubic-bezier(.22, .61, .36, 1) var(--kgm-gecikme, 0ms);
    will-change: opacity, transform;
}

.kgm_belir--acik {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* yandan gelen varyant (metin bloklari icin) */
.kgm_belir--yan {
    transform: translateX(-26px);
}

/* buyuyerek gelen varyant (gorseller, kutular) */
.kgm_belir--olcek {
    transform: scale(.95);
}

.kgm_belir--acik.kgm_belir--yan,
.kgm_belir--acik.kgm_belir--olcek {
    transform: none;
}

/* ==================================================================== */
/*  2. Sayfa ustu (ic sayfa basligi)                                     */
/* ==================================================================== */

.kgm_sayfa_baslik,
.kgm_sayfa_metin,
.kgm_yol {
    animation: kgm_gir .7s cubic-bezier(.22, .61, .36, 1) both;
}

.kgm_sayfa_metin { animation-delay: .12s; }
.kgm_yol         { animation-delay: .2s; }

/* ==================================================================== */
/*  3. S.S.S. akordiyonu                                                 */
/* ==================================================================== */

.kgm_sss_oge {
    transition: border-color .25s ease, box-shadow .3s ease, background .25s ease;
}

.kgm_sss_oge[open] {
    box-shadow: 0 6px 22px rgba(30, 30, 60, .07);
}

/* Acilip kapanirken golge gecisi yukseklik animasyonuyla ayni anda
   calisip her karede yeniden boyama maliyeti ekliyordu; hareket
   suresince golgeyi sabitliyoruz. */
.kgm_sss_oge--hareket { transition: none; }

.kgm_sss_oge summary {
    transition: color .2s ease;
    position: relative;
}

.kgm_sss_oge summary::after {
    transition: transform .32s cubic-bezier(.34, 1.4, .64, 1);
}

.kgm_sss_oge[open] summary::after {
    transform: rotate(180deg);
}

/* JS yukseklik canlandirmasi sirasinda tasmayi kes */
/* Hareket sirasinda:
   - overflow gizli: tasma gorunmesin
   - contain: tarayici bu kutunun ic yerlesimini/boyamasini sayfanin
     geri kalanindan yalitir, her karede tum agaci hesaplamaz
   - will-change: yukseklik degisecegini onceden bildirir
   Bunlar YALNIZCA animasyon suresince uygulanir; surekli birakmak
   bellekte gereksiz katman tutar. */
.kgm_sss_oge--hareket .kgm_sss_cevap {
    overflow: hidden;
    contain: layout paint;
    will-change: height;
}

/* ==================================================================== */
/*  4. Kartlar ve kutular                                                */
/* ==================================================================== */

.kgm_kart,
.kgm_paket,
.kgm_abonelik_kart,
.kgm_ozet_kutu,
.kgm_form_kutu,
.kgm_panel {
    transition: transform .28s cubic-bezier(.22, .61, .36, 1),
                box-shadow .28s ease,
                border-color .28s ease;
}

.kgm_kart:hover,
.kgm_paket:hover,
.kgm_abonelik_kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(30, 30, 60, .11);
}

/* one cikan paket zaten yukarida duruyor; daha da yukselmesin */
.kgm_paket--one_cikan:hover { transform: translateY(-5px) scale(1.01); }

/* kutu kapaklari */
.kutu_kapak { transition: transform .32s cubic-bezier(.34, 1.3, .64, 1), box-shadow .3s ease; }
.kutu_kapak:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 0 18px 34px rgba(30, 30, 60, .18); }

/* blog kartlari */
.kgm_blog_kart { transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease; }
.kgm_blog_kart:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(30, 30, 60, .12); }
.kgm_blog_kart img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.kgm_blog_kart:hover img { transform: scale(1.07); }

/* kutu icerigi ogeleri (anasayfa "+" listesi) */
.kgm_kutu_oge { transition: transform .3s cubic-bezier(.34, 1.3, .64, 1); }
.kgm_kutu_oge:hover { transform: translateY(-6px); }

.kgm_kutu_gorsel img { transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.kgm_kutu_oge:hover .kgm_kutu_gorsel img { transform: scale(1.06); }

/* aradaki arti isaretleri hafifce suzulsun */
.kgm_arti { animation: kgm_suzul 3.4s ease-in-out infinite; }
.kgm_kutu_liste .kgm_arti:nth-of-type(2) { animation-delay: .35s; }
.kgm_kutu_liste .kgm_arti:nth-of-type(3) { animation-delay: .7s; }

/* ozellik kartlari (neden kitaplar geldi mi) */
.features_new_item { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.features_new_item:hover { transform: translateY(-6px); }
.features_new_item img { transition: transform .45s cubic-bezier(.34, 1.3, .64, 1); }
.features_new_item:hover img { transform: scale(1.12) rotate(-4deg); }

/* adim kartlari */
.kidzo_event_item { transition: transform .28s ease, box-shadow .28s ease; }
.kidzo_event_item:hover { transform: translateX(6px); box-shadow: 0 12px 28px rgba(30, 30, 60, .1); }

/* ==================================================================== */
/*  5. Dugmeler ve baglantilar                                           */
/* ==================================================================== */

.kgm_gonder,
.kgm_kucuk_btn,
.kgm_cta a,
.common_btn,
.dl_btn {
    transition: transform .14s ease, box-shadow .24s ease,
                background .22s ease, color .22s ease;
}

.kgm_gonder:hover,
.kgm_kucuk_btn:hover,
.common_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(254, 75, 123, .26);
}

.kgm_gonder:active,
.kgm_kucuk_btn:active,
.common_btn:active {
    transform: translateY(0) scale(.985);
    box-shadow: none;
}

/* gonderilirken donen halka */
.kgm_gonder--mesgul {
    pointer-events: none;
    opacity: .8;
    position: relative;
    color: transparent !important;
}

.kgm_gonder--mesgul::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kgm_don .62s linear infinite;
}

/* "devam" baglantisindaki ok ilerlesin */
.kgm_devam { transition: color .2s ease; }
.kgm_devam::after,
.kgm_devam > span { transition: transform .25s ease; }
.kgm_devam:hover { letter-spacing: .2px; }

/* ==================================================================== */
/*  6. Form alanlari                                                     */
/* ==================================================================== */

.kgm_alan input,
.kgm_alan select,
.kgm_alan textarea,
.kgm_abone_form input,
.kgm_abone_form select {
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.kgm_alan input:focus,
.kgm_alan select:focus,
.kgm_alan textarea:focus,
.kgm_abone_form input:focus,
.kgm_abone_form select:focus {
    outline: none;
    border-color: #fe4b7b;
    box-shadow: 0 0 0 4px rgba(254, 75, 123, .12);
}

/* ==================================================================== */
/*  7. Uyari kutulari                                                    */
/* ==================================================================== */

.kgm_uyari {
    animation: kgm_gir .5s cubic-bezier(.22, .61, .36, 1) both;
}

/* ==================================================================== */
/*  8. Menu ve ust cubuk                                                 */
/* ==================================================================== */

.main_menu_list > li > a,
.kgm_ust_serit a {
    transition: color .22s ease;
}

.main_menu_list > li > a::after {
    transition: width .28s cubic-bezier(.22, .61, .36, 1);
}

/* logo hafif buyusun */
.logo img, .kgm_logo_metin {
    transition: transform .3s cubic-bezier(.34, 1.3, .64, 1);
}

.logo:hover img, .kgm_logo_metin:hover { transform: scale(1.04); }

/* ==================================================================== */
/*  9. Yukari cik dugmesi                                                */
/* ==================================================================== */

.kgm_yukari {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fe4b7b;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(254, 75, 123, .32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.85);
    transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.3, .64, 1),
                visibility .3s, box-shadow .25s ease;
}

.kgm_yukari--gorunur {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.kgm_yukari:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(254, 75, 123, .42);
}

.kgm_yukari svg { width: 20px; height: 20px; }

/* WhatsApp butonu varsa carpismasin */
/* WhatsApp dugmesi de sag alt kosede duruyor; yukari cik onun ustune gecer.
   (Sinif adi .kgm_wa_sabit; eskiden .kgm_wa yaziyordu ve kural hic tutmuyordu.) */
.kgm_wa_sabit ~ .kgm_yukari,
body:has(.kgm_wa_sabit) .kgm_yukari { bottom: 92px; }

@media (max-width: 575px) {
    .kgm_yukari { right: 14px; bottom: 14px; width: 42px; height: 42px; }
    .kgm_wa_sabit ~ .kgm_yukari,
    body:has(.kgm_wa_sabit) .kgm_yukari { bottom: 78px; }
}

/* ==================================================================== */
/*  10. Okuma cubugu (blog yazisi)                                       */
/* ==================================================================== */

.kgm_ilerleme {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #fe4b7b, #ffb03a);
    z-index: 999;
    pointer-events: none;
}

/* ==================================================================== */
/*  Hareketi azalt: her seyi kapat                                       */
/* ==================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .kgm_belir { opacity: 1 !important; transform: none !important; }
    .kgm_arti  { animation: none !important; }

    .kgm_kart:hover,
    .kgm_paket:hover,
    .kutu_kapak:hover,
    .kgm_blog_kart:hover,
    .kgm_abonelik_kart:hover,
    .kgm_kutu_oge:hover,
    .features_new_item:hover,
    .kidzo_event_item:hover,
    .kgm_gonder:hover,
    .kgm_kucuk_btn:hover { transform: none !important; }
}