:root{
      --base: #AE3C46;
      --bg: #0b0b10;

      --base-soft: color-mix(in oklab, var(--base) 70%, #ff9aa2 30%);
      --base-dark: color-mix(in oklab, var(--base) 70%, #2a0f18 30%);
      --plum: #2a0f2a;
    }

    html, body { height: 100%; }
    body{
      margin:0;
      width:100%;
      height:100%;
      overflow:hidden;
      display:flex;
      align-items:center;
      align-content:safe center;
      justify-content:center;
      flex-wrap:wrap;

      background: var(--bg);
      color:#fff;
      text-align:center;

      font-family:"grange-condensed", sans-serif;
      position:relative;
      isolation:isolate;
      user-select: none;
    }

    /* --- Background --- */
    .bg{
      position:fixed; inset:0; z-index:-3;
      background:
        radial-gradient(1100px 800px at 12% 12%, color-mix(in oklab, var(--base-soft) 45%, transparent 55%), transparent 62%),
        radial-gradient(900px 700px at 88% 20%,  color-mix(in oklab, var(--base) 35%, transparent 65%), transparent 60%),
        radial-gradient(900px 900px at 70% 92%,  color-mix(in oklab, var(--base-dark) 50%, transparent 50%), transparent 66%),
        radial-gradient(1100px 900px at 18% 88%, color-mix(in oklab, var(--plum) 45%, transparent 55%), transparent 68%),
        linear-gradient(120deg,
          color-mix(in oklab, var(--plum) 85%, #05050a 15%),
          color-mix(in oklab, var(--base-dark) 70%, #0b0b10 30%),
          color-mix(in oklab, var(--base) 60%, #0b0b10 40%),
          color-mix(in oklab, var(--base-soft) 55%, #0b0b10 45%)
        );
      background-size: 140% 140%;
      filter: saturate(1.05) contrast(1.05);
      animation: gradientShift 16s ease-in-out infinite;
    }
    @keyframes gradientShift{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

    .aurora{ position:fixed; inset:-20%; z-index:-2; filter:blur(38px); opacity:.75; pointer-events:none; }
    .blob{
      position:absolute; width:55vmax; height:55vmax; border-radius:50%;
      mix-blend-mode:screen;
      animation: floaty 18s ease-in-out infinite;
      background: radial-gradient(circle at 30% 30%,
        color-mix(in oklab, var(--base-soft) 55%, transparent 45%),
        color-mix(in oklab, var(--base) 45%, transparent 55%) 45%,
        transparent 70%);
    }
    .blob.b2{
      width:48vmax; height:48vmax; opacity:.85;
      animation-duration:22s; animation-direction:reverse;
      background: radial-gradient(circle at 30% 30%,
        color-mix(in oklab, var(--base) 45%, transparent 55%),
        color-mix(in oklab, var(--plum) 50%, transparent 50%) 50%,
        transparent 72%);
    }
    .blob.b3{
      width:62vmax; height:62vmax; opacity:.60;
      animation-duration:26s;
      background: radial-gradient(circle at 30% 30%,
        color-mix(in oklab, var(--plum) 45%, transparent 55%),
        color-mix(in oklab, var(--base-dark) 50%, transparent 50%) 55%,
        transparent 75%);
    }
    @keyframes floaty{
      0%{transform:translate(6vw,10vh) scale(1)}
      35%{transform:translate(58vw,6vh) scale(1.05)}
      70%{transform:translate(22vw,62vh) scale(.98)}
      100%{transform:translate(6vw,10vh) scale(1)}
    }

    .noise{
      position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.10;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
      background-size:220px 220px;
    }

    @media (prefers-reduced-motion: reduce){
      .bg,.blob,.label::after,.nav::before{ animation:none !important; }
    }

    /* --- Logo --- */
    .label{
      width:100%;
      height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;

      font-size: 4.5vw;
      color: rgb(240,240,240);

      font-family: "bacalar-ultra-expanded", sans-serif;
      font-weight: 900;
      font-style: normal;

      letter-spacing: 0.34vw;
      text-shadow: 0 0 250px rgb(240,240,240), 0 0 5px rgb(240,240,240);

      position: relative;
      user-select:none;
    }

    /* Shine sweep overlay */
    .label::after{
      content:"";
      position:absolute;
      inset:-10% -20%;
      pointer-events:none;

      /* parlak şerit */
      background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255,255,255,.0) 35%,
        rgba(255,255,255,.22) 45%,
        rgba(255,255,255,.0) 55%,
        transparent 100%
      );

      /* sadece yazının üstünde görünsün */
      mix-blend-mode: screen;
      opacity: .9;

      transform: translateX(-60%) skewX(-12deg);
      animation: shine 3.2s ease-in-out infinite;
      filter: blur(.3px);
    }

    @keyframes shine{
      0%   { transform: translateX(-70%) skewX(-12deg); opacity: 0; }
      12%  { opacity: .95; }
      35%  { opacity: .35; }
      55%  { opacity: .85; }
      100% { transform: translateX(70%) skewX(-12deg); opacity: 0; }
    }

    .label.hide{
      align-items:flex-end;
      position:absolute;
      top:53.5vh;
      transform: scaleY(-0.75);
      opacity: .2;
      color: rgba(0,0,0,0);
      -webkit-text-stroke: 0.065vw white;
      text-shadow: 0 0 0;
      pointer-events:none;
    }
    body.mobile .label.hide{
      top: 51.45vh;
    }

    /* --- Nav (moving gradient border) --- */
    .nav{
      position:absolute;
      bottom: 1vh;
      width:25vw;
      height:6.5%;
      border-radius:1000px;

      /* içerik arkaplanı */
      background: color-mix(in oklab, #0b0b10 65%, transparent 35%);

      /* border yerine pseudo element kullanacağız */
      border: 1px solid transparent;

      box-shadow:
        0 10px 45px color-mix(in oklab, var(--base) 22%, transparent 78%),
        0 0 0 2px color-mix(in oklab, var(--base) 18%, transparent 82%);

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      padding:0 14px;
      overflow:hidden;

      /* pseudo border için */
      isolation:isolate;
    }
    body.mobile .nav{
      width: 60vw;
    }

    /* Moving gradient border */
    .nav::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:0.2vw; /* border kalınlığı */

      background: linear-gradient(
        90deg,
        rgba(174,60,70,.10),
        rgba(174,60,70,.95),
        rgba(255,180,188,.55),
        rgba(174,60,70,.95),
        rgba(174,60,70,.10)
      );
      background-size: 220% 100%;
      animation: borderMove 2.8s linear infinite;

      /* sadece çerçeve kalsın */
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;

      z-index: -1;
      opacity: .9;
      filter: blur(.15px);
    }

    @keyframes borderMove{
      0%{ background-position: 0% 50%; }
      100%{ background-position: 200% 50%; }
    }

    .nav a{
      height:50%;
      padding: 0 1vw;
      display:inline-flex;
      align-items:center;
      justify-content:center;

      font-family:"grange-condensed", sans-serif;
      font-weight:400;
      letter-spacing: 0.1vw;
      font-size: 2.25vh;

      text-decoration:none;
      color: var(--base);
      border-radius:999px;

      transition: transform .38s ease, background .55s ease, letter-spacing .65s ease, opacity .75s ease;
      outline:none;
      user-select:none;
    }
    .nav .dot{
      padding:0;
      width: 0.25vw;
      opacity:.6;
      pointer-events:none;
    }
    .nav a:not(.dot):hover{
      background: color-mix(in oklab, var(--base) 22%, transparent 78%);
      /* letter-spacing:1.45px; */
      transform: translateY(-1.5px);
    }
    .nav a:not(.dot):active{
      transform: translateY(0);
      opacity:.9;
    }
    .nav a:not(.dot):focus-visible{
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--base) 40%, transparent 60%);
    }