/* =========================================
   IF SOKAK - MATERIAL DESIGN 3 (MD3) CORE
   Temel Renk Paleti, Gölgeler ve Tipografi
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
    /* --- MD3 TONAL PALETTE (LIGHT MODE) --- */
    --md-primary: #ea2158; /* IF Sokak Kırmızısı */
    --md-on-primary: #ffffff;
    --md-primary-container: #ffdad9;
    --md-on-primary-container: #41000a;
    
    --md-secondary: #775656;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #ffdad9;
    --md-on-secondary-container: #2c1516;
    
    --md-tertiary: #755a2c;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #ffdea7;
    --md-on-tertiary-container: #281900;

    /* Surface & Background (MD3 Soft Tones) */
    --md-bg: #e9e9e9;
    --md-on-bg: #201a1a;
    --md-surface: #e9e9e9;
    --md-on-surface: #201a1a;
    --md-surface-variant: #f4dddd;
    --md-on-surface-variant: #534343;
    
    /* Outlines & Borders */
    --md-outline: #857373;
    --md-border: #dadce0;
    --md-outline-variant: #d8c2c2;

    /* --- MD3 ELEVATION (Gölgeler) --- */
    /* MD3'te gölgeler daha yumuşak ve katmanlıdır */
    --md-shadow-0: none;
    --md-shadow-1: 0px 1px 2px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
    --md-shadow-2: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
    --md-shadow-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.3);
    
    /* --- MD3 BORDER RADIUS (Yuvarlak Köşeler) --- */
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 28px; /* Butonlar ve Kapsül menüler için */
    --radius-full: 9999px;

    /* --- DİĞER DEĞİŞKENLER (Components.css için uyum) --- */
    --md-hover-bg: rgba(234, 33, 88, 0.08);
    --md-primary-hover: #d01d4d;
    --md-text-primary: var(--md-on-surface);
    --md-text-secondary: var(--md-on-surface-variant);
}

/* --- DARK MODE (Karanlık Tema) --- */
[data-theme="dark"] {
    --md-bg: #1a1111;
    --md-on-bg: #ece0e0;
    --md-surface: #201a1a;
    --md-on-surface: #ece0e0;
    --md-surface-variant: #534343;
    --md-on-surface-variant: #d8c2c2;
    
    --md-primary: #ffb3b4;
    --md-on-primary: #680016;
    --md-primary-container: #920023;
    --md-on-primary-container: #ffdad9;
    
    --md-outline: #a08c8c;
    --md-border: #3c4043;
    --md-hover-bg: rgba(255, 255, 255, 0.06);
    --md-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* --- RESET & GLOBAL --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--md-bg);
    color: var(--md-on-surface);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
    -webkit-font-smoothing: antialiased;
}

/* Material İkon Butonları (Ripple Efekti Simülasyonu) */
.icon-btn {
    background: none;
    border: none;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    padding: 10px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
    position: relative;
    overflow: hidden;
}

.icon-btn:hover {
    background-color: var(--md-hover-bg);
    color: var(--md-primary);
}

.icon-btn:active {
    transform: scale(0.92);
}

/* Yükleniyor (Spinner) - MD3 Style */
.material-spinner {
    border: 4px solid var(--md-surface-variant);
    border-top: 4px solid var(--md-primary);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin: 40px auto;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}