/* ==========================================================================
   ŞENLİK KATMANI — edusoftkids.com  ·  logo paleti + premium tasarım
   Temel stil `css/style.css` içinde kalır; bu dosya SONRA yüklenir ve
   renk/derinlik/animasyon katmanını üstüne bindirir. Geri almak için
   sayfalardan iki satır (link + script) silmek yeterlidir.

   PALET — doğrudan uygulama logosundan örneklendi (`images/logo.png`):
     kraliyet mavisi #013c97 (baskın) · turkuaz #00a9d0 · altın #fec403
     yeşil #439d2f · fıstık #7ab318 · mercan #ef5173 · magenta #d73f74
     mor #72409b · turuncu #fe8202
   Omurga: derin mavi + altın (premium ikili). Diğer logo renkleri ikon/
   rozet/kart vurgusu olarak ölçülü kullanılır — zemin değil.

   Bölümler:
     0. Token ekleri + temel değişkenlerin yeniden tanımı
     1. Taban rötuşları (odak, seçim, tipografi, doku)
     2. Animasyon tanımları
     3. Görünürlük (reveal)
     4. Dekor: yüzen şekil / kabarcık / dalga ayraç
     5. Başlık, nav, okuma ilerleme çubuğu
     6. Hero (derin mavi aurora)
     7. Kayan şerit
     8. İstatistik bandı
     9. Kartlar
    10. Butonlar
    11. SSS, footer, sayfa banner'ı, formlar
    12. Yüzen butonlar
    13. Responsive
    14. prefers-reduced-motion
    15. Gösteri katmanı (degradeler + dikkat çeken hareket)
    16. Alt sayfalar (banner, hukuki sayfalar, 404, referans kartları)
    17. İkon sistemi + mağaza rozetleri + güven şeridi
    18. Hareket katmanı (sayfa geçişi, akordeon, manyetik buton, imleç,
        kaydırmaya bağlı hareket, form cilası) — kendi reduced-motion bloğu var
    19. Cila (içeriğe atla, kaydırma çubuğu, tipografi, banner açılışı)
    20. Canlı katman (telefonda akan bildirim, kaydırma ilerleme halkası,
        hıza duyarlı şerit, sayaç parıltısı, paralaks) — kendi r-m bloğu var
   ========================================================================== */

