/* =========================================================
   ILGIN RENT A CAR — SITE CSS (V2)
   Tema: Koyu Mavi + Yeşil, modern, animasyonlu geçişler
========================================================= */

/* ---------- THEME TOKENS ---------- */
:root {
    --primary-dark: #071b2f; /* biraz daha derin mavi */
    --primary: #0e3352;
    --primary-soft: #1e5678;
    --accent: #22c28a; /* daha göz alıcı yeşil */
    --accent-dark: #169a6a; /* yeşil koyu tonu */
    --accent-soft: #7ff0cc;
    --bg-main: #f4f6f8;
    --bg-card: #ffffff;
    --bg-dark: #081a2b;
    --text-dark: #0f172a;
    --text-light: #ffffff;
    --text-muted: #64748b;
    --border-light: #e5e7eb;
    --shadow-soft: 0 10px 25px rgba(0,0,0,.08);
    --radius: 16px;
    --radius-sm: 12px;
    --tr: 220ms ease;
}

/* ---------- RESET / BASE ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}
/* Sayfanın genel fontu, yazı rengi ve arkaplan geçişli (gradient) */

body {
    margin: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color: var(--text-dark);
    background: radial-gradient(900px 600px at 10% 10%, rgba(31,169,124,.18), transparent 60%), radial-gradient(900px 600px at 90% 0%, rgba(18,60,90,.18), transparent 60%), linear-gradient(180deg, #f7fafc 0%, var(--bg-main) 100%);
    overflow-x: hidden;
}
/* Link (a) davranışı */

a {
    color: inherit;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

/* Resimler taşmasın */

img {
    max-width: 100%;
    display: block;
}
/* Sayfa genel container ölçüsü */

.container {
    width: min(1200px, calc(100% - 32px));
    margin-inline: auto;
}

/* Sayfa içerik alanı (main) boşlukları */
.site-content {
    min-height: 60vh;
    padding: 22px 0 36px;
}

/* ---------- YARDIMCI SINIFLAR (GENEL KOMPONENTLER) ---------- */
.card {
    background: var(--bg-card);
    border: 1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
    color: var(--text-light);
    box-shadow: 0 10px 22px rgba(18,60,90,.22);
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(18,60,90,.26);
    }

.btn-accent {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: var(--text-light);
    box-shadow: 0 10px 22px rgba(31,169,124,.20);
}

    .btn-accent:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(31,169,124,.26);
    }

.input, input, select, textarea {
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    padding: 12px 14px;
    outline: none;
    transition: border-color var(--tr), box-shadow var(--tr);
    background: #fff;
}

    input:focus, select:focus, textarea:focus {
        border-color: rgba(31,169,124,.55);
        box-shadow: 0 0 0 4px rgba(31,169,124,.14);
    }

/* ---------- ÜST MENÜ / HEADER (MASAÜSTÜ) ---------- */
.header {
    position: relative;
    z-index: 50;
}

.desktop-header {
    background: radial-gradient(900px 450px at 10% 0%, rgba(31,169,124,.22), transparent 55%), linear-gradient(180deg, var(--primary-dark) 0%, var(--bg-dark) 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--text-light);
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu a {
    color: rgba(255,255,255,.92);
    font-weight: 750;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    transition: background var(--tr), color var(--tr), transform var(--tr);
}

    .menu a:hover {
        background: rgba(255,255,255,.10);
        color: #fff;
        transform: translateY(-1px);
    }

.header-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.92);
    font-weight: 750;
}

    .header-icons a {
        padding: 10px 12px;
        border-radius: 999px;
        transition: background var(--tr), transform var(--tr);
    }

        .header-icons a:hover {
            background: rgba(255,255,255,.10);
            transform: translateY(-1px);
        }

/* ---------- DİL SEÇİCİ (BAYRAKLI DROPDOWN) ---------- */
.lang-dd {
    position: relative;
}

.lang-dd__btn {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background var(--tr), transform var(--tr), border-color var(--tr);
}

    .lang-dd__btn:hover {
        background: rgba(255,255,255,.10);
        transform: translateY(-1px);
        border-color: rgba(255,255,255,.26);
    }

.lang-dd__flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
}

.lang-dd__check {
    color: var(--accent-soft);
    font-size: 12px;
}

.lang-dd__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: rgba(11,34,57,.96);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 8px;
    display: none;
    gap: 8px;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
}

.lang-dd.open .lang-dd__menu {
    display: flex;
}

.lang-dd__item {
    width: 38px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--tr), background var(--tr);
}

    .lang-dd__item:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.08);
    }

/* ---------- MOBILE HEADER ---------- */
.mobile-header {
    display: none;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-bottom: 1px solid rgba(255,255,255,.18);
    border-radius: 0 0 18px 18px;
}

.topbar-left {
    min-height: 1px;
}

.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.logobar {
    padding: 14px 0;
    display: flex;
    justify-content: center;
}

    .logobar .logo {
        color: var(--primary-dark);
    }

        .logobar .logo img {
            height: 88px;
        }

.mobilebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    background: radial-gradient(600px 250px at 10% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.mobilebar-btn {
    border: none;
    background: rgba(255,255,255,.10);
    color: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: transform var(--tr), background var(--tr);
}

    .mobilebar-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.14);
    }

.mobilebar-phone {
    color: #fff;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(31,169,124,.22);
    border: 1px solid rgba(255,255,255,.16);
    transition: transform var(--tr), background var(--tr);
}

    .mobilebar-phone:hover {
        transform: translateY(-1px);
        background: rgba(31,169,124,.28);
    }

.wa-circle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobil menü açılır kapanır alan */
.mobilemenu {
    margin-top: 12px;
    display: none;
    background: rgba(11,34,57,.96);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    overflow: hidden;
}

    .mobilemenu.open {
        display: block;
        animation: mmDrop 260ms ease;
    }

@keyframes mmDrop {
    from {
        transform: translateY(-6px);
        opacity: .0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mm-item {
    display: block;
    padding: 14px 16px;
    color: rgba(255,255,255,.94);
    font-weight: 850;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .mm-item:hover {
        background: rgba(255,255,255,.08);
    }

/* ---------- FOOTER (ALT BÖLÜM) ---------- */
.site-footer {
    background: radial-gradient(900px 400px at 10% 0%, rgba(31,169,124,.18), transparent 55%), linear-gradient(180deg, var(--primary-dark) 0%, var(--bg-dark) 100%);
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 26px 0;
    color: #fff;
}

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

.footer-left {
    display: flex;
    align-items: center;
}

.footer-logo {
    height: 76px !important;
    width: auto !important;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.footer-center {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-link {
    color: rgba(255,255,255,.95);
}

    .footer-link:hover {
        color: var(--accent-soft);
    }

.footer-sep {
    margin: 0 8px;
    opacity: .8;
}

.footer-text {
    opacity: .85;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    transition: transform var(--tr), background var(--tr), border-color var(--tr);
}

    .footer-social:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(255,255,255,.24);
    }

/* ---------- SOL SABİT SOSYAL BUTONLAR ---------- */
.fixed-social-left {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 60;
}

.fs-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .fs-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(0,0,0,.22);
        filter: brightness(1.04);
    }

    .fs-btn.whatsapp {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    }

    .fs-btn.instagram {
        background: linear-gradient(135deg, #6f2cff 0%, #ff2a6d 100%);
    }

    .fs-btn.map {
        background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    }

    .fs-btn.phone {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    }

/* ---------- LOADER (Yükleniyor) ---------- */
.site-loader {
    position: fixed;
    inset: 0;
    background: radial-gradient(900px 500px at 20% 10%, rgba(31,169,124,.20), transparent 60%), radial-gradient(900px 500px at 80% 0%, rgba(18,60,90,.20), transparent 60%), linear-gradient(180deg, var(--primary-dark) 0%, var(--bg-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 400ms ease, visibility 400ms ease;
}

    .site-loader.hide {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.loader-box {
    width: min(520px, calc(100% - 34px));
    text-align: center;
    color: #fff;
    padding: 26px 18px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    box-shadow: 0 30px 70px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
}

.loader-road {
    height: 72px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
}

    .loader-road::before {
        content: "";
        position: absolute;
        left: -40%;
        top: 50%;
        transform: translateY(-50%);
        height: 4px;
        width: 180%;
        background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 26px, transparent 26px 48px);
        opacity: .45;
        animation: roadMove 900ms linear infinite;
    }

@keyframes roadMove {
    from {
        transform: translate(-12%, -50%);
    }

    to {
        transform: translate(-40%, -50%);
    }
}

.loader-car {
    position: absolute;
    left: 18%;
    bottom: 16px;
    width: 64px;
    height: 26px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 14px 24px rgba(0,0,0,.22);
    animation: carBounce 800ms ease-in-out infinite;
}

    .loader-car::before {
        content: "";
        position: absolute;
        left: 10px;
        top: -12px;
        width: 34px;
        height: 16px;
        border-radius: 8px 8px 6px 6px;
        background: rgba(255,255,255,.16);
    }

    .loader-car::after {
        content: "";
        position: absolute;
        left: 10px;
        bottom: -8px;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
        box-shadow: 34px 0 0 rgba(255,255,255,.92);
        opacity: .95;
    }

@keyframes carBounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.loader-text {
    margin-top: 14px;
    font-weight: 900;
}

    .loader-text small {
        display: block;
        margin-top: 6px;
        opacity: .85;
        font-weight: 700;
    }

.dot {
    display: inline-block;
    margin-left: 2px;
    animation: dotBlink 1s infinite;
    opacity: .25;
}

    .dot.d2 {
        animation-delay: .18s;
    }

    .dot.d3 {
        animation-delay: .36s;
    }

@keyframes dotBlink {
    0%,100% {
        opacity: .20;
    }

    50% {
        opacity: 1;
    }
}


/* HERO dış alan: arkaplanda yumuşak renk hareketi */
.hero {
    padding: 26px 0 18px;
}

    .hero .hero-inner {
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 18px;
        align-items: stretch;
    }

    /* ---------- SOL: REZERVASYON KARTI ---------- */
    .hero .reservation-box {
        border-radius: 22px;
        padding: 18px;
        color: var(--text-light);
        background: radial-gradient(900px 420px at 15% 10%, rgba(31,169,124,.18), transparent 55%), linear-gradient(180deg, rgba(11,34,57,.96) 0%, rgba(8,26,43,.96) 100%);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 24px 60px rgba(0,0,0,.18);
        position: relative;
        overflow: hidden;
    }

        .hero .reservation-box::before {
            content: "";
            position: absolute;
            inset: -2px;
            background: radial-gradient(700px 260px at 0% 0%, rgba(31,169,124,.22), transparent 60%), radial-gradient(700px 260px at 100% 15%, rgba(18,60,90,.22), transparent 60%);
            pointer-events: none;
        }

        .hero .reservation-box > * {
            position: relative;
            z-index: 1;
        }

        .hero .reservation-box h3 {
            margin: 12px 0 8px;
            font-size: 18px;
            font-weight: 950;
            letter-spacing: .2px;
        }

        /* datetime inputlar */
        .hero .reservation-box input[type="datetime-local"] {
            width: 100%;
            border-radius: 16px;
            padding: 14px 14px;
            border: 1px solid rgba(15,23,42,.10);
            background: rgba(255,255,255,.95);
            font-weight: 750;
            transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
        }

            .hero .reservation-box input[type="datetime-local"]:focus {
                border-color: rgba(31,169,124,.60);
                box-shadow: 0 0 0 4px rgba(31,169,124,.16);
                transform: translateY(-1px);
            }

        /* Rezervasyon butonu */
        .hero .reservation-box .btn-reserve {
            width: 100%;
            margin-top: 14px;
            border: 0;
            border-radius: 18px;
            padding: 14px 16px;
            font-weight: 950;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
            box-shadow: 0 16px 34px rgba(31,169,124,.22);
            transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
        }

            .hero .reservation-box .btn-reserve:hover {
                transform: translateY(-2px);
                box-shadow: 0 20px 44px rgba(31,169,124,.28);
                filter: brightness(1.03);
            }

            .hero .reservation-box .btn-reserve:active {
                transform: translateY(0);
            }

        /* ---------- RD Dropdown (şehir/lokasyon seçimleri) ---------- */
        .hero .reservation-box .select-wrapper {
            margin-bottom: 10px;
        }

        .hero .reservation-box .rd-head {
            width: 100%;
            border-radius: 16px;
            padding: 14px 14px;
            border: 1px solid rgba(15,23,42,.10);
            background: rgba(255,255,255,.95);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            cursor: pointer;
            user-select: none;
            transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
        }

        .hero .reservation-box .rd-text {
            font-weight: 800;
            color: #0f172a;
        }

        .hero .reservation-box .rd-caret {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(31,169,124,.12);
            color: rgba(11,34,57,.90);
            transition: transform var(--tr), background var(--tr);
        }

        .hero .reservation-box .rd-head:hover {
            transform: translateY(-1px);
            border-color: rgba(31,169,124,.45);
            box-shadow: 0 12px 26px rgba(0,0,0,.08);
        }

            .hero .reservation-box .rd-head:hover .rd-caret {
                transform: rotate(180deg);
                background: rgba(31,169,124,.18);
            }

        /* Açılan panel */
        .hero .reservation-box .rd-panel {
            margin-top: 10px;
            border-radius: 18px;
            background: rgba(11,34,57,.96);
            border: 1px solid rgba(255,255,255,.10);
            box-shadow: 0 22px 46px rgba(0,0,0,.28);
            overflow: hidden;
        }

        .hero .reservation-box .rd-title {
            padding: 12px 14px;
            font-weight: 950;
            color: rgba(255,255,255,.92);
            border-bottom: 1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.06);
        }

        .hero .reservation-box .rd-list {
            max-height: 260px;
            overflow: auto;
        }

        .hero .reservation-box .rd-item {
            padding: 12px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: rgba(255,255,255,.92);
            font-weight: 850;
            border-bottom: 1px solid rgba(255,255,255,.06);
            cursor: pointer;
            transition: background var(--tr), transform var(--tr);
        }

            .hero .reservation-box .rd-item:hover {
                background: rgba(255,255,255,.08);
                transform: translateX(2px);
            }

        .hero .reservation-box .rd-arrow {
            color: var(--accent-soft);
            font-weight: 950;
        }

        .hero .reservation-box .rd-back {
            padding: 12px 14px;
            font-weight: 950;
            color: rgba(255,255,255,.92);
            background: rgba(31,169,124,.16);
            cursor: pointer;
            transition: filter var(--tr);
        }

            .hero .reservation-box .rd-back:hover {
                filter: brightness(1.06);
            }

        /* scroll bar (chrome) küçük şık */
        .hero .reservation-box .rd-list::-webkit-scrollbar {
            width: 10px;
        }

        .hero .reservation-box .rd-list::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,.16);
            border-radius: 999px;
        }

        .hero .reservation-box .rd-list::-webkit-scrollbar-track {
            background: rgba(255,255,255,.06);
        }

    /* ---------- SAĞ: SLIDER KARTI ---------- */
    .hero .hero-slider {
        border-radius: 22px;
        overflow: hidden;
        position: relative;
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 24px 60px rgba(0,0,0,.12);
        background: radial-gradient(900px 520px at 15% 10%, rgba(31,169,124,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(244,246,248,.95) 100%);
        min-height: 320px;
    }

        /* slider resimleri */
        .hero .hero-slider .slider-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }

            .hero .hero-slider .slider-wrapper img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0;
                transform: scale(1.02);
                transition: opacity 500ms ease, transform 900ms ease;
            }

                .hero .hero-slider .slider-wrapper img.active {
                    opacity: 1;
                    transform: scale(1);
                }

        /* oklar */
        .hero .hero-slider .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.18);
            background: rgba(11,34,57,.45);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            backdrop-filter: blur(8px);
            transition: transform var(--tr), background var(--tr);
            z-index: 2;
        }

            .hero .hero-slider .slider-btn.left {
                left: 14px;
            }

            .hero .hero-slider .slider-btn.right {
                right: 14px;
            }

            .hero .hero-slider .slider-btn:hover {
                transform: translateY(-50%) translateY(-1px);
                background: rgba(11,34,57,.55);
            }

        /* slider üstüne hafif premium parıltı */
        .hero .hero-slider::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(600px 260px at 85% 10%, rgba(18,60,90,.14), transparent 60%), radial-gradient(600px 260px at 10% 90%, rgba(31,169,124,.10), transparent 60%);
            pointer-events: none;
        }



