/* ─── Google Fonts Import ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── CSS Variables (Tokens) ─────────────────────────────────── */
:root {
    /* Ana Renkler */
    --color-primary:          #1E3A5F;
    --color-primary-dark:     #152C47;
    --color-primary-light:    #EEF2F7;
    --color-primary-mid:      #2A4F80;

    --color-accent:           #F59E0B;
    --color-accent-dark:      #D97706;
    --color-accent-light:     #FEF3C7;

    --color-whatsapp:         #25D366;
    --color-whatsapp-dark:    #1DA851;

    --color-success:          #10B981;
    --color-warning:          #F59E0B;
    --color-danger:           #EF4444;

    /* Nötr Renkler */
    --color-white:            #FFFFFF;
    --color-gray-50:          #F8FAFC;
    --color-gray-100:         #F1F5F9;
    --color-gray-200:         #E2E8F0;
    --color-gray-300:         #CBD5E1;
    --color-gray-400:         #94A3B8;
    --color-gray-500:         #64748B;
    --color-gray-600:         #475569;
    --color-gray-700:         #334155;
    --color-gray-800:         #1E293B;
    --color-gray-900:         #0F172A;

    /* Metin Renkleri */
    --color-text-primary:     #1E293B;
    --color-text-secondary:   #475569;
    --color-text-muted:       #94A3B8;
    --color-text-white:       #FFFFFF;

    /* Arka Plan Renkleri */
    --color-bg-primary:       #FFFFFF;
    --color-bg-secondary:     #F8FAFC;
    --color-bg-tertiary:      #F1F5F9;
    --color-bg-dark:          #1E3A5F;

    /* Border */
    --color-border:           #E2E8F0;
    --color-border-dark:      #CBD5E1;

    /* Tipografi */
    --font-primary:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:           0.75rem;
    --font-size-sm:           0.875rem;
    --font-size-base:         1rem;
    --font-size-lg:           1.125rem;
    --font-size-xl:           1.25rem;
    --font-size-2xl:          1.5rem;
    --font-size-3xl:          1.875rem;
    --font-size-4xl:          2.25rem;
    --font-size-5xl:          3rem;
    --font-size-6xl:          3.75rem;

    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;

    --line-height-tight:      1.25;
    --line-height-snug:       1.375;
    --line-height-normal:     1.5;
    --line-height-relaxed:    1.625;
    --line-height-loose:      2;

    /* Spacing */
    --spacing-1:    0.25rem;
    --spacing-2:    0.5rem;
    --spacing-3:    0.75rem;
    --spacing-4:    1rem;
    --spacing-5:    1.25rem;
    --spacing-6:    1.5rem;
    --spacing-8:    2rem;
    --spacing-10:   2.5rem;
    --spacing-12:   3rem;
    --spacing-16:   4rem;
    --spacing-20:   5rem;
    --spacing-24:   6rem;

    /* Border Radius */
    --radius-sm:    0.25rem;
    --radius-md:    0.5rem;
    --radius-lg:    0.75rem;
    --radius-xl:    1rem;
    --radius-2xl:   1.5rem;
    --radius-full:  9999px;

    /* Shadow */
    --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-primary: 0 4px 14px 0 rgb(30 58 95 / 0.25);
    --shadow-accent:  0 4px 14px 0 rgb(245 158 11 / 0.35);

    /* Transition */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   350ms ease;

    /* Container */
    --container-max:     1200px;
    --container-padding: 1.5rem;

    /* Z-index */
    --z-header:   100;
    --z-dropdown: 200;
    --z-mobile:   300;
    --z-float:    400;
    --z-overlay:  500;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

ul, ol {
    list-style: none;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ─── Container ───────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ─── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

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

p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ─── Section Ortak Stilleri ─────────────────────────────────── */
.section {
    padding-block: var(--spacing-20);
}

.section-sm {
    padding-block: var(--spacing-12);
}

.section-lg {
    padding-block: var(--spacing-24);
}

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

.section-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
}

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

.section-label {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-3);
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.section-desc {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 640px;
    margin-inline: auto;
    line-height: var(--line-height-relaxed);
}

/* ─── Grid Yardımcıları ───────────────────────────────────────── */
.grid   { display: grid; gap: var(--spacing-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Flex Yardımcıları ───────────────────────────────────────── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --container-padding: 1.25rem; }
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --container-padding: 1rem; }
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
    .section    { padding-block: var(--spacing-12); }
    .section-lg { padding-block: var(--spacing-16); }
    .section-header { margin-bottom: var(--spacing-8); }
    .section-title  { font-size: var(--font-size-2xl); }
    .section-desc   { font-size: var(--font-size-base); }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    h1 { font-size: var(--font-size-xl); }
    h2 { font-size: var(--font-size-lg); }
}

/* ─── Utility ─────────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--color-text-muted); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}