/* ==========================================================================
   Vefa Medikal — Tasarım sistemi: tokenlar, reset, tipografi
   Spec: docs/superpowers/specs/2026-08-08-vefamedikal-redesign-v2-design.md §6
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* --- Zemin ve metin ------------------------------------------------
       ADL'nin ölçülmüş açık paleti: orta-lacivert (near-black değil) +
       taze teal. Geometri (pah kesim, Valorant kartları) korunur;
       yalnızca renk ADL'nin açık diline çevrildi.                       */
    --ink:        #0F1B2D;   /* açık zeminde metin (ADL) */
    --navy:       #0F3033;   /* koyu panel — petrol koyu */
    --navy-deep:  #0B2528;   /* hero gradyan başlangıcı */
    --navy-lift:  #17454A;   /* hero gradyan bitişi */
    --navy-line:  #1C4A4E;   /* koyu zeminde ayraç */
    --paper:      #FAFBFC;   /* açık zemin (ADL) */
    --surface:    #FFFFFF;   /* kart, form */
    --heading-dark: #F4F0E6;  /* koyu zeminde ana baslik (cream) */

    /* --- Vurgu ---------------------------------------------------------
       İKİ TEAL: --accent yalnızca GRAFİK (kenar, perde, büyük display).
       Küçük metin ve buton zemini için --accent-ink kullanılır; beyazla
       5.03:1, paper ile 4.85:1 verir. --accent metin için yeterli
       kontrast vermez, sadece grafik.                                   */
    --accent:     #0E9E9C;
    --accent-ink: #0B7C7A;
    --accent-hi:  #4BE3D0;   /* koyu zeminde vurgu, petrol panel ile 8.85:1 */

    /* --- İkincil ------------------------------------------------------- */
    --muted:      #556170;   /* açık zeminde soluk metin, --paper ile 6.09:1 */
    --muted-dark: #AEB8C4;   /* koyu zeminde ikincil metin, panel ile 7.0:1 */
    --line:       #E4E9F0;

    /* --- Geometri ------------------------------------------------------ */
    --bevel:      20px;      /* (eski pah kesim; artık yumuşak köşe kullanılıyor) */
    --bevel-sm:   10px;
    /* Yumuşak köşe yarıçapları */
    --radius:     16px;      /* kartlar, paneller, görsel çerçeveleri */
    --radius-sm:  10px;      /* girişler, çipler, rozetler */
    --radius-btn: 12px;      /* butonlar */
    --container:  1280px;
    --gutter:     24px;
    --section-y:  96px;

    /* --- Işın (yarık lamba) — teal tonuna çekildi ---------------------- */
    --beam-rgb:   90, 210, 200;

    /* --- Tipografi ölçeği ---------------------------------------------- */
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-data:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    --fs-d1:    clamp(2.6rem, 6vw, 4.6rem);
    --fs-d2:    clamp(2rem, 4vw, 3.1rem);
    --fs-d3:    clamp(1.45rem, 2.4vw, 2rem);
    --fs-lead:  clamp(1rem, 1.3vw, 1.125rem);
    --fs-body:  0.9375rem;   /* 15px */
    --fs-small: 0.8125rem;   /* 13px */
    --fs-micro: 0.6875rem;   /* 11px */

    --ease: cubic-bezier(.2, .7, .3, 1);
}

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

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

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ==========================================================================
   Tipografi
   --------------------------------------------------------------------------
   Barlow Condensed sıkışık büyük harf başlıklarda; Inter gövdede;
   IBM Plex Mono sayısal ve teknik veride (ürün sayısı, ülke kodu, gauge,
   teknik özellik değeri). Üçüncü yüz süs değil: bu iş kolunun kendi
   notasyonu (20G / 23G / 25G) monospace okunur.
   ========================================================================== */
h1, h2, h3, h4, .display-1, .display-2, .display-3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.display-1 { font-size: var(--fs-d1); }
.display-2 { font-size: var(--fs-d2); }
.display-3 { font-size: var(--fs-d3); }

h1 { font-size: var(--fs-d1); }
h2 { font-size: var(--fs-d2); }
h3 { font-size: var(--fs-d3); }
h4 { font-size: 1.15rem; }

/* Başlık içi vurgu: kırmızı italik parça */
h1 em, h2 em, h3 em, .display-1 em, .display-2 em, .display-3 em {
    font-style: italic;
    font-weight: 600;
    color: var(--accent-ink);
}
.section-dark h1 em, .section-dark h2 em, .section-dark h3 em,
.section-dark .display-1 em, .section-dark .display-2 em, .section-dark .display-3 em {
    color: var(--accent-hi);
}

.lead { font-size: var(--fs-lead); line-height: 1.7; font-weight: 300; }
.small { font-size: var(--fs-small); }

/* Teknik veri: sayı, kod, yıl, gauge */
.data {
    font-family: var(--font-data);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Erişilebilirlik
   ========================================================================== */
:focus-visible {
    outline: 3px solid var(--accent-hi);
    outline-offset: 2px;
}
/* clip-path taşıyan öğelerde outline kırpılır; içeriden halka çiziyoruz. */
.bevel:focus-visible, .bevel-sm:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--accent-hi);
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--accent-ink); color: #fff;
    padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}