/* ======================================================================
   Çocuklar Okuyor Kulübü - 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).
   ====================================================================== */

/* ------------------------------------------------------------ emniyet -- */
/* WOW.js ogeye once inline "visibility:hidden" veriyor ve gorunurlugu
   animasyon basladiginda geri aciyor. Bu kurulumda animasyon adi
   cozulemedigi icin (inline "animation-name: none") geri acilma hic
   olmuyordu: anasayfadaki H1 ve butun bolum baslıklari sayfada
   gorunmez kaliyordu. Icerigin gorunurlugu bir animasyonun calismasina
   bagli olmamali; burada kosulsuz garanti ediyoruz. */
.wow { visibility: visible !important; }

/* ---------------------------------------------------------- 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.          */
/* ==================================================================== */

/* "transform" yerine ayri "translate"/"scale" ozellikleri: ogenin kendi
   transform'u (egik fotograf cercevesi, dondurulmus etiket, rozet) animasyon
   bitince sifirlanmasin, ikisi ust uste binsin. */
.kgm_belir {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1) var(--kgm-gecikme, 0ms),
                translate .8s cubic-bezier(.22, 1, .36, 1) var(--kgm-gecikme, 0ms),
                scale .8s cubic-bezier(.34, 1.3, .64, 1) var(--kgm-gecikme, 0ms);
}

.kgm_belir--acik {
    opacity: 1;
    translate: none;
    scale: none;
}

/* soldan gelen varyant (metin bloklari, soldaki gorseller) */
.kgm_belir--yan { translate: -34px 0; }

/* sagdan gelen varyant (sagdaki etiketler, adim kartlari) */
.kgm_belir--sag { translate: 34px 0; }

/* buyuyerek gelen varyant (gorseller, kutular) */
.kgm_belir--olcek { translate: 0 14px; scale: .92; }

/* rozet gibi kucuk ogeler: yerinde buyuyerek belirir */
.kgm_belir--patla { translate: none; scale: .4; }

.kgm_belir--acik.kgm_belir--yan,
.kgm_belir--acik.kgm_belir--sag,
.kgm_belir--acik.kgm_belir--olcek,
.kgm_belir--acik.kgm_belir--patla {
    translate: none;
    scale: 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 çocuklar okuyor kulübü) */
.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; translate: none !important; scale: 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; }
}