/* ============================================================
   BASE CSS — Design Tokens & Global Stiller
   Tüm renkler, fontlar ve spacing buradan yönetilir.
   Google Fonts includes/header.php içinde yükleniyor.
   ============================================================ */

/* -------------------------------------------------------
   CSS VARIABLES — DESIGN TOKENS
   ------------------------------------------------------- */
:root {

    /* ── RENKLER ── */

    /* Ana renk — güven, temizlik, profesyonellik */
    --color-primary:        #0B5FBE;
    --color-primary-dark:   #084A96;
    --color-primary-light:  #3A7FD5;
    --color-primary-bg:     #EBF2FC;   /* Çok açık mavi — section arka planı */

    /* Aksan renk — ferahlık, hijyen, doğallık */
    --color-accent:         #25C585;
    --color-accent-dark:    #1A9E6A;
    --color-accent-light:   #D4F5E9;

    /* Nötr renkler */
    --color-white:          #FFFFFF;
    --color-bg:             #F8FAFD;   /* Sayfa genel arka planı */
    --color-bg-soft:        #EFF4FB;   /* Alternatif section arka planı */
    --color-border:         #DDE6F0;

    /* Metin renkleri */
    --color-text:           #1A2340;   /* Ana başlık, koyu metin */
    --color-text-body:      #3D4F6E;   /* Paragraf metni */
    --color-text-muted:     #7A8BA6;   /* İkincil, yardımcı metin */
    --color-text-light:     #A8B8CC;   /* Placeholder, devre dışı */

    /* Durum renkleri */
    --color-success:        #25C585;
    --color-error:          #E8334A;
    --color-warning:        #F5A623;

    /* WhatsApp & Telefon butonları */
    --color-whatsapp:       #25D366;
    --color-whatsapp-dark:  #1DA851;
    --color-call:           #0B5FBE;

    /* ── FONTLAR ── */
    --font-heading:         'Poppins', sans-serif;   /* Başlıklar */
    --font-body:            'Nunito', sans-serif;    /* Paragraflar, genel */

    /* ── FONT WEIGHT ── */
    --fw-regular:           400;
    --fw-medium:            500;
    --fw-semibold:          600;
    --fw-bold:              700;
    --fw-extrabold:         800;

    /* ── FONT SIZE ── */
    --fs-xs:                0.75rem;    /* 12px */
    --fs-sm:                0.875rem;   /* 14px */
    --fs-base:              1rem;       /* 16px */
    --fs-md:                1.125rem;   /* 18px */
    --fs-lg:                1.25rem;    /* 20px */
    --fs-xl:                1.5rem;     /* 24px */
    --fs-2xl:               1.875rem;   /* 30px */
    --fs-3xl:               2.25rem;    /* 36px */
    --fs-4xl:               2.75rem;    /* 44px */
    --fs-5xl:               3.5rem;     /* 56px */

    /* ── SPACING ── */
    --space-1:              0.25rem;    /* 4px */
    --space-2:              0.5rem;     /* 8px */
    --space-3:              0.75rem;    /* 12px */
    --space-4:              1rem;       /* 16px */
    --space-5:              1.25rem;    /* 20px */
    --space-6:              1.5rem;     /* 24px */
    --space-8:              2rem;       /* 32px */
    --space-10:             2.5rem;     /* 40px */
    --space-12:             3rem;       /* 48px */
    --space-16:             4rem;       /* 64px */
    --space-20:             5rem;       /* 80px */
    --space-24:             6rem;       /* 96px */

    /* Section padding */
    --section-py:           5rem;       /* 80px üst-alt */
    --section-py-sm:        3rem;       /* 48px — mobilde */

    /* Container */
    --container-width:      1200px;
    --container-px:         1.5rem;     /* Yan boşluk */

    /* ── BORDER RADIUS ── */
    --radius-sm:            6px;
    --radius-md:            12px;
    --radius-lg:            20px;
    --radius-xl:            32px;
    --radius-full:          9999px;

    /* ── SHADOW ── */
    --shadow-sm:            0 1px 4px rgba(11, 95, 190, 0.08);
    --shadow-md:            0 4px 16px rgba(11, 95, 190, 0.12);
    --shadow-lg:            0 8px 32px rgba(11, 95, 190, 0.16);
    --shadow-xl:            0 16px 48px rgba(11, 95, 190, 0.20);
    --shadow-card:          0 2px 12px rgba(26, 35, 64, 0.08);

    /* ── TRANSİSYON ── */
    --transition-fast:      0.15s ease;
    --transition-base:      0.25s ease;
    --transition-slow:      0.4s ease;

    /* ── Z-INDEX ── */
    --z-sticky:             100;
    --z-dropdown:           200;
    --z-modal:              300;
    --z-toast:              400;
}

/* -------------------------------------------------------
   GLOBAL BODY & HTML
   ------------------------------------------------------- */
html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--color-text-body);
    background-color: var(--color-bg);
    line-height: 1.7;
}

/* -------------------------------------------------------
   CONTAINER — Tüm section'larda ortak kullanım
   ------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-px);
}

/* -------------------------------------------------------
   TYPOGRAPHY — Genel başlık stilleri
   ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    line-height: 1.25;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
    font-size: var(--fs-base);
    color: var(--color-text-body);
    line-height: 1.75;
}

/* -------------------------------------------------------
   SECTION ORTAK YAPISI
   ------------------------------------------------------- */
.section {
    padding: var(--section-py) 0;
}

.section--bg-soft {
    background-color: var(--color-bg-soft);
}

.section--bg-primary {
    background-color: var(--color-primary);
}

.section-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    background-color: var(--color-primary-bg);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.section-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    color: var(--color-text);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.section-subtitle {
    font-size: var(--fs-md);
    color: var(--color-text-muted);
    max-width: 560px;
    line-height: 1.75;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-header .section-subtitle {
    margin: 0 auto;
}

/* -------------------------------------------------------
   GRID YARDIMCILARI
   ------------------------------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

/* -------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --fs-5xl: 2.75rem;
        --fs-4xl: 2.25rem;
        --fs-3xl: 1.875rem;
    }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --fs-5xl: 2.25rem;
        --fs-4xl: 1.875rem;
        --fs-3xl: 1.5rem;
        --section-py: var(--section-py-sm);
    }

    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }

    .section-title { font-size: var(--fs-2xl); }

    /* Mobil sticky bar için alt boşluk */
    body {
        padding-bottom: 70px;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-4xl: 1.625rem;
        --fs-3xl: 1.375rem;
        --container-px: 1rem;
    }
}