@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');
/* NYLA marka yazi tipi — logodaki font (Crimson Text). latin-ext: Turkce karakterler */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap&subset=latin,latin-ext');


@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat.ttf') format('truetype');
}

:root {
    /* ---- NYLA marka paleti (musteri marka kiti) ----
     * Lacivert #052a61 · Sari #ffde59 · Kirmizi #bf171a
     * Hex degerler YALNIZCA bu blokta yasar. */

    /* Ana kimlik — lacivert */
    --primary-color: #052a61;
    --primary-color-low: rgba(5, 42, 97, 0.12);
    --primary-color-dark: #031c42;

    /* 2. renk — sari (rozet, vurgu, highlight). Acik zeminde metin/ikon icin -dark */
    --secondary-color: #ffde59;
    --secondary-color-low: rgba(255, 222, 89, 0.24);
    --secondary-color-dark: #a8790a;

    /* 3. renk — bordo (CTA, aktif durum, onemli isaretler) */
    --accent-color: #bf171a;
    --accent-color-low: rgba(191, 23, 26, 0.12);
    --accent-color-dark: #8f1114;

    --tertiary-color: #FFFFFF;
    --tertiary-color-low: rgba(255, 255, 255, 0.6);
    --tertiary-color-dark: #E6E6E6;

    --bg-color: #eceff4;
    --bg-color-low: rgba(236, 239, 244, 0.5);
    --bg-color-dark: #e2e6ee;

    --text-dark: #1a2333;
    --text-dark-low: rgba(26, 35, 51, 0.72);
    --text-dark-dark: #0d1420;

    --text-light: #f7f9fc;
    --text-light-low: rgba(247, 249, 252, 0.7);
    --text-light-dark: #e3e8f0;

    --button-color: #052a61;
    --button-color-low: rgba(5, 42, 97, 0.5);
    --button-color-dark: #031c42;

    --card-bg: #ffffff;
    --card-bg-low: #f5f7fa;
    --smoothline-color: var(--bg-color);

    /* Yazi tipleri */
    --font-display: 'Crimson Text', Georgia, 'Times New Roman', serif;
    --font-ui: 'Sora', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--bg-color);
    color: var(--text-dark);
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: var(--text-dark);
}

i {
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    background-color: transparent;
}

button:focus {
    outline: none;
}

button:active {
    outline: none;
}

button:hover {
    outline: none;
}

ul,
li {
    list-style: none;
    padding: 0;
}

img {
    width: 100%;
    height: auto;
}

h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-dark);
}
h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
}
h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
}
h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
}
h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}
h6 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}


::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

::-webkit-scrollbar-track {
    background-color: var(--bg-color);
}



body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

section {
    display: flex;
    position: relative;
}

.custom-cursor {
    display: none !important;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none; 
    align-items: center;
    justify-content: center;
    background: #ffffff;
    will-change: opacity;
}

.page-loader .loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    will-change: transform, opacity;
    opacity: 0;
}

.page-loader .loader-sprite {
    transform: scale(0.4) rotate(-10deg);
    margin-bottom: -135px;
    margin-top: -115px;
}

.page-loader .loader-logo-text {
    width: 100px;
    height: auto;
    opacity: 0.9;
    margin-top: -10px;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}

.page-loader .loader-bar-track {
    width: 100px;
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.page-loader .loader-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 10px;
    will-change: width;
    box-shadow: 0 0 8px rgba(5, 42, 97, 0.3);
}

.page-loader.loader-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }
}

/* Mobilde InvertedRadius dekorları kapalı (JS ile de kapatılır; yedek kural) */
@media (max-width: 768px) {
    [data-inverted-corner] {
        overflow: hidden !important;
    }

    [data-inverted-corner] [data-corner]:not(.quick-contact-corner):not(.footer-brand-social-inverted) {
        display: none !important;
    }

    [data-shape] {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    .quick-contact-corner[data-corner],
    .footer-brand-social-inverted[data-corner] {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* ===========================================================================
 * NYLA — marka tipografisi
 * Logodaki Crimson Text yalnizca buyuk vitrin basliklarinda kullanilir;
 * arayuz/govde metni Sora + Poppins ile kalir (okunabilirlik icin).
 * ========================================================================= */
.landing-sec .slider-container .slide .slide-content .headline,
.plan-sec .plan-headline,
.roadmap-sec .roadmap-headline,
.services-sec .services-headline,
.partners-sec .partners-title,
.visa-sec .visa-headline,
.testimonial-sec .testimonial-title,
.about-sec .about-title,
.contact-sec .contact-title,
.sss-sec .sssFaqTitle,
.footer-top .footer-top-title,
.headerBanner .headerBanner-title,
.about-page .about-page-heading,
.programs-page .programs-page-group-title,
.programs-page .programs-page-card-title,
.blog-page .blog-page-featured-title,
.blog-detail .blog-detail-title,
.contact-page .contact-page-heading {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* Yildiz derecelendirmeleri altin sari — kirmizi vurgu rengi burada okunmuyor */
.testimonial-sec .tstat-stars i,
.testimonial-sec .tcard-rating i,
.landing-sec .proof-rating i,
.headerBanner .headerBanner-proof-rating i {
    color: var(--accent-color-dark);
}

/* "Neden NYLA" kartlarinda avatar yerine ikon rozeti */
.testimonial-sec .tcard-avatar--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--text-light);
}

.testimonial-sec .tcard-info { min-width: 0; }
.testimonial-sec .tcard-name { line-height: 1.35; }

/* Roadmap illustrasyonlari zaten NYLA paletinde (lacivert + sari) —
 * once uygulanan hue-rotate filtresi onlari yesile ceviriyordu, kaldirildi. */

/* Hero videosu (Times Square) parlak ve yogun — metnin okunmasi icin perde guclendirildi */
.landing-sec .slider-container .slide .slide-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 45, 0.9) 0%,
            rgba(3, 20, 45, 0.72) 38%,
            rgba(3, 20, 45, 0.3) 68%,
            rgba(3, 20, 45, 0.42) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 42, 97, 0.4) 0%,
            rgba(3, 20, 45, 0.25) 45%,
            rgba(3, 20, 45, 0.6) 100%
        );
}

/* Mobil menu icin klonlanan CTA masaustunde gorunmemeli
 * (main.js her genislikte klonluyor; navbar.css yalnizca <=1024 icin stil veriyordu) */
