/*
==================================
    GLOBAL STYLE GUIDE (style.css)
==================================
Bu dosya, web sitesinin tüm global stil tanımlamalarını içerir.
Renk paleti, tipografi, boşluklar ve temel bileşenler gibi
tüm tasarım sistemi (design tokens) burada CSS değişkenleri olarak tanımlanmıştır.
Diğer tüm CSS dosyaları, tutarlılığı sağlamak için bu değişkeleri kullanmalıdır.

İÇİNDEKİLER:
1.  DESIGN SYSTEM (TASARIM SİSTEMİ - DEĞİŞKENLER)
    1.1. Renk Paleti (Açık ve Koyu Tema)
    1.2. Tipografi
    1.3. Boyutlandırma ve Boşluklar
    1.4. Kenarlıklar ve Gölgeler
    1.5. Geçişler ve Animasyonlar

2.  GLOBAL RESET & TEMEL STİLLER

3.  LAYOUT (YERLEŞİM) & YARDIMCI SINIFLAR

4.  TYPOGRAPHY (TİPOGRAFİ)

5.  COMPONENTS (BİLEŞENLER)
    5.1. Butonlar
    5.2. Tema Değiştirme Düğmesi

==================================
*/

/* ==================================
   1. DESIGN SYSTEM (TASARIM SİSTEMİ - DEĞİŞKENLER)
   ================================== */
:root {
    -webkit-font-smoothing: antialiased;
    /* 1.1. Renk Paleti (Açık Tema) */
    --color-primary: #1DB954; /* Spotify Yeşili */
    --color-primary-hover: #1ED760;
    --color-secondary: #282828;
    --color-accent: #B3B3B3;

    --color-text-base: #000000; /* Tam siyah */
    --color-text-muted: #333333; /* Daha koyu gri */
    --color-text-inverted: #FFFFFF;

    --color-bg-base: rgb(252, 252, 252);
    --color-bg-offset: rgb(252, 252, 252);
    --color-bg-navbar: rgb(252, 252, 252);
    --color-bg-navbar-rgb: 252, 252, 252;
    --color-border: rgba(3, 3, 3, 0.1);

    /* 1.2. Tipografi */
    --font-family-heading: 'Montserrat', 'Helvetica Neue', sans-serif;
    --font-family-body: 'Inter', 'Arial', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* 1.3. Boyutlandırma ve Boşluklar */
    --spacing-unit: 8px;
    --navbar-height: 86px; /* Navbar yüksekliği için merkezi değişken (70px + 1rem padding = ~86px) */

    /* 1.4. Kenarlıklar ve Gölgeler */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --border-radius-pill: 50px;
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* 1.5. Geçişler ve Animasyonlar */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.35s;
    --transition-speed-theme: 0.35s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Smooth theme transitions - handled by JavaScript for better synchronization */
}

/* ==================================
   2. GLOBAL RESET & TEMEL STİLLER
   ================================== */

/* Tema değiştirici ile ilgili özel elemanlar kaldırıldığı için
   tüm elemanlara standart geçiş uygulanabilir */
* {
    transition: background-color var(--transition-speed-normal) var(--transition-easing),
                color var(--transition-speed-normal) var(--transition-easing),
                border-color var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
}
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    background-color: var(--color-bg-base);
    color: var(--color-text-base);
    padding-top: var(--navbar-height);
}


/* ==================================
   3. LAYOUT & YARDIMCI SINIFLAR
   ================================== */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* ==================================
   4. TYPOGRAPHY (TİPOGRAFİ)
   ================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-base);
    line-height: 1.2;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-easing);
}

a:hover {
    color: var(--color-primary-hover);
}


/* ==================================
   5. COMPONENTS (BİLEŞENLER)
   ================================== */

/* 5.1. Genel Buton Stilleri */
.btn {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    text-align: center;
    border-radius: var(--border-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-speed-fast) var(--transition-easing), 
                box-shadow var(--transition-speed-normal) var(--transition-easing), 
                background-color var(--transition-speed-normal) var(--transition-easing);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverted);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}