/* ==========================================================================
   Op. Dr. Abdulkadir Güllüce — Tasarım Sistemi
   --------------------------------------------------------------------------
   Karakter: sakin, ferah, güven veren. Klinik soğukluğu yerine sıcak nötr
   yüzeyler; vurgu rengi olarak abartısız bir gül tonu. Kadın sağlığı
   içeriğine uygun ama klişe pembeye kaçmayan bir palet.

   Bu dosya yalnızca değişkenleri ve temel öğeleri tanımlar.
   Bileşenler components.css, sayfa düzeni layout.css içindedir.
   ========================================================================== */

:root {
    /* --- Renk: marka ---
       Kaynak: hekimin gerçek logosu (mor #704898). Palet logodan ölçülerek
       türetilmiştir; site ile logo aynı marka kimliğini taşır. */
    --primary-950: #1d1027;
    --primary-900: #2b1839;
    --primary-800: #3d2250;
    --primary-700: #542f6d;
    --primary-600: #704898;   /* ana marka rengi — logodan alındı */
    --primary-500: #8a5fae;
    --primary-400: #a481c4;
    --primary-300: #c3aad9;
    --primary-200: #ddceea;
    --primary-100: #ece4f3;
    --primary-050: #f7f3fb;

    --primary: var(--primary-600);
    --primary-hover: var(--primary-700);
    --primary-active: var(--primary-800);

    /* --- Renk: vurgu ---
       Logodaki kalp motifinin kırmızısı. Randevu ve dikkat çekici
       eylemlerde ölçülü biçimde kullanılır. */
    --accent-700: #a51f31;
    --accent-600: #c22a3e;
    --accent-500: #dc3b50;
    --accent-400: #e97a8b;
    --accent-300: #f2adb7;
    --accent-200: #f9d5da;
    --accent-100: #fdecef;
    --accent: var(--accent-600);

    /* --- Renk: nötr / yüzey --- */
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-sunken: #f8f6fa;      /* mor tonlu kırık beyaz */
    --surface-muted: #f1edf5;
    --surface-inverse: var(--primary-900);

    --ink-900: #1d1725;
    --ink-800: #2c2436;
    --ink-700: #3f3549;
    --ink-600: #574c62;
    --ink-500: #756b80;
    --ink-400: #9a92a3;
    --ink-300: #bdb7c4;
    --ink-200: #dcd7e1;
    --ink-100: #ebe7ef;

    --text-primary: var(--ink-900);
    --text-secondary: var(--ink-600);
    --text-muted: var(--ink-500);
    --text-inverse: #ffffff;
    --text-on-primary: #ffffff;

    --border: #e4dfea;
    --border-strong: #cec7d6;
    --border-subtle: #efebf3;

    /* --- Renk: durum --- */
    --success-600: #1f7a4d;
    --success-100: #e3f3ea;
    --warning-700: #8a5a08;
    --warning-600: #b0740b;
    --warning-100: #fdf3e0;
    --danger-600: #b3261e;
    --danger-100: #fbeae9;
    --info-600: #1e5fa8;
    --info-100: #e6effa;

    /* --- Tipografi --- */
    --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Lora", Georgia, "Times New Roman", serif;

    --text-2xs: 0.6875rem;   /* 11px */
    --text-xs:  0.75rem;     /* 12px */
    --text-sm:  0.875rem;    /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:  1.0625rem;   /* 17px — gövde metni */
    --text-lg:  1.1875rem;   /* 19px */
    --text-xl:  1.375rem;    /* 22px */
    --text-2xl: 1.625rem;    /* 26px */
    --text-3xl: 2rem;        /* 32px */
    --text-4xl: 2.5rem;      /* 40px */
    --text-5xl: 3.25rem;     /* 52px */

    --leading-tight: 1.18;
    --leading-snug: 1.32;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.06em;

    /* --- Aralık --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Bölüm dikey boşluğu — ekrana göre ölçeklenir */
    --section-y: clamp(3.5rem, 7vw, 6.5rem);
    --section-y-sm: clamp(2.5rem, 5vw, 4rem);

    /* --- Köşe yarıçapı --- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-full: 999px;

    /* --- Gölge --- */
    --shadow-xs: 0 1px 2px rgba(29, 16, 39, 0.05);
    --shadow-sm: 0 2px 6px rgba(29, 16, 39, 0.06);
    --shadow: 0 6px 20px rgba(29, 16, 39, 0.07);
    --shadow-md: 0 12px 32px rgba(29, 16, 39, 0.09);
    --shadow-lg: 0 24px 56px rgba(29, 16, 39, 0.12);
    --shadow-primary: 0 10px 28px rgba(112, 72, 152, 0.24);
    --shadow-accent: 0 10px 28px rgba(194, 42, 62, 0.20);

    /* --- Hareket --- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 140ms;
    --duration: 220ms;
    --duration-slow: 380ms;

    /* --- Düzen --- */
    --container-max: 1240px;
    --container-narrow: 820px;
    --container-pad: clamp(1rem, 4vw, 2rem);
    --header-height: 76px;

    /* --- Katman sırası --- */
    --z-header: 1000;
    --z-dropdown: 1010;
    --z-float: 1020;
    --z-drawer: 1030;
    --z-modal: 1040;
    --z-toast: 1050;
    --z-cookie: 1060;
}

