/* =====================================================================
   LDP JPM — Lapisan v6.0
   Penyelarasan identitas (merah #e11e16 + navy #232745), komponen baru
   (toggle kata sandi, input OTP, carousel galeri, kartu instruktur),
   serta perapihan responsif lintas halaman.
   Dimuat SETELAH style.css / admin.css sehingga hanya menimpa seperlunya.
   ===================================================================== */
:root{
  --brand-red:#e11e16;
  --brand-red-dark:#b8140e;
  --brand-red-soft:#fdeceb;
  --brand-navy:#232745;
  --brand-navy-soft:#eef0f7;
  --brand-navy-line:#d8dcea;
  --v6-radius:16px;
  --v6-shadow:0 18px 44px -26px rgba(35,39,69,.45);
}

/* ---------- Aksesibilitas fokus konsisten ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(225,30,22,.35);outline-offset:2px;border-radius:8px;
}

/* ---------- Toggle lihat/sembunyi kata sandi ---------- */
.pw-wrap{position:relative;display:block}
.pw-wrap>input{width:100%;padding-right:3rem !important}
.pw-toggle{
  position:absolute;top:50%;right:.45rem;transform:translateY(-50%);
  width:2.2rem;height:2.2rem;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;cursor:pointer;color:var(--brand-navy);
  border-radius:50%;line-height:1;padding:0;font-size:1.05rem;
}
.pw-toggle:hover{background:var(--brand-navy-soft);color:var(--brand-red)}
.pw-toggle::before{content:"\1F441";display:block}
.pw-toggle.is-on::before{content:"\1F576"}

/* ---------- Input OTP ---------- */
.otp-input{
  width:100%;text-align:center;font-size:1.7rem;font-weight:800;
  letter-spacing:.7rem;text-indent:.7rem;font-variant-numeric:tabular-nums;
}
.auth-inline-form{margin:.35rem 0 0;text-align:center}
.auth-inline-form .btn{margin:0 .2rem}
.btn-link{background:none;border:0;color:var(--brand-navy);text-decoration:underline;padding:.35rem .5rem;cursor:pointer;font-weight:600}
.btn-link:hover{color:var(--brand-red)}

/* ---------- Galeri / carousel berita ---------- */
.ldp-carousel{position:relative;margin:1.4rem 0 1.8rem;border-radius:var(--v6-radius);overflow:hidden;background:var(--brand-navy);box-shadow:var(--v6-shadow)}
.ldp-carousel-track{display:flex;transition:transform .45s cubic-bezier(.22,.9,.3,1);will-change:transform}
.ldp-carousel-slide{min-width:100%;position:relative}
.ldp-carousel-slide img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ldp-carousel-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .9rem;color:#fff;font-size:.9rem;
  background:linear-gradient(to top,rgba(20,22,38,.85),rgba(20,22,38,0));
}
.ldp-carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:2.6rem;height:2.6rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--brand-navy);font-size:1.3rem;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.ldp-carousel-btn:hover{background:var(--brand-red);color:#fff}
.ldp-carousel-btn.prev{left:.6rem}
.ldp-carousel-btn.next{right:.6rem}
.ldp-carousel-dots{position:absolute;bottom:.6rem;left:0;right:0;display:flex;justify-content:center;gap:.4rem;z-index:2}
.ldp-carousel-dots button{width:.55rem;height:.55rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.ldp-carousel-dots button.is-active{background:var(--brand-red);width:1.4rem;border-radius:999px}
.ldp-carousel[data-single="1"] .ldp-carousel-btn,
.ldp-carousel[data-single="1"] .ldp-carousel-dots{display:none}

/* ---------- Galeri admin (thumbnail + urutan) ---------- */
.galeri-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem;margin:.6rem 0 1rem}
.galeri-item{border:1px solid var(--brand-navy-line);border-radius:12px;overflow:hidden;background:#fff}
.galeri-item img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galeri-item .galeri-meta{padding:.5rem;display:grid;gap:.35rem}
.galeri-item input[type=text],.galeri-item input[type=number]{width:100%;font-size:.82rem;padding:.35rem .5rem}
.galeri-item label{display:flex;gap:.35rem;align-items:center;font-size:.8rem;color:#8a2f2a}

/* ---------- Instruktur ---------- */
.instruktur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin:1rem 0 0}
.instruktur-card{display:flex;gap:.8rem;align-items:center;padding:.75rem;border:1px solid var(--brand-navy-line);border-radius:14px;background:#fff}
.instruktur-card img,.instruktur-card .ava{
  width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;
  background:var(--brand-navy-soft);display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--brand-navy);
}
.instruktur-card b{display:block;line-height:1.25}
.instruktur-card span{font-size:.8rem;color:#6a7086}
.instruktur-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.6rem;max-height:340px;overflow:auto;padding:.6rem;border:1px solid var(--brand-navy-line);border-radius:12px;background:#fbfbfe}
.instruktur-pick label{display:flex;gap:.55rem;align-items:flex-start;font-size:.86rem;background:#fff;border:1px solid var(--brand-navy-line);border-radius:10px;padding:.5rem .6rem}
.instruktur-pick input[type=text]{width:100%;margin-top:.25rem;font-size:.8rem;padding:.3rem .45rem}

/* ---------- Badge metode penyelenggaraan ---------- */
.metode-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.02em}
.metode-online{background:#e6f4ee;color:#0f7b52}
.metode-offline{background:var(--brand-red-soft);color:var(--brand-red-dark)}
.metode-hybrid{background:var(--brand-navy-soft);color:var(--brand-navy)}

/* ---------- Media materi ---------- */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--v6-radius);overflow:hidden;background:#0d0f1a;box-shadow:var(--v6-shadow)}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-note{margin:.55rem 0 0;font-size:.82rem}
.pdf-canvas-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.pdf-bar{flex-wrap:wrap;gap:.35rem}
@media (max-width:640px){
  .pdf-bar .btn span,.pdf-page{font-size:.8rem}
}

/* ---------- Perapihan responsif umum ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
img,video,iframe{max-width:100%}
.prose img{height:auto;border-radius:12px}
.grid{gap:clamp(1rem,2.4vw,1.6rem)}
@media (max-width:960px){
  .detail-layout{grid-template-columns:1fr !important}
  .detail-layout .sidebar{position:static !important}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
  h1{font-size:clamp(1.6rem,7vw,2.2rem)}
  .btn{width:auto}
  .auth-card{padding:1.4rem !important}
  section{padding:2.4rem 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}