/* HERO arkaplanına hafif hareket (göz yormaz) */
.hero {
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(closest-side, rgba(34,194,138,.18), transparent 65%), radial-gradient(closest-side, rgba(14,51,82,.18), transparent 65%);
        filter: blur(10px);
        animation: heroGlow 10s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes heroGlow {
    0% {
        transform: translate(-3%, -2%) rotate(0deg);
    }

    50% {
        transform: translate(3%, 2%) rotate(6deg);
    }

    100% {
        transform: translate(-3%, -2%) rotate(0deg);
    }
}

.hero .hero-inner {
    position: relative;
    z-index: 1;
}
/* SOL PANEL: daha net tipografi + vurgulu çizgi */
.hero .reservation-box {
    padding: 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.12);
}

    .hero .reservation-box h3 {
        font-size: 17px;
        opacity: .95;
    }

        .hero .reservation-box h3::after {
            content: "";
            display: block;
            width: 44px;
            height: 3px;
            margin-top: 8px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
            opacity: .9;
        }
/* SLIDER DOTLAR */
.hero .hero-slider .slider-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(11,34,57,.35);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
}

.hero .hero-slider .slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: transform var(--tr), background var(--tr), width var(--tr);
}

    .hero .hero-slider .slider-dot.active {
        background: var(--accent);
        width: 22px;
        transform: scale(1.05);
    }
/* =========================================================
   ARAÇ KARTLARI — PREMIUM GRID
   Sınıflar: .car-list .car-grid .car-card .car-body ...
========================================================= */

.car-list {
    padding: 10px 0 34px;
}

.car-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1100px) {
    .car-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

.car-card {
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
    transform: translateY(0);
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    position: relative;
}

    .car-card::before {
        /* kart üstünde hafif parıltı */
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(600px 260px at 20% 0%, rgba(34,194,138,.12), transparent 60%), radial-gradient(600px 260px at 100% 10%, rgba(14,51,82,.10), transparent 60%);
        pointer-events: none;
        opacity: .9;
    }

    .car-card:hover {
        transform: translateY(-4px);
        border-color: rgba(34,194,138,.25);
        box-shadow: 0 28px 70px rgba(0,0,0,.12);
    }

    .car-card > * {
        position: relative;
        z-index: 1;
    }

    /* görsel alan */
    .car-card img {
        width: 100%;
        height: 170px;
        object-fit: cover;
        display: block;
        transform: scale(1.02);
        transition: transform 600ms ease;
    }

    .car-card:hover img {
        transform: scale(1.06);
    }

/* body */
.car-body {
    padding: 14px 14px 14px;
}

.car-title {
    font-size: 16px;
    font-weight: 950;
    letter-spacing: .2px;
    color: var(--primary-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* özellikler grid */
.car-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 12px;
    color: rgba(15,23,42,.86);
    font-weight: 800;
    font-size: 13px;
}

    .car-features i {
        color: var(--accent-dark);
        margin-right: 8px;
    }

/* fiyat + buton */
.rent-now-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    font-weight: 950;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 14px 30px rgba(34,194,138,.20);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
    text-align: center;
}

    .rent-now-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(34,194,138,.26);
        filter: brightness(1.03);
    }

    /* müsait değil */
    .rent-now-btn.not-available {
        background: linear-gradient(135deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.72) 100%);
        box-shadow: 0 14px 30px rgba(0,0,0,.18);
        opacity: .95;
        cursor: not-allowed;
    }
/* =========================================================
   HERO ALT METİN — BAŞLIK + AÇIKLAMA
========================================================= */

.hero-text {
    padding: 10px 0 18px;
    text-align: center;
}

    .hero-text h2 {
        margin: 0;
        font-size: clamp(22px, 2.3vw, 34px);
        font-weight: 1000;
        letter-spacing: .2px;
        color: var(--primary-dark);
    }

    .hero-text p {
        margin: 10px auto 0;
        max-width: 780px;
        color: rgba(15,23,42,.72);
        font-weight: 700;
        line-height: 1.65;
    }
/* =========================================================
   HABERLER — MODERN KARTLAR
========================================================= */

.home-news {
    padding: 14px 0 34px;
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1100px) {
    .home-news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 520px) {
    .home-news-grid {
        grid-template-columns: 1fr;
    }
}

.news-card {
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    position: relative;
}

    .news-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(600px 260px at 20% 0%, rgba(34,194,138,.10), transparent 60%), radial-gradient(600px 260px at 100% 10%, rgba(14,51,82,.08), transparent 60%);
        pointer-events: none;
    }

    .news-card:hover {
        transform: translateY(-4px);
        border-color: rgba(34,194,138,.22);
        box-shadow: 0 28px 70px rgba(0,0,0,.12);
    }

.news-img img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 600ms ease;
}

.news-card:hover .news-img img {
    transform: scale(1.06);
}

.news-caption {
    padding: 12px 14px 14px;
    font-weight: 950;
    color: var(--primary-dark);
    line-height: 1.35;
}
/* =========================================================
   SAYFA BAŞLIĞI (GENEL) — her sayfada kullan
========================================================= */
.page-head {
    margin: 10px 0 18px;
    padding: 18px 18px;
    border-radius: 22px;
    background: radial-gradient(700px 260px at 10% 0%, rgba(34,194,138,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(244,246,248,.95) 100%);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

    .page-head h1 {
        margin: 0;
        font-size: clamp(22px, 2.2vw, 34px);
        font-weight: 1000;
        letter-spacing: .2px;
        color: var(--primary-dark);
    }

    .page-head p {
        margin: 8px 0 0;
        color: rgba(15,23,42,.72);
        font-weight: 750;
        line-height: 1.6;
    }
/* =========================================================
   FORM STANDARTLARI — tüm sitede input/select/textarea
========================================================= */
input, select, textarea {
    width: 100%;
    border-radius: 16px;
    padding: 13px 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.96);
    font-weight: 750;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: rgba(34,194,138,.60);
        box-shadow: 0 0 0 4px rgba(34,194,138,.16);
        transform: translateY(-1px);
    }

label {
    font-weight: 900;
    color: rgba(15,23,42,.82);
}
/* =========================================================
   BUTON STANDARTLARI
========================================================= */
.btn, button, .btn-primary, .btn-success {
    border-radius: 16px;
}

.btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 0;
    cursor: pointer;
    font-weight: 950;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
    box-shadow: 0 14px 30px rgba(14,51,82,.18);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .btn-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(14,51,82,.22);
        filter: brightness(1.03);
    }

.btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 0;
    cursor: pointer;
    font-weight: 950;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 14px 30px rgba(34,194,138,.20);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .btn-green:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(34,194,138,.26);
        filter: brightness(1.03);
    }
/* =========================================================
   FİYAT LİSTESİ — ALTERNATİF A (CAM + NEON + CHIP)
========================================================= */

.ilgin-price-page {
    padding: 10px 0 34px;
}

/* üst barlar cam */
.ilgin-steps-bar,
.ilgin-filter-bar {
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.35) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.10) !important;
}

/* layout daha ferah */
.ilgin-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
}

@media (max-width: 980px) {
    .ilgin-layout {
        grid-template-columns: 1fr;
    }
}

/* araç satırı: neon kenar */
.ilgin-car-row {
    border-radius: 26px !important;
    padding: 16px !important;
    background: rgba(255,255,255,.58) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.10) !important;
    position: relative;
    overflow: hidden;
}

    /* sol kenarda “ışık çizgisi” */
    .ilgin-car-row::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,.0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,.0) 100%);
        opacity: .85;
    }

    /* hover parıltı */
    .ilgin-car-row::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(closest-side, rgba(34,194,138,.20), transparent 65%), radial-gradient(closest-side, rgba(14,51,82,.16), transparent 65%);
        filter: blur(16px);
        opacity: 0;
        transition: opacity 260ms ease;
        pointer-events: none;
    }

    .ilgin-car-row:hover::before {
        opacity: 1;
    }

    .ilgin-car-row:hover {
        transform: translateY(-5px) !important;
    }

    /* görsel daha modern */
    .ilgin-car-row .car-img img {
        border-radius: 18px !important;
        box-shadow: 0 16px 40px rgba(0,0,0,.10);
    }

    /* başlık: daha premium */
    .ilgin-car-row .car-name {
        font-size: 19px !important;
        font-weight: 1000 !important;
        color: var(--primary-dark) !important;
        letter-spacing: .2px;
    }

    /* specs: pill */
    .ilgin-car-row .car-specs {
        gap: 10px !important;
    }

        .ilgin-car-row .car-specs > div {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(7,27,47,.06);
            border: 1px solid rgba(7,27,47,.08);
            font-weight: 900;
            font-size: 12.5px;
        }

        .ilgin-car-row .car-specs i {
            color: var(--accent-dark) !important;
        }

    /* fiyat kutusu: chip'ler */
    .ilgin-car-row .price-box {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .ilgin-car-row .price-list {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px !important;
    }

    .ilgin-car-row .p-row {
        border-radius: 999px !important;
        padding: 10px 12px !important;
        background: rgba(255,255,255,.72) !important;
        border: 1px solid rgba(255,255,255,.50) !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.06);
        min-width: 160px;
    }

        .ilgin-car-row .p-row .amount {
            color: var(--primary-dark) !important;
            font-weight: 1000 !important;
        }

    /* kirala butonu daha “iştah açıcı” */
    .ilgin-car-row .rent-btn {
        border-radius: 18px !important;
        padding: 13px 14px !important;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
        box-shadow: 0 22px 50px rgba(34,194,138,.22) !important;
    }

        .ilgin-car-row .rent-btn:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 28px 70px rgba(34,194,138,.26) !important;
        }

/* sağ rezervasyon kartı: cam + sticky */
.ilgin-reservation {
    position: sticky;
    top: 16px;
}

.reservation-card {
    border-radius: 26px !important;
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.10) !important;
}

    .reservation-card .btn-list {
        border-radius: 18px !important;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%) !important;
        box-shadow: 0 22px 50px rgba(14,51,82,.20) !important;
    }
/* =========================================================
   FİYAT LİSTESİ — CAM + NEON + CHIP (FARKLI/PREMIUM)
========================================================= */

.ilgin-price-page {
    padding: 10px 0 34px;
}

.ilgin-empty {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.40);
    box-shadow: 0 30px 80px rgba(0,0,0,.10);
    font-weight: 900;
    color: rgba(15,23,42,.80);
}

/* step + filter cam */
.ilgin-steps {
    margin: 10px 0 18px;
}

.ilgin-steps-bar,
.ilgin-filter-bar {
    border-radius: 24px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 30px 80px rgba(0,0,0,.10);
}

/* step bar içi */
.ilgin-steps-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
}

    .ilgin-steps-bar .line {
        flex: 1;
        height: 2px;
        background: linear-gradient(90deg, rgba(14,51,82,.16) 0%, rgba(34,194,138,.30) 50%, rgba(14,51,82,.16) 100%);
        border-radius: 999px;
    }

    .ilgin-steps-bar .step {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 220px;
    }

    .ilgin-steps-bar .dot {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 1000;
        color: #fff;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
        box-shadow: 0 18px 40px rgba(14,51,82,.18);
    }

    .ilgin-steps-bar .step.done .dot {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
        box-shadow: 0 18px 40px rgba(34,194,138,.20);
    }

    .ilgin-steps-bar .txt .t {
        font-weight: 1000;
        color: var(--primary-dark);
        line-height: 1.1;
    }

    .ilgin-steps-bar .txt .s {
        margin-top: 2px;
        font-weight: 750;
        color: rgba(15,23,42,.68);
        font-size: 12.5px;
        line-height: 1.35;
    }

@media (max-width: 980px) {
    .ilgin-steps-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .ilgin-steps-bar .line {
            display: none;
        }

        .ilgin-steps-bar .step {
            min-width: 0;
        }
}

/* filter bar */
.ilgin-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 14px;
    padding: 14px 14px;
}

    .ilgin-filter-bar .left {
        font-weight: 1000;
        color: var(--primary-dark);
        letter-spacing: .2px;
        font-size: 18px;
    }

    .ilgin-filter-bar .right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .ilgin-filter-bar input[type="text"],
    .ilgin-filter-bar select {
        width: 220px;
        max-width: 100%;
        border-radius: 16px;
        padding: 12px 12px;
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.92);
        font-weight: 800;
        transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    }

        .ilgin-filter-bar input[type="text"]:focus,
        .ilgin-filter-bar select:focus {
            border-color: rgba(34,194,138,.60);
            box-shadow: 0 0 0 4px rgba(34,194,138,.16);
            transform: translateY(-1px);
        }

@media (max-width: 980px) {
    .ilgin-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .ilgin-filter-bar .right {
            justify-content: flex-start;
        }

        .ilgin-filter-bar input[type="text"], .ilgin-filter-bar select {
            width: 100%;
        }
}