/* ==========================================================================
   Sıfırlama ve temel öğeler
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sabit başlık, bağlantıyla atlanan başlıkları örtmesin */
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, var(--text-5xl)); }
h2 { font-size: clamp(1.625rem, 3.4vw, var(--text-4xl)); }
h3 { font-size: clamp(1.375rem, 2.4vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); }

p {
    margin: 0 0 var(--space-4);
    text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
    color: var(--primary-700);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

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

/* İçerik metnindeki bağlantılar altı çizili olmalı — yalnızca renk ayrımı
   renk körü kullanıcılar için yeterli değildir. */
.prose a,
.rich-text a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

img, picture, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

ul, ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.35rem;
}

li { margin-bottom: var(--space-2); }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-8) 0;
}

blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--primary-300);
    background: var(--primary-050);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--ink-700);
}

strong, b { font-weight: var(--weight-bold); }

small { font-size: var(--text-sm); }

code, kbd, samp {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
    font-size: 0.9em;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/*
   HTML "hidden" ozniteligi her zaman kazanmalidir.
   Tarayicinin varsayilan "[hidden] { display: none }" kurali, bilesen
   stillerindeki "display: grid/flex" tarafindan ezilir; bu da hidden
   isaretli ogelerin ekranda gorunmesine yol acar.
*/
[hidden] { display: none !important; }

/* --- Odak halkası: klavye kullanıcıları için her zaman görünür --- */
:focus-visible {
    outline: 3px solid var(--primary-400);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Fare tıklamasında halka gösterilmez, klavyede gösterilir. */
:focus:not(:focus-visible) { outline: none; }

/* --- Seçim rengi --- */
::selection {
    background: var(--primary-200);
    color: var(--primary-950);
}

/* --- Hareket duyarlılığı --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Yardımcı sınıflar
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-y); }
.section-sm { padding-block: var(--section-y-sm); }
.section-sunken { background: var(--surface-sunken); }
.section-muted { background: var(--surface-muted); }

.section-primary {
    background: linear-gradient(160deg, var(--primary-800), var(--primary-950));
    color: var(--text-inverse);
}

.section-primary h1,
.section-primary h2,
.section-primary h3 { color: var(--text-inverse); }

.section-primary p { color: rgba(255, 255, 255, 0.82); }

/* Ekran okuyucuya görünür, ekranda gizli */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* İçeriğe atla bağlantısı — klavye kullanıcıları menüyü her seferinde
   sekmelemek zorunda kalmasın. */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: calc(var(--z-header) + 10);
    padding: var(--space-3) var(--space-5);
    background: var(--primary-700);
    color: #fff;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: var(--weight-semibold);
    transition: top var(--duration) var(--ease-out);
}

.skip-link:focus {
    top: 0;
    color: #fff;
}

.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-primary-brand { color: var(--primary-700) !important; }
.text-accent { color: var(--accent-600) !important; }
.text-balance { text-wrap: balance; }
.text-center { text-align: center; }

.serif { font-family: var(--font-serif); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--primary-600);
}

.eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: var(--radius-full);
}

.section-primary .eyebrow { color: var(--primary-300); }

.section-header {
    max-width: 680px;
    margin-bottom: var(--space-12);
}

.section-header.is-centered {
    margin-inline: auto;
    text-align: center;
}

.section-header.is-centered .eyebrow { justify-content: center; }

.section-header p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.lead {
    font-size: clamp(1.0625rem, 1.6vw, var(--text-xl));
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Bölümler arası ince ayırıcı */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    border: 0;
    margin: 0;
}