* { -webkit-tap-highlight-color: transparent; }
    .chip { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease; }
    dialog::backdrop { background: rgba(0,0,0,.35); }

    /* ========= Skeleton / Shimmer ========= */
    @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    .skeleton { position: relative; overflow: hidden; border-radius: 1rem;
      background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
      background-size: 400% 100%; animation: shimmer 1.4s infinite linear;
    }
    .skeleton-line { height: 12px; border-radius: 999px; }
    .skeleton-badge { height: 22px; width: 90px; border-radius: 999px; }
    .card-skeleton { border: 1px solid rgb(226 232 240); border-radius: 1rem; padding: 1rem; background: #fff; }
    .card-skeleton .sk {
      background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
      background-size: 400% 100%; animation: shimmer 1.4s infinite linear; border-radius: .5rem;
    }

    /* ====== Dialog foto ====== */
    .img-wrap { position: relative; overflow: hidden; border-radius: 1rem; background: #f1f5f9; aspect-ratio: 16/9; }
    .img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .img-skeleton { position: absolute; inset: 0;
      background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%); background-size: 400% 100%;
      animation: shimmer 1.4s infinite linear; }

    /* ====== Blue Gradient System ====== */
    :root{
      --blue-from:#2563eb; /* blue-600 */
      --blue-via:#3b82f6;  /* blue-500 */
      --blue-to:#38bdf8;   /* sky-400 */
      --blue-ring:rgba(59,130,246,.45);
      --ring:2px;
    }
    .btn-primary{
      --tw-shadow:0 6px 20px -6px rgba(59,130,246,.35);
      background-image:linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
      color:#fff;font-weight:600;border-radius:.75rem; /* rounded-xl */
      transition:transform .12s ease,filter .2s ease,box-shadow .2s ease,opacity .2s ease;
      box-shadow:var(--tw-shadow);
    }
    .btn-primary:hover{ filter:saturate(1.06) brightness(1.02); }
    .btn-primary:active{ transform:scale(.985); }
    .btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring) var(--blue-ring), var(--tw-shadow); }

    .btn-ghost-blue{
      background:linear-gradient(0deg,rgba(59,130,246,.10),rgba(59,130,246,.10));
      color:#1d4ed8;border-radius:9999px; /* full */
      transition:background .15s ease, transform .12s ease, box-shadow .2s ease;
    }
    .btn-ghost-blue:hover{ background:linear-gradient(0deg,rgba(59,130,246,.18),rgba(59,130,246,.18)); }
    .btn-ghost-blue:active{ transform:scale(.97); }
    .btn-ghost-blue:focus-visible{ outline:none; box-shadow:0 0 0 var(--ring) var(--blue-ring); }

    .chip-blue{
      background-image:linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
      color:#fff;border-radius:9999px;padding:.25rem .5rem;font-weight:600;
      box-shadow:0 4px 14px -6px rgba(59,130,246,.45);
    }

    /* Chip filter kelas */
    .kelasChip{ border-color:rgb(226 232 240); color:rgb(30 41 59); }
    .kelasChip:hover{ background:rgba(59,130,246,.08); }
    .kelasChip.active{
      background-image:linear-gradient(90deg,var(--blue-from),var(--blue-via),var(--blue-to));
      color:#fff;border-color:transparent;
      box-shadow:0 6px 18px -8px rgba(59,130,246,.55);
    }

    /* ====== Status PENUH (disabled card) ====== */
.bus-card[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;          /* tidak bisa diklik */
  filter: grayscale(20%);
}
.badge-penuh{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:9999px;
  color:#334155; background:#e2e8f0; border:1px solid #cbd5e1;
}
.badge-penuh .dot{width:8px;height:8px;border-radius:9999px;background:#64748b;}