/* Cookie Consent Overlay & Modal */
.cookie-consent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* 100vh mobilde adres çubuğu GİZLİYKENki yüksekliktir; çubuk görünürken
       örtü ekrandan taşar ve mobilde (align-items:flex-end) modal aşağı itilip
       butonlar çubuğun altında kalıyordu. dvh gerçek görünür alanı verir.
       Üstteki vh satırı, dvh desteklemeyen eski tarayıcılar için yedek. */
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cookie-consent-modal {
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    border: none;
    border-radius: 4px; /* Optional, user's image looks slightly sharp */
}

.cookie-title {
    text-align: center;
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 25px;
    color: #000;
    letter-spacing: 0.5px;
}

.cookie-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
}

/* Buttons */
.cookie-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
}

@media (max-width: 600px) {
    .cookie-buttons {
        flex-direction: column;
    }
}

.btn-cookie-outline {
    flex: 1;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.btn-cookie-outline:hover {
    background: #f7f7f7;
}

.btn-cookie-solid {
    flex: 1;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    text-transform: uppercase;
    /* User's accept all button didn't have solid black background, it was hollow like the others. But let's add hover state */
}

.btn-cookie-solid:hover {
    background: #000;
    color: #fff;
}

.btn-cookie-link {
    background: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px;
    text-transform: uppercase;
}

.btn-cookie-link:hover {
    color: #000;
}

.cookie-buttons-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}


/* Toggles List */
.cookie-toggles-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    border: 1px solid #ccc;
}

.cookie-toggle-item {
    border-bottom: 1px solid #ccc;
    padding: 20px;
}

.cookie-toggle-item.border-bottom-0 {
    border-bottom: none;
}

.cookie-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cookie-toggle-title {
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

.cookie-toggle-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cookie-info-icon {
    font-size: 18px;
    color: #555;
    cursor: help;
}

.cookie-toggle-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    margin: 0;
}

/* Toggle Switch Style */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.cookie-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .cookie-slider {
  background-color: #f7d002; /* Match the yellow toggle in user screenshot */
}

input:focus + .cookie-slider {
  box-shadow: 0 0 1px #f7d002;
}

input:checked + .cookie-slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.cookie-slider.round {
  border-radius: 24px;
}

.cookie-slider.round:before {
  border-radius: 50%;
}

/* ── Mobil: butonlar her zaman görünür ───────────────────────────────────
   Butonlar kaydırılabilir kutunun İÇİNDE, uzun metnin altındaydı. 375px'lik
   bir telefonda üçü de ekranın altında kalıyor, ziyaretçi kutunun içinde
   kaydırması gerektiğini anlamadığı sürece çerez onayını ne kabul ne
   reddedebiliyordu. Artık alta yapışıyorlar; metin altlarından akıyor.
   Negatif margin + eşit padding, kutunun kendi alt boşluğunu kapatır;
   olmazsa çubuğun altındaki boşlukta metin görünürdü. */
.cookie-buttons,
.cookie-buttons-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding-top: 16px;
    padding-bottom: 40px;
    margin-bottom: -40px;
    box-shadow: 0 -14px 18px -14px rgba(0,0,0,.18);
}

@media (max-width: 600px) {
    .cookie-consent-overlay { align-items: flex-end; }

    .cookie-consent-modal {
        width: 100%;
        max-width: none;
        max-height: 88vh;
        max-height: 88dvh;
        padding: 24px 20px;
        border-radius: 12px 12px 0 0;
    }

    .cookie-title { font-size: 19px; margin-bottom: 14px; }

    /* justify, dar ekranda kelimeler arasında çirkin boşluklar açıyor */
    .cookie-desc { font-size: 13.5px; text-align: left; margin-bottom: 14px; }

    .cookie-buttons,
    .cookie-buttons-footer {
        /* Çentikli telefonlarda alttaki ana ekran çizgisi butonun üstüne
           biniyordu; safe-area kadar boşluk bırakıyoruz. */
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        margin-bottom: -24px;
        gap: 10px;
    }

    /* Dokunma hedefi en az 44px */
    .btn-cookie-outline,
    .btn-cookie-solid { min-height: 44px; }
}