/* =========================
   Soft Theme – Color Tokens
   ========================= */
:root {
    /* Backgrounds */
    --bg: #f9fafc; /* ana arka plan */
    --panel: #ffffff; /* kart/section arka planı */
    --alt: #f2f5f9; /* alternatif bölüm zemin */
    /* Text */
    --text: #1a202c; /* birincil metin */
    --muted: #4a5568; /* ikincil metin */
    /* Brand */
    --brand: #2b6cb0; /* soft mavi */
    --brand-2: #48bb78; /* soft yeşil */
    /* Lines & Effects */
    --line: #e2e8f0; /* sınır/ayraç */
    --shadow: 0 10px 24px rgba(17, 24, 39, .06);
}

/* Base */
* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
    line-height: 1.6
}

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

    a:hover {
        text-decoration: underline
    }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    z-index: 10
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0
}

.logo {
    display: flex;
    gap: .6rem;
    align-items: center;
    font-weight: 700;
    color: var(--text)
}

.logo-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg,var(--brand),var(--brand-2));
    box-shadow: 0 0 0 3px rgba(43,108,176,.08)
}

.logo-text {
    white-space: nowrap
}

.nav-links a {
    margin-left: 16px;
    color: var(--text)
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 22px
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow)
}

    .btn.primary {
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
        color: #fff;
        border: none
    }

    .btn.ghost {
        background: transparent
    }

.badge {
    font-size: 11px;
    color: #0f2a16;
    background: var(--brand-2);
    padding: 4px 8px;
    border-radius: 999px;
    margin-left: 8px
}

/* Hero */
.hero {
    padding: 56px 0 24px;
    border-bottom: 1px solid var(--line)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: center
}

.hero h1 {
    font-size: 40px;
    line-height: 1.15;
    margin: .3rem 0
}

.lead {
    color: var(--muted);
    font-size: 18px
}

.chip {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f1fb;
    border: 1px solid #cfe0f7;
    color: #2b6cb0;
    font-size: 12px;
    font-weight: 700
}

.cta {
    display: flex;
    gap: 12px;
    margin-top: 14px
}

.kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 18px
}

.kpi {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 14px;
    display: flex;
    gap: 10px;
    align-items: center
}

    .kpi .n {
        font-size: 22px;
        font-weight: 800;
        color: var(--brand)
    }

    .kpi .t {
        color: var(--muted);
        font-size: 14px
    }

.hero-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px
}

/* Sections */
.section {
    padding: 40px 0
}

    .section.alt {
        background: var(--alt);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line)
    }

    .section h2 {
        font-size: 28px;
        margin: 0 0 12px
    }

.muted {
    color: var(--muted)
}

    .muted.large {
        font-size: 18px
    }

.note {
    font-size: 12px;
    color: var(--muted)
}

/* Cards */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px
}

    .card.small {
        padding: 14px
    }

    .card.highlight {
        outline: 2px solid rgba(43,108,176,.25)
    }

.ul-check {
    padding-left: 0;
    list-style: none
}

    .ul-check li {
        position: relative;
        padding-left: 22px;
        margin: 6px 0
    }

        .ul-check li:before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            line-height: 1.4;
            color: var(--brand)
        }

.partner-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.partner {
    padding: 8px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-weight: 600
}

/* Forms */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

form label {
    font-size: 13px;
    color: var(--muted)
}

form input, form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text)
}

/* Footer */
.site-footer {
    background: #fff;
    border-top: 1px solid var(--line);
    margin-top: 20px
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 18px;
    padding: 26px 0
}

.link-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0
}

    .link-list li {
        margin: 6px 0
    }

.copyright {
    border-top: 1px solid var(--line);
    padding: 14px 0 22px;
    color: var(--muted);
    font-size: 13px
}

/* Responsive */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr
    }

    .cards-3 {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .nav-links {
        display: none
    }

    .nav-toggle {
        display: block
    }

    body.nav-open .nav-links {
        display: flex;
        position: absolute;
        right: 20px;
        top: 56px;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow)
    }

        body.nav-open .nav-links a {
            padding: 10px 12px;
            margin: 0;
            border-bottom: 1px solid var(--line)
        }

            body.nav-open .nav-links a:last-child {
                border-bottom: 0
            }
}

/* Utility */
.hidden {
    display: none
}

/* ===== Scroll Reveal Animations ===== */
:root {
    --anim-dur: .7s;
    --anim-ease: cubic-bezier(.2,.65,.3,1);
}

[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
}

.revealed { /* observer aktif edince eklenecek sınıf */
    opacity: 1 !important;
    transform: none !important;
    transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease);
}

[data-animate="fade-up"] {
    transform: translateY(18px)
}

[data-animate="fade-down"] {
    transform: translateY(-18px)
}

[data-animate="fade-left"] {
    transform: translateX(-24px)
}

[data-animate="fade-right"] {
    transform: translateX(24px)
}

[data-animate="zoom-in"] {
    transform: scale(.96)
}

/* küçük gecikme yardımcıları (stagger) */
.anim-delay-1 {
    transition-delay: .06s
}

.anim-delay-2 {
    transition-delay: .12s
}

.anim-delay-3 {
    transition-delay: .18s
}

.anim-delay-4 {
    transition-delay: .24s
}

.anim-delay-5 {
    transition-delay: .30s
}

.anim-delay-6 {
    transition-delay: .36s
}

body {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.brand-text {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
}

    .brand-text strong {
        color: var(--brand);
        font-weight: 700;
    }

.site-footer .brand-text {
    font-size: 1.1rem;
    color: var(--text);
}

@media (max-width: 900px) {
    .brand-text {
        font-size: 1.1rem;
    }

    .site-footer .brand-text {
        font-size: 1rem;
    }
}

/* ==============================
   Header & Footer Renklendirme
   ============================== */

/* Header degrade ve blur efekti */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    background: linear-gradient( 135deg, rgba(43, 108, 176, 0.08), rgba(72, 187, 120, 0.08) );
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

/* Footer yumuşak renkli zemin */
.site-footer {
    background: linear-gradient( 135deg, rgba(43, 108, 176, 0.05), rgba(72, 187, 120, 0.05) );
    border-top: 1px solid var(--line);
    color: var(--text);
}

    /* Footer başlık ve bağlantıların kontrastını arttıralım */
    .site-footer strong {
        color: var(--brand);
        font-weight: 600;
    }

    .site-footer a {
        color: var(--text);
    }

        .site-footer a:hover {
            color: var(--brand-2);
        }

/* Copyright alanı hafif ayırıcı çizgiyle */
.copyright {
    border-top: 1px solid rgba(226,232,240,0.7);
    text-align: center;
    padding-top: 12px;
    font-size: 13px;
    color: var(--muted);
}

/* =============== Phone Mockup (minimal, no frame) =============== */
.phone-slide {
    display: flex;
    justify-content: center;
    align-items: center
}

.phone {
    width: 320px;
    height: 640px;
    position: relative;
    border-radius: 34px;
    background: #0b1220; /* dış bezel gibi koyu kenar */
    box-shadow: 0 22px 50px rgba(0,0,0,.25);
    overflow: hidden; /* gerçek telefon hissi için */
}

/* Dynamic Island (üstte kapsül) */
.island {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    width: 120px;
    height: 32px;
    border-radius: 18px;
    background: rgba(0,0,0,.75);
    box-shadow: inset 0 0 12px rgba(255,255,255,.06);
}

/* Ekran: soft renkli arkaplan (Happs tonları) */
.screen {
    position: absolute;
    inset: 8px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(120% 80% at 15% 20%, rgba(72,187,120,.25), transparent 60%), radial-gradient(120% 80% at 85% 75%, rgba(43,108,176,.25), transparent 60%), linear-gradient(180deg, #0e1628 0%, #0a1324 100%);
}

/* Home indicator (alttaki çizgi) */
.homebar {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.5);
}

/* =============== Toast (bildirim) =============== */
.toast {
    position: absolute;
    right: 16px;
    top: 88px; /* island altında */
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 86%;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 14px;
    padding: 12px 12px 12px 10px;
    box-shadow: 0 10px 24px rgba(17,24,39,.18);
    opacity: 0;
    transform: translateX(16px);
    pointer-events: none;
    will-change: transform, opacity;
}

    .toast .toast-left {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .toast .bell {
        font-size: 18px
    }

    .toast .toast-body {
        line-height: 1.35;
        color: #0f172a
    }

        .toast .toast-body strong {
            display: block;
            margin-bottom: 4px
        }

        .toast .toast-body p {
            margin: 0 0 8px 0;
            font-size: 14px
        }

    .toast .toast-action {
        border: 0;
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
        color: #fff;
        padding: 8px 10px;
        border-radius: 10px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--shadow)
    }

        .toast .toast-action:hover {
            filter: saturate(110%)
        }

/* Animasyon: sağdan 1 sn gecikmeli giriş */
@keyframes toastInRight {
    0% {
        opacity: 0;
        transform: translateX(16px)
    }

    60% {
        opacity: 1;
        transform: translateX(0)
    }

    85% {
        transform: translateX(-2px)
    }

    100% {
        transform: translateX(0)
    }
}

.toast.play {
    opacity: 1;
    pointer-events: auto;
    animation: toastInRight .7s cubic-bezier(.2,.65,.3,1) .9s forwards; /* ~1 sn */
}

/* Küçük ekran için */
@media (max-width: 500px) {
    .phone {
        transform: scale(.9);
        transform-origin: top right
    }
}

/* Lock screen stili */
.phone.lockscreen {
    width: 340px;
    height: 700px;
    border-radius: 36px;
    background: #0b1220;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0,0,0,.25);
}

.lockscreen .screen {
    position: absolute;
    inset: 8px;
    border-radius: 28px;
    overflow: hidden;
    /* Mor odaklı soft gradient (lock screen hissi) */
    background: radial-gradient(120% 80% at 25% 15%, rgba(123,97,255,.20), transparent 60%), radial-gradient(120% 80% at 80% 85%, rgba(90,72,160,.25), transparent 60%), linear-gradient(180deg,#121c36 0%, #0b142a 100%);
}

/* Dynamic Island */
.island {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    width: 128px;
    height: 34px;
    border-radius: 18px;
    background: rgba(0,0,0,.75);
    box-shadow: inset 0 0 12px rgba(255,255,255,.06);
}

/* Home indicator */
.homebar {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.5);
}

/* Saat & Tarih */
.lockclock {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #eef2ff;
    width: 90%;
}

    .lockclock .date {
        opacity: .9;
        font-size: 14px;
        letter-spacing: .02em
    }

    .lockclock .time {
        font-size: 64px;
        font-weight: 600;
        line-height: 1;
        margin-top: 8px
    }

/* Lock tarzı bildirim */
.toast.lock {
    position: absolute;
    left: 50%;
    bottom: 90px;
    transform: translate(-50%, 20px);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 86%;
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 14px 28px rgba(17,24,39,.22);
    opacity: 0;
    pointer-events: none; /* başlangıçta görünmesin */
}

    .toast.lock .dot {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
        flex: 0 0 auto;
    }

    .toast.lock .toast-body {
        color: #0f172a
    }

        .toast.lock .toast-body strong {
            display: block;
            margin-bottom: 3px
        }

        .toast.lock .toast-body p {
            margin: 0;
            font-size: 14px
        }

    .toast.lock .ago {
        margin-left: auto;
        color: #64748b;
        font-size: 12px
    }

/* Alttan kaydırmalı giriş + 1s gecikme */
@keyframes toastSlideUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 20px)
    }

    60% {
        opacity: 1;
        transform: translate(-50%, 0)
    }

    85% {
        transform: translate(-50%, -2px)
    }

    100% {
        transform: translate(-50%, 0)
    }
}