/* layout */
.ilgin-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
}

@media (max-width: 980px) {
    .ilgin-layout {
        grid-template-columns: 1fr;
    }
}

/* car row neon */
.ilgin-car-row {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    border-radius: 26px;
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    position: relative;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
}

    .ilgin-car-row::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
        opacity: .85;
    }

    .ilgin-car-row::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(closest-side, rgba(34,194,138,.20), transparent 65%), radial-gradient(closest-side, rgba(14,51,82,.16), transparent 65%);
        filter: blur(16px);
        opacity: 0;
        transition: opacity 260ms ease;
        pointer-events: none;
    }

    .ilgin-car-row:hover::before {
        opacity: 1;
    }

    .ilgin-car-row:hover {
        transform: translateY(-5px);
        box-shadow: 0 44px 120px rgba(0,0,0,.14);
    }

    .ilgin-car-row .car-img img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(0,0,0,.10);
        transition: transform 600ms ease;
    }

    .ilgin-car-row:hover .car-img img {
        transform: scale(1.05);
    }

    .ilgin-car-row .availability {
        margin-top: 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        font-weight: 1000;
        font-size: 12.5px;
    }

        .ilgin-car-row .availability.ok {
            background: rgba(34,194,138,.14);
            color: rgba(9,60,40,.95);
            border: 1px solid rgba(34,194,138,.22);
        }

        .ilgin-car-row .availability.no {
            background: rgba(15,23,42,.08);
            color: rgba(15,23,42,.78);
            border: 1px solid rgba(15,23,42,.12);
        }

    .ilgin-car-row .car-name {
        font-weight: 1000;
        color: var(--primary-dark);
        letter-spacing: .2px;
        font-size: 19px;
        margin-bottom: 6px;
    }

    .ilgin-car-row .car-sub {
        color: rgba(15,23,42,.70);
        font-weight: 850;
        margin-bottom: 10px;
    }

    .ilgin-car-row .car-specs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-weight: 900;
        color: rgba(15,23,42,.82);
        font-size: 12.5px;
    }

        .ilgin-car-row .car-specs > div {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(7,27,47,.06);
            border: 1px solid rgba(7,27,47,.08);
        }

        .ilgin-car-row .car-specs i {
            color: var(--accent-dark);
        }

    /* price chips */
    .ilgin-car-row .price-box {
        background: transparent;
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 12px;
    }

    .ilgin-car-row .price-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-content: flex-start;
    }

    .ilgin-car-row .p-row {
        border-radius: 999px;
        padding: 10px 12px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(255,255,255,.50);
        box-shadow: 0 14px 30px rgba(0,0,0,.06);
        min-width: 170px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-weight: 900;
        color: rgba(15,23,42,.80);
    }

        .ilgin-car-row .p-row .amount {
            font-weight: 1000;
            color: var(--primary-dark);
        }

    .ilgin-car-row .p-empty {
        padding: 12px 12px;
        border-radius: 18px;
        background: rgba(15,23,42,.06);
        border: 1px solid rgba(15,23,42,.10);
        font-weight: 900;
        color: rgba(15,23,42,.78);
    }

    /* rent button */
    .ilgin-car-row .rent-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 13px 14px;
        border-radius: 18px;
        font-weight: 1000;
        color: #fff;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
        box-shadow: 0 22px 50px rgba(34,194,138,.22);
        transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
    }

        .ilgin-car-row .rent-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 28px 70px rgba(34,194,138,.26);
            filter: brightness(1.03);
        }

    .ilgin-car-row .rent-status.not-available {
        width: 100%;
        text-align: center;
        padding: 13px 14px;
        border-radius: 18px;
        font-weight: 1000;
        background: linear-gradient(135deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.72) 100%);
        color: #fff;
        box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }

@media (max-width: 980px) {
    .ilgin-car-row {
        grid-template-columns: 1fr;
    }

        .ilgin-car-row .car-img img {
            height: 210px;
        }

        .ilgin-car-row .p-row {
            min-width: 0;
            width: 100%;
        }
}

/* right reservation card */
.ilgin-reservation {
    position: sticky;
    top: 16px;
}

.reservation-card {
    border-radius: 26px;
    padding: 16px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
}

    .reservation-card label {
        display: block;
        margin: 10px 0 8px;
        font-weight: 1000;
        color: var(--primary-dark);
    }

    .reservation-card select,
    .reservation-card input[type="datetime-local"] {
        width: 100%;
        border-radius: 16px;
        padding: 12px 12px;
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.92);
        font-weight: 850;
        transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    }

        .reservation-card select:focus,
        .reservation-card input[type="datetime-local"]:focus {
            border-color: rgba(34,194,138,.60);
            box-shadow: 0 0 0 4px rgba(34,194,138,.16);
            transform: translateY(-1px);
        }

    .reservation-card .btn-list {
        width: 100%;
        margin-top: 12px;
        border: 0;
        border-radius: 18px;
        padding: 13px 14px;
        font-weight: 1000;
        color: #fff;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
        box-shadow: 0 22px 50px rgba(14,51,82,.20);
        transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
        cursor: pointer;
    }

        .reservation-card .btn-list:hover {
            transform: translateY(-2px);
            box-shadow: 0 28px 70px rgba(14,51,82,.24);
            filter: brightness(1.03);
        }
/* =========================================================
   FİYAT LİSTESİ — FINAL (CAM + NEON + CHIP) ✅
========================================================= */

/* sayfa alanı */
.ilgin-price-page {
    padding: 10px 0 34px;
}

/* step + filter cam */
.ilgin-steps {
    margin: 10px 0 18px;
}

.ilgin-steps-bar,
.ilgin-filter-bar {
    border-radius: 24px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 30px 80px rgba(0,0,0,.10);
}

/* step bar içi */
.ilgin-steps-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
}

    .ilgin-steps-bar .line {
        flex: 1;
        height: 2px;
        background: linear-gradient(90deg, rgba(14,51,82,.16) 0%, rgba(34,194,138,.30) 50%, rgba(14,51,82,.16) 100%);
        border-radius: 999px;
    }

    .ilgin-steps-bar .step {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 220px;
    }

    .ilgin-steps-bar .dot {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 1000;
        color: #fff;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
        box-shadow: 0 18px 40px rgba(14,51,82,.18);
    }

    .ilgin-steps-bar .step.done .dot {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
        box-shadow: 0 18px 40px rgba(34,194,138,.20);
    }

    .ilgin-steps-bar .txt .t {
        font-weight: 1000;
        color: var(--primary-dark);
        line-height: 1.1;
    }

    .ilgin-steps-bar .txt .s {
        margin-top: 2px;
        font-weight: 750;
        color: rgba(15,23,42,.68);
        font-size: 12.5px;
        line-height: 1.35;
    }

@media (max-width: 980px) {
    .ilgin-steps-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .ilgin-steps-bar .line {
            display: none;
        }

        .ilgin-steps-bar .step {
            min-width: 0;
        }
}

/* filter bar */
.ilgin-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 14px;
    padding: 14px 14px;
}

    .ilgin-filter-bar .left {
        font-weight: 1000;
        color: var(--primary-dark);
        letter-spacing: .2px;
        font-size: 18px;
    }

    .ilgin-filter-bar .right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .ilgin-filter-bar input[type="text"],
    .ilgin-filter-bar select {
        width: 220px;
        max-width: 100%;
        border-radius: 16px;
        padding: 12px 12px;
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.92);
        font-weight: 800;
        transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    }

        .ilgin-filter-bar input[type="text"]:focus,
        .ilgin-filter-bar select:focus {
            border-color: rgba(34,194,138,.60);
            box-shadow: 0 0 0 4px rgba(34,194,138,.16);
            transform: translateY(-1px);
        }

@media (max-width: 980px) {
    .ilgin-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .ilgin-filter-bar .right {
            justify-content: flex-start;
        }

        .ilgin-filter-bar input[type="text"], .ilgin-filter-bar select {
            width: 100%;
        }
}

/* layout */
.ilgin-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
}

@media (max-width: 980px) {
    .ilgin-layout {
        grid-template-columns: 1fr;
    }
}

/* car row neon */
.ilgin-car-row {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    border-radius: 26px;
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    position: relative;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
}

    .ilgin-car-row::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
        opacity: .85;
    }

    .ilgin-car-row::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(closest-side, rgba(34,194,138,.20), transparent 65%), radial-gradient(closest-side, rgba(14,51,82,.16), transparent 65%);
        filter: blur(16px);
        opacity: 0;
        transition: opacity 260ms ease;
        pointer-events: none;
    }

    .ilgin-car-row:hover::before {
        opacity: 1;
    }

    .ilgin-car-row:hover {
        transform: translateY(-5px);
        box-shadow: 0 44px 120px rgba(0,0,0,.14);
    }

    .ilgin-car-row .car-img img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(0,0,0,.10);
        transition: transform 600ms ease;
    }

    .ilgin-car-row:hover .car-img img {
        transform: scale(1.05);
    }

    .ilgin-car-row .availability {
        margin-top: 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        font-weight: 1000;
        font-size: 12.5px;
    }

        .ilgin-car-row .availability.ok {
            background: rgba(34,194,138,.14);
            color: rgba(9,60,40,.95);
            border: 1px solid rgba(34,194,138,.22);
        }

        .ilgin-car-row .availability.no {
            background: rgba(15,23,42,.08);
            color: rgba(15,23,42,.78);
            border: 1px solid rgba(15,23,42,.12);
        }

    .ilgin-car-row .car-name {
        font-weight: 1000;
        color: var(--primary-dark);
        letter-spacing: .2px;
        font-size: 19px;
        margin-bottom: 6px;
    }

    .ilgin-car-row .car-sub {
        color: rgba(15,23,42,.70);
        font-weight: 850;
        margin-bottom: 10px;
    }

    .ilgin-car-row .car-specs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-weight: 900;
        color: rgba(15,23,42,.82);
        font-size: 12.5px;
    }

        .ilgin-car-row .car-specs > div {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(7,27,47,.06);
            border: 1px solid rgba(7,27,47,.08);
        }

        .ilgin-car-row .car-specs i {
            color: var(--accent-dark);
        }

    /* price chips */
    .ilgin-car-row .price-box {
        background: transparent;
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 12px;
    }

    .ilgin-car-row .price-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-content: flex-start;
    }

    .ilgin-car-row .p-row {
        border-radius: 999px;
        padding: 10px 12px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(255,255,255,.50);
        box-shadow: 0 14px 30px rgba(0,0,0,.06);
        min-width: 170px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-weight: 900;
        color: rgba(15,23,42,.80);
    }

        .ilgin-car-row .p-row .amount {
            font-weight: 1000;
            color: var(--primary-dark);
        }

    .ilgin-car-row .p-empty {
        padding: 12px 12px;
        border-radius: 18px;
        background: rgba(15,23,42,.06);
        border: 1px solid rgba(15,23,42,.10);
        font-weight: 900;
        color: rgba(15,23,42,.78);
    }

    /* rent button */
    .ilgin-car-row .rent-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 13px 14px;
        border-radius: 18px;
        font-weight: 1000;
        color: #fff;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
        box-shadow: 0 22px 50px rgba(34,194,138,.22);
        transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
    }

        .ilgin-car-row .rent-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 28px 70px rgba(34,194,138,.26);
            filter: brightness(1.03);
        }

    .ilgin-car-row .rent-status.not-available {
        width: 100%;
        text-align: center;
        padding: 13px 14px;
        border-radius: 18px;
        font-weight: 1000;
        background: linear-gradient(135deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.72) 100%);
        color: #fff;
        box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }

@media (max-width: 980px) {
    .ilgin-car-row {
        grid-template-columns: 1fr;
    }

        .ilgin-car-row .car-img img {
            height: 210px;
        }

        .ilgin-car-row .p-row {
            min-width: 0;
            width: 100%;
        }
}

/* right reservation card */
.ilgin-reservation {
    position: sticky;
    top: 16px;
}

.reservation-card {
    border-radius: 26px;
    padding: 16px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
}

    .reservation-card label {
        display: block;
        margin: 10px 0 8px;
        font-weight: 1000;
        color: var(--primary-dark);
    }

    .reservation-card select,
    .reservation-card input[type="datetime-local"] {
        width: 100%;
        border-radius: 16px;
        padding: 12px 12px;
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.92);
        font-weight: 850;
        transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    }

        .reservation-card select:focus,
        .reservation-card input[type="datetime-local"]:focus {
            border-color: rgba(34,194,138,.60);
            box-shadow: 0 0 0 4px rgba(34,194,138,.16);
            transform: translateY(-1px);
        }

    .reservation-card .btn-list {
        width: 100%;
        margin-top: 12px;
        border: 0;
        border-radius: 18px;
        padding: 13px 14px;
        font-weight: 1000;
        color: #fff;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
        box-shadow: 0 22px 50px rgba(14,51,82,.20);
        transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
        cursor: pointer;
    }

        .reservation-card .btn-list:hover {
            transform: translateY(-2px);
            box-shadow: 0 28px 70px rgba(14,51,82,.24);
            filter: brightness(1.03);
        }
/* =========================================================
   CHECKOUT / CONFIRM / SUCCESS — FINAL (CAM + NEON)
========================================================= */

/* ortak sayfa */
.checkout-page {
    padding: 10px 0 34px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
}

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

/* cam kart */
.card-glass {
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

    .card-glass::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
        opacity: .85;
    }

/* başlık */
.card-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 1000;
    color: var(--primary-dark);
    letter-spacing: .2px;
}

/* form */
.f-row {
    margin-bottom: 12px;
}

    .f-row label {
        display: block;
        margin: 10px 0 8px;
        font-weight: 1000;
        color: var(--primary-dark);
    }

    .f-row input, .f-row select, .f-row textarea {
        width: 100%;
        border-radius: 16px;
        padding: 12px 12px;
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.92);
        font-weight: 850;
        transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    }

        .f-row input:focus, .f-row select:focus, .f-row textarea:focus {
            border-color: rgba(34,194,138,.60);
            box-shadow: 0 0 0 4px rgba(34,194,138,.16);
            transform: translateY(-1px);
            outline: none;
        }

/* özet satırları */
.summary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.50);
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
    font-weight: 900;
    color: rgba(15,23,42,.82);
}

    .summary-item .v {
        font-weight: 1000;
        color: var(--primary-dark);
    }

