/**
 * ============================================
 * 🎨 GEL DÖNÜŞ - CUSTOM CSS
 * Tasarım Sistemi v1.0
 * ============================================
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Değişkenler)
   ============================================ */
:root {
    /* Primary - Koyu Mavi */
    --color-primary-50: #EFF6FF;
    --color-primary-100: #DBEAFE;
    --color-primary-200: #BFDBFE;
    --color-primary-300: #93C5FD;
    --color-primary-400: #60A5FA;
    --color-primary-500: #3B82F6;
    --color-primary-600: #2563EB;
    --color-primary-700: #1D4ED8;
    --color-primary-800: #1E3A8A;
    --color-primary-900: #1E3A5F;

    /* Success - Emerald */
    --color-success-50: #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-200: #A7F3D0;
    --color-success-500: #10B981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success-800: #065F46;

    /* Warning - Amber */
    --color-warning-50: #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-200: #FDE68A;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;
    --color-warning-700: #B45309;

    /* Danger - Red */
    --color-danger-50: #FEF2F2;
    --color-danger-100: #FEE2E2;
    --color-danger-200: #FECACA;
    --color-danger-500: #EF4444;
    --color-danger-600: #DC2626;
    --color-danger-700: #B91C1C;

    /* Info - Sky */
    --color-info-50: #F0F9FF;
    --color-info-100: #E0F2FE;
    --color-info-500: #0EA5E9;
    --color-info-600: #0284C7;

    /* Neutral - Slate */
    --color-neutral-50: #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #CBD5E1;
    --color-neutral-400: #94A3B8;
    --color-neutral-500: #64748B;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1E293B;
    --color-neutral-900: #0F172A;
}

/* ============================================
   HTMX LOADING STATES
   ============================================ */
.htmx-loading {
    opacity: 0.6;
    pointer-events: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* ============================================
   LINE CLAMP UTILITIES
   ============================================ */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

.slide-up {
    animation: slideUp 0.4s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-neutral-100);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
/* Focus ring styling */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Input placeholder styling */
input::placeholder,
textarea::placeholder {
    color: var(--color-neutral-400);
}

/* Disabled input styling */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-400);
    cursor: not-allowed;
}

/* ============================================
   BUTTON UTILITIES (TAILWIND OVERRIDE)
   Buton hover renklerini düzeltir
   ============================================ */

/* Primary butonlar için doğru hover renkleri */
.bg-blue-700:hover,
.bg-primary-700:hover {
    background-color: #1E40AF !important; /* blue-800 */
}

.bg-blue-700:active,
.bg-primary-700:active {
    background-color: #1E3A8A !important; /* blue-900 */
}

/* Success butonlar için doğru hover renkleri */
.bg-emerald-600:hover,
.bg-success-600:hover,
.bg-green-600:hover {
    background-color: #047857 !important; /* emerald-700 */
}

.bg-emerald-600:active,
.bg-success-600:active,
.bg-green-600:active {
    background-color: #065F46 !important; /* emerald-800 */
}

/* Danger butonlar için doğru hover renkleri */
.bg-red-600:hover,
.bg-danger-600:hover {
    background-color: #B91C1C !important; /* red-700 */
}

.bg-red-600:active,
.bg-danger-600:active {
    background-color: #991B1B !important; /* red-800 */
}

/* Warning butonlar için doğru hover renkleri */
.bg-amber-600:hover,
.bg-warning-600:hover,
.bg-orange-600:hover {
    background-color: #B45309 !important; /* amber-700 */
}

/* Secondary (outline) butonlar için doğru hover */
.border-blue-200:hover,
.border-primary-200:hover {
    background-color: #EFF6FF !important; /* blue-50 */
    border-color: #93C5FD !important; /* blue-300 */
}

/* ============================================
   STATUS BADGE STYLES
   ============================================ */
/* Talep Durumları */
.status-aktif {
    background-color: var(--color-success-50);
    color: var(--color-success-600);
    border: 1px solid var(--color-success-200);
}

.status-gorusmede {
    background-color: var(--color-warning-50);
    color: var(--color-warning-600);
    border: 1px solid var(--color-warning-200);
}

.status-anlasildi {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
    border: 1px solid #6EE7B7;
}

.status-pasif {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-500);
    border: 1px solid var(--color-neutral-200);
}

/* Teklif Durumları */
.status-gonderildi {
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
    border: 1px solid var(--color-primary-200);
}

.status-goruldu {
    background-color: var(--color-info-50);
    color: var(--color-info-600);
    border: 1px solid #BAE6FD;
}

.status-ilgi-goruldu {
    background-color: var(--color-success-50);
    color: var(--color-success-600);
    border: 1px solid var(--color-success-200);
}

.status-reddedildi {
    background-color: var(--color-danger-50);
    color: var(--color-danger-600);
    border: 1px solid var(--color-danger-200);
}

/* ============================================
   NOTIFICATION TOAST STYLES
   ============================================ */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 24rem;
}

.toast {
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    margin-bottom: 0.5rem;
    animation: slideIn 0.3s ease-out;
}

.toast-success {
    background-color: var(--color-success-600);
    color: white;
}

.toast-error {
    background-color: var(--color-danger-600);
    color: white;
}

.toast-warning {
    background-color: var(--color-warning-600);
    color: white;
}

.toast-info {
    background-color: var(--color-info-600);
    color: white;
}

/* ============================================
   LEAFLET MAP CUSTOMIZATIONS
   ============================================ */
.leaflet-container {
    font-family: 'Inter', system-ui, sans-serif;
}

.leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.leaflet-control-layers {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MODAL BACKDROP
   ============================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 40;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-neutral-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 640px) {
    .mobile-full {
        width: 100%;
    }
    
    .mobile-stack {
        flex-direction: column;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }
    
    nav, footer {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
}