/* ============================================
   YENİ GÜZELLIK MERKEZİ TASARIMI
   Sage Green + Nude + Rose Gold Palette
   Cormorant Garamond + Montserrat Fonts
   ============================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   YENİ RENK PALETİ - Sage Green & Nude
   ============================================ */
:root {
    /* Ana Renkler - Sage Green & Nude */
    --sage-primary: #8FA193;      /* Ana Sage Green */
    --sage-dark: #6B7B6E;         /* Koyu Sage */
    --sage-light: #C9D5C9;        /* Açık Sage */
    --sage-ultra-light: #E8F0E8;  /* Çok açık Sage */
    
    --nude-primary: #E8D5C4;      /* Ana Nude */
    --nude-light: #F5EDE3;        /* Açık Nude */
    --nude-cream: #FAF6F0;        /* Cream */
    --nude-beige: #D4C0A8;        /* Koyu Nude */
    
    --rose-gold: #B76E79;         /* Rose Gold Accent */
    --rose-gold-light: #D4A5A5;   /* Açık Rose Gold */
    
    /* Nötr Renkler */
    --white: #FFFFFF;
    --off-white: #FAFAFA;
    --gray-light: #F5F5F5;
    --gray-medium: #999999;
    --gray-dark: #4A4A4A;
    --black: #2C2C2C;
    
    /* Gradientler */
    --gradient-sage: linear-gradient(135deg, #8FA193 0%, #C9D5C9 100%);
    --gradient-nude: linear-gradient(135deg, #F5EDE3 0%, #E8D5C4 100%);
    --gradient-elegant: linear-gradient(135deg, #8FA193 0%, #E8D5C4 50%, #B76E79 100%);
    --gradient-soft: linear-gradient(180deg, #FAF6F0 0%, #E8F0E8 100%);
    
    /* Shadow'lar - Soft & Natural */
    --shadow-sm: 0 2px 8px rgba(143, 161, 147, 0.08);
    --shadow-md: 0 4px 16px rgba(143, 161, 147, 0.12);
    --shadow-lg: 0 8px 32px rgba(143, 161, 147, 0.16);
    --shadow-xl: 0 12px 48px rgba(143, 161, 147, 0.2);
    
    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;
    
    /* Spacing & Sizes */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-base: 400ms ease;
    --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GLOBAL RESET
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body) !important;
    color: var(--gray-dark) !important;
    background: var(--nude-cream) !important;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--black) !important;
    font-weight: 600;
    line-height: 1.3;
}

.font-heading {
    font-family: var(--font-heading) !important;
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
    padding: 5rem 0 !important;
}

.section-light {
    background: var(--white) !important;
}

.section-accent {
    background: var(--gradient-soft) !important;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.subtitle {
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    color: var(--sage-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-bottom: 1rem !important;
}

.section-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 600 !important;
    color: var(--black) !important;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-sage);
    border-radius: var(--radius-full);
}

/* ============================================
   CARDS - Modern & Elegant
   ============================================ */
.card {
    background: var(--white) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-slow) !important;
    border: 1px solid var(--nude-light) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-12px) !important;
    box-shadow: var(--shadow-xl) !important;
    border-color: var(--sage-light) !important;
}

.card-title {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--black) !important;
    margin-bottom: 1rem !important;
}

.card-description {
    color: var(--gray-medium) !important;
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
}

.card-content {
    padding: 2rem !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================
   BUTTONS - Sage & Nude Harmony
   ============================================ */
.btn {
    display: inline-block !important;
    padding: 1rem 2.5rem !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all var(--transition-base) !important;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--gradient-sage) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-secondary {
    background: var(--sage-dark) !important;
    color: var(--white) !important;
}

.btn-secondary:hover {
    background: var(--sage-primary) !important;
    transform: translateY(-3px) !important;
}

.hover-lift {
    transition: transform var(--transition-base) !important;
}

.hover-lift:hover {
    transform: translateY(-5px) !important;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    position: relative;
    height: 70vh;
    min-height: 500px;
}

.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(143, 161, 147, 0.6) 0%, rgba(183, 110, 121, 0.4) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 600 !important;
    color: var(--white) !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out;
}

.hero-description {
    font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 1s ease-out 0.2s backwards;
}

/* ============================================
   GALLERY
   ============================================ */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    background: var(--white);
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-item:hover .gallery-image {
    transform: scale(1.15);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--transition-slow);
}

.animate-on-scroll.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 1s ease-out forwards;
}

/* ============================================
   HOVER EFFECTS
   ============================================ */
.hover-glow:hover {
    filter: drop-shadow(0 0 20px rgba(143, 161, 147, 0.5));
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .section {
        padding: 3rem 0 !important;
    }
    .hero-section {
        height: 60vh;
        min-height: 400px;
    }
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--nude-light);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-sage);
    border-radius: var(--radius-full);
}

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

/* ============================================
   SELECTION
   ============================================ */
::selection {
    background: var(--sage-primary);
    color: white;
}