/* ========================================
   ALBION CRAFT CALCULATOR v3.0
   base.css — Reset, Değişkenler, Tipografi, Animasyonlar
   ======================================== */

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

/* === CSS CUSTOM PROPERTIES === */
:root {
    /* Arka planlar */
    --bg-primary:    #0b0f19;
    --bg-secondary:  #111827;
    --bg-card:       #1a2235;
    --bg-card-hover: #1f2a42;
    --bg-input:      #0d1525;

    /* Vurgu renkleri */
    --gold-primary:  #d4a843;
    --gold-light:    #f0d078;
    --gold-dark:     #9a7520;
    --green-primary: #10b981;
    --green-dark:    #059669;
    --green-glow:    rgba(16, 185, 129, 0.2);
    --red-primary:   #ef4444;
    --red-dark:      #dc2626;
    --blue-primary:  #3b82f6;
    --blue-glow:     rgba(59, 130, 246, 0.2);
    --purple:        #8b5cf6;
    --purple-glow:   rgba(139, 92, 246, 0.2);

    /* Metin */
    --text-primary:   #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;

    /* Border */
    --border-color:   #1e293b;
    --border-accent:  #334155;
    --border-glow:    rgba(212, 168, 67, 0.2);

    /* Gölgeler */
    --shadow-gold:    0 0 20px rgba(212, 168, 67, 0.15);
    --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-modal:   0 25px 60px rgba(0, 0, 0, 0.6);

    /* Gradyanlar */
    --gradient-gold:  linear-gradient(135deg, #d4a843, #f0d078, #d4a843);
    --gradient-dark:  linear-gradient(180deg, #111827, #0b0f19);
    --gradient-sidebar: linear-gradient(180deg, #0f1424 0%, #0b0f19 100%);

    /* Boyutlar */
    --sidebar-width:  240px;
    --header-height:  64px;
    --border-radius:  12px;
    --border-radius-lg: 16px;
    --border-radius-sm: 8px;

    /* Geçişler */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* === RESET === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

a {
    color: var(--gold-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--gold-light);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    outline: none;
}

input, select, textarea {
    font-family: inherit;
    outline: none;
}

/* === TIPOGRAFI === */
h1, h2, h3 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

.font-cinzel { font-family: 'Cinzel', serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.tabular-nums { font-variant-numeric: tabular-nums; }

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

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-primary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dark) var(--bg-secondary);
}

/* === ANİMASYONLAR === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(212, 168, 67, 0.2); }
    50% { box-shadow: 0 0 20px rgba(212, 168, 67, 0.4); }
}

@keyframes priceUpdate {
    0% { background-color: rgba(16, 185, 129, 0.3); }
    100% { background-color: transparent; }
}

/* Animate-in sınıfları */
.animate-in {
    animation: fadeInUp 0.5s ease forwards;
}

.animate-delay-1 { animation-delay: 0.05s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.15s; opacity: 0; }
.animate-delay-4 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-5 { animation-delay: 0.25s; opacity: 0; }

/* === UTILITY SINIFLAR === */
.profit-positive { color: var(--green-primary) !important; font-weight: 700; }
.profit-negative { color: var(--red-primary) !important; font-weight: 700; }
.profit-zero { color: var(--text-muted) !important; }

.text-gold { color: var(--gold-primary); }
.text-green { color: var(--green-primary); }
.text-red { color: var(--red-primary); }
.text-blue { color: var(--blue-primary); }
.text-purple { color: var(--purple); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* === SPINNER === */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* === SKELETON LOADING === */
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}

/* === SELECTION === */
::selection {
    background: rgba(212, 168, 67, 0.3);
    color: var(--text-primary);
}