/* =====================================================================
   LDP / JPM Learning Center — Tema v7 (Maroon + Navy Gradient)
   Lapisan aditif: dimuat SETELAH style.css / app-v6.css / theme-v61.css
   sehingga tidak mengubah struktur maupun fungsi yang sudah berjalan.
   ===================================================================== */

:root {
  --v7-maroon: #7A1220;
  --v7-maroon-2: #A31B2C;
  --v7-navy: #0F172A;
  --v7-navy-2: #1E293B;
  --v7-gold: #C9A227;
  --v7-gold-2: #E7C65A;
  --v7-ink: #101828;
  --v7-muted: #5B6577;
  --v7-line: rgba(15, 23, 42, .10);
  --v7-grad: linear-gradient(120deg, var(--v7-navy) 0%, #23142B 45%, var(--v7-maroon) 100%);
  --v7-grad-soft: linear-gradient(120deg, rgba(15,23,42,.96) 0%, rgba(122,18,32,.92) 100%);
  --v7-shadow: 0 18px 40px -22px rgba(15, 23, 42, .55);
  --v7-radius: 16px;
}

/* ---------------------------- Dasar ---------------------------------- */
body.v6-public,
body.v6-auth,
body.v6-app { color: var(--v7-ink); }

.v6-hero,
.v7-grad { background: var(--v7-grad) !important; color: #fff; }

.v6-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(201, 162, 39, .22), transparent 60%),
    radial-gradient(700px 320px at 100% 0%, rgba(163, 27, 44, .35), transparent 65%);
  pointer-events: none;
}
.v6-hero { position: relative; overflow: hidden; }
.v6-hero > .container { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block; letter-spacing: .10em; text-transform: uppercase;
  font-size: .72rem; font-weight: 700; color: var(--v7-gold-2);
  background: rgba(201, 162, 39, .12);
  border: 1px solid rgba(201, 162, 39, .32);
  padding: .28rem .62rem; border-radius: 999px; margin-bottom: .6rem;
}
.v6-section .eyebrow { color: var(--v7-maroon); background: rgba(122, 18, 32, .07); border-color: rgba(122, 18, 32, .18); }

/* Tombol */
.btn-primary { background: var(--v7-maroon); border-color: var(--v7-maroon); color: #fff; }
.btn-primary:hover { background: var(--v7-maroon-2); border-color: var(--v7-maroon-2); }
.btn-gold { background: linear-gradient(120deg, var(--v7-gold) 0%, var(--v7-gold-2) 100%); border: 0; color: #2A1B02; font-weight: 700; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-outline-light { border: 1px solid rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); }

/* Kartu / panel */
.panel, .v6-tile, .adm-panel, .card {
  border-radius: var(--v7-radius);
  border: 1px solid var(--v7-line);
  box-shadow: var(--v7-shadow);
}
.v6-tile { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.v6-tile:hover { transform: translateY(-3px); border-color: rgba(122, 18, 32, .28); }
.v6-tile .badge { background: rgba(122, 18, 32, .08); color: var(--v7-maroon); border: 1px solid rgba(122, 18, 32, .18); }

/* Header publik */
body.v6-public .v6-topbar,
body.v6-public header.site-header { background: var(--v7-grad); color: #fff; }

/* =========================== HERO SLIDER ============================= */
.v7-slider {
  position: relative;
  background: var(--v7-navy);
  overflow: hidden;
}
.v7-slider .v7-track {
  display: flex;
  transition: transform .6s cubic-bezier(.42, .0, .18, 1);
  will-change: transform;
}
.v7-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(320px, 46vw, 520px);
  display: flex; align-items: center;
  background-size: cover; background-position: center;
}
.v7-slide::before {
  content: ""; position: absolute; inset: 0;
  background: var(--v7-grad-soft);
  opacity: .88;
}
.v7-slide.has-img::before { opacity: .78; }
.v7-slide-in {
  position: relative; z-index: 2;
  width: min(1160px, 92%); margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.4rem) 0;
  color: #fff; max-width: 100%;
}
.v7-slide-in h2 {
  margin: .2rem 0 .6rem;
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.15; font-weight: 800; color: #fff;
  max-width: 22ch;
}
.v7-slide-in p {
  margin: 0 0 1.1rem; color: rgba(255, 255, 255, .88);
  font-size: clamp(.95rem, 1.4vw, 1.06rem); max-width: 60ch;
}
.v7-slide-act { display: flex; flex-wrap: wrap; gap: .6rem; }

.v7-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(15, 23, 42, .38); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(4px);
}
.v7-nav:hover { background: rgba(122, 18, 32, .8); border-color: transparent; }
.v7-nav.prev { left: 14px; }
.v7-nav.next { right: 14px; }

.v7-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  display: flex; justify-content: center; gap: .4rem;
}
.v7-dots button {
  width: 26px; height: 4px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, .38); padding: 0;
}
.v7-dots button[aria-current="true"] { background: var(--v7-gold-2); width: 40px; }

@media (max-width: 720px) {
  .v7-nav { width: 34px; height: 34px; }
  .v7-nav.prev { left: 8px; } .v7-nav.next { right: 8px; }
  .v7-slide { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .v7-slider .v7-track { transition: none; }
}

/* ============================ ADMIN v7 =============================== */
body.admin .adm-side {
  background: var(--v7-grad);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
body.admin .adm-brand { border-bottom: 1px solid rgba(255, 255, 255, .10); color: #fff; }
body.admin .adm-side nav a { border-radius: 10px; }
body.admin .adm-side nav a:hover { background: rgba(255, 255, 255, .08); }
body.admin .adm-side nav a.active {
  background: linear-gradient(90deg, rgba(201, 162, 39, .22), rgba(255, 255, 255, .04));
  box-shadow: inset 3px 0 0 var(--v7-gold);
  color: #fff;
}
body.admin .adm-top {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--v7-line);
}
body.admin .adm-panel .panel-head h3 { color: var(--v7-navy); }
body.admin .table thead th {
  background: linear-gradient(180deg, #F6F7FB, #EEF1F7);
  color: var(--v7-navy); border-bottom: 1px solid var(--v7-line);
}
body.admin .badge { border-radius: 999px; }

/* Tabel responsif tetap aman di layar sempit */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Aksesibilitas fokus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--v7-gold); outline-offset: 2px;
}