/* Light Material-inspired theme — only CSS changed, HTML untouched */
:root {
    --brand: #0ea5e9; /* primary */
    --brand-600: #0284c7; /* primary hover */
    --ink: #0f172a; /* headings */
    --muted: #475569; /* body text */
    --bg: #f7fafc; /* page bg */
    --card: #ffffff; /* card bg */
    --hair: rgba(2, 6, 23, .08); /* subtle borders */
    --ring: rgba(14,165,233,.22); /* focus ring */
    --shadow-sm: 0 2px 8px rgba(2, 6, 23, .04);
    --shadow-md: 0 8px 24px rgba(2, 6, 23, .08);
    --shadow-lg: 0 16px 40px rgba(2, 6, 23, .10);
}

html {
}

/* Page */
body {
    /*background: var(--bg);*/
    color: var(--ink);
}

/* Navbar */
.navbar {
    background: #ffffff;
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--hair);
}

    .navbar .navbar-brand {
        color: var(--ink);
    }

    .navbar .nav-link.link-light {
        color: #334155 !important;
    }

        .navbar .nav-link.link-light:hover {
            color: #0f172a !important;
        }

.navbar {
    z-index: 1030;
}
/* hero görselinin arkasına kaçmasın */
.navbar-toggler {
    border: 0;
}
    /* sade buton */
    .navbar-toggler:focus {
        box-shadow: none;
    }

.navbar-light .navbar-toggler-icon { /* ikon görünürlüğü */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(15,23,42,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Eski custom .nav-links gibi yapılar varsa mobilde gizleyebilir.
   Güvenli tarafta olmak için: */
@media (max-width: 991.98px) {
    .navbar .nav-link {
        padding: .65rem 1rem;
    }
}

/* Buttons */
.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}

    .btn-brand:hover {
        background: var(--brand-600);
        border-color: var(--brand-600);
    }

.btn-outline-light {
    color: #0f172a;
    border-color: #cbd5e1;
}

    .btn-outline-light:hover {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
    }

/* Hero decorative blob (lighter) */
.hero-blob {
    position: absolute;
    inset: -20% -30% auto auto;
    width: 60vw;
    height: 60vw;
    max-width: 900px;
    /*background: radial-gradient(50% 50% at 50% 50%, rgba(14,165,233,.18) 0%, rgba(14,165,233,0) 70%);*/
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* Badges */
.badge-soft {
    background: rgba(14,165,233,.14);
    color: #0369a1;
    border: 1px solid rgba(14,165,233,.25);
}

/* Cards */
.card-dark {
    background: var(--card);
    border: 1px solid var(--hair);
    box-shadow: var(--shadow-md);
}

    .card-dark:hover {
        box-shadow: var(--shadow-lg);
        transition: box-shadow .2s ease;
    }

.card-title {
    color: var(--ink);
}

/* Feature icons */
.feature-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(14,165,233,.12);
    border: 1px solid rgba(14,165,233,.25);
    color: #0284c7;
}

/* Soft drop shadows & focus ring */
.shadow-soft {
    box-shadow: var(--shadow-sm);
}

.ring {
    box-shadow: 0 0 0 .25rem var(--ring);
}

/* Dividers */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hair), transparent);
}

/* Logo wall */
.logo-wall img {
    filter: grayscale(100%) brightness(0.95);
    opacity: .9;
    transition: .2s;
}

    .logo-wall img:hover {
        filter: none;
        opacity: 1;
    }

/* KPI numbers */
.kpi {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0b3b5c;
}

/* Carousel */
.carousel .carousel-item {
    aspect-ratio: 16/9;
}

    .carousel .carousel-item img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        border: 1px solid var(--hair);
        box-shadow: var(--shadow-sm);
    }

/* Footer */
.footer {
    border-top: 1px solid var(--hair);
    background-color: #fff !important;
    color: #334155;
}

/* Links */
.link-muted {
    color: #334155;
    text-decoration: none;
}

    .link-muted:hover {
        color: #0f172a;
    }

/* Secondary text tone across sections */
header .lead, .text-secondary {
    color: var(--muted) !important;
}

/* Forms (HTML değişmiyor; koyu sınıfları açık temaya override ediyoruz) */
.form-control.bg-dark.text-light {
    background: #ffffff !important;
    color: #0f172a !important;
}