.navbar .nav-center .nav-mobile-cta { display: none; }
@media (max-width: 1024px) {
    .navbar .nav-center .nav-mobile-cta { display: flex; }
}

/* Options kutulari: NYLA fotograflari acik tonlu — metnin okunmasi icin sol tarafa beyaz perde.
 * .optionBox-bg z-index:1 ile kendi yigin baglamini kurdugu icin bu perde icerigin (z:5) altinda kalir. */
.options-sec .optionBox .optionBox-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.32) 38%,
        rgba(255, 255, 255, 0.88) 66%,
        rgba(255, 255, 255, 0.97) 100%
    );
}

/* Fotograflardaki ozne metin alaninin disinda kalsin */
.options-sec .optionBox .optionBox-bg .bg-layer-1 { object-position: center 32%; }

/* Acik zeminde okunurluk */
.options-sec .optionBox .option-desc { color: var(--text-dark); }

/* ===========================================================================
 * NYLA — düzeltmeler ve marka renklerinin görünür kullanımı
 * Palet rolleri: lacivert 1. · sarı 2. · bordo 3.
 * ========================================================================= */

/* ---- Navbar: her zaman beyaz (scroll durumundan bağımsız) + daha büyük logo ---- */
.navbar { padding: 8px 20px; }

.navbar .container {
    background: rgba(252, 252, 252, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.7);
    height: 86px;
    padding: 0 22px;
}

.navbar .nav-link { color: var(--text-dark); }

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primary-color);
    background: var(--primary-color-low);
}

.navbar .nav-btn-ghost { color: var(--text-dark); }
.nav-left .logo img { height: 70px; }

@media (max-width: 1024px) {
    .navbar .container { height: 74px; }
    .nav-left .logo img { height: 58px; }
}

@media (max-width: 768px) {
    .navbar .container,
    .navbar.scrolled .container { height: 60px; padding: 0 12px; }
    .nav-left .logo img { height: 46px; }
}

/* Eski mor markadan kalan gölge rengi temizlendi; CTA bordo */
.nav-btn-primary {
    background: var(--accent-color);
    box-shadow: 0 2px 10px rgba(191, 23, 26, 0.28);
}
.nav-btn-primary:hover {
    background: var(--accent-color-dark);
    box-shadow: 0 4px 18px rgba(191, 23, 26, 0.36);
}

