:root{
  /* Arka plan ana tonları */
  --bg-0: #0b0d10;   /* en koyu – ekranın altı */
  --bg-1: #10141a;   /* üst bölge – kartların arkası */

  /* Altıgen yüzey */
  --cell: rgba(0, 174, 255, 0.45);   /* altıgen dolgu (çok düşük) */
  --stroke: rgba(255,255,255,0.008); /* çizgi – kart beyazını boğmaz */

  /* Hover rengi (beyaz kartla uyumlu turuncu) */
  --hover: #ff7a1a;
  --hover-glow: rgba(255, 122, 26, 0.16);

  --hex-w: 77px;
}


/* Arka plan: üstten yumuşak ışık */
.hex-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    /* üstten gelen çok soft ışık */
    radial-gradient(
      1100px 650px at 50% -12%,
      rgba(255,255,255,0.12),
      transparent 60%
    ),
    /* yanlardan çok hafif dolgu */
    radial-gradient(
      900px 600px at 15% 30%,
      rgba(255,255,255,0.045),
      transparent 55%
    ),
    /* ana uzay grisi geçiş */
    linear-gradient(
      180deg,
      var(--bg-1) 0%,
      var(--bg-0) 55%
    );
}


/* JS absolute layout kullandığın sürümle uyumlu */
.hex-grid{
  position: absolute;
  inset: -10vh -10vw;
  transform: translateZ(0);
  will-change: transform;
}

/* DÜZ, KADİFE HİSSİ: taş gibi değil */
.hex{
  position: absolute;
  width: var(--hex-w);
  height: calc(var(--hex-w) * 0.8660254);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

  background: transparent;

  box-shadow:
    inset 0 0 0 1px var(--stroke),
    inset 0 -12px 18px rgba(0,0,0,0.25);

  transition: box-shadow 350ms ease, filter 250ms ease;
}

.hex::before{
  content:"";
  position:absolute;
  inset:0;
  clip-path: inherit;

  background: var(--cell);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    inset 0 -1px 0 rgba(0,0,0,0.25);

  transition: background-color 280ms ease;
}


/* Hover: turuncu, ama "bağırmayan" parlama */
.hex.is-hot{
  filter: saturate(1.08) brightness(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    0 0 16px var(--hover-glow);
}

.hex.is-hot::before{
  background: color-mix(in srgb, var(--hover) 60%, var(--cell));
}

.hex-frost{
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* çok düşük beyaz sis */
  background: rgba(255,255,255,0.035);

  /* buzlu cam */
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);

  /* yumuşak vignette */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}