/* ==========================================================================
   Vitrinde - Ana Stil Dosyası
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
    /* Colors - Primary Palette */
    --color-primary: #1A2E2E;
    --color-accent-gold: #D4AF37;
    --color-accent-gold-light: #F2E3A0;
    --color-accent-gold-dark: #B8860B;
    --color-accent-gold-hover: #C5A028;
    
    /* Colors - Backgrounds */
    --color-background-light: #FFFFFF;
    --color-background-subtle: #F7F9F9;
    --color-surface-light: #F0F4F4;
    
    /* Colors - Text */
    --color-text-main: #1a2323;
    --color-text-muted: #5C6B6B;
    
    /* Typography */
    --font-display: 'Manrope', sans-serif;
    --font-serif: 'Playfair Display', serif;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    font-family: var(--font-display);
}

.font-serif,
.serif-font {
    font-family: var(--font-serif);
}

/* ==========================================================================
   Custom Keyframe Animations
   ========================================================================== */

/* Ken Burns zoom effect for hero images */
@keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Shimmer effect for gold text gradient */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Horizontal scroll for logo carousel */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Scan line effect for AI processing visualization */
@keyframes scan {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

/* ==========================================================================
   Animation Utility Classes
   ========================================================================== */
.animate-kenburns {
    animation: kenburns 20s ease-out infinite alternate;
}

.animate-shimmer {
    animation: shimmer 3s linear infinite;
}

.animate-scroll {
    animation: scroll 40s linear infinite;
}

.animate-scan {
    animation: scan 4s ease-in-out infinite;
}

/* ==========================================================================
   Diagonal Clip Paths
   ========================================================================== */
.clip-diagonal-bottom {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.clip-diagonal-top {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================================================
   Wavy Dividers
   ========================================================================== */
.wavy-divider-top {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.wavy-divider-top svg {
    position: relative;
    display: block;
    width: calc(130% + 1.3px);
    height: 80px;
}

.wavy-divider-bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wavy-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(130% + 1.3px);
    height: 80px;
}

/* ==========================================================================
   Sticky CTA Button
   ========================================================================== */
.sticky-cta {
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.sticky-visible .sticky-cta {
    transform: translateY(0);
}

/* ==========================================================================
   Glass Tag (Semi-transparent labels)
   ========================================================================== */
.glass-tag {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Comparison Slider
   ========================================================================== */
.comparison-slider {
    --position: 50%;
}

.slider-overlay {
    width: var(--position);
}

.slider-handle {
    left: var(--position);
}

/* ==========================================================================
   Scan Line Effect
   ========================================================================== */
.scan-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent-gold), transparent);
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 10;
}

/* ==========================================================================
   Form Focus States
   ========================================================================== */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    outline: none;
}

/* ==========================================================================
   Material Icons - Filled Variant
   ========================================================================== */
.material-symbols-filled {
    font-variation-settings: 'FILL' 1;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Step gradient background */
.step-gradient-1 {
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
}

/* ==========================================================================
   Auth Pages Specific Styles
   ========================================================================== */

/* Login/Register heading fonts */
.login-heading,
.heading-font {
    font-family: 'Cormorant Garamond', serif;
}

/* Input focus states for auth forms */
.input-focus:focus {
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
    outline: none;
}

/* Luxury gradient overlay for auth page backgrounds */
.luxury-gradient {
    background: linear-gradient(rgba(26, 46, 46, 0.2), rgba(26, 46, 46, 0.4));
}

/* Corporate fields toggle for registration page */
#kurumsal-fields {
    display: none;
}

input[id="type-corporate"]:checked ~ div #kurumsal-fields {
    display: block;
}

input[id="type-corporate"]:checked ~ div #kisisel-fields {
    display: none;
}