/* ============================================
   ETI GIDA — Design Tokens
   ============================================ */

:root {
    /* Brand */
    --eti-red:          #D91B28;
    --eti-red-dark:     #A8121D;
    --eti-red-light:    #FFF0F1;
    --eti-yellow:       #F5B800;
    --eti-yellow-light: #FFFBEB;
    --eti-dark:         #111827;

    /* Neutral scale */
    --eti-gray-50:  #F9FAFB;
    --eti-gray-100: #F3F4F6;
    --eti-gray-200: #E5E7EB;
    --eti-gray-300: #D1D5DB;
    --eti-gray-400: #9CA3AF;
    --eti-gray-600: #4B5563;
    --eti-gray-800: #1F2937;

    /* Semantic */
    --eti-bg:           #F0F0F5;
    --eti-surface:      #FFFFFF;
    --eti-text:         #111827;
    --eti-text-muted:   #6B7280;
    --eti-border:       #E8EAED;
    --eti-border-focus: var(--eti-red);
    --eti-success:      #059669;
    --eti-warning:      var(--eti-yellow);
    --eti-danger:       var(--eti-red);

    /* Footer (koyu şerit) */
    --eti-footer-dark: #333333;

    /* Radius */
    --eti-radius-xs: 6px;
    --eti-radius-sm: 8px;
    --eti-radius:    16px;
    --eti-radius-lg: 24px;

    /* Shadow */
    --eti-shadow-xs:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --eti-shadow-sm:  0 4px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    --eti-shadow-md:  0 8px 24px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
    --eti-shadow-lg:  0 20px 48px rgba(0,0,0,0.09), 0 4px 16px rgba(0,0,0,0.05);
    --eti-shadow-red: 0 8px 24px rgba(217,27,40,0.22);

    /* Motion */
    --eti-ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --eti-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --eti-duration: 220ms;

    /* Legacy aliases */
    --eti-gray:       var(--eti-gray-100);
    --eti-transition: var(--eti-ease);
}

/* ---- Base Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    background: var(--eti-bg);
    color: var(--eti-text);
    line-height: 1.6;
    margin: 0;
}

/* ---- Giriş hareketleri ----
   Etiverse'in birçok bileşeni bu isimde bir animasyon class'ı taşıyor ama
   kendi projesinde tanımı hiçbir yerde yok (Tailwind bilinmeyen utility'yi
   sessizce yok sayıyor, o modallar gerçekte animasyonsuz açılıyor). Burada
   GERÇEKTEN çalışan bir karşılığı tanımlanıyor ki niyet edilen hareket
   gerçekten görünsün. */
@keyframes eti-fade-in-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes eti-fade-in-down {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.eti-fade-in-up {
    animation: eti-fade-in-up 0.5s var(--eti-ease-out) both;
}

.eti-fade-in-down {
    animation: eti-fade-in-down 0.35s var(--eti-ease-out) both;
}