/**
 * Hızlı Okumatik — "Portakal" design tokens (docs/DESIGN.md).
 *
 * One warm palette (P3 "Domates-Portakal"): tomato-orange brand, sunflower
 * accent, warm espresso instead of navy, neutral off-white page. De-slopped:
 * flat colour only (no gradients, glows, dot textures), quiet neutral shadows,
 * one light tint per hue (orange-50, yellow-50, grey-50); sage and blush are
 * retired aliases of grey-50.
 * The only file allowed to hold raw colours. Components use the role tokens
 * (--renk-*), never the raw --p-* values.
 *
 * Axes on <html>:
 *   data-alan   ogrenci | yonetim | site   (context: student, staff, public)
 *   data-yas    ilkokul | ortaokul | lise  (student grade band; absent = ortaokul values)
 *   data-theme  light | dark               (explicit choice; absent = system)
 *   data-rahat  acik                       (rahat okuma: easier reading text)
 *   class="js"  set by theme-init.js       (entrance reveals only hide content when JS runs)
 *
 * Fonts (SIL OFL 1.1, self-hosted in ../fonts/): Plus Jakarta Sans (headings,
 * big numbers), Atkinson Hyperlegible Next (UI text), Literata (reading text).
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src: url('../fonts/literata.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ── Raw palette (same in both modes; roles below pick from it) ───────── */
:root {
  --p-canli: #F45B2C;        /* vivid tomato: big blocks, rings, bars (no small text) */
  --p-marka: #F97316;        /* text-bearing brand fill: espresso text on top */
  --p-marka-2: #C2410C;
  --p-parilti: #FFA066;      /* mascot cheek + confetti only (no glows) */
  --p-gunes: #FFC433;        /* sunflower: reward, highlight, current step */
  --p-gunes-2: #F2AE0B;
  --p-espresso: #2A1D18;     /* instead of navy: dark panels, device frames, footer */
  --p-espresso-3: #4A382F;
  --p-krem: #FFF6EA;         /* Tık's face */
  --p-beyaz: #FFFFFF;
  --p-uzeri-koyu: #F6ECE4;   /* body text on espresso */
  --p-uzeri-koyu-2: #C9B8AD; /* secondary text on espresso */
  --p-sikke-1: #FFE38A;      /* jeton coin */
  --p-sikke-2: #FFC433;
  --p-sikke-3: #E9A20A;
  --p-sikke-cizgi: #B87800;
  --p-sikke-yildiz: #A86E00;
  --p-cihaz-taban-1: #DAD4CE;
  --p-cihaz-taban-2: #DAD4CE;
  --p-cihaz-mentese: #B9A99E;
  --p-panel-cam: var(--p-beyaz);           /* box on a colour block: a white card (Enwa), never a tint */
  --p-panel-nokta: transparent;            /* dot texture retired (flat colour only) */
  --p-golge: 38 32 28;       /* neutral warm-grey rgb triplet for shadows */
  --p-zemin-acik: #F7F5F2;   /* neutral off-white page */
  --p-gri-50: #EFECE8;       /* the one neutral tint */
  --p-gri-100: #E6E1DB;
}