.toast.lock.play {
    opacity: 1;
    pointer-events: auto;
    animation: toastSlideUp .8s cubic-bezier(.2,.65,.3,1) 1s forwards; /* 1sn gecikmeli */
}

/* Küçük ekran uyumu */
@media (max-width: 500px) {
    .phone.lockscreen {
        transform: scale(.9);
        transform-origin: top right
    }

    .lockclock .time {
        font-size: 54px
    }
}

/* Lock screen saat/tarih aynı kalabilir; sadece bildirimi yatay yapıyoruz */

/* Yatay banner toast */
.toast.lock.banner {
    position: absolute;
    left: 50%;
    bottom: 86px;
    transform: translate(-50%, 18px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    width: 86%;
    min-height: 56px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 14px 28px rgba(17,24,39,.22);
    opacity: 0;
    pointer-events: none;
}

    .toast.lock.banner .dot {
        width: 22px;
        height: 22px;
        border-radius: 8px;
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
    }

    .toast.lock.banner .toast-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        color: #0f172a;
    }

        .toast.lock.banner .toast-body strong {
            font-weight: 700;
            font-size: 14px;
            line-height: 1.2;
        }

        .toast.lock.banner .toast-body .msg {
            font-size: 13px;
            color: #334155;
            line-height: 1.35;
            white-space: normal;
        }

    .toast.lock.banner .ago {
        color: #64748b;
        font-size: 12px;
        margin-left: 8px;
    }

/* Alttan kaydırma + 1 sn gecikme */
@keyframes toastSlideUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 18px)
    }

    60% {
        opacity: 1;
        transform: translate(-50%, 0)
    }

    85% {
        transform: translate(-50%, -2px)
    }

    100% {
        transform: translate(-50%, 0)
    }
}

.toast.lock.banner.play {
    opacity: 1;
    pointer-events: auto;
    animation: toastSlideUp .8s cubic-bezier(.2,.65,.3,1) 1s forwards;
}

/* ========= PHONE MOCKUP OVERRIDES ========= */

/* Daha soft lock-screen arka planı */
.phone.lockscreen {
    width: 340px;
    height: 700px;
    border-radius: 36px;
    background: #121a2f; /* bezel koyuluğu */
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0,0,0,.18);
}

