/* Portal Imigrasi Bitung — gaya utama.
   Dipindahkan apa adanya dari versi statis; tampilan tidak berubah. */

/* ============================================================
   TOKEN DESAIN
   Selaras dengan palet pakaian.actanora.com agar perpindahan
   dari portal ke layanan terasa menyatu.
   ============================================================ */
:root{
  --bg:#080b12;
  --bg-soft:#0d1220;
  --ink:#e9edf3;
  --muted:#96a0ae;
  --faint:#5d6774;
  --gold:#d9b45b;
  --gold-bright:#efd28a;
  --gold-deep:#8a6a22;
  --navy-glow:#1d3a66;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(217,180,91,.45);
  --card:rgba(15,23,42,.55);
  --card-hover:rgba(18,28,50,.72);
  --radius:22px;
  --shadow:0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.2);
  --shadow-lift:0 24px 48px -12px rgba(0,0,0,.55), 0 0 26px rgba(217,180,91,.14);
  --ease:cubic-bezier(.4,0,.2,1);
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

/* ============================================================
   LATAR BELAKANG
   Aurora CSS — nol aset, ringan di jaringan lambat.
   Video opsional dipasang di atasnya lewat config.background.video
   ============================================================ */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.bg video.is-on{opacity:.55}

.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.aurora-1{width:60vmax;height:60vmax;left:-18vmax;top:-22vmax;
  background:radial-gradient(circle,var(--navy-glow) 0%,transparent 68%);
  animation:drift1 28s ease-in-out infinite}
.aurora-2{width:46vmax;height:46vmax;right:-14vmax;top:8vmax;
  background:radial-gradient(circle,rgba(217,180,91,.30) 0%,transparent 68%);
  animation:drift2 34s ease-in-out infinite}
.aurora-3{width:52vmax;height:52vmax;left:22vmax;bottom:-28vmax;
  background:radial-gradient(circle,rgba(29,58,102,.85) 0%,transparent 70%);
  animation:drift1 40s ease-in-out infinite reverse}

@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vmax,3vmax,0) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5vmax,4vmax,0) scale(1.08)}}

/* kisi titik halus + vignette, meniru tekstur imibatam */
.bg-grid{position:absolute;inset:0;opacity:.06;
  background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px}
.bg-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,18,.86) 0%,rgba(8,11,18,.45) 35%,rgba(8,11,18,.75) 75%,var(--bg) 100%)}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:var(--bg);transition:opacity .5s ease}
#preloader.is-done{opacity:0;pointer-events:none}
.pre-logo{width:76px;height:76px;margin-bottom:24px;opacity:.9;animation:pulse 1.8s ease-in-out infinite}
.pre-bar{width:128px;height:3px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  animation:load 1.4s ease-in-out infinite}
.pre-text{margin-top:16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
@keyframes load{0%{width:0}55%{width:72%}100%{width:100%}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ============================================================
   TATA LETAK
   ============================================================ */
.shell{position:relative;z-index:1;max-width:1080px;margin:0 auto;
  padding:clamp(28px,6vw,64px) clamp(16px,4vw,28px) 0;
  display:flex;flex-direction:column;min-height:100svh}
/* Bila layanan masih sedikit, blok isi dipusatkan secara vertikal agar
   ruang kosong terbagi rata; bila banyak, halaman mengalir seperti biasa. */
.content{margin:auto 0;width:100%}

/* ---------- Kepala halaman ---------- */
.head{text-align:center;margin-bottom:clamp(28px,5vw,44px)}
.crest{position:relative;display:inline-block;margin-bottom:18px}
.crest::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,180,91,.42),transparent 70%);
  filter:blur(14px);animation:pulse 3.4s ease-in-out infinite}
.crest img{position:relative;height:clamp(72px,13vw,116px);width:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.6));transition:transform .35s var(--ease)}
.crest:hover img{transform:scale(1.05)}