/* butonlar */
.btn-green-xl {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 13px 14px;
    font-weight: 1000;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 22px 50px rgba(34,194,138,.22);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .btn-green-xl:hover {
        transform: translateY(-2px);
        box-shadow: 0 28px 70px rgba(34,194,138,.26);
        filter: brightness(1.03);
    }

.btn-blue-xl {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 13px 14px;
    font-weight: 1000;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
    box-shadow: 0 22px 50px rgba(14,51,82,.20);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .btn-blue-xl:hover {
        transform: translateY(-2px);
        box-shadow: 0 28px 70px rgba(14,51,82,.24);
        filter: brightness(1.03);
    }

/* success */
.success-wrap {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.success-card {
    max-width: 760px;
    width: 100%;
    text-align: center;
}

.success-icon {
    width: 70px;
    height: 70px;
    border-radius: 999px;
    margin: 4px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 22px 50px rgba(34,194,138,.22);
    font-size: 30px;
    animation: pop 700ms ease;
}

@keyframes pop {
    0% {
        transform: scale(.85);
        opacity: .2;
    }

    60% {
        transform: scale(1.06);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.success-title {
    margin: 0;
    font-weight: 1000;
    font-size: clamp(22px, 2.2vw, 34px);
    color: var(--primary-dark);
}

.success-desc {
    margin: 10px auto 0;
    max-width: 620px;
    font-weight: 800;
    color: rgba(15,23,42,.72);
    line-height: 1.65;
}

.success-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

    .success-actions a {
        text-decoration: none;
    }
/* =========================================================
   CHECKOUT (STEP 2) — FINAL PREMIUM (mavi/yeşil cam)
========================================================= */

.ilgin-checkout-page {
    padding: 10px 0 34px;
}

.ilgin-checkout-title {
    margin: 10px 0 12px;
    font-weight: 1000;
    color: var(--primary-dark);
    font-size: clamp(22px, 2.2vw, 34px);
    letter-spacing: .2px;
}

/* checkout grid */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 18px;
    align-items: start;
    margin-top: 12px;
}

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

/* image card */
.checkout-image-box {
    border-radius: 26px;
    overflow: hidden;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
}

    .checkout-image-box img {
        width: 100%;
        height: 100%;
        min-height: 340px;
        object-fit: cover;
        display: block;
    }

/* right card */
.checkout-right-inner {
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

    .checkout-right-inner::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
        opacity: .85;
    }

/* icon pills */
.top-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

    .top-icons span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(7,27,47,.06);
        border: 1px solid rgba(7,27,47,.08);
        font-weight: 900;
        font-size: 12.5px;
        color: rgba(15,23,42,.84);
    }

    .top-icons i {
        color: var(--accent-dark);
    }

/* grids */
.ilgin-checkout-top .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 980px) {
    .ilgin-checkout-top .grid {
        grid-template-columns: 1fr;
    }
}

.box {
    border-radius: 20px;
    padding: 12px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.50);
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
}

    .box .head {
        font-weight: 1000;
        color: rgba(15,23,42,.70);
        margin-bottom: 6px;
        font-size: 12.5px;
    }

    .box .val {
        font-weight: 1000;
        color: var(--primary-dark);
        font-size: 15px;
    }

    .box.total {
        background: linear-gradient(135deg, rgba(34,194,138,.12) 0%, rgba(14,51,82,.08) 100%);
        border-color: rgba(34,194,138,.18);
    }

/* fancy input */
.fancy-input {
    position: relative;
}

    .fancy-input i {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(15,23,42,.55);
    }

    .fancy-input select,
    .fancy-input input {
        width: 100%;
        border-radius: 16px;
        padding: 12px 38px 12px 12px;
        border: 1px solid rgba(15,23,42,.12);
        background: rgba(255,255,255,.92);
        font-weight: 850;
        transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
    }

        .fancy-input select:focus,
        .fancy-input input:focus {
            outline: none;
            border-color: rgba(34,194,138,.60);
            box-shadow: 0 0 0 4px rgba(34,194,138,.16);
            transform: translateY(-1px);
        }

/* post form card */
.ilgin-form {
    margin-top: 16px;
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 16px;
}

/* extras */
.ilgin-extras .list label {
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.50);
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
    font-weight: 900;
}

.ilgin-extras input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* total bar */
.ilgin-total-bar {
    margin-top: 12px;
    border-radius: 20px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(34,194,138,.12) 0%, rgba(14,51,82,.08) 100%);
    border: 1px solid rgba(34,194,138,.18);
    font-weight: 1000;
    color: var(--primary-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* driver */
.ilgin-driver-title {
    margin: 12px 0 10px;
    font-weight: 1000;
    color: var(--primary-dark);
    font-size: 18px;
}

.ilgin-driver-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 980px) {
    .ilgin-driver-grid {
        grid-template-columns: 1fr;
    }
}

.ilgin-driver-item label, .ilgin-form-group label {
    display: block;
    margin: 8px 0 8px;
    font-weight: 1000;
    color: var(--primary-dark);
}

.ilgin-driver-item input, .ilgin-form-group input, .ilgin-driver-item textarea {
    width: 100%;
    border-radius: 16px;
    padding: 12px 12px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.92);
    font-weight: 850;
}

.chk {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(7,27,47,.06);
    border: 1px solid rgba(7,27,47,.08);
    font-weight: 900;
}

/* payment box */
.payment-card {
    border-radius: 22px;
    padding: 12px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.50);
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
}

    .payment-card label {
        font-weight: 900;
        color: rgba(15,23,42,.84);
    }

/* finish button */
.finish {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 13px 14px;
    font-weight: 1000;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 22px 50px rgba(34,194,138,.22);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .finish:hover {
        transform: translateY(-2px);
        box-shadow: 0 28px 70px rgba(34,194,138,.26);
        filter: brightness(1.03);
    }

/* =========================================================
   SUCCESS (Başarılı) — FINAL
========================================================= */
.res-success {
    padding: 18px 0 34px;
}

    .res-success .success-wrap {
        display: flex;
        justify-content: center;
    }

    .res-success .success-card {
        max-width: 760px;
        width: 100%;
        text-align: center;
        border-radius: 26px;
        background: rgba(255,255,255,.55);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,.38);
        box-shadow: 0 34px 90px rgba(0,0,0,.10);
        padding: 18px;
    }

    .res-success .success-icon {
        width: 70px;
        height: 70px;
        border-radius: 999px;
        margin: 4px auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
        box-shadow: 0 22px 50px rgba(34,194,138,.22);
        font-size: 30px;
    }

    .res-success h2 {
        margin: 0;
        font-weight: 1000;
        font-size: clamp(22px, 2.2vw, 34px);
        color: var(--primary-dark);
    }

    .res-success p {
        margin: 10px 0 0;
        font-weight: 850;
        color: rgba(15,23,42,.72);
    }

    .res-success .success-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .res-success .btn-home {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 18px;
        font-weight: 1000;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
        box-shadow: 0 22px 50px rgba(14,51,82,.20);
        transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
    }

        .res-success .btn-home:hover {
            transform: translateY(-2px);
            box-shadow: 0 28px 70px rgba(14,51,82,.24);
            filter: brightness(1.03);
        }
/* =========================================================
   COMPLETED / SUCCESS — FINAL (mavi-yeşil premium)
========================================================= */

.ilgin-completed-page {
    padding: 22px 0 34px;
    display: flex;
    justify-content: center;
}

.ilgin-completed-box {
    max-width: 760px;
    width: 100%;
    text-align: center;
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 18px;
    position: relative;
    overflow: hidden;
}

    /* solda neon çizgi */
    .ilgin-completed-box::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
        opacity: .85;
    }

    /* arka parıltı */
    .ilgin-completed-box::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(closest-side, rgba(34,194,138,.20), transparent 65%), radial-gradient(closest-side, rgba(14,51,82,.16), transparent 65%);
        filter: blur(18px);
        opacity: .9;
        pointer-events: none;
    }

    .ilgin-completed-box > * {
        position: relative;
        z-index: 1;
    }

    /* ikon */
    .ilgin-completed-box .icon {
        width: 72px;
        height: 72px;
        border-radius: 999px;
        margin: 4px auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
        box-shadow: 0 22px 50px rgba(34,194,138,.22);
        font-size: 30px;
        animation: ilginPop 700ms ease;
    }

@keyframes ilginPop {
    0% {
        transform: scale(.85);
        opacity: .2;
    }

    60% {
        transform: scale(1.06);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* başlık */
.ilgin-completed-box h2 {
    margin: 0;
    font-weight: 1000;
    font-size: clamp(22px, 2.2vw, 34px);
    color: var(--primary-dark);
}

/* metinler */
.ilgin-completed-box .main-text {
    margin: 10px auto 0;
    max-width: 640px;
    font-weight: 850;
    color: rgba(15,23,42,.74);
    line-height: 1.7;
}

.ilgin-completed-box .sub-text {
    margin: 10px auto 0;
    max-width: 640px;
    font-weight: 850;
    color: rgba(15,23,42,.70);
    line-height: 1.7;
}

    .ilgin-completed-box .sub-text strong {
        color: var(--primary-dark);
        font-weight: 1000;
    }

/* info kutusu */
.ilgin-completed-box .info {
    margin: 14px auto 0;
    max-width: 640px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 700px) {
    .ilgin-completed-box .info {
        grid-template-columns: 1fr;
    }
}

.ilgin-completed-box .info > div {
    text-align: left;
    padding: 12px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.50);
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
    font-weight: 900;
    color: rgba(15,23,42,.82);
}

.ilgin-completed-box .info strong {
    color: var(--primary-dark);
    font-weight: 1000;
}

/* ana sayfa butonu */
.ilgin-completed-box .btn-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 18px;
    font-weight: 1000;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
    box-shadow: 0 22px 50px rgba(14,51,82,.20);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .ilgin-completed-box .btn-home:hover {
        transform: translateY(-2px);
        box-shadow: 0 28px 70px rgba(14,51,82,.24);
        filter: brightness(1.03);
    }
/* =========================================================
   İLETİŞİM — FINAL (mavi/yeşil cam)
========================================================= */

.contact-page {
    padding: 22px 0 34px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 18px;
    align-items: start;
}

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

.contact-title {
    font-size: 18px;
    font-weight: 1000;
    color: var(--primary-dark);
    margin: 0 0 12px;
}

/* sol bilgi kartı + sağ form kartı */
.contact-grid > div {
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

    .contact-grid > div::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
        opacity: .85;
    }

/* info list */
.info-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .info-list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 10px 12px;
        border-radius: 18px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(255,255,255,.50);
        box-shadow: 0 14px 30px rgba(0,0,0,.06);
        font-weight: 900;
        color: rgba(15,23,42,.82);
    }

    .info-list i {
        color: var(--accent-dark);
        margin-top: 2px;
    }

/* inputs */
.f-input, .f-textarea {
    width: 100%;
    border-radius: 16px;
    padding: 12px 12px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.92);
    font-weight: 850;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}

.f-textarea {
    min-height: 130px;
    resize: vertical;
}

    .f-input:focus, .f-textarea:focus {
        outline: none;
        border-color: rgba(34,194,138,.60);
        box-shadow: 0 0 0 4px rgba(34,194,138,.16);
        transform: translateY(-1px);
    }

.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

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

.row-1 {
    margin-bottom: 12px;
}

/* captcha */
.captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 12px 0;
    flex-wrap: wrap;
}

.captcha-box {
    height: 44px;
    min-width: 140px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(7,27,47,.08);
    border: 1px solid rgba(7,27,47,.10);
    color: var(--primary-dark);
    font-weight: 1000;
    letter-spacing: 6px;
    user-select: none;
}

/* buttons */
.btn-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.btn-send {
    border: 0;
    border-radius: 18px;
    padding: 12px 14px;
    font-weight: 1000;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 22px 50px rgba(34,194,138,.22);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .btn-send:hover {
        transform: translateY(-2px);
        box-shadow: 0 28px 70px rgba(34,194,138,.26);
        filter: brightness(1.03);
    }

.btn-clear {
    border-radius: 18px;
    padding: 12px 14px;
    font-weight: 1000;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,23,42,.14);
    cursor: pointer;
    color: rgba(15,23,42,.86);
    transition: transform var(--tr), box-shadow var(--tr);
}

    .btn-clear:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 50px rgba(0,0,0,.10);
    }

/* success alert */
.contact-success {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 22px;
    background: rgba(34,194,138,.14);
    border: 1px solid rgba(34,194,138,.22);
    color: rgba(9,60,40,.95);
    font-weight: 1000;
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
}

    .contact-success i {
        color: var(--accent-dark);
    }

/* map */
.map-wrap {
    margin-top: 18px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    height: 380px;
}
/* =========================================================
   TRANSFER — FINAL (mavi/yeşil cam tablo + form)
========================================================= */

.transfer-page-full {
    padding: 22px 0 34px;
}

.transfer-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

    .transfer-page .page-title {
        margin: 0 0 14px;
        font-weight: 1000;
        font-size: clamp(22px, 2.2vw, 34px);
        color: var(--primary-dark);
    }

/* tablo kart */
.transfer-table-wrap {
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    overflow: hidden;
}

.transfer-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

    .transfer-table thead th {
        padding: 14px 12px;
        text-align: left;
        font-weight: 1000;
        color: rgba(15,23,42,.82);
        background: rgba(7,27,47,.06);
        border-bottom: 1px solid rgba(15,23,42,.10);
    }

    .transfer-table td {
        padding: 14px 12px;
        border-bottom: 1px solid rgba(15,23,42,.08);
        font-weight: 900;
        color: rgba(15,23,42,.80);
    }

    .transfer-table tbody tr {
        transition: background var(--tr), transform var(--tr);
    }

        .transfer-table tbody tr:hover {
            background: rgba(34,194,138,.08);
        }

.td-center {
    text-align: center;
    white-space: nowrap;
}

.route {
    display: flex;
    align-items: center;
    gap: 10px;
}

.transfer-radio {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-dark);
    cursor: pointer;
}

/* form başlık */
.transfer-form-title {
    margin: 18px 0 12px;
    font-weight: 1000;
    font-size: 18px;
    color: var(--primary-dark);
}

/* form kart */
.transfer-form {
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 16px;
}

    .transfer-form .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

@media (max-width: 980px) {
    .transfer-form .row {
        grid-template-columns: 1fr;
    }
}

.transfer-form label {
    display: block;
    margin: 8px 0 8px;
    font-weight: 1000;
    color: var(--primary-dark);
}

.transfer-form input,
.transfer-form textarea {
    width: 100%;
    border-radius: 16px;
    padding: 12px 12px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.92);
    font-weight: 850;
    transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}

