/* Cookie Consent Overlay & Modal */
.cookie-consent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    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;
    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;
        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 {
        padding-bottom: 24px;
        margin-bottom: -24px;
        gap: 10px;
    }

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