/* Geniş ekranda bildirim kartları ve özellik etiketlerinin sayfaya dağıtılması */
/* =========================================================
   Geniş ekranda öğeleri sayfaya dağıt
   ========================================================= */
.scatter { display: contents; }
.notif.n4 .av { background: #7FA35B; }
@media (max-width: 999px) { .notif { display: none; } }
@media (min-width: 1000px) {
  .scatter { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .scatter .notif { pointer-events: auto; }
  .notif.n1 { left: 6%;  right: auto; top: 10%; bottom: auto; }
  .notif.n2 { right: 6%; left: auto;  top: 30%; bottom: auto; }
  .notif.n3 { left: 4%;  right: auto; top: 58%; bottom: auto; }
  .notif.n4 { right: 9%; left: auto;  top: 64%; bottom: auto; --rot: 2deg; animation-delay: 2s, -2.4s; translate: calc(var(--px) * 20px) calc(var(--py) * 16px); }

  .features { position: absolute; inset: 0; margin: 0; padding: 0; max-width: none; pointer-events: none; z-index: 2; }
  .features li {
    position: absolute; pointer-events: auto;
    padding: 10px 15px; font-size: 14px; border-radius: 12px;
    background: rgba(255,255,255,.72); color: #7a3f1d;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(138,74,36,.10);
    box-shadow: 0 8px 22px rgba(60,40,25,.08);
    rotate: var(--tilt, 0deg);
  }
  .features li svg { width: 17px; height: 17px; }
  .features li:nth-child(1) { left: 17%;  top: 36%; --tilt: -4deg; }
  .features li:nth-child(2) { right: 18%; top: 14%; --tilt: 3deg; }
  .features li:nth-child(3) { right: 13%; top: 46%; --tilt: -2deg; }
  .features li:nth-child(4) { left: 19%;  top: 76%; --tilt: 3deg; }
  .night .features li { background: rgba(40,34,58,.72); border-color: rgba(243,217,184,.12); color: #F0CB95; }
  .night .features li:hover { background: #F0CB95; color: #1E1A2B; }
}