.lockscreen .screen {
    position: absolute;
    inset: 8px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(120% 80% at 22% 18%, rgba(72,187,120,.16), transparent 60%), radial-gradient(120% 80% at 80% 82%, rgba(43,108,176,.16), transparent 60%), linear-gradient(180deg, #1a2446 0%, #0f1b36 100%); /* daha soft */
}

/* Saat ve tarih (değişmediyse dokunma) */
.lockclock .time {
    font-size: 64px;
    font-weight: 600;
}

/* --- Bildirim: küçük yatay banner, ilk anda GÖRÜNMEZ --- */
.phone.lockscreen .toast.lock.banner {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translate(-50%, 22px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    width: 82%;
    max-width: 290px;
    min-height: 54px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 14px 28px rgba(17,24,39,.18);
    /* ÖNEMLİ: ilk yüklemede asla görünmesin */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

    /* İçerik tipografisi */
    .phone.lockscreen .toast.lock.banner .dot {
        width: 20px;
        height: 20px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
    }

    .phone.lockscreen .toast.lock.banner .toast-body {
        color: #0f172a;
        min-width: 0;
    }

        .phone.lockscreen .toast.lock.banner .toast-body strong {
            font-size: 14px;
            font-weight: 700;
        }

        .phone.lockscreen .toast.lock.banner .toast-body .msg {
            font-size: 13px;
            color: #334155;
            line-height: 1.35;
        }

    .phone.lockscreen .toast.lock.banner .ago {
        color: #64748b;
        font-size: 12px;
    }

/* Tek seferlik giriş animasyonu (1 sn gecikmeli) */
@keyframes toastSlideUpOnce {
    0% {
        opacity: 0;
        transform: translate(-50%, 22px);
    }

    60% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.phone.lockscreen .toast.lock.banner.play {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: toastSlideUpOnce .7s cubic-bezier(.2,.65,.3,1) 1s forwards;
}

/* Güvenlik: başka toast kuralları genişlik/yükseklik vermişse ez */
.phone .toast {
    width: auto !important;
    height: auto !important;
}

/* ====== FINAL OVERRIDES (put at the very end) ====== */

/* 1) Daha soft ekran arka planı */
.phone.lockscreen {
    background: #141c30 !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.14) !important;
}

.lockscreen .screen {
    background: radial-gradient(120% 80% at 22% 18%, rgba(72,187,120,.14), transparent 58%), radial-gradient(120% 80% at 78% 82%, rgba(43,108,176,.14), transparent 58%), linear-gradient(180deg, #1d2a52 0%, #132449 100%) !important;
}

/* 2) Başlangıçta görünmesin + dikey değil yatay kompakt banner */
.toast.lock {
    display: none !important;
}
    /* eski lock tostu varsa tamamen kapat */
    .toast.lock.banner {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        position: absolute;
        left: 50%;
        bottom: 86px;
        transform: translate(-50%, 18px);
        width: auto !important;
        max-width: 300px !important;
        min-width: 260px;
        height: auto !important;
        min-height: 50px;
        padding: 8px 12px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.95) !important;
        backdrop-filter: blur(6px);
        border: 1px solid rgba(226,232,240,.9) !important;
        box-shadow: 0 12px 24px rgba(17,24,39,.18);
        /* ilk yüklemede kesin görünmesin */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

        /* içerik tipografisi */
        .toast.lock.banner .dot {
            width: 18px;
            height: 18px;
            border-radius: 8px;
            background: linear-gradient(135deg,var(--brand),var(--brand-2));
        }

        .toast.lock.banner .toast-body {
            color: #0f172a;
            min-width: 0;
        }

            .toast.lock.banner .toast-body strong {
                font-size: 14px;
                font-weight: 700;
                line-height: 1.2;
            }

            .toast.lock.banner .toast-body .msg {
                font-size: 13px;
                color: #334155;
                line-height: 1.35;
            }

        .toast.lock.banner .ago {
            font-size: 12px;
            color: #64748b;
            margin-left: 8px;
        }

    /* 3) ÇİFT animasyonu kes: Sadece banner.play çalışsın */
    .toast.lock.play {
        animation: none !important;
    }
/* varsa iptal et */

/* tek seferlik giriş (1s gecikmeli) */
@keyframes toastSlideUpOnce {
    0% {
        opacity: 0;
        transform: translate(-50%, 18px);
    }

    60% {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.toast.lock.banner.play {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: toastSlideUpOnce .7s cubic-bezier(.2,.65,.3,1) 1s forwards !important;
}

/* Güvenlik: başka genişlik/yükseklik dayatmalarını da ezelim */
.phone .toast {
    width: auto !important;
    height: auto !important;
}

/* ====== FINAL, FORCEFUL OVERRIDES ====== */

/* 0) Eski/yanlış toast'ı tamamen kapat (banner olmayan) */
.phone .screen > .toast:not(.banner) {
    display: none !important;
}

/* 1) Daha soft ekran rengi */
.phone.lockscreen {
    background: #141c30 !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.14) !important;
}

.lockscreen .screen {
    background: radial-gradient(120% 80% at 22% 18%, rgba(72,187,120,.14), transparent 58%), radial-gradient(120% 80% at 78% 82%, rgba(43,108,176,.14), transparent 58%), linear-gradient(180deg, #1d2a52 0%, #132449 100%) !important;
}

/* 2) Banner: başlangıçta ASLA görünmesin ve küçük olsun */
.toast.lock.banner {
    position: absolute;
    left: 50%;
    bottom: 86px;
    transform: translate(-50%,18px);
    width: auto !important;
    max-width: 300px !important;
    min-width: 260px;
    min-height: 50px;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 12px 24px rgba(17,24,39,.18);
    z-index: 3;
    /* GİZLİ BAŞLA */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

    /* Banner içerik tipografisi (kompakt) */
    .toast.lock.banner .dot {
        width: 18px;
        height: 18px;
        border-radius: 8px;
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
    }

    .toast.lock.banner .toast-body {
        color: #0f172a;
        min-width: 0;
    }

        .toast.lock.banner .toast-body strong {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
        }

        .toast.lock.banner .toast-body .msg {
            font-size: 13px;
            color: #334155;
            line-height: 1.35;
        }

    .toast.lock.banner .ago {
        font-size: 12px;
        color: #64748b;
        margin-left: 8px;
    }

/* 3) ÇİFT animasyonu kesin: eski play animasyonlarını iptal et */
.toast.lock.play {
    animation: none !important;
}

/* 4) Sadece .play olduğunda görün ve animasyonla gel (1 sn gecikmeli, tek sefer) */
@keyframes toastSlideUpOnce {
    0% {
        opacity: 0;
        transform: translate(-50%,18px)
    }

    60% {
        opacity: 1;
        transform: translate(-50%,0)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

.toast.lock.banner.play {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: toastSlideUpOnce .7s cubic-bezier(.2,.65,.3,1) 1s forwards !important;
}

/* ===== FINAL BANNER FIX ===== */

/* 1) Banner'ı gerçekten alt ortada tut; yukarıdaki .toast kurallarını sıfırla */
.toast.lock.banner {
    position: absolute !important;
    /* önceki top/right değerlerini kesin kaldır */
    top: auto !important;
    right: auto !important;
    left: 50% !important;
    bottom: 86px !important;
    transform: translate(-50%,18px) !important;
    /* kompakt boyut */
    width: auto !important;
    max-width: 300px !important;
    min-width: 260px !important;
    height: auto !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 12px 24px rgba(17,24,39,.18);
    z-index: 3;
    /* BAŞLANGIÇTA GÖRÜNMESİN */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2) Diğer .toast.play animasyonlarını iptal et; sadece banner.play çalışsın */
.toast.lock.play {
    animation: none !important;
}

/* 3) 1 sn gecikmeli tek seferlik animasyon */
@keyframes toastSlideUpOnce {
    0% {
        opacity: 0;
        transform: translate(-50%,18px)
    }

    60% {
        opacity: 1;
        transform: translate(-50%,0)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

.toast.lock.banner.play {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: toastSlideUpOnce .7s cubic-bezier(.2,.65,.3,1) 1s forwards !important;
}

/* 4) Ekranı biraz daha soft yap (opsiyonel ama önerilir) */
.phone.lockscreen {
    background: #141c30 !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.14) !important;
}

.lockscreen .screen {
    background: radial-gradient(120% 80% at 22% 18%, rgba(72,187,120,.14), transparent 58%), radial-gradient(120% 80% at 78% 82%, rgba(43,108,176,.14), transparent 58%), linear-gradient(180deg, #1d2a52 0%, #132449 100%) !important;
}

/* ================================
   PHONE MOCKUP: final overrides
   ================================ */

/* A) Hero kart çerçevesini KALDIR (ince çerçeve sorunu) */
.hero-card.phone-slide {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* B) Ekranı daha “canlı” yap: hareketli blob'lar + vignette */
.phone.lockscreen {
    background: #141c30 !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.14) !important;
}

.lockscreen .screen {
    position: absolute;
    inset: 8px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(140% 90% at 50% 0%, #1e325e 0%, #132449 60%);
    /* iç vignette */
    box-shadow: inset 0 -60px 120px rgba(0,0,0,.35), inset 0 20px 60px rgba(255,255,255,.06);
}

    /* hareketli yumuşak bloblar */
    .lockscreen .screen::before,
    .lockscreen .screen::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        filter: blur(50px);
        opacity: .30;
        pointer-events: none;
        mix-blend-mode: screen; /* parlak ama yumuşak */
        animation: blobMove 12s ease-in-out infinite alternate;
    }

    .lockscreen .screen::before {
        background: radial-gradient(circle at 30% 30%, rgba(72,187,120,.55), transparent 60%);
        left: -120px;
        top: -60px;
    }

    .lockscreen .screen::after {
        background: radial-gradient(circle at 70% 70%, rgba(43,108,176,.55), transparent 60%);
        right: -140px;
        bottom: -80px;
        animation-duration: 14s;
    }

@keyframes blobMove {
    0% {
        transform: translate3d(0,0,0) scale(1);
    }

    100% {
        transform: translate3d(20px,14px,0) scale(1.05);
    }
}

/* C) Toast: kompakt, başlangıçta tamamen gizli; .play ile 1sn gecikmeli gelir */
.toast.lock.banner {
    position: absolute !important;
    top: auto !important;
    right: auto !important; /* eski top/right'ı iptal */
    left: 50% !important;
    bottom: 86px !important;
    transform: translate(-50%,18px) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    width: auto !important;
    min-width: 260px !important;
    max-width: 300px !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 12px 24px rgba(17,24,39,.18);
    /* ilk anda hiç görünmesin */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

    .toast.lock.banner .dot {
        width: 18px;
        height: 18px;
        border-radius: 8px;
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
    }

    .toast.lock.banner .toast-body strong {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
    }

    .toast.lock.banner .toast-body .msg {
        font-size: 13px;
        color: #334155;
        line-height: 1.35;
    }

    .toast.lock.banner .ago {
        font-size: 12px;
        color: #64748b;
    }

/* Diğer .toast.play animasyonları varsa iptal et; sadece banner.play çalışsın */
.toast.lock.play {
    animation: none !important;
}

/* tek seferlik giriş (.play sınıfını JS 1 sn sonra ekliyor) */
@keyframes toastSlideUpOnce {
    0% {
        opacity: 0;
        transform: translate(-50%,18px)
    }

    60% {
        opacity: 1;
        transform: translate(-50%,0)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

.toast.lock.banner.play {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: toastSlideUpOnce .7s cubic-bezier(.2,.65,.3,1) 0s forwards !important; /* gecikme JS'te */
}

/* === HAPPS: Banner animasyon fix (sona ekle) ==================== */
/* Başlangıç durumu: görünmesin + aşağıda dursun */
.toast.lock.banner {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    /* ALTA KONUM + animasyon için net başlangıç */
    transform: translate(-50%, 26px) !important;
    will-change: transform, opacity;
}

/* Sadece .play gelince: görünür + alttan yukarı kay */
@keyframes happsToastRise {
    0% {
        transform: translate(-50%, 26px);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    85% {
        transform: translate(-50%, -2px);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

.toast.lock.banner.play {
    visibility: visible !important;
    pointer-events: auto !important;
    /* JS zaten .play’i 1 sn sonra ekliyor → burada gecikme 0 */
    animation: happsToastRise .65s cubic-bezier(.2,.65,.3,1) 0s both !important;
}

.hero-card.phone-slide {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* === HAPPS TOAST ANIM TRIGGER === */
.toast.lock.banner {
    /* layout: küçük banner ve alt-orta konum (görünürlük aşağıda kontrol) */
    position: absolute !important;
    left: 50% !important;
    bottom: 86px !important;
    transform: translate(-50%, 0); /* normal konum (animasyon öncesi .pre ile aşağı alacağız) */
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    width: auto !important;
    min-width: 260px !important;
    max-width: 300px !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9) !important;
    box-shadow: 0 12px 24px rgba(17,24,39,.18);
    z-index: 3;
    will-change: transform, opacity;
}

    /* Başlangıç: görünmesin + aşağıda dursun */
    .toast.lock.banner.pre {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-50%, 26px) !important;
    }

/* Animasyon tanımı */
@keyframes happsToastRise {
    0% {
        transform: translate(-50%, 26px);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    85% {
        transform: translate(-50%, -2px);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

/* Oynatma: görünür + animasyon */
.toast.lock.banner.play {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: happsToastRise .65s cubic-bezier(.2,.65,.3,1) 0s both !important;
}

/* Çakışmaları kapat: başka .toast.play animasyonları varsa iptal et */
.toast.lock.play {
    animation: none !important;
}

/* ===== HAPPS: TOAST SLIDE-IN (RIGHT) — FINAL OVERRIDES ===== */

/* Önce eski animasyonları tamamen kapat ki transition devreye girsin */
.toast.lock,
.toast.lock.banner,
.toast.lock.play,
.toast.lock.banner.play {
    animation: none !important;
}

    /* Banner konumu: SAĞ-ALT, kompakt ölçüler */
    .toast.lock.banner {
        position: absolute !important;
        right: 16px !important;
        left: auto !important;
        bottom: 86px !important;
        top: auto !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        width: auto !important;
        max-width: 320px !important;
        min-width: 260px !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.95) !important;
        backdrop-filter: blur(6px);
        border: 1px solid rgba(226,232,240,.9) !important;
        box-shadow: 0 12px 24px rgba(17,24,39,.18);
        z-index: 3;
        /* BAŞLANGIÇ: görünmesin + SAĞDA beklesin */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(24px) !important;
        /* ANİMASYON YERİNE TRANSITION (daha stabil) */
        transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s linear .55s; /* görünmezken tıklanmasın */
    }

        /* Göster (JS 1 sn sonra .show ekliyor) */
        .toast.lock.banner.show {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transform: translateX(0) !important;
            transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s; /* hemen görünür olsun */
        }

        /* İçerik tipografisi */
        .toast.lock.banner .dot {
            width: 18px;
            height: 18px;
            border-radius: 8px;
            background: linear-gradient(135deg,var(--brand),var(--brand-2));
        }

        .toast.lock.banner .toast-body strong {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
        }

        .toast.lock.banner .toast-body .msg {
            font-size: 13px;
            color: #334155;
            line-height: 1.35;
        }

        .toast.lock.banner .ago {
            font-size: 12px;
            color: #64748b;
        }

/* Mockup: çerçeveyi kaldır + arkaplana hareket ver (opsiyonel, zaten eklediysen atla) */
.hero-card.phone-slide {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.phone.lockscreen {
    background: #141c30 !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.14) !important;
}

.lockscreen .screen {
    position: absolute;
    inset: 8px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(140% 90% at 50% 0%, #1e325e 0%, #132449 60%);
    box-shadow: inset 0 -60px 120px rgba(0,0,0,.35), inset 0 20px 60px rgba(255,255,255,.06);
}

    .lockscreen .screen::before,
    .lockscreen .screen::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        filter: blur(50px);
        opacity: .30;
        pointer-events: none;
        mix-blend-mode: screen;
        animation: blobMove 12s ease-in-out infinite alternate;
    }

    .lockscreen .screen::before {
        background: radial-gradient(circle at 30% 30%, rgba(72,187,120,.55), transparent 60%);
        left: -120px;
        top: -60px;
    }

    .lockscreen .screen::after {
        background: radial-gradient(circle at 70% 70%, rgba(43,108,176,.55), transparent 60%);
        right: -140px;
        bottom: -80px;
        animation-duration: 14s;
    }

@keyframes blobMove {
    0% {
        transform: translate3d(0,0,0) scale(1)
    }

    100% {
        transform: translate3d(20px,14px,0) scale(1.05)
    }
}

/* ===== HAPPS FINAL: Toast kesin görünme + sağdan kayma ===== */

/* Önceki tüm animasyon/vis kurallarını geçersiz kıl */
.phone.lockscreen .screen > .toast.lock,
.phone.lockscreen .screen > .toast.lock.banner,
.phone.lockscreen .screen > .toast.lock.play,
.phone.lockscreen .screen > .toast.lock.banner.play {
    animation: none !important;
}

    /* Başlangıç: DOM'da kalsın (IO çalışsın) ama görünmesin, SAĞDA beklesin */
    .phone.lockscreen .screen > .toast.lock.banner {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        right: 16px !important;
        bottom: 86px !important;
        display: grid !important; /* asla display:none olmasın */
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        width: auto !important;
        max-width: 320px !important;
        min-width: 260px !important;
        min-height: 50px !important;
        height: auto !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.95) !important;
        backdrop-filter: blur(6px);
        border: 1px solid rgba(226,232,240,.9) !important;
        box-shadow: 0 12px 24px rgba(17,24,39,.18);
        z-index: 3;
        /* GİZLİ BAŞLA + SAĞDA DURSUN */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(24px) !important;
        transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s linear .55s; /* gizliyken tıklanmasın */
    }

        /* Göster: .show gelince transition çalışsın */
        .phone.lockscreen .screen > .toast.lock.banner.show {
            opacity: 1 !important;
            visibility: visible !important; /* görünür yap */
            pointer-events: auto !important;
            transform: translateX(0) !important;
            transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s; /* anında görünür */
        }

        /* İçerik */
        .phone.lockscreen .screen > .toast.lock.banner .dot {
            width: 18px;
            height: 18px;
            border-radius: 8px;
            background: linear-gradient(135deg,var(--brand),var(--brand-2));
        }

        .phone.lockscreen .screen > .toast.lock.banner .toast-body strong {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
        }

        .phone.lockscreen .screen > .toast.lock.banner .toast-body .msg {
            font-size: 13px;
            color: #334155;
            line-height: 1.35;
        }

        .phone.lockscreen .screen > .toast.lock.banner .ago {
            font-size: 12px;
            color: #64748b;
        }

/* Arka planı biraz daha canlı tutmak için (opsiyonel) */
.hero-card.phone-slide {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.phone.lockscreen {
    background: #141c30 !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.14) !important;
}

.lockscreen .screen {
    position: absolute;
    inset: 8px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(140% 90% at 50% 0%, #1e325e 0%, #132449 60%);
    box-shadow: inset 0 -60px 120px rgba(0,0,0,.35), inset 0 20px 60px rgba(255,255,255,.06);
}

    .lockscreen .screen::before,
    .lockscreen .screen::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        filter: blur(50px);
        opacity: .30;
        pointer-events: none;
        mix-blend-mode: screen;
        animation: blobMove 12s ease-in-out infinite alternate;
    }

    .lockscreen .screen::before {
        background: radial-gradient(circle at 30% 30%, rgba(72,187,120,.55), transparent 60%);
        left: -120px;
        top: -60px;
    }

    .lockscreen .screen::after {
        background: radial-gradient(circle at 70% 70%, rgba(43,108,176,.55), transparent 60%);
        right: -140px;
        bottom: -80px;
        animation-duration: 14s;
    }

@keyframes blobMove {
    0% {
        transform: translate3d(0,0,0) scale(1)
    }

    100% {
        transform: translate3d(20px,14px,0) scale(1.05)
    }
}

/* ===== Centered toast (keep slide-in from right) ===== */
.phone.lockscreen .screen > .toast.lock.banner {
    /* SAĞDAN değil, ALT-ORTA'ya sabitle */
    right: auto !important;
    left: 50% !important;
    bottom: 86px !important;
    top: auto !important;
    /* Başlangıç: ortalanmış konum + sağdan 24px offset (geçiş için) */
    transform: translate(-50%, 0) translateX(24px) !important;
    /* genişlik sınırı—merkezleme için iyi görünür */
    max-width: 320px !important;
    min-width: 260px !important;
}

    /* Gösterildiğinde: ortalanmış hâlde offset'i sıfırla */
    .phone.lockscreen .screen > .toast.lock.banner.show {
        transform: translate(-50%, 0) translateX(0) !important;
    }

/* ===== Phone: Rapor kartı ===== */
.report-card {
    position: absolute;
    left: 50%;
    bottom: 86px;
    transform: translate(-50%, 18px);
    width: auto;
    min-width: 280px;
    max-width: 320px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 12px 24px rgba(17,24,39,.18);
    color: #0f172a;
    z-index: 3;
    /* başlangıçta gizli */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* alttan kayma */
    transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s linear .55s;
}

    .report-card.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
        transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s;
    }

/* Rapor içi minik görseller */
.report-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px
}

    .report-head strong {
        font-size: 14px
    }

    .report-head .mini {
        margin-left: auto;
        color: #64748b;
        font-size: 12px
    }

.report-kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-bottom: 8px
}

.kpi-mini {
    background: rgba(15,23,42,.06);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 10px;
    padding: 8px
}

    .kpi-mini span {
        display: block;
        font-size: 11px;
        color: #64748b
    }

    .kpi-mini b {
        font-size: 13px
    }

.report-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(15,23,42,.08);
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.1)
}

    .report-progress .bar {
        height: 100%;
        width: var(--p,60%);
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
        border-radius: 999px;
        transition: width .6s ease;
    }

/* Toast'ı alt-orta ve animasyonlu tut (merkez + sağdan kayma) */
.phone.lockscreen .screen > .toast.lock.banner {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 86px !important;
    transform: translate(-50%, 0) translateX(24px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s linear .55s;
}

    .phone.lockscreen .screen > .toast.lock.banner.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0) translateX(0) !important;
        transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1), visibility 0s;
    }

/* Çakışan eski animasyonları kapat */
.toast.lock,
.toast.lock.banner,
.toast.lock.play,
.toast.lock.banner.play {
    animation: none !important;
}

/* Rapor kartı mevcut stillerini kullanıyor; yalnızca ekler: */
.report-card { /* zaten var: transition/konum */
}

    .report-card.show { /* zaten var */
    }

/* Donut + efsane */
.pay-breakdown {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px
}

.donut {
    --size: 64px;
    --banka: 50; /* % */
    --link: 30;
    --wa: 20;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient( var(--brand) calc(var(--banka)*1%), #ffffff00 0 ), conic-gradient( var(--brand-2) calc((var(--banka) + var(--link))*1%), #ffffff00 0 ), conic-gradient( #7c8aa5 calc((var(--banka) + var(--link) + var(--wa))*1%), #ffffff00 0 );
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset;
}

    .donut .hole {
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;
    }

.legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px
}

    .legend li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #334155
    }

    .legend .c {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        display: inline-block
    }

.c-banka {
    background: var(--brand)
}

.c-link {
    background: var(--brand-2)
}

.c-wa {
    background: #7c8aa5
}

/* Küçük dokunuş: kartlar dikeyde biraz daha kompakt */
.report-kpis .kpi-mini b {
    font-weight: 700
}

/* Happs Ekosistemi – 4 sütun grid (responsive) */
#cozumler .cards-3 {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1100px) {
    #cozumler .cards-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    #cozumler .cards-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Kart başlıklarını ortala ve iki satır hiyerarşi */
.card .card-head {
    text-align: center;
    margin-bottom: 10px;
}

    .card .card-head .product {
        margin: 0;
        font-size: 20px;
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .card .card-head .subtitle {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        color: var(--muted);
        font-weight: 500;
    }

/* Eski başlık stili kalmışsa etkisiz kılalım */
.card > h3 {
    display: none !important;
}

/* ======================
   Footer – Yatay düzen
   ====================== */
.site-footer {
    background: linear-gradient(135deg, rgba(43,108,176,0.05), rgba(72,187,120,0.05));
    border-top: 1px solid var(--line);
    padding: 28px 0 16px;
    color: var(--text);
    font-size: 14px;
}

.footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Sol taraf (marka) */
.footer-left .brand-text {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}

/* Orta kısım bağlantılar */
.footer-center .footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
}

.footer-links a {
    color: var(--text);
    text-decoration: none;
}

    .footer-links a:hover {
        color: var(--brand);
    }

.footer-links .sep {
    color: var(--muted);
    opacity: .6;
}

/* Sağ taraf (iletişim) */
.footer-right .contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

    .footer-right .contact-list li {
        margin: 2px 0;
    }

.footer-right a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}

    .footer-right a:hover {
        color: var(--brand-2);
    }

/* Copyright */
.copyright {
    border-top: 1px solid rgba(226,232,240,0.7);
    text-align: center;
    margin-top: 16px;
    padding-top: 10px;
    font-size: 13px;
    color: var(--muted);
}

/* Responsive uyum */
@media(max-width:800px) {
    .footer-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-right .contact-list {
        text-align: center;
    }
}

/* ===== ERP logo slider ===== */
.erp-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 10px 0;
}

.erp-track {
    display: flex;
    align-items: center;
    gap: 28px;
    /* kesintisiz akış için geniş bir şerit gibi davranır */
    width: max-content;
    animation: erpMarquee 24s linear infinite;
}

.erp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px; /* logo yüksekliği alanı */
    padding: 6px 8px;
    opacity: .9;
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
    filter: grayscale(100%); /* kurumsal gri görünüm */
}

    .erp:hover {
        opacity: 1;
        filter: grayscale(0%);
        transform: translateY(-2px);
    }

    .erp img {
        height: 100%;
        width: auto;
        max-width: 160px; /* çok uzun logoları kısıtla */
        object-fit: contain;
    }

/* akış animasyonu: sola doğru kaydır */
@keyframes erpMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    /* track içeriği iki kez olduğu için %50 kaydırma yeter */
}

/* Hover’da durdur (isteğe bağlı) */
.erp-slider:hover .erp-track {
    animation-play-state: paused;
}

/* Erişilebilirlik: kullanıcı hareketi azaltmışsa durdur */
@media (prefers-reduced-motion: reduce) {
    .erp-track {
        animation: none;
    }
}

/* ===== Monitor Mockup ===== */
.monitor-card {
    padding: 16px !important
}

.monitor {
    background: #0f172a;
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(2,6,23,.28);
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
}

.mon-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(226,232,240,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

    .mon-topbar .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .mon-topbar .red {
        background: #ef4444
    }

.yellow {
    background: #f59e0b
}

.green {
    background: #22c55e
}

.mon-topbar .tabs {
    margin-left: auto;
    display: flex;
    gap: 8px
}

.tabs .tab {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #cbd5e1;
    border: 1px solid transparent
}

    .tabs .tab.is-active {
        background: #1f2a44;
        color: #fff;
        border-color: #334155
    }

.mon-screen {
    position: relative;
    height: 320px;
    background: radial-gradient(120% 80% at 20% 10%, rgba(72,187,120,.14), transparent 60%), radial-gradient(120% 80% at 90% 85%, rgba(43,108,176,.14), transparent 60%), linear-gradient(180deg,#0f1b36,#0b142a);
}

.mon-stand {
    width: 140px;
    height: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.35);
    margin: 12px auto 2px;
}

/* Slides */
.slides {
    position: absolute;
    inset: 0;
    display: flex;
    transition: transform .6s cubic-bezier(.2,.65,.3,1);
}

.mon-slide {
    min-width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px
}

.kpi {
    background: rgba(148,163,184,.12);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px;
    padding: 10px 12px
}

    .kpi span {
        display: block;
        font-size: 12px;
        color: #94a3b8
    }

    .kpi b {
        font-size: 16px;
        color: #fff
    }

/* Sparkline fake (gradient) */
.sparkline {
    height: 60px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)), repeating-linear-gradient(90deg, rgba(148,163,184,.12) 0 1px, transparent 1px 6px);
    position: relative;
    overflow: hidden;
}

    .sparkline::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(72,187,120,.5), rgba(43,108,176,.5));
        clip-path: polygon(0% 70%, 8% 62%, 16% 68%, 24% 55%, 32% 58%, 40% 46%, 48% 54%, 56% 38%, 64% 44%, 72% 36%, 80% 42%, 88% 30%, 100% 34%);
        opacity: .8;
    }

/* Bar group */
.bar-group {
    display: grid;
    gap: 8px
}

.bar {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 10px
}

    .bar span {
        font-size: 12px;
        color: #94a3b8
    }

    .bar em {
        height: 8px;
        border-radius: 999px;
        background: rgba(148,163,184,.18);
        position: relative;
        overflow: hidden
    }

        .bar em::before {
            content: "";
            position: absolute;
            inset: 0;
            width: var(--w,50%);
            background: linear-gradient(135deg,var(--brand),var(--brand-2))
        }

/* Big progress */
.progress.big {
    height: 12px;
    background: rgba(148,163,184,.18);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 999px;
    overflow: hidden
}

.pbar {
    height: 100%;
    width: var(--p,60%);
    background: linear-gradient(135deg,var(--brand),var(--brand-2));
    transition: width .6s ease
}

/* Donut */
.donut3 {
    display: flex;
    align-items: center;
    gap: 12px
}

    .donut3 svg {
        width: 88px;
        height: 88px;
        transform: rotate(-90deg)
    }

    .donut3 .bg {
        fill: none;
        stroke: rgba(148,163,184,.22);
        stroke-width: 3
    }

    .donut3 .seg {
        fill: none;
        stroke-width: 3;
        stroke-linecap: round;
        transition: stroke-dasharray .6s ease
    }

        .donut3 .seg.web {
            stroke: var(--brand)
        }

        .donut3 .seg.mrkt {
            stroke: var(--brand-2)
        }

        .donut3 .seg.field {
            stroke: #7c8aa5
        }

.legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #cbd5e1
}

    .legend .c {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        display: inline-block;
        margin-right: 6px
    }

        .legend .c.web {
            background: var(--brand)
        }

        .legend .c.mrkt {
            background: var(--brand-2)
        }

        .legend .c.field {
            background: #7c8aa5
        }

/* Active slide tabs */
.monitor[data-step="1"] .tabs .tab:nth-child(1),
.monitor[data-step="2"] .tabs .tab:nth-child(2),
.monitor[data-step="3"] .tabs .tab:nth-child(3) {
    background: #1f2a44;
    color: #fff;
    border-color: #334155
}

/* Slide positions */
.monitor[data-step="1"] .slides {
    transform: translateX(0%);
}

.monitor[data-step="2"] .slides {
    transform: translateX(-100%);
}

.monitor[data-step="3"] .slides {
    transform: translateX(-200%);
}

/* Responsive */
@media (max-width: 900px) {
    .mon-screen {
        height: 280px
    }

    .row {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width: 600px) {
    .row {
        grid-template-columns: 1fr 1fr
    }
}

/* ===== MONITOR REFINEMENTS ===== */

/* Çerçeveyi kaldır ve arka planı netleştir */
.monitor-card {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.monitor {
    background: #0d1424 !important;
    border: none !important;
    box-shadow: 0 18px 38px rgba(2,6,23,.28) !important;
}

.mon-stand {
    width: 120px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,.25);
    margin: 10px auto 0;
}

/* KPI fontlarını küçült ve hizala */
.kpi span {
    font-size: 11px !important;
    color: #cbd5e1 !important;
    display: block;
    line-height: 1.1;
}

.kpi b {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #fff !important;
    display: block;
    margin-top: 2px;
}

    /* TL simgesini aynı satıra taşı (inline align) */
    .kpi b::before {
        content: "₺ ";
        font-size: 13px;
        font-weight: 500;
        opacity: .9;
    }

/* Legend yazılarını beyaz yap */
.legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #f8fafc !important; /* beyaz */
}

    .legend li {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .legend .c {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        display: inline-block;
    }

/* Daha dar bir ekran içi alan — mockup daha kompakt */
.mon-screen {
    height: 300px !important;
    border-radius: 0 !important;
}

/* Topbar ve sekme fontları ufalt */
.mon-topbar {
    padding: 8px 10px !important;
}

.tabs .tab {
    font-size: 11px !important;
    padding: 4px 8px !important;
}

/* Row ve KPI grid aralıklarını daralt */
.row {
    gap: 6px !important;
}

.kpi {
    padding: 8px 10px !important;
}

/* Genel beyaz balans */
.mon-screen, .monitor {
    color: #f1f5f9 !important;
}

/* Daha parlak graf renkleri */
.donut3 .seg.web {
    stroke: #3b82f6 !important;
}

.donut3 .seg.mrkt {
    stroke: #22c55e !important;
}

.donut3 .seg.field {
    stroke: #94a3b8 !important;
}

/* --- TL simgesini iki kez göstermeyi düzelt --- */
.kpi b::before {
    content: ""; /* kaldırıldı */
}

/* --- Web / Pazaryeri / Saha yazılarını beyaz yap --- */
.legend,
.legend li,
.legend li span,
.legend li .c {
    color: #fff !important;
    fill: #fff !important;
}

    .legend li {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
    }

    .legend .c {
        width: 10px;
        height: 10px;
        border-radius: 2px;
        display: inline-block;
    }

/* --- KPI hizalama ve boşluklar ufaltıldı --- */
.kpi {
    padding: 8px 10px !important;
    border-radius: 10px !important;
}

    .kpi span {
        font-size: 11px !important;
        color: #e2e8f0 !important;
        display: block;
        line-height: 1.1;
    }

    .kpi b {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #fff !important;
        display: block;
        margin-top: 2px;
    }

/* --- Genel arka plan kontrastı daha yumuşak --- */
.monitor {
    background: #0e1628 !important;
}

.mon-screen {
    background: radial-gradient(120% 80% at 20% 10%, rgba(72,187,120,.08), transparent 60%), radial-gradient(120% 80% at 90% 85%, rgba(43,108,176,.08), transparent 60%), linear-gradient(180deg,#0f1b36 0%, #0b142a 100%) !important;
}

/* KPI tutarını tek satırda tut, hizayı düzelt */
.kpi b {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px;
    white-space: nowrap !important; /* kırılmayı engelle */
    font-variant-numeric: tabular-nums; /* sayılar hizalı dursun */
    line-height: 1.15;
}

/* (İsteğe bağlı) kutular biraz geniş nefes alsın */
.row .kpi {
    min-width: 0;
}
/* grid overflow’u önler */

/* Sonsuz akış: JS loop genişliği ve süreyi ayarlar */
.erp-slider {
    position: relative;
    overflow: hidden;
}

.erp-track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    animation: erpMarquee var(--marquee-duration, 24s) linear infinite;
}

@keyframes erpMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--loop-width, 50%)));
    }
}

/* Hover’da dur (JS de ekliyor, ikisi birlikte çalışır) */
.erp-slider:hover .erp-track {
    animation-play-state: paused;
}

/* ===== ERP Slider – Kesintisiz akış (CSS-only, force) ===== */
.erp-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 10px 0;
    /* kenarlarda yumuşak kırpma (opsiyonel) */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 10%, #000 90%, rgba(0,0,0,0));
    mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 10%, #000 90%, rgba(0,0,0,0));
}

.erp-track {
    display: flex !important;
    align-items: center;
    gap: 28px;
    width: max-content !important; /* içerik kadar genişlik */
    will-change: transform;
    animation: erpScroll 28s linear infinite !important; /* zorla animasyon */
}

@keyframes erpScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    /* içerik iki kez olduğundan -50% yeter */
}