/* ------------------------------------------------------------------ 0. TOKEN */
:root {
    /* --- logo renkleri (ham) --- */
    --logo-mavi:    #013c97;
    --logo-mavi-2:  #005ca4;
    --logo-turkuaz: #00a9d0;
    --logo-altin:   #fec403;
    --logo-yesil:   #439d2f;
    --logo-fistik:  #7ab318;
    --logo-mercan:  #ef5173;
    --logo-magenta: #d73f74;
    --logo-mor:     #72409b;
    --logo-turuncu: #fe8202;

    /* --- rol renkleri --- */
    --mavi-900: #041c46;
    --mavi-800: #062a63;
    --mavi-700: #073583;
    --mavi-600: #0a4fb0;
    --mavi-500: #1668d6;
    --mavi-100: #dbe8fb;
    --mavi-50:  #eef4fe;

    --altin-600: #c99400;
    --altin-500: #fec403;
    --altin-300: #ffdf7a;
    --altin-100: #fff3cd;

    --murekkep:  #0a1b3d;   /* metin */
    --murekkep-2:#47597e;   /* ikincil metin — beyaz üstünde 7:1 */
    --kagit:     #f6f9fe;   /* hafif mavi kırık beyaz */
    --hat:       #e3eaf6;   /* ince ayraç */

    /* --- TEMEL DEĞİŞKENLERİN YENİDEN TANIMI ---
       style.css'in tamamı bu değişkenleri kullandığı için palet buradan
       tek noktadan döner: turuncu/lacivert şema → logo mavisi + altın. */
    --primary:      #073583;
    --primary-dark: #041c46;
    --primary-light:#0a4fb0;
    --accent:       #0a4fb0;   /* vurgu = marka mavisi (beyaz yazıyla 7.9:1) */
    --accent-dark:  #073583;
    --accent-light: #7fb2f2;
    --peach:        #dbe8fb;   /* eski şeftali → açık mavi */
    --peach-light:  #eef4fe;
    --blue:   #0a4fb0;
    --green:  #439d2f;
    --red:    #ef5173;
    --teal:   #00a9d0;
    --yellow: #fec403;
    --pink:   #d73f74;
    --purple: #72409b;

    --text:  #0a1b3d;
    --muted: #47597e;
    --border:#e3eaf6;
    --bg:      #ffffff;
    --bg-soft: #f6f9fe;
    --bg-tag:  #eef4fe;

    /* katmanlı, marka rengiyle tonlanmış gölgeler (premium derinlik) */
    --shadow-sm: 0 1px 2px rgba(4,28,70,.06), 0 4px 14px rgba(4,28,70,.05);
    --shadow-md: 0 2px 6px rgba(4,28,70,.06), 0 16px 38px rgba(4,28,70,.09);
    --shadow-lg: 0 4px 10px rgba(4,28,70,.07), 0 30px 70px rgba(4,28,70,.14);
    --golge-altin: 0 10px 30px rgba(201,148,0,.28);

    --grad-hero:   linear-gradient(180deg, #f6f9fe 0%, #ffffff 100%);
    --grad-hero-2: linear-gradient(180deg, #eef4fe 0%, #ffffff 100%);
    --grad-soft:   linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%);
    --grad-btn:    linear-gradient(120deg, #0a4fb0 0%, #073583 100%);
    --grad-footer: linear-gradient(180deg, #f6f9fe 0%, #ffffff 100%);
    --grad-cta-blue:  linear-gradient(140deg, #1668d6 0%, #073583 100%);
    --grad-cta-green: linear-gradient(140deg, #7ab318 0%, #2f7d24 100%);
    --grad-cta-red:   linear-gradient(140deg, #ef5173 0%, #c02a58 100%);
    --grad-cta-teal:  linear-gradient(140deg, #00a9d0 0%, #017a99 100%);

    /* logo renklerinin ikili (duotone) degradeleri — ikon/rozet/kart için */
    --g-mavi:    linear-gradient(140deg, #2f7bea 0%, #013c97 100%);
    --g-turkuaz: linear-gradient(140deg, #35d3ef 0%, #0089ab 100%);
    --g-altin:   linear-gradient(140deg, #ffe27a 0%, #f0a500 100%);
    --g-yesil:   linear-gradient(140deg, #9ede5c 0%, #2f7d24 100%);
    --g-mercan:  linear-gradient(140deg, #ff8fa3 0%, #d33257 100%);
    --g-mor:     linear-gradient(140deg, #b085ec 0%, #5b2d8a 100%);

    /* premium detay degradeleri */
    --grad-derin:  linear-gradient(155deg, #062a63 0%, #073583 45%, #0a4fb0 100%);
    --grad-altin:  linear-gradient(120deg, #ffdf7a 0%, #fec403 45%, #e0a800 100%);
    --grad-marka:  linear-gradient(90deg, #073583, #0a4fb0, #00a9d0, #7ab318, #fec403, #ef5173, #72409b);
    --grad-baslik: linear-gradient(100deg, #0a4fb0 0%, #72409b 55%, #c02a58 100%);

    /* ince kumaş dokusu — düz zeminde "kâğıt" hissi verir */
    --doku: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>");
    --nokta: radial-gradient(circle, rgba(7,53,131,.06) 1.5px, transparent 1.6px);

    --wave-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,80 L0,46 C90,2 210,78 330,54 C450,30 545,-10 690,12 C830,34 960,76 1085,48 C1125,39 1165,32 1200,28 L1200,80 Z'/></svg>");

    --ease-yumusak: cubic-bezier(.22,.61,.36,1);
    --ease-pop: cubic-bezier(.34,1.4,.64,1);
    --transition: .28s cubic-bezier(.22,.61,.36,1);
}

/* -------------------------------------------------------- 1. TABAN RÖTUŞLARI */
body {
    background: #ffffff;
    color: var(--murekkep);
}

::selection { background: var(--mavi-600); color: #fff; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--mavi-600);
    outline-offset: 3px;
    border-radius: 10px;
}

h1, h2, h3, h4 { letter-spacing: -.02em; color: var(--mavi-900); }
p { color: var(--murekkep-2); }

/* Başlık vurgusu: mavi → mor → magenta (beyaz üstünde okunur kalır) */
.highlight,
.gradient-text {
    background: var(--grad-baslik);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 100%;
    animation: kaydirRenk 12s ease-in-out infinite;
}

/* Bölüm başlığı altında ince altın çizgi */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -16px;
    width: 76px; height: 3px;
    margin-left: -38px;
    border-radius: 2px;
    background: var(--grad-altin);
    box-shadow: 0 2px 10px rgba(201,148,0,.35);
}
.section-head.left h2::after { left: 0; margin-left: 0; }

/* Bölüm etiketi: beyaz kart + altın hat */
.section-tag {
    background: #fff;
    color: var(--mavi-700);
    border: 1px solid var(--hat);
    box-shadow: var(--shadow-sm);
    letter-spacing: .14em;
    font-size: .72rem;
    padding: 8px 18px;
    position: relative;
}
.section-tag::before {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-altin);
}
.section-tag.light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }

/* ---------------------------------------------------- 2. ANIMASYON TANIMLARI */
@keyframes yuz        { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes yuzYavas   { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-22px) rotate(5deg) } }
@keyframes nefes      { 0%,100% { transform: scale(1) } 50% { transform: scale(1.03) } }
@keyframes kaydirRenk { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@keyframes kabarcik   { 0% { transform: translateY(0) scale(.6); opacity: 0 }
                        12% { opacity: .55 }
                        100% { transform: translateY(-160px) scale(1.1); opacity: 0 } }
@keyframes serit      { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes parla      { 0% { transform: translateX(-130%) rotate(16deg) } 100% { transform: translateX(340%) rotate(16deg) } }
@keyframes isilti     { 0%,100% { opacity: .45; transform: scale(.85) } 50% { opacity: 1; transform: scale(1.1) } }
@keyframes kelimeDon  { 0%,26% { transform: translateY(0) }
                        33%,59% { transform: translateY(-33.333%) }
                        66%,92% { transform: translateY(-66.666%) }
                        100% { transform: translateY(0) } }
@keyframes damla      { from { transform: translateY(-10px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes halka      { 0% { transform: scale(.9); opacity: .5 } 100% { transform: scale(1.5); opacity: 0 } }

/* ---------------------------------------------------- 3. GÖRÜNÜRLÜK (REVEAL) */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease-yumusak), transform .7s var(--ease-yumusak);
    transition-delay: var(--gecikme, 0ms);
    will-change: transform, opacity;
}
[data-reveal].gorunur { opacity: 1; transform: none; }
[data-reveal="sol"] { transform: translateX(-30px); }
[data-reveal="sag"] { transform: translateX(30px); }
[data-reveal="pop"] { transform: scale(.9); }

/* ------------------------------------------------------------- 4. DEKOR */
.dekor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.dekor .sekil {
    position: absolute;
    border-radius: 50%;
    opacity: .4;
    filter: blur(.3px);
    animation: yuzYavas 12s ease-in-out infinite;
}
.dekor .sekil.kare { border-radius: 26%; }
.dekor .sekil.yildiz {
    border-radius: 0;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.6l3 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.4 5.7 21l1.5-7.1L1.8 9l7.2-.8z'/></svg>") no-repeat center/contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.6l3 6.6 7.2.8-5.4 4.9 1.5 7.1L12 17.4 5.7 21l1.5-7.1L1.8 9l7.2-.8z'/></svg>") no-repeat center/contain;
}
.dekor .sekil.bulut {
    border-radius: 0;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'><path d='M52 30H14A12 12 0 0 1 14 8a15 15 0 0 1 28-2 10 10 0 0 1 10 24z'/></svg>") no-repeat center/contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'><path d='M52 30H14A12 12 0 0 1 14 8a15 15 0 0 1 28-2 10 10 0 0 1 10 24z'/></svg>") no-repeat center/contain;
}
.dekor .kabarcik {
    position: absolute;
    bottom: -30px;
    border-radius: 50%;
    opacity: 0;
    animation: kabarcik linear infinite;
}
/* Koyu zeminde dekor: yarı saydam renkler mavi üstünde çamurlaşıyordu.
   (`mix-blend-mode` işe yaramaz — `.dekor` z-index:0 ile kendi yığın bağlamını
   kurar, karışacağı zemin şeffaf kalır.) Onun yerine parlaklık/doygunluk. */
.hero .dekor .sekil,
.page-banner .dekor .sekil { filter: saturate(1.55) brightness(1.35); }
.hero .dekor .sekil { opacity: .72; }
.hero .dekor .kabarcik { filter: saturate(1.4) brightness(1.3); }
.page-banner .dekor .sekil { opacity: .3; }

/* Dalga tepe — bölüm kendi rengiyle bir öncekinin üstüne biner */
.dalga-tepe { position: relative; }
.dalga-tepe::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -52px;
    height: 54px;
    background: var(--bolum-bg, #fff);
    /* Longhand: maske KONUMU animasyonla kaydırılacak (öğe kutusu büyümez →
       yatay taşma olmaz; `left/right: -8%` denemesi sayfayı 85px genişletmişti). */
    -webkit-mask-image: var(--wave-mask);
    mask-image: var(--wave-mask);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 135% 100%;
    mask-size: 135% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    pointer-events: none;
}

/* Bölüm zeminleri: beyaz ↔ kâğıt mavisi; renk kartlarda kalır */
.features { --bolum-bg: #ffffff; background: var(--bolum-bg); position: relative; }
.features::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--nokta);
    background-size: 28px 28px;
    opacity: .55;
    pointer-events: none;
}
.features > .container { position: relative; z-index: 1; }

.modules { --bolum-bg: var(--kagit); background: var(--bolum-bg); }
.cta     { --bolum-bg: #ffffff; background: var(--bolum-bg); position: relative; }
.faq     { --bolum-bg: var(--kagit); background: var(--bolum-bg); position: relative; }
.page-section.alt { --bolum-bg: var(--kagit); background: var(--bolum-bg); }
.page-section     { --bolum-bg: #ffffff; background: #fff; }

/* ------------------------------------------- 5. BAŞLIK / NAV / İLERLEME */
.okuma-cubugu {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad-altin);
    z-index: 1200;
    pointer-events: none;
}

.site-header {
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--hat);
    box-shadow: none;
    transition: box-shadow .3s var(--ease-yumusak), background .3s var(--ease-yumusak);
}
.site-header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--grad-marka);
    opacity: .55;
}
.site-header.kaydi {
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 30px rgba(4,28,70,.10);
}
.site-header.kaydi .topbar { display: none; }

.topbar { background: var(--mavi-900); }
.topbar-contact a:hover { color: var(--altin-300); }
.topbar-social a:hover { background: var(--altin-500); color: var(--mavi-900); }

.brand-icon {
    width: 58px; height: 58px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--grad-marka) border-box;
    box-shadow: 0 6px 20px rgba(4,28,70,.14);
}
.brand:hover .brand-icon { transform: scale(1.06) rotate(-4deg); }

.nav-list a:not(.btn) { color: var(--mavi-900); }
.nav-list a:not(.btn)::after { background: var(--grad-altin); height: 3px; }
.nav-list a:not(.btn):hover,
.nav-list a:not(.btn).active { color: var(--mavi-600); }
.nav-toggle span { background: var(--mavi-800); }

/* --------------------------------------------------------------- 6. HERO */
.hero {
    background:
        radial-gradient(1100px 520px at 8% -10%, rgba(0,169,208,.35) 0%, transparent 58%),
        radial-gradient(900px 480px at 92% 4%, rgba(114,64,155,.38) 0%, transparent 60%),
        radial-gradient(760px 460px at 62% 108%, rgba(254,196,3,.20) 0%, transparent 58%),
        var(--grad-derin);
    padding: 88px 0 130px;
    color: #fff;
}
.hero::before,
.hero::after { display: none; }        /* eski turuncu haleler kalksın */
.hero .container { position: relative; z-index: 2; }

/* ince doku + üstte yumuşak ışık */
.hero .dekor::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--doku);
    opacity: .05;
    mix-blend-mode: overlay;
}

/* DİKKAT: `.hero-content` / `.hero-badge` sınıfları alt sayfalarda AÇIK zeminli
   bölümlerde de kullanılıyor (ör. hakkimizda "Hikayemiz"). Koyu zemine ait
   renkler bu yüzden `.hero` altına kapatıldı — yoksa beyaz yazı beyaz zeminde
   kaybolur. */
.hero .hero-badge {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 26px rgba(0,0,0,.18);
    animation: none;
}
.hero .hero-badge::before { content: '✦'; color: var(--altin-500); animation: isilti 3s ease-in-out infinite; }

.hero .hero-content h1 { color: #fff; text-wrap: balance; letter-spacing: -.03em; }
.hero .hero-content h1 .highlight { -webkit-text-fill-color: transparent; background: var(--grad-altin); -webkit-background-clip: text; background-clip: text; }
.hero .hero-content p { color: rgba(255,255,255,.80); }
.hero-content h1 { text-wrap: balance; letter-spacing: -.03em; }

/* Dönen kelime — logo renklerinde */
.kelime-doner {
    display: inline-block;
    height: 1.15em;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.15em;
}
.kelime-doner .ray { display: block; animation: kelimeDon 9s cubic-bezier(.76,0,.24,1) infinite; }
.kelime-doner b { display: block; height: 1.15em; font-weight: inherit; white-space: nowrap; }
.kelime-doner b:nth-child(1) { color: var(--logo-turkuaz) }
.kelime-doner b:nth-child(2) { color: var(--altin-500) }
.kelime-doner b:nth-child(3) { color: #8fd14f }

/* Telefon: cam çerçeve + yüzme + fare ile eğilme */
.hero-phone { position: relative; z-index: 2; perspective: 1300px; }
.hero-phone::before {                   /* arkada altın hale */
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(254,196,3,.30) 0%, transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}
.phone-frame {
    background: linear-gradient(160deg, #0d2a5e 0%, #041c46 100%);
    box-shadow:
        0 40px 90px rgba(2,12,36,.55),
        0 0 0 1px rgba(255,255,255,.10),
        inset 0 0 0 2px rgba(255,255,255,.06);
    animation: yuz 7.5s ease-in-out infinite;
    transition: transform .4s var(--ease-yumusak);
    transform: rotate(-3deg);
}
.hero-phone.egilir .phone-frame {
    animation: none;
    transform: rotate(-3deg) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
}
.phone-frame::before { background: #041c46; }
.phone-screen { background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 60%, #eef4fe 100%); }
.phone-card { animation: damla .55s var(--ease-yumusak) both; border: 1px solid var(--hat); box-shadow: 0 6px 18px rgba(4,28,70,.07); }
/* NOT: `nth-of-type` div kardeşlerini sayar — status(1) ve greeting(2) de div,
   yani kartlar 3-4-5. `nth-of-type(1..3)` yazmak yanlış kartı seçiyordu. */
.phone-card:nth-of-type(3) { animation-delay: .30s }
.phone-card:nth-of-type(4) { animation-delay: .45s }
.phone-card:nth-of-type(5) { animation-delay: .60s }
.phone-grid-item { box-shadow: 0 8px 18px rgba(4,28,70,.18); }

.phone-badge {
    background: var(--grad-altin);
    color: var(--mavi-900);
    box-shadow: var(--golge-altin);
    animation: nefes 5s ease-in-out infinite;
}

/* ------------------------------------------------------ 7. KAYAN ŞERİT */
.serit {
    background: linear-gradient(90deg, #041c46 0%, #073583 50%, #041c46 100%);
    padding: 18px 0 56px;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,.10);
}
.serit-ray {
    display: flex;
    width: max-content;
    gap: 12px;
    animation: serit 44s linear infinite;
}
.serit:hover .serit-ray { animation-play-state: paused; }
.serit-oge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: 9px 20px;
    border-radius: 999px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.serit-oge span { font-size: 1.02rem; }

/* --------------------------------------------------- 8. İSTATİSTİK BANDI */
.sayilar {
    padding: 84px 0;
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(0,169,208,.28), transparent 60%),
        radial-gradient(600px 320px at 88% 100%, rgba(114,64,155,.30), transparent 62%),
        var(--grad-derin);
    position: relative;
    overflow: hidden;
}
.sayilar::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--doku);
    opacity: .06;
    mix-blend-mode: overlay;
}
.sayilar .container { position: relative; z-index: 1; }
.sayi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    text-align: center;
}
.sayi-kart {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 30px 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--ease-yumusak), background .4s ease, border-color .4s ease;
}
.sayi-kart::after {                     /* üstte altın hat */
    content: '';
    position: absolute; top: 0; left: 24%; right: 24%;
    height: 2px;
    background: var(--grad-altin);
    opacity: .8;
}
.sayi-kart:hover { transform: translateY(-6px); background: rgba(255,255,255,.10); border-color: rgba(254,196,3,.45); }
.sayi-kart .ikon { font-size: 1.7rem; margin-bottom: 10px; display: block; opacity: .95; }
.sayi-kart .deger {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    background: var(--grad-altin);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sayi-kart .etiket { color: rgba(255,255,255,.82); font-weight: 600; font-size: .93rem; letter-spacing: .01em; }

/* ------------------------------------------------------------ 9. KARTLAR */
/* Izgara: 6 öğe → 3x2, 4 öğe → 4x1 (yoksa 3+1 yetim satır kalıyor), 8 → 4x2 */
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.module-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.feature-grid:has(> :nth-child(4):last-child),
.module-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }

.feature-card,
.module-card,
.value-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hat);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease-yumusak), box-shadow .4s var(--ease-yumusak), border-color .4s ease;
}
/* üstte ince renk hattı — hover'da soldan sağa çizilir */
.feature-card::before,
.module-card::before,
.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kart-renk, var(--mavi-600));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s var(--ease-yumusak);
}
.feature-card:hover::before,
.module-card:hover::before,
.value-card:hover::before { transform: scaleX(1); }

.feature-card:hover,
.module-card:hover,
.value-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--kart-renk, var(--mavi-600)) 35%, #fff);
    box-shadow: var(--shadow-md);
}

/* logo renk döngüsü */
.feature-card:nth-child(6n+1), .module-card:nth-child(6n+1), .value-card:nth-child(6n+1) { --kart-renk: var(--logo-mavi-2);  --kart-grad: var(--g-mavi) }
.feature-card:nth-child(6n+2), .module-card:nth-child(6n+2), .value-card:nth-child(6n+2) { --kart-renk: var(--logo-mercan);  --kart-grad: var(--g-mercan) }
.feature-card:nth-child(6n+3), .module-card:nth-child(6n+3), .value-card:nth-child(6n+3) { --kart-renk: var(--logo-altin);   --kart-grad: var(--g-altin) }
.feature-card:nth-child(6n+4), .module-card:nth-child(6n+4), .value-card:nth-child(6n+4) { --kart-renk: var(--logo-fistik);  --kart-grad: var(--g-yesil) }
.feature-card:nth-child(6n+5), .module-card:nth-child(6n+5), .value-card:nth-child(6n+5) { --kart-renk: var(--logo-turkuaz); --kart-grad: var(--g-turkuaz) }
.feature-card:nth-child(6n+6), .module-card:nth-child(6n+6), .value-card:nth-child(6n+6) { --kart-renk: var(--logo-mor);     --kart-grad: var(--g-mor) }

/* ikon kutuları: logo rengi + yumuşak iç ışık */
.feature-icon, .module-icon, .value-icon {
    position: relative;
    border-radius: 18px;
    background: var(--kart-renk, var(--mavi-600));
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--kart-renk, var(--mavi-600)) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .45s var(--ease-pop), box-shadow .4s ease;
}
.feature-icon::before, .module-icon::before, .value-icon::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(150deg, rgba(255,255,255,.35) 0%, transparent 55%);
    pointer-events: none;
}
.feature-card:hover .feature-icon,
.module-card:hover .module-icon,
.value-card:hover .value-icon { transform: translateY(-3px) scale(1.06) rotate(-3deg); }

/* Temeldeki `.module-card:nth-child(3) .module-icon` gibi kurallar (özgüllük
   0,3,0) sabit turuncu/mor degradeler basıyordu; aynı özgüllükle logo rengine
   çevir (`:nth-child(n)` her öğeyi seçer, yalnız özgüllük için var). */
.feature-card:nth-child(n) .feature-icon,
.module-card:nth-child(n) .module-icon,
.value-card:nth-child(n) .value-icon {
    background-color: var(--kart-renk, var(--mavi-600));
    background-image: var(--kart-grad, var(--g-mavi));
}

/* Açık renkli döşemelerde (altın/fıstık) simge rengi koyu mürekkep olsun */
.feature-card:nth-child(6n+3) .feature-icon,
.module-card:nth-child(6n+3) .module-icon,
.value-card:nth-child(6n+3) .value-icon,
.feature-card:nth-child(6n+4) .feature-icon,
.module-card:nth-child(6n+4) .module-icon,
.value-card:nth-child(6n+4) .value-icon { color: var(--mavi-900); }

/* premium nefes: kart içi boşluk + başlık ölçüsü */
.feature-card { padding: 32px 28px; }
.module-card  { padding: 30px 24px; }
.feature-card h3 { font-size: 1.14rem; margin-bottom: 10px; }
.module-card h3  { font-size: 1.08rem; }
.feature-card p, .module-card p, .value-card p { color: var(--murekkep-2); }

.feature-card h3, .module-card h3, .value-card h3 { color: var(--mavi-900); }

/* CTA kartları */
.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    transition: transform .4s var(--ease-yumusak), box-shadow .4s var(--ease-yumusak);
}
.cta-card::after {
    content: '';
    position: absolute;
    top: -60%; bottom: -60%; left: 0;
    width: 46px;
    background: rgba(255,255,255,.30);
    transform: translateX(-130%) rotate(16deg);
    pointer-events: none;
}
.cta-card:hover::after { animation: parla 1s var(--ease-yumusak); }
.cta-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
/* CTA kartlarında beyaz küçük metin var → zeminler AA için koyulaştırıldı
   (logo yeşili/mercanı ham hâliyle 2.4–3.4:1 kalıyordu). */
