/* Sayfa arka planı (Ekim 2026, İse Atölye tanıtım videosundaki gibi): nokta ızgara, köşelerde yumuşak mavi parıltılar,
   ortadan yavaşça akan ince mavi dalga çizgileri. Ekrana sabit, içerikle kaymaz; yalnızca transform ile oynar (telefonda akıcı).
   inc/header.php'deki .page-bg: ::before = parıltı + noktalar, ::after = dalgalar. Hareket azaltma açıksa dalgalar durur. */

:root {
  --bg-dots: rgba(17, 17, 17, 0.07);
  --bg-glow-1: rgba(0, 136, 255, 0.07);
  --bg-glow-2: rgba(0, 170, 200, 0.06);
  --bg-glow-3: rgba(70, 90, 230, 0.07);
  --bg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='420' viewBox='0 0 1440 420' fill='none' stroke='%230088ff' stroke-width='1.2'%3E%3Cpath d='M0 141.2 L24 146.7 L48 151.5 L72 155.3 L96 158.1 L120 160.0 L144 161.0 L168 161.1 L192 160.4 L216 158.9 L240 156.9 L264 154.4 L288 151.5 L312 148.3 L336 145.0 L360 141.7 L384 138.5 L408 135.4 L432 132.4 L456 129.7 L480 127.2 L504 124.9 L528 122.7 L552 120.7 L576 118.7 L600 116.7 L624 114.5 L648 112.2 L672 109.7 L696 106.9 L720 103.8 L744 100.3 L768 96.5 L792 92.4 L816 88.0 L840 83.4 L864 78.8 L888 74.1 L912 69.6 L936 65.4 L960 61.6 L984 58.4 L1008 55.8 L1032 54.1 L1056 53.2 L1080 53.3 L1104 54.5 L1128 56.7 L1152 59.9 L1176 64.1 L1200 69.3 L1224 75.3 L1248 82.0 L1272 89.3 L1296 97.0 L1320 104.8 L1344 112.7 L1368 120.5 L1392 127.9 L1416 134.9 L1440 141.2' stroke-opacity='0.22'/%3E%3Cpath d='M0 255.5 L24 253.9 L48 251.6 L72 248.6 L96 244.8 L120 240.2 L144 234.8 L168 228.8 L192 222.1 L216 214.8 L240 207.1 L264 199.1 L288 190.9 L312 182.7 L336 174.6 L360 166.7 L384 159.3 L408 152.5 L432 146.3 L456 141.0 L480 136.7 L504 133.3 L528 131.0 L552 129.7 L576 129.6 L600 130.5 L624 132.4 L648 135.3 L672 139.0 L696 143.4 L720 148.5 L744 154.0 L768 160.0 L792 166.1 L816 172.5 L840 178.8 L864 185.0 L888 191.1 L912 197.0 L936 202.6 L960 207.8 L984 212.8 L1008 217.4 L1032 221.7 L1056 225.6 L1080 229.3 L1104 232.7 L1128 235.9 L1152 238.9 L1176 241.7 L1200 244.4 L1224 246.8 L1248 249.1 L1272 251.2 L1296 253.0 L1320 254.5 L1344 255.7 L1368 256.4 L1392 256.7 L1416 256.4 L1440 255.5' stroke-opacity='0.16'/%3E%3Cpath d='M0 278.0 L24 272.4 L48 266.9 L72 261.7 L96 257.0 L120 253.0 L144 249.7 L168 247.2 L192 245.8 L216 245.5 L240 246.2 L264 248.1 L288 251.0 L312 255.0 L336 259.9 L360 265.6 L384 271.9 L408 278.8 L432 285.9 L456 293.1 L480 300.2 L504 307.1 L528 313.6 L552 319.5 L576 324.7 L600 329.1 L624 332.7 L648 335.4 L672 337.3 L696 338.3 L720 338.5 L744 338.1 L768 337.0 L792 335.5 L816 333.6 L840 331.5 L864 329.4 L888 327.2 L912 325.2 L936 323.4 L960 321.8 L984 320.5 L1008 319.5 L1032 318.8 L1056 318.2 L1080 317.9 L1104 317.6 L1128 317.3 L1152 316.9 L1176 316.2 L1200 315.3 L1224 313.8 L1248 311.9 L1272 309.5 L1296 306.5 L1320 302.9 L1344 298.7 L1368 294.0 L1392 288.9 L1416 283.5 L1440 278.0' stroke-opacity='0.12'/%3E%3C/svg%3E");
  --bg-tile: 1440px;
}
:root[data-theme='dark'] {
  --bg-dots: rgba(233, 238, 243, 0.075);
  --bg-glow-1: rgba(0, 120, 255, 0.16);
  --bg-glow-2: rgba(0, 150, 190, 0.12);
  --bg-glow-3: rgba(80, 80, 220, 0.2);
  --bg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='420' viewBox='0 0 1440 420' fill='none' stroke='%232f8fff' stroke-width='1.2'%3E%3Cpath d='M0 141.2 L24 146.7 L48 151.5 L72 155.3 L96 158.1 L120 160.0 L144 161.0 L168 161.1 L192 160.4 L216 158.9 L240 156.9 L264 154.4 L288 151.5 L312 148.3 L336 145.0 L360 141.7 L384 138.5 L408 135.4 L432 132.4 L456 129.7 L480 127.2 L504 124.9 L528 122.7 L552 120.7 L576 118.7 L600 116.7 L624 114.5 L648 112.2 L672 109.7 L696 106.9 L720 103.8 L744 100.3 L768 96.5 L792 92.4 L816 88.0 L840 83.4 L864 78.8 L888 74.1 L912 69.6 L936 65.4 L960 61.6 L984 58.4 L1008 55.8 L1032 54.1 L1056 53.2 L1080 53.3 L1104 54.5 L1128 56.7 L1152 59.9 L1176 64.1 L1200 69.3 L1224 75.3 L1248 82.0 L1272 89.3 L1296 97.0 L1320 104.8 L1344 112.7 L1368 120.5 L1392 127.9 L1416 134.9 L1440 141.2' stroke-opacity='0.42'/%3E%3Cpath d='M0 255.5 L24 253.9 L48 251.6 L72 248.6 L96 244.8 L120 240.2 L144 234.8 L168 228.8 L192 222.1 L216 214.8 L240 207.1 L264 199.1 L288 190.9 L312 182.7 L336 174.6 L360 166.7 L384 159.3 L408 152.5 L432 146.3 L456 141.0 L480 136.7 L504 133.3 L528 131.0 L552 129.7 L576 129.6 L600 130.5 L624 132.4 L648 135.3 L672 139.0 L696 143.4 L720 148.5 L744 154.0 L768 160.0 L792 166.1 L816 172.5 L840 178.8 L864 185.0 L888 191.1 L912 197.0 L936 202.6 L960 207.8 L984 212.8 L1008 217.4 L1032 221.7 L1056 225.6 L1080 229.3 L1104 232.7 L1128 235.9 L1152 238.9 L1176 241.7 L1200 244.4 L1224 246.8 L1248 249.1 L1272 251.2 L1296 253.0 L1320 254.5 L1344 255.7 L1368 256.4 L1392 256.7 L1416 256.4 L1440 255.5' stroke-opacity='0.3'/%3E%3Cpath d='M0 278.0 L24 272.4 L48 266.9 L72 261.7 L96 257.0 L120 253.0 L144 249.7 L168 247.2 L192 245.8 L216 245.5 L240 246.2 L264 248.1 L288 251.0 L312 255.0 L336 259.9 L360 265.6 L384 271.9 L408 278.8 L432 285.9 L456 293.1 L480 300.2 L504 307.1 L528 313.6 L552 319.5 L576 324.7 L600 329.1 L624 332.7 L648 335.4 L672 337.3 L696 338.3 L720 338.5 L744 338.1 L768 337.0 L792 335.5 L816 333.6 L840 331.5 L864 329.4 L888 327.2 L912 325.2 L936 323.4 L960 321.8 L984 320.5 L1008 319.5 L1032 318.8 L1056 318.2 L1080 317.9 L1104 317.6 L1128 317.3 L1152 316.9 L1176 316.2 L1200 315.3 L1224 313.8 L1248 311.9 L1272 309.5 L1296 306.5 L1320 302.9 L1344 298.7 L1368 294.0 L1392 288.9 L1416 283.5 L1440 278.0' stroke-opacity='0.22'/%3E%3C/svg%3E");
}

