/* Astoetik — pelengkap Tailwind. Gaya: technical datasheet, bukan gradient/neon. */

::selection { background: #0E1B2A; color: #fff; }
.dark ::selection { background: #E9EDF1; color: #0E1B2A; }

.font-display { letter-spacing: -0.015em; }

/* Latar grid teknis halus, dipakai di hero sebagai satu-satunya elemen dekoratif */
.tech-grid {
  background-image:
    linear-gradient(to right, rgba(15,27,42,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,27,42,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.dark .tech-grid {
  background-image:
    linear-gradient(to right, rgba(233,237,241,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,237,241,.06) 1px, transparent 1px);
}

/* Panel/kartu datar, hairline border, tanpa shadow berlebih */
.panel {
  background: #ffffff;
  border: 1px solid #D2D9E0;
}
.dark .panel {
  background: #141C24;
  border-color: #2A3644;
}

/* Garis penggaris bertakik, pengganti divider dekoratif lama */
.ruler {
  height: 10px;
  background-image: repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 8px);
  background-position: bottom;
  background-size: 8px 10px;
  background-repeat: repeat-x;
  opacity: .5;
}

.thin-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(95,112,134,.4); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}