.transfer-form textarea {
    min-height: 120px;
    resize: vertical;
}

    .transfer-form input:focus,
    .transfer-form textarea:focus {
        outline: none;
        border-color: rgba(34,194,138,.60);
        box-shadow: 0 0 0 4px rgba(34,194,138,.16);
        transform: translateY(-1px);
    }

.transfer-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.btn-complete {
    border: 0;
    border-radius: 18px;
    padding: 12px 18px;
    font-weight: 1000;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 22px 50px rgba(34,194,138,.22);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .btn-complete:hover {
        transform: translateY(-2px);
        box-shadow: 0 28px 70px rgba(34,194,138,.26);
        filter: brightness(1.03);
    }

/* transfer success */
.transfer-success {
    padding: 22px 0 34px;
}

    .transfer-success .card {
        max-width: 860px;
        margin: 0 auto;
        text-align: center;
        border-radius: 26px;
        background: rgba(255,255,255,.55);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,.38);
        box-shadow: 0 34px 90px rgba(0,0,0,.10);
        padding: 18px;
    }

    .transfer-success .icon {
        width: 72px;
        height: 72px;
        border-radius: 999px;
        margin: 4px auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
        box-shadow: 0 22px 50px rgba(34,194,138,.22);
        font-size: 30px;
    }

    .transfer-success h2 {
        margin: 0;
        font-weight: 1000;
        color: var(--primary-dark);
        font-size: clamp(22px, 2.2vw, 34px);
    }

    .transfer-success p {
        margin: 10px auto 0;
        max-width: 640px;
        font-weight: 850;
        color: rgba(15,23,42,.72);
        line-height: 1.65;
    }

    .transfer-success .btn-home {
        display: inline-flex;
        margin-top: 16px;
        padding: 12px 16px;
        border-radius: 18px;
        font-weight: 1000;
        color: #fff;
        text-decoration: none;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
        box-shadow: 0 22px 50px rgba(14,51,82,.20);
    }

        .transfer-success .btn-home:hover {
            transform: translateY(-2px);
            box-shadow: 0 28px 70px rgba(14,51,82,.24);
        }

/* =========================================================
   HABER DETAY — FINAL (HTML'e dokunmadan)
   Koyu mavi + yeşil premium, cam kartlar
========================================================= */

.news-detail-layout {
    padding: 22px 0 34px;
    display: grid;
    grid-template-columns: 1.5fr .9fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 980px) {
    .news-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* SOL: içerik kartı */
.news-detail-left {
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

    .news-detail-left::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
        opacity: .85;
    }

    .news-detail-left h1 {
        margin: 0 0 10px;
        font-weight: 1000;
        color: var(--primary-dark);
        font-size: clamp(20px, 2vw, 34px);
        line-height: 1.15;
    }

.news-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 1000;
    color: rgba(15,23,42,.78);
    background: rgba(7,27,47,.06);
    border: 1px solid rgba(15,23,42,.08);
}

    .news-date::before {
        content: "📅";
    }

/* içerik typografi */
.news-content {
    color: rgba(15,23,42,.82);
    font-weight: 850;
    line-height: 1.75;
}

    .news-content p {
        margin: 0 0 12px;
    }

    .news-content h2,
    .news-content h3,
    .news-content h4 {
        margin: 18px 0 10px;
        font-weight: 1000;
        color: var(--primary-dark);
    }

    .news-content a {
        color: var(--accent-dark);
        font-weight: 1000;
        text-decoration: none;
        border-bottom: 1px dashed rgba(34,194,138,.65);
    }

        .news-content a:hover {
            border-bottom-style: solid;
        }

    /* içerikte resimler */
    .news-content img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 18px;
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 18px 50px rgba(0,0,0,.10);
        margin: 14px 0;
    }

/* SAĞ: son haberler kartı */
.news-detail-right {
    border-radius: 26px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: 0 34px 90px rgba(0,0,0,.10);
    padding: 16px;
    position: sticky;
    top: 14px;
}

@media (max-width: 980px) {
    .news-detail-right {
        position: relative;
        top: auto;
    }
}

.news-detail-right h3 {
    margin: 0 0 12px;
    font-weight: 1000;
    color: var(--primary-dark);
}

/* sağ grid */
.side-news-grid {
    display: grid;
    gap: 10px;
}

/* sağ kart */
.side-news-card {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 18px;
    text-decoration: none;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
    transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}

    .side-news-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 50px rgba(0,0,0,.10);
        filter: brightness(1.01);
    }

    .side-news-card img {
        width: 74px;
        height: 54px;
        object-fit: cover;
        border-radius: 14px;
        border: 1px solid rgba(15,23,42,.10);
        flex: 0 0 auto;
    }

    .side-news-card div {
        font-weight: 1000;
        color: rgba(15,23,42,.84);
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
/* ===== Steps (1-2-3) ===== */
.ilgin-steps {
    margin: 22px 0 14px;
}

.ilgin-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

    .ilgin-steps-bar .step {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 200px;
    }

    .ilgin-steps-bar .dot {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        background: #eef2f7;
        color: #0b2239;
        border: 1px solid rgba(0,0,0,.06);
    }

    .ilgin-steps-bar .step .t {
        font-weight: 900;
        color: #0b2239;
    }

    .ilgin-steps-bar .step .s {
        font-weight: 800;
        font-size: 12px;
        color: #6b7a89;
    }

    .ilgin-steps-bar .line {
        flex: 1;
        height: 2px;
        background: rgba(0,0,0,.10);
        border-radius: 999px;
    }

    .ilgin-steps-bar .step.done .dot {
        background: rgba(0,227,154,.18);
        border-color: rgba(0,227,154,.35);
        color: #062013;
    }
/* Auth sayfalarında header altına nefes */
.auth-page {
    padding-top: 16px;
    padding-bottom: 30px;
}
/* =========================
   GLOBAL BUTTON SYSTEM
   ========================= */
:root {
    --brand-grad: linear-gradient(90deg,#00c186,#00a3ff);
    --brand-grad-2: linear-gradient(90deg,#00a3ff,#00c186);
    --brand-shadow: 0 12px 26px rgba(0,163,255,.18);
    --brand-ring: 0 0 0 4px rgba(0,193,134,.18);
}

/* genel buton */
.btn,
button,
input[type="submit"],
a.btn,
a.btn-home,
a.rent-btn,
a.car-btn,
.btn-green,
.btn-list,
.finish,
.btn-complete {
    border: 0 !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
    cursor: pointer;
    color: #fff !important;
    background: var(--brand-grad) !important;
    box-shadow: var(--brand-shadow) !important;
    transition: .18s ease;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .btn:hover,
    button:hover,
    input[type="submit"]:hover,
    a.btn:hover,
    a.btn-home:hover,
    a.rent-btn:hover,
    a.car-btn:hover,
    .btn-green:hover,
    .btn-list:hover,
    .finish:hover,
    .btn-complete:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }

    .btn:active,
    button:active,
    input[type="submit"]:active,
    a.btn:active {
        transform: translateY(0px);
        filter: brightness(.98);
    }

/* outline / secondary */
.btn-outline {
    background: #fff !important;
    color: #0b2239 !important;
    border: 1px solid rgba(11,34,57,.18) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
}

    .btn-outline:hover {
        box-shadow: 0 14px 34px rgba(0,0,0,.12) !important;
    }

/* focus ring */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: var(--brand-ring);
    border-color: rgba(0,193,134,.55) !important;
}
/* =========================
   HEADER THEME (modern)
   ========================= */
.header,
.desktop-header,
.mobile-header {
    background: linear-gradient(90deg,#06192b,#0b2239) !important;
}

.menu a {
    color: #eaf6ff !important;
    opacity: .92;
}

    .menu a:hover {
        opacity: 1;
        color: #fff !important;
    }

.header-icons a {
    color: #eaf6ff !important;
}

.lang-dd__btn {
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.06) !important;
}

/* header alt çizgi - brand */
.header {
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
    border-bottom: 1px solid rgba(0,193,134,.20);
}
/* =========================
   HOME HERO - nicer look
   ========================= */
.hero {
    position: relative;
    padding: 26px 0 30px;
    background: radial-gradient(900px 450px at 20% 15%, rgba(0,193,134,.18), transparent 60%), radial-gradient(900px 450px at 80% 20%, rgba(0,163,255,.18), transparent 60%), linear-gradient(180deg,#e9f7ff 0%, #ffffff 45%, #ffffff 100%);
}

.hero-inner {
    gap: 22px;
}

/* sağ slider cam panel */
.hero-slider {
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.75);
}

    /* slider görseller daha sinematik dursun */
    .hero-slider img {
        width: 100%;
        filter: contrast(1.05) saturate(1.05);
    }

/* slider okları daha şık */
.slider-btn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    border: 1px solid rgba(255,255,255,.45);
    backdrop-filter: blur(10px);
}

    .slider-btn:hover {
        background: rgba(255,255,255,.38);
    }
/* =========================
   PAGE (About etc.) layout
   ========================= */
.page-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 26px;
    padding: 34px 0;
    align-items: start;
}

.page-content {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(11,34,57,.10);
    border-radius: 22px;
    box-shadow: 0 18px 55px rgba(0,0,0,.12);
    padding: 22px;
}

    .page-content h1 {
        margin: 0 0 12px 0;
        font-size: 30px;
        font-weight: 900;
        color: #0b2239;
    }

.page-text {
    color: #1b2b3b;
    line-height: 1.7;
    font-size: 15px;
}

/* sağ menü kartı */
.page-sidebar {
    position: sticky;
    top: 18px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(11,34,57,.10);
    border-radius: 22px;
    box-shadow: 0 18px 55px rgba(0,0,0,.12);
    padding: 18px;
}

    .page-sidebar h4 {
        margin: 0 0 12px 0;
        font-size: 16px;
        font-weight: 900;
        color: #0b2239;
    }

    .page-sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .page-sidebar a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 12px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 900;
        color: #0b2239;
        background: #fff;
        border: 1px solid rgba(11,34,57,.10);
        box-shadow: 0 10px 26px rgba(0,0,0,.08);
        transition: .18s;
    }

        .page-sidebar a::before {
            content: "\f35a";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: rgba(0,163,255,.85);
        }

        .page-sidebar a:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 34px rgba(0,0,0,.12);
        }

/* mobil */
@media (max-width: 992px) {
    .page-layout {
        grid-template-columns: 1fr;
    }

    .page-sidebar {
        position: static;
    }
}
/* =========================
   TRANSFER - premium look
   ========================= */
.transfer-page-full {
    background: radial-gradient(900px 450px at 20% 15%, rgba(0,193,134,.14), transparent 60%), radial-gradient(900px 450px at 80% 20%, rgba(0,163,255,.14), transparent 60%), linear-gradient(180deg,#e9f7ff 0%, #ffffff 45%, #ffffff 100%) !important;
}

.transfer-page {
    max-width: 1250px !important;
    margin: 0 auto !important;
}

.transfer-table-wrap,
.transfer-form {
    border-radius: 22px !important;
    border: 1px solid rgba(11,34,57,.10) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.12) !important;
}

.transfer-table thead th {
    background: linear-gradient(90deg,#06192b,#0b2239) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
}

.transfer-table td {
    background: rgba(255,255,255,.92) !important;
}

.transfer-table tbody tr:hover td {
    background: rgba(0,163,255,.06) !important;
}

.route {
    font-weight: 800;
    color: #0b2239;
}

/* radio daha modern */
.transfer-radio {
    accent-color: #00c186;
    transform: scale(1.1);
}

/* form input */
.transfer-form input,
.transfer-form textarea {
    border-radius: 14px !important;
    border: 1px solid rgba(11,34,57,.16) !important;
    height: 52px;
}

.transfer-form textarea {
    height: 120px;
}
/* =========================================================
   THEME TOKENS
   ========================================================= */
:root {
    --brand-grad: linear-gradient(90deg,#00c186,#00a3ff);
    --brand-grad-2: linear-gradient(90deg,#00a3ff,#00c186);
    --brand-shadow: 0 14px 30px rgba(0,163,255,.18);
    --brand-ring: 0 0 0 4px rgba(0,193,134,.18);
    --ink: #0b2239;
    --bg-soft: radial-gradient(900px 450px at 20% 15%, rgba(0,193,134,.14), transparent 60%), radial-gradient(900px 450px at 80% 20%, rgba(0,163,255,.14), transparent 60%), linear-gradient(180deg,#e9f7ff 0%, #ffffff 45%, #ffffff 100%);
}

/* =========================================================
   GLOBAL BUTTON SYSTEM (EVERYWHERE)
   ========================================================= */
.btn,
button,
input[type="submit"],
a.btn,
a.btn-home,
a.rent-btn,
a.car-btn,
.btn-green,
.btn-list,
.finish,
.btn-complete,
.rent-now-btn, /* ✅ home car card button */
.profile-save-btn,
.profile-cancel-btn {
    border: 0 !important;
    border-radius: 18px !important;
    padding: 12px 18px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
    cursor: pointer;
    color: #fff !important;
    background: var(--brand-grad) !important;
    box-shadow: var(--brand-shadow) !important;
    transition: .18s ease;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 48px;
}

/* o ekrandaki buton büyük ve tek satır/iki satır düzgün */
.rent-now-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 16px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

    /* disabled / not available */
    .rent-now-btn.not-available,
    .btn[disabled], button[disabled], input[disabled] {
        background: linear-gradient(90deg,#9fb3bf,#c3d0d8) !important;
        color: #fff !important;
        opacity: .85;
        cursor: not-allowed !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
        transform: none !important;
    }

    .btn:hover,
    button:hover,
    input[type="submit"]:hover,
    a.btn:hover,
    a.btn-home:hover,
    a.rent-btn:hover,
    a.car-btn:hover,
    .btn-green:hover,
    .btn-list:hover,
    .finish:hover,
    .btn-complete:hover,
    .rent-now-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }

.btn:active,
button:active,
input[type="submit"]:active,
a.btn:active {
    transform: translateY(0px);
    filter: brightness(.98);
}

/* focus ring */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: var(--brand-ring) !important;
    border-color: rgba(0,193,134,.55) !important;
}

/* =========================================================
   HEADER THEME (modern / uyumlu)
   ========================================================= */
.header,
.desktop-header,
.mobile-header {
    background: linear-gradient(90deg,#06192b,#0b2239) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
    border-bottom: 1px solid rgba(0,193,134,.20);
}

.menu a {
    color: #eaf6ff !important;
    opacity: .92;
}

    .menu a:hover {
        opacity: 1;
        color: #fff !important;
    }

.lang-dd__btn {
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.06) !important;
}

/* =========================================================
   HOME HERO - nicer look
   ========================================================= */
.hero {
    position: relative;
    padding: 26px 0 30px;
    background: var(--bg-soft);
}

.hero-slider {
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.75);
}

    .hero-slider img {
        width: 100%;
        filter: contrast(1.05) saturate(1.05);
    }

.slider-btn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    border: 1px solid rgba(255,255,255,.45);
    backdrop-filter: blur(10px);
}

    .slider-btn:hover {
        background: rgba(255,255,255,.38);
    }

/* =========================================================
   PAGE (About etc.) layout (solda içerik sağda menü)
   ========================================================= */
.page-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 26px;
    padding: 34px 0;
    align-items: start;
}

