/* ============================================
   TASARIM TOKEN'LARI - İz Duyum CRM
   Tek kaynak. Renk / yarıçap / gölge / süre.
   Sayfa içi <style> bloklarında bu değişkenleri kullan,
   sabit değer yazma.
   ============================================ */

:root {
    /* --- Marka --- */
    --brand-400: #f57a4b;
    --brand-500: #f25c24;   /* İz Duyum turuncu */
    --brand-600: #e04e18;
    --brand-700: #c53f10;

    /* --- Birincil (arayüz aksiyonları) --- */
    --primary-50:  #eef2ff;
    --primary-100: #e0e7ff;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;

    /* --- Anlamsal --- */
    --success-50:  #ecfdf5;
    --success-500: #10b981;
    --success-600: #059669;
    --warning-50:  #fffbeb;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --danger-50:   #fef2f2;
    --danger-500:  #ef4444;
    --danger-600:  #dc2626;
    --info-50:     #eff6ff;
    --info-500:    #3b82f6;
    --info-600:    #2563eb;

    /* --- Yüzey & metin --- */
    --surface:        #f8fafc;
    --surface-raised: #ffffff;
    --surface-sunken: #f1f5f9;
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;
    --text:           #1e293b;
    --text-muted:     #64748b;
    --text-subtle:    #94a3b8;

    /* --- Translucent chrome (header / sheet) --- */
    --glass-bg:     rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur:   20px;

    /* --- Yarıçap --- */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.25rem;
    --radius-full: 9999px;

    /* --- Gölge --- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* --- Hareket ---
       Gün boyu kullanılan bir arayüzde süre kısadır.
       fast  : basma, hover, renk geçişi
       base  : dropdown, panel, kart
       slow  : sayfa/modal girişi
    */
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
    --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   BASMA GERİ BİLDİRİMİ
   Geri bildirim bırakmada değil, basmada başlar.
   ============================================ */
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
.btn:not(:disabled):active,
a.btn:active {
    transform: scale(0.97);
    transition: transform var(--dur-fast) var(--ease-out);
}

/* ============================================
   ERİŞİLEBİLİRLİK
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Anlamayı kolaylaştıran opaklık geçişi kalsın, yer değiştirme kalksın */
    [class*="animate-slide"],
    [class*="animate-scale"] {
        transform: none !important;
    }
    button:active,
    .btn:active {
        transform: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-bg: #ffffff;
        --glass-blur: 0px;
    }
    .backdrop-blur-xl,
    .backdrop-blur-lg,
    .backdrop-blur-sm {
        backdrop-filter: none !important;
        background-color: #ffffff !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --border: #94a3b8;
        --border-strong: #64748b;
        --text-muted: #475569;
    }
}

/* ============================================
   YATAY KAYAN TABLO
   Dar ekranda kenarda kalan içeriği belli eder:
   sert kesme yerine yumuşak bir solma.
   Kullanım: <div class="overflow-x-auto table-scroll">
   ============================================ */
.table-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* sağ kenarda içerik devam ediyorsa solar, bittiyse solmaz */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}

/* Kaydırılacak yer kalmadıysa maskeyi kaldır (destekleyen tarayıcılarda) */
@supports (animation-timeline: scroll(self inline)) {
    .table-scroll {
        animation: tableScrollEdge linear;
        animation-timeline: scroll(self inline);
    }
    @keyframes tableScrollEdge {
        to {
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 100%);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .table-scroll { animation: none; }
}

/* Masaüstünde maskeye gerek yok */
@media (min-width: 1024px) {
    .table-scroll {
        mask-image: none;
        -webkit-mask-image: none;
        animation: none;
    }
}