/* Görünüm iyileştirmeleri */
.erp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 6px 8px;
    opacity: .9;
    filter: grayscale(100%);
    transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

    .erp:hover {
        opacity: 1;
        filter: grayscale(0%);
        transform: translateY(-2px);
    }

    .erp img {
        display: block; /* inline boşlukları kaldır */
        height: 100%;
        width: auto;
        max-width: 160px;
        object-fit: contain;
    }

/* Her koşulda çalışsın: reduce-motion açık olsa bile akış sürsün */
@media (prefers-reduced-motion: reduce) {
    .erp-track {
        animation: erpScroll 28s linear infinite !important;
    }
}

/* Olası “pause” kurallarını etkisiz kıl */
.erp-slider:hover .erp-track {
    animation-play-state: running !important;
}

/* ===== Hakkımızda Sayfası ===== */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 24px;
}

.about-block h2 {
    font-size: 22px;
    margin-bottom: 8px;
}

.about-block p {
    line-height: 1.7;
}

.mission-vision {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 24px;
}

.mv-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
}

    .mv-card h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .mv-card p {
        line-height: 1.7;
        color: var(--muted);
    }

@media(max-width:900px) {
    .about-grid, .mission-vision {
        grid-template-columns: 1fr;
    }
}

/* === About: Hero === */
.about-hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: center;
}