html { background: var(--bg); }
body { background: transparent; }
.page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.page-bg::before, .page-bg::after { content: ''; position: absolute; }
.page-bg::before {
  inset: 0;
  background:
    radial-gradient(1.4px 1.4px at 50% 50%, var(--bg-dots) 99%, transparent) 0 0 / 54px 54px,
    radial-gradient(60vmax 45vmax at 100% 0%, var(--bg-glow-2), transparent 70%),
    radial-gradient(55vmax 40vmax at 0% 48%, var(--bg-glow-1), transparent 70%),
    radial-gradient(60vmax 50vmax at 100% 100%, var(--bg-glow-3), transparent 70%);
}
.page-bg::after {
  left: 0; top: 52%; width: calc(100% + var(--bg-tile)); height: 420px;
  background: var(--bg-wave) 0 0 / var(--bg-tile) 420px repeat-x;
  will-change: transform;
  animation: bg-wave 70s linear infinite;
}
@keyframes bg-wave { to { transform: translate3d(calc(-1 * var(--bg-tile)), 0, 0); } }
@media (max-width: 760px) {
  :root { --bg-tile: 1000px; }
  .page-bg::before { background-size: 40px 40px, auto, auto, auto; }
  .page-bg::after { top: 48%; height: 300px; background-size: var(--bg-tile) 300px; animation-duration: 55s; }
}
@media (prefers-reduced-motion: reduce) { .page-bg::after { animation: none; } }
@media print { .page-bg { display: none; } }