
    /* ===========================
   KAYA YACHTING – Modern UI
   =========================== */
    :root {
        --bg: #f6f8fb;
        --card: #ffffff;
        --fg: #0f172a;
        --muted: #64748b;

        --brand: #1e60aa;
        /* Senin ana renk */
        --brand-2: #fc8c03;
        /* Sıcak vurgu   */

        --ring: 0 0 0 0 rgba(0, 0, 0, 0);
        --radius: 18px;
        --shadow-1: 0 10px 25px rgba(15, 23, 42, .08), 0 2px 10px rgba(15, 23, 42, .04);
        --shadow-2: 0 16px 50px rgba(15, 23, 42, .14);
        --glass: rgba(255, 255, 255, .6);
        --glass-brd: rgba(255, 255, 255, .75);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #f6f8fb;
            --card: #f6f8fb;
            --fg: #707275;
            --muted: #9aa4b2;
            --glass: rgba(255, 255, 255, .08);
            --glass-brd: rgba(255, 255, 255, .16);
        }
    }

    /* Sayfa arka planı ve hafif grid */
    body {
        background:
            radial-gradient(1200px 600px at 10% -10%, rgba(30, 96, 170, .12), transparent 60%),
            radial-gradient(1200px 600px at 110% 10%, rgba(252, 140, 3, .10), transparent 55%),
            var(--bg);
        color: var(--fg);
    }

    /* Kart görünümü */
    .searchtooldetaysayfa {
        background: linear-gradient(180deg, var(--glass), transparent 70%), var(--card);
        border: 1px solid var(--glass-brd);
        border-radius: var(--radius);
        box-shadow: var(--shadow-1);
        padding: 22px 18px;
        backdrop-filter: saturate(140%) blur(6px);
        -webkit-backdrop-filter: saturate(140%) blur(6px);
        position: relative;
        overflow: hidden;
        z-index: 10;
    }

    /* Dekoratif ışık lekeleri */
    .searchtooldetaysayfa::before,
    .searchtooldetaysayfa::after {
        content: "";
        position: absolute;
        inset: auto auto -40% -40%;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(30, 96, 170, .12), transparent 70%);
        filter: blur(10px);
        transform: rotate(-8deg);
    }

    .searchtooldetaysayfa::after {
        inset: -40% -40% auto auto;
        background: radial-gradient(closest-side, rgba(252, 140, 3, .12), transparent 70%);
        transform: rotate(8deg);
    }

    /* Etiketler */
    .form-group label,
    .form-group-kisi label {
        display: block;
        font-weight: 700;
        letter-spacing: .2px;
        margin-bottom: 8px;
        color: var(--fg);
        text-align: center;
        font-size: 18px;
    }

    /* Input/Select */
    .form-control {
        height: 38px;
        border-radius: 14px;
        border: 1px solid rgba(15, 23, 42, 0.33);
        background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .7));
        color: #707275;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
        transition: box-shadow .25s ease, transform .05s ease, border-color .25s ease;
        text-align: center;
        width: 100%;
        font-size: 18px;
    }

    .form-control:hover {
        border-color: rgba(30, 96, 170, .3);
    }

    .form-control:focus {
        outline: none;
        border-color: transparent;
        box-shadow:
            0 0 0 3px rgba(30, 96, 170, .15),
            0 0 0 6px rgba(252, 140, 3, .10);
        background: #fff;
    }

    /* Özel tarih alanı */
    .custom-date-input {
        position: relative;
        overflow: visible;
    }

    .custom-calendar {
        display: none !important;
    }

    /* Popover düzgün konumlansın (inherit yerine absolute!) */
    .custom-date-input .calendar-popover {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        z-index: 1056;
        /* bootstrap modal üstü değilse bu yeter */
        width: 320px;
        max-width: 92vw;
        background: var(--card);
        border: 1px solid rgba(15, 23, 42, .10);
        border-radius: 16px;
        box-shadow: var(--shadow-2);
        padding: 12px;
        animation: popIn .18s ease-out both;
        z-index: 11 !important;
    }

    /* Üst sarmalda overflow:hidden varsa keser; bu alan için görünür yap */
    .searchtooldetaysayfa,
    .ky-accordion,
    .form-group {
        overflow: visible;
        /* sadece gerektiği yerde override edebilirsin */
    }

    @keyframes popIn {
        from {
            transform: translateY(8px) scale(.98);
            opacity: 0;
        }

        to {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }

    /* Takvim başlık */
    .calendar-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .calendar-nav>div {
        font-weight: 800;
        letter-spacing: .2px;
    }

    .calendar-nav .btn {
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
    }

    /* Takvim grid */
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;
    }

    .calendar-cell {
        padding: 10px 0;
        border-radius: 10px;
        text-align: center;
        font-weight: 700;
        letter-spacing: .2px;
        user-select: none;
        cursor: pointer;
        transition: transform .06s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
        box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .06);
    }

    .calendar-cell.muted {
        color: var(--muted);
        font-weight: 800;
        cursor: default;
        box-shadow: none;
        padding: 8px 0;
        background: transparent;
    }

    .calendar-cell.disabled {
        color: #cbd5e1;
        cursor: not-allowed;
        opacity: .75;
    }

    .calendar-cell:not(.muted):not(.disabled):hover {
        background: rgba(30, 96, 170, .08);
        transform: translateY(-1px);
    }

    .calendar-cell.selected {
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        color: #fff;
        box-shadow: 0 6px 18px rgba(30, 96, 170, .35);
    }

    /* İzinli gün (yeşil) */
    .calendar-cell.allowed {
        background: rgba(34, 197, 94, .12);
        /* yeşil cam */
        border: 1px solid rgba(34, 197, 94, .35);
    }

    /* Engelli gün (kırmızı) */
    .calendar-cell.blocked {
        background: rgba(239, 68, 68, .12);
        color: #ef4444;
        cursor: not-allowed;
        opacity: .95;
    }

    /* Hover sadece izinli günlerde çalışsın */
    .calendar-cell.allowed:hover {
        background: rgba(34, 197, 94, .18);
        transform: translateY(-1px);
    }

    /* Seçili gün yine senin gradient’inle baskın kalsın */
    .calendar-cell.selected {
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        color: #fff;
        box-shadow: 0 6px 18px rgba(30, 96, 170, .35);
        border: none;
    }


    /* Kişi sayacı */
    .guest-counter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 5px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
        border: 1px solid rgba(15, 23, 42, .08);
    }

    .guest-counter .btn {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-weight: 800;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
        transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
    }

    .guest-counter .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(15, 23, 42, .12);
    }

    .guest-counter .btn:active {
        transform: translateY(0);
    }

    .guest-count {
        font-size: 22px;
        font-weight: 900;
        letter-spacing: .3px;
        min-width: 2.5ch;
        text-align: center;
    }

    /* Aksiyon butonları */
    .btn-ozel,
    .btn.btn-outline-primary#guestBtn {
        border-radius: 14px;
        border: 0;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        color: #fff !important;
        font-weight: 800;
        letter-spacing: .2px;
        box-shadow: 0 14px 30px rgba(30, 96, 170, .28), 0 6px 14px rgba(252, 140, 3, .22);
        transform: translateZ(0);
        transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
    }

    .btn-ozel:hover,
    .btn.btn-outline-primary#guestBtn:hover {
        filter: brightness(1.04);
        transform: translateY(-1px);
    }

    .btn-ozel:active,
    .btn.btn-outline-primary#guestBtn:active {
        transform: translateY(0);
    }

    /* Modal kozmetik */
    .modal-content.cocukmodal {
        border-radius: 18px;
        border: 1px solid rgba(15, 23, 42, .08);
        box-shadow: var(--shadow-2);
    }

    .modal-header {
        border-bottom: 1px solid rgba(15, 23, 42, .06);
    }

    .modal-footer {
        border-top: 1px solid rgba(15, 23, 42, .06);
    }

    /* Form spacing & küçük detaylar */
    .form-group,
    .form-group-kisi {
        margin-bottom: 18px;
    }

    small.text-muted {
        color: var(--muted) !important;
    }

    /* Hover “ışık çizgisi” efekti */
    .btn-ozel::after,
    #guestBtn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(120px 40px at var(--x, 10%) var(--y, 10%), rgba(255, 255, 255, .35), transparent 40%);
        opacity: .0;
        transition: opacity .25s ease;
    }

    .btn-ozel:hover::after,
    #guestBtn:hover::after {
        opacity: .8;
    }

    /* Mouse konumunu yakala */
    .btn-ozel,
    #guestBtn {
        position: relative;
        overflow: hidden;
    }

    .btn-ozel,
    #guestBtn {
        --x: 50%;
        --y: 0%;
    }

    .btn-ozel:hover,
    #guestBtn:hover {
        cursor: pointer;
    }





    @media (hover: hover) {

        .btn-ozel,
        #guestBtn {
            transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, background-position .2s ease;
            width: 100%;
            height: 50px;
            margin-top: 25px;
        }
    }

    /* Responsive */
    @media (max-width: 576px) {
        .searchtooldetaysayfa {
            padding: 16px 14px;
        }

        .calendar-nav .btn {
            height: 32px;
            min-width: 32px;
        }

        .calendar-cell {
            padding: 9px 0;
        }
    }

    /* Hareket kısıtlı kullanıcılar için */
    @media (prefers-reduced-motion: reduce) {
        * {
            transition: none !important;
            animation: none !important;
        }
    }

    /* === Akordiyon === */
    .ky-accordion {
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .55));
        border: 1px solid rgba(15, 23, 42, .08);
        box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .ky-acc-item+.ky-acc-item {
        border-top: 1px solid rgba(15, 23, 42, .06);
    }

    .ky-acc-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: transparent;
        border: 0;
        padding: 18px 10px;
        text-align: left;
        font-weight: bold;
        letter-spacing: .2px;
        cursor: pointer;
        position: relative;
        font-size: 18px;
    }

    .ky-acc-head:hover {
        background: rgba(30, 96, 170, .06);
    }

    .ky-acc-meta {
        font-weight: 500;
        color: #1e293b;
        opacity: .8;
    }

    .ky-acc-caret {
        width: 12px;
        height: 12px;
        border-right: 2px solid #1e293b;
        border-bottom: 2px solid #1e293b;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    .ky-acc-head.active .ky-acc-caret {
        transform: rotate(-135deg);
    }

    .ky-acc-body {
        display: none;
        padding: 0 18px 18px 18px;
        animation: kyDrop .18s ease-out both;
    }

    @keyframes kyDrop {
        from {
            opacity: 0;
            transform: translateY(-6px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    /* Sayaç */


    .guest-counter .btn {
        width: 28px;
        height: 28px;
        border-radius: 12px;
        font-weight: 800;
    }

    .guest-count {
        font-size: 18px;
        font-weight: 900;
        min-width: 2.5ch;
        text-align: center;
    }

    /* Kamara kutuları */
    .rooms-wrap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
    }

    .room-card {
        background: #fff;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 14px;
        padding: 8px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    }

    .room-card h6 {
        font-weight: 800;
        margin: 0 0 8px 0;
        text-align: center;
        font-size: 16px;
    }

    .room-num {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .room-num input {
        width: 100%;
        text-align: center;
        font-weight: 800;
        border-radius: 10px;
        border: 1px solid rgba(15, 23, 42, 0.33);
        height: 32px;
    }

    .room-num button {
        width: 22px;
        height: 23px;
        border-radius: 10px;
    }

    /* =========================
   Rezervasyon Sonuçları — Şık Skin
   Hedef alan: #sonuclar
   ========================= */

/* Temel değişkenler (tema uyumlu) */
#sonuclar {
  --rez-bg: var(--bs-body-bg, #fff);
  --rez-fg: var(--bs-body-color, #0f172a);
  --rez-muted: #6b7280;
  --rez-border: rgba(15,23,42,.10);
  --rez-card: rgba(255,255,255,.9);
  --rez-glow: 0 10px 30px rgba(2,6,23,.10);
  --rez-glow-strong: 0 16px 40px rgba(2,6,23,.16);
  --rez-accent: #2563eb;
  --rez-accent-2: #7c3aed;
  --rez-success: #16a34a;
  --rez-warning: #f59e0b;
  --rez-radius: 16px;
  --rez-radius-sm: 12px;
  --rez-radius-xs: 10px;
  --rez-shadow-1: 0 1px 2px rgba(2,6,23,.06), 0 4px 10px rgba(2,6,23,.06);
  --rez-shadow-2: 0 10px 30px rgba(2,6,23,.10);
}

/* Koyu mod destek (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  #sonuclar {
    --rez-bg: #0b1220;
    --rez-fg: #e5e7eb;
    --rez-muted: #9ca3af;
    --rez-border: rgba(148,163,184,.18);
    --rez-card: rgba(17,24,39,.72);
    --rez-glow: 0 10px 30px rgba(0,0,0,.45);
    --rez-glow-strong: 0 18px 46px rgba(0,0,0,.6);
    --rez-accent: #60a5fa;
    --rez-accent-2: #a78bfa;
  }
}

/* Sonuç kapsayıcı kart */
#sonuclar .card {
  background: radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.08), transparent 60%),
              radial-gradient(900px 500px at 120% 10%, rgba(124,58,237,.06), transparent 60%),
              var(--rez-card);
  border: 1px solid var(--rez-border);
  border-radius: clamp(14px, 2vmin, var(--rez-radius));
  box-shadow: var(--rez-shadow-2);
  overflow: hidden;
}

#sonuclar .card-body {
  color: var(--rez-fg);
  text-align: center;
}