.ah-copy h1 {
    margin: 0 0 10px;
    font-size: 32px;
}

.ah-art {
    position: relative;
    min-height: 220px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(43,108,176,.08), rgba(72,187,120,.08));
    border: 1px solid var(--line);
}

    .ah-art .blob {
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        filter: blur(40px);
        opacity: .45;
    }

    .ah-art .b1 {
        left: -40px;
        top: -40px;
        background: radial-gradient(circle, rgba(72,187,120,.6), transparent 60%);
        animation: blob1 12s ease-in-out infinite alternate;
    }

    .ah-art .b2 {
        right: -60px;
        bottom: -60px;
        background: radial-gradient(circle, rgba(43,108,176,.6), transparent 60%);
        animation: blob2 14s ease-in-out infinite alternate;
    }

    .ah-art .gridlines {
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent calc(100% - 1px), rgba(255,255,255,.25) 1px), linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,.25) 1px);
        background-size: 28px 28px, 28px 28px;
        opacity: .35;
    }

@keyframes blob1 {
    from {
        transform: translate(0,0) scale(1)
    }

    to {
        transform: translate(12px,8px) scale(1.06)
    }
}

@keyframes blob2 {
    from {
        transform: translate(0,0) scale(1)
    }

    to {
        transform: translate(-10px,-6px) scale(1.05)
    }
}

@media(max-width:900px) {
    .about-hero {
        grid-template-columns: 1fr;
    }
}

/* === KPI Pills === */
.kpi-band {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.kpi-pill {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 14px;
    text-align: center;
}

    .kpi-pill .t {
        display: block;
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 4px
    }

    .kpi-pill strong {
        font-size: 18px;
        color: var(--brand)
    }

@media(max-width:900px) {
    .kpi-band {
        grid-template-columns: repeat(2,1fr)
    }
}

/* === Timeline === */
.timeline {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 6px
}

    .timeline:before {
        content: "";
        position: absolute;
        left: 16px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: rgba(43,108,176,.2);
    }

.tl-item {
    position: relative;
    padding-left: 44px
}

    .tl-item .dot {
        position: absolute;
        left: 8px;
        top: 10px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--brand),var(--brand-2));
        box-shadow: 0 0 0 3px rgba(43,108,176,.1);
    }

    .tl-item .card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 12px 14px;
    }

    .tl-item .yr {
        font-weight: 700;
        color: var(--brand);
        margin-bottom: 4px
    }

/* === Values Grid === */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.vcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 16px;
    text-align: center
}

.v-ico {
    font-size: 22px;
}

.vcard h3 {
    margin: 8px 0 6px;
    font-size: 16px
}

@media(max-width:900px) {
    .values-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:600px) {
    .values-grid {
        grid-template-columns: 1fr
    }
}

/* === CTA Band === */
.cta-band {
    background: linear-gradient(135deg, rgba(43,108,176,.08), rgba(72,187,120,.08));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.cta-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

    .cta-flex h3 {
        margin: 0 0 4px
    }

@media(max-width:900px) {
    .cta-flex {
        flex-direction: column;
        text-align: center
    }
}

/* (Senin mevcut about-grid ve mission-vision stillerinle uyumlu çalışır) */

/* === ABOUT HERO GÖRSEL ALANI === */
.about-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 32px;
    align-items: center;
}

.ah-copy p {
    margin: 0;
}

/* Görsel çerçevesi */
.ah-art {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(43,108,176,.08), rgba(72,187,120,.08));
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    border: 1px solid var(--line);
}

/* Görsel responsive */
.about-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.65,.3,1);
}

/* Hover efekti (masaüstünde) */
.ah-art:hover .about-img {
    transform: scale(1.04);
}

/* Mobil uyum */
@media (max-width: 900px) {
    .about-hero {
        grid-template-columns: 1fr;
    }

    .ah-art {
        margin-top: 20px;
        border-radius: 18px;
    }
}

:root {
    --sticky-offset: 80px;
}
/* varsayılan */
html {
    scroll-behavior: smooth; /* yumuşak kaydırma */
    scroll-padding-top: var(--sticky-offset); /* anchor’lar için üst boşluk */
}

/* İstersen bölüm bazlı da verebilirsin */
.section[id] {
    scroll-margin-top: var(--sticky-offset);
}

/* === BLOG === */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
    margin-top: 28px;
}

.blog-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.2,.65,.3,1);
}

    .blog-card:hover {
        transform: translateY(-4px);
    }

    .blog-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

.blog-body {
    padding: 16px 18px;
}

    .blog-body h3 {
        margin: 0 0 8px;
        font-size: 18px;
        color: var(--text);
    }

    .blog-body p {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
    }

@media(max-width:900px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}
.blog-grid .blog-card img {
    height: 160px;
}

.blog-grid .blog-body h3 {
    font-size: 16px;
}

.blog-grid .blog-body p {
    font-size: 13px;
}

.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .blog-card img {
        height: 160px;
    }
}

.post-hero {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.toast {
    position: fixed;
    top: 24px;
    right: 24px;
    min-width: 280px;
    max-width: 400px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    transform: translateY(-20px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 9999;
    pointer-events: none;
    transition: all .4s cubic-bezier(.25,.8,.25,1);
}

    /* Görünür hali */
    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* Başarılı */
    .toast.success {
        background: linear-gradient(135deg, #48bb78, #38a169);
    }

    /* Hatalı */
    .toast.error {
        background: linear-gradient(135deg, #e53e3e, #c53030);
    }

    /* Bilgi */
    .toast.info {
        background: linear-gradient(135deg, #3182ce, #2b6cb0);
    }

/* === Submit Spinner === */
.btn.btn-loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 140px; /* text kayması olmasın */
    justify-content: center;
}

    .btn.btn-loading .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255,255,255,.45);
        border-top-color: #fff;
        border-radius: 50%;
        display: none; /* varsayılan gizli */
        animation: spin .8s linear infinite;
    }

    .btn.btn-loading.is-loading .spinner {
        display: inline-block;
    }

    .btn.btn-loading.is-loading .btn-text {
        opacity: .85;
    }

    .btn.btn-loading:disabled {
        opacity: .85;
        cursor: not-allowed;
    }

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

/* === Phone Mockup: Legend renk düzeltme === */
.phone .legend li {
    color: #0f172a !important; /* siyah benzeri metin */
}

    .phone .legend li b {
        color: #0f172a !important; /* yüzde değerleri de */
    }

.phone .legend .c {
    border: 1px solid rgba(15,23,42,.15); /* renk çubuklarının kontrastını koru */
}

/* Kart ızgarası ufak dokunuş (gerekirse) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fcard {
    padding: 16px;
    border-radius: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

@media (max-width:1000px) {
    .features-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:560px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Slim section spacing */
.section.slim {
    padding: 24px 0;
}

/* Sonsuz kayan logo şeritleri */
.logo-ticker {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 12px 18px;
    animation: ticker 26s linear infinite;
    will-change: transform;
}

.logo-ticker.slow .logo-track {
    animation-duration: 34s;
}
/* ikinci şerit biraz daha yavaş */

.logo-track img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
    opacity: .9;
    transition: opacity .2s ease, transform .2s ease;
}

    .logo-track img:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

/* Hover’da akışı durdur (isteğe bağlı) */
.logo-ticker:hover .logo-track {
    animation-play-state: paused;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    /* içerik 2 kez peş peşe olduğu için %50 ideal */
}

/* --- BANKA & ÖDEME LOGO STANDARDI --- */
.logo-ticker {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 42px;
    padding: 14px 20px;
    animation: ticker 26s linear infinite;
    will-change: transform;
}

.logo-ticker.slow .logo-track {
    animation-duration: 34s;
}

.logo-track img {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
    opacity: 0.9;
    transition: opacity 0.25s ease, transform 0.25s ease;
    background: white; /* bazı svg’ler transparan olabilir, denge için */
    padding: 6px 14px; /* görünümde boşluk farklarını azaltır */
    border-radius: 8px; /* yumuşak köşe */
    box-sizing: content-box;
}

    .logo-track img:hover {
        opacity: 1;
        transform: scale(1.05);
    }

/* hover'da akışı durdurma (isteğe bağlı) */
.logo-ticker:hover .logo-track {
    animation-play-state: paused;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    /* iki set olduğu için -50 ideal */
}

/* mobil uyumluluk */
@media (max-width: 768px) {
    .logo-track {
        gap: 28px;
        padding: 10px 14px;
    }

        .logo-track img {
            height: 32px;
            padding: 4px 10px;
        }
}

.logo-ticker {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.logo-track {
    --w: 0px; /* JS dolduracak */
    display: flex;
    align-items: center;
    gap: 42px;
    padding: 14px 20px;
    width: max-content;
    animation: marquee linear infinite;
    animation-duration: var(--dur, 30s); /* JS doldurur; varsayılan yedek */
    will-change: transform;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--w)));
    }
}