.cta-card.blue  { background: var(--grad-cta-blue); }
.cta-card.green { background: linear-gradient(140deg, #37800f 0%, #24651b 100%); }
.cta-card.red   { background: linear-gradient(140deg, #d33257 0%, #a81f45 100%); }
.cta-card.teal  { background: linear-gradient(140deg, #72409b 0%, #4a2270 100%); }
.cta-card .ico { border: 1px solid rgba(255,255,255,.28); }

/* ------------------------------------------------------------ 10. BUTONLAR */
.btn {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    letter-spacing: .01em;
    transition: transform .3s var(--ease-yumusak), box-shadow .3s var(--ease-yumusak), background .3s ease;
}
.btn::after {
    content: '';
    position: absolute;
    top: -60%; bottom: -60%; left: 0;
    width: 38px;
    background: rgba(255,255,255,.35);
    transform: translateX(-150%) rotate(16deg);
    pointer-events: none;
}
.btn:hover::after { animation: parla .85s var(--ease-yumusak); }

/* Ana buton: altın + koyu mavi yazı (kontrast 9.3:1) — hero'nun tek baskın eylemi */
.btn-primary {
    background: var(--grad-altin);
    color: var(--mavi-900);
    box-shadow: var(--golge-altin);
}
.btn-primary:hover {
    background: linear-gradient(120deg, #ffe89a 0%, #ffd23d 45%, #edb400 100%);
    color: var(--mavi-900);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(201,148,0,.38);
}
/* Nav butonu: marka mavisi + beyaz yazı (7.9:1) */
.btn-accent {
    background: var(--grad-btn);
    color: #fff;
    box-shadow: 0 10px 24px rgba(7,53,131,.28);
}
.btn-accent:hover {
    background: linear-gradient(120deg, #1668d6 0%, #0a4fb0 100%);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(7,53,131,.34);
}
/* Nav'daki butonlar: temeldeki `.nav-list a` (özgüllük 0,1,1) `.btn-*`i (0,1,0)
   eziyor → mavi buton üstünde lacivert yazı çıkıyordu. Aynı özgüllükte tekrarla. */
.nav-list a.btn-accent { color: #fff; }
.nav-list a.btn-primary { color: var(--mavi-900); }
.nav-list a.btn-light { color: var(--mavi-900); }

.btn-outline { border-color: var(--mavi-600); color: var(--mavi-700); }
.btn-outline:hover { background: var(--mavi-600); color: #fff; }
.btn-light { background: #fff; color: var(--mavi-900); }
.btn-light:hover { background: var(--mavi-50); }
/* Koyu zeminde (hero) ikincil buton: cam */
.hero .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.hero .btn-outline:hover { background: rgba(255,255,255,.14); color: #fff; }

/* -------------------------------------------- 11. SSS / FOOTER / BANNER / FORM */
.faq-item {
    border: 1px solid var(--hat);
    border-left: 3px solid var(--kart-renk, var(--mavi-600));
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .3s var(--ease-yumusak), transform .3s var(--ease-yumusak), border-color .3s ease;
}
.faq-item:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.faq-item[open] { border-color: var(--hat); border-left-color: var(--altin-500); box-shadow: var(--shadow-md); }
.faq-item[open] p { animation: damla .4s var(--ease-yumusak) both; }
.faq-item summary { color: var(--mavi-900); }
.faq-item summary::after { transition: transform .35s var(--ease-yumusak); }
.faq-item:nth-child(6n+1) { --kart-renk: var(--logo-mavi-2) }
.faq-item:nth-child(6n+2) { --kart-renk: var(--logo-mercan) }
.faq-item:nth-child(6n+3) { --kart-renk: var(--logo-altin) }
.faq-item:nth-child(6n+4) { --kart-renk: var(--logo-fistik) }
.faq-item:nth-child(6n+5) { --kart-renk: var(--logo-turkuaz) }
.faq-item:nth-child(6n+6) { --kart-renk: var(--logo-mor) }

.site-footer { background: linear-gradient(180deg, #ffffff 0%, var(--kagit) 100%); position: relative; }
.site-footer::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--grad-marka);
    opacity: .7;
}
.footer-col h4::after { background: var(--grad-altin); }
.footer-social a:hover { background: var(--mavi-600); transform: translateY(-3px); }

.page-banner {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(700px 320px at 15% 0%, rgba(0,169,208,.32), transparent 60%),
        radial-gradient(620px 300px at 88% 100%, rgba(114,64,155,.34), transparent 62%),
        var(--grad-derin);
    border-radius: 0 0 36px 36px;
}
.page-banner::before, .page-banner::after { display: none; }
.page-banner h1 { color: #fff; position: relative; z-index: 1; animation: damla .7s var(--ease-yumusak) both; }
.page-banner .breadcrumb { position: relative; z-index: 1; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(8px); }
.page-banner .breadcrumb a { color: rgba(255,255,255,.85); }
.page-banner .breadcrumb a:hover { color: #fff; }
.page-banner .breadcrumb .current { color: var(--altin-300); }
.page-banner .breadcrumb .sep { color: rgba(255,255,255,.5); }

/* formlar */
.form-group input, .form-group select, .form-group textarea {
    border-radius: 14px;
    border-color: var(--hat);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--mavi-600);
    box-shadow: 0 0 0 4px rgba(10,79,176,.14);
}
.contact-form, .demo-form, .auth-card { border-radius: 24px; box-shadow: var(--shadow-lg); }
.contact-info-card, .demo-info, .auth-side { background: var(--grad-derin); }
.contact-form .btn, .demo-form .btn, .auth-card .btn-primary {
    background: var(--grad-btn);
    color: #fff;
    box-shadow: 0 10px 24px rgba(7,53,131,.26);
}
.contact-form .btn:hover, .demo-form .btn:hover, .auth-card .btn-primary:hover {
    background: linear-gradient(120deg, #1668d6 0%, #0a4fb0 100%);
}

/* iki sütunlu bölümler + galeri */
.two-col img, .two-col .image-box, .map-wrap, .gallery-item, .program-img, .team-photo {
    border-radius: 22px;
    box-shadow: var(--shadow-md);
}
.gallery-item::after { background: linear-gradient(180deg, transparent 40%, rgba(4,28,70,.55) 100%); }

/* --------------------------------------------- 12. YÜZEN BUTONLAR */
.wa-float { animation: yuz 5.5s ease-in-out infinite; }
.wa-float:hover { animation-play-state: paused; }

.yukari-cik {
    position: fixed;
    right: 26px;
    bottom: 104px;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad-btn);
    color: #fff;
    font-size: 1.2rem;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 12px 28px rgba(4,28,70,.32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity .35s var(--ease-yumusak), transform .35s var(--ease-yumusak), visibility .35s;
    z-index: 99;
}
.yukari-cik.gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari-cik:hover { transform: translateY(-3px) scale(1.06); }

/* ------------------------------------------------------- 13. RESPONSIVE */
@media (max-width: 980px) {
    .hero { padding: 62px 0 100px; }
    .hero-phone::before { width: 260px; height: 260px; }
    .dekor .sekil { transform: scale(.75); }
}
@media (max-width: 768px) {
    /* Telefon maketi: küçük ekranda çerçeve 260x520'ye (≤480'de 240x480) iner
       ama içerik ~566px kalıyordu → son kart ve simge ızgarası kırpılıyordu.
       İçeriği çerçeveye sığdır. */
    .phone-screen { padding: 40px 16px 16px; }
    .phone-card { padding: 10px; margin-bottom: 10px; }
    .phone-card:nth-last-of-type(2) { display: none; }   /* son kart (grid en sonda) */
    .phone-greeting { margin-bottom: 12px; }
    .phone-grid { margin-top: 10px; gap: 8px; }

    .serit-ray { animation-duration: 30s; }
    .yukari-cik { right: 16px; bottom: 88px; width: 44px; height: 44px; }
    .sayilar { padding: 60px 0; }
    .dalga-tepe::before { top: -26px; height: 28px; }
    .feature-grid, .module-grid:has(> :nth-child(6):last-child) { gap: 18px; }
}
@media (max-width: 480px) {
    .dekor .sekil { display: none; }
    .page-banner { border-radius: 0 0 24px 24px; }
}

/* ==========================================================================
   15. GÖSTERİ KATMANI — degradeler + dikkat çeken hareket
   Kural: yalnız `transform`/`opacity`/`filter` animasyonu (layout tetikleyen
   özellik yok). Hepsi 14. bölümdeki `prefers-reduced-motion` bloğuyla kapanır.
   ========================================================================== */

/* konik kenarlık açısı — @property destekli tarayıcıda dönebilsin */
@property --ac { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

@keyframes aurora1   { 0%,100% { transform: translate3d(0,0,0) scale(1) }
                       33%     { transform: translate3d(9%,6%,0) scale(1.14) }
                       66%     { transform: translate3d(-7%,10%,0) scale(.94) } }
@keyframes aurora2   { 0%,100% { transform: translate3d(0,0,0) scale(1.05) }
                       40%     { transform: translate3d(-11%,-8%,0) scale(.92) }
                       75%     { transform: translate3d(7%,-5%,0) scale(1.16) } }
@keyframes dalgaKay  { from { -webkit-mask-position: 0 0; mask-position: 0 0 }
                       to   { -webkit-mask-position: 100% 0; mask-position: 100% 0 } }
@keyframes konikDon  { to { --ac: 360deg } }
@keyframes yukselYaz { from { transform: translateY(115%) rotate(4deg); opacity: 0 }
                       to   { transform: none; opacity: 1 } }
@keyframes girisAc   { from { transform: translateY(26px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes dalgalanma{ 0% { transform: scale(.6); opacity: .55 } 100% { transform: scale(2.6); opacity: 0 } }
/* nabız halkası beyaz: altın halka koyu mavi üstünde soluk fazda çamurlaşıyor */
@keyframes nabiz     { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.45) }
                       70%     { box-shadow: 0 0 0 15px rgba(255,255,255,0) } }
@keyframes ipek      { 0% { background-position: 0% 50% } 100% { background-position: 200% 50% } }

/* ---- 15.1 Hero: canlı aurora + ışıltı ---- */
.hero { isolation: isolate; }
.hero::before,
.hero::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    /* NOT: burada `filter: blur()` + `mix-blend-mode` vardı — radial degrade
       zaten yumuşak, ikisi de pahalı raster/kompozit yaratıyordu (tam sayfa
       yakalama bile kilitleniyordu). Renk durakları güçlendirilip kaldırıldı. */
}
.hero::before {
    width: 1000px; height: 1000px;
    left: -260px; top: -340px;
    background: radial-gradient(circle, rgba(0,201,240,.42) 0%, rgba(0,169,208,.16) 44%, rgba(0,169,208,0) 68%);
    animation: aurora1 24s ease-in-out infinite;
}
.hero::after {
    width: 900px; height: 900px;
    right: -240px; bottom: -320px;
    background: radial-gradient(circle, rgba(150,90,220,.46) 0%, rgba(114,64,155,.18) 46%, rgba(114,64,155,0) 70%);
    animation: aurora2 30s ease-in-out infinite;
}
/* üçüncü katman: altın sıcaklık (JS'siz, dekor katmanına asılır) */
.hero .dekor::before {
    content: '';
    position: absolute;
    width: 620px; height: 620px;
    left: 46%; bottom: -280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254,196,3,.26) 0%, rgba(254,196,3,0) 66%);
    animation: aurora1 36s ease-in-out infinite reverse;
    pointer-events: none;
}
/* imleci izleyen ışık — koyu bölümlerde (JS `--mx/--my` yazar) */
.isik-takip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,.13), transparent 62%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 1;
}
.isik-takip.isikli::before { opacity: 1; }

/* başlık: altın degrade + ipeksi kayma + hafif hale */
.hero .hero-content h1 .kelime-doner b { text-shadow: 0 6px 30px rgba(0,0,0,.28); }
.hero .hero-content h1 .highlight {
    background: linear-gradient(100deg, #ffe27a, #fec403, #fff3cd, #fec403, #ffe27a);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: ipek 7s linear infinite;
}

/* kelime kelime yükselen başlık (JS `.kelime` sarar) */
.yazi-bol .kelime { display: inline-block; overflow: hidden; vertical-align: bottom; }
.yazi-bol .kelime > i {
    display: inline-block;
    font-style: inherit;
    transform: translateY(115%) rotate(4deg);
    opacity: 0;
}
.yazi-bol.acildi .kelime > i {
    animation: yukselYaz .85s cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: var(--gecikme, 0ms);
}

/* hero'nun diğer parçaları sırayla girer */
.hero .hero-badge,
.hero .hero-content p,
.hero .hero-actions,
.hero .magaza-rozetler,
.hero .guven-satiri,
.hero .hero-phone { animation: girisAc .9s var(--ease-yumusak) both; }
.hero .hero-badge   { animation-delay: .05s }
.hero .hero-content p { animation-delay: .55s }
.hero .hero-actions { animation-delay: .7s }
.hero .magaza-rozetler { animation-delay: .82s }
.hero .guven-satiri { animation-delay: .94s }
.hero .hero-phone   { animation-delay: .35s }

/* ---- 15.2 Butonlar: degrade halka + nabız + tık dalgası ---- */
.btn-primary { animation: nabiz 3.6s ease-out infinite; }
.btn-primary:hover { animation-play-state: paused; }
.btn-accent::before,
.btn-primary::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: var(--grad-marka);
    background-size: 300% 100%;
    filter: blur(9px);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: -1;
    animation: ipek 6s linear infinite;
}
.btn-accent:hover::before,
.btn-primary:hover::before { opacity: .75; }
.btn { transform: translateZ(0); }
.yukari-cik { overflow: hidden; }
.dalga {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: scale(0);
    pointer-events: none;
    animation: dalgalanma .65s ease-out forwards;
}

/* ---- 15.3 Kartlar: konik degrade kenarlık + 3B eğilme ---- */
.feature-card, .module-card, .value-card { transform-style: preserve-3d; }
.feature-card::after,
.module-card::after,
.value-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--ac), transparent 0 62%, var(--kart-renk, var(--mavi-600)) 78%, #fff 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.feature-card:hover::after,
.module-card:hover::after,
.value-card:hover::after {
    opacity: .95;
    animation: konikDon 4s linear infinite;
}
/* fareyle 3B eğilme (JS `--rx/--ry` yazar) */
.egik {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px) scale(1.015) !important;
    transition: transform .12s linear;
}
/* ikon döşemesi: degrade + hover'da parıltı sürüklenir */
.feature-icon, .module-icon, .value-icon { background-size: 160% 160%; transition: transform .45s var(--ease-pop), background-position .6s var(--ease-yumusak), box-shadow .4s ease; }
.feature-card:hover .feature-icon,
.module-card:hover .module-icon,
.value-card:hover .value-icon { background-position: 100% 100%; }

/* ---- 15.3b Kartın içinde imleci izleyen renk ışığı ---- */
.feature-card, .module-card, .value-card {
    background-color: #fff;
    background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, -20%),
        color-mix(in srgb, var(--kart-renk, var(--mavi-600)) 13%, transparent) 0%, transparent 62%);
    background-repeat: no-repeat;
}

/* ---- 15.4 Bölüm zeminlerine yumuşak renk sisi ---- */
/* beyaz bölümler düz kalmasın: köşelerden çok hafif marka rengi sızsın */
.features {
    background-color: #fff;
    background-image:
        radial-gradient(900px 430px at 10% -12%, rgba(0,169,208,.11), transparent 60%),
        radial-gradient(820px 400px at 94% 112%, rgba(114,64,155,.10), transparent 62%);
}
.cta {
    background-color: #fff;
    background-image:
        radial-gradient(760px 380px at 88% -10%, rgba(254,196,3,.14), transparent 60%),
        radial-gradient(700px 360px at 6% 108%, rgba(0,169,208,.12), transparent 62%);
}

.modules, .faq, .page-section.alt { position: relative; overflow: hidden; }
.modules::after,
.faq::after,
.page-section.alt::after {
    content: '';
    position: absolute;
    width: 620px; height: 620px;
    right: -180px; top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,169,208,.16) 0%, transparent 62%);
    pointer-events: none;
    animation: aurora1 34s ease-in-out infinite;
}
.faq::after { left: -200px; right: auto; background: radial-gradient(circle, rgba(114,64,155,.14) 0%, transparent 62%); }
.modules > .container, .faq > .container, .page-section.alt > .container { position: relative; z-index: 1; }

/* ---- 15.5 Dalga ayraç: yavaş sürüklenme (maske konumu, kutu büyümez) ---- */
.dalga-tepe::before { animation: dalgaKay 28s linear infinite; }

/* ---- 15.6 Şerit: kenar yumuşatma ---- */
.serit {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.serit-oge { transition: transform .3s var(--ease-pop), background .3s ease, border-color .3s ease; }
.serit-oge:hover { transform: translateY(-3px) scale(1.04); background: rgba(255,255,255,.16); border-color: rgba(254,196,3,.6); }

/* ---- 15.7 İstatistik: degrade sayı + ışık ---- */
.sayi-kart { background-image: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.sayi-kart:hover { transform: translateY(-8px) scale(1.02); }
.sayi-kart .deger { background-size: 200% 100%; animation: ipek 6s linear infinite; }

/* ---- 15.8 Okuma çubuğu + footer hattı: akan degrade ---- */
.okuma-cubugu {
    background: var(--grad-marka);
    background-size: 300% 100%;
    animation: ipek 5s linear infinite;
    box-shadow: 0 0 12px rgba(254,196,3,.55);
}
.site-header::after,
.site-footer::before { background-size: 300% 100%; animation: ipek 9s linear infinite; }

/* ---- 15.9 SSS: açılınca degrade dolgu ---- */
.faq-item[open] {
    background-image: linear-gradient(120deg, rgba(254,196,3,.08), rgba(10,79,176,.06));
}
.faq-item summary::after { color: var(--mavi-600); }

/* ---- 15.10 CTA kartları: degrade kayması ---- */
.cta-card { background-size: 160% 160%; transition: transform .4s var(--ease-yumusak), box-shadow .4s var(--ease-yumusak), background-position .7s var(--ease-yumusak); }
.cta-card:hover { background-position: 100% 100%; }
.cta-card .ico { transition: transform .45s var(--ease-pop); }
.cta-card:hover .ico { transform: scale(1.12) rotate(-6deg); }

/* ---- 15.11 Sayfa banner'ı: aurora ---- */
.page-banner { isolation: isolate; }
.page-banner::before,
.page-banner::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.page-banner::before {
    width: 620px; height: 620px; left: -180px; top: -260px;
    background: radial-gradient(circle, rgba(0,169,208,.42), transparent 64%);
    animation: aurora1 28s ease-in-out infinite;
}
.page-banner::after {
    width: 560px; height: 560px; right: -160px; bottom: -240px;
    background: radial-gradient(circle, rgba(254,196,3,.30), transparent 64%);
    animation: aurora2 34s ease-in-out infinite;
}

/* ---- 15.12 Görsellerde açılış maskesi ---- */
/* NOT: clip-path kesişim ALANINI da kırpar → oran eşikli gözlemci hiç
   tetiklenmez. Bu yüzden perde öğeleri `senlik.js`'te threshold:0 olan ayrı
   gözlemciyle izlenir (yoksa harita gibi öğeler kalıcı gizli kalıyor). */
[data-reveal="perde"] { clip-path: inset(0 0 97% 0); opacity: 1; transform: none; transition: clip-path .9s var(--ease-yumusak); transition-delay: var(--gecikme, 0ms); }
[data-reveal="perde"].gorunur { clip-path: inset(0 0 0 0); }

@media (max-width: 768px) {
    /* mobilde ağır efektleri kıs */
    .hero::before, .hero::after { animation-duration: 34s; }
    .modules::after, .faq::after, .page-section.alt::after { display: none; }
    .isik-takip::before { display: none; }
}

/* ==========================================================================
   16. ALT SAYFALAR — anasayfayla aynı seviye
   Sayfa banner'ına alt başlık/çip, hukuki sayfalara kart düzeni, 404'e
   aurora, referans kartlarına premium dokunuş.
   ========================================================================== */

/* ---- 16.1 Banner: alt başlık + hızlı çipler ---- */
.page-banner { padding-top: 82px; padding-bottom: 86px; }
.page-banner .banner-alt {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 12px auto 0;
    color: rgba(255,255,255,.80);
    font-size: 1.04rem;
    animation: girisAc .9s var(--ease-yumusak) .15s both;
}
.page-banner .banner-cips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
    animation: girisAc .9s var(--ease-yumusak) .3s both;
}
.page-banner .banner-cips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-weight: 700;
    font-size: .84rem;
    padding: 8px 16px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .3s var(--ease-pop), background .3s ease, border-color .3s ease;
}
.page-banner .banner-cips span:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.18);
    border-color: rgba(254,196,3,.55);
}

/* ---- 16.2 Hukuki sayfalar (kvkk / privacy / terms / cerez) ---- */
.legal-page {
    max-width: 900px;
    padding: 56px 20px 90px;
    position: relative;
}
.legal-govde {
    background: #fff;
    border: 1px solid var(--hat);
    border-radius: 26px;
    box-shadow: var(--shadow-md);
    padding: 46px 48px;
    position: relative;
    overflow: hidden;
}
.legal-govde::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--grad-marka);
    background-size: 300% 100%;
    animation: ipek 9s linear infinite;
}
.legal-page .updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mavi-50);
    border: 1px solid var(--mavi-100);
    color: var(--mavi-700) !important;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 30px !important;
}
.legal-page h2 {
    margin-top: 40px;
    padding-left: 16px;
    position: relative;
    color: var(--mavi-900);
    font-size: 1.32rem;
}
.legal-page h2::before {
    content: '';
    position: absolute;
    left: 0; top: .18em; bottom: .18em;
    width: 5px;
    border-radius: 3px;
    background: var(--grad-altin);
}
.legal-page p, .legal-page li { color: var(--murekkep-2); }
.legal-page strong { color: var(--mavi-900); }
.legal-page a { color: var(--mavi-600); font-weight: 700; }
.legal-page a:hover { color: var(--mavi-700); text-decoration: underline; }
.legal-page ul li::marker { color: var(--altin-600); }

