/* Bunte Toner - CSS Variables */

:root {
    /* ===== MASTER COLOR PALETTE ===== */
    /* TonerPartner.de inspired - Tüm siteyi buradan kontrol edin! */
    
    /* Primary Brand Colors - Parfüm Teması */
    --brand-primary: #D946A6;        /* Ana marka rengi - Pembe */
    --brand-secondary: #9333EA;      /* İkincil renk - Mor */
    --brand-accent: #F59E0B;         /* Vurgu rengi - Altın */
    --brand-primary-dark: #C23596;   /* Hover/Active durumlar */
    --brand-primary-light: #FDF4FF;  /* Arka planlar */
    
    /* Text Colors - Parfüm Teması */
    --text-primary: #4A1942;         /* Ana metin - Derin mor (parfüm şişesi) */
    --text-secondary: #8B4789;       /* İkincil metin - Orta mor */
    --text-tertiary: #B87EB5;        /* Üçüncül metin - Açık mor */
    
    /* Background Colors - Parfüm Teması */
    --bg-page: #FFF5FB;              /* Sayfa arka planı - Çok açık pembe */
    --bg-card: #FFFFFF;              /* Kart/Panel arka planı - Beyaz */
    --bg-hover: #FFE8F5;             /* Hover arka planı - Pembe ton */
    --bg-input: #FFFFFF;             /* Input arka planı */
    --bg-gradient: linear-gradient(135deg, #FFF0F8 0%, #FFE8F5 25%, #F5E6FF 50%, #FFF5E8 75%, #FFF0F8 100%);  /* Parfüm gradient */
    --bg-gradient-primary: linear-gradient(135deg, #D946A6 0%, #9333EA 100%);      /* Primary gradient */
    --bg-gradient-secondary: linear-gradient(135deg, #9333EA 0%, #F59E0B 100%);    /* Secondary gradient */
    --bg-gradient-accent: linear-gradient(135deg, #FF6B9D 0%, #C239B3 100%);       /* Accent gradient */
    
    /* Border Colors - Parfüm Teması */
    --border-light: #FFD6EC;         /* Hafif çizgiler - Açık pembe */
    --border-medium: #FFB8E0;        /* Orta çizgiler - Orta pembe */
    --border-dark: #FF8AC2;          /* Koyu çizgiler - Koyu pembe */
    
    /* Status Colors */
    --success: #28A745;              /* Başarı - Yeşil */
    --danger: #DC3545;               /* Hata/Silme */
    --warning: #FFC107;              /* Uyarı */
    --info: #1a1a1a;                 /* Bilgi - Mavi */
    
    /* Shadows - Parfüm Teması */
    --shadow-sm: 0 1px 2px rgba(217, 70, 166, 0.08);
    --shadow-md: 0 4px 12px rgba(147, 51, 234, 0.15);
    --shadow-lg: 0 8px 25px rgba(217, 70, 166, 0.25);
    --shadow-glow: 0 0 30px rgba(217, 70, 166, 0.15);
    
    /* === Geriye dönük uyumluluk === */
    --primary: var(--brand-primary);
    --primary-dark: var(--brand-primary-dark);
    --black: var(--text-primary);
    --gray-700: var(--text-secondary);
    --gray-500: var(--text-tertiary);
    --gray-300: var(--border-light);
    --gray-100: var(--bg-hover);
    --white: var(--bg-card);
    --bunte-orange: var(--brand-primary);
    --bunte-black: var(--text-primary);
    --bunte-gray: var(--text-secondary);
    --bunte-light-gray: var(--border-light);
    --bunte-white: var(--bg-card);
    --bunte-cream: #FFF9F5;
    --bunte-green: var(--success);
    --bunte-red: var(--danger);
    
    /* Parfüm Teması Ek Değişkenler */
    --parfum-pink: #D946A6;
    --parfum-purple: #9333EA;
    --parfum-gold: #F59E0B;
    --parfum-pink-light: rgba(217, 70, 166, 0.1);
    --parfum-purple-light: rgba(147, 51, 234, 0.1);
    --parfum-gold-light: rgba(245, 158, 11, 0.1);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    
    /* Typography */
    --font-family: 'Graphik Webfont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
    
    /* Border Radius - FLAT DESIGN (No curves!) */
    --border-radius: 0px;
    --border-radius-sm: 0px;
    --border-radius-lg: 0px;
    --border-radius-pill: 0px;
    --border-radius-full: 0px;
    
    /* Shadows */
    --box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    --box-shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --box-shadow-lg: 0 8px 24px rgba(0,0,0,0.18);
    
    /* Transitions */
    --transition-fast: 0.15s;
    --transition-base: 0.2s;
    --transition-slow: 0.3s;
    
    /* Layout */
    --max-width: 1400px;
    --container-padding: 20px;
    --header-height: 80px;
    
    /* Breakpoints (for reference in media queries) */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 968px;
    --breakpoint-desktop: 1440px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: linear-gradient(135deg, 
        #FFF0F8 0%,    /* Açık pembe */
        #FFE8F5 15%,   /* Pembe */
        #F5E6FF 30%,   /* Açık mor */
        #E8D5FF 45%,   /* Mor */
        #FFE8F5 60%,   /* Pembe */
        #FFF5E8 75%,   /* Açık altın */
        #FFE8F5 90%,   /* Pembe */
        #FFF0F8 100%   /* Açık pembe */
    );
    background-size: 400% 400%;
    animation: gradientAnimation 20s ease infinite;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: var(--font-size-base);
    position: relative;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(217, 70, 166, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(147, 51, 234, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 30% 80%, rgba(255, 107, 157, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 70% 20%, rgba(194, 57, 179, 0.06) 0%, transparent 35%);
    pointer-events: none;
    z-index: -1;
    animation: floatingBubbles 25s ease-in-out infinite;
}

@keyframes floatingBubbles {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-20px, -20px); }
    66% { transform: translate(20px, 20px); }
}

body::after {
    content: '🌸 ✨ 💐 🎀 💫 🌺 💄 👑';
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
    opacity: 0.15;
    letter-spacing: 10px;
    pointer-events: none;
    z-index: -1;
    animation: sparkleText 5s ease-in-out infinite;
    background: linear-gradient(90deg, 
        rgba(217, 70, 166, 0.3),
        rgba(147, 51, 234, 0.3),
        rgba(245, 158, 11, 0.3),
        rgba(217, 70, 166, 0.3)
    );
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(217, 70, 166, 0.2));
}

@keyframes sparkleText {
    0%, 100% { opacity: 0.12; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.05); }
}