/* Logo standardı */
.logo-track img {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
    opacity: .9;
    transition: opacity .25s ease, transform .25s ease;
    background: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    box-sizing: content-box;
}

    .logo-track img:hover {
        opacity: 1;
        transform: scale(1.05);
    }

/* Hover’da akışı durdurmak istersen: */
.logo-ticker:hover .logo-track {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .logo-track {
        gap: 28px;
        padding: 10px 14px;
    }

        .logo-track img {
            height: 32px;
            padding: 4px 10px;
        }
}

/* === MOCKUP TRANSPARENCY OVERRIDES === */

/* Telefon & Monitör kasası arkaplanı tamamen şeffaf olsun */
.phone, .monitor {
    background: transparent !important;
    /* gölgeyi koruyalım */
    box-shadow: 0 22px 50px rgba(0,0,0,.18);
}

    /* Görüntünün olduğu "ekran" alanı hareketli/animasyonluysa altı da şeffaf kalsın */
    .phone .screen, .monitor .screen, .mock-viewport {
        background: radial-gradient(120% 80% at 22% 18%, rgba(72,187,120,.16), transparent 60%), radial-gradient(120% 80% at 78% 82%, rgba(43,108,176,.16), transparent 60%), linear-gradient(180deg, rgba(26,36,70,.0) 0%, rgba(15,27,54,.0) 100%) !important; /* tamamen transparan */
        overflow: hidden; /* taşmaları gizle */
    }

        /* Eğer alt kenarda tek piksellik bir çizgi görünüyorsa */
        .phone .screen::after, .monitor .screen::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 98%, rgba(0,0,0,0) 100%); /* kapatıcı şeffaf overlay */
        }

/* Dinamik adacık / homebar siyah görünmesin */
.island {
    background: rgba(0,0,0,.55) !important;
}

.homebar {
    background: rgba(255,255,255,.5) !important;
}

/* Hareket eden katmana şeffaf arkaplan teminatı */
.mock-float, .mock-slide {
    background: transparent !important;
    will-change: transform;
}

.card[data-href]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    transition: all .2s ease;
}

/* =========================
   Kart hover animasyonu
   ========================= */
.card[data-href] {
    position: relative;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .card[data-href]:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 26px rgba(0,0,0,.1);
    }

/* Hover alt yazısı */
.card-hover-hint {
    position: absolute;
    bottom: -24px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent, #2b6cb0);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

.card[data-href]:hover .card-hover-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive düzeltme */
@media (max-width: 768px) {
    .card-hover-hint {
        font-size: 0.8rem;
        bottom: -18px;
    }
}

/* =========================
   HappsPlan özel: Map/Route
   ========================= */
.mapmock {
    overflow: hidden;
}

.map-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(43,108,176,.06), rgba(72,187,120,.06));
    border: 1px solid var(--line);
}

.map-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(26,32,44,.06) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(to bottom, rgba(26,32,44,.06) 1px, transparent 1px) 0 0/24px 24px;
    pointer-events: none;
}

.pin {
    --s: 16px;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

    .pin::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(43,108,176,.35);
        animation: pinPulse 1.8s ease-out infinite;
    }