/* hukuki sayfa altındaki yardım şeridi */
.legal-yardim {
    max-width: 900px;
    margin: 28px auto 0;
    background: var(--grad-derin);
    border-radius: 22px;
    padding: 28px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #fff;
    box-shadow: var(--shadow-md);
}
.legal-yardim h3 { color: #fff; margin-bottom: 4px; }
.legal-yardim p { color: rgba(255,255,255,.78); margin: 0; font-size: .95rem; }
.legal-yardim .btn { flex-shrink: 0; }

/* ---- 16.3 404 ---- */
.err-wrap {
    min-height: 74vh;
    display: grid;
    place-items: center;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(700px 340px at 18% 0%, rgba(0,169,208,.34), transparent 62%),
        radial-gradient(640px 320px at 86% 100%, rgba(114,64,155,.34), transparent 64%),
        var(--grad-derin);
}
.err-card {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 620px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
    padding: 54px 44px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}
.err-code {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(5rem, 16vw, 9rem);
    font-weight: 800;
    line-height: 1;
    background: var(--grad-altin);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ipek 6s linear infinite;
    margin-bottom: 6px;
}
.err-card h1 { color: #fff; margin-bottom: 12px; }
.err-card p { color: rgba(255,255,255,.80); margin-bottom: 28px; }

/* ---- 16.4 Referans kartları (galeri) ---- */
.testimonial-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px !important;
    border-color: var(--hat) !important;
}
.testimonial-card::before {
    content: '”';
    position: absolute;
    right: 18px; top: -18px;
    font-family: 'Baloo 2', serif;
    font-size: 7rem;
    line-height: 1;
    background: var(--grad-baslik);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .14;
    pointer-events: none;
}
.testimonial-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.testimonial-avatar {
    background: var(--g-mavi) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(7,53,131,.28);
}
.testimonial-card:nth-child(3n+2) .testimonial-avatar { background: var(--g-mercan) !important; box-shadow: 0 8px 18px rgba(211,50,87,.28); }
.testimonial-card:nth-child(3n) .testimonial-avatar   { background: var(--g-turkuaz) !important; box-shadow: 0 8px 18px rgba(0,137,171,.28); }
.testimonial-card blockquote { color: var(--murekkep) !important; }

.logo-cloud .logo-item { border-radius: 18px !important; transition: transform .35s var(--ease-pop), box-shadow .35s ease, border-color .35s ease; }
.logo-cloud .logo-item:hover { transform: translateY(-6px) scale(1.03); border-color: var(--mavi-600) !important; box-shadow: var(--shadow-md) !important; }
.logo-cloud .logo-item .logo-icon { transition: transform .4s var(--ease-pop); }
.logo-cloud .logo-item:hover .logo-icon { transform: scale(1.15) rotate(-6deg); }

@media (max-width: 768px) {
    .legal-govde { padding: 32px 22px; border-radius: 20px; }
    .legal-yardim { padding: 24px; }
    .err-card { padding: 38px 24px; }
    .page-banner { padding-top: 58px; padding-bottom: 62px; }
}

/* ==========================================================================
   17. İKON SİSTEMİ + MAĞAZA ROZETLERİ + GÜVEN ŞERİDİ
   Emoji ikonografi `images/ikon.svg` sprite'ındaki Lucide SVG'lerle değişti;
   boyut/renk bağlamdan gelir (currentColor). Marka logoları `.ikon-dolgu`.
   ========================================================================== */

svg.ikon {
    width: 1.05em;
    height: 1.05em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    vertical-align: -.15em;
}
svg.ikon-dolgu { fill: currentColor; stroke: none; }

/* bağlam boyutları */
.topbar svg.ikon { width: 14px; height: 14px; opacity: .85; }
.topbar-social a svg.ikon,
.footer-social a svg.ikon { width: 14px; height: 14px; stroke-width: 2.2; }
.footer-social a svg.ikon { width: 16px; height: 16px; }
.serit-oge svg.ikon { width: 17px; height: 17px; color: var(--altin-300); }
.banner-cips span svg.ikon { width: 15px; height: 15px; color: var(--altin-300); }
.feature-icon svg.ikon { width: 26px; height: 26px; }
.module-icon svg.ikon { width: 28px; height: 28px; }
.value-icon svg.ikon { width: 26px; height: 26px; }
.cta-card .ico svg.ikon { width: 26px; height: 26px; }
.contact-info-list .ico svg.ikon { width: 20px; height: 20px; }
.footer-contact svg.ikon { width: 16px; height: 16px; color: var(--mavi-600); }
.btn svg.ikon { width: 17px; height: 17px; }
.download-icon svg.ikon { width: 24px; height: 24px; }
.legal-page .updated svg.ikon { width: 15px; height: 15px; }

/* istatistik bandı: span yerine svg (eski font-size kuralı svg'de işlemez) */
.sayi-kart svg.ikon {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto 12px;
    color: var(--altin-300);
    stroke-width: 1.8;
}

/* telefon maketi */
.phone-card .ico svg.ikon { width: 18px; height: 18px; }
.phone-grid-item svg.ikon { width: 20px; height: 20px; }
.phone-status .durum-ikonlari { display: inline-flex; gap: 5px; align-items: center; }
.phone-status svg.ikon { width: 12px; height: 12px; stroke-width: 2.2; }

/* butonlarda ok mikro-hareketi */
.btn svg.ikon { transition: transform .3s var(--ease-pop); }
.btn:hover svg.ikon { transform: translateX(3px); }
.yukari-cik svg.ikon { width: 20px; height: 20px; }
.yukari-cik:hover svg.ikon { transform: none; }

/* --- mağaza rozetleri (App Store / Google Play) --- */
.magaza-rozetler {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.magaza-rozet {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: rgba(4,28,70,.72);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 14px;
    padding: 9px 20px 9px 15px;
    color: #fff;
    line-height: 1.15;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .3s var(--ease-pop), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.magaza-rozet:hover {
    transform: translateY(-3px);
    border-color: rgba(254,196,3,.65);
    background: rgba(4,28,70,.9);
    box-shadow: 0 14px 30px rgba(2,12,36,.4);
    color: #fff;
}
.magaza-rozet svg.ikon-dolgu { width: 24px; height: 24px; }
.magaza-rozet small {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .72;
}
.magaza-rozet strong {
    display: block;
    font-size: .98rem;
    font-weight: 800;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: .01em;
}
/* açık zeminde (footer) düz koyu rozet */
.site-footer .magaza-rozet {
    background: var(--mavi-900);
    border-color: var(--mavi-800);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.site-footer .magaza-rozet:hover { background: var(--mavi-800); border-color: var(--altin-500); }
.site-footer .magaza-rozetler { margin-top: 14px; }

/* --- hero güven şeridi --- */
.guven-satiri {
    display: flex;
    gap: 8px 20px;
    flex-wrap: wrap;
    margin-top: 22px;
    font-size: .86rem;
    font-weight: 600;
    color: rgba(255,255,255,.78);
}
.guven-satiri span { display: inline-flex; align-items: center; gap: 7px; }
.guven-satiri svg.ikon { width: 15px; height: 15px; color: #8fd14f; stroke-width: 2.4; }

/* --- galeri: emoji büyüteç yerine SVG --- */
.gallery-item::after {
    content: '';
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/><path d='M11 8v6'/><path d='M8 11h6'/></svg>"),
        linear-gradient(180deg, transparent 40%, rgba(4,28,70,.55) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 30px 30px, cover;
}

/* --- referans logo bulutu: emoji yerine baş harf rozeti --- */
.logo-cloud .logo-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 10px !important;
    background-color: var(--kart-renk, var(--mavi-600));
    background-image: var(--kart-grad, var(--g-mavi));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--kart-renk, var(--mavi-600)) 32%, transparent);
}
.logo-cloud .logo-item:nth-child(6n+1) { --kart-renk: var(--logo-mavi-2);  --kart-grad: var(--g-mavi); }
.logo-cloud .logo-item:nth-child(6n+2) { --kart-renk: var(--logo-mercan);  --kart-grad: var(--g-mercan); }
.logo-cloud .logo-item:nth-child(6n+3) { --kart-renk: var(--logo-altin);   --kart-grad: var(--g-altin); }
.logo-cloud .logo-item:nth-child(6n+4) { --kart-renk: var(--logo-fistik);  --kart-grad: var(--g-yesil); }
.logo-cloud .logo-item:nth-child(6n+5) { --kart-renk: var(--logo-turkuaz); --kart-grad: var(--g-turkuaz); }
.logo-cloud .logo-item:nth-child(6n+6) { --kart-renk: var(--logo-mor);     --kart-grad: var(--g-mor); }
/* altın/fıstık zeminde koyu yazı (kontrast) */
.logo-cloud .logo-item:nth-child(6n+3) .logo-icon,
.logo-cloud .logo-item:nth-child(6n+4) .logo-icon { color: var(--mavi-900); }

/* --- kontrast onarımları (koyu zeminde koyu yazı bırakan kural çakışmaları) ---
   1) Bu dosyadaki global `p { color: var(--murekkep-2) }` kuralı, renk tanımı
      olmayan koyu zeminli paragrafları eziyordu → CTA kartlarının alt metinleri
      koyu-üstü-koyu kalıp kayboluyordu.
   2) Hukuki sayfalardaki sayfa içi <style> blokları (`.legal-page p {color:#333}`,
      `.legal-page a {color:...}`) bu dosyadan SONRA yüklendiği için koyu zeminli
      yardım şeridinin metnini ve butonunu boyuyordu — `aside.` ile özgüllük artırıldı. */
.cta-card p { color: #fff; opacity: .95; }
aside.legal-yardim p { color: rgba(255,255,255,.78); }
aside.legal-yardim a.btn-primary { color: var(--mavi-900); }
aside.legal-yardim a.btn-primary:hover { color: var(--mavi-900); }

/* rozet üst satırı: %72 opaklık küçük puntoda siliktı */
.magaza-rozet small { opacity: .84; }

/* mobil: h1 içindeki <br> hero sütununu min-content genişliğine itip
   taşma yaratıyordu (grid item min-width:auto) — ikisini birden kapat */
@media (max-width: 980px) {
    .hero-grid > * { min-width: 0; }
    .hero .hero-content h1 br { display: none; }
    .hero .guven-satiri { justify-content: center; }
    .hero .magaza-rozetler { justify-content: center; }
}
@media (max-width: 480px) {
    .magaza-rozetler { width: 100%; }
    .magaza-rozet { flex: 1; justify-content: center; }
}

/* --------------------------------- 14. HAREKET AZALTMA TERCİHİ (ZORUNLU) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .dekor, .okuma-cubugu { display: none !important; }
    .highlight, .gradient-text {
        -webkit-text-fill-color: initial;
        background: none;
        color: var(--mavi-600);
    }
    .hero-content h1 .highlight { color: var(--altin-300); -webkit-text-fill-color: initial; background: none; }
    .sayi-kart .deger { -webkit-text-fill-color: initial; background: none; color: var(--altin-500); }
    .kelime-doner { height: auto; }
    .kelime-doner .ray { animation: none; }
    .kelime-doner b:nth-child(n+2) { display: none; }
}

/* ==========================================================================
   18. HAREKET KATMANI — sayfalar arası geçiş, akordeon, manyetik butonlar,
       kaydırmaya bağlı (scroll-driven) hareket, form cilası

   Kural (15. bölümle aynı): yalnız `transform` / `opacity` / `filter` /
   `grid-template-rows` animasyonu. Yeni parçaların hepsi 18.14'teki
   `prefers-reduced-motion` bloğuyla ve JS tarafındaki `azHareket` kapısıyla
   kapanır. Dokunmatik cihazda manyetik çekim hiç kurulmaz.
   ========================================================================== */

@keyframes vtGiris   { from { opacity: 0; transform: translateY(14px) scale(.995) } }
@keyframes vtCikis   { to   { opacity: 0; transform: translateY(-8px)  scale(.997) } }
@keyframes gecisIlerle { 0% { transform: scaleX(0) } 55% { transform: scaleX(.62) } 100% { transform: scaleX(.94) } }
@keyframes sarsil    { 10%,90% { transform: translateX(-2px) } 30%,70% { transform: translateX(3px) } 50% { transform: translateX(-3px) } }
@keyframes donenHalka{ to { transform: rotate(360deg) } }
@keyframes heroSuzul { to { opacity: .16; transform: translateY(-48px) scale(.964) } }
@keyframes bandGir   { from { opacity: .35; transform: translateY(26px) scale(.985) } }

/* ---- 18.1 Sayfalar arası geçiş (View Transitions, MPA) ------------------
   Aynı köken + iki sayfa da bu CSS'i yüklediği için tarayıcı geçişi kendisi
   kurar. Desteklemeyen tarayıcı hiçbir şey kaybetmez (sert geçişe döner). */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtCikis .24s var(--ease-yumusak) both; }
::view-transition-new(root) { animation: vtGiris .44s var(--ease-yumusak) both; }

/* Üst çubuk ve yüzen butonlar geçiş boyunca yerinde kalsın — sayfa altta
   değişirken kabuk sabit durur, "uygulama" hissi verir. */
.site-header { view-transition-name: ust-cubuk; }
.wa-float    { view-transition-name: wa-dugme; }
.yukari-cik  { view-transition-name: yukari-dugme; }

/* Geçiş sırasında üstte ilerleyen ince çizgi (JS `.aktif` ekler) */
.gecis-cubugu {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 3px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad-altin);
    box-shadow: 0 0 12px rgba(254,196,3,.6);
    opacity: 0;
    z-index: 1400;
    pointer-events: none;
    transition: opacity .2s ease;
}
.gecis-cubugu.aktif { opacity: 1; animation: gecisIlerle 1.6s var(--ease-yumusak) forwards; }

/* ---- 18.2 Üst çubuk: aşağı kaydırınca çekilir, yukarı kaydırınca döner -- */
.site-header {
    transition: transform .42s var(--ease-yumusak),
                box-shadow .3s var(--ease-yumusak),
                background .3s var(--ease-yumusak);
}
.site-header.gizli { transform: translateY(-102%); }
.site-header.gizli::after { opacity: 0; }

/* ---- 18.3 Nav: alt çizgi transform ile (width yerine — layout tetiklemez) */
.nav-list a:not(.btn)::after {
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .34s var(--ease-pop);
}
.nav-list a:not(.btn):hover::after,
.nav-list a:not(.btn).active::after { width: 100%; transform: scaleX(1); }
.nav-list a:not(.btn):not(.active)::after { transform-origin: 100% 50%; }
.nav-list a:not(.btn):hover::after { transform-origin: 0 50%; }

/* ---- 18.4 Mobil menü: perde + sırayla açılan öğeler --------------------- */
.menu-perde {
    position: fixed;
    inset: 0;
    background: rgba(4,28,70,.44);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease-yumusak), visibility .35s;
    z-index: 90;
}
.menu-perde.acik { opacity: 1; visibility: visible; }
body.menu-acik { overflow: hidden; }

@media (max-width: 768px) {
    .nav-list {
        background: rgba(255,255,255,.97);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
        border-radius: 0 0 22px 22px;
        transition: max-height .42s var(--ease-yumusak), padding .42s var(--ease-yumusak);
    }
    .nav-list li {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity .28s ease, transform .34s var(--ease-pop);
    }
    .nav-list.open li {
        opacity: 1;
        transform: none;
        transition-delay: calc(var(--sira, 0) * 55ms + 80ms);
    }
    .nav-list a:not(.btn)::after { display: none; }
    .nav-list li + li a:not(.btn) { border-top: 1px solid var(--hat); }
}

/* ---- 18.5 SSS akordeon: yumuşak açılma (JS `.faq-govde` sarar) ---------- */
.faq-item .faq-govde {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s var(--ease-yumusak);
}
.faq-item.acik .faq-govde { grid-template-rows: 1fr; }
.faq-item .faq-ic { overflow: hidden; min-height: 0; }
.faq-item .faq-ic > :last-child { margin-bottom: 0; }

/* + işareti dönerek × olur (metin değiştirmek yerine — akıcı).
   `[open]` JS'siz durum için; JS varsa kapanma animasyonu bitene kadar `open`
   açık kaldığından işaret `.acik` sınıfını izler (`.js-akordeon` kapısı). */
.faq-item summary::after { content: '+'; transition: transform .38s var(--ease-pop), background .3s ease, color .3s ease; }
.faq-item[open] summary::after { content: '+'; transform: rotate(135deg); }
.faq-item.js-akordeon:not(.acik) summary::after { transform: none; }
.faq-item summary { position: relative; }
.faq-item summary:hover { background: rgba(10,79,176,.035); }

/* Açık kartın sol hattı altına döner — kapanış animasyonu boyunca `open`
   bayrağı açık kaldığı için renk `.acik` sınıfını izler. */
.faq-item.js-akordeon.acik { border-left-color: var(--altin-500); box-shadow: var(--shadow-md); }
.faq-item.js-akordeon:not(.acik) { border-left-color: var(--kart-renk, var(--mavi-600)); box-shadow: var(--shadow-sm); }

/* ---- 18.6 Manyetik butonlar (JS `--cx/--cy` yazar; yalnız fare) --------- */
.manyetik { transition: transform .45s var(--ease-pop); }
.manyetik.cekiliyor {
    transform: translate3d(var(--cx, 0px), calc(var(--cy, 0px) - 2px), 0) scale(1.035) !important;
    transition: transform .1s linear;
}
.manyetik > * { pointer-events: none; }

/* 18.7 İmleç halkası — kullanıcı isteğiyle KALDIRILDI (2026-08-16).
   Yerli imleç yalnız başına kalıyor; JS karşılığı da `senlik.js`'ten silindi. */

/* ---- 18.8 Kaydırmaya bağlı hareket (scroll-driven, JS'siz) -------------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
        /* hero, kaydırma ile yukarı süzülüp sönsün */
        .hero .hero-grid {
            animation: heroSuzul linear both;
            animation-timeline: view();
            animation-range: exit 5% exit 96%;
        }
        .page-banner > .container {
            animation: heroSuzul linear both;
            animation-timeline: view();
            animation-range: exit 10% exit 100%;
        }
        /* istatistik bandı görünüme girerken hafifçe yerleşsin */
        .sayilar .sayi-grid {
            animation: bandGir linear both;
            animation-timeline: view();
            animation-range: entry 12% entry 78%;
        }
    }
}

