:root {
  --font-display: "Epilogue", "Segoe UI", sans-serif;
  --font-sans: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --site-max: 1240px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  --space-10: 112px;
  --radius-xs: 10px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --border-thin: 1px;
  --border-thick: 1px;
  --shadow-offset: 0px;
  --shadow-offset-lg: 0px;
  --shadow-brutal: 0 18px 40px rgba(15, 23, 42, 0.14);
  --shadow-brutal-lg: 0 30px 80px rgba(15, 23, 42, 0.18);
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;
}

body,
body.theme-navy,
body.theme-emerald,
body.theme-safir,
body.theme-beyaz-saf,
body.theme-desenli,
body.theme-petekli,
body.theme-kehribar,
body.theme-okyanus,
body.theme-zeytin,
body.theme-kum,
body.theme-siyah-fon,
body.theme-teknolojik,
body.theme-burgundy {
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --accent: #7dd3fc;
  --accent-2: #38bdf8;
  --surface: #f8fbff;
  --surface-2: #edf4ff;
  --surface-3: #ffffff;
  --surface-dark: #0f172a;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --border-1: rgba(148, 163, 184, 0.22);
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(125, 211, 252, 0.14), transparent 20%),
    linear-gradient(180deg, #f9fbff 0%, #eff5ff 100%);
  --glow-1: rgba(37, 99, 235, 0.16);
  --glow-2: rgba(125, 211, 252, 0.16);
  --card-bg: rgba(255, 255, 255, 0.88);
  --bg-1: #f8fbff;
  --bg-2: #edf4ff;
  --bg-3: #dbeafe;
  --surface-rgb: 248, 251, 255;
  --surface-2-rgb: 237, 244, 255;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 37, 99, 235;
  --accent-rgb: 125, 211, 252;
}

body.theme-navy {
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --accent: #7dd3fc;
  --accent-2: #60a5fa;
  --surface: #f8fbff;
  --surface-2: #edf4ff;
  --surface-3: #ffffff;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --bg-3: #dbeafe;
  --primary-rgb: 37, 99, 235;
  --accent-rgb: 125, 211, 252;
}

