/* =========================================================
   CSS KHUSUS HALAMAN "PUSAT DOWNLOAD"
   Sama seperti page-kesiswaan.css: layout & komponen khusus halaman ini,
   warna tetap ambil dari variabel :root di assets/css/muspla-design.css.
   Prefix class "pd-" dipakai supaya tidak bentrok dengan class halaman lain.
   ========================================================= */

/* ================= HERO ================= */
.pd-hero{
  position:relative; overflow:hidden; background:var(--blue-deep); color:#fff;
  padding:64px 0 56px;
}
.pd-hero-blob-1{
  top:-140px; right:-100px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,197,24,.28) 0%, transparent 70%);
}
.pd-hero-blob-2{
  bottom:-170px; left:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,227,245,.14) 0%, transparent 70%);
}
.pd-hero-wrap{ position:relative; z-index:1; }
.pd-hero-text{ max-width:680px; }
.pd-hero h1{ font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; }
.pd-hero-lede{ margin-top:16px; font-size:16px; color:rgba(255,255,255,.78); max-width:580px; }

.pd-hero-chip{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); border-radius:100px; padding:9px 18px 9px 10px;
}
.pd-hero-chip .num{
  width:30px; height:30px; border-radius:50%; background:var(--yellow); color:var(--blue-deep);
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pd-hero-chip .lbl{ font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }

/* ================= SEARCH BOX (di bawah heading "Semua Dokumen...") ================= */
.pd-search{
  margin:0 auto 32px; max-width:480px; position:relative;
}
.pd-search input{
  width:100%; height:52px; border-radius:100px; border:1.5px solid rgba(0,0,61,.10);
  background:var(--white); box-shadow:var(--shadow-sm);
  padding:0 54px 0 22px; font-size:14.5px; font-family:'Inter',sans-serif;
  color:var(--blue-deep); font-weight:600; transition:border-color .15s ease, box-shadow .15s ease;
}
.pd-search input::placeholder{ color:var(--ink-soft); font-weight:400; }
.pd-search input:focus{
  outline:none; border-color:var(--blue); box-shadow:var(--shadow);
}
.pd-search svg{
  position:absolute; right:20px; top:50%; transform:translateY(-50%); width:18px; height:18px;
  color:var(--blue); pointer-events:none;
}

/* ================= FILTER KATEGORI ================= */
.pd-filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px;
}
.pd-filter-pill{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; color:var(--blue-deep);
  background:var(--white); border:1.5px solid rgba(0,0,61,.12); border-radius:100px;
  padding:9px 20px; cursor:pointer; transition:.15s ease;
}
.pd-filter-pill:hover{ border-color:var(--blue); }
.pd-filter-pill.is-active{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; }

/* ================= GRID FILE ================= */
.pd-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.pd-card{
  position:relative; overflow:hidden; background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:24px; display:flex; flex-direction:column; gap:12px;
  transition:transform .2s ease, box-shadow .2s ease; border:1px solid rgba(0,0,61,.06);
}
.pd-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

.pd-card-top{ display:flex; align-items:center; gap:14px; }
.pd-card .ic{
  position:relative; z-index:1; width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
  letter-spacing:.02em; color:var(--white); background:var(--blue);
}
/* Warna ikon menyesuaikan tipe file supaya gampang dikenali sekilas */
.pd-card .ic.type-pdf{ background:#E24C4C; }
.pd-card .ic.type-doc,
.pd-card .ic.type-docx{ background:#3468C0; }
.pd-card .ic.type-xls,
.pd-card .ic.type-xlsx{ background:#2E8B57; }
.pd-card .ic.type-ppt,
.pd-card .ic.type-pptx{ background:#D2691E; }
.pd-card .ic.type-jpg,
.pd-card .ic.type-jpeg,
.pd-card .ic.type-png{ background:#8B5FBF; }
.pd-card .ic.type-zip,
.pd-card .ic.type-rar{ background:#585C72; }

/* Thumbnail foto asli untuk file gambar (logo, dsb) — pakai kotak yang
   sama ukurannya dengan .ic, tapi diisi <img> yang di-crop rapi. */
.pd-card .ic.ic-thumb{
  background:var(--cream); padding:0; overflow:hidden;
}
.pd-card .ic.ic-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.pd-card-title{ min-width:0; }
.pd-card-title .kat{
  font-size:11px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.04em;
}
.pd-card h3{
  font-size:15px; font-weight:700; color:var(--blue-deep); margin-top:2px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

.pd-card p{ font-size:13px; color:var(--ink-soft); line-height:1.55; flex-grow:1; }

.pd-card-meta{
  display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-soft);
  border-top:1px dashed rgba(0,0,61,.12); padding-top:12px;
}
.pd-dl-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--blue-deep);
}
.pd-dl-btn svg{ width:15px; height:15px; }
.pd-card:hover .pd-dl-btn{ color:var(--blue); }

/* ================= EMPTY STATE (belum ada file diupload) ================= */
.pd-empty{
  text-align:center; padding:60px 20px; color:var(--ink-soft); font-size:14px;
  background:var(--white); border-radius:var(--radius-lg); border:1.5px dashed rgba(0,0,61,.15);
}

/* ================= CTA BANTUAN ================= */
.pd-help{
  margin-top:56px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--blue-light); border-radius:var(--radius-lg); padding:28px 32px;
}
.pd-help h4{ font-size:16.5px; font-weight:800; color:var(--blue-deep); margin-bottom:4px; }
.pd-help p{ font-size:13.5px; color:var(--ink-soft); }

@media(max-width:1100px){
  .pd-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .pd-hero{ padding-bottom:40px; }
  .pd-grid{ grid-template-columns:1fr; }
  .pd-help{ flex-direction:column; align-items:flex-start; text-align:left; }
}