/* ============================================================
   ORTAK çerez onay bildirimi — 5 görsel tip (tema-bağımsız).
   Markup: Views/Shared/_CookieConsent.cshtml
   Tip, kök öğedeki .cc--type-{1..5} class'ı ile seçilir:
     1 Alt Çubuk · 2 Üst Çubuk · 3 Sol Alt Kart · 4 Sağ Alt Kart · 5 Orta Modal
   Aksan rengi tema değişkenlerinden gelir (--bg-button vb.), fallback'ler nötr.
   ============================================================ */
.cc {
    position: fixed;
    /* QuickAccess (Hızlı İletişim widget'ı) z-index'i 2147483000; çerez bildirimi yasal
       onaydır, onun da ÜSTÜNDE olmalı ki sabit alt çubuğun altında gizlenmesin. */
    z-index: 2147483600;
    display: none;
    font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.cc.is-visible {
    display: block;
}

/* ---- Ortak panel (kutu) ve butonlar ---- */
.cc__panel {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #1f2430;
    color: #f3f4f6;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.cc__text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.6;
}

.cc__text a {
    color: var(--bg-button, #c9a35e);
    text-decoration: underline;
}

.cc__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}

.cc__btn {
    border: 0;
    border-radius: 4px;
    padding: 11px 22px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.cc__btn--accept {
    background: var(--bg-button, #c9a35e);
    color: var(--color-button, #fff);
}

.cc__btn--accept:hover {
    background: var(--bg-button-hover, #b08e4f);
}

.cc__btn--decline {
    background: transparent;
    color: #cfd3da;
    border: 1px solid rgba(207, 211, 218, .3);
}

.cc__btn--decline:hover {
    background: rgba(255, 255, 255, .06);
}

/* ===== 1 — Alt Çubuk (tam genişlik, alt) ===== */
.cc--type-1 {
    left: 0;
    right: 0;
    bottom: 0;
}

.cc--type-1 .cc__panel {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 24px;
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* ===== 2 — Üst Çubuk (tam genişlik, üst) ===== */
.cc--type-2 {
    left: 0;
    right: 0;
    top: 0;
}

.cc--type-2 .cc__panel {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 24px;
    border-radius: 0 0 10px 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* ===== 3 — Sol Alt Kart ===== */
.cc--type-3 {
    left: 20px;
    bottom: 20px;
    max-width: 360px;
}

/* ===== 4 — Sağ Alt Kart ===== */
.cc--type-4 {
    right: 20px;
    bottom: 20px;
    max-width: 360px;
}

.cc--type-3 .cc__panel,
.cc--type-4 .cc__panel {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    border-radius: 14px;
}

.cc--type-3 .cc__actions,
.cc--type-4 .cc__actions {
    justify-content: flex-end;
}

/* ===== 5 — Orta Modal (karartma + ortada kutu) ===== */
.cc--type-5 {
    inset: 0;
}

.cc--type-5.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cc--type-5 .cc__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, .6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.cc--type-5 .cc__panel {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    max-width: 460px;
    padding: 26px;
    border-radius: 16px;
}

.cc--type-5 .cc__actions {
    justify-content: flex-end;
    margin-top: 4px;
}

/* ---- Mobil ---- */
@media (max-width: 575.98px) {
    /* QuickAccess sabit alt çubuğu (FloatingBar / ReservationBar) ekranın altını kaplar;
       alt konumlu çerez bildirimini onun ÜSTÜNE kaydır ki Kabul/Reddet butonları
       çubuğun altında gizlenmesin. Widget yoksa :has() eşleşmez, bildirim alta yapışır. */
    body:has(.qcw--d1, .qcw--d2) .cc--type-1 {
        bottom: 76px;
    }

    body:has(.qcw--d1, .qcw--d2) .cc--type-3,
    body:has(.qcw--d1, .qcw--d2) .cc--type-4 {
        bottom: 88px;
    }

    .cc--type-3,
    .cc--type-4 {
        left: 12px;
        right: 12px;
        max-width: none;
    }

    .cc__panel {
        flex-direction: column;
        align-items: stretch;
    }

    .cc__actions {
        justify-content: stretch;
    }

    .cc__btn {
        flex: 1;
    }
}