/**
 * ============================================================================
 * ÇEREZ ONAY SİSTEMİ STİLLERİ
 * ============================================================================
 * GDPR uyumlu çerez yönetimi için stil dosyası
 * Dinamik renkler CSS custom properties ile yönetilir
 */

:root {
    --cookie-primary: #0ea5e9;
    --cookie-accent: #0284c7;
    --cookie-success: #22c55e;
}

/* Dinamik renkler */
.cookie-btn-primary {
    background: var(--cookie-primary) !important;
}

.cookie-checkbox {
    accent-color: var(--cookie-primary) !important;
}

.cookie-info {
    border-left: 2px solid var(--cookie-accent) !important;
}

.cookie-badge-recommended {
    background: var(--cookie-accent) !important;
}

.info-icon {
    color: var(--cookie-primary) !important;
}

.info-link {
    color: var(--cookie-primary) !important;
}

.hover-primary:hover {
    color: var(--cookie-primary) !important;
}

/* Hover efektleri - sadece desktop */
@media (hover: hover) {
    .cookie-card:hover {
        border-color: #444 !important;
    }
    
    .close-btn:hover {
        color: var(--cookie-primary) !important;
    }
    
    .cookie-btn-secondary:hover {
        background: #1a1a1a !important;
        border-color: #444 !important;
        color: #fff !important;
    }
    
    .cookie-btn-primary:hover {
        opacity: 0.85;
    }
}

/* Mobil optimizasyonlar */
@media (max-width: 640px) {
    #cookie-consent-banner {
        bottom: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
        width: calc(100vw - 1rem) !important;
    }
    
    #cookie-settings-modal > div {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: 80vh;
        border-radius: var(--border-radius-base);
    }
    
    #cookie-settings-modal .p-3 {
        padding: 0.75rem !important;
    }
    
    /* Mobilde scroll smooth */
    #cookie-settings-modal [style*="overflow-y: auto"] {
        -webkit-overflow-scrolling: touch;
    }
}

/* Çok küçük ekranlar */
@media (max-width: 360px) {
    #cookie-consent-banner {
        padding: 0.75rem !important;
    }
    
    #cookie-consent-banner .text-sm {
        font-size: 0.8rem !important;
    }
    
    #cookie-consent-banner .text-xs {
        font-size: 0.7rem !important;
    }
    
    #cookie-consent-banner button {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.7rem !important;
    }
}

/* Yatay scroll önleme */
#cookie-settings-modal * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Touch feedback */
#cookie-consent-banner button:active,
#cookie-settings-modal button:active {
    transform: scale(0.97);
}

/* Safe area için padding (iPhone notch) */
@supports (padding: max(0px)) {
    #cookie-consent-banner {
        bottom: max(1rem, env(safe-area-inset-bottom));
        left: max(1rem, env(safe-area-inset-left));
    }
    
    @media (max-width: 640px) {
        #cookie-consent-banner {
            bottom: max(0.5rem, env(safe-area-inset-bottom));
            left: max(0.5rem, env(safe-area-inset-left));
        }
    }
}

/* Banner animasyonu */
#cookie-consent-banner[style*="opacity: 1"] {
    transform: translateX(0) !important;
}