:root {
      --bg-image: url("resim.jpg");
      --glass-bg: rgba(255,255,255,0.10);
      --glass-border: rgba(255,255,255,0.25);
      --text-main: #ffffff;
      --text-sub: rgba(255,255,255,0.85);
      --btn-primary: #ffffff;
      --btn-primary-text: #0b1220;
      --btn-secondary: rgba(255,255,255,0.1);
      --btn-secondary-text: #ffffff;
      --focus: 2px solid rgba(255,255,255,0.8);
      --m-light: #00AEEF;
      --m-dark: #00285E;
      --m-red: #E50A14;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text-main);
      background: #0b1220;
    }

    .page {
      position: relative;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      overflow: hidden;
      isolation: isolate;
    }

    .bg {
      position: absolute; inset: 0; z-index: -3;
      background-image: var(--bg-image);
      background-size: cover; background-position: center;
      filter: saturate(1.1);
      transform: scale(1.02);
    }

    .overlay { 
      position: absolute; inset: 0; z-index: -2;
      background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.30) 40%, rgba(0,0,0,0.65));
    }

    .blur { 
      position: absolute; inset: 0; z-index: -1;
      backdrop-filter: blur(2px);
    }

    .brand {
      display: inline-flex; align-items: center; gap: 12px;
      color: var(--text-sub);
      margin-bottom: 6px;
      letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px;
    }

    h1 {
      margin: 0 0 10px; font-weight: 650;
      font-size: clamp(28px, 4vw, 48px);
      letter-spacing: -0.015em;
    }
    .m-bmw { display: inline-flex; gap: 0.06em; }
    .m-bmw .m-b { color: var(--m-light); text-shadow: 0 2px 10px rgba(0,174,239,0.35); }
    .m-bmw .m-m { color: var(--m-dark); text-shadow: 0 2px 10px rgba(0,40,94,0.35); }
    .m-bmw .m-w { color: var(--m-red);  text-shadow: 0 2px 10px rgba(229,10,20,0.35); }
    p.lead {
      margin: 0 auto; max-width: 42ch;
      color: var(--text-sub);
      font-size: clamp(15px, 1.8vw, 18px);
    }

    .actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
    @media (min-width: 520px) { .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 10px; width: 100%;
      border-radius: 16px; padding: 14px 20px;
      font-size: 16px; font-weight: 600; text-decoration: none;
      transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
      will-change: transform;
      outline: none; border: 0;
      cursor: pointer;
    }

    .btn:focus-visible { outline: var(--focus); outline-offset: 3px; }

    .btn-primary { background: var(--btn-primary); color: var(--btn-primary-text); box-shadow: 0 8px 20px rgba(255,255,255,0.18); }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255,255,255,0.22); }
    .btn-primary:active { transform: translateY(0); }

    .btn-secondary { background: var(--btn-secondary); color: var(--btn-secondary-text); border: 1px solid rgba(255,255,255,0.28); }
    .btn-secondary:hover { background: rgba(255,255,255,0.18); }

    .status { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.7); }
    .glowTL, .glowBR {
      position: absolute; width: 360px; height: 360px; border-radius: 999px; filter: blur(80px); pointer-events: none; z-index: -1;
    }
    .glowTL { top: -120px; left: -120px; background: rgba(56,189,248,0.22); }
    .glowBR { bottom: -120px; right: -120px; background: rgba(103,232,249,0.18); }