/* ============================================================
   Op. Dr. Ramazan Güler — CSS Custom Properties (Design Tokens)
   Tüm değişkenler buradan yönetilir.
   ============================================================ */

:root {
  /* ── Renkler */
  --color-primary:        #1a6fd4;   /* Vibrant Medical Blue */
  --color-primary-dark:   #1358ae;
  --color-primary-light:  #3585e0;
  --color-primary-alpha:  rgba(26, 111, 212, 0.08);

  --color-accent:         #C9A84C;
  --color-accent-dark:    #a8893a;
  --color-accent-light:   #dfc06e;

  --color-success:        #2E7D5E;
  --color-error:          #C0392B;
  --color-warning:        #E67E22;
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1da851;

  --color-text:           #0F172A;
  --color-text-muted:     #334155;
  --color-text-light:     #475569;
  --color-text-inverse:   #ffffff;

  --color-bg:             #FAFAFA;
  --color-bg-alt:         #F0F4FA;   /* Hafif mavi tonu */
  --color-bg-dark:        #0c1f3f;   /* Koyu donanma mavisi */
  --color-bg-darker:      #071428;
  
  --color-border:         #dde4f0;
  --color-border-dark:    #b8c8e0;

  --color-white:          #ffffff;
  --color-black:          #000000;

  /* ── Tipografi */
  --font-body:            'DM Sans', system-ui, -apple-system, sans-serif;
  --font-heading:         'Cormorant Garamond', 'Times New Roman', serif;

  /* Modular Scale — okunabilirlik odaklı */
  --fs-xs:    0.8125rem;   /* ~13px */
  --fs-sm:    0.9375rem;   /* ~15px */
  --fs-base:  1rem;        /* 16px @ 100%, ~17.6px @ 110% */
  --fs-lg:    1.25rem;
  --fs-xl:    1.563rem;
  --fs-2xl:   1.953rem;
  --fs-3xl:   2.441rem;
  --fs-4xl:   3.052rem;
  --fs-5xl:   clamp(2.2rem, 5vw, 3.815rem);

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

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.65;
  --lh-relaxed: 1.85;

  /* ── Spacing (8px grid) */
  --sp-1:   0.5rem;    /* 8px  */
  --sp-2:   1rem;      /* 16px */
  --sp-3:   1.5rem;    /* 24px */
  --sp-4:   2rem;      /* 32px */
  --sp-5:   3rem;      /* 48px */
  --sp-6:   4rem;      /* 64px */
  --sp-7:   6rem;      /* 96px */
  --sp-8:   8rem;      /* 128px */

  --section-py:      var(--sp-7);
  --section-py-sm:   var(--sp-5);
  --container-max:   1280px;
  --container-px:    var(--sp-3);

  /* ── Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07);
  --shadow-lg:   0 10px 30px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:   0 20px 60px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.10);
  --shadow-card: 0 2px 8px rgba(27,94,138,.06), 0 8px 24px rgba(27,94,138,.08);

  /* ── Transitions */
  --transition-fast:    150ms ease;
  --transition-base:    300ms ease;
  --transition-slow:    500ms ease;
  --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-top:      999;

  /* ── Nav */
  --nav-height:     72px;
  --nav-height-sm:  56px;
  --safe-bottom:    0px;
}