/* Üst bilgi */
#sonuclarInner > .mb-2 strong {
  font-weight: 800;
  letter-spacing: .2px;
}

/* Kabin etiketi ve alt başlık */
#sonuclarInner .badge.bg-light.text-dark {
  --tw-bg: rgba(148,163,184,.18);
  background: var(--tw-bg) !important;
  color: var(--rez-fg) !important;
  border: 1px solid var(--rez-border);
  padding: .4rem .6rem;
  border-radius: 999px;
  font-weight: 700;
}

/* Tekil kalem kartları */
#sonuclarInner .border.rounded.p-2.mb-2 {
  border: 1px solid var(--rez-border) !important;
  border-radius: var(--rez-radius-sm) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.45)) !important;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  box-shadow: var(--rez-shadow-1);
  padding: .9rem !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

@media (prefers-color-scheme: dark) {
  #sonuclarInner .border.rounded.p-2.mb-2 {
    background: linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.7)) !important;
  }
}

#sonuclarInner .border.rounded.p-2.mb-2:hover {
  transform: translateY(-2px);
  box-shadow: var(--rez-glow);
  border-color: rgba(37,99,235,.25) !important;
}

/* Sol taraf (başlık + detay) */
#sonuclarInner .border.rounded.p-2.mb-2 strong {
  font-weight: 800;
}

