/* arkacep organizasyon - Global Stilller ve Düzen */

@import url('./variables.css');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--color-cream-base);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    background-image: 
        radial-gradient(circle at 10% 20%, hsla(30, 20%, 5%, 0.95) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, hsla(43, 65%, 55%, 0.04) 0%, transparent 50%);
    background-attachment: fixed;
}

/* 3D İnteraktif Arka Plan Canvas */
#ambient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* ===================================================================
   PREMIUM DETAY: TÜM SİTEDEKİ KAYDIRMA ÇUBUKLARINI (SCROLLBARS) GİZLE
   =================================================================== */
/* Tüm tarayıcılarda kaydırma çubuklarını görsel olarak tamamen yok et ama kaydırma işlevini koru */
html, body, div, section, article {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE & Edge */
}

::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari & Opera */
    width: 0 !important;
    height: 0 !important;
}

/* Modal Açıkken Sayfa Kaymasını Engelleme */
html.modal-open, body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
}

/* Tipografi Kuralları */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.2;
}

p {
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

/* Lüks Butonlar */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.6rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    transition: var(--transition-bounce);
    position: relative;
    overflow: hidden;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: var(--color-cream-light);
    box-shadow: 0 10px 25px hsla(43, 65%, 52%, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: 0.6s;
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 35px hsla(43, 65%, 52%, 0.45);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--color-text-primary);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.btn-secondary:hover {
    background: var(--glass-bg-hover);
    border-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow-hover);
}

/* Grid & Layout Bileşenleri */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.section {
    padding: 4.5rem 0;
    position: relative;
    z-index: 2;
}

.section-title-wrap {
    text-align: center;
    margin-bottom: 2.5rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--color-gold);
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.section-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Serif Eğik Yazı Tipi Zarafeti (Serif Italic) */
.serif-italic {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400; /* Eğik yazılarda 400 ağırlığı mükemmel lüks bir kontrast verir */
    color: var(--color-gold); /* İtalik kelimeleri altın rengi yaparak asilliği artırıyoruz */
}

/* Glassmorphism Panel Sınıfı */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--glass-shadow);
    transition: var(--transition-smooth);
}

.glass-panel:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--glass-shadow-hover);
    background: var(--glass-bg-hover);
}


/* Seçim Rengi */
::selection {
    background-color: var(--color-gold);
    color: var(--color-cream-light);
}

/* Mobil Alt Düzenlemeleri */
@media (max-width: 768px) {
    .section {
        padding: 3.5rem 0;
    }
    .section-title {
        font-size: 1.75rem;
    }
    .container {
        padding: 0 1rem;
    }
}

/* Tablet Ortası (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .section {
        padding: 4rem 0;
    }
    .container {
        padding: 0 1.15rem;
    }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .container {
        padding: 0 1.5rem;
    }
}

/* Extra Large Desktop (1600px+) */
@media (min-width: 1600px) {
    .section {
        padding: 5rem 0;
    }
    .section-title {
        font-size: 2.5rem;
    }
}