:root {
    --brand: #0a3767;
    --brand-2: #c4a054;
    --text: #1b1f29;
    --muted: #6c757d;
    --soft: #f5f7fb;
    --radius: 1rem;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--text);
    background: #fff;
}

/* NAV */
.navbar {
    box-shadow: 0 8px 24px rgba(10, 55, 103, .06)
}

.navbar .btn-brand {
    background: var(--brand-2);
    border: none
}

.navbar .btn-brand:hover {
    filter: brightness(.95)
}

/* HERO */
.brand-gradient {
    background: linear-gradient(135deg, var(--brand) 0%, #0d4a8c 60%, #1361b8 100%);
}

.hero {
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://densetica.com/uploads/ekim-min.png') center/cover no-repeat;
    opacity: .45;
    mix-blend: screen;
}

.hero .container {
    position: relative;
    z-index: 2
}

.badge-soft {
    background: rgba(196, 160, 84, .15);
    color: #f8e7c2;
    border: 1px solid rgba(196, 160, 84, .35)
}

/* SECTIONS / CARDS */
.section-head {
    margin-bottom: 1.25rem
}

.section-title {
    font-weight: 800;
    letter-spacing: .2px
}

.lead-hero {
    max-width: 720px
}

.card-k {
    border: 1px solid #edf0f5;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}

.card-k:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(10, 55, 103, .08)
}

.icon-xxl {
    font-size: 44px;
    color: var(--brand-2)
}

.ribbon {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e9eef6;
    color: var(--brand);
    font-weight: 600;
}

.stat {
    background: var(--soft);
    border: 1px solid #edf0f5;
    border-radius: var(--radius)
}

.step {
    display: flex;
    gap: 1rem
}

.step .num {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* BUTTONS */
.btn-brand {
    background: var(--brand);
    color: #fff;
    border: none
}

.btn-brand:hover {
    background: #0c427b
}

.btn-outline-brand {
    border: 1px solid var(--brand);
    color: var(--brand)
}

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

/* FAQ */
.faq .accordion-button:focus {
    box-shadow: none
}

.faq .accordion-button {
    font-weight: 600
}

/* CONTACT */
.contact-card {
    border: 1px solid #edf0f5;
    border-radius: var(--radius)
}

/* FOOTER */
.footer {
    background: #0a1020;
    color: #c9d2e3
}

.footer a {
    color: #e6cc8f;
    text-decoration: none
}

/* FABs */
.whatsapp-fab,
.call-fab {
    position: fixed;
    right: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    z-index: 1040;
}

.whatsapp-fab {
    bottom: 22px;
    background: #25D366
}

.call-fab {
    bottom: 86px;
    background: var(--brand)
}

@media (min-width: 992px) {
    .hero {
        min-height: 78vh;
        display: flex;
        align-items: center
    }
}

/* === BEFORE/AFTER — gerçek “reveal” (görüntü asla ölçeklenmez) === */
.ba-wrap {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9edf5;
    background: #eee;
}

@media (min-width:1200px) {
    .ba-wrap {
        height: 480px
    }
}

@media (max-width:575.98px) {
    .ba-wrap {
        height: 360px
    }
}

.ba-bottom,
.ba-top {
    position: absolute;
    inset: 0;
}

.ba-bottom {
    z-index: 1;
}

.ba-top {
    z-index: 2;
    /* KAPSAYICI TAM BOY KALSIN; genişlik DEĞİŞMEZ */
    /* Sadece görünür alanı kes: */
    --pct: 50;
    clip-path: inset(0 calc(100% - (var(--pct) * 1%)) 0 0);
    will-change: clip-path;
}

.ba-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* gerekirse center top kullan */
    user-select: none;
    pointer-events: none;
    display: block;
}

/* Ayraç & düğme */
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
    z-index: 3;
}

.ba-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25), inset 0 0 0 2px #fff;
    z-index: 4;
}

.ba-label {
    position: absolute;
    top: 10px;
    padding: .3rem .6rem;
    font-weight: 700;
    border-radius: 8px;
    font-size: .9rem;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    z-index: 5;
}

.ba-label.before {
    left: 10px
}

.ba-label.after {
    right: 10px
}

.ba-wrap:focus-within .ba-knob {
    outline: 2px solid #fff
}

.ba-wrap img[src=""] {
    display: none !important;
}