/* ---- 2. renk (sarı): bölüm etiketleri ---- */
.plan-sec .plan-tag .tag-label,
.roadmap-sec .roadmap-tag .tag-label,
.partners-sec .partners-tag .tag-label,
.visa-sec .visa-tag .tag-label,
.testimonial-sec .testimonial-tag .tag-label {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/* Başlık vurgularının altında sarı şerit */
.plan-sec .plan-headline .title-highlight,
.roadmap-sec .roadmap-headline .title-highlight,
.partners-sec .partners-title .title-highlight,
.visa-sec .visa-headline .title-highlight,
.testimonial-sec .testimonial-title .title-highlight,
.services-sec .services-headline .headline-highlight {
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
    background-repeat: no-repeat;
    background-size: 100% 0.26em;
    background-position: 0 92%;
    padding-bottom: 0.04em;
}

/* Numara damgası sarı */
.plan-sec .plan-card-stamp {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/* ---- 3. renk (bordo): birincil CTA'lar ---- */
.landing-sec .slider-btn-primary,
.options-sec .option-btn,
.plan-sec .plan-card-cta-pill,
.footer-sec .footer-top-cta:not(.footer-top-cta--ghost),
.visa-sec .visa-foot-cta,
.sss-sec .sss-cta,
.about-sec .about-cta,
.programs-page-card-body .programs-page-card-cta,
.cform-submit {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.landing-sec .slider-btn-primary:hover,
.options-sec .option-btn:hover,
.plan-sec .plan-card-cta-pill:hover,
.footer-sec .footer-top-cta:not(.footer-top-cta--ghost):hover,
.visa-sec .visa-foot-cta:hover,
.sss-sec .sss-cta:hover,
.about-sec .about-cta:hover,
.programs-page-card-body .programs-page-card-cta:hover,
.cform-submit:hover {
    background: var(--accent-color-dark);
    border-color: var(--accent-color-dark);
    color: #fff;
}

/* Servis okları sarı zemin + lacivert ok */
.services-sec .services-arrow-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--secondary-color);
}

/* ---- Çapa (anchor) kaydırması ----
 * Konumlandırmayı ScrollReset (smooth-scroll.tsx) yapıyor; buradaki
 * scroll-padding/scroll-margin ile üst üste binince hedef 120px aşağı
 * kayıyordu. Native kaydırma yalnızca JS devre dışıyken devreye girsin. */
.programs-page-group,
.programs-page-card { scroll-margin-top: 130px; }

/* ---- "Neden NYLA" şeridi sola yaslansın (290px boşluk fazlaydı) ---- */
.testimonial-sec .testimonial-track {
    padding-left: 60px;
    padding-right: 60px;
}
.testimonial-sec .testimonial-fade { width: 60px; }

@media (max-width: 768px) {
    .testimonial-sec .testimonial-track { padding-left: 20px; padding-right: 20px; }
    .testimonial-sec .testimonial-fade { display: none; }
}

/* ---- Program kartı açıklaması 3 satırda kesiliyordu ---- */
.programs-page-card-desc {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* ---- headerBanner: sabit navbar metnin üstüne biniyordu ---- */
.headerBanner .headerBanner-inner { padding-top: 150px; }

@media (max-width: 768px) {
    .headerBanner .headerBanner-inner { padding-top: 110px; }
}

/* ---- Footer üst bandı: arkadaki görsel yazıyı okunmaz yapıyordu ---- */
.footer-sec .footer-top { position: relative; }

.footer-sec .footer-top-left {
    position: relative;
    z-index: 2;
}

.footer-sec .footer-top-left::before {
    content: "";
    position: absolute;
    inset: -28px -60px -28px -28px;
    z-index: -1;
    border-radius: 20px;
    background: linear-gradient(
        90deg,
        var(--card-bg) 0%,
        var(--card-bg) 62%,
        rgba(255, 255, 255, 0.86) 82%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* ---- İletişim bilgi kutuları içeriği kadar genişlesin ---- */
.contact-sec .contact-info-boxes { align-items: flex-start; }

.contact-sec .contact-info-box {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
    padding-right: 22px;
}

/* ---- Sosyal ikonlar: marka renkleri doygun ---- */
.landing-sec .invertedbox-mini .social-item {
    background: rgba(5, 42, 97, 0.06);
}
.landing-sec .invertedbox-mini .social-item.ig { background: rgba(225, 48, 108, 0.14); }
.landing-sec .invertedbox-mini .social-item.ig i { color: #e1306c; }
.landing-sec .invertedbox-mini .social-item.fb { background: rgba(24, 119, 242, 0.14); }
.landing-sec .invertedbox-mini .social-item.fb i { color: #1877f2; }
.landing-sec .invertedbox-mini .social-item.li { background: rgba(10, 102, 194, 0.14); }
.landing-sec .invertedbox-mini .social-item.li i { color: #0a66c2; }

/* ---- WhatsApp marka rengi (hero + footer + iletişim) ---- */
.landing-sec .invertedbox-mini .social-item.wa { background: rgba(37, 211, 102, 0.16); }
.landing-sec .invertedbox-mini .social-item.wa i { color: #25d366; }
.landing-sec .invertedbox-mini .social-item.wa:hover { background: #25d366; }
.landing-sec .invertedbox-mini .social-item.wa:hover i { color: #fff; }

/* ---- YouTube marka rengi (hero) ----
 * .yt icin landing-sec'te hic kural yoktu: FontAwesome'in dolu youtube glifi
 * zeminden gelen lacivert rengi aliyor ve siyah kutu gibi duruyordu; hover'da
 * da genel `.social-item:hover i { color: #fff }` kuralina dusup acik zeminde
 * kayboluyordu. Diger ikonlarla ayni kalibi veriyoruz. */
.landing-sec .invertedbox-mini .social-item.yt { background: rgba(255, 0, 0, 0.12); }
.landing-sec .invertedbox-mini .social-item.yt i { color: #ff0000; }
.landing-sec .invertedbox-mini .social-item.yt:hover { background: rgba(255, 0, 0, 0.22); }
.landing-sec .invertedbox-mini .social-item.yt:hover i { color: #ff0000; }
.landing-sec .invertedbox-mini .social-item.yt:not([href]):hover { background: rgba(255, 0, 0, 0.12); }
.landing-sec .invertedbox-mini .social-item.yt:not([href]):hover i { color: #ff0000; }

/* ---- Renk karışımı: adım kartlarının hepsi lacivert olmasın ---- */
.roadmap-sec .roadmap-col--final {
    background: var(--secondary-color);
    color: var(--primary-color);
}
.roadmap-sec .roadmap-col--final .roadmap-col-title,
.roadmap-sec .roadmap-col--final .roadmap-col-text,
.roadmap-sec .roadmap-col--final .roadmap-col-list li,
.roadmap-sec .roadmap-col--final .roadmap-col-meta,
.roadmap-sec .roadmap-col--final .roadmap-col-meta i,
.roadmap-sec .roadmap-col--final .roadmap-col-list li i {
    color: var(--primary-color);
}
.roadmap-sec .roadmap-col--final .roadmap-col-badge {
    background: var(--primary-color);
    color: var(--text-light);
}
.roadmap-sec .roadmap-col--final .roadmap-col-badge-num,
.roadmap-sec .roadmap-col--final .roadmap-col-badge-label { color: var(--text-light); }

/* İlk kart bordo aksanlı — üç renk de boardda görünsün */
.roadmap-sec .roadmap-col:first-child .roadmap-col-badge {
    background: var(--accent-color);
    color: #fff;
}
.roadmap-sec .roadmap-col:first-child .roadmap-col-badge-num,
.roadmap-sec .roadmap-col:first-child .roadmap-col-badge-label { color: #fff; }

/* ---- İletişim paneli: görsel üstte, lacivert altta ---- */
.contact-sec .contactBoxAbs .contactBox::after {
    top: 0;
    bottom: auto;
    background-position: center 35%;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.contact-sec .contactBoxAbs .contactBox .contentLeft {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
}

/* ---- Form: "Mesajınız" alanı diğer alanlarla aynı hizada başlasın ---- */
.cform .cform-field--full {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
}

/* ---- Alt sayfalara da sarı/lacivert dengesi ---- */
/* Marka rozeti tek kalip: DOLU sari yuzey + lacivert metin.
 * (Referans: kart uzerindeki "KAMPANYA" rozeti.) Soluk sari dolgu + sari
 * kenarlikli hap varyanti kaldirildi; sitede 999px yaricap da kullanilmiyor. */
.headerBanner .headerBanner-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--secondary-color);
    border: 0;
    color: var(--primary-color-dark);
    font-weight: 700;
}

/* Sayfa ici etiketler de ayni marka rozeti kalibinda:
 * dolu sari yuzey + lacivert metin, 8px yaricap, kenarlik yok. */
.about-page .about-page-tag-label,
.programs-page .programs-page-group-tag,
.blog-page .blog-page-featured-cat {
    display: inline-flex;
    align-items: center;
    width: auto;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--secondary-color);
    border: 0;
    color: var(--primary-color-dark);
}

.about-page .about-page-heading .about-page-heading-accent,
.programs-page .programs-page-group-title span,
.contact-page .contact-page-heading span {
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
    background-repeat: no-repeat;
    background-size: 100% 0.26em;
    background-position: 0 92%;
}

/* Aktif blog filtresi lacivert, diğerleri beyaz; hover sarı */
.blog-page .blog-page-filter:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.blog-page .blog-page-empty {
    grid-column: 1 / -1;
    margin: 32px 0 0;
    padding: 28px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--text-dark-low);
    background: var(--card-bg);
    border-radius: 16px;
}

/* ---- Sosyal ikonlar: yalnızca gerçek bağlantısı olan tıklanabilir görünsün ----
 * Hesap adresleri müşteriden gelmediği sürece href boş; boş bağlantıya
 * "tıklanabilir" görüntüsü vermek yanıltıcı olur. href dolunca imleç,
 * hover ve odak davranışı otomatik olarak devreye girer. */
.landing-sec .invertedbox-mini .social-item[href],
.footer-sec .footer-social[href],
.contact-sec .contact-social[href] {
    cursor: pointer;
}

.landing-sec .invertedbox-mini .social-item:not([href]),
.footer-sec .footer-social:not([href]),
.contact-sec .contact-social:not([href]) {
    cursor: default;
}

.landing-sec .invertedbox-mini .social-item:not([href]):hover,
.footer-sec .footer-social:not([href]):hover,
.contact-sec .contact-social:not([href]):hover {
    transform: none;
}

/* ---- İletişim paneli: görsel alanı yükselsin, başlık görselin üstünde kalsın ---- */
.contact-sec .contactBoxAbs .contactBox::after {
    height: 58%;
    background-image:
        linear-gradient(
            180deg,
            rgba(5, 42, 97, 0.45) 0%,
            rgba(5, 42, 97, 0.2) 38%,
            rgba(5, 42, 97, 0.82) 82%,
            var(--primary-color) 100%
        ),
        url('/uploads/photos/pexels-pixabay-290386.jpg');
    background-size: cover, cover;
    background-position: center, center 30%;
}

/* ---- Sosyal ikonlar footer ve iletişimde de marka renklerinde ---- */
.footer-sec .footer-social.ig i,
.contact-sec .contact-social.ig i { color: #e1306c; }
.footer-sec .footer-social.fb i,
.contact-sec .contact-social.fb i { color: #1877f2; }
.footer-sec .footer-social.wa i,
.contact-sec .contact-social.wa i { color: #25d366; }
.footer-sec .footer-social.yt i,
.contact-sec .contact-social.yt i,
.contact-page-social.yt i { color: #ff0000; }
.footer-sec .footer-social.li i,
.contact-sec .contact-social.li i { color: #0a66c2; }

.footer-sec .footer-social,
.contact-sec .contact-social { background: rgba(255, 255, 255, 0.92); }

.footer-sec .footer-social[href]:hover,
.contact-sec .contact-social[href]:hover { background: #fff; }

/* ---- Footer: tamamı lacivert kalmasın, sarı ile dengelensin ---- */
.footer-sec .footer-col-title {
    position: relative;
    padding-bottom: 10px;
}

.footer-sec .footer-col-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--secondary-color);
}

/* Footer ikon kareleri de marka rozetiyle ayni kalipta:
 * DOLU sari yuzey + lacivert ikon, kenarlik yok. */
.footer-sec .footer-info-icon {
    background: var(--secondary-color);
    color: var(--primary-color-dark);
    border: 0;
}

.footer-sec .footer-mini-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--secondary-color);
    border: 0;
    color: var(--primary-color-dark);
}

.footer-sec .footer-bottom {
    border-top: 2px solid var(--secondary-color);
}

.footer-sec .footer-contact-icon {
    background: var(--secondary-color);
    color: var(--primary-color-dark);
}

/* Sosyal ikonlar footerda da canlı marka renginde (inverted varyant dahil) */
.footer-sec .footer-socials .footer-social.ig i,
.footer-sec .footer-socials--inverted .footer-social.ig i { color: #e1306c; }
.footer-sec .footer-socials .footer-social.fb i,
.footer-sec .footer-socials--inverted .footer-social.fb i { color: #1877f2; }
.footer-sec .footer-socials .footer-social.wa i,
.footer-sec .footer-socials--inverted .footer-social.wa i { color: #25d366; }
.footer-sec .footer-socials .footer-social.yt i,
.footer-sec .footer-socials--inverted .footer-social.yt i { color: #ff0000; }
.footer-sec .footer-socials .footer-social.li i,
.footer-sec .footer-socials--inverted .footer-social.li i { color: #0a66c2; }

.footer-sec .footer-socials .footer-social,
.footer-sec .footer-socials--inverted .footer-social {
    background: #fff;
    border: 1px solid rgba(5, 42, 97, 0.1);
}

/* ---- Sosyal ikon hover ----
 * Footer/iletisim ikonlarinin hover dolgusu asagida (2. tur) #fff'e cekildi;
 * ikonu da beyaza boyayan eski kural beyaz zeminde ikonu gorunmez yapiyordu
 * (ig/fb/li/wa kayboluyor, yt'nin beyaz kurali olmadigi icin duruyordu).
 * Ikon hover'da marka renginde kalir — asagidaki marka renkleri gecerli. */
.footer-sec .footer-social.ig[href]:hover i { color: #e1306c; }
.footer-sec .footer-social.fb[href]:hover i { color: #1877f2; }
.footer-sec .footer-social.wa[href]:hover i { color: #25d366; }
.footer-sec .footer-social.li[href]:hover i { color: #0a66c2; }
.footer-sec .footer-social.yt[href]:hover i { color: #ff0000; }

.contact-sec .contact-social.ig[href]:hover i { color: #e1306c; }
.contact-sec .contact-social.fb[href]:hover i { color: #1877f2; }
.contact-sec .contact-social.wa[href]:hover i { color: #25d366; }
.contact-sec .contact-social.li[href]:hover i { color: #0a66c2; }
.contact-sec .contact-social.yt[href]:hover i { color: #ff0000; }

/* Bağlantısı olmayan ikonda hover dolgusu hiç oluşmasın */
.landing-sec .invertedbox-mini .social-item.ig:not([href]):hover { background: rgba(225, 48, 108, 0.14); }
.landing-sec .invertedbox-mini .social-item.fb:not([href]):hover { background: rgba(24, 119, 242, 0.14); }
.landing-sec .invertedbox-mini .social-item.wa:not([href]):hover { background: rgba(37, 211, 102, 0.16); }
.landing-sec .invertedbox-mini .social-item.li:not([href]):hover { background: rgba(10, 102, 194, 0.14); }

.landing-sec .invertedbox-mini .social-item.ig:not([href]):hover i { color: #e1306c; }
.landing-sec .invertedbox-mini .social-item.fb:not([href]):hover i { color: #1877f2; }
.landing-sec .invertedbox-mini .social-item.wa:not([href]):hover i { color: #25d366; }
.landing-sec .invertedbox-mini .social-item.li:not([href]):hover i { color: #0a66c2; }

.footer-sec .footer-social:not([href]):hover,
.contact-sec .contact-social:not([href]):hover { background: #fff; }

/* ===========================================================================
 * NYLA — geri bildirim düzeltmeleri (2. tur)
 * ========================================================================= */

/* 1) Sosyal ikon hover: koyu dolgu yerine belirgin yükselme + açık marka tonu */
.landing-sec .invertedbox-mini .social-item,
.footer-sec .footer-social,
.contact-sec .contact-social {
    transition: transform 0.22s var(--ease-site, ease), box-shadow 0.22s ease, background 0.22s ease;
}

.landing-sec .invertedbox-mini .social-item:hover,
.footer-sec .footer-social:hover,
.contact-sec .contact-social:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 10px 22px rgba(5, 42, 97, 0.2);
}

/* Hover'da zemin koyulaşmasın; markanın açık tonu biraz doygunlaşsın */
.landing-sec .invertedbox-mini .social-item.ig:hover { background: rgba(225, 48, 108, 0.24); }
.landing-sec .invertedbox-mini .social-item.fb:hover { background: rgba(24, 119, 242, 0.24); }
.landing-sec .invertedbox-mini .social-item.wa:hover { background: rgba(37, 211, 102, 0.26); }
.landing-sec .invertedbox-mini .social-item.li:hover { background: rgba(10, 102, 194, 0.24); }

.landing-sec .invertedbox-mini .social-item.ig:hover i { color: #e1306c; }
.landing-sec .invertedbox-mini .social-item.fb:hover i { color: #1877f2; }
.landing-sec .invertedbox-mini .social-item.wa:hover i { color: #25d366; }
.landing-sec .invertedbox-mini .social-item.li:hover i { color: #0a66c2; }

.footer-sec .footer-social:hover,
.contact-sec .contact-social:hover { background: #fff; }

/* 2) Hero alt bilgi kutusu: rozetler tutarlı, metin sıkışmasın */
.landing-sec .invertedbox-left .avatar {
    background: var(--primary-color);
    border: 2px solid var(--card-bg);
}
.landing-sec .invertedbox-left .avatar i { color: #fff; }

.landing-sec .invertedbox-left .avatar.avatar-count {
    background: var(--secondary-color);
    color: var(--primary-color);
    font-weight: 700;
}

.landing-sec .invertedbox-left .proof-rating .rating-score {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--primary-color);
}

.landing-sec .invertedbox-left .proof-label {
    display: block;
    max-width: 210px;
    line-height: 1.35;
}

.landing-sec .invertedbox-right .location-city { letter-spacing: -0.2px; }
.landing-sec .invertedbox-right .location-tagline { letter-spacing: 0.3px; }

/* 3) Plan accent kartındaki mor geçiş kaldırıldı (eski markadan kalmış) */
.plan-sec .plan-card--accent .plan-card-media::after {
    background: linear-gradient(
        to left,
        transparent 0%,
        rgba(5, 42, 97, 0.55) 50%,
        var(--primary-color) 100%
    );
}

.plan-sec .plan-card--accent { box-shadow: 0 8px 28px rgba(5, 42, 97, 0.22); }
.plan-sec .plan-card--accent:hover { box-shadow: 0 18px 48px rgba(5, 42, 97, 0.3); }

/* 5) "Hedefine Göre Eğitim Programları" üstündeki boşluk azaltıldı */
.services-sec { padding-top: 52px; }

/* 6) Kart görsellerinde yüzler kırpılmasın */
.services-sec .services-panel-media img { object-position: center 26%; }

/* 7) Options kutularında yazı arka plandan net ayrılsın */
.options-sec .optionBox .optionBox-bg::after {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.28) 30%,
        rgba(255, 255, 255, 0.92) 52%,
        rgba(255, 255, 255, 0.99) 100%
    );
}

.options-sec .optionBox .optionBoxcontent { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); }
.options-sec .optionBox .option-title { color: var(--text-dark-dark); }
.options-sec .optionBox .option-features li { color: var(--text-dark); }

/* 8) "2024 Kuruluş" rozeti kaldırıldı — InvertedRadius köşesi bu konumda
 *    sürekli taşıyordu ve bilgi zaten yanındaki metinde geçiyor. */

/* 9 + 10) Hakkımızda sayfasındaki fazla üst boşluklar */
.about-page-mission { padding-top: 56px; }
.about-page-why { padding-top: 56px; }

/* ---- Kart ikonlarına hover: büyüsün ve sarıya dönsün ---- */
.visa-sec .visa-step-icon,
.sss-sec .sss-stat-icon,
.footer-sec .footer-info-icon,
.options-sec .centerBox-icon,
.testimonial-sec .tcard-avatar--icon,
.contact-sec .cinfo-icon {
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
        box-shadow 0.25s ease;
}

.visa-sec .visa-step:hover .visa-step-icon,
.sss-sec .sss-stat-card:hover .sss-stat-icon,
.footer-sec .footer-info-card:hover .footer-info-icon,
.options-sec .centerBox:hover .centerBox-icon,
.testimonial-sec .testimonial-card:hover .tcard-avatar--icon,
.contact-sec .contact-info-box:hover .cinfo-icon {
    background: var(--secondary-color);
    color: var(--primary-color);
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(255, 222, 89, 0.45);
}

.visa-sec .visa-step:hover .visa-step-icon i,
.sss-sec .sss-stat-card:hover .sss-stat-icon i,
.footer-sec .footer-info-card:hover .footer-info-icon i,
.options-sec .centerBox:hover .centerBox-icon i,
.testimonial-sec .testimonial-card:hover .tcard-avatar--icon i,
.contact-sec .contact-info-box:hover .cinfo-icon i {
    color: var(--primary-color);
}

/* ===========================================================================
 * MOBİL DÜZELTMELERİ (≤768px)
 * ========================================================================= */
@media (max-width: 768px) {
    /* --- Anasayfa "Nasıl başlıyoruz" kartları ---------------------------
     * Mobilde foto alanı 200px'e düşüyordu; dikey portre (01) ve ayakta
     * duran öğretmen (03) çerçeveden taşıyordu. Alan biraz yükseltilip
     * kırpma noktası özneye göre ayarlandı. */
    .plan-sec .plan-card-media {
        min-height: 280px;
    }

    /* 01 — öğrencinin yüzü üst bantta; tepeden kırpılmasın */
    .plan-sec .plan-grid .plan-card:nth-child(1) .plan-card-media img {
        object-position: 50% 4%;
    }

    /* 03 — dar ekranda kadraj kisaldigi icin `50% 70%` fotografin altini
     * (masa ve bacaklar) gosteriyordu; ustten hizalanip ogretmen ve tahta
     * kadraja aliniyor. */
    .plan-sec .plan-grid .plan-card:nth-child(3) .plan-card-media img {
        object-position: 50% 0%;
    }

    /* --- Referanslar: 3 istatistik tek satırda ------------------------- */
    .partners-sec .partners-stats {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 14px 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .partners-sec .partners-stat {
        min-width: 0;
    }

    .partners-sec .partners-stat-value {
        font-size: 17px;
        letter-spacing: -0.4px;
    }

    .partners-sec .partners-stat-label {
        font-size: 10px;
        line-height: 1.3;
        white-space: normal;
    }

    .partners-sec .partners-stat-divider {
        height: 32px;
    }

    /* --- Footer: sosyal ikonlar logoya yapışmasın ---------------------- */
    .footer-sec .footer-brand-social-inverted {
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* --- Footer: alt şeritten sonraki fazla boşluk --------------------- */
    .footer-sec .footer-bottom {
        padding: 14px 14px 14px;
        gap: 12px;
    }

    /* FAB için ayrılan alt boşluk kaldırıldı. Buton sağ alt köşede sabit;
     * alt linkler ortalı ve son satır kısa olduğu için üstlerine binmiyor,
     * yalnızca kartın sağ alt köşesinin üzerinde duruyor. */
    .footer-sec {
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------------------------
 * Hero videosu tam genişliği kaplasın.
 *
 * `.bg-video` kuralı `inset: -5%` + `width/height: 110%` veriyor (Ken Burns
 * payı). Ama Tailwind preflight'ın `img, video { max-width: 100% }` kuralı
 * genişliği %100'e kırpıyordu: video sola -5% kayıyor, sağda o kadar boşluk
 * kalıyordu (1802px ekranda 88px ölçüldü).
 *
 * Yalnızca hero videosunu hedefliyoruz; sayfadaki diğer video/görseller
 * preflight davranışını korur.
 * ------------------------------------------------------------------------- */
.landing-sec .slider-container .slide .bg-video {
    max-width: none;
    max-height: none;
}

/* ---------------------------------------------------------------------------
 * Hero künyesi (sağ alt çentikli kutu) — üç sütunlu bilgi şeridi.
 *
 * Eski hâlinde dekoratif avatar daireleri ve dengesiz bir iki sütun vardı.
 * Artık üç eşit sütunda üç somut bilgi: dil sayısı · CEFR aralığı · format.
 * Dış çentik (::before/::after radial maske) aynen korunuyor.
 * ------------------------------------------------------------------------- */

.landing-sec .slider-inverted-corner { width: 440px; }

.landing-sec .slider-inverted-corner .invertedbox {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    padding: 0 4px;
}

.landing-sec .hero-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 16px 8px;
    text-align: center;
    min-width: 0;
}

.landing-sec .hero-fact-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(5, 42, 97, 0.08);
    color: var(--primary-color);
}

.landing-sec .hero-fact strong {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.1;
    color: var(--primary-color);
}

.landing-sec .hero-fact > span:last-child {
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-dark-low);
}

.landing-sec .hero-fact-sep {
    width: 1px;
    align-self: center;
    height: 46px;
    background: rgba(5, 42, 97, 0.1);
}

/* Ortadaki sütun sarı ile işaretli — markanın 2. rengi burada da görünsün */
.landing-sec .hero-fact:nth-child(3) .hero-fact-icon {
    background: var(--secondary-color);
    color: var(--primary-color);
}

@media (max-width: 1024px) {
    .landing-sec .slider-inverted-corner { width: 380px; }
    .landing-sec .hero-fact { padding: 14px 6px; }
    .landing-sec .hero-fact strong { font-size: 15px; }
}

/* ===========================================================================
 * Hero — 769–1024 px arası düzeltmeleri
 *
 * Bu aralıkta hero kısalıyor ve mutlak konumlu iki kutu sıkışıyordu:
 *   · Sosyal medya pill'i "Ücretsiz Seviye Tespiti" butonunun üstüne biniyordu.
 *   · Her iki kutunun sahte çentiği (::before/::after ile sayfa zeminini
 *     boyayan radyal gradyan katmanı) video üzerine düşünce beyaz leke gibi
 *     görünüyordu — o numara yalnızca kutu sayfa zeminine değdiğinde çalışır.
 *
 * 768 px ve altında her iki kutu zaten index.css'te gizleniyor (mevcut
 * tasarım kararı), bu yüzden kurallar 769 px'ten başlatıldı.
 * ========================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Sosyal ikonlar footer ve iletişim bölümünde de var; dar hero'da
       CTA ile çakışmaması için burada gizleniyor. */
    .landing-sec .slider-inverted-right { display: none; }

    /* Künye kutusu: sahte çentik yerine düz yuvarlak kart.
     * right/bottom, .landing-sec'in 10px'lik dolgusuna esitlenir; boylece kutu
     * hero kartinin sag alt kosesine tam yapisir ve arada video seridi
     * gorunmez. (Mutlak konum .landing-sec'in DOLGU kutusuna gore hesaplanir:
     * 0-1024; kartin sag kenari ise 1014'te.) */
    .landing-sec .slider-inverted-corner {
        width: min(420px, calc(100% - 20px));
        height: auto;
        right: 10px;
        bottom: 20px;
        padding: 0;
        background: transparent;
        border-top-left-radius: 0;
    }

    .landing-sec .slider-inverted-corner::before,
    .landing-sec .slider-inverted-corner::after { content: none; }

    .landing-sec .slider-inverted-corner .invertedbox {
        height: auto;
        border-radius: 18px;
        /* Alt sag kose hero kartinin yaricapiyla ayni olsun ki kose disina tasmasin */
        border-bottom-right-radius: 20px;
        box-shadow: 0 12px 32px rgba(3, 20, 45, 0.26);
    }

    /* CTA'lar künye kutusunun altına girmesin */
    .landing-sec .slider-container .slide .slide-content .cta-group {
        margin-bottom: 150px;
    }
}

/* ===========================================================================
 * 1025–1100 px arası düzen düzeltmeleri
 *
 * Bu aralıkta birkaç bölüm ya tek sütuna düşüyor ama içerik yarım genişlikte
 * kalıyor, ya da ızgarada boş hücre bırakıyordu. Kırılım noktaları içeriğin
 * gerçekten sıkıştığı yere (900 px) çekildi; renk ve ölçüler değişmedi.
 * ========================================================================= */

/* --- Hero: kısa ekranda başlık navbar'ın altına giriyordu ---
 * İçerik dikeyde ortalı; viewport alçalınca üst kenar navbar'ın arkasına
 * kayıyor (600 px yükseklikte etiket navbar'ın 5 px altında ölçüldü).
 * Yükseklik tabanlı kural: kısa ekranda ortalamayı bırak, üstten güvenli
 * boşlukla başlat. Uzun ekranlarda görünüm aynı kalır. */
@media (max-height: 720px) {
    .landing-sec .slider-container .slide .slide-content {
        justify-content: flex-start;
        padding-top: 128px;
    }
}

@media (max-height: 720px) and (max-width: 768px) {
    .landing-sec .slider-container .slide .slide-content { padding-top: 104px; }
}

/* --- Hakkimizda: 900 px altinda gorsel metin blogunun genisligini alsin ---
 *
 * 901-1024 arasi gorsel yanda duruyor (asagidaki blok). 900 px'in altinda
 * izgara tek sutuna dusuyor ve orada gorsel `max-width: 520px; margin: 0 auto`
 * ile metinden dar ve ortali kaliyordu; kenarlari metin blogunu tutmadigi
 * icin altta yuzuyor gibi goruluyordu. Ayni genislige cekildi.
 *
 * Oran 4/3'ten 16/10'a aliniyor: tam genislikte 4/3 (~545 px) bolumu
 * gereksiz uzatiyordu, 16/10 dengeli bir bant veriyor. */
@media (max-width: 900px) {
    .about-sec .about-media {
        max-width: none;
        margin: 0;
        justify-self: stretch;
        aspect-ratio: 16 / 10;
    }
}

/* --- Hakkımızda: görsel yazının yanında kalsın --- */
@media (min-width: 901px) and (max-width: 1024px) {
    .about-sec .about-container {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 36px;
        align-items: center;
    }

    .about-sec .about-copy {
        order: 0;
        max-width: none;
        padding-right: 0;
    }

    .about-sec .about-media {
        max-width: none;
        margin: 0;
        justify-self: stretch;
    }
}

/* --- Referanslar: metin ve logo şeridi yan yana kalsın --- */
@media (min-width: 901px) and (max-width: 1024px) {
    .partners-sec .partners-inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 28px;
        padding: 36px 0 36px 32px;
    }

    .partners-sec .partners-strip { height: 420px; padding-right: 20px; }

    /* Uc kolon bu genislige sigsin; logolar kart kenarinda kesilmesin */
    .partners-sec .partner-logo { height: 52px; max-width: 124px; }
}

/* 900 px altinda serit kisaliyor; kolon sayisi 540 px'e kadar 3 kaliyor.
 *
 * Buradaki `:nth-of-type(3)` kurali KALDIRILDI cunku yanlis elemani
 * gizliyordu: `.partners-strip`in ilk iki cocugu `.partners-strip-fade`
 * div'leri, uc kolon da div. `:nth-of-type` sinifa degil ETIKETE gore
 * saydigi icin 3. div = BIRINCI logo kolonu oluyordu. Sonuc: 768 px'de
 * uc kolondan ilki gizleniyor, geriye kalan ikisi seridi dolduramayip
 * saginda genis bir bosluk birakiyordu. */
@media (max-width: 900px) {
    .partners-sec .partners-strip { height: 320px; }
}

/* --- Yurt dışı danışmanlık --- */

/* Üç kart iki sütuna düşünce alt sırada tek kart kalıyordu; üç sütun
   900 px'e kadar korunuyor, sonra tek sütuna iniyor. */
@media (min-width: 901px) and (max-width: 1100px) {
    .visa-sec .visa-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .visa-sec .visa-step {
        border-right: 1px solid rgba(0, 0, 0, 0.06);
        border-bottom: none;
    }

    .visa-sec .visa-step:last-child { border-right: none; }
    .visa-sec .visa-step:nth-child(2n) { border-right: 1px solid rgba(0, 0, 0, 0.06); }
}

@media (min-width: 901px) and (max-width: 1024px) {
    /* Başlık iki sütun kalsın; tek sütuna düşünce sağ taraf boş kalıyordu */
    .visa-sec .visa-header {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 32px;
        align-items: end;
    }
}

@media (max-width: 900px) {
    .visa-sec .visa-board { grid-template-columns: minmax(0, 1fr); }

    .visa-sec .visa-step {
        border-right: none !important;
        border-bottom: 2px solid var(--bg-color);
    }

    .visa-sec .visa-step:last-child { border-bottom: none; }
}

/* --- Neden NYLA: üst blok ile alttaki şerit aynı hizadan başlasın ---
 * Şerit için verdiğim 60 px yan boşluk, başlığın 24 px'lik boşluğuyla
 * uyuşmuyordu; üst ve alt kopuk görünüyordu. */
@media (max-width: 1024px) {
    .testimonial-sec .testimonial-track {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Fotograf orani korunsun: 100% verince kart devlesiyordu.
     *
     * Yukseklik icin `max-height` yetmiyordu: kartin kesin bir yuksekligi
     * olmayinca img'deki height:100% "auto"ya cozuluyor, foto kendi dogal
     * oranini aliyor ve max-height yalnizca alt kismini kirpiyordu (kadraj
     * rastgele). `aspect-ratio` kesin bir yukseklik uretiyor; boylece
     * height:100% + object-fit:cover gercekten calisiyor ve foto genislige
     * gore orantili, kisa bir bant olarak duruyor. */
    .testimonial-sec .testimonial-info-card { max-width: 520px; }

    .testimonial-sec .tinfo-card-main {
        height: auto;
        max-height: none;
        aspect-ratio: 21 / 9;
    }

    .testimonial-sec .tinfo-photo { height: 100%; object-fit: cover; }
}

@media (max-width: 768px) {
    .testimonial-sec .testimonial-header { padding: 0 16px; }

    .testimonial-sec .testimonial-track {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------------------------------------------------------------------------
 * Footer marka paneli — 641–1200 px arası iki sütun.
 *
 * Bu aralıkta .footer-main tek sütuna düşüyor ve panel tam genişlik alıyor;
 * logo, açıklama ve iletişim listesi solda alt alta dizilip sağ tarafı boş
 * bırakıyordu. İletişim bilgileri sağ sütuna alındı.
 * Sosyal ikonlar sağ üstteki köşe kutusunda durduğu için sağ sütun onun
 * altından başlıyor.
 * ------------------------------------------------------------------------- */

@media (min-width: 641px) and (max-width: 1200px) {
    .footer-sec .footer-brand-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 32px;
        row-gap: 14px;
        align-content: start;
        padding-right: 24px;
    }

    .footer-sec .footer-logo-link { grid-column: 1; grid-row: 1; }
    .footer-sec .footer-brand-desc { grid-column: 1; grid-row: 2; margin-bottom: 0; }

    .footer-sec .footer-contact-list {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 72px; /* sağ üstteki sosyal köşe kutusunun altından başla */
        align-self: start;
    }
}

/* Footer alt barı: "Kaktüs Yazılım tarafından geliştirilmiştir" satırı
 * 1200 px altında sağa taşıp kırpılıyordu. Grup artık kendi içinde
 * sarabiliyor ve daralabiliyor. */
@media (max-width: 1200px) {
    .footer-sec .footer-bottom { row-gap: 10px; }

    .footer-sec .footer-copy,
    .footer-sec .footer-developer,
    .footer-sec .footer-bottom-links { min-width: 0; }

    .footer-sec .footer-developer {
        flex-wrap: wrap;
        justify-content: flex-end;
        text-align: right;
        flex: 1 1 auto;
    }
}

@media (max-width: 860px) {
    .footer-sec .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-sec .footer-developer { justify-content: flex-start; text-align: left; }
}


/* ---------------------------------------------------------------------------
 * Options kartlari — dar ekranda ust bolgede metin okunmuyordu
 *
 * Perde yukaridan asagi aciliyor (ust %6 opaklik). Genis ekranda rozet ve
 * baslik fotografin acik ust kismina denk geldigi icin sorun cikmiyordu; 768
 * px'de kart daralip metin yukari toplaninca "COCUK" rozeti ve baslik dogrudan
 * parlak/hareketli fotografin uzerine biniyor ve okunmuyordu. Perdenin ust
 * ucu bu yuzden mobilde guclendirildi; alt kisim aynen kaliyor.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .options-sec .optionBox .optionBox-bg::after {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.66) 0%,
            rgba(255, 255, 255, 0.72) 28%,
            rgba(255, 255, 255, 0.93) 58%,
            rgba(255, 255, 255, 0.99) 100%
        );
    }
}

/* ===========================================================================
 * Scroll performansı
 *
 * `.navbar .container` sabit konumlu ve backdrop-filter: blur(20px)
 * saturate(180%) taşıyordu. Sabit bir elemandaki backdrop-filter, sayfa
 * kaydıkça arkasındaki içeriği HER KAREDE yeniden bulanıklaştırır — kaydırma
 * takılmasının en yaygın sebebi.
 *
 * Navbar zaten her zaman beyaz (0.96 alfa) olduğu için bulanıklığın görsel
 * katkısı yok denecek kadar azdı. Zemin tam opak yapıldı, filtre kaldırıldı.
 * ========================================================================= */

.navbar .container {
    background: #fcfcfc;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Giriş animasyonu bir kez oynuyor; kalıcı katman terfisine gerek yok */
.landing-sec .slider-btn { will-change: auto; }

/* Gizli yükleyici katman tutmasın */
.page-loader,
.page-loader .loader-content,
.page-loader .loader-bar-fill { will-change: auto; }

/* Logo şeridi ekran dışındayken dönmesin (home.js sınıfı ekler/kaldırır) */
.partners-sec.is-idle .partners-col-track { animation-play-state: paused; }

/* Sınıf fotoğrafında öğretmenin başı kırpılıyordu — üstten hizala */
.plan-sec .plan-card-media img { object-position: center top; }

/* ---------------------------------------------------------------------------
 * Eğitim panelleri — dar ekranda metin alanı fazla yer kaplıyordu.
 * Boşluklar ve punto bir kademe kısıldı; içerik aynı.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .services-sec .services-panel-copy {
        padding: 20px 18px 22px;
        gap: 10px;
    }

    .services-sec .services-title { font-size: 19px; }
    .services-sec .services-text { font-size: 13.5px; line-height: 1.6; }
    .services-sec .services-features li { font-size: 13px; }
    .services-sec .services-features { gap: 7px; }
    .services-sec .services-tags { gap: 6px; }
    .services-sec .services-tag { font-size: 11px; padding: 5px 10px; }
    .services-sec .services-panel-foot { padding-top: 12px; }
    .services-sec .services-index { font-size: 12px; }
}

/* Eğitim panelleri: görsele daha çok alan, metin bloğuna daha az.
 * Fotoğraflarda yüzler üst yarıda; kırpma merkezi yukarı alındı. */
.services-sec .services-panel-media img { object-position: center 22%; }

@media (max-width: 900px) {
    .services-sec .services-panel-media { min-height: 280px; max-height: 340px; }
}

@media (max-width: 768px) {
    .services-sec .services-panel-media { min-height: 250px; max-height: 300px; }
    .services-sec .services-panel-copy { padding: 18px 16px 20px; }
}

/* ---------------------------------------------------------------------------
 * "Neden NYLA" — 768 px altında üstteki görsel tam genişlik, yazı ortalı.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .testimonial-sec .testimonial-header {
        align-items: center;
        text-align: center;
    }

    .testimonial-sec .testimonial-header-left {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .testimonial-sec .testimonial-header-right { width: 100%; }

    .testimonial-sec .testimonial-info-card {
        width: 100%;
        max-width: none;
    }

    .testimonial-sec .tinfo-card-main { max-height: 220px; }
}


/* ---------------------------------------------------------------------------
 * Kucuk telefonlarda (<=480px) iletisim kartlari
 *
 * 375px'te metin kutuya gore buyuk kaliyor, en uzun deger olan e-posta
 * adresi kelime ortasindan boluniyordu. Ikon ve dolgular kuculunce metin
 * sutunu genisliyor, punto da bir kademe iniyor.
 *
 * NOT: Bu kurallar bilerek style.css'te — index.css'teki ayni secicili
 * kural bu dosyadan once yuklendigi icin oradaki override ezilmiyordu.
 * ------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .contact-sec .contact-info-box {
        gap: 10px;
        padding: 12px;
        /* Genis ekrandaki 22px'lik sag nefes payi burada metinden calıyordu */
        padding-right: 12px;
    }

    .contact-sec .cinfo-icon {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .contact-sec .cinfo-icon i { font-size: 13px; }

    .contact-sec .cinfo-label {
        font-size: 9.5px;
        letter-spacing: 0.8px;
    }

    .contact-sec .cinfo-value {
        font-size: 11.5px;
        line-height: 1.5;
    }
}