.head h1{margin:0;font-size:clamp(1.7rem,6vw,3.1rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(180deg,#fff 30%,#cbd5e1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rule{height:2px;width:clamp(88px,18vw,140px);margin:16px auto;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.head p{margin:0;font-size:clamp(.78rem,2.4vw,1rem);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Pencarian ---------- */
.search{position:relative;max-width:440px;margin:0 auto clamp(28px,5vw,40px);display:none}
.search.is-on{display:block}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--faint);pointer-events:none}
.search input{width:100%;padding:13px 16px 13px 46px;font:inherit;font-size:.94rem;
  color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:99px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:var(--line-strong);background:var(--card-hover)}

/* ---------- Kategori ---------- */
.cat{margin-bottom:clamp(28px,5vw,44px)}
.cat[hidden]{display:none}
.cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;padding:0 4px}
.cat-head h2{margin:0;font-size:.76rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
.cat-head span{font-size:.8rem;color:var(--faint);font-weight:300;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-head::after{content:"";flex:1;height:1px;background:var(--line);min-width:12px}
/* di layar sempit keterangan kategori dilepas, bukan dipotong setengah */
@media(max-width:560px){ .cat-head span{display:none} }

/* ---------- Kisi kartu ----------
   Maksimum 2 kolom (seperti imibatam.com): kartu tetap lebar sehingga
   nama layanan dan keterangannya terbaca penuh, bukan terpotong. */
.grid{display:grid;gap:clamp(12px,2vw,18px);grid-template-columns:1fr}
@media(min-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.is-featured{grid-column:1 / -1}
}

/* ---------- Kartu layanan (glassmorphism) ---------- */
.card{
  position:relative;display:flex;align-items:center;gap:18px;
  padding:18px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .3s var(--ease),background .3s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease);
  opacity:0;animation:rise .6s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 70ms + 120ms);
}
.card[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(hover:hover){
  .card:hover{transform:translateY(-5px);background:var(--card-hover);
    border-color:var(--line-strong);box-shadow:var(--shadow-lift)}
  .card:hover .chev{opacity:1;transform:translateX(6px);color:var(--gold)}
  .card:hover .card-title{color:var(--gold-bright)}
  .card:hover .chip{transform:scale(1.06) rotate(-3deg)}
}
.card:active{transform:scale(.985)}

.chip{flex:0 0 auto;width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;color:#1a1206;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold) 45%,var(--gold-deep));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 16px -4px rgba(217,180,91,.4);
  transition:transform .3s var(--ease)}
.chip svg{width:26px;height:26px}

.card-body{flex:1 1 auto;min-width:0}
.card-title{margin:0;font-size:1.02rem;font-weight:700;line-height:1.3;
  color:#fff;transition:color .25s var(--ease);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-desc{margin:5px 0 0;font-size:.85rem;font-weight:300;color:var(--muted);
  /* dua baris penuh — nama layanan pemerintah jarang muat dalam satu baris */
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;color:var(--gold-bright);
  background:rgba(217,180,91,.12);border:1px solid rgba(217,180,91,.32)}
.chev{flex:0 0 auto;width:20px;height:20px;color:var(--faint);opacity:.55;
  transition:transform .3s var(--ease),opacity .3s var(--ease),color .3s var(--ease)}

/* ---------- Keadaan kosong ---------- */
.empty{display:none;text-align:center;padding:48px 16px;color:var(--faint)}
.empty.is-on{display:block}
.empty strong{display:block;color:var(--muted);font-weight:600;margin-bottom:6px}

/* ---------- Kaki halaman ---------- */
footer{padding:clamp(36px,7vw,56px) 0 calc(28px + env(safe-area-inset-bottom));
  text-align:center}
.social{display:flex;justify-content:center;gap:22px;margin-bottom:18px}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--faint);border:1px solid transparent;
  transition:color .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.social a:hover{color:var(--gold);transform:translateY(-3px);border-color:var(--line)}
.social svg{width:22px;height:22px}
.copy{margin:0;font-size:.7rem;font-weight:300;letter-spacing:.06em;color:var(--faint);line-height:1.9}
.motto{color:rgba(217,180,91,.7);font-weight:600;letter-spacing:.14em}

/* ============================================================
   AKSESIBILITAS
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .card{opacity:1}
}