/* ---- 18.9 Bölüm başlığı: altın çizgi açılışta çizilir ------------------- */
/* Yalnız JS `data-reveal` işaretlediyse gizle — JS yoksa çizgi olduğu gibi durur. */
[data-reveal].section-head h2::after {
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform .8s var(--ease-pop);
    transition-delay: calc(var(--gecikme, 0ms) + 180ms);
}
[data-reveal].section-head.gorunur h2::after { transform: scaleX(1); }
[data-reveal].section-head.left h2::after { transform-origin: 0 50%; }

/* ---- 18.10 Kart simgeleri: açılışta yaylanarak gelir ------------------- */
[data-reveal].feature-card .feature-icon,
[data-reveal].module-card  .module-icon,
[data-reveal].value-card   .value-icon {
    opacity: 0;
    transform: scale(.55) rotate(-14deg);
    transition: transform .62s var(--ease-pop), opacity .45s ease, background-position .6s var(--ease-yumusak);
    transition-delay: calc(var(--gecikme, 0ms) + 150ms);
}
[data-reveal].feature-card.gorunur .feature-icon,
[data-reveal].module-card.gorunur  .module-icon,
[data-reveal].value-card.gorunur   .value-icon { opacity: 1; transform: none; }

/* ---- 18.11 Şerit: üstüne gelince dursun (okunabilirlik) ---------------- */
.serit:hover .serit-ray,
.serit:focus-within .serit-ray { animation-play-state: paused; }