@keyframes pinPulse {
    0% {
        transform: scale(.7);
        opacity: .8;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.route {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .route path {
        stroke: var(--brand);
        stroke-width: 3;
        opacity: .9;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 420;
        stroke-dashoffset: 420;
    }

.mapmock.play .route path {
    animation: dashReveal 1.8s cubic-bezier(.2,.65,.3,1) .2s forwards;
}

@keyframes dashReveal {
    to {
        stroke-dashoffset: 0;
    }
}

/* Hareketli kurye (CSS motion-path) */
.courier {
    --size: 14px;
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 4px 12px rgba(0,0,0,.22);
    /* rota path'ını CSS'e gömüyoruz (SVG path ile eşleşmeli) */
    offset-path: path("M18,22 C28,28 40,32 54,38 S78,58 78,62 S52,70 32,72");
    offset-rotate: 0deg;
    offset-distance: 0%;
    /* başlangıç konumu; animasyonla ilerleyecek */
}

.mapmock.play .courier {
    animation: courierRun 2.2s cubic-bezier(.2,.65,.3,1) .35s forwards;
}

@keyframes courierRun {
    to {
        offset-distance: 100%;
    }
}

/* =========================
   Progress Rings (Hedef)
   ========================= */
.rings-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.ring-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px;
    text-align: center;
}

.ring {
    width: 140px;
    height: 140px;
    display: block;
    margin: 0 auto 10px;
}

    .ring .bg {
        fill: none;
        stroke: #e6edf7;
        stroke-width: 12;
    }

    .ring .fg {
        fill: none;
        stroke: url(#ringGrad);
        stroke: linear-gradient(135deg,var(--brand),var(--brand-2));
        stroke: var(--brand);
        stroke-width: 12;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        stroke-dasharray: calc(2*3.1416*52);
        stroke-dashoffset: calc(2*3.1416*52);
    }

.ring-card .ring-val {
    font-weight: 700;
    font-size: 22px;
}

.ring-card.play .fg {
    /* yüzde: --p (0..100) */
    animation: ringFill 1.4s cubic-bezier(.2,.65,.3,1) .1s forwards;
}

.ring-card {
    --p: 75;
}
/* default */
@keyframes ringFill {
    to {
        stroke-dashoffset: calc((1 - (var(--p)/100)) * (2*3.1416*52));
    }
}

@media (max-width: 900px) {
    .rings-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Basit Bar Chart
   ========================= */
.perf {
    overflow: hidden;
}

.perf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bars {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    height: 180px;
}

.bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

    .bar .b {
        width: 100%;
        height: 0;
        border-radius: 10px 10px 4px 4px;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        box-shadow: inset 0 -10px 20px rgba(255,255,255,.08);
    }

    .bar .t {
        font-size: 12px;
        color: var(--muted);
    }

.perf.play .bar .b {
    animation: grow .9s cubic-bezier(.2,.65,.3,1) forwards;
    animation-delay: calc(var(--i,0) * .06s);
}

.bars .bar:nth-child(1) .b {
    --i: 1
}

.bars .bar:nth-child(2) .b {
    --i: 2
}

.bars .bar:nth-child(3) .b {
    --i: 3
}

.bars .bar:nth-child(4) .b {
    --i: 4
}

.bars .bar:nth-child(5) .b {
    --i: 5
}

@keyframes grow {
    to {
        height: var(--h, 60%);
    }
}

/* === Daha şık rota çizgisi === */
.route path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Alttaki “halo” efekti */
.route .shadow {
    stroke: rgba(25, 71, 146, .20);
    stroke-width: 6.5;
    filter: blur(.2px);
}

/* Üstteki ana çizgi (dash reveal) */
.route .line {
    stroke: #2b6cb0; /* markaya yakın mavi */
    stroke-width: 3.4;
    opacity: .95;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
}

.mapmock.play .route .line {
    animation: dashReveal 1.6s cubic-bezier(.22,.7,.26,1) .1s forwards;
}

@keyframes dashReveal {
    to {
        stroke-dashoffset: 0;
    }
}

/* Kurye: aynı path üzerinde pürüzsüz hareket */
.courier {
    --size: 13px;
    width: var(--size);
    height: var(--size);
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #48bb78 0%, #2b6cb0 70%);
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    offset-path: path(var(--path)); /* HTML’de verdiğimiz path değişkeni */
    offset-distance: 0%;
    offset-rotate: 0deg;
}

.mapmock.play .courier {
    animation: courierRun 2s cubic-bezier(.22,.7,.26,1) .25s forwards;
}

@keyframes courierRun {
    to {
        offset-distance: 100%;
    }
}

/* Pinleri biraz daha zarif gösterelim */
.pin {
    --s: 16px;
    width: var(--s);
    height: var(--s);
    position: absolute;
    transform: translate(-50%,-50%);
    left: var(--x);
    top: var(--y);
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2b6cb0;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

    .pin::before {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: rgba(43,108,176,.12);
    }

    .pin::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(43,108,176,.28);
        animation: pinPulse 1.8s ease-out infinite;
    }

@keyframes pinPulse {
    0% {
        transform: scale(.75);
        opacity: .9
    }

    100% {
        transform: scale(1.25);
        opacity: 0
    }
}

/* Kutu içinde çizimin nefes alması için ufak padding */
.map-canvas {
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border: 1px solid var(--line);
}

/* === HAPPSPLAN şehir manzaralı harita === */
.citymap {
    overflow: hidden;
}

.city-canvas {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.city-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Kart gölgesi daha yumuşak */
.citymap.card {
    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
    border: 1px solid var(--line);
}

/* Legend */
.map-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 10px;
    color: var(--text);
    font-weight: 500;
}

    .map-legend .dot {
        --c: #2e8b57;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 6px;
        background: var(--c);
        box-shadow: 0 0 0 3px color-mix(in sRGB, var(--c) 25%, transparent);
    }

    .map-legend .dot-b {
        --c: #ff6b6b;
    }

    .map-legend .dot-c {
        --c: #2b6cb0;
    }

/* In-view animasyon tetikleyici (varsa zaten kullanıyorsunuz) */
.js-anim-onview[data-animate="zoom-in"] {
    transform: translateY(10px) scale(.98);
    opacity: 0;
    transition: .6s cubic-bezier(.2,.7,.26,1);
}

.js-anim-onview.play[data-animate="zoom-in"] {
    transform: none;
    opacity: 1;
}

/* (Opsiyonel) SVG içinde hafif parıltı */
.citymap .city-svg {
    filter: saturate(1.03) contrast(1.02);
}

/* === HAPPSAI • Chat Mockup === */
.ai-hero {
    display: grid;
    gap: 36px;
    align-items: start;
    grid-template-columns: minmax(340px, 560px) 1fr;
}

@media (max-width: 960px) {
    .ai-hero {
        grid-template-columns: 1fr;
    }
}

.chatmock {
    background: radial-gradient(120% 80% at 20% 15%, rgba(43,108,176,.16), transparent 60%), radial-gradient(120% 80% at 80% 85%, rgba(72,187,120,.16), transparent 60%), #0f1b36;
    color: #e8f0ff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(15,23,42,.18);
    border: 1px solid rgba(255,255,255,.08);
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .chat-head .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        opacity: .9;
    }

        .chat-head .dot.r {
            background: #ff6b6b;
        }

        .chat-head .dot.y {
            background: #ffd166;
        }

        .chat-head .dot.g {
            background: #06d6a0;
        }

    .chat-head .who {
        margin-left: 6px;
        display: flex;
        flex-direction: column;
    }

    .chat-head .name {
        font-weight: 700;
        letter-spacing: .2px;
    }

    .chat-head .verify {
        font-size: 12px;
        opacity: .7;
    }

.chat-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg {
    max-width: 80%;
    padding: 12px 14px;
    border-radius: 14px;
    line-height: 1.4;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(8px) scale(.98);
    animation: msgIn .6s cubic-bezier(.2,.7,.26,1) forwards;
    animation-delay: var(--d, 0s);
}

    .msg.user {
        margin-left: auto;
        background: #dbeafe;
        color: #0b2244;
        border: 1px solid #c7dcfb;
    }

    .msg.bot {
        background: #1a2b52;
        border: 1px solid rgba(255,255,255,.08);
    }

    .msg.file {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .msg .pill {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 8px;
        background: #f8fafc;
        color: #0b2244;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid #e6eef9;
    }

.inline-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.btn.sm {
    padding: 8px 12px;
    font-size: 14px;
}

.btn.ghost {
    background: transparent;
    color: #e8f0ff;
    border: 1px solid rgba(255,255,255,.2);
}

    .btn.ghost:hover {
        background: rgba(255,255,255,.06);
    }

.typing {
    align-self: flex-start;
    background: #1a2b52;
    border: 1px solid rgba(255,255,255,.08);
    padding: 10px 12px;
    border-radius: 14px;
    width: 64px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    animation: msgIn .4s ease forwards;
    animation-delay: var(--d,0s);
}

    .typing span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #c9d7ff;
        animation: bounce 1.2s infinite ease-in-out;
    }

        .typing span:nth-child(2) {
            animation-delay: .15s;
        }

        .typing span:nth-child(3) {
            animation-delay: .3s;
        }

.split {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    margin: 8px 0 12px;
    opacity: .6;
}

.ai-copy h1 {
    margin-top: 0;
    font-size: 1.9rem;
}

.ai-copy .muted {
    margin: 8px 0 16px;
}

/* Animations */
@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .7;
    }

    40% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* === HUB HERO === */
.hub-hero {
    display: grid;
    gap: 36px;
    align-items: start;
    grid-template-columns: 1fr minmax(340px,560px);
}

@media (max-width:1000px) {
    .hub-hero {
        grid-template-columns: 1fr;
    }
}

.hub-copy h1 {
    margin-top: 0;
}

/* === HUB MAP === */
.hubmap {
    position: relative;
    aspect-ratio: 1/1;
    min-height: 420px;
    background: radial-gradient(120% 80% at 20% 15%, rgba(43,108,176,.10), transparent 60%), radial-gradient(120% 80% at 80% 85%, rgba(72,187,120,.10), transparent 60%), var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
}

.hub-core {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%,-50%);
    background: #0f1b36;
    color: #e8f0ff;
    border: 1px solid rgba(255,255,255,.15);
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 14px 40px rgba(15,23,42,.25);
}

.hub-node {
    --N: 8; /* toplam düğüm */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(calc(var(--i) * (360deg / var(--N)))) translateY(-40%) translateX(42%) rotate(calc(-1 * var(--i) * (360deg / var(--N))));
    transform-origin: center;
    animation: orbit 22s linear infinite;
}

    .hub-node span {
        display: inline-block;
        background: #fff;
        color: #0b2244;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 8px 12px;
        font-weight: 600;
        box-shadow: 0 6px 20px rgba(0,0,0,.08);
        white-space: nowrap;
    }

@keyframes orbit {
    from {
        transform: rotate(var(--start,0deg)) translateY(-40%) translateX(42%) rotate(calc(-1 * var(--start,0deg)));
    }

    to {
        transform: rotate(calc(var(--start,0deg) + 360deg)) translateY(-40%) translateX(42%) rotate(calc(-1 * (var(--start,0deg) + 360deg)));
    }
}

/* === RULE CARD === */
.rulecard {
    overflow: hidden;
}

.rule-head {
    padding: 16px 16px 8px;
    border-bottom: 1px solid var(--line);
}

    .rule-head .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

.tag {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .9rem;
}

.rule-grid {
    display: grid;
    grid-template-columns: 220px 160px 1fr;
    gap: 12px;
    padding: 16px;
}

    .rule-grid .col {
        align-self: center;
    }

    .rule-grid .head {
        font-weight: 700;
        opacity: .8;
    }

.ta-right {
    text-align: right;
}

.chip {
    display: inline-block;
    background: #eef5ff;
    color: #0b2244;
    border: 1px solid #d7e5ff;
    border-radius: 999px;
    padding: 4px 8px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-weight: 600;
}

.rule-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

    .rule-foot .legend {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: .95rem;
    }

    .rule-foot .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
    }

        .rule-foot .dot.d1 {
            background: #3b82f6;
        }

        .rule-foot .dot.d2 {
            background: #10b981;
        }

        .rule-foot .dot.d3 {
            background: #f59e0b;
        }

/* Fiyat sayacı görünümü */
.price {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

/* --- HUB NODES DÜZELTME VE LOGO DESTEĞİ --- */
.hubmap {
    position: relative;
    aspect-ratio: 1/1;
    min-height: 420px;
    background: radial-gradient(circle at 50% 50%, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-core {
    position: relative;
    background: #0f1b36;
    color: #fff;
    font-weight: 700;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    z-index: 10;
}

.hub-node {
    --N: 8;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
    animation: orbit 24s linear infinite;
}

    .hub-node img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 6px 18px rgba(0,0,0,.1);
        padding: 8px;
        transition: transform .3s ease, box-shadow .3s ease;
    }

        .hub-node img:hover {
            transform: scale(1.08);
            box-shadow: 0 10px 25px rgba(0,0,0,.15);
        }

@keyframes orbit {
    from {
        transform: rotate(calc(var(--i) * (360deg / var(--N)))) translateY(-180px) rotate(calc(-1 * var(--i) * (360deg / var(--N))));
    }

    to {
        transform: rotate(calc(var(--i) * (360deg / var(--N)) + 360deg)) translateY(-180px) rotate(calc(-1 * (var(--i) * (360deg / var(--N)) + 360deg)));
    }
}

/* market ikonları tablo için */
.market-icon {
    height: 26px;
    width: auto;
    vertical-align: middle;
}

/* açıklama ortalaması */
.ta-center {
    text-align: center;
}

/* =========================
   HAPPSHUB – dairesel orbit
   ========================= */
@property --spin {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.hubmap {
    position: relative;
    isolation: isolate;
    /* kutu */
    border-radius: 22px;
    background: radial-gradient(120% 80% at 20% 15%, rgba(72,187,120,.08), transparent 60%), radial-gradient(120% 80% at 80% 85%, rgba(43,108,176,.08), transparent 60%), var(--panel, #fff);
    box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08));
    padding: clamp(18px, 2.2vw, 28px);
    aspect-ratio: 16/11; /* responsive yükseklik */
    min-height: 420px;
    overflow: hidden;
    /* orbit değişkenleri */
    --count: 6; /* toplam düğüm (logon) sayısı */
    --r: clamp(120px, 34%, 240px); /* yarıçap */
    --spin: 0deg; /* animasyonla dönecek açı */
    animation: hubspin 36s linear infinite;
}

@keyframes hubspin {
    to {
        --spin: 360deg;
    }
}

/* Merkez “HappsHub” */
.hubmap .hub-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: #0f172a;
    color: #fff;
    padding: 14px 22px;
    border-radius: 16px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15,23,42,.25);
    letter-spacing: .2px;
}

/* Orbitte dönen logolar */
.hubmap .hub-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(64px, 8.2vw, 86px);
    height: clamp(64px, 8.2vw, 86px);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(2,8,23,.10);
    /* her düğümün kendi açısı */
    --angle: calc((360deg / var(--count)) * var(--i));
    /* gerçek konum: merkeze göre dön → yarıçap kadar ötelen → dik tut */
    transform: translate(-50%, -50%) rotate(calc(var(--angle) + var(--spin))) translate(var(--r)) rotate(calc(-1 * (var(--angle) + var(--spin))));
    transition: transform .25s ease, box-shadow .25s ease, scale .25s ease;
}

    .hubmap .hub-node img {
        display: block;
        max-width: 72%;
        max-height: 72%;
        object-fit: contain;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
    }

/* Hover’da hafif büyütme + akışı durdurma */
.hubmap:hover {
    animation-play-state: paused;
}

.hubmap .hub-node:hover {
    scale: 1.06;
    box-shadow: 0 14px 28px rgba(2,8,23,.18);
    z-index: 3;
}

/* Küçük ekranlarda yarıçap ve düğüm boyutunu daralt */
@media (max-width: 640px) {
    .hubmap {
        --r: clamp(92px, 30%, 180px);
    }
}

/* === HUB ORBIT – tam ortalı, eşit açı, boşluksuz === */
.hubmap {
    position: relative;
    padding: 26px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(66,153,225,.06), rgba(72,187,120,.06));
    overflow: hidden;
}

.hub-orbit {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 520px;
    margin: auto;
    /* Dönen hafif bir orbit efekti */
    animation: hub-spin 28s linear infinite;
    /* yarıçap ve düğüm sayısı dıştan override edilebilir */
    --r: 38%;
    --n: 6;
}

@keyframes hub-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Merkezde HappsHub */
.hub-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #0b1222;
    color: #fff;
    font-weight: 700;
    padding: 14px 26px;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(0,0,0,.16);
    z-index: 2;
}

/* Düğüm yerleşimi: i=0..n-1 -> açı = i*(360/n)  */
.hub-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(calc(var(--i)*1deg)) /* placeholder, aşağıda override */
    translate(var(--r)) rotate(calc(-1*var(--i)*1deg));
    z-index: 1;
}

/* Açı hesabını doğru yapmak için 360/n kullanıyoruz, logosu düz kalsın diye geri döndürüyoruz */
.hub-node {
    transform: rotate(calc(var(--i) * (360deg / var(--n)))) translate(var(--r)) rotate(calc(-1 * var(--i) * (360deg / var(--n))));
}

    .hub-node img {
        width: 84px;
        height: 84px;
        object-fit: contain;
        display: block;
        background: #fff;
        border-radius: 999px;
        padding: 16px;
        box-shadow: 0 10px 24px rgba(0,0,0,.10), inset 0 0 0 1px rgba(15,23,42,.06);
        transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
        opacity: .98;
    }

.hubmap:hover .hub-node img {
    opacity: 1;
    transform: scale(1.04);
}

.hubmap:hover .hub-orbit {
    animation-play-state: paused;
}

/* Küçük ekranlarda biraz küçültelim */
@media (max-width: 768px) {
    .hub-node img {
        width: 70px;
        height: 70px;
        padding: 12px;
    }

    .hub-orbit {
        --r: 40%;
    }
}

/* Rule legend yazıları siyah */
.rule-foot .legend {
    color: #0f172a !important;
}

    .rule-foot .legend .dot {
        margin-right: 8px;
    }

/* ==============================
   HAPPSHUB ORBİT – 6 logo, ortalı
   ============================== */
