/*
 * custom-landing.css
 * Google Ads landing page iyilestirmeleri icin EKLEME amacli stil dosyasi.
 * Mevcut kidearn.css DEGISTIRILMEDEN, yalnizca yeni eklenen bolumler ve
 * mobil UX duzeltmeleri icin ekstra kurallar burada tutulur.
 * Marka renkleri kidearn.css'teki --kidearn-* degiskenlerinden alinir.
 */

/* ---------- Mobil lokasyon seridi (header.php) ---------- */
.mobile-location-bar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-location-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: var(--kidearn-black, #0B2038);
        color: #fff;
        padding: 8px 16px;
        font-size: 12.5px;
        line-height: 1.3;
    }

    .mobile-location-bar a {
        color: #fff;
        display: flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
    }

    .mobile-location-bar i {
        color: var(--kidearn-secondary, #FFAA23);
        font-size: 13px;
    }

    .mobile-location-bar__call {
        background: var(--kidearn-base, #F25334);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        justify-content: center;
        flex-shrink: 0;
    }
}

/* ---------- Genel yeni bolum yardimcilari ---------- */
.kidearn-landing-section {
    padding: 60px 0;
}

@media (max-width: 767px) {
    .kidearn-landing-section {
        padding: 40px 0;
    }
}

.kidearn-landing-section--gray {
    background: var(--kidearn-gray, #FAF5F2);
}

/* ---------- Yas gruplari kartlari ---------- */
.age-group-card {
    background: #fff;
    border: 1px solid var(--kidearn-border-color, #FCE9DD);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}

.age-group-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(11, 32, 56, 0.08);
}

.age-group-card__icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    background: rgba(var(--kidearn-primary-rgb, 38, 166, 161), .12);
    color: var(--kidearn-primary, #26A6A1);
    font-size: 26px;
    margin: 0 auto 16px;
}

.age-group-card__range {
    display: inline-block;
    font-weight: 800;
    color: var(--kidearn-base, #F25334);
    font-size: 15px;
    margin-bottom: 6px;
}

.age-group-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--kidearn-black, #0B2038);
    margin-bottom: 8px;
}

.age-group-card__text {
    font-size: 14px;
    color: var(--kidearn-text-gray, #6B7385);
    margin-bottom: 0;
}

/* ---------- Kayit sureci adimlari ---------- */
.process-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    height: 100%;
}

.process-step__num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--kidearn-base, #F25334);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.process-step__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--kidearn-black, #0B2038);
    margin-bottom: 4px;
}

.process-step__text {
    font-size: 13.5px;
    color: var(--kidearn-text-gray, #6B7385);
    margin-bottom: 0;
}

/* ---------- Guven / neden bizi secmelisiniz mini kartlar ---------- */
.trust-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
}

.trust-point__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.trust-point__title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--kidearn-black, #0B2038);
    margin-bottom: 2px;
}

.trust-point__text {
    font-size: 13.5px;
    color: var(--kidearn-text-gray, #6B7385);
    margin-bottom: 0;
}

/* ---------- Harita / iletisim mini bolumu ---------- */
.map-contact-box {
    background: #fff;
    border: 1px solid var(--kidearn-border-color, #FCE9DD);
    border-radius: 16px;
    padding: 28px;
    height: 100%;
}

.map-contact-box__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.map-contact-box__item i {
    color: var(--kidearn-primary, #26A6A1);
    font-size: 18px;
    margin-top: 3px;
}

.map-embed-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--kidearn-border-color, #FCE9DD);
    min-height: 320px;
}

.map-embed-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    display: block;
}

/* ---------- Ana sayfa SSS onizleme (mevcut accordion stiliyle uyumlu kapsayici) ---------- */
.home-faq-preview .kidearn-accrodion {
    max-width: 900px;
    margin: 0 auto;
}

/* ---------- Mobil sticky CTA bar ---------- */
.mobile-sticky-cta {
    display: none;
}

@media (max-width: 767px) {
    .mobile-sticky-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        background: #fff;
        box-shadow: 0 -6px 20px rgba(11, 32, 56, 0.12);
        padding: 8px 10px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        gap: 8px;
    }

    .mobile-sticky-cta a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 10px;
        padding: 11px 6px;
        font-size: 12.5px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobile-sticky-cta__call {
        background: var(--kidearn-black, #0B2038);
        color: #fff;
    }

    .mobile-sticky-cta__whatsapp {
        background: #25D366;
        color: #fff;
    }

    .mobile-sticky-cta__visit {
        background: var(--kidearn-base, #F25334);
        color: #fff;
    }

    /* Sticky CTA bar alt boslugu kapatmasin diye body'ye pay birakiyoruz */
    body {
        padding-bottom: 62px;
    }

    /* Mevcut whatsapp balonu ile sticky bar cakismasin diye balonu yukari al */
    .whatsapp-chat-wrapper {
        bottom: 72px !important;
    }
}

/* ---------- Telefon input'lari (type=tel), kidearn.css'in input[type=text]
   ile birebir ayni gorunmesi icin ek stiller (kidearn.css tel tipini hedeflemiyor) ---------- */
.mail-one__form input[type=tel] {
    width: 352px;
    display: block;
    border: none;
    outline: none;
    height: 56px;
    background-color: var(--kidearn-white, #fff);
    color: var(--kidearn-text, #7E8185);
    font-size: 16px;
    font-weight: 500;
    padding-left: 24px;
    padding-right: 20px;
    border-radius: 12px;
    transition: all 500ms ease;
}

@media (max-width: 767px) {
    .mail-one__form input[type=tel] {
        width: 100%;
        margin: 0 0 15px;
    }
}

.mail-one__form input[type=tel]:focus {
    color: var(--kidearn-text, #7E8185);
}

.form-one .bootstrap-select > .dropdown-toggle,
.form-one input[type=tel] {
    display: block;
    width: 100%;
    height: 60px;
    background-color: var(--kidearn-gray, #FAF5F2);
    color: var(--kidearn-text, #7E8185);
    font-size: 16px;
    font-weight: 500;
    border: none;
    outline: none;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 4px;
}

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
    .kidearn-splax,
    .wow {
        animation: none !important;
        transition: none !important;
    }
}