.form-control.border-secondary {
    border-color: #e2e8f0 !important;
}

.form-control:focus {
    box-shadow: 0 0 0 .25rem var(--ring);
    border-color: #7dd3fc;
}

textarea.form-control {
    resize: vertical;
}

/* Video ring color to match light theme */
.ring.rounded-4 {
    box-shadow: 0 0 0 .25rem rgba(14,165,233,.18);
}

/* Navbar brand/icon tint */
.navbar .bi {
    color: var(--brand-600);
}

/* Section paddings remain but feel airy on light bg */
section {
    scroll-margin-top: 80px;
}

/* === Parallax altyapı (sadece CSS) === */
:root {
    --px-overlay: rgba(255,255,255,.70); /* üstte şeffaf aydınlatma */
    --px-overlay-strong: rgba(255,255,255,.82);
}

/* Tüm parallax bölümlerde ortak ayar */
header,
#kpis,
#features,
#screens,
#pricing,
#howitworks,
#contact {
    background-attachment: fixed; /* parallax etkisi */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    isolation: isolate; /* blend/overlay güvenli alan */
}

/* İçerik okunabilirliği: kutular beyaz zeminde kalsın */
.card-dark {
    background: #ffffff;
    border: 1px solid rgba(2,6,23,.08);
    box-shadow: 0 8px 24px rgba(2,6,23,.08);
}

/* NAV + Footer düz beyaz kalsın (parallax'tan etkilenmesin) */
.navbar {
    background: #fff;
}

/*.footer {
    background: #f1f5f9;
}*/

/* --- Her bölüm için arka plan ve aydınlatma (overlay) --- */
/* HERO (header) */
header {
    /* alttaki linear-gradient şeffaf beyaz bir tül gibi; görseli aydınlatır */
    background-image: linear-gradient(0deg, var(--px-overlay-strong), var(--px-overlay)), url('/media/parallax/hero.webp'); /* <- kendi görselin */
}

/* ÖZELLİKLER */
#kpis {
    background-image: linear-gradient(0deg, var(--px-overlay), var(--px-overlay)), url('/media/parallax/kpis.webp'); /* <- kendi görselin */
}

/* ÖZELLİKLER */
#features {
    background-image: linear-gradient(0deg, var(--px-overlay), var(--px-overlay)), url('/media/parallax/features.webp'); /* <- kendi görselin */
}

/* EKRAN GÖRÜNTÜLERİ */
#screens {
    background-image: linear-gradient(0deg, var(--px-overlay), var(--px-overlay)), url('/media/parallax/screens.webp'); /* <- kendi görselin */
}

/* FİYATLANDIRMA */
#pricing {
    background-image: linear-gradient(0deg, var(--px-overlay), var(--px-overlay)), url('/media/parallax/pricing.webp'); /* <- kendi görselin */
}

/* İLETİŞİM */
#howitworks {
    background-image: linear-gradient(0deg, var(--px-overlay-strong), var(--px-overlay)), url('/media/parallax/howitworks.webp'); /* <- kendi görselin */
}

/* İLETİŞİM */
#contact {
    background-image: linear-gradient(0deg, var(--px-overlay-strong), var(--px-overlay)), url('/media/parallax/contact.webp'); /* <- kendi görselin */
}

/* Bölüm iç boşluklarını parallax'ta biraz artır (daha ferah görünüm) */
section, header {
    /*padding-top: clamp(2.5rem, 6vw, 5rem);*/
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* Mobil/iOS performans: parallax'ı kapat, normal scroll yap */
@media (max-width: 991.98px) {
    :root {
        --px-overlay: rgba(255,255,255,.85);
        --px-overlay-strong: rgba(255,255,255,.9);
    }
    header, #kpis, #features, #screens, #pricing, #howitworks, #contact {
        background-attachment: scroll; /* iOS/Safari 'fixed' bug'ı */
        background-position: center top;
    }
}

/* Erişilebilirlik: hareket kısıtlı tercihinde parallax'ı devre dışı bırak */
@media (prefers-reduced-motion: reduce) {
    header, #kpis, #features, #screens, #pricing, #howitworks, #contact {
        background-attachment: scroll;
    }
}
/* Görseller mutlaka ölçeklensin */
img, video {
    max-width: 100%;
    height: auto
}