#sonuclarInner .border.rounded.p-2.mb-2 small {
  color: var(--rez-muted);
  display: inline-block;
  margin-top: .25rem;
}

/* Sağ taraf (tutar) */
#sonuclarInner .border.rounded.p-2.mb-2 .fw-bold {
  font-weight: 900 !important;
  font-variation-settings: "wght" 900;
  letter-spacing: .2px;
  background: linear-gradient(90deg, var(--rez-accent), var(--rez-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Ayırıcı çizgi */
#sonuclarInner hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rez-border), transparent);
  margin: 1rem 0 1.2rem;
}

/* Toplam satırı */
#sonuclarInner .d-flex.justify-content-between .fw-bold:last-child {
  font-size: clamp(1.05rem, 2.2vmin, 1.3rem);
  padding: .35rem .75rem;
  border-radius: var(--rez-radius-xs);
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10));
  border: 1px solid var(--rez-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-weight: bolder;
}

/* “Hesaplanıyor…” vs. bilgi metinleri */
#sonuclarInner .text-muted {
  color: var(--rez-muted) !important;
}

/* Uyarı / Hata görünümleri */
#sonuclarInner .alert {
  border-radius: var(--rez-radius-xs);
  border: 1px solid var(--rez-border);
  box-shadow: var(--rez-shadow-1);
}

