/* Halaman Dokumen (SK Standar Pelayanan) — gaya khusus halaman.
 *
 * Dimuat SETELAH portal.css dan hanya menambah; token warna, latar aurora,
 * preloader, dan kaki halaman diwarisi dari sana. Tombol kembali dan kepala
 * halaman sengaja dibuat sama dengan halaman paspor.
 */

/* ============================================================
   KERANGKA HALAMAN
   ============================================================ */
.shell-file{max-width:980px;display:block}

.back{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:clamp(18px,4vw,28px);
  padding:9px 16px 9px 12px;border-radius:99px;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--muted);
  background:var(--card);border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.back svg{width:16px;height:16px}
.back:hover{color:var(--gold-bright);border-color:var(--line-strong);transform:translateX(-3px)}

.head-file{margin-bottom:clamp(24px,4.5vw,40px)}
.crest-sm img{height:clamp(78px,14vw,120px)}
.head-file h1{font-size:clamp(1.6rem,5.4vw,2.6rem)}

/* ============================================================
   KARTU DOKUMEN
   ============================================================ */
.file{
  display:grid;gap:clamp(20px,4vw,40px);align-items:center;
  grid-template-columns:1fr;
  padding:clamp(20px,4vw,36px);border-radius:calc(var(--radius) + 4px);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;animation:rise .6s var(--ease) .12s forwards;
}
@media(min-width:720px){
  .file{grid-template-columns:minmax(0,230px) minmax(0,1fr)}
}

/* Sampul: halaman pertama PDF, dibingkai seperti kertas di atas meja. */
.file-cover{
  position:relative;display:block;justify-self:center;
  width:min(210px,62vw);
  border-radius:10px;
  transform:rotate(-2deg);
  transition:transform .35s var(--ease);
}
@media(min-width:720px){.file-cover{width:100%}}
/* lembar kedua di belakang, memberi kesan tebal dokumen */
.file-cover::before{
  content:"";position:absolute;inset:0;border-radius:10px;
  background:rgba(233,237,243,.16);border:1px solid var(--line);
  transform:rotate(5deg) translate(8px,4px);
  transition:transform .35s var(--ease);
}
.file-cover img{
  position:relative;width:100%;height:auto;border-radius:10px;
  background:#fff;
  box-shadow:0 22px 44px -16px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.18);
}
.file-tag{
  position:absolute;top:12px;right:-10px;
  padding:4px 10px;border-radius:7px;
  font-size:.66rem;font-weight:800;letter-spacing:.14em;color:#1a1206;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold) 50%,var(--gold-deep));
  box-shadow:0 8px 18px -6px rgba(217,180,91,.6);
}
@media(hover:hover){
  .file-cover:hover{transform:rotate(0) translateY(-6px)}
  .file-cover:hover::before{transform:rotate(7deg) translate(12px,6px)}
}

.file-body{min-width:0;text-align:center}
@media(min-width:720px){.file-body{text-align:left}}

.file-kind{
  display:inline-block;margin-bottom:12px;padding:4px 12px;border-radius:99px;
  font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-bright);background:rgba(217,180,91,.12);
  border:1px solid rgba(217,180,91,.32);
}
.file-title{
  margin:0;font-size:clamp(1.15rem,3.4vw,1.6rem);font-weight:800;
  letter-spacing:-.015em;line-height:1.3;
  background:linear-gradient(180deg,#fff 35%,#c3ccd8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.file-number{
  margin:10px 0 0;font-size:.82rem;font-weight:500;color:var(--muted);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

.file-meta{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
@media(min-width:720px){.file-meta{justify-content:flex-start}}
.file-meta li{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:99px;
  font-size:.76rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.file-meta svg{width:14px;height:14px;color:var(--gold)}

.file-actions{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:clamp(22px,4vw,28px);padding-top:clamp(20px,4vw,26px);
  border-top:1px dashed var(--line);
}
@media(min-width:720px){.file-actions{justify-content:flex-start}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:99px;
  font-size:.9rem;font-weight:800;letter-spacing:.01em;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease);
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn:active{transform:scale(.97)}
.btn-primary{
  color:#1a1206;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold) 50%,var(--gold-deep));
  box-shadow:0 12px 26px -12px rgba(217,180,91,.6);
}
.btn-ghost{
  color:var(--gold-bright);
  background:rgba(217,180,91,.08);border:1px solid rgba(217,180,91,.38);
}
@media(hover:hover){
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(217,180,91,.7)}
  .btn-ghost:hover{transform:translateY(-3px);background:rgba(217,180,91,.16);border-color:var(--gold)}
}
/* Di ponsel kedua tombol dibuat selebar kartu agar mudah diketuk. */
@media(max-width:480px){
  .file-actions .btn{flex:1 1 100%}
}

.file-hint{margin:14px 0 0;font-size:.74rem;font-weight:300;color:var(--faint)}

/* ============================================================
   PRATINJAU
   Disembunyikan sampai dokumen.js menyalakannya (layar lebar saja).
   ============================================================ */
.viewer{display:none;margin-top:clamp(20px,3.5vw,28px)}
.viewer.is-on{display:block;opacity:0;animation:rise .6s var(--ease) .25s forwards}
@media(max-width:859px){.viewer.is-on{display:none}}

.viewer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px 12px 20px;
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.viewer-title{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.viewer-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px rgba(217,180,91,.8)}
.viewer-open{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:99px;
  font-size:.76rem;font-weight:600;color:var(--muted);
  border:1px solid var(--line);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.viewer-open svg{width:14px;height:14px}
.viewer-open:hover{color:var(--gold-bright);border-color:var(--line-strong)}

.viewer-frame{
  position:relative;height:min(82vh,960px);overflow:hidden;
  background:#1c2230;border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-lift);
}
.viewer-frame iframe{position:relative;display:block;width:100%;height:100%;border:0;
  opacity:0;transition:opacity .5s var(--ease)}
.viewer-frame.is-loaded iframe{opacity:1}
.viewer-loading{position:absolute;inset:0;display:grid;place-items:center}
.viewer-frame.is-loaded .viewer-loading{display:none}

/* ============================================================
   AKSESIBILITAS & CETAK
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .file,.viewer.is-on{opacity:1}
  .file-cover{transform:none}
}
@media print{
  .bg,#preloader,.back,.viewer,.file-actions,.file-hint,.mido-widget{display:none!important}
}