/* ---- 18.12 Rozet / referans / footer cilası ---------------------------- */
.magaza-rozet { transition: transform .35s var(--ease-pop), box-shadow .35s ease, border-color .3s ease; }
.magaza-rozet:hover { transform: translateY(-3px); }
.magaza-rozet .ikon { transition: transform .4s var(--ease-pop); }
.magaza-rozet:hover .ikon { transform: scale(1.12); }

.testimonial-card { transition: transform .4s var(--ease-yumusak), box-shadow .4s var(--ease-yumusak), border-color .3s ease; }
.testimonial-card:hover { transform: translateY(-7px); border-color: var(--altin-300); }
.testimonial-card .testimonial-avatar { transition: transform .45s var(--ease-pop); }
.testimonial-card:hover .testimonial-avatar { transform: scale(1.09) rotate(-5deg); }

.logo-cloud .logo-item .logo-icon { transition: transform .45s var(--ease-pop); }
.logo-cloud .logo-item:hover .logo-icon { transform: scale(1.12) rotate(-6deg); }

.footer-col ul a,
.footer-legal a { position: relative; transition: color .25s ease, padding-left .25s var(--ease-yumusak); }
.footer-col ul a:hover { padding-left: 6px; color: var(--mavi-600); }

.topbar-social a,
.footer-social a { transition: transform .35s var(--ease-pop), background .3s ease, color .3s ease; }
.topbar-social a:hover,
.footer-social a:hover { transform: translateY(-2px) scale(1.1); }

