/**
 * Tasarımsal Standartlar - Design Tokens
 * 
 * Bu dosya proje genelinde kullanılan tasarımsal standartları içerir.
 * Tüm transition süreleri, shadow seviyeleri, rounded değerleri,
 * hover effects, gradient yönleri ve backdrop blur seviyeleri burada tanımlıdır.
 */

/* Font Display Optimization */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    /* Not: Inter font CDN'den yükleniyorsa, burada tanımlanmamalı */
    /* Font preloading header.php'de yapılmalı */
}

/* ============================================
   TRANSITION SÜRELERİ (Duration)
   ============================================ */

/**
 * Standart Transition Süreleri:
 * - transition-fast: 200ms - Hızlı etkileşimler (hover, focus, click)
 * - transition-base: 300ms - Varsayılan (çoğu durum için) - EN ÇOK KULLANILAN
 * - transition-slow: 500ms - Yavaş animasyonlar (modal açılış, kart hover)
 * - transition-slower: 700ms - Çok yavaş animasyonlar (carousel, büyük geçişler)
 */

:root {
    /* Transition Süreleri */
    --transition-fast: 200ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;
    --transition-slower: 700ms;

    /* Transition Easing */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* Utility Sınıfları - Transition */
.transition-fast {
    transition-duration: var(--transition-fast);
    transition-timing-function: var(--ease-in-out);
}

.transition-base {
    transition-duration: var(--transition-base);
    transition-timing-function: var(--ease-in-out);
}

.transition-slow {
    transition-duration: var(--transition-slow);
    transition-timing-function: var(--ease-out);
}

.transition-slower {
    transition-duration: var(--transition-slower);
    transition-timing-function: var(--ease-out);
}

/* ============================================
   SHADOW SEVİYELERİ
   ============================================ */

/**
 * Standart Shadow Seviyeleri:
 * - shadow-sm: Küçük elemanlar, subtle elevation
 * - shadow-md: Varsayılan shadow (kartlar, butonlar) - EN ÇOK KULLANILAN
 * - shadow-lg: Önemli elemanlar, modal backdrop
 * - shadow-xl: Büyük elemanlar, dropdown menüler
 * - shadow-2xl: Çok büyük elemanlar, modals
 */

:root {
    /* Shadow Seviyeleri */
    --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);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Utility Sınıfları - Shadow (Tailwind ile uyumlu, ek olarak custom sınıflar) */
.shadow-standard {
    box-shadow: var(--shadow-md);
}

.shadow-hover {
    box-shadow: var(--shadow-lg);
}

.shadow-elevated {
    box-shadow: var(--shadow-xl);
}

/* ============================================
   ROUNDED DEĞERLERİ
   ============================================ */

/**
 * Standart Rounded Değerleri:
 * - rounded-sm: 2px - Küçük elemanlar, input'lar
 * - rounded-md: 6px - Orta elemanlar, küçük kartlar
 * - rounded-lg: 8px - Varsayılan (butonlar, kartlar) - EN ÇOK KULLANILAN
 * - rounded-xl: 12px - Büyük kartlar, modal'lar - EN ÇOK KULLANILAN
 * - rounded-2xl: 16px - Çok büyük kartlar, hero section'lar - EN ÇOK KULLANILAN
 * - rounded-3xl: 24px - Özel durumlar, büyük hero section'lar
 */

:root {
    /* Rounded Değerleri */
    --rounded-sm: 0.125rem;
    /* 2px */
    --rounded-md: 0.375rem;
    /* 6px */
    --rounded-lg: 0.5rem;
    /* 8px */
    --rounded-xl: 0.75rem;
    /* 12px */
    --rounded-2xl: 1rem;
    /* 16px */
    --rounded-3xl: 1.5rem;
    /* 24px */
}

/* Utility Sınıfları - Rounded (Tailwind ile uyumlu) */
.rounded-standard {
    border-radius: var(--rounded-lg);
}

.rounded-card {
    border-radius: var(--rounded-xl);
}

.rounded-hero {
    border-radius: var(--rounded-2xl);
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

/**
 * Standart Hover Effects:
 * - hover-scale-sm: scale(1.02) - Küçük elemanlar
 * - hover-scale-base: scale(1.05) - Varsayılan (kartlar, butonlar) - EN ÇOK KULLANILAN
 * - hover-scale-lg: scale(1.10) - İkonlar, büyük elemanlar
 * - hover-lift: translateY(-4px) + shadow artışı - Kartlar için
 */

:root {
    /* Hover Scale Değerleri */
    --hover-scale-sm: 1.02;
    --hover-scale-base: 1.05;
    --hover-scale-lg: 1.10;

    /* Hover Lift Değerleri */
    --hover-lift-sm: -2px;
    --hover-lift-base: -4px;
    --hover-lift-lg: -8px;
}

/* Utility Sınıfları - Hover Effects */
.hover-lift {
    transition: transform var(--transition-base) var(--ease-out),
        box-shadow var(--transition-base) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(var(--hover-lift-base));
    box-shadow: var(--shadow-xl);
}

.hover-scale-base {
    transition: transform var(--transition-base) var(--ease-out);
}

.hover-scale-base:hover {
    transform: scale(var(--hover-scale-base));
}

.hover-scale-lg {
    transition: transform var(--transition-base) var(--ease-out);
}

.hover-scale-lg:hover {
    transform: scale(var(--hover-scale-lg));
}

/* ============================================
   GRADIENT YÖNLERİ
   ============================================ */

/**
 * Standart Gradient Yönleri:
 * - gradient-to-br: bottom-right (45deg) - EN ÇOK KULLANILAN (kartlar, hero section'lar)
 * - gradient-to-r: right (90deg) - İkinci en çok kullanılan (butonlar, banner'lar)
 * - gradient-to-b: bottom (180deg) - Üçüncü (section geçişleri)
 * - gradient-to-t: top (0deg) - Dördüncü (overlay'ler)
 */

/* Utility Sınıfları - Gradient Yönleri (Tailwind ile uyumlu) */
.gradient-standard {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.gradient-horizontal {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.gradient-vertical {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

/* ============================================
   BACKDROP BLUR SEVİYELERİ
   ============================================ */

/**
 * Standart Backdrop Blur Seviyeleri:
 * - backdrop-blur-sm: 4px - Hafif blur (subtle overlay'ler)
 * - backdrop-blur-md: 8px - Orta blur (modal backdrop'lar)
 * - backdrop-blur-lg: 16px - Güçlü blur (glassmorphism efektleri) - EN ÇOK KULLANILAN
 * - backdrop-blur-xl: 24px - Çok güçlü blur (hero section overlay'ler)
 */

:root {
    /* Backdrop Blur Seviyeleri */
    --backdrop-blur-sm: 4px;
    --backdrop-blur-md: 8px;
    --backdrop-blur-lg: 16px;
    --backdrop-blur-xl: 24px;
}

/* Utility Sınıfları - Backdrop Blur (Tailwind ile uyumlu) */
.backdrop-standard {
    backdrop-filter: blur(var(--backdrop-blur-lg));
    -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
}

/* ============================================
   KOMBİNE UTILITY SINIFLARI
   ============================================ */

/**
 * Sık kullanılan kombinasyonlar için hazır sınıflar
 */

/* Standart Kart */
.card-standard {
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base) var(--ease-out),
        box-shadow var(--transition-base) var(--ease-out);
}

.card-standard:hover {
    transform: translateY(var(--hover-lift-base)) scale(var(--hover-scale-base));
    box-shadow: var(--shadow-xl);
}

/* Standart Buton */
.btn-standard {
    border-radius: var(--rounded-lg);
    transition: all var(--transition-base) var(--ease-in-out);
    box-shadow: var(--shadow-md);
}

.btn-standard:hover {
    transform: scale(var(--hover-scale-base));
    box-shadow: var(--shadow-lg);
}

/* Standart Modal/Overlay */
.modal-backdrop {
    backdrop-filter: blur(var(--backdrop-blur-lg));
    -webkit-backdrop-filter: blur(var(--backdrop-blur-lg));
    background-color: rgba(0, 0, 0, 0.5);
}

/* Standart Input */
.input-standard {
    border-radius: var(--rounded-lg);
    transition: all var(--transition-fast) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.input-standard:focus {
    box-shadow: var(--shadow-md);
    outline: none;
}

/* ============================================
   INLINE STYLE YERİNE KULLANILACAK SINIFLAR
   ============================================ */

/**
 * Full-width Section - Viewport genişliğinde section'lar için
 * margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw;
 */
.full-width-section {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/**
 * Animation Delay Sınıfları - Zaten common.css'de var ama burada da tanımlı
 */
.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

/* Animation delay için data attribute ile dinamik değerler (JavaScript ile) */
/* JavaScript (animation-delay-helper.js) ile data-animation-delay değeri animationDelay'e çevrilir */

/**
 * Background Pattern Sınıfları
 */

/* Repeating Linear Gradient Pattern - Diagonal çizgili pattern */
.bg-pattern-diagonal {
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.1) 10px,
            rgba(255, 255, 255, 0.1) 20px);
}

.bg-pattern-diagonal-opacity-30 {
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.1) 10px,
            rgba(255, 255, 255, 0.1) 20px);
    opacity: 0.3;
}

/* Radial Gradient Dot Pattern - Noktalı pattern */
.bg-pattern-dots {
    background-image: radial-gradient(circle at 1px 1px,
            rgba(255, 255, 255, 0.3) 1px,
            transparent 0);
    background-size: 50px 50px;
}

.bg-pattern-dots-opacity-5 {
    background-image: radial-gradient(circle at 1px 1px,
            rgba(255, 255, 255, 0.3) 1px,
            transparent 0);
    background-size: 50px 50px;
    opacity: 0.05;
}

.bg-pattern-dots-opacity-10 {
    background-image: radial-gradient(circle at 1px 1px,
            rgba(255, 255, 255, 0.3) 1px,
            transparent 0);
    background-size: 50px 50px;
    opacity: 0.1;
}

/**
 * Progress Bar Sınıfları - Width inline style yerine
 */
.progress-bar {
    height: 0.5rem;
    /* h-2 */
    border-radius: 9999px;
    /* rounded-full */
    transition: width var(--transition-base) var(--ease-out);
}

.progress-bar-sm {
    height: 0.375rem;
    /* h-1.5 */
}

.progress-bar-lg {
    height: 0.75rem;
    /* h-3 */
}

/* Progress bar width için CSS custom property kullanılacak */
.progress-bar {
    width: var(--progress-width, 0%);
}

/**
 * Video Aspect Ratio - 16:9 için
 */
.video-aspect-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-aspect-ratio>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**
 * Conditional Display - JavaScript ile kontrol edilecek
 * display: block/none yerine hidden/block sınıfları kullanılacak
 */
.hidden-conditional {
    display: none;
}

/* JavaScript ile toggle edilecek */
.show-conditional {
    display: block;
}

/**
 * Font Family Sınıfları
 */
.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/**
 * Carousel Transform - JavaScript ile kontrol edilecek
 */
.carousel-container {
    transition: transform var(--transition-slower) var(--ease-in-out);
    will-change: transform;
}

/**
 * Email Template Stilleri
 * Not: Email client uyumluluğu için inline style kullanımı tercih edilebilir,
 * ancak CSS sınıfları da eklenmiştir.
 */
.email-text-center {
    text-align: center;
}

.email-word-break {
    word-break: break-all;
    color: #667eea;
}

/**
 * Utility Spacing Sınıfları
 */
.mt-utility {
    margin-top: 30px;
}

/**
 * Carousel Initial State
 */
.carousel-initial {
    transform: translateX(0);
}

/**
 * Gradient Border - Linear gradient border için
 */
.gradient-border {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(to right, #a855f7, #ec4899, #3b82f6) border-box;
    border: 2px solid transparent;
}