/* Kalan kişi rozeti */
#remainGuests.badge {
  border-radius: 999px;
  padding: .4rem .6rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 2px 8px rgba(22,163,74,.18);
}

#remainGuests.badge.bg-success {
  background-color: rgba(22,163,74,.1) !important;
  color: #16a34a !important;
  border: 1px solid rgba(22,163,74,.3);
}

/* Animasyon mikro-dokunuş */
@keyframes rez-pop {
  from { transform: translateY(6px); opacity: .0; }
  to   { transform: translateY(0);   opacity: 1;  }
}
#sonuclar .card { animation: rez-pop .22s ease-out both; }
#sonuclarInner .border.rounded.p-2.mb-2 { animation: rez-pop .22s ease-out both; }

/* Daha sıkı grid boşlukları (mobil uyum) */
@media (max-width: 480px) {
  #sonuclarInner .border.rounded.p-2.mb-2 {
    padding: .75rem !important;
  }
  #sonuclarInner .d-flex.justify-content-between {
    gap: .75rem;
    flex-wrap: wrap;
  }
}

/* Yazdırma (faturamsı temiz görünüm) */
@media print {
  #sonuclar .card {
    background: #fff;
    box-shadow: none;
  }
  #sonuclarInner .border.rounded.p-2.mb-2 {
    background: #fff !important;
    box-shadow: none !important;
  }
  #sonuclarInner .fw-bold:last-child {
    background: none !important;
    color: #111827 !important;
  }
}