.breadcrumb a { transition: color .25s ease; }
.banner-cips > * { transition: transform .35s var(--ease-pop), background .3s ease, border-color .3s ease; }
.banner-cips > *:hover { transform: translateY(-2px); }

/* ---- 18.13 Form: odak halkası, doğrulama, gönderim durumu -------------- */
.form-group { position: relative; }
.form-group input,
.form-group select,
.form-group textarea {
    transition: border-color .25s ease, box-shadow .28s var(--ease-yumusak), background .25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 4px rgba(10,79,176,.15);
    outline: none;
}
.form-group.gecersiz input,
.form-group.gecersiz select,
.form-group.gecersiz textarea {
    border-color: var(--logo-mercan);
    box-shadow: 0 0 0 4px rgba(239,81,115,.14);
}
.form-group.gecersiz { animation: sarsil .4s ease; }
.form-group .form-uyari {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: #c02a58;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s var(--ease-yumusak);
}
.form-group.gecersiz .form-uyari { opacity: 1; transform: none; }
.form-group.gecerli input,
.form-group.gecerli select,
.form-group.gecerli textarea { border-color: rgba(67,157,47,.55); }

.contact-form .btn.gonderiliyor,
.demo-form .btn.gonderiliyor { pointer-events: none; opacity: .85; }
.contact-form .btn.gonderiliyor .ikon,
.demo-form .btn.gonderiliyor .ikon { display: none; }
.contact-form .btn .yukleyici,
.demo-form .btn .yukleyici {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    animation: donenHalka .7s linear infinite;
}
.form-durum {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: .9rem;
    background: rgba(67,157,47,.12);
    color: #2f7d24;
    border: 1px solid rgba(67,157,47,.3);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s ease, transform .35s var(--ease-yumusak);
}
.form-durum.gorunur { opacity: 1; transform: none; }

/* ---- 18.14 HAREKET AZALTMA — 18. bölümün tamamı kapanır ---------------- */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
    .gecis-cubugu, .menu-perde { display: none !important; }
    .manyetik.cekiliyor { transform: none !important; }
    .site-header.gizli { transform: none !important; }
    .faq-item .faq-govde { grid-template-rows: 1fr !important; }
    .nav-list a:not(.btn)::after,
    [data-reveal].section-head h2::after { transform: none !important; }
    [data-reveal].feature-card .feature-icon,
    [data-reveal].module-card  .module-icon,
    [data-reveal].value-card   .value-icon { opacity: 1 !important; transform: none !important; }
    .nav-list li { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   19. CİLA — erişilebilirlik kısayolu, kaydırma çubuğu, tipografi akışı,
       sayfa banner'ı açılışı, çapa hedefleri
   ========================================================================== */

/* ---- 19.1 "İçeriğe atla" kısayolu (JS ekler; klavye kullanıcısı için) --- */
.icerige-atla {
    position: fixed;
    top: 10px; left: 10px;
    z-index: 1500;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--mavi-900);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(4,28,70,.35);
    transform: translateY(-160%);
    transition: transform .28s var(--ease-pop);
}
.icerige-atla:focus,
.icerige-atla:focus-visible { transform: none; outline: 3px solid var(--altin-500); outline-offset: 3px; }

/* Sabit üst çubuğun altında kalmasın diye çapa hedeflerine üst pay */
:target,
main,
main [id] { scroll-margin-top: 120px; }
main:focus { outline: none; }

/* ---- 19.2 Marka renkli kaydırma çubuğu -------------------------------- */
html {
    scrollbar-color: var(--mavi-600) var(--mavi-50);
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--mavi-50); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--mavi-500), var(--mavi-700));
    border-radius: 8px;
    border: 3px solid var(--mavi-50);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--altin-500), var(--altin-600)); }

/* ---- 19.3 Tipografi akışı --------------------------------------------- */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }
input, textarea, select { caret-color: var(--mavi-600); }
.hero ::selection,
.sayilar ::selection,
.serit ::selection,
.page-banner ::selection { background: var(--altin-500); color: var(--mavi-900); }

/* ---- 19.4 Sayfa banner'ı: parçalar sırayla girer ----------------------- */
.page-banner .breadcrumb,
.page-banner .banner-alt,
.page-banner .banner-cips { animation: girisAc .85s var(--ease-yumusak) both; }
.page-banner .breadcrumb  { animation-delay: .06s }
.page-banner .banner-alt  { animation-delay: .42s }
.page-banner .banner-cips { animation-delay: .56s }

/* ---- 19.5 Hareket azaltma --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .icerige-atla { transition: none; }
    .page-banner .breadcrumb,
    .page-banner .banner-alt,
    .page-banner .banner-cips { animation: none; }
}

/* ==========================================================================
   20. CANLI KATMAN — telefon maketinde akan bildirim, kaydırma ilerlemesi,
       hıza duyarlı şerit, sayaç parıltısı, kaydırmaya bağlı paralaks, cila

   Kural (15. ve 18. bölümle aynı): yalnız `transform` / `translate` /
   `opacity` / `filter` / `clip-path` animasyonu — layout tetikleyen özellik
   yok. Tamamı 20.14'teki `prefers-reduced-motion` bloğuyla ve `senlik.js`
   içindeki `azHareket` kapısıyla kapanır.

   Pseudo-element notu: kartların `::before`/`::after`'ı 15. bölümde dolu;
   burada yalnız BOŞ olanlar kullanılıyor (`.sayi-kart::before`,
   `.feature-icon::after`, `.magaza-rozet::after`, `.gallery-item::before`,
   `.yukari-cik::before`).
   ========================================================================== */