body.theme-emerald {
  --primary: #0f9f6e;
  --primary-strong: #0b7d57;
  --accent: #7ce8b8;
  --accent-2: #38bdf8;
  --surface: #f6fffb;
  --surface-2: #e8fbf3;
  --surface-3: #ffffff;
  --text-1: #0f172a;
  --text-2: #365b52;
  --text-3: #5b7c74;
  --bg-3: #d5f5e7;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(15, 159, 110, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(124, 232, 184, 0.16), transparent 20%),
    linear-gradient(180deg, #f6fffb 0%, #ecfbf5 100%);
  --surface-rgb: 246, 255, 251;
  --surface-2-rgb: 232, 251, 243;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 15, 159, 110;
  --accent-rgb: 124, 232, 184;
}

body.theme-safir {
  --primary: #1d4ed8;
  --primary-strong: #1e40af;
  --accent: #67e8f9;
  --accent-2: #60a5fa;
  --surface: #f7faff;
  --surface-2: #eaf1ff;
  --surface-3: #ffffff;
  --text-1: #0f172a;
  --text-2: #415274;
  --text-3: #667792;
  --bg-3: #dbe7ff;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(29, 78, 216, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(103, 232, 249, 0.14), transparent 20%),
    linear-gradient(180deg, #f7faff 0%, #edf3ff 100%);
  --surface-rgb: 247, 250, 255;
  --surface-2-rgb: 234, 241, 255;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 29, 78, 216;
  --accent-rgb: 103, 232, 249;
}

body.theme-beyaz-saf {
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --accent: #7dd3fc;
  --accent-2: #60a5fa;
  --surface: #f8fbff;
  --surface-2: #edf4ff;
  --surface-3: #ffffff;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --bg-3: #dbeafe;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(125, 211, 252, 0.14), transparent 20%),
    linear-gradient(180deg, #f9fbff 0%, #eff5ff 100%);
  --surface-rgb: 248, 251, 255;
  --surface-2-rgb: 237, 244, 255;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 37, 99, 235;
  --accent-rgb: 125, 211, 252;
}

body.theme-desenli {
  --primary: #2957d3;
  --primary-strong: #1d3f9f;
  --accent: #d9d2c3;
  --accent-2: #88a0d8;
  --surface: #f7f3eb;
  --surface-2: #efe9dd;
  --surface-3: #fffdf8;
  --surface-dark: #273044;
  --text-1: #1d2433;
  --text-2: #5f6778;
  --text-3: #7a8191;
  --bg-3: #e8e0d1;
  --border-1: rgba(106, 116, 138, 0.22);
  --hero-grad:
    radial-gradient(circle at 14% 18%, rgba(136, 160, 216, 0.14), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(217, 210, 195, 0.18), transparent 22%),
    linear-gradient(180deg, #fcf8f1 0%, #f3ecdf 100%);
  --glow-1: rgba(136, 160, 216, 0.14);
  --glow-2: rgba(217, 210, 195, 0.18);
  --card-bg: rgba(255, 253, 248, 0.9);
  --surface-rgb: 247, 243, 235;
  --surface-2-rgb: 239, 233, 221;
  --surface-3-rgb: 255, 253, 248;
  --primary-rgb: 41, 87, 211;
  --accent-rgb: 217, 210, 195;
}

body.theme-petekli {
  --primary: #3b5bcc;
  --primary-strong: #23429b;
  --accent: #d7cfbf;
  --accent-2: #8ea4d7;
  --surface: #f8f4ec;
  --surface-2: #f1ebdf;
  --surface-3: #fffdf8;
  --surface-dark: #283246;
  --text-1: #1c2434;
  --text-2: #5b6477;
  --text-3: #7c8494;
  --bg-3: #e9e1d4;
  --border-1: rgba(110, 123, 149, 0.22);
  --hero-grad:
    radial-gradient(circle at 14% 18%, rgba(142, 164, 215, 0.12), transparent 22%),
    radial-gradient(circle at 84% 14%, rgba(215, 207, 191, 0.16), transparent 22%),
    linear-gradient(180deg, #fdf9f2 0%, #f4eee2 100%);
  --glow-1: rgba(142, 164, 215, 0.12);
  --glow-2: rgba(215, 207, 191, 0.16);
  --card-bg: rgba(255, 253, 248, 0.92);
  --surface-rgb: 248, 244, 236;
  --surface-2-rgb: 241, 235, 223;
  --surface-3-rgb: 255, 253, 248;
  --primary-rgb: 59, 91, 204;
  --accent-rgb: 215, 207, 191;
}

body.theme-kehribar {
  --primary: #d97706;
  --primary-strong: #b45309;
  --accent: #fde68a;
  --accent-2: #fb923c;
  --surface: #fffaf5;
  --surface-2: #fff2e4;
  --surface-3: #ffffff;
  --text-1: #1f2937;
  --text-2: #6b4c2f;
  --text-3: #8c6a47;
  --bg-3: #ffe3bf;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(217, 119, 6, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(253, 230, 138, 0.16), transparent 20%),
    linear-gradient(180deg, #fffaf5 0%, #fff4e8 100%);
  --surface-rgb: 255, 250, 245;
  --surface-2-rgb: 255, 242, 228;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 217, 119, 6;
  --accent-rgb: 253, 230, 138;
}

body.theme-okyanus {
  --primary: #0891b2;
  --primary-strong: #0e7490;
  --accent: #7dd3fc;
  --accent-2: #2dd4bf;
  --surface: #f5fdff;
  --surface-2: #e6f9fd;
  --surface-3: #ffffff;
  --text-1: #0f172a;
  --text-2: #355a65;
  --text-3: #5a7e88;
  --bg-3: #d5f2fb;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(8, 145, 178, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(45, 212, 191, 0.14), transparent 20%),
    linear-gradient(180deg, #f5fdff 0%, #ebfbff 100%);
  --surface-rgb: 245, 253, 255;
  --surface-2-rgb: 230, 249, 253;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 8, 145, 178;
  --accent-rgb: 125, 211, 252;
}

body.theme-zeytin {
  --primary: #6b8f24;
  --primary-strong: #55711d;
  --accent: #d9f99d;
  --accent-2: #84cc16;
  --surface: #fbfef6;
  --surface-2: #f1f8e4;
  --surface-3: #ffffff;
  --text-1: #17210f;
  --text-2: #556149;
  --text-3: #74826a;
  --bg-3: #e4f0cb;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(107, 143, 36, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(217, 249, 157, 0.16), transparent 20%),
    linear-gradient(180deg, #fbfef6 0%, #f4f9ea 100%);
  --surface-rgb: 251, 254, 246;
  --surface-2-rgb: 241, 248, 228;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 107, 143, 36;
  --accent-rgb: 217, 249, 157;
}

body.theme-kum {
  --primary: #b77947;
  --primary-strong: #8d5b34;
  --accent: #fcd9b8;
  --accent-2: #f59e0b;
  --surface: #fffaf6;
  --surface-2: #f9eee3;
  --surface-3: #ffffff;
  --text-1: #1f2937;
  --text-2: #6d5847;
  --text-3: #8e7764;
  --bg-3: #f3ddc7;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(183, 121, 71, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(252, 217, 184, 0.16), transparent 20%),
    linear-gradient(180deg, #fffaf6 0%, #f8f0e7 100%);
  --surface-rgb: 255, 250, 246;
  --surface-2-rgb: 249, 238, 227;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 183, 121, 71;
  --accent-rgb: 252, 217, 184;
}

body.theme-siyah-fon {
  --primary: #8fb3ff;
  --primary-strong: #5b86e5;
  --accent: #7be0d6;
  --accent-2: #9ca3af;
  --surface: #12161d;
  --surface-2: #1a1f28;
  --surface-3: #232936;
  --surface-dark: #090c11;
  --text-1: #f3f6fb;
  --text-2: #c5cedd;
  --text-3: #95a2b8;
  --bg-3: #0f1319;
  --border-1: rgba(148, 163, 184, 0.18);
  --hero-grad:
    radial-gradient(circle at 14% 18%, rgba(143, 179, 255, 0.18), transparent 22%),
    radial-gradient(circle at 84% 14%, rgba(123, 224, 214, 0.12), transparent 24%),
    linear-gradient(180deg, #12161d 0%, #171c24 100%);
  --glow-1: rgba(143, 179, 255, 0.18);
  --glow-2: rgba(123, 224, 214, 0.12);
  --card-bg: rgba(35, 41, 54, 0.88);
  --surface-rgb: 18, 22, 29;
  --surface-2-rgb: 26, 31, 40;
  --surface-3-rgb: 35, 41, 54;
  --primary-rgb: 143, 179, 255;
  --accent-rgb: 123, 224, 214;
}

body.theme-teknolojik {
  --primary: #6ee7ff;
  --primary-strong: #38bdf8;
  --accent: #8b9dff;
  --accent-2: #22d3ee;
  --surface: #0a0f16;
  --surface-2: #121a24;
  --surface-3: #1b2633;
  --surface-dark: #05080d;
  --text-1: #ecf6ff;
  --text-2: #b8c7d9;
  --text-3: #7f92aa;
  --bg-3: #070b10;
  --border-1: rgba(125, 163, 196, 0.18);
  --hero-grad:
    radial-gradient(circle at 14% 18%, rgba(110, 231, 255, 0.18), transparent 22%),
    radial-gradient(circle at 84% 14%, rgba(139, 157, 255, 0.16), transparent 24%),
    linear-gradient(180deg, #0a0f16 0%, #111823 100%);
  --glow-1: rgba(110, 231, 255, 0.18);
  --glow-2: rgba(139, 157, 255, 0.16);
  --card-bg: rgba(27, 38, 51, 0.86);
  --surface-rgb: 10, 15, 22;
  --surface-2-rgb: 18, 26, 36;
  --surface-3-rgb: 27, 38, 51;
  --primary-rgb: 110, 231, 255;
  --accent-rgb: 139, 157, 255;
}

body.theme-burgundy {
  --primary: #b83280;
  --primary-strong: #97266d;
  --accent: #f9a8d4;
  --accent-2: #fb7185;
  --surface: #fff8fb;
  --surface-2: #fdeef5;
  --surface-3: #ffffff;
  --text-1: #1f1721;
  --text-2: #6f4a62;
  --text-3: #91687f;
  --bg-3: #f8d8e9;
  --hero-grad:
    radial-gradient(circle at 12% 18%, rgba(184, 50, 128, 0.12), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(249, 168, 212, 0.16), transparent 20%),
    linear-gradient(180deg, #fff8fb 0%, #fdf0f6 100%);
  --surface-rgb: 255, 248, 251;
  --surface-2-rgb: 253, 238, 245;
  --surface-3-rgb: 255, 255, 255;
  --primary-rgb: 184, 50, 128;
  --accent-rgb: 249, 168, 212;
}