/* =============================
   RESET & BASE
============================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --brand-blue: #1d4ed8;
  --brand-green: #1abc9c;
  --txt: #333;
  --bg: #f9f9f9;
  --accent: #007bff;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--txt);
  line-height: 1.6;
  /* agar anchor tidak ketutup nav */
  scroll-padding-top: 70px;
}

/* =============================
   NAVBAR (final, rapi & konsisten)
============================= */

/* --- dasar --- */
.mini-nav{
  --nav-bg: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #3b82f6 100%);
  --nav-fg: #ffffff;
  --nav-fg-accent: #e2e8f0;

  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--nav-bg);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* --- logo chip --- */
.mini-nav .logo{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; color: var(--nav-fg);
  font-weight: 800; letter-spacing: .2px; border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 6px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}
.mini-nav .logo i{
  display: grid; place-items: center;
  width: 22px; height: 22px; font-size: 12px;
  color: #1e3a8a; background: rgba(255,255,255,.92);
  border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.mini-nav .logo span{ font-size: 18px; line-height: 1; color: #f8fafc; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mini-nav .logo:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  box-shadow: 0 6px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.24);
}
.mini-nav .logo:focus-visible{ outline: 2px solid #93c5fd; outline-offset: 2px; }

/* --- links: desktop default (horizontal) --- */
.mini-nav .nav-links{
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0;
}
.mini-nav .nav-links li a{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #f1f5f9; text-decoration: none;
  transition: .18s ease;
}
.mini-nav .nav-links li a:hover,
.mini-nav .nav-links li a.active{
  background: #ffffff; color: #1e40af;
  box-shadow: 0 4px 10px rgba(0,0,0,.16);
}

/* --- tombol hamburger (disembunyikan di desktop) --- */
.mini-nav .menu-toggle{
  display: none; border: 0; background: transparent;
  color: var(--nav-fg); font-size: 18px; cursor: pointer;
}

/* =============================
   MOBILE (≤1024px) — satu blok saja
============================= */
@media (max-width:1024px){
  .mini-nav .menu-toggle{ display: block; }

  .mini-nav .nav-links{
    position: absolute;
    right: 12px; top: calc(100% + 6px);
    flex-direction: column;
    gap: 6px;
    width: 200px; max-height: 70vh; overflow: auto;
    padding: 10px;
    background: var(--nav-bg);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
    display: none;                                /* hidden by default */
  }
  .mini-nav .nav-links.active{ display: flex; }   /* ditoggle via JS */

  .mini-nav .nav-links li a{
    display: block; width: 100%;
    padding: 8px 12px; text-align: center;
    border-radius: 8px; font-size: 14px;
  }
}


/* =============================
   HERO
============================= */
.hero{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 70vh; padding: 20px;
  background: url("Hero.jpg") no-repeat center/cover;
}
.hero h1{
  font-size: 2.5rem; font-weight: 800; text-transform: uppercase;
  color: #044667; margin: 0;
}
.hero p{
  font-size: 1.4rem; font-weight: 600; font-style: italic;
  color: #044667; text-shadow: 1px 1px 5px rgba(0,0,0,.2);
  margin-top: 10px; max-width: 700px;
}

/* =============================
   DASHBOARD BUTTONS
============================= */
/* =============================
   DASHBOARD BUTTONS — UPGRADE WARNA & STYLE
============================= */
.dashboard-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 25px;
  background: linear-gradient(135deg, #1e40af, #2563eb, #3b82f6);
  border-radius: 14px;
}

/* Style tombol */
.dashboard-buttons button {
  flex: 1 1 calc(25% - 20px);
  min-width: 180px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4); /* biru-tosca cerah */
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: all 0.25s ease;
  cursor: pointer;
}

/* Hover efek */
.dashboard-buttons button:hover {
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

/* Klik efek */
.dashboard-buttons button:active {
  transform: scale(0.98);
}

/* Responsif di HP */
@media (max-width: 768px) {
  .dashboard-buttons button {
    flex: 1 1 calc(50% - 10px);
  }
}
@media (max-width: 480px) {
  .dashboard-buttons button {
    flex: 1 1 100%;
  }
}

/* =============================
   CONTENT SECTIONS
============================= */
.content{ width: 90%; max-width: 1100px; margin: 50px auto; }
.content h2{
  margin-bottom: 15px; color: var(--accent);
  border-left: 5px solid var(--accent); padding-left: 10px; font-size: 24px;
}

/* =============================
   SWIPER
============================= */
.mySwiper{ width: 100%; max-width: 800px; margin: auto; }
.mySwiper .swiper-slide{
  display: flex; align-items: center; justify-content: center;
}
.mySwiper img{
  width: 100%; height: auto; object-fit: cover; border-radius: 10px;
}
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev{
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); top: calc(50% + 20px); transform: translateY(-50%);
}
.mySwiper .swiper-button-next:hover,
.mySwiper .swiper-button-prev:hover{ background: rgba(0,0,0,.7); }
.swiper-pagination-bullet{ background: var(--accent); opacity: .7; }
.swiper-pagination-bullet-active{ background: #0056b3; opacity: 1; }
@media (max-width: 768px){
  .mySwiper{ max-width: 95%; }
  .mySwiper .swiper-button-next,
  .mySwiper .swiper-button-prev{ display: none !important; }
}

/* =============================
   FULLSCREEN OVERLAY (image zoom)
============================= */
.fullscreen-overlay{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); z-index: 9999;
}
.fullscreen-overlay img{
  max-width: 95vw; max-height: 90vh; object-fit: contain; cursor: zoom-out;
}

/* =============================
   VIDEO GALLERY
============================= */
.video-gallery{
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  margin-top: 20px; padding: 20px; border-radius: 15px;
  background: linear-gradient(135deg, #1a4da0, var(--brand-green));
}
.video-gallery iframe,
.video-gallery video,
.video-gallery img{
  width: 100%; aspect-ratio: 16/9; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: .3s; cursor: pointer;
}
.video-gallery iframe:hover,
.video-gallery video:hover,
.video-gallery img:hover{
  transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,.5);
}

/* =============================
   KONTAK & FOOTER
============================= */
#kontak a{ text-decoration: none; color: #000; }
#kontak a:hover{ color: #25D366; }
footer{
  background: #333; color: #fff; text-align: center;
  padding: 15px; margin-top: 50px;
}

/* =============================
   VIEW CONTENT (opsional)
============================= */
.view-content{ display: none; width: 90%; margin: 30px auto; text-align: center; }
.view-content button{
  margin-top: 20px; background: var(--brand-green); color: #fff;
  padding: 10px 15px; border: none; border-radius: 8px; cursor: pointer; transition: .3s;
}
.view-content button:hover{ background: #16a085; }

/* =============================
   TENTANG (container + stats)
============================= */
.tentang-container{
  display: flex; flex-direction: column; gap: 20px;
  background: linear-gradient(135deg, #1e4da1, var(--brand-green));
  padding: 25px; border-radius: 12px; color: #fff;
}
.tentang-card{
  background: rgba(255,255,255,.1);
  padding: 20px; border-radius: 10px; text-align: center;
}
.tentang-card h3{ margin-bottom: 10px; font-size: 22px; font-weight: 700; }
.tentang-card p{ font-size: 16px; line-height: 1.6; }

.tentang-stats{
  display: grid; gap: 20px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  text-align: center;
}
.stat{
  background: linear-gradient(135deg, #2563eb, #10b981);
  padding: 20px; border-radius: 10px; color: #fff; text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.stat:hover{ transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.stat .number{ font-size: 2rem; font-weight: 700; display: block; margin-bottom: 5px; }

/* =============================
   HISTORY TABLE
============================= */
.table-wrap{
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,.06); background: #fff;
}
.qit-table{
  border-collapse: separate; border-spacing: 0; min-width: 920px; width: 100%;
  font-size: 15px; line-height: 1.35;
}
.qit-table thead th{
  position: sticky; top: 0; background: #19438a; color: #fff;
  text-align: center; padding: 14px 12px; border-bottom: 3px solid #102a57; font-weight: 700;
}
.qit-table thead .th-param{
  text-align: left; min-width: 180px; border-right: 2px solid rgba(255,255,255,.18);
}
.qit-table thead .sub{
  display: block; font-weight: 600; opacity: .85; font-size: .85em; margin-top: 4px;
}
.qit-table tbody th.th-param{
  background: #f7f8fb; text-align: left; font-weight: 700;
  padding: 14px 12px; border-right: 2px solid #e7e9f0;
}
.qit-table td{ text-align: center; padding: 14px 10px; background: #fff; }
.qit-table th, .qit-table td{ border-bottom: 1px solid #e5e8ef; }
.qit-table tbody tr:last-child th,
.qit-table tbody tr:last-child td{ border-bottom: 0; }
.qit-table .latest{
  background: #fff6a6; font-weight: 800; color: #1e293b;
}
.qit-table tbody td:hover{
  background: #f3f7ff; box-shadow: inset 0 0 0 1px #dbe6ff;
}
.qit-table thead th:first-child{ border-top-left-radius: 12px; }
.qit-table thead th:last-child{ border-top-right-radius: 12px; }
.qit-table tbody tr:last-child th:first-child{ border-bottom-left-radius: 12px; }
.qit-table tbody tr:last-child td:last-child{ border-bottom-right-radius: 12px; }
@media (max-width: 640px){
  .qit-table{ font-size: 14px; }
  .qit-table thead .th-param{ min-width: 160px; }
}

/* =============================
   QIT JOURNEY – TIMELINE
============================= */
.timeline{ position: relative; margin-top: 10px; padding-bottom: 22px; }
.tl-track{
  display: flex; gap: 16px; padding: 8px 8px 28px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.tl-track::-webkit-scrollbar{ display: none; } /* hide scrollbar */
:root{ --tl-card-w: clamp(240px, 70vw, 360px); }

.tl-item{
  flex: 0 0 var(--tl-card-w); scroll-snap-align: start;
  position: relative; overflow: hidden;
  background: #f7f8fb; border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform, box-shadow;
}
.tl-head{ padding: 18px 22px 14px; color: #fff; }
.tl-badge{
  display: inline-block; padding: 10px 14px; border-radius: 14px;
  color: #fff; font-weight: 800; letter-spacing: .5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  background: rgba(255,255,255,.14);
}
.tl-card{ padding: 14px 16px 86px; }
.tl-card ul{ padding-left: 18px; }
.tl-card li{ margin: 8px 0; }
.tl-pin{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 48px; width: 14px; height: 22px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 3px 6px rgba(0,0,0,.18);
}
.tl-date{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 12px; font-size: .9rem; color: #1f2937; font-weight: 600; text-align: center;
}
.timeline-axis{
  position: absolute; left: 6px; right: 6px; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #bfc6d1, #aab2bf); border-radius: 4px;
}

/* Color variants */
.tl-red    .tl-head, .tl-red    .tl-badge, .tl-red    .tl-pin{ background:#ef4444; }
.tl-yellow .tl-head, .tl-yellow .tl-badge, .tl-yellow .tl-pin{ background:#f59e0b; }
.tl-green  .tl-head, .tl-green  .tl-badge, .tl-green  .tl-pin{ background:#22c55e; }
.tl-blue   .tl-head, .tl-blue   .tl-badge, .tl-blue   .tl-pin{ background:#60a5fa; }
.tl-orange .tl-head, .tl-orange .tl-badge, .tl-orange .tl-pin{ background:#eab308; }
.tl-purple .tl-head, .tl-purple .tl-badge, .tl-purple .tl-pin{ background:#8b5cf6; }
.tl-indigo .tl-head, .tl-indigo .tl-badge, .tl-indigo .tl-pin{ background:#6366f1; }
.tl-black  .tl-head, .tl-black  .tl-badge, .tl-black  .tl-pin{ background:#111827; }
.tl-black .tl-head, .tl-black .tl-badge{ color: #fff; }

@media (min-width: 1280px){
  :root{ --tl-card-w: 520px; }
}

/* Hover/active/focus */
.tl-item:hover,
.tl-item:focus-within{ transform: translateY(-6px) scale(1.01); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.tl-item:active{ transform: translateY(-2px) scale(.996); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.tl-item:hover .tl-head{ filter: brightness(1.03); }
.tl-item:hover .tl-badge{
  box-shadow: 0 0 0 3px rgba(255,255,255,.2) inset, 0 4px 10px rgba(0,0,0,.12);
}
.tl-item:focus-within{ outline: 2px solid #3b82f6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  .tl-item{ transition: none; }
  .tl-item:hover, .tl-item:focus-within, .tl-item:active{ transform: none; }
}
@media (hover: none){
  .tl-item:hover{ transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
}

/* =============================
   TUJUAN/MANFAAT/8 LANGKAH
============================= */
.tujuan-manfaat-container,
#langkah-improvement .tujuan-manfaat-container,
#framework .cards-wrap{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 12px; padding: 16px; border-radius: 10px;
}
.tm-card{
  position: relative;
  min-height: 70px; padding: 30px 16px 14px; font-size: 15px;
  border-radius: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.12);
  background: #fff; /* biar kontras di atas gradasi container */
}
.tm-card:hover{ transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 18px rgba(0,0,0,.22); }
.tm-num{
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  font: 800 14px/1 'Poppins', sans-serif; color: #fff;
  border-radius: 50%; border: 3px solid #fff; background: var(--badge-color, #463FFB);
  box-shadow: 0 10px 16px rgba(16,24,40,.18);
}
.tm-num::after{
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); pointer-events: none;
}
@media (max-width: 600px){
  .tm-card{ min-height: 88px; padding: 26px 14px 12px; font-size: 14.5px; }
}

/* =============================
   7 ALAT – GRID & CARD
============================= */
.quality-tools{
  list-style: none; margin: 20px 0; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 12px; border-radius: 10px;
  background: linear-gradient(135deg, #1e4da1, var(--brand-green));
  counter-reset: qt;
}
.quality-tools li{
  position: relative; counter-increment: qt;
  min-height: 150px; padding: 32px 18px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(255,255,255,.15); color: #fff; font-weight: 700;
  border-radius: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  cursor: pointer;
}
.quality-tools li:hover{ transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 18px rgba(0,0,0,.22); filter: brightness(1.03); }

.quality-tools img{
  width: 200px; height: 200px; object-fit: contain;
  padding: 8px; border-radius: 8px; background: #fff; margin-bottom: 10px;
}
@media (min-width: 1200px){
  .quality-tools img{ width: 110px; height: 110px; }
  .quality-tools li{ min-height: 168px; }
}
@media (max-width: 600px){
  .quality-tools img{ width: 80px; height: 80px; }
  .quality-tools li{ min-height: 132px; padding: 26px 14px 12px; }
}
.quality-tools strong{ display: block; margin-top: 4px; }
.quality-tools .desc{ font-weight: 500; opacity: .9; margin-top: 2px; }

/* nomor otomatis kanan atas */
.quality-tools li::after{
  content: counter(qt);
  position: absolute; top: 8px; right: 10px;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.9);
  color: #0f172a; font: 800 12px/1 'Poppins', sans-serif; border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.16);
}

/* =============================
   SMALL TWEAKS
============================= */
@media (max-width: 600px){
  .hero h1{ font-size: 28px; }
  .hero p{ font-size: 16px; }
}