@keyframes ikonZipla    { 0%,100% { transform: translateY(0) } 42% { transform: translateY(-7px) scale(1.08) } }
@keyframes yaldizGec    { from { transform: translateX(-140%) skewX(-18deg) } to { transform: translateX(260%) skewX(-18deg) } }
@keyframes halkaAc      { from { opacity: .6; transform: scale(.62) } to { opacity: 0; transform: scale(1.85) } }
@keyframes odakPop      { from { box-shadow: 0 0 0 0 rgba(10,79,176,.42) } to { box-shadow: 0 0 0 11px rgba(10,79,176,0) } }
@keyframes hedefVurgu   { 0%,100% { background-color: transparent } 22% { background-color: rgba(254,196,3,.18) } }
@keyframes ipucuSuzul   { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 9px) } }
@keyframes fareTeker    { 0%,100% { transform: translate(-50%, 0); opacity: 1 } 62% { transform: translate(-50%, 11px); opacity: .15 } }
@keyframes seritGir     { from { opacity: .3; transform: translateY(20px) } }
@keyframes baslikKay    { from { transform: translateY(13px) } to { transform: translateY(-7px) } }
@keyframes kutuVurgu    { 0%,100% { transform: none } 45% { transform: scale(1.15) } }

/* ---- 20.1 Telefon maketinde akan bildirim (JS içerik döndürür) ---------
   `.phone-screen` zaten `position: relative; overflow: hidden` — banner
   çerçevenin içinde kalır, çentiğin (`.phone-frame::before`, z-index 3)
   hemen altından iner. */
.telefon-bildirim {
    position: absolute;
    top: 54px; left: 14px; right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 15px;
    background: rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(4,28,70,.10);
    box-shadow: 0 14px 30px rgba(4,28,70,.22);
    opacity: 0;
    transform: translateY(-150%);
    transition: transform .55s var(--ease-pop), opacity .4s ease;
    pointer-events: none;
}
.telefon-bildirim.gorunur { opacity: 1; transform: none; }
.telefon-bildirim .bildirim-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 14px rgba(4,28,70,.20);
}
.telefon-bildirim .bildirim-ico svg.ikon { width: 16px; height: 16px; }
.telefon-bildirim .bildirim-yazi { min-width: 0; line-height: 1.28; }
.telefon-bildirim .bildirim-yazi strong {
    display: block;
    font-size: .74rem;
    color: var(--mavi-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.telefon-bildirim .bildirim-yazi span {
    display: block;
    font-size: .68rem;
    color: var(--murekkep-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.telefon-bildirim .bildirim-saat {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .62rem;
    font-weight: 700;
    color: var(--murekkep-2);
    opacity: .75;
}
/* bildirime karşılık gelen kısayol kutusu bir kez yaylanır */
.phone-grid-item.vurgulu { animation: kutuVurgu .85s var(--ease-pop); }

/* Banner inerken altındaki selamlama geri çekilsin — üst üste binmiş iki
   metin yerine gerçek bir bildirim gibi görünsün. `:has()` desteklemeyen
   tarayıcıda hiçbir şey kaybolmaz, banner yine üstte durur. */
.phone-greeting { transition: opacity .4s ease, transform .45s var(--ease-yumusak); }
.phone-screen:has(.telefon-bildirim.gorunur) .phone-greeting {
    opacity: .22;
    transform: translateY(4px);
}

/* ---- 20.2 Yukarı-çık: kaydırma ilerlemesi halkası ----------------------
   `.yukari-cik` `overflow: hidden` (tık dalgası için) — halka bu yüzden
   `inset: 0` ile İÇERİDE, maske ile ince bant bırakılarak çiziliyor. */
.yukari-cik::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from -90deg,
        var(--altin-500) calc(var(--ilerleme, 0) * 1%),
        rgba(255,255,255,.22) 0);
    -webkit-mask: radial-gradient(closest-side, transparent 0 82%, #000 84%);
            mask: radial-gradient(closest-side, transparent 0 82%, #000 84%);
    pointer-events: none;
}
.yukari-cik svg.ikon { position: relative; z-index: 2; }

/* ---- 20.3 Şerit: kaydırma hızına göre yumuşak sürüklenme ---------------
   `.serit-ray` `transform`'u `serit` animasyonuna ait — bu yüzden ayrı
   `translate` özelliği kullanılıyor (transform'dan önce uygulanır, çakışmaz).
   JS `--serit-kay` yazar, kaydırma durunca 0'a döner. */
.serit-ray {
    translate: var(--serit-kay, 0px) 0;
    transition: translate .7s cubic-bezier(.16, 1, .3, 1);
}

/* ---- 20.4 Sayaç bandı: sayarken ikon zıplar, bitince altın parıltı ----- */
.sayi-kart.sayiyor .ikon { animation: ikonZipla .8s var(--ease-pop) 2; }
.sayi-kart::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 42%;
    z-index: 1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.sayi-kart.tamam::before { opacity: 1; animation: yaldizGec 1.05s var(--ease-yumusak) both; }

/* ---- 20.5 SSS: açılan gövdenin satırları sırayla girer -----------------
   Yalnız `.js-akordeon` altında — JS yoksa `<details>` içeriği olduğu gibi
   görünür kalmalı (yoksa açılan kart boş görünürdü). */
.faq-item.js-akordeon .faq-ic > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .38s ease, transform .44s var(--ease-yumusak);
}
.faq-item.js-akordeon.acik .faq-ic > * { opacity: 1; transform: none; }
.faq-item.js-akordeon.acik .faq-ic > :nth-child(1) { transition-delay: .10s }
.faq-item.js-akordeon.acik .faq-ic > :nth-child(2) { transition-delay: .17s }
.faq-item.js-akordeon.acik .faq-ic > :nth-child(3) { transition-delay: .24s }
.faq-item.js-akordeon.acik .faq-ic > :nth-child(n+4) { transition-delay: .31s }

/* ---- 20.6 Kart simgesi: üstüne gelince açılan altın halka -------------- */
.feature-icon::after,
.module-icon::after,
.value-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--altin-500);
    opacity: 0;
    pointer-events: none;
}
.feature-card:hover .feature-icon::after,
.module-card:hover .module-icon::after,
.value-card:hover  .value-icon::after { animation: halkaAc .9s var(--ease-yumusak); }

/* ---- 20.7 Mağaza rozetinde ışık süpürmesi ------------------------------ */
.magaza-rozet { position: relative; overflow: hidden; }
.magaza-rozet::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    z-index: 2;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.magaza-rozet:hover::after { opacity: 1; animation: yaldizGec .95s var(--ease-yumusak) both; }

/* ---- 20.8 Kaydırmaya bağlı paralaks (scroll-driven, JS'siz) ------------ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
        /* bölüm başlığı, bölüm görünüme girerken hafifçe yukarı süzülür */
        .section-head h2 {
            animation: baslikKay linear both;
            animation-timeline: view();
            animation-range: entry 10% entry 92%;
        }
        /* modül şeridi girerken yerleşir */
        .serit {
            animation: seritGir linear both;
            animation-timeline: view();
            animation-range: entry 6% entry 60%;
        }
    }
}

/* ---- 20.9 Kaydırma ipucu (JS gövdeye ekler; yalnız masaüstü) -----------
   `fixed`: hero ekrandan uzun olduğu için `absolute` konumda katlamanın
   altında kalıyordu — ipucu ilk ekranda görünmeli. İlk kaydırmada söner. */
.kaydir-ipucu {
    position: fixed;
    left: 50%; bottom: 24px;
    z-index: 60;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: rgba(255,255,255,.72);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    pointer-events: none;
    transform: translate(-50%, 0);
    animation: ipucuSuzul 2.4s var(--ease-yumusak) infinite;
    transition: opacity .45s ease;
}
.kaydir-ipucu.gizli { opacity: 0; }
.kaydir-ipucu .fare {
    position: relative;
    width: 24px; height: 38px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 13px;
}
.kaydir-ipucu .fare::after {
    content: '';
    position: absolute;
    left: 50%; top: 7px;
    width: 4px; height: 8px;
    border-radius: 3px;
    background: var(--altin-500);
    transform: translate(-50%, 0);
    animation: fareTeker 2.4s var(--ease-yumusak) infinite;
}
@media (max-width: 980px) { .kaydir-ipucu { display: none; } }

/* ---- 20.10 Odak halkası: klavyeyle gelince bir kez genişler ------------
   `.btn-primary` DIŞARIDA: onda zaten sürekli `nabiz` halkası var (§15) ve
   `animation` kısayolu tek — burada ezseydik CTA'nın nabzı sönerdi. */
.btn:not(.btn-primary):focus-visible,
.nav-list a:focus-visible,
.magaza-rozet:focus-visible,
.faq-item summary:focus-visible,
.yukari-cik:focus-visible,
.wa-float:focus-visible,
.cta-card:focus-visible { animation: odakPop .55s var(--ease-yumusak); }

/* ---- 20.11 Sayfa içi çapa: hedef bölüm bir kez vurgulanır -------------- */
main [id]:target { animation: hedefVurgu 1.9s var(--ease-yumusak) 1; border-radius: 16px; }

/* ---- 20.12 İletişim listesi mikro hareketi ----------------------------- */
.contact-info-list .ico { transition: transform .42s var(--ease-pop), box-shadow .3s ease; }
.contact-info-list li:hover .ico { transform: scale(1.1) rotate(-6deg); }

/* ---- 20.13 Telefon banner'ının küçük ekran uyarlaması ------------------ */
@media (max-width: 768px) {
    .telefon-bildirim { top: 44px; left: 10px; right: 10px; padding: 8px 10px; border-radius: 13px; }
    .telefon-bildirim .bildirim-ico { width: 26px; height: 26px; border-radius: 9px; }
}

/* ---- 20.14 HAREKET AZALTMA — 20. bölümün tamamı kapanır ---------------- */
@media (prefers-reduced-motion: reduce) {
    .telefon-bildirim,
    .kaydir-ipucu { display: none !important; }
    .serit-ray { translate: none !important; transition: none !important; }
    .sayi-kart.sayiyor .ikon,
    .sayi-kart.tamam::before,
    .phone-grid-item.vurgulu,
    .magaza-rozet:hover::after,
    .feature-card:hover .feature-icon::after,
    .module-card:hover .module-icon::after,
    .value-card:hover  .value-icon::after,
    main [id]:target { animation: none !important; }
    .btn:not(.btn-primary):focus-visible,
    .nav-list a:focus-visible,
    .magaza-rozet:focus-visible,
    .faq-item summary:focus-visible,
    .yukari-cik:focus-visible,
    .wa-float:focus-visible,
    .cta-card:focus-visible { animation: none !important; }
    .faq-item.js-akordeon .faq-ic > * { opacity: 1 !important; transform: none !important; }
    .contact-info-list li:hover .ico { transform: none !important; }
}