.hubmap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 520px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(72, 187, 120, .05), rgba(66, 153, 225, .05));
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .hubmap .hub-core {
        position: absolute;
        z-index: 2;
        background: #0f172a;
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
        padding: 14px 26px;
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
        letter-spacing: .3px;
    }

    /* === Orbit alanı === */
    .hubmap .hub-orbit {
        position: relative;
        width: 100%;
        height: 100%;
        animation: hub-rotate 30s linear infinite;
        transform-origin: center center;
        --n: 6;
        --r: 36%;
    }

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

/* === Her logo düğümü === */
.hubmap .hub-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(calc(var(--i) * (360deg / var(--n)))) translate(var(--r)) rotate(calc(-1 * var(--i) * (360deg / var(--n))));
    transition: transform .3s ease, filter .3s ease;
}

    .hubmap .hub-node img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #fff;
        padding: 14px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
        object-fit: contain;
        transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
    }

        .hubmap .hub-node img:hover {
            transform: scale(1.08);
            box-shadow: 0 10px 26px rgba(0, 0, 0, .15);
            opacity: 1;
        }

/* === Hover’da döndürmeyi durdur === */
.hubmap:hover .hub-orbit {
    animation-play-state: paused;
}

/* === Responsive ayarlar === */
@media (max-width: 768px) {
    .hubmap .hub-node img {
        width: 70px;
        height: 70px;
        padding: 10px;
    }

    .hubmap .hub-orbit {
        --r: 44%;
    }
}

/* ===== HAPPSHUB ORBIT – OVERRIDE ===== */
.hubmap.card {
    position: relative !important;
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: radial-gradient(120% 90% at 50% 20%, rgba(72,187,120,.08), transparent 60%), radial-gradient(120% 90% at 30% 85%, rgba(43,108,176,.07), transparent 65%) !important;
}

/* Ortadaki hub */
.hubmap .hub-core {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    background: #0f172a !important;
    color: #fff !important;
    padding: 16px 26px !important;
    border-radius: 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 12px 28px rgba(2,8,23,.25) !important;
    z-index: 2 !important;
}

/* Animasyonu bir CSS değişkeni ile yapalım; logoları dik tutacağız */
@property --rot {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

.hubmap {
    --rot: 0deg;
    --count: 6; /* 6 pazaryeri */
    --radius: 160px; /* halka yarıçapı */
    animation: hub-spin 28s linear infinite;
}

@keyframes hub-spin {
    to {
        --rot: 360deg;
    }
}

/* Düğümler: eşit aralıklı, ortalı dairesel yerleşim */
.hubmap .hub-node {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: rotate(calc(var(--rot) + (360deg/var(--count))*var(--i))) translate(var(--radius)) translate(-50%,-50%) !important;
    transition: transform .25s ease;
}

    /* Logo kapsülü */
    .hubmap .hub-node .img {
        display: grid !important;
        place-items: center !important;
        width: 86px !important;
        height: 86px !important;
        background: #fff !important;
        border-radius: 50% !important;
        box-shadow: 0 10px 22px rgba(2,8,23,.08), inset 0 1px 0 rgba(255,255,255,.7) !important;
        /* Logoyu dik tut: tekerleğin toplam açısına ters yönde döndür */
        transform: rotate(calc(-1 * (var(--rot) + (360deg/var(--count))*var(--i)))) !important;
    }

    /* Logo görseli */
    .hubmap .hub-node img {
        height: 36px !important;
        width: auto !important;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)) !important;
        pointer-events: none !important;
    }

/* Hover’da orbit durabilir istersen */
.hubmap:hover {
    animation-play-state: paused;
}

@media (max-width: 640px) {
    .hubmap {
        --radius: 120px;
    }

        .hubmap .hub-node .img {
            width: 74px;
            height: 74px;
        }

        .hubmap .hub-node img {
            height: 30px;
        }
}

/* ========================================
   HAPPSHUB → PAZARYERİ KAYAN ŞERİDİ (SONSUZ)
   ======================================== */
.logo-ticker {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border-top: 1px solid rgba(15,23,42,.06);
    border-bottom: 1px solid rgba(15,23,42,.06);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 18px 24px;
    width: max-content;
    animation: scroll-marquee 28s linear infinite;
    will-change: transform;
}

/* Sonsuz kayma */
@keyframes scroll-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Logo standardı */
.logo-track img {
    height: 54px;
    width: auto;
    object-fit: contain;
    display: block;
    background: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5);
    transition: transform .3s ease, opacity .3s ease;
    opacity: .95;
}

    .logo-track img:hover {
        transform: scale(1.08);
        opacity: 1;
    }

/* Hover sırasında durdur */
.logo-ticker:hover .logo-track {
    animation-play-state: paused;
}

/* Mobil uyum */
@media (max-width: 768px) {
    .logo-track {
        gap: 32px;
        padding: 14px 18px;
        animation-duration: 36s;
    }

        .logo-track img {
            height: 40px;
            padding: 8px 16px;
        }
}

/* --- Pazaryeri şeridi: optimize boyut & spacing (override) --- */
.logo-ticker {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border-top: 1px solid rgba(15,23,42,.06);
    border-bottom: 1px solid rgba(15,23,42,.06);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 32px !important; /* daha sıkı */
    padding: 12px 18px !important;
    width: max-content;
    animation: hub-marquee 30s linear infinite;
    will-change: transform;
}

@keyframes hub-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
    /* içerik iki kez olduğu için */
}

/* LOGO boyutu: daha küçük & dengeli */
.logo-track img {
    height: 36px !important; /* önceki boyutları ezer */
    width: auto !important;
    object-fit: contain;
    display: block;
    background: #fff;
    padding: 6px 12px !important; /* daha az iç boşluk */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform .25s ease, opacity .25s ease;
    opacity: .95;
}

    .logo-track img:hover {
        transform: scale(1.06);
        opacity: 1;
    }

/* Hover’da akışı durdur (UX) */
.logo-ticker:hover .logo-track {
    animation-play-state: paused;
}

/* Metin yardımcı sınıfı */
.muted.small {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--muted,#64748b);
}

/* Mobil uyum: daha küçük logo ve boşluk */
@media (max-width: 768px) {
    .logo-track {
        gap: 22px !important;
        padding: 10px 14px !important;
        animation-duration: 36s;
    }

        .logo-track img {
            height: 30px !important;
            padding: 5px 10px !important;
            border-radius: 8px;
        }
}

/* ==== JS'SİZ SONSUZ TICKER + RESPONSIVE HIZ ==== */
.logo-ticker {
    position: relative;
    overflow: hidden;
    /* kenarlarda fade için maske (destekli tarayıcılarda) */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 42px;
    padding: 14px 20px;
    width: max-content;
    animation: ticker linear infinite;
    /* Varsayılan süre: orta ekranlar */
    animation-duration: 36s;
    will-change: transform;
}

/* Mobil: daha yavaş */
@media (max-width: 768px) {
    .logo-track {
        animation-duration: 44s;
        gap: 28px;
        padding: 10px 14px;
    }

        .logo-track img {
            height: 28px;
            padding: 4px 10px;
        }
}

/* Geniş ekran: daha yavaş */
@media (min-width: 1200px) {
    .logo-track {
        animation-duration: 54s;
    }
}

@media (min-width: 1600px) {
    .logo-track {
        animation-duration: 70s;
    }
}

@media (min-width: 1920px) {
    .logo-track {
        animation-duration: 86s;
    }
}

/* Banka şeridi için ekstra sakin profil (opsiyonel) */
.logo-ticker.banks .logo-track {
    animation-duration: 42s;
}

@media (min-width: 1200px) {
    .logo-ticker.banks .logo-track {
        animation-duration: 62s;
    }
}

@media (min-width: 1600px) {
    .logo-ticker.banks .logo-track {
        animation-duration: 80s;
    }
}

@media (min-width: 1920px) {
    .logo-ticker.banks .logo-track {
        animation-duration: 96s;
    }
}

/* Kusursuz döngü: içerik iki kez art arda olduğu için -50% */
@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Logo standardı (optimum, dengeli görünüm) */
.logo-track img {
    height: 34px;
    width: auto;
    display: block;
    object-fit: contain;
    background: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    box-sizing: content-box;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
    opacity: .9;
    transition: opacity .2s ease, transform .2s ease;
}

    .logo-track img:hover {
        opacity: 1;
        transform: translateY(-1px);
    }

/* Hareket azalt tercihi */
@media (prefers-reduced-motion: reduce) {
    .logo-track {
        animation: none;
        transform: none;
    }
}

/* Hover'da duraklatma YOK (kafa karıştırmasın) */
.logo-ticker:hover .logo-track {
    animation-play-state: running !important;
}

/* ================================
   TICKER — HARD RESET / OVERRIDE
   ================================ */

/* 1) Kapsayıcı */
body .logo-ticker {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, rgba(43,108,176,.05), rgba(72,187,120,.05)) !important;
    border-top: 1px solid var(--line, rgba(15,23,42,.08)) !important;
    border-bottom: 1px solid var(--line, rgba(15,23,42,.08)) !important;
    /* kenarlarda fade */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important;
}

    /* 2) Ray (iki set logo olmalı) */
    body .logo-ticker .logo-track {
        display: flex !important;
        align-items: center !important;
        gap: 42px !important;
        padding: 14px 20px !important;
        /* sürekli akış için genişlik ve animasyon */
        width: max-content !important;
        will-change: transform !important;
        animation-name: tickerHardReset !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
        /* Varsayılan süre (mobil/laptop dengeli) */
        animation-duration: 36s !important;
    }

        /* 3) Logoların standardı */
        body .logo-ticker .logo-track img {
            height: 38px !important; /* tek yerden kontrol */
            width: auto !important;
            display: block !important;
            object-fit: contain !important;
            /* boy farklarını dengelemek için hafif kart görünümü */
            background: #fff !important;
            padding: 6px 14px !important;
            border-radius: 8px !important;
            box-sizing: content-box !important;
            filter: drop-shadow(0 1px 1px rgba(0,0,0,.06)) !important;
            opacity: .92 !important;
            transition: transform .2s ease, opacity .2s ease !important;
        }

            body .logo-ticker .logo-track img:hover {
                transform: translateY(-1px) !important;
                opacity: 1 !important;
            }

    /* 4) Hover’da asla durmasın (önceki kuralları ezer) */
    body .logo-ticker:hover .logo-track {
        animation-play-state: running !important;
    }

/* 5) Keyframes — iki set olduğu varsayımıyla -50% */
@keyframes tickerHardReset {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* 6) Hız varyantları (isteğe bağlı sınıflar) */
body .logo-ticker.slow .logo-track {
    animation-duration: 46s !important;
}

body .logo-ticker.fast .logo-track {
    animation-duration: 26s !important;
}

/* 7) Ekran genişledikçe yavaşlat (canlıda hız sorunu için) */
@media (min-width: 1200px) {
    body .logo-ticker .logo-track {
        animation-duration: 50s !important;
    }
}

@media (min-width: 1600px) {
    body .logo-ticker .logo-track {
        animation-duration: 66s !important;
    }
}

@media (min-width: 1920px) {
    body .logo-ticker .logo-track {
        animation-duration: 84s !important;
    }
}

/* 8) Bankalar/payments için ayrı ince ayar istersen (opsiyonel) */
body .logo-ticker.banks .logo-track {
    animation-duration: 44s !important;
}

body .logo-ticker.payments .logo-track {
    animation-duration: 40s !important;
}

/* 9) Mobil uyum — dar ekranda elemanlar küçülsün */
@media (max-width: 768px) {
    body .logo-ticker .logo-track {
        gap: 28px !important;
        padding: 10px 14px !important;
    }

        body .logo-ticker .logo-track img {
            height: 32px !important;
            padding: 4px 10px !important;
        }
}