/* ===========================================================================
   ANJUNGAN — Lapisan "Senja Hidup" (premium)
   Additif di atas tokens/app/components. Fokus: GERAK halus, KEDALAMAN (kaca),
   GLOW saat interaksi, ENTRANCE bertahap, poles detail. Semua GPU-friendly
   (transform/opacity) & dimatikan saat prefers-reduced-motion.
   =========================================================================== */
:root {
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);   /* sedikit overshoot → terasa "hidup" */
  --ease-soft:   cubic-bezier(.4,0,.2,1);
  --dur-1: .14s; --dur-2: .26s; --dur-3: .42s; --dur-4: .7s;
  --glass-blur: blur(16px) saturate(118%);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%);
}

/* — Seleksi teks & scrollbar khas senja — */
::selection { background: rgba(255,199,107,.30); color: #FFF4E6; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--line-strong), var(--line));
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent), var(--gold)); background-clip: padding-box; }

/* — Latar hidup: kanvas aurora+bara di z0; konten di atasnya — */
#senja-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.app, .dash { position: relative; z-index: 1; }
/* biar aurora samar mengintip di sela kartu: area konten tak menutup penuh */
.view { background: transparent !important; }

/* ——— KARTU: kaca beku + angkat + glow saat hover ——— */
.card {
  background: rgba(27,20,48,.62) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.065);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
  position: relative; /* TANPA overflow:clip → jangan potong dropdown/menu di dalam kartu */
}
.card::before { /* sheen tipis di atas; border-radius:inherit → sudut atas membulat tanpa clip kartu */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 44%;
  background: var(--sheen); pointer-events: none; opacity: .8;
  border-radius: inherit; z-index: 0;
}
.card > * { position: relative; z-index: 1; } /* isi kartu di atas sheen */
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,122,77,.30);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,122,77,.16),
              0 14px 46px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.08);
}
.card-title { letter-spacing: -.01em; }

/* ——— TOMBOL: lift + glow, tekan mengkerut (tactile) ——— */
.btn {
  transition: transform var(--dur-1) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2), filter var(--dur-2);
  will-change: transform;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .06s; }
.btn-primary { box-shadow: 0 4px 16px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { box-shadow: 0 8px 26px -6px var(--accent-glow), 0 0 0 1px rgba(255,199,107,.35), inset 0 1px 0 rgba(255,255,255,.25); filter: brightness(1.05); }
.btn-secondary:hover, .btn-text:hover { box-shadow: 0 6px 18px -8px rgba(10,6,22,.7); }

/* ——— NAV: item halus + pita aktif berkilau ——— */
.nav-item { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-1) var(--ease-out); }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active::before { box-shadow: 0 0 12px 1px var(--accent-glow); }

/* ——— input/select/textarea: cincin glow saat fokus ——— */
input, select, textarea, .grow {
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
input:focus, select:focus, textarea:focus, .grow:focus {
  box-shadow: 0 0 0 3px rgba(255,122,77,.16), inset 0 1px 2px rgba(10,6,22,.4) !important;
}

/* ——— pill / chip / tab: poles + glow ——— */
.pill, .tab, .src-chip, .chip { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2); }
.tab:hover, .src-chip:hover, .chip:hover { transform: translateY(-1px); }
.tab.active { box-shadow: 0 2px 12px -4px var(--accent-glow); }
.docitem { transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2); }
.docitem:hover { transform: translateX(3px); box-shadow: -3px 0 0 0 var(--accent); }

/* ——— ENTRANCE: kartu/konten muncul bertahap saat halaman dibuka ——— */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.view-inner > * { animation: rise-in var(--dur-3) var(--ease-out) both; }
.view-inner > *:nth-child(1){animation-delay:.02s} .view-inner > *:nth-child(2){animation-delay:.07s}
.view-inner > *:nth-child(3){animation-delay:.12s} .view-inner > *:nth-child(4){animation-delay:.17s}
.view-inner > *:nth-child(5){animation-delay:.22s} .view-inner > *:nth-child(6){animation-delay:.27s}
.view-inner > *:nth-child(n+7){animation-delay:.3s}

/* spinner/skeleton: kilau lebih halus (pakai keyframe shimmer yg sudah ada bila ada) */
.skel { position: relative; overflow: hidden; }

/* topbar & sidebar: kaca lebih tebal + hairline bercahaya */
.topbar { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid rgba(255,255,255,.06); }
.sidebar { border-right: 1px solid rgba(255,255,255,.05); }

/* ——— Hormati pengguna sensitif gerakan: matikan semua animasi/transition besar ——— */
@media (prefers-reduced-motion: reduce) {
  #senja-ambient { display: none; }
  .view-inner > * { animation: none !important; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .card:hover, .btn:hover, .nav-item:hover, .docitem:hover, .tab:hover { transform: none !important; }
}