/* ============================================================
   NAZILLI ÖZEL EĞİTİM — TASARIM TOKEN SİSTEMİ v4.0
   Premium Dijital Aile Platformu — Yayına Hazır
   ============================================================ */

:root {

  /* --- ANA RENKLER (Primary — Derin Teal) --- */
  --clr-primary-50:   #EEF6F5;
  --clr-primary-100:  #CEEAE8;
  --clr-primary-200:  #94D2CE;
  --clr-primary-300:  #5AB5B0;
  --clr-primary-400:  #2E968F;
  --clr-primary-500:  #1A6B68;
  --clr-primary-600:  #145856;
  --clr-primary-700:  #0E4543;
  --clr-primary-800:  #0A302F;
  --clr-primary-900:  #061E1D;

  /* --- AKSAN RENKLER (Accent — Altın) --- */
  --clr-accent-50:    #FFFBF0;
  --clr-accent-100:   #FEF3D1;
  --clr-accent-200:   #FCE68E;
  --clr-accent-300:   #F9D44F;
  --clr-accent-400:   #F2C040;
  --clr-accent-500:   #D4A020;
  --clr-accent-600:   #A87A10;
  --clr-accent-700:   #7C5608;
  --clr-accent-800:   #4F3504;
  --clr-accent-900:   #2A1A00;

  /* --- MARKA (Brand — Mor) --- */
  --clr-brand-50:     #F6F0FA;
  --clr-brand-100:    #E6D4F4;
  --clr-brand-200:    #CDA9E8;
  --clr-brand-300:    #B17EDB;
  --clr-brand-400:    #9355C4;
  --clr-brand-500:    #6B2D8B;
  --clr-brand-600:    #562275;
  --clr-brand-700:    #41185C;
  --clr-brand-800:    #2C1040;
  --clr-brand-900:    #1A0826;

  /* --- BAŞARI / GELİŞİM --- */
  --clr-success-50:   #F0FAF1;
  --clr-success-100:  #D6F3D8;
  --clr-success-200:  #ADE6B0;
  --clr-success-300:  #82D085;
  --clr-success-400:  #5CB85F;
  --clr-success-500:  #3E9641;
  --clr-success-600:  #2C7430;

  /* --- HATA / UYARI --- */
  --clr-error-50:     #FEF2F2;
  --clr-error-100:    #FDDEDE;
  --clr-error-500:    #D45555;
  --clr-error-600:    #B93C3C;

  /* --- SICAKLIK / AİLE --- */
  --clr-warm-50:      #FEF7F3;
  --clr-warm-100:     #FCE9DC;
  --clr-warm-200:     #F8D0B6;
  --clr-warm-300:     #F4BA95;
  --clr-warm-400:     #EC9A6B;
  --clr-warm-500:     #D67544;
  --clr-warm-600:     #AD5528;

  /* --- NÖTRAL / GRİ — sıcak ton --- */
  --clr-gray-50:      #FAF9F7;
  --clr-gray-100:     #F3F2EE;
  --clr-gray-150:     #ECEAE5;
  --clr-gray-200:     #E2E0DB;
  --clr-gray-300:     #CFCDC7;
  --clr-gray-400:     #A3A19B;
  --clr-gray-500:     #787672;
  --clr-gray-600:     #585654;
  --clr-gray-700:     #3B3A38;
  --clr-gray-800:     #222120;
  --clr-gray-900:     #141313;

  /* ===== SEMANTİK TOKEN'LAR ===== */

  /* Zemin katmanları — 3-layer surface system */
  --bg-page:          #FAF9F7;
  --bg-card:          #FFFFFF;
  --bg-elevated:      #FFFFFF;
  --bg-section-alt:   #F5F4F0;
  --bg-section-warm:  #FBF7F3;
  --bg-section-cool:  #F2F6F5;
  --bg-primary:       var(--clr-primary-500);
  --bg-primary-soft:  var(--clr-primary-50);
  --bg-accent-soft:   var(--clr-accent-50);
  --bg-brand-soft:    var(--clr-brand-50);
  --bg-warm-soft:     var(--clr-warm-50);
  --bg-dark:          #0F1614;
  --bg-dark-elevated: #1A2220;
  --bg-dark-surface:  #212E2C;

  /* Metin */
  --txt-heading:      #161615;
  --txt-primary:      #2C2C2A;
  --txt-secondary:    #616160;
  --txt-tertiary:     #9E9D9A;
  --txt-muted:        #BCBBB8;
  --txt-inverse:      #FFFFFF;
  --txt-on-primary:   #FFFFFF;
  --txt-on-accent:    #2A1A00;
  --txt-brand:        var(--clr-brand-500);
  --txt-link:         var(--clr-primary-600);

  /* Kenarlık */
  --border-default:   #E8E7E3;
  --border-light:     #F0EFEB;
  --border-subtle:    #F5F4F1;
  --border-strong:    #D4D3CF;
  --border-primary:   var(--clr-primary-200);

  /* Gölge — daha zengin, daha katmanlı */
  --shadow-xs:    0 1px 2px rgba(22,22,21,0.04);
  --shadow-sm:    0 1px 3px rgba(22,22,21,0.04), 0 4px 12px rgba(22,22,21,0.03);
  --shadow-md:    0 2px 4px rgba(22,22,21,0.04), 0 8px 24px rgba(22,22,21,0.06);
  --shadow-lg:    0 2px 6px rgba(22,22,21,0.04), 0 12px 40px rgba(22,22,21,0.08);
  --shadow-xl:    0 4px 8px rgba(22,22,21,0.04), 0 20px 56px rgba(22,22,21,0.10);
  --shadow-2xl:   0 8px 16px rgba(22,22,21,0.04), 0 32px 80px rgba(22,22,21,0.14);
  --shadow-inner: inset 0 2px 4px rgba(22,22,21,0.04);

  /* Tinted shadows */
  --shadow-primary:    0 4px 12px rgba(26,107,104,0.12), 0 12px 36px rgba(26,107,104,0.16);
  --shadow-primary-lg: 0 8px 20px rgba(26,107,104,0.15), 0 24px 56px rgba(26,107,104,0.20);
  --shadow-accent:     0 4px 12px rgba(242,192,64,0.15), 0 12px 36px rgba(242,192,64,0.20);
  --shadow-dark:       0 8px 32px rgba(15,22,20,0.50);

  /* ===== TİPOGRAFİ ===== */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Boyutlar — dramatik editoryal scale */
  --text-2xs:   0.6875rem;   /* 11px */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  0.9375rem;   /* 15px */
  --text-md:    1.0625rem;   /* 17px */
  --text-lg:    1.1875rem;   /* 19px */
  --text-xl:    1.375rem;    /* 22px */
  --text-2xl:   1.75rem;     /* 28px */
  --text-3xl:   2.375rem;    /* 38px */
  --text-4xl:   3.125rem;    /* 50px */
  --text-5xl:   4rem;        /* 64px */
  --text-6xl:   5rem;        /* 80px */
  --text-hero:  clamp(2.75rem, 6vw, 4.5rem);

  /* Ağırlıklar */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Satır yükseklikleri */
  --lh-none:    1.0;
  --lh-tight:   1.12;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.72;
  --lh-loose:   1.9;

  /* Letter spacing */
  --ls-tight:  -0.03em;
  --ls-normal: -0.01em;
  --ls-wide:    0.02em;
  --ls-wider:   0.06em;
  --ls-widest:  0.12em;

  /* ===== BOŞLUK SİSTEMİ ===== */
  --space-0:    0;
  --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-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */
  --space-40:  10rem;      /* 160px */

  /* ===== BOYUTLAR ===== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-full: 9999px;

  /* ===== LAYOUT ===== */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow:  720px;
  --content-max:       640px;
  --grid-gutter:       clamp(1rem, 2.5vw, 1.5rem);

  /* ===== ANİMASYON ===== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;
  --dur-xslow:   600ms;

  /* ===== Z-INDEX ===== */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ===== COMPONENT TOKEN'LAR ===== */
  --btn-height-sm:    40px;
  --btn-height-md:    50px;
  --btn-height-lg:    58px;
  --btn-px-sm:        var(--space-5);
  --btn-px-md:        var(--space-8);
  --btn-px-lg:        var(--space-10);
  --btn-radius:       var(--radius-full);
  --btn-font-size:    var(--text-sm);
  --btn-font-weight:  var(--fw-semibold);

  --input-height:     50px;
  --input-px:         var(--space-5);
  --input-radius:     var(--radius-md);

  --card-radius:      var(--radius-2xl);
  --card-padding:     clamp(var(--space-6), 3vw, var(--space-10));
  --card-shadow:      var(--shadow-sm);

  --header-height:    76px;
  --header-height-mobile: 64px;
  /* Sekme/chrome ile header arasında nefes payı + çentik güvenli alanı */
  --header-pad-top: var(--space-4);
  --header-offset-top: calc(env(safe-area-inset-top, 0px) + var(--header-pad-top));
  --header-shell-height: calc(var(--header-height) + var(--header-offset-top));
  --header-shell-height-mobile: calc(var(--header-height-mobile) + var(--header-offset-top));
  --mobile-nav-height: 72px;

  /* Section spacing — dramatik */
  --section-py:       clamp(5rem, 12vw, 8rem);
  --section-py-sm:    clamp(3rem, 7vw, 5rem);
  --section-py-lg:    clamp(6rem, 14vw, 10rem);

  /* ===== GRADIENT SİSTEMİ ===== */
  --gradient-primary:     linear-gradient(135deg, var(--clr-primary-500) 0%, var(--clr-primary-700) 100%);
  --gradient-primary-soft: linear-gradient(135deg, var(--clr-primary-50) 0%, var(--bg-section-cool) 100%);
  --gradient-accent:      linear-gradient(135deg, var(--clr-accent-300) 0%, var(--clr-accent-500) 100%);
  --gradient-hero-mesh:   radial-gradient(ellipse 80% 60% at 65% 15%, rgba(26,107,104,0.09) 0%, transparent 55%),
                          radial-gradient(ellipse 50% 70% at 10% 75%, rgba(242,192,64,0.06) 0%, transparent 45%),
                          radial-gradient(ellipse 35% 35% at 90% 70%, rgba(107,45,139,0.04) 0%, transparent 45%);
  --gradient-dark-mesh:   radial-gradient(ellipse 60% 50% at 10% 50%, rgba(26,107,104,0.12) 0%, transparent 55%),
                          radial-gradient(ellipse 40% 40% at 90% 20%, rgba(242,192,64,0.06) 0%, transparent 45%),
                          radial-gradient(ellipse 30% 60% at 50% 100%, rgba(26,107,104,0.08) 0%, transparent 45%);
  --gradient-separator:   linear-gradient(90deg, transparent 5%, var(--border-default) 50%, transparent 95%);
  --gradient-accent-line: linear-gradient(90deg, transparent, var(--clr-primary-400), var(--clr-accent-400), transparent);
  --gradient-glass:       linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);

  /* ===== SURFACE KATMANLARI ===== */
  --surface-glass:     rgba(255,255,255,0.88);
  --surface-glass-strong: rgba(255,255,255,0.95);
  --surface-frost:     blur(20px) saturate(1.4);
  --surface-dark-glass: rgba(15,22,20,0.90);
}