/* ── Light roles (default) ────────────────────────────────────────────── */
:root {
  --renk-zemin: var(--p-zemin-acik);
  --renk-yuzey: #FFFFFF;
  --renk-yuzey-2: var(--p-gri-50); /* neutral grey-50: quiet inset, KPI tiles */
  --renk-iz: var(--p-gri-100);   /* progress track: neutral */
  --renk-metin: #221C18;
  --renk-metin-2: #453C36;
  --renk-metin-soluk: #685F58;   /* 5.4:1 on the page */
  --renk-cizgi: #E8E3DD;         /* decorative line */
  --renk-cizgi-2: #D9D2CA;       /* stronger decorative line */
  --renk-cizgi-guclu: #8F857D;   /* control border, 3.6:1 */

  --renk-ana: #EA580C;           /* action: filled buttons (white text), links */
  --renk-ana-koyu: #C2410C;
  --renk-ana-uzeri: #FFFFFF;
  --renk-ana-hafif: #FFEDD5;     /* orange-50: the one orange tint */
  --renk-ana-canli: var(--p-canli);
  --renk-marka: var(--p-marka);  /* colour-block panels: espresso text in both modes */
  --renk-marka-uzeri: var(--p-espresso);
  --renk-parilti: var(--p-parilti);

  --renk-gunes: var(--p-gunes);
  --renk-gunes-koyu: var(--p-gunes-2);
  --renk-gunes-hafif: #FFF3D1;   /* yellow-50: the one yellow tint */
  --renk-gunes-murekkep: #8A5700;
  --renk-koyu: var(--p-espresso);
  --renk-koyu-uzeri: var(--p-uzeri-koyu);
  --renk-adacayi: var(--renk-yuzey-2);   /* sage retired: neutral grey-50 */
  --renk-adacayi-murekkep: var(--renk-koyu); /* eye family = espresso icon tile */
  --renk-pembe: var(--renk-yuzey-2);     /* blush retired: neutral grey-50 */
  --renk-cihaz: var(--p-espresso);

  --renk-basari: #3F7A1C;
  --renk-basari-zemin: #E7F2DD;
  --renk-uyari: #8A5700;
  --renk-uyari-zemin: var(--renk-gunes-hafif);
  --renk-hata: #B42318;
  --renk-hata-zemin: #FDE1E1;
  --renk-bilgi: #7A4F36;         /* warm cocoa: no blue anywhere */
  --renk-bilgi-zemin: var(--renk-yuzey-2);
  --renk-odak: #EA580C;
  --renk-perde: rgb(42 29 24 / 0.5);
  --renk-rahat: #FFF4DC;
  --select-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23685F58' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Mascot + logo parts: a sticker, same colours in both modes */
  --maskot-govde: var(--p-canli);
  --maskot-koyu: var(--p-marka-2);
  --maskot-yuz: var(--p-krem);
  --maskot-pencere: var(--p-gunes);
  --maskot-anahtar: var(--p-gunes);
  --maskot-murekkep: var(--p-espresso);
  --maskot-yanak: var(--p-parilti);
  --maskot-kurdele: var(--p-espresso);
  --maskot-parlak: var(--p-beyaz);
  --maskot-hale: var(--p-beyaz);
  --cizim-dolgu: var(--renk-ana-hafif);

  /* Two quiet neutral levels; nothing coloured, buttons flat */
  --golge-1: 0 1px 2px rgb(var(--p-golge) / 0.06);
  --golge-2: 0 1px 2px rgb(var(--p-golge) / 0.05), 0 8px 24px -8px rgb(var(--p-golge) / 0.14);
  --golge-3: var(--golge-2);
  --golge-dugme: 0 0 0 0 transparent; /* flat buttons; list-safe "none" */
  --golge-gunes: 0 0 0 0 transparent;
  --golge-maskot: drop-shadow(0 6px 6px rgb(var(--p-golge) / 0.14));
  --golge-kat: var(--golge-2);

  color-scheme: light;
}

/* ── Dark (warm, not black): system preference unless the user chose light ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --renk-zemin: #161412;
  --renk-yuzey: #211E1B;
  --renk-yuzey-2: #2A2623;
  --renk-iz: #38332F;
  --renk-metin: #FBF1EA;
  --renk-metin-2: #E8DDD5;
  --renk-metin-soluk: #C6B8AE;
  --renk-cizgi: #332E2A;
  --renk-cizgi-2: #4A443F;
  --renk-cizgi-guclu: #7F766F;
  --renk-ana: #FFB070;
  --renk-ana-koyu: #FFBC99;
  --renk-ana-uzeri: #16110E;
  --renk-ana-hafif: #3B2419;
  --renk-ana-canli: #FF7A4A;
  --renk-gunes-hafif: #3A3018;
  --renk-gunes-murekkep: #FFD382;
  --renk-adacayi-murekkep: var(--renk-metin);
  --renk-cihaz: #0E0A08;
  --renk-basari: #A8D98A;
  --renk-basari-zemin: #1F2A18;
  --renk-uyari: #FFD382;
  --renk-uyari-zemin: var(--renk-gunes-hafif);
  --renk-hata: #FF9C8F;
  --renk-hata-zemin: #472528;
  --renk-bilgi: #E8C2A8;
  --renk-bilgi-zemin: var(--renk-yuzey-2);
  --renk-odak: #FFB070;
  --renk-perde: rgb(0 0 0 / 0.6);
  --renk-rahat: #231C12;
  --select-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6B8AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --cizim-dolgu: #3B2419;
  --golge-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --golge-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.45);

  color-scheme: dark;
  }
}

/* ── Dark: explicit choice (same values as above) ─────────────────────── */
:root[data-theme="dark"] {
  --renk-zemin: #161412;
  --renk-yuzey: #211E1B;
  --renk-yuzey-2: #2A2623;
  --renk-iz: #38332F;
  --renk-metin: #FBF1EA;
  --renk-metin-2: #E8DDD5;
  --renk-metin-soluk: #C6B8AE;
  --renk-cizgi: #332E2A;
  --renk-cizgi-2: #4A443F;
  --renk-cizgi-guclu: #7F766F;
  --renk-ana: #FFB070;
  --renk-ana-koyu: #FFBC99;
  --renk-ana-uzeri: #16110E;
  --renk-ana-hafif: #3B2419;
  --renk-ana-canli: #FF7A4A;
  --renk-gunes-hafif: #3A3018;
  --renk-gunes-murekkep: #FFD382;
  --renk-adacayi-murekkep: var(--renk-metin);
  --renk-cihaz: #0E0A08;
  --renk-basari: #A8D98A;
  --renk-basari-zemin: #1F2A18;
  --renk-uyari: #FFD382;
  --renk-uyari-zemin: var(--renk-gunes-hafif);
  --renk-hata: #FF9C8F;
  --renk-hata-zemin: #472528;
  --renk-bilgi: #E8C2A8;
  --renk-bilgi-zemin: var(--renk-yuzey-2);
  --renk-odak: #FFB070;
  --renk-perde: rgb(0 0 0 / 0.6);
  --renk-rahat: #231C12;
  --select-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6B8AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --cizim-dolgu: #3B2419;
  --golge-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --golge-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.45);

  color-scheme: dark;
}