.page-content {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(11,34,57,.10);
    border-radius: 22px;
    box-shadow: 0 18px 55px rgba(0,0,0,.12);
    padding: 22px;
}

    .page-content h1 {
        margin: 0 0 12px 0;
        font-size: 30px;
        font-weight: 900;
        color: var(--ink);
    }

.page-text {
    color: #1b2b3b;
    line-height: 1.7;
    font-size: 15px;
}

.page-sidebar {
    position: sticky;
    top: 18px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(11,34,57,.10);
    border-radius: 22px;
    box-shadow: 0 18px 55px rgba(0,0,0,.12);
    padding: 18px;
}

    .page-sidebar h4 {
        margin: 0 0 12px 0;
        font-size: 16px;
        font-weight: 900;
        color: var(--ink);
    }

    .page-sidebar ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .page-sidebar a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 12px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 900;
        color: var(--ink);
        background: #fff;
        border: 1px solid rgba(11,34,57,.10);
        box-shadow: 0 10px 26px rgba(0,0,0,.08);
        transition: .18s;
    }

        .page-sidebar a::before {
            content: "\f35a";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: rgba(0,163,255,.85);
        }

        .page-sidebar a:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 34px rgba(0,0,0,.12);
        }

/* responsive */
@media (max-width: 992px) {
    .page-layout {
        grid-template-columns: 1fr;
    }

    .page-sidebar {
        position: static;
    }
}

/* =========================================================
   TRANSFER - premium look
   ========================================================= */
.transfer-page-full {
    background: var(--bg-soft) !important;
    padding: 40px 0 !important;
}

.transfer-page {
    max-width: 1250px !important;
    margin: 0 auto !important;
}

.transfer-table-wrap,
.transfer-form {
    border-radius: 22px !important;
    border: 1px solid rgba(11,34,57,.10) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.12) !important;
}

.transfer-table thead th {
    background: linear-gradient(90deg,#06192b,#0b2239) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
}

.transfer-table td {
    background: rgba(255,255,255,.92) !important;
}

.transfer-table tbody tr:hover td {
    background: rgba(0,163,255,.06) !important;
}

.route {
    font-weight: 800;
    color: var(--ink);
}

.transfer-radio {
    accent-color: #00c186;
    transform: scale(1.1);
}

.transfer-form input,
.transfer-form textarea {
    border-radius: 14px !important;
    border: 1px solid rgba(11,34,57,.16) !important;
    height: 52px;
}

.transfer-form textarea {
    height: 120px;
}

/* Ilgin gradient button (global) */
.rent-now-btn,
.car-btn,
.btn-home,
.btn-list,
.finish,
.rent-btn {
    background: linear-gradient(135deg, #0ac77d 0%, #00a7ff 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 16px !important;
    font-weight: 1000 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.14) !important;
    transition: transform .15s ease, filter .15s ease;
}

    .rent-now-btn:hover,
    .car-btn:hover,
    .btn-home:hover,
    .btn-list:hover,
    .finish:hover,
    .rent-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }


/* 1) Altındaki 3 nokta (dots) komple kapansın */
.slider-dots {
    display: none !important;
}

/* 2) Slider kutusu */
.hero-slider {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #06192b 0%, #0b2239 50%, #06192b 100%);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

    /* 3) Resimleri taşıyan alan (yüksekliği kontrol et) */
    .hero-slider .slider-wrapper {
        position: relative;
        width: 100%;
        height: 520px; /* istersen 480/560 yap */
        overflow: hidden;
    }

        /* 4) Resimler: KESMESİN -> object-fit: contain */
        .hero-slider .slider-wrapper img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain; /* 🔥 tam gösterir */
            object-position: center;
            display: block;
            opacity: 0;
            transition: opacity .35s ease;
            background: transparent;
            padding: 12px; /* kenarlara nefes */
        }

            .hero-slider .slider-wrapper img.active {
                opacity: 1;
            }

    /* Ok butonları (güzel görünüm) */
    .hero-slider .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 46px;
        height: 46px;
        border-radius: 999px;
        border: 0;
        cursor: pointer;
        z-index: 5;
        background: linear-gradient(90deg,#00c186,#00a3ff);
        color: #fff;
        font-size: 22px;
        font-weight: 900;
        box-shadow: 0 14px 30px rgba(0,163,255,.20);
    }

        .hero-slider .slider-btn.left {
            left: 14px;
        }

        .hero-slider .slider-btn.right {
            right: 14px;
        }

        .hero-slider .slider-btn:hover {
            filter: brightness(1.05);
        }
/* =========================
   HERO SLIDER - KIRPMA FIX (FORCE)
   ========================= */

/* wrapper kesin sabit alan */
.hero .hero-slider .slider-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 560px !important; /* gerekirse 620 yap */
    overflow: hidden !important;
}

    /* resimler kesinlikle tam görünsün */
    .hero .hero-slider .slider-wrapper img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* 🔥 kırpma yok */
        object-position: center center !important;
        padding: 0 !important; /* padding kırpmayı hissettiriyordu */
        margin: 0 !important;
        display: block !important;
        background: transparent !important;
    }

    /* active olmayanlar gizlensin */
    .hero .hero-slider .slider-wrapper img {
        opacity: 0 !important;
        transition: opacity .35s ease !important;
    }

        .hero .hero-slider .slider-wrapper img.active {
            opacity: 1 !important;
        }

/* dots komple kapalı */
.hero .slider-dots {
    display: none !important;
}

.hero-grid {
    display: grid !important;
    grid-template-columns: 1.7fr 1fr !important; /* slider büyük */
    gap: 24px !important;
    align-items: start !important;
}

.hero-form {
    position: sticky !important;
    top: 90px !important; /* header altına yapışık */
}
/* =========================
   HEADER ALTINDA YATAY REZERVASYON BAR
   ========================= */

.home-resbar {
    padding: 14px 0 10px;
    background: var(--bg-soft);
}

.reservation-bar {
    display: grid;
    grid-template-columns: 1.35fr 1.35fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(11,34,57,.10);
    box-shadow: 0 18px 55px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
}

.rb-field {
    min-width: 0;
}

.rb-label {
    font-weight: 950;
    font-size: 12px;
    color: rgba(11,34,57,.75);
    margin: 0 0 8px;
}

/* dropdown/input yüksekliği eşitlensin */
.reservation-bar .rd-head,
.reservation-bar input[type="datetime-local"] {
    height: 52px;
    border-radius: 16px;
}

/* Buton */
.rb-btn {
    height: 52px;
    padding: 0 22px;
    border-radius: 16px;
    font-weight: 1000;
    white-space: nowrap;
}

/* =========================
   SLIDER ALTTA
   ========================= */

.home-slider {
    padding: 10px 0 22px;
    background: var(--bg-soft);
}

  
    /* DOTLARI KAPAT (varsa) */
    .home-slider .slider-dots {
        display: none !important;
    }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px) {
    .reservation-bar {
        grid-template-columns: 1fr 1fr;
    }

    .rb-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 680px) {
    .reservation-bar {
        grid-template-columns: 1fr;
    }
}
/* =========================
   HEADER biraz daha açık
========================= */
.desktop-header {
    background: radial-gradient(900px 450px at 10% 0%, rgba(34,194,138,.18), transparent 55%), linear-gradient(180deg, #0b2a45 0%, #081f34 100%) !important;
}

.header {
    border-bottom: 1px solid rgba(0,193,134,.22) !important;
}

/* =========================
   HERO: üstte rezervasyon barı, altta slider
========================= */
.hero .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

/* =========================
   REZERVASYON BAR (yatay)
========================= */
.hero .reservation-box.reservation-bar {
    width: 100%;
    padding: 16px 18px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(11,34,57,.10) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 60px rgba(0,0,0,.10) !important;
    color: #0b2239 !important;
    display: grid !important;
    grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

    /* başlıkları küçült/şık */
    .hero .reservation-box.reservation-bar h3 {
        margin: 0 0 8px !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        color: rgba(11,34,57,.80) !important;
    }

    /* input/select görünümü */
    .hero .reservation-box.reservation-bar .rd-head,
    .hero .reservation-box.reservation-bar input[type="datetime-local"] {
        border-radius: 16px !important;
        background: rgba(255,255,255,.92) !important;
        border: 1px solid rgba(11,34,57,.12) !important;
        min-height: 52px;
    }

    /* buton bar içinde sağda */
    .hero .reservation-box.reservation-bar .btn-reserve {
        min-height: 52px;
        padding: 14px 18px !important;
        border-radius: 16px !important;
        background: linear-gradient(90deg,#00c186,#00a3ff) !important;
        box-shadow: 0 16px 40px rgba(0,163,255,.18) !important;
    }

    /* ✅ Siyah çizdiğin "Şehir Seçiniz" (panelin üst başlığı) tamamen kalksın */
    .hero .reservation-box.reservation-bar .rd-title {
        display: none !important;
    }

    /* panel daha şık dursun */
    .hero .reservation-box.reservation-bar .rd-panel {
        margin-top: 10px !important;
        border-radius: 18px !important;
        background: rgba(11,34,57,.96) !important;
    }

/* responsive: mobilde alt alta */
@media (max-width: 980px) {
    .hero .reservation-box.reservation-bar {
        grid-template-columns: 1fr !important;
    }
}

/* =========================
   SLIDER: koyu mavi alan kalksın, cam kart + premium görünüm
========================= */
.hero .hero-slider {
    border-radius: 26px !important;
    border: 1px solid rgba(11,34,57,.10) !important;
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 70px rgba(0,0,0,.12) !important;
    overflow: hidden !important;
}

    /* slider alanı */
    .hero .hero-slider .slider-wrapper {
        height: 520px !important; /* istersen 480 yap */
        background: transparent !important;
    }

        /* görseller: tam görünsün (kesme yok) */
        .hero .hero-slider .slider-wrapper img {
            object-fit: contain !important;
            padding: 18px !important;
            background: transparent !important;
        }

    /* oklar daha premium */
    .hero .hero-slider .slider-btn {
        width: 52px !important;
        height: 52px !important;
        border-radius: 999px !important;
        border: 0 !important;
        background: linear-gradient(90deg,#00c186,#00a3ff) !important;
        box-shadow: 0 16px 40px rgba(0,163,255,.18) !important;
    }

        .hero .hero-slider .slider-btn:hover {
            filter: brightness(1.05);
        }

/* noktalar zaten istemiyorsun */
.hero .slider-dots {
    display: none !important;
}
/* =========================
   HOME RESERVATION BAR
========================= */
.home-resbar {
    padding: 26px 0;
    background: linear-gradient( 180deg, rgba(0,193,134,.10), rgba(0,163,255,.08) );
}

    .home-resbar .reservation-bar {
        display: grid;
        grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto;
        gap: 14px;
        background: rgba(255,255,255,.75);
        border-radius: 24px;
        padding: 18px 20px;
        border: 1px solid rgba(11,34,57,.12);
        backdrop-filter: blur(14px);
        box-shadow: 0 24px 60px rgba(0,0,0,.10);
    }

    /* alan başlıkları */
    .home-resbar .rb-label {
        font-size: 13px;
        font-weight: 900;
        color: #0b2239;
        margin-bottom: 6px;
    }

    /* select & date */
    .home-resbar .rd-head,
    .home-resbar input[type="datetime-local"] {
        height: 52px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid rgba(11,34,57,.14);
        font-weight: 800;
    }

    /* buton */
    .home-resbar .rb-btn {
        height: 52px;
        padding: 0 22px;
        border-radius: 16px;
        border: 0;
        font-weight: 900;
        color: #fff;
        background: linear-gradient(90deg,#00c186,#00a3ff);
        box-shadow: 0 16px 40px rgba(0,163,255,.22);
    }

/* mobil */
@media (max-width: 992px) {
    .home-resbar .reservation-bar {
        grid-template-columns: 1fr;
    }
}
/* =========================
   TIKLANMIYOR FIX (Z-INDEX)
========================= */

/* rezervasyon barı her şeyin üstünde olsun */
.home-resbar {
    position: relative !important;
    z-index: 9999 !important;
}

    .home-resbar .reservation-bar {
        position: relative !important;
        z-index: 10000 !important;
    }

    /* bar içindeki gerçek tıklanacak elemanlar */
    .home-resbar .rd,
    .home-resbar .rd-head,
    .home-resbar input,
    .home-resbar button {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
    }

/* slider aşağıda kalsın */
.home-slider {
    position: relative !important;
    z-index: 1 !important;
}

/* bazen slider img'leri üstte kalıp tıklamayı çalıyor */
.hero-slider .slider-wrapper img {
    pointer-events: none !important;
}

/* oklar yine tıklansın */
.hero-slider .slider-btn {
    pointer-events: auto !important;
}

/* kullanıcı hissi */
.home-resbar .rd-head {
    cursor: pointer !important;
}
/* =========================
   REZ BAR DROPDOWN - SON HAL
========================= */

.home-resbar {
    position: relative;
    z-index: 9999;
}

    .home-resbar .reservation-bar {
        position: relative;
        z-index: 10000;
    }

    .home-resbar .rd {
        position: relative;
        z-index: 10001;
    }

    /* tıklanacak alan */
    .home-resbar .rd-head {
        height: 52px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid rgba(11,34,57,.14);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        font-weight: 800;
        cursor: pointer;
        user-select: none;
    }

    /* panel: tam rd-head'in ALTINDA */
    .home-resbar .rd-panel {
        position: absolute;
        top: calc(52px + 8px);
        left: 0;
        width: 100%;
        z-index: 20000;
        border-radius: 18px;
        background: rgba(11,34,57,.96);
        box-shadow: 0 24px 60px rgba(0,0,0,.18);
        padding: 10px;
    }

    /* liste ve item */
    .home-resbar .rd-list {
        max-height: 260px;
        overflow: auto;
    }

    .home-resbar .rd-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        color: #fff;
        cursor: pointer;
    }

        .home-resbar .rd-item:hover {
            background: rgba(255,255,255,.10);
        }

    .home-resbar .rd-arrow {
        opacity: .7;
    }

    /* geri dön butonu */
    .home-resbar .rd-back {
        width: 100%;
        margin-top: 10px;
        border: 0;
        border-radius: 14px;
        padding: 10px 12px;
        cursor: pointer;
        font-weight: 900;
        background: rgba(255,255,255,.12);
        color: #fff;
    }

/* Slider resimleri tıklamayı çalmasın */
.hero-slider .slider-wrapper img {
    pointer-events: none;
}

.hero-slider .slider-btn {
    pointer-events: auto;
}
/* ✅ Rezervasyon bar ve dropdown panel görünür olsun */
.home-resbar,
.reservation-bar,
.rb-field,
.select-wrapper {
    overflow: visible !important;
}

/* ✅ dropdown kökü */
.rd {
    position: relative !important;
    z-index: 50 !important;
}

/* ✅ tıklanan başlık */
.rd-head {
    cursor: pointer !important;
    user-select: none;
    position: relative;
    z-index: 51 !important;
}

/* ✅ açılan panel */
.rd-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: rgba(11,34,57,.96) !important;
    border-radius: 18px !important;
    padding: 10px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.25) !important;
}

/* ✅ şehirlerin listesi GÖRÜNSÜN */
.rd-list {
    max-height: 260px !important;
    overflow: auto !important;
    padding: 6px !important;
}

/* ✅ şehir/konum satırı */
.rd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
}

    .rd-item:hover {
        background: rgba(255,255,255,.10);
    }

.rd-arrow {
    opacity: .9;
}

/* ✅ geri butonu */
.rd-back {
    margin-top: 10px;
    width: 100%;
    border: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(90deg,#00c186,#00a3ff);
    cursor: pointer;
}
/* ✅ MOBİLDE DE PANEL, TIKLANAN ALANIN HEMEN ALTINDA AÇILSIN (2. GÖRSEL GİBİ) */
@media (max-width: 768px) {
    .home-resbar,
    .reservation-bar,
    .rb-field,
    .select-wrapper {
        overflow: visible !important;
    }

    .rd {
        position: relative !important;
        z-index: 2000 !important;
    }

    .rd-panel {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        z-index: 99999 !important;
        border-radius: 18px !important;
    }

    .rd-list {
        max-height: 45vh !important; /* mobilde uzun liste taşmasın */
        overflow: auto !important;
    }
}
/* ✅ DROPDOWN ÜSTE ÇIKSIN (MOBİL/PC) */
.home-resbar,
.home-resbar .reservation-bar,
.home-resbar .rb-field,
.home-resbar .select-wrapper {
    overflow: visible !important;
}

    /* açılan dropdown en üste */
    .home-resbar .rd.open {
        position: relative !important;
        z-index: 999999 !important;
    }

        .home-resbar .rd.open .rd-panel {
            position: absolute !important;
            top: calc(100% + 10px) !important;
            left: 0 !important;
            right: 0 !important;
            bottom: auto !important;
            z-index: 999999 !important;
        }
/* =========================================================
   ✅ SLIDER: MAVİ KENARLARI KALDIR + OKLARI TAM KENARA AL
   (EN ALTA KOY)
========================================================= */

/* slider dış kutu: arka plan/padding yok */
.hero .hero-slider {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
}

    /* slider alanı: padding yok */
    .hero .hero-slider .slider-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 560px !important; /* ihtiyaca göre 520/600 */
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

        /* resim: TAM DOLDURSUN -> mavi boşluk kalmaz */
        .hero .hero-slider .slider-wrapper img {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important; /* 🔥 boşluk bırakmaz */
            object-position: center !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            display: block !important;
        }

        /* active görünür kalsın */
        .hero .hero-slider .slider-wrapper img {
            opacity: 0 !important;
        }

            .hero .hero-slider .slider-wrapper img.active {
                opacity: 1 !important;
            }

    /* OKLAR: tam slider başlangıç/bitiş çizgisine */
    .hero .hero-slider .slider-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }

        .hero .hero-slider .slider-btn.left {
            left: 0 !important;
            transform: translate(-50%, -50%) !important; /* yarısı dışarda, tam kenar */
        }

        .hero .hero-slider .slider-btn.right {
            right: 0 !important;
            transform: translate(50%, -50%) !important; /* yarısı dışarda, tam kenar */
        }

/* mobil */
@media (max-width: 680px) {
    .hero .hero-slider .slider-wrapper {
        height: 380px !important;
    }
}
/* =========================================================
   SLIDER - MAVİ KENARLARI KALDIR + OKLARI TAM KENARA AL
   (CSS'in EN ALTINA KOY)
========================================================= */

.hero-slider,
.hero .hero-slider {
    background: transparent !important;
    padding: 0 !important;
}

    .hero-slider .slider-wrapper,
    .hero .hero-slider .slider-wrapper {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

        /* ✅ Mavi kenarların sebebi: contain. Bunu cover yapıyoruz */
        .hero-slider .slider-wrapper img,
        .hero .hero-slider .slider-wrapper img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important; /* 🔥 boşluk bırakmaz */
            object-position: center !important;
            padding: 0 !important; /* varsa kenar boşluğu sil */
            margin: 0 !important;
            background: transparent !important;
        }

    /* ✅ Oklar tam başlangıç/bitiş */
    .hero-slider .slider-btn.left,
    .hero .hero-slider .slider-btn.left {
        left: 0 !important;
        transform: translateY(-50%) !important;
    }

    .hero-slider .slider-btn.right,
    .hero .hero-slider .slider-btn.right {
        right: 0 !important;
        transform: translateY(-50%) !important;
    }

    /* Butonlar kenarda dursun diye biraz içeri al (istersen 0 yap) */
    .hero-slider .slider-btn.left {
        margin-left: 10px !important;
    }

    .hero-slider .slider-btn.right {
        margin-right: 10px !important;
    }
/* =====================================================
   SLIDER - KIRPMA YOK, ALAN OTOMATİK KÜÇÜLSÜN
===================================================== */

/* Slider ve wrapper artık yükseklik zorlamaz */
.hero-slider,
.hero .hero-slider {
    background: transparent !important;
    padding: 0 !important;
}

    .hero-slider .slider-wrapper,
    .hero .hero-slider .slider-wrapper {
        position: relative !important;
        width: 100% !important;
        height: auto !important; /* 🔥 SABİT YÜKSEKLİK YOK */
        aspect-ratio: 16 / 9; /* ✅ Dengeli görünüm */
        overflow: hidden !important;
        background: transparent !important;
    }

        /* Resimler KESİNLİKLE kırpılmaz */
        .hero-slider .slider-wrapper img,
        .hero .hero-slider .slider-wrapper img {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important; /* ❗ KIRPMA YOK */
            object-position: center center !important;
            padding: 0 !important;
            margin: 0 !important;
            background: transparent !important;
            opacity: 0;
            transition: opacity .35s ease;
        }

            .hero-slider .slider-wrapper img.active {
                opacity: 1;
            }

    /* Oklar TAM başlangıç / bitiş */
    .hero-slider .slider-btn.left {
        left: 0 !important;
        transform: translate(10px, -50%) !important;
    }

    .hero-slider .slider-btn.right {
        right: 0 !important;
        transform: translate(-10px, -50%) !important;
    }

/* Mobilde daha kısa */
@media (max-width: 768px) {
    .hero-slider .slider-wrapper {
        aspect-ratio: 4 / 3;
    }
}
/* =========================================================
   BLOG (LIST + DETAIL) — PREMIUM (HTML'e dokunmadan)
   Sayfalar:
   - Blog Liste: h1 + açıklama + article
   - Blog Detay: .blog-content
========================================================= */

/* Blog sayfasındaki ana container görünümü */
.container[style*="max-width:1000px"][style*="margin:40px auto"] {
    max-width: 1000px !important;
    margin: 28px auto !important;
    padding: 0 6px;
}

    /* H1 */
    .container[style*="max-width:1000px"][style*="margin:40px auto"] > h1 {
        margin: 0 0 10px;
        font-size: clamp(24px, 2.2vw, 36px);
        font-weight: 1000;
        letter-spacing: .2px;
        color: var(--primary-dark);
    }

    /* Üst açıklama (SEO paragrafı) */
    .container[style*="max-width:1000px"][style*="margin:40px auto"] > p {
        margin: 0 0 18px;
        color: rgba(15,23,42,.72) !important;
        font-weight: 800;
        line-height: 1.75 !important;
        max-width: 78ch;
    }

    /* ayırıcı */
    .container[style*="max-width:1000px"][style*="margin:40px auto"] > hr {
        border: 0;
        height: 1px;
        background: rgba(15,23,42,.10);
        margin: 18px 0;
    }

    /* =========================
   BLOG LIST (article cards)
========================= */
    .container[style*="max-width:1000px"][style*="margin:40px auto"] article {
        margin: 0 0 18px !important;
        padding: 18px 18px;
        border-radius: 26px;
        background: rgba(255,255,255,.70);
        border: 1px solid rgba(15,23,42,.08);
        box-shadow: 0 24px 70px rgba(0,0,0,.08);
        position: relative;
        overflow: hidden;
    }

        /* solda neon çizgi */
        .container[style*="max-width:1000px"][style*="margin:40px auto"] article::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(180deg, rgba(34,194,138,0) 0%, rgba(34,194,138,.85) 50%, rgba(34,194,138,0) 100%);
            opacity: .85;
        }

        /* hover */
        .container[style*="max-width:1000px"][style*="margin:40px auto"] article:hover {
            transform: translateY(-2px);
            box-shadow: 0 34px 90px rgba(0,0,0,.10);
            transition: .18s ease;
        }

        /* Blog başlık (h2) */
        .container[style*="max-width:1000px"][style*="margin:40px auto"] article h2 {
            margin: 0 0 10px !important;
            font-size: clamp(18px, 1.6vw, 26px);
            font-weight: 1000;
            color: var(--primary-dark);
            letter-spacing: .2px;
        }

            /* Başlık linki */
            .container[style*="max-width:1000px"][style*="margin:40px auto"] article h2 a {
                text-decoration: none !important;
                color: var(--primary-dark) !important;
            }

                .container[style*="max-width:1000px"][style*="margin:40px auto"] article h2 a:hover {
                    color: var(--accent-dark) !important;
                }

        /* Liste görseli */
        .container[style*="max-width:1000px"][style*="margin:40px auto"] article img {
            width: 100%;
            max-width: 100%;
            height: auto;
            border-radius: 20px !important;
            margin: 14px 0 12px !important;
            border: 1px solid rgba(15,23,42,.10);
            box-shadow: 0 18px 50px rgba(0,0,0,.10);
        }

        /* Kısa açıklama */
        .container[style*="max-width:1000px"][style*="margin:40px auto"] article p {
            margin: 0 0 12px !important;
            color: rgba(15,23,42,.74) !important;
            font-weight: 850;
            line-height: 1.75 !important;
        }

        /* "Devamını Oku" linki → buton gibi */
        .container[style*="max-width:1000px"][style*="margin:40px auto"] article > a[href^="/blog/"] {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 999px;
            font-weight: 1000 !important;
            color: #fff !important;
            background: linear-gradient(90deg,#00c186,#00a3ff);
            box-shadow: 0 14px 30px rgba(0,163,255,.18);
            text-decoration: none !important;
            transition: transform .15s ease, filter .15s ease;
        }

            .container[style*="max-width:1000px"][style*="margin:40px auto"] article > a[href^="/blog/"]:hover {
                transform: translateY(-1px);
                filter: brightness(1.03);
            }

        /* Listede alt hr'lar */
        .container[style*="max-width:1000px"][style*="margin:40px auto"] article + hr {
            border: 0;
            height: 1px;
            background: rgba(15,23,42,.10);
            margin: 16px 0 20px;
        }

    /* =========================
   BLOG DETAIL
========================= */

    /* tarih */
    .container[style*="max-width:1000px"][style*="margin:40px auto"] > p[style*="font-size:14px"] {
        margin: 6px 0 0 !important;
        color: rgba(15,23,42,.55) !important;
        font-weight: 800;
    }

    /* detay görseli */
    .container[style*="max-width:1000px"][style*="margin:40px auto"] > img {
        width: 100% !important;
        border-radius: 22px !important;
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 18px 55px rgba(0,0,0,.12);
    }

/* içerik tipografi */
.blog-content {
    margin-top: 12px;
    color: rgba(15,23,42,.82);
    font-weight: 850;
    line-height: 1.85;
    font-size: 15.5px;
}

    .blog-content p {
        margin: 0 0 14px;
    }

    .blog-content h2, .blog-content h3, .blog-content h4 {
        margin: 22px 0 10px;
        font-weight: 1000;
        color: var(--primary-dark);
        letter-spacing: .2px;
    }

    .blog-content ul, .blog-content ol {
        margin: 10px 0 16px 22px;
    }

    .blog-content li {
        margin: 6px 0;
    }

    .blog-content a {
        color: var(--accent-dark);
        font-weight: 1000;
        text-decoration: none;
        border-bottom: 1px dashed rgba(34,194,138,.65);
    }

        .blog-content a:hover {
            border-bottom-style: solid;
        }

    /* İçerikte resim gelirse */
    .blog-content img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 20px;
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 18px 50px rgba(0,0,0,.10);
        margin: 14px 0;
    }

/* Alttaki CTA kutusu (inline style'lı div) */
.container[style*="max-width:1000px"][style*="margin:40px auto"] div[style*="background:#f8f9fb"] {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 26px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
}

    .container[style*="max-width:1000px"][style*="margin:40px auto"] div[style*="background:#f8f9fb"]::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, rgba(0,163,255,0) 0%, rgba(0,163,255,.75) 50%, rgba(0,163,255,0) 100%);
        opacity: .85;
    }

    .container[style*="max-width:1000px"][style*="margin:40px auto"] div[style*="background:#f8f9fb"] h3 {
        margin: 0 0 8px !important;
        font-weight: 1000;
        color: var(--primary-dark);
    }

    .container[style*="max-width:1000px"][style*="margin:40px auto"] div[style*="background:#f8f9fb"] p {
        color: rgba(15,23,42,.72) !important;
        font-weight: 850;
        line-height: 1.75 !important;
    }

    /* CTA linki */
    .container[style*="max-width:1000px"][style*="margin:40px auto"] div[style*="background:#f8f9fb"] a[href="/"] {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        font-weight: 1000 !important;
        color: #fff !important;
        background: linear-gradient(90deg,#00c186,#00a3ff);
        box-shadow: 0 14px 30px rgba(0,163,255,.18);
        text-decoration: none !important;
    }

/* Responsive küçük ekran */
@media (max-width: 680px) {
    .container[style*="max-width:1000px"][style*="margin:40px auto"] {
        margin: 18px auto !important;
    }

        .container[style*="max-width:1000px"][style*="margin:40px auto"] article {
            padding: 14px 14px;
            border-radius: 22px;
        }
}
/* =========================
   BLOG LISTE TASARIMI
========================= */

.blog-list article {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 40px;
}

    /* Blog görseli */
    .blog-list article img {
        width: 260px; /* 🔥 büyük değil */
        height: 170px;
        object-fit: cover;
        border-radius: 12px;
        flex-shrink: 0;
    }

    /* Sağ taraf (yazılar) */
    .blog-list article .blog-text {
        flex: 1;
    }

    /* Başlık */
    .blog-list article h2 {
        margin: 0 0 10px;
        font-size: 22px;
    }

    /* Açıklama */
    .blog-list article p {
        margin: 0 0 10px;
        color: #555;
        line-height: 1.6;
    }

    /* Devamını oku */
    .blog-list article a {
        font-weight: 700;
        color: #0b2239;
        text-decoration: none;
    }

        .blog-list article a:hover {
            text-decoration: underline;
        }
/* =========================
   BLOG LİSTE TASARIMI
========================= */

.blog-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 50px;
}

/* Görsel */
.blog-img img {
    width: 240px;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
}

/* Yazı alanı */
.blog-text {
    flex: 1;
}

    .blog-text h2 {
        margin: 0 0 10px;
        font-size: 22px;
    }

        .blog-text h2 a {
            text-decoration: none;
            color: #0b2239;
        }

    .blog-text p {
        color: #555;
        line-height: 1.6;
        margin-bottom: 10px;
    }

.blog-read {
    font-weight: 700;
    color: #0b2239;
    text-decoration: none;
}

    .blog-read:hover {
        text-decoration: underline;
    }

/* MOBİL */
@media (max-width: 768px) {
    .blog-item {
        flex-direction: column;
    }

    .blog-img img {
        width: 100%;
        height: 200px;
    }
}
/* =========================================================
   BLOG DETAIL — PREMIUM (VIEW DOKUNMADAN)
   Hedef: Foto küçük, içerik dar, kart düzen
========================================================= */

/* Sayfa genel container'ını daralt + üstten boşluk */
.container[style*="max-width:1000px"] {
    max-width: 860px !important;
    margin: 34px auto !important;
}

    /* H1 daha premium */
    .container[style*="max-width:1000px"] h1 {
        max-width: 760px;
        margin: 0 auto 8px;
        font-size: clamp(24px, 2.2vw, 34px);
        font-weight: 1000;
        color: #0b2239;
        letter-spacing: .2px;
        line-height: 1.15;
    }

    /* Tarih satırı */
    .container[style*="max-width:1000px"] > p[style*="font-size:14px"] {
        max-width: 760px;
        margin: 0 auto 16px !important;
        color: rgba(11,34,57,.65) !important;
        font-weight: 800;
    }

    /* ✅ ÜSTTEKİ ANA BLOG GÖRSELİ — KÜÇÜK + ORTALI */
    .container[style*="max-width:1000px"] > img {
        max-width: 620px !important; /* 🔥 burayı 520/580/650 yapabilirsin */
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 18px auto 18px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(11,34,57,.10);
        box-shadow: 0 18px 55px rgba(0,0,0,.12);
    }

/* İçerik alanı (text) daralsın */
.blog-content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(15,23,42,.82);
    font-weight: 750;
}

    /* İçerikteki resimler de dev olmasın */
    .blog-content img {
        max-width: 680px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 18px auto !important;
        border-radius: 16px !important;
        border: 1px solid rgba(11,34,57,.10);
        box-shadow: 0 14px 40px rgba(0,0,0,.10);
    }

    /* İçerikte başlıklar */
    .blog-content h2, .blog-content h3, .blog-content h4 {
        margin: 26px 0 12px;
        font-weight: 1000;
        color: #0b2239;
        letter-spacing: .2px;
    }

    /* Paragraflar */
    .blog-content p {
        margin: 0 0 12px;
    }

/* HR daha yumuşak */
.container[style*="max-width:1000px"] hr {
    max-width: 760px;
    margin: 22px auto;
    border: 0;
    height: 1px;
    background: rgba(11,34,57,.10);
}

/* ✅ Alttaki "Araç Kiralama Seçenekleri" kutusu: kart yap */
.container[style*="max-width:1000px"] div[style*="background:#f8f9fb"] {
    max-width: 760px;
    margin: 18px auto 0 !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(11,34,57,.10) !important;
    border-radius: 22px !important;
    padding: 18px 18px !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(12px);
}

    /* Kutudaki başlık */
    .container[style*="max-width:1000px"] div[style*="background:#f8f9fb"] h3 {
        margin: 0 0 10px !important;
        font-weight: 1000;
        color: #0b2239;
    }

    /* Kutudaki metin */
    .container[style*="max-width:1000px"] div[style*="background:#f8f9fb"] p {
        margin: 0 0 12px !important;
        color: rgba(15,23,42,.75) !important;
        line-height: 1.7 !important;
        font-weight: 750;
    }

    /* Kutudaki link buton gibi */
    .container[style*="max-width:1000px"] div[style*="background:#f8f9fb"] a {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 14px !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        font-weight: 950 !important;
        color: #fff !important;
        background: linear-gradient(90deg,#00c186,#00a3ff) !important;
        box-shadow: 0 14px 30px rgba(0,163,255,.18) !important;
    }

/* Mobil */
@media (max-width: 768px) {
    .container[style*="max-width:1000px"] {
        max-width: 100% !important;
        margin: 22px auto !important;
    }

        .container[style*="max-width:1000px"] > img {
            max-width: 100% !important;
            border-radius: 16px !important;
        }

        .blog-content,
        .container[style*="max-width:1000px"] h1,
        .container[style*="max-width:1000px"] > p[style*="font-size:14px"],
        .container[style*="max-width:1000px"] hr,
        .container[style*="max-width:1000px"] div[style*="background:#f8f9fb"] {
            max-width: 100% !important;
            padding-left: 14px !important;
            padding-right: 14px !important;
        }
}
/* =========================
   BLOG DETAIL (TEK BALON)
========================= */

.blog-detail {
    max-width: 1000px;
    margin: 40px auto;
}

.blog-detail-head {
    margin-bottom: 14px;
}

.blog-detail-title {
    margin: 0 0 6px;
    font-size: clamp(22px, 2.2vw, 34px);
    font-weight: 1000;
    color: #0b2239;
}

.blog-detail-date {
    color: rgba(15,23,42,.55);
    font-weight: 800;
    font-size: 13px;
}

/* balon */
.blog-bubble {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    align-items: start;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(11,34,57,.10);
    border-radius: 26px;
    box-shadow: 0 18px 55px rgba(0,0,0,.10);
    backdrop-filter: blur(12px);
    overflow: hidden;
    padding: 16px;
}

/* sol görsel küçük */
.blog-bubble__media img {
    width: 100%;
    height: 170px; /* 🔥 küçük */
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(11,34,57,.10);
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* içerik */
.blog-bubble__body .blog-content {
    color: rgba(15,23,42,.82);
    font-weight: 800;
    line-height: 1.75;
}

    /* içerik içi resimler devasa olmasın */
    .blog-bubble__body .blog-content img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 18px;
        margin: 12px 0;
        border: 1px solid rgba(11,34,57,.10);
        box-shadow: 0 14px 40px rgba(0,0,0,.10);
    }

/* CTA altta */
.blog-cta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(11,34,57,.10);
    display: flex;
    justify-content: flex-start;
}

.blog-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 950;
    color: #fff !important;
    background: linear-gradient(90deg,#00c186,#00a3ff);
    box-shadow: 0 14px 30px rgba(0,163,255,.18);
}

/* mobil */
@media (max-width: 768px) {
    .blog-bubble {
        grid-template-columns: 1fr;
    }

    .blog-bubble__media img {
        height: 190px;
    }
}



/* =========================================================
   ✅ RESPONSIVE KALKAN (TÜM TELEFON + TABLET + FOLD)
   Bunu CSS’in EN ALTINA koy.
========================================================= */

/* 0) Genel taşma / kırılma engeli */
html, body {
    overflow-x: hidden !important;
}

img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Uzun kelime/link taşmasın */
* {
    min-width: 0;
}



/* Container nefes */
.container {
    width: min(1200px, calc(100% - 24px)) !important;
}

/* Fixed sol sosyal butonlar mobilde ekrana yapışıp taşırmasın */
@media (max-width: 768px) {
    .fixed-social-left {
        display: none !important;
    }
}

/* =========================================================
   1) HEADER / NAV — Mobil / Tablet uyum
========================================================= */

/* Desktop menü çok sıkışınca taşmasın */
@media (max-width: 1100px) {
    .menu ul {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .menu a {
        padding: 10px 10px !important;
    }
}

/* Mobil header kesin devreye girsin */
@media (max-width: 992px) {
    .desktop-header {
        display: none !important;
    }

    .mobile-header {
        display: block !important;
    }

    /* üst bar / mobile bar taşma engeli */
    .topbar, .mobilebar {
        width: 100% !important;
    }

    .mobilebar {
        flex-wrap: nowrap !important;
    }

    /* telefon yazısı/ikonlar taşarsa kırpma */
    .mobilebar-phone {
        white-space: nowrap !important;
        max-width: 70% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


/* =========================================================
   2) HERO / REZERVASYON BAR — her ekranda bozulmasın
========================================================= */

/* Hero içi zaten column’a dönüyordu ama garantiye alalım */
@media (max-width: 992px) {
    .hero .hero-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
}

/* Rezervasyon bar: tablet/telefon kırılma standartları */
@media (max-width: 1100px) {
    .reservation-bar {
        grid-template-columns: 1fr 1fr !important;
    }

    .rb-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    .reservation-bar {
        grid-template-columns: 1fr !important;
    }
}

/* Dropdown panel üstte kalsın (tıklanabilirlik) */
.home-resbar,
.home-resbar .reservation-bar,
.home-resbar .rb-field,
.home-resbar .select-wrapper {
    overflow: visible !important;
}

.rd {
    position: relative !important;
    z-index: 50 !important;
}

.rd-head {
    position: relative !important;
    z-index: 51 !important;
}

.rd-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
}

/* Slider resimleri tıklamayı çalmasın */
.hero-slider .slider-wrapper img {
    pointer-events: none !important;
}

.hero-slider .slider-btn {
    pointer-events: auto !important;
}

/* =========================================================
   3) GRID’LER — her cihazda temiz düşsün
========================================================= */

/* Araç kartları zaten var ama tablet/fold aralığında garanti */
@media (max-width: 992px) {
    .car-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 520px) {
    .car-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Haber grid aynı mantık */
@media (max-width: 992px) {
    .home-news-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 520px) {
    .home-news-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   4) FOOTER — mobilde alt alta düzgün
========================================================= */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .footer-center {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: initial !important;
    }

    .footer-right {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .footer-logo {
        height: 64px !important;
    }
}

/* =========================================================
   5) Genel form/input buton — dar ekranda taşma olmasın
========================================================= */
input, select, textarea {
    max-width: 100% !important;
}

    .btn, button, a.btn, input[type="submit"] {
        max-width: 100% !important;
    }
/* =========================================================
   LOGO & HEADER – TEK VE TEMİZ SİSTEM
   Desktop: logo solda, dengeli büyük
   Mobil: logo ortada, mavi alanı doldurur
========================================================= */

/* ---------- ORTAK ---------- */
.desktop-header .header-inner,
.mobile-header .logobar {
    display: flex !important;
    align-items: center !important;
}

    .desktop-header .header-inner .logo img,
    .desktop-header .header-inner a.logo img,
    .mobile-header .logobar .logo img {
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

/* ---------- DESKTOP ---------- */
@media (min-width: 992px) {
    .desktop-header {
        height: 110px !important;
        min-height: 110px !important;
    }

        .desktop-header .header-inner {
            height: 110px !important;
            min-height: 110px !important;
        }

            .desktop-header .header-inner .logo,
            .desktop-header .header-inner a.logo {
                margin-right: auto !important; /* sola yasla */
                margin-left: 12px !important;
                position: static !important;
                transform: none !important;
            }

                .desktop-header .header-inner .logo img,
                .desktop-header .header-inner a.logo img {
                    height: 68px !important; /* ✔️ ideal boy */
                    max-height: 68px !important;
                    filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
                }
}

/* ---------- MOBİL ---------- */
@media (max-width: 991px) {
    .mobile-header .logobar {
        height: 96px !important; /* mavi alan */
        justify-content: center !important;
        padding: 0 !important;
    }

        .mobile-header .logobar .logo {
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

            .mobile-header .logobar .logo img {
                height: 60px !important;
                max-height: 60px !important;
                filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)) !important;
            }
}

/* ---------- ÇOK KÜÇÜK TELEFON ---------- */
@media (max-width: 420px) {
    .mobile-header .logobar {
        height: 86px !important;
    }

        .mobile-header .logobar .logo img {
            height: 54px !important;
            max-height: 54px !important;
        }
}
/* =========================
   SLIDER BOŞLUK SIFIRLAMA
========================= */

/* Slider'ı saran tüm alanlar */
.home-slider,
.hero-slider,
.slider-area,
.hero,
.hero-section {
    margin: 0 !important;
    padding: 0 !important;
}

    /* Slider wrapper */
    .home-slider .slider-wrapper,
    .hero-slider .slider-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    /* Slider içindeki kart / container */
    .home-slider .card,
    .hero-slider .card {
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Slider görselleri */
    .home-slider img,
    .hero-slider img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
/* =========================
   SLIDER FINAL FIX
========================= */

/* Desktop'ta 520px istiyorsan burada kalsın (istersen kaldırırsın) */
@media (min-width: 992px) {
    .hero-slider .slider-wrapper {
        height: 520px !important;
    }
}

/* Mobilde 520px kilidini KIR */
@media (max-width: 991px) {
    .home-slider .hero-slider .slider-wrapper,
    .hero-slider .slider-wrapper {
        height: auto !important;
        aspect-ratio: 4 / 3 !important; /* istersen 16/9 yap */
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* slider üst-alt boşluk olmasın */
    .home-slider,
    .hero-slider,
    .hero,
    .hero-section {
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* =========================
   TRANSFER TABLO: MOBİLDE KAYDIR
========================= */
@media (max-width: 991px) {
    .transfer-table-wrap,
    .transfer-table-container,
    .transfer-table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    .transfer table,
    table.transfer-table {
        min-width: 720px !important;
    }

        .transfer table th,
        .transfer table td,
        table.transfer-table th,
        table.transfer-table td {
            white-space: nowrap !important;
        }
}