/* ── Staff: same neutral surfaces, a touch darker page in dark mode ───── */
@media (prefers-color-scheme: dark) {
  :root[data-alan="yonetim"]:not([data-theme="light"]) {
  --renk-zemin: #141210;
  }
}

:root[data-alan="yonetim"][data-theme="dark"] {
  --renk-zemin: #141210;
}

/* ── Type, space, shape, motion (ortaokul values = default) ───────────── */
:root {
  --font-baslik: 'Plus Jakarta Sans', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-ui: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-base: 1.0625rem;   /* 17px */
  --oran: 1.22;
  --text-xs: max(0.8125rem, calc(var(--text-base) / var(--oran) / var(--oran)));
  --text-sm: max(0.875rem, calc(var(--text-base) / var(--oran)));
  --text-lg: calc(var(--text-base) * var(--oran));
  --text-xl: calc(var(--text-lg) * var(--oran));
  --text-2xl: calc(var(--text-xl) * var(--oran));
  --text-3xl: calc(var(--text-2xl) * var(--oran));
  --text-4xl: calc(var(--text-3xl) * var(--oran));
  --text-dev: clamp(2.25rem, 4vw, 3.5rem); /* hero headline */

  --agirlik-normal: 400;
  --agirlik-orta: 600;
  --agirlik-kalin: 700;
  --agirlik-baslik: 800;
  --harf-baslik: -0.02em;

  --satir-ui: 1.55;
  --satir-baslik: 1.15;

  /* Reading text (.okuma, the exercise stage) */
  --okuma-font: var(--font-serif);
  --okuma-boyut: 1.25rem;   /* 20px */
  --okuma-olcu: 60ch;
  --okuma-satir: 1.7;
  --okuma-harf: normal;
  --okuma-kelime: normal;
  --okuma-zemin: var(--renk-yuzey);

  --space-0: 0;
  --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-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 12px;        /* controls, small tiles */
  --radius-md: 20px;        /* cards */
  --radius-lg: 24px;        /* panels, big cards */
  --radius-xl: 32px;        /* hero stage, auth art, result card */
  --radius-dugme: 999px;    /* buttons are pills (staff: rounded rectangles) */
  --radius-full: 999px;
  --touch-target-min: 48px;
  --ikon-cizgi: 2;
  --kenar: 1px;
  --kenar-kontrol: 1.5px;
  --kenar-kalin: 2px;
  --kenar-vurgu: 4px;
  --odak-halka: 3px;
  --odak-bosluk: 3px;
  --sekme-cizgi: 3px;
  --tik-genislik: 1rem;     /* one step of the progress trail */
  --tik-aralik: 4px;
  --tik-radius: 4px;

  --sure-kisa: 160ms;
  --sure-orta: 220ms;
  --sure-uzun: 300ms;
  --sure-giris: 800ms;      /* entrance reveal */
  --sure-sayi: 1200ms;      /* count-up, ring fill */
  --egri: cubic-bezier(0.23, 1, 0.32, 1);        /* ease-out */
  --egri-io: cubic-bezier(0.77, 0, 0.175, 1);
  --basma-olcek: 0.97;      /* press feedback */
  --kaldirma: -4px;         /* hover lift */
  --giris-kayma: 28px;      /* entrance offset */

  --kap-genislik: 75rem;    /* 1200px */
  --kap-dar: 40rem;
  --ust-bar-yukseklik: 72px;
  --ust-bar-dar: 60px;      /* staff bar, student bar on mobile */
  --sekme-cubugu-yukseklik: 64px;
  --odak-cubugu-yukseklik: 52px;
  --yan-menu-genislik: 15.5rem;
  --tablo-satir: 44px;
  --maskot-boyut-varsayilan: 7.5rem;

  --z-ust: 50;
  --z-menu: 60;
  --z-perde: 70;
  --z-bildirim: 80;

  /* Where Tık and spot illustrations may appear (display values) */
  --maskot-panel: block;    /* home greeting, onboarding */
  --maskot-bos: block;      /* empty states */
  --maskot-kutlama: block;  /* milestones, result, 404 */
  --cizim-kart: none;       /* spot art on cards */
  --cizim-bos: block;       /* spot art in empty states */
  --ikon-bos: none;         /* icon disc used when the mascot is off */
  --panel-desen: 0;         /* retired: colour blocks are flat */
  --maskot-hareket: running; /* idle blink + key wind */
}

/* İlkokul (grade 4): warmer, bigger, rounder, Tık everywhere it may be */
:root[data-yas="ilkokul"] {
  --text-base: 1.125rem;    /* 18px */
  --oran: 1.25;
  --text-xs: 0.875rem;      /* 14px floor: tab labels stay readable for 9-year-olds */
  --okuma-font: var(--font-ui);
  --okuma-boyut: 1.375rem;  /* 22px */
  --okuma-olcu: 52ch;
  --okuma-satir: 1.75;
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --touch-target-min: 52px;
  --ikon-cizgi: 2.25;
  --cizim-kart: block;
}

/* Lise: calmer. Same brand, tighter radii, no mascot outside celebrations */
:root[data-yas="lise"] {
  --text-base: 1rem;        /* 16px */
  --oran: 1.2;
  --okuma-boyut: 1.1875rem; /* 19px */
  --okuma-olcu: 66ch;
  --okuma-satir: 1.65;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --touch-target-min: 44px;
  --ikon-cizgi: 1.75;
  --maskot-panel: none;
  --maskot-bos: none;
  --cizim-bos: none;
  --ikon-bos: flex;
  --panel-desen: 0;
  --giris-kayma: 16px;
}

/* Staff: efficient and calm. No mascot, no spot art, rounded rectangles */
:root[data-alan="yonetim"] {
  --text-base: 0.9375rem;   /* 15px */
  --oran: 1.2;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-dugme: 10px;
  --touch-target-min: 44px;
  --ikon-cizgi: 1.75;
  --tablo-satir: 40px;
  --maskot-panel: none;
  --maskot-bos: none;
  --maskot-kutlama: none;
  --cizim-bos: none;
  --ikon-bos: flex;
  --panel-desen: 0;
  --ust-bar-yukseklik: 60px;
}

/* Rahat okuma: calmer, roomier reading text for struggling readers */
:root[data-rahat="acik"] {
  --okuma-font: var(--font-ui);
  --okuma-boyut: calc(1.25rem * 1.15);
  --okuma-olcu: 50ch;
  --okuma-satir: 2;
  --okuma-harf: 0.05em;
  --okuma-kelime: 0.16em;
  --okuma-zemin: var(--renk-rahat);
}

:root[data-rahat="acik"][data-yas="ilkokul"] {
  --okuma-boyut: calc(1.375rem * 1.15);
}

:root[data-rahat="acik"][data-yas="lise"] {
  --okuma-boyut: calc(1.1875rem * 1.15);
}

@media (pointer: coarse) {
  :root[data-alan="yonetim"] {
    --tablo-satir: 44px;
  }
}

/* Phones: 16px base so iOS does not zoom into staff form fields */
@media (max-width: 47.99rem) {
  :root[data-alan="yonetim"] {
    --text-base: 1rem;
  }

  :root {
    --ust-bar-yukseklik: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sure-kisa: 0ms;
    --sure-orta: 0ms;
    --sure-uzun: 0ms;
    --sure-giris: 0ms;
    --sure-sayi: 0ms;
    --basma-olcek: 1;
    --kaldirma: 0;
    --giris-kayma: 0;
    --maskot-hareket: paused;
  }
}

/* ── Tempo names kept as aliases (module CSS still uses them) ─────────── */
:root {
  --renk-pirinc: var(--renk-gunes);
  --renk-pirinc-murekkep: var(--renk-gunes-murekkep);
  --renk-pirinc-hafif: var(--renk-gunes-hafif);
  --marka-pirinc: var(--renk-gunes);
  --maskot-cizgi: var(--maskot-murekkep);
  --maskot-pirinc: var(--maskot-anahtar);
}

/* ── Legacy names: module CSS still uses these until it migrates ──────── */
:root {
  --color-bg-canvas: var(--renk-zemin);
  --color-bg-surface: var(--renk-yuzey);
  --color-bg-elevated: var(--renk-yuzey);
  --color-bg-subtle: var(--renk-yuzey-2);
  --color-bg-muted: var(--renk-yuzey-2);
  --color-text-primary: var(--renk-metin);
  --color-text-secondary: var(--renk-metin-2);
  --color-text-tertiary: var(--renk-metin-soluk);
  --color-text-inverse: var(--renk-ana-uzeri);
  --color-success: var(--renk-basari);
  --color-success-bg: var(--renk-basari-zemin);
  --color-success-border: var(--renk-basari);
  --color-success-hover: var(--renk-basari);
  --color-error: var(--renk-hata);
  --color-error-bg: var(--renk-hata-zemin);
  --color-error-border: var(--renk-hata);
  --color-warning: var(--renk-uyari);
  --color-warning-bg: var(--renk-uyari-zemin);
  --color-warning-border: var(--renk-uyari);
  --color-info: var(--renk-bilgi);
  --color-info-bg: var(--renk-bilgi-zemin);
  --color-info-border: var(--renk-bilgi);
  --color-accent-primary: var(--renk-ana);
  --color-accent-hover: var(--renk-ana-koyu);
  --color-accent-active: var(--renk-ana-koyu);
  --color-accent-subtle: var(--renk-ana-hafif);
  --color-accent-light: var(--renk-ana-hafif);
  --color-secondary-teal: var(--renk-adacayi-murekkep); /* no teal left: the sage ink */
  --color-secondary-purple: var(--renk-koyu);
  --color-secondary-coral: var(--renk-ana-canli);
  --color-border-strong: var(--renk-cizgi-2);
  --color-border-medium: var(--renk-cizgi);
  --color-border-weak: var(--renk-cizgi);
  --color-border-focus: var(--renk-odak);
  --color-overlay: var(--renk-perde);
  --shadow-sm: var(--golge-1);
  --shadow-md: var(--golge-1);
  --shadow-lg: var(--golge-2);
  --shadow-xl: var(--golge-3);
  --shadow-shelf: none;
  --shadow-pressed: none;
  --depth-shelf: 0;
  --lift: 0;
  --focus-ring: 0 0 0 3px var(--renk-odak);
  --font-display: var(--font-baslik);
  --font-body: var(--font-ui);
  --weight-light: 400;
  --weight-normal: 400;
  --weight-medium: 600;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --text-5xl: var(--text-4xl);
  --text-6xl: var(--text-4xl);
  --lh-tight: var(--satir-baslik);
  --lh-normal: var(--satir-ui);
  --lh-relaxed: 1.6;
  --lh-loose: 1.9;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;
  --radius-2xl: var(--radius-xl);
  --border-thick: var(--kenar-kalin);
  --border-accent: var(--kenar-vurgu);
  --transition-fast: var(--sure-kisa) var(--egri);
  --transition-normal: var(--sure-orta) var(--egri);
  --transition-slow: var(--sure-uzun) var(--egri);
  --touch-target-comfortable: calc(var(--touch-target-min) + 8px);
  --btn-sm-height: var(--touch-target-min);
  --btn-lg-height: calc(var(--touch-target-min) + 8px);
  --progress-height: 10px;
  --badge-count-min: 1.25rem;
  --textarea-min: 7.5rem;
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-max: var(--kap-genislik);
  --auth-max: 28rem;
  --z-dropdown: var(--z-menu);
  --z-tooltip: var(--z-bildirim);
  --z-toast: var(--z-bildirim);
}