/* ==========================================
   Xeranta — Clean CSS (2025)
   ========================================== */
:root{
  --brand:#0EA5E9;          /* primary */
  --brand-dark:#0B8EC7;     /* hover */
  --text:#111111;           /* darker for readability */
  --muted:#6B7280;          /* slate-500 */
  --bg:#FFFFFF;
  --bg-soft:#F8FAFC;        /* slate-50 */
  --radius:14px;
  --shadow:0 8px 24px rgba(2,6,23,.08);
  --ring:#E5E7EB;
  --blue-900:#0B1E2E;
  --blue-100:#E0F2FE;
  --gray-50:#F8FAFC;
  --gray-900:#0F172A;
  /* Hero text colors (easy override) */
  --hero-text:#ffffff;
  --hero-subtext:rgba(255,255,255,.92);
  --brand-tagline:#0B1E2E;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font:400 14px/1.7 'Raleway',sans-serif; color:var(--text); background:var(--bg);
  margin:0;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-dark)}
.container{width:92%; max-width:1140px; margin:0 auto}
.section{padding:100px 0}

/* Headings */
h1,h2,h3,h4,h5,h6{font-family:'Raleway',sans-serif; font-weight:800; letter-spacing:.2px; text-transform:none; color:var(--text); margin:0 0 12px}
h1{font-size:clamp(34px,4.5vw,48px)}
h2{font-size:clamp(26px,3.2vw,34px)}
h3{font-size:clamp(18px,2vw,22px)}
.pfblock-subtitle{color:var(--muted); font-size:clamp(16px,1.6vw,18px); margin-top:6px}
.pfblock-header{ text-align:center; margin-bottom:36px }
.pfblock-line{ height:3px; width:60px; background:#E5E7EB; margin:14px auto }

/* Sections background variants */
.section--white{ background:#fff; color:#111 }
.section--gray{ background:var(--gray-50); color:#111 }
.section--blue-light{ background:var(--blue-100); color:#0b1e2e }
.section--blue-dark{ background:var(--blue-900); color:#fff }
.section--black{ background:#000; color:#fff }
.section + .section{ border-top:1px solid #e5e7eb }

/* Dark section text inversion */
.section--blue-dark, .section--black{ --on-dark:rgba(255,255,255,.92); --on-dark-muted:rgba(255,255,255,.72); --on-dark-soft:rgba(255,255,255,.08); color:var(--on-dark) }
.section--blue-dark h1,.section--blue-dark h2,.section--blue-dark h3,.section--black h1,.section--black h2,.section--black h3{ color:#fff }
.section--blue-dark p,.section--blue-dark li,.section--blue-dark .pfblock-subtitle,.section--black p,.section--black li,.section--black .pfblock-subtitle{ color:var(--on-dark-muted) }
.section--blue-dark a,.section--black a{ color:#E0F2FE }
.section--blue-dark a:hover,.section--black a:hover{ color:#fff }
.section--blue-dark .pfblock-line,.section--black .pfblock-line{ background:rgba(255,255,255,.4) }
.section--blue-dark .card,.section--black .card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); color:var(--on-dark) }
.section--blue-dark .card h3,.section--black .card h3{ color:#fff }
.section--blue-dark .card p,.section--black .card p{ color:var(--on-dark-muted) }

/* Grid & Cards */
.grid{display:grid; gap:24px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:992px){.grid-4,.grid-3{grid-template-columns:1fr}}
.card{ background:#fff; border:1px solid #EEF2F7; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow) }

/* Buttons */
.btn,.btn-lg{ border-radius:var(--radius); background:var(--brand); color:#fff; border:0; box-shadow:var(--shadow); padding:12px 18px; display:inline-block; font-weight:700 }
.btn:hover{ background:var(--brand-dark) }
.btn-outline{ background:#fff; color:var(--text); border:1px solid var(--ring) }

/* Navbar */
.header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #EEF2F7 }
.navbar{ padding:0 }
.navbar .container{ display:flex; align-items:center; justify-content:space-between }
.navbar-header{ display:flex; align-items:flex-start; gap:10px }

/* 
.navbar-brand.brand-block{ padding:10px 18px; display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px } 
.brand-logo{ height:108px; width:auto; display:block }
.brand-tagline{ line-height:1.1; font-weight:700; font-size:12px; color:var(--brand-tagline); letter-spacing:.2px; text-transform:none }
.brand-tagline span{ display:block }
*/

.navbar-brand.brand-block{
  padding:10px 18px;
  display:inline-flex;
  flex-direction: row;          /* was: column */
  align-items: center;          /* tengah vertikal */
  gap: 12px;                    /* jarak logo–tagline */
}
.brand-logo{ height:108px; width:auto; display:block; }
.brand-tagline{
  line-height: 1.1;
  font-weight: 700;
  font-size: 12px;             /* kamu minta 12px */
  color: var(--brand-tagline); /* kontrol dari variabel */
  letter-spacing: .2px;
  text-transform: none;
  display: flex;               /* biar dua span tertata vertikal */
  flex-direction: column;
}
.brand-tagline span{ display:block; }

.navbar-toggle{ background:transparent; border:0; padding:12px; display:none }
.icon-bar{ display:block; width:22px; height:2px; background:var(--text); margin:4px 0 }

.navbar-menu{ display:flex; align-items:center }
.navbar-menu.open{ display:block }
.navbar-nav{ list-style:none; display:flex; align-items:center; margin:0; padding:0 }
.navbar-nav>li>a{ font-size:15px; font-weight:800; letter-spacing:.2px; color:var(--text); padding:22px 14px; display:block }
.navbar-nav>li>a:hover,.navbar-nav>li>a:focus{ color:var(--brand) }
.navbar-lang{ padding-left:8px; display:flex; align-items:center }
#langSelect{ appearance:none; background:#fff; color:var(--text); border:1px solid #C5C7CB; border-radius:10px; padding:6px 22px 6px 10px; font-weight:700; cursor:pointer }
#langSelect:focus{ outline:2px solid var(--brand); outline-offset:2px }

@media(max-width:992px){
  .navbar-toggle{ display:block }
  .navbar-menu{ display:none; width:100% }
  .navbar-menu.open{ display:block }
  .navbar-nav{ flex-direction:column; align-items:flex-start }
  .navbar-nav>li>a{ padding:12px 18px }
}

/* Tinggi dan layout navbar */
.header{ position: sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #EEF2F7; }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; }

/* Mobile: bila ruang sempit, kecilkan logo sedikit */
@media (max-width: 480px){
  .brand-logo{ height: clamp(40px, 10vw, 64px); }
}

/* Hero */
.section--hero{ position:relative; min-height:88vh }
.hero-slider{ position:absolute; inset:0; overflow:hidden; z-index:0 }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.02); transition:opacity .6s ease, transform .6s ease }
.hero-slide.is-active{ opacity:1; transform:scale(1) }
.hero-slider::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.35)); pointer-events:none }
#home .intro{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; width:min(92%,900px) }
#home .intro h1{ color:var(--hero-text) }
#home .intro .start{ color:var(--hero-subtext) }
.hero-cta{ display:flex; gap:12px; justify-content:center; margin-top:18px }
@media(max-width:768px){ .hero-cta{ flex-direction:column } }

/* Forms */
.contact-form .form-row{ display:flex; gap:12px; margin-bottom:12px }
.contact-form input,.contact-form select,.contact-form textarea{ width:100%; padding:12px; border:1px solid #E5E7EB; border-radius:12px; font:inherit }
.section--blue-dark .contact-form input,.section--blue-dark .contact-form textarea,
.section--black .contact-form input,.section--black .contact-form textarea{ background:var(--on-dark-soft); color:#fff; border:1px solid rgba(255,255,255,.18) }
.section--blue-dark .contact-form ::placeholder,.section--black .contact-form ::placeholder{ color:rgba(255,255,255,.55) }

/* Utilities */
.animated{ animation-duration:.6s }
.fadeInUp{ animation-name:fadeInUp }
@keyframes fadeInUp{ from{ opacity:0; transform:translate3d(0,12px,0) } to{ opacity:1; transform:none } }

/* WA Floating Button */
#wa-fab{ position:fixed; right:18px; bottom:18px; background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); font-weight:700; z-index:999 }
#wa-fab:hover{ filter:brightness(.95) }

/* Screen-reader only text */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,1,1); white-space:nowrap; border:0;
}

/* (Sudah ada) Tombol WA dan BackToTop — tinggal tambahkan styling icon */
#wa-fab i, #backToTop i{
  font-size: 22px;      /* ukuran ikon (sesuaikan 18–26px) */
  line-height: 1;
  display: inline-block;
}

/* Hover effect halus (opsional) */
#wa-fab:hover i, #backToTop:hover i{
  transform: translateY(-1px);
  transition: transform .15s ease;
}

/* Back to top (right middle) */
#backToTop{ position:fixed; right:18px; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:#0F172A; color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; box-shadow:var(--shadow); z-index:998; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease }
#backToTop.show{ opacity:1; pointer-events:auto }
#backToTop:hover{ transform:translateY(-50%) scale(1.05) }


/* Fix: keep button text visible on hover (anchor specificity) */
a.btn, a.btn-lg { color:#fff; } /* default text for anchor-buttons */

.btn, .btn-lg{
  border-radius:var(--radius);
  background:var(--brand);
  color:#fff !important;           /* win over a:hover */
  border:0; box-shadow:var(--shadow);
  padding:12px 18px; display:inline-block; font-weight:700;
  text-decoration:none;
  font-size:13px;
}

.btn:hover,
.btn:focus,
a.btn:hover,
a.btn:focus{
  background:var(--brand-dark);
  color:#fff !important;           /* prevent text disappearing */
  text-decoration:none;
}

/* Outline variant: keep dark text on hover as well */
.btn-outline{ background:#fff; color:var(--text) !important; border:1px solid var(--ring); }
.btn-outline:hover,
.btn-outline:focus,
a.btn-outline:hover,
a.btn-outline:focus{
  background:#fff;
  color:var(--text) !important;
  border-color: var(--brand);
}

/* Optional: prevent global link hover from affecting buttons */
a.btn *, a.btn-lg *{ color:inherit; }


/* === Hero intro readability panel ===========================
   Pengaturan ukuran/warna/transparansi:
   - --intro-panel-pad-x / --intro-panel-pad-y  → padding panel
   - --intro-panel-radius                       → radius sudut panel
   - --intro-panel-blur                         → blur background (0 = mati)
   - --intro-panel-bg (RGB)                     → warna dasar panel (RGB)
   - --intro-panel-alpha (0..1)                 → transparansi panel
   ========================================================== */
:root{
  --intro-panel-pad-x: 18px;
  --intro-panel-pad-y: 18px;
  --intro-panel-radius: 14px;
  --intro-panel-blur: 2px;                 /* set 0px jika tak ingin blur */
  --intro-panel-bg: 255,255,255;           /* default: putih */
  --intro-panel-alpha: 0.35;               /* 0 = transparan, 1 = solid */
}

/* Wrapper intro: jadikan stacking context & beri padding konten */
#home .intro{
  isolation: isolate;                      /* pastikan z-index terpisah */
  padding: var(--intro-panel-pad-y) var(--intro-panel-pad-x);
}

/* Panel di belakang teks (tidak menutupi seluruh slide) */
#home .intro::before{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--intro-panel-pad-y)) calc(-1 * var(--intro-panel-pad-x));
  background: rgba(var(--intro-panel-bg), var(--intro-panel-alpha));
  border-radius: var(--intro-panel-radius);
  box-shadow: var(--shadow);
  z-index: 0;
  -webkit-backdrop-filter: saturate(1.05) blur(var(--intro-panel-blur));
  backdrop-filter: saturate(1.05) blur(var(--intro-panel-blur));
}

/* Pastikan teks & tombol di atas panel */
#home .intro > *{
  position: relative;
  z-index: 1;
}

/* VARIAN warna cepat:
   - tambahkan class .intro--white atau .intro--gray pada <div class="intro"> */
#home .intro.intro--white{ --intro-panel-bg: 255,255,255; }
#home .intro.intro--gray { --intro-panel-bg: 50,50,50; } /* gray-50 */

/* Responsif: panel sedikit lebih “kuat” di layar kecil agar tetap terbaca */
@media (max-width: 768px){
  :root{ --intro-panel-alpha: 0.86; }
  #home .intro{ padding: 16px 16px; }
}

/* === Hero intro panel: shrink horizontal only via scaleX === */
:root{
  --intro-panel-scale-x: .65;   /* 1 = penuh, 0.9 = 90% lebar; atur sesuka kamu */
}
#home .intro::before{
  transform: scaleX(var(--intro-panel-scale-x));
  transform-origin: center;
}

/* Footer */
#footer {
	background: #222;
	text-align: center;
	padding: 40px 0;
	color: #FFF;
}

#footer span{
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    color: #777;
}

.copyright { margin: 0; }

.copyright a{ border-bottom: 1px dotted #fff; }

.social-links {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.social-links li {
	display: inline-block;
	margin: 5px;
}

.social-links a {
	width: 36px;
	height: 36px;
	display: block;
	line-height: 35px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, .1);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
	font-size: 14px;
	color: rgba(255, 255, 255, .2);
}

.social-links a:hover {
	border: 1px solid rgba(255, 255, 255, .5);
	color: rgba(255, 255, 255, .8);
}


/* === Logo Wall (configurable columns) === */
.logo-grid{
  display:grid; gap:6px 12px; align-items:stretch;
  /* default responsive columns */
  --cols-xs: 2;   /* <480px  */
  --cols-sm: 3;   /* ≥480px  */
  --cols-md: 5;   /* ≥768px  */
  --cols-lg: 10;  /* ≥1200px (bisa diubah via class) */
  grid-template-columns: repeat(var(--cols-xs), minmax(0,1fr));
}
@media (min-width:480px){  .logo-grid{ grid-template-columns: repeat(var(--cols-sm), 1fr); } }
@media (min-width:768px){  .logo-grid{ grid-template-columns: repeat(var(--cols-md), 1fr); } }
@media (min-width:1200px){ .logo-grid{ grid-template-columns: repeat(var(--cols-lg), 1fr); } }

/* Utilities: pilih kolom per baris di layar besar */
.logo-grid.cols-4  { --cols-lg: 4; }
.logo-grid.cols-6  { --cols-lg: 6; }
.logo-grid.cols-8  { --cols-lg: 8; }
.logo-grid.cols-10 { --cols-lg:10; }

/* Konten setiap cell (logo + teks) center */
.logo-grid { 
  justify-items: center;   /* horizontal di dalam cell */
  align-items: center;     /* vertical di dalam cell */
  text-align: center;      /* teks nama center */
}


/* === Case Detail transition === */
#case-detail {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
  display: none;
}

/* Style untuk ketika elemen muncul */
#case-detail.show {
  display: block;
  opacity: 1;
}


/* Modal dasar */
.modal{ position:fixed; inset:0; display:none; z-index:1200; }
.modal.is-open{ display:block; }

.modal-backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.55);
  opacity:0; transition:opacity .25s ease;
}
.modal.is-open .modal-backdrop{ opacity:1; }

.modal-dialog{
  position:relative; z-index:1; margin:40px auto; max-width:900px; width:92%;
  background:#fff; color:#111; border-radius:16px; box-shadow:var(--shadow);
  transform:translateY(12px); opacity:0; transition:transform .25s ease, opacity .25s ease;
  padding:22px 22px 18px;
}
.modal.is-open .modal-dialog{ transform:none; opacity:1; }

/* Tema gelap kalau halamanmu biru gelap/hitam */
.section--blue-dark .modal-dialog, .section--black .modal-dialog{ background:#0b1e2e; color:#fff; }
.section--blue-dark .modal-dialog h3, .section--black .modal-dialog h3{ color:#fff; }

.modal-close{
  position:absolute; right:12px; top:10px; width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(0,0,0,.08); color:inherit; font-size:22px; cursor:pointer;
}
.modal-close:hover{ background:rgba(0,0,0,.12); }

/* Tabel ringkas (kalau pakai tabel FSM) */
.table-scroll{ overflow:auto; max-height:420px; margin-top:10px; border-radius:12px; }
.table-compact{ width:100%; border-collapse:collapse; font-size:14px; }
.table-compact th, .table-compact td{ padding:10px 12px; vertical-align:top; border-bottom:1px solid #eef2f7; }
.section--blue-dark .table-compact th, .section--black .table-compact th{ border-color:rgba(255,255,255,.15); }
.section--blue-dark .table-compact td, .section--black .table-compact td{ border-color:rgba(255,255,255,.12); }
.table-compact th{ text-align:left; font-weight:800; }


:root{
  --card-actions-bottom: 16px;  /* Jarak tombol dari bawah card */
}

/* Pastikan card bisa jadi konteks posisi */
#solutions .card{
  position: relative;
  padding-bottom: calc(56px + var(--card-actions-bottom)); /* ruang untuk tombol */
}

/* Area tombol ditempel di bawah, center */
#solutions .card .card-actions{
  position: absolute;
  left: 0; right: 0;
  bottom: var(--card-actions-bottom);
  display: flex;
  justify-content: center;   /* center horizontal */
  pointer-events: auto;
}

/* Tombol kecil */
.btn-sm{ padding:8px 12px; font-size:13px; border-radius:10px; }


/* === Solutions: header biru di h3 card === */
/*
#solutions .card{
  position: relative;
  padding-top: 0;                    
  overflow: hidden;                  
}

#solutions .card h3{
  background: var(--blue-900);       
  color: #fff;
  margin: 0 0 14px;                  
  padding: 14px 18px;              
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  display: block;
}

#solutions .card > p{
  padding: 0 24px 20px;           
  margin: 0;
}
*/

/* area tombol tetap di bawah dan center (dari patch sebelumnya) */
#solutions .card .card-actions{
  position: absolute; left: 0; right: 0;
  bottom: var(--card-actions-bottom, 16px);
  display: flex; justify-content: center;
  padding: 0 12px;
}


/* Gunakan padding dialog=0 agar header full-bleed */
.modal-dialog{
  padding: 0;                 /* override dari aturan sebelumnya */
  overflow: hidden;           /* agar sudut header dibulatkan rapi */
}

/* Full header biru tua */
.modal-header{
  background: var(--gray-900);   /* #0B1E2E dari tema kamu */
  color: #fff;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  /* optional: jadikan sticky bila konten tinggi */
  /* position: sticky; top: 0; z-index: 1; */
  /* sudut atas mengikuti dialog */
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

/* Judul di header */
.modal-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
}

/* Tombol close di dalam header (override dari aturan lama) */
.modal-header .modal-close{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.modal-header .modal-close:hover{
  background: rgba(255,255,255,.18);
}

/* Body konten modal (padding dipindah ke sini) */
.modal-body{
  padding: 22px;
  background: #fff;
  color: var(--text);
}

/* Jika modal berada dalam section gelap, biar body tetap terbaca */
.section--blue-dark .modal-body,
.section--black .modal-body{
  background: #0b1e2e;
  color: rgba(255,255,255,.92);
}
.section--blue-dark .modal-body h3,
.section--blue-dark .modal-body h4,
.section--black .modal-body h3,
.section--black .modal-body h4{
  color: #fff;
}

/* Tabel tetap mengikuti tema */
.table-scroll{ overflow:auto; max-height:420px; margin-top:10px; border-radius:12px; }
.table-compact{ width:100%; border-collapse:collapse; font-size:14px; }
.table-compact th, .table-compact td{
  padding:10px 12px; vertical-align:top; border-bottom:1px solid #eef2f7;
}
.section--blue-dark .table-compact th,
.section--black .table-compact th{ border-color:rgba(255,255,255,.15); }
.section--blue-dark .table-compact td,
.section--black .table-compact td{ border-color:rgba(255,255,255,.12); }
.table-compact th{ text-align:left; font-weight:800; }


/* === Modal: auto-scroll jika konten panjang === */
.modal-dialog{
  max-height: min(85vh, 100dvh - 80px);  /* tinggi maksimal dialog */
  overflow: auto;                         /* konten di dalam bisa di-scroll */
  -webkit-overflow-scrolling: touch;      /* smooth di iOS */
}

/* (opsional) perindah scrollbar di WebKit */
.modal-dialog::-webkit-scrollbar{ width:10px }
.modal-dialog::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px }
.modal-dialog::-webkit-scrollbar-thumb:hover{ background:#94a3b8 }


/* ===== Table Accent (FSM modal) — Blue borders + clear grid ===== */
/* Warna dasar (tema terang) */
:root{
  --tbl-border: #6B7280;              /* blue-500 */
  --tbl-header-bg: rgba(59,130,246,.10);
  --tbl-row-alt:   rgba(59,130,246,.05);
  --tbl-row-hover: rgba(59,130,246,.10);
}

/* Bingkai luar pada wrapper scroll */
.modal .table-scroll{
  border: 1px solid var(--tbl-border);
  border-radius: 12px;
  overflow: hidden;                   /* supaya radius terlihat */
}

/* Grid di dalam tabel */
.modal .table-compact{
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.modal .table-compact thead th{
  background: var(--tbl-header-bg);
  color: var(--blue-900, #0B1E2E);    /* fallback bila var tidak ada */
  border-right: 1px solid var(--tbl-border);
  border-bottom: 1px solid var(--tbl-border);
}

.modal .table-compact tbody td{
  border-right: 1px solid var(--tbl-border);
  border-bottom: 1px solid var(--tbl-border);
}

/* Hapus border kanan terakhir tiap baris agar rapi di ujung */
.modal .table-compact thead th:last-child,
.modal .table-compact tbody td:last-child{
  border-right: none;
}

/* Zebra + hover */
.modal .table-compact tbody tr:nth-child(odd){ background: var(--tbl-row-alt); }
.modal .table-compact tbody tr:hover{ background: var(--tbl-row-hover); }

/* Padding tetap nyaman */
.modal .table-compact th,
.modal .table-compact td{ padding: 10px 12px; }

/* ===== Tema gelap (modal dipanggil dari section blue-dark/black) ===== */
.section--blue-dark .modal-body,
.section--black .modal-body{
  /* sesuaikan intensitas untuk kontras di gelap */
  --tbl-border: rgba(59,130,246,.55);
  --tbl-header-bg: rgba(59,130,246,.18);
  --tbl-row-alt:   rgba(59,130,246,.10);
  --tbl-row-hover: rgba(59,130,246,.14);
}

.section--blue-dark .table-compact thead th,
.section--black .table-compact thead th{
  color: #fff;
}


/* === Table: show all rows (no inner scroll) + 13px font === */

/* 1) Font tabel 13px */
.modal .table-compact{
  font-size: 13px !important;   /* sebelumnya 14px */
}

/* 2) Matikan tinggi maksimum & scroll pada wrapper tabel */
.modal .table-scroll{
  max-height: none !important;   /* hapus batas tinggi 420px */
  overflow: hidden !important;   /* tanpa scrollbar di dalam tabel */
  /* border & radius dari patch sebelumnya tetap dipakai */
}

/* 3) Izinkan konten modal di-scroll jika total konten lebih tinggi dari viewport */
.modal{
  overflow: auto;                /* biar halaman bisa menggulir modal penuh */
}

/* Hero: baris kecil di bawah headline */
#hero-kicker{
  color: var(--hero-subtext);
  font-weight: 700;
  letter-spacing: .2px;
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: clamp(12px, 1.6vw, 14px);   /* kecil & responsif */
  line-height: 1.4;
}

/* Hero intro: perkuat auto-wrap & responsivitas */
#home .intro h1,
#home .intro #hero-kicker,
#home .intro #hero-sub,
#home .intro .start{
  white-space: normal;
  overflow-wrap: anywhere;   /* paksa pecah kata panjang */
  word-break: normal;
  hyphens: auto;             /* boleh pecah di tanda hubung */
  max-width: 100%;
}

/* Headline lebih aman di layar sangat kecil */
@media (max-width: 360px){
  #home .intro h1{
    font-size: clamp(26px, 8vw, 34px);  /* turunkan batas bawah */
    line-height: 1.15;
  }
  #home .intro #hero-kicker{
    font-size: 16px;
    line-height: 1.15;
  }
  #home .intro #hero-sub{
    font-size: 14px;
    line-height: 1.55;
  }
}

/* Pastikan panel intro tidak membuat area teks “terkesan” meluber */
#home .intro{ width: min(94%, 900px); }      /* sudah ada varian responsif */
@media (max-width: 480px){
  #home .intro{ width: min(94%, 540px); }    /* tetap dipertahankan */
}

/* Warna & kontras intro--gray: teks tetap terang */
#home .intro.intro--gray{
  --hero-text: #fff;
  --hero-subtext: rgba(255,255,255,.92);
}
#home .intro.intro--gray h1{ color: var(--hero-text); }
#home .intro.intro--gray #hero-sub{ color: var(--hero-subtext); }

/* Longgarkan hero agar teks boleh tinggi */
.section--hero{
  /* kalau sebelumnya pakai height:100vh, timpa jadi min-height */
  height: auto !important;
  min-height: 72vh;                 /* masih cukup tinggi di desktop */
  padding-block: 72px;              /* ruang atas-bawah */
  overflow: visible !important;     /* jangan potong konten wrap */
}

/* Di layar kecil: biarkan tinggi mengikuti konten */
@media (max-width: 540px){
  .section--hero{
    min-height: unset;              /* konten menentukan tinggi */
    padding-block: 84px 96px;       /* tambah ruang atas-bawah */
  }
}

/* Kotak intro mengikuti tinggi konten & tetap responsif */
#home .intro{
  display: inline-block;            /* biar pseudo-panel ngikut konten */
  width: min(94%, 980px);           /* lebar nyaman */
  white-space: normal;              /* jangan tahan satu baris */
}

/* Proteksi tambahan agar tidak ada teks yang dipaksa satu baris */
#home .intro h1,
#home .intro #hero-kicker,
#home .intro #hero-sub,
#home .intro .start{
  white-space: normal !important;
  overflow-wrap: anywhere;          /* pecah kata panjang */
  word-break: normal;
  hyphens: auto;
  max-width: 100%;
}

/* Skala yang lebih ramah mobile */
#home .intro h1{
  font-size: clamp(26px, 6.2vw, 42px);
  line-height: 1.15;
}

#home .intro #hero-kicker{
  font-size: clamp(12px, 2.6vw, 18px);
  line-height: 1.4;
}

/* Fokus: hero-sub lebih kecil + longgar */
#home .intro #hero-sub{
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 1.65;                /* longgarkan untuk keterbacaan */
  margin-top: 8px;
}

/* Very small screens */
@media (max-width: 360px){
  #home .intro h1{ font-size: clamp(24px, 7.5vw, 32px); }
  #home .intro #hero-sub{ font-size: 13px; line-height: 1.65; }
}

:root{
  /* jika kamu punya variabel ini */
  --intro-panel-pad-y: 22px;  /* sebelumnya 18px */
}

/* =====================
   Hero intro: sinkronkan lebar panel & konten
   ===================== */

/* Skala panel (sudah ada): 0..1 dari lebar viewport */
:root{
  --intro-panel-scale-x: .65;     /* 65% lebar viewport */
  --intro-content-offset: .27;    /* konten sedikit lebih sempit dari panel */
}

/* Panel intro mengikuti skala */
#home .intro{
  /* siapkan lebar panel */
  max-width: clamp(320px, calc(var(--intro-panel-scale-x) * 100vw), 1200px);
  width: 100%;
}

/* Batasi lebar KONTEN di dalam intro agar auto-wrap punya ruang */
#home .intro h1,
#home .intro #hero-kicker,
#home .intro #hero-sub,
#home .intro .hero-cta{
  /* gunakan skala panel dikurangi sedikit offset agar aman */
  max-width: clamp(
    260px,
    calc((var(--intro-panel-scale-x) - var(--intro-content-offset)) * 100vw),
    980px
  );
}

/* Auto-wrap yang kuat + tidak overflow */
#home .intro h1,
#home .intro #hero-kicker,
#home .intro #hero-sub{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Teks hero-sub sedikit lebih kecil agar lebih mudah wrap */
#home .intro #hero-sub{
  font-size: clamp(13px, 3.2vw, 14px);
  line-height: 1.65;
}

/* Longgarkan tinggi hero agar wrap tidak terpotong */
.section--hero{
  height: auto !important;
  min-height: 70vh;
  padding-block: 72px;
  overflow: visible !important;
}

@media (max-width: 540px){
  .section--hero{
    min-height: unset;
    padding-block: 84px 96px;
  }
  /* di layar kecil, buat konten bisa lebih lebar sedikit (kurangi offset) */
  :root {
	--intro-panel-scale-x: .85;
	--intro-panel-pad-y: 75px;
	--intro-content-offset: .27;
  }  
}

/* Jika kamu pakai panel pseudo-element ::before pada .intro,
   panel akan otomatis mengikut tinggi konten; tak perlu diubah.
   Jika ingin panel sedikit lebih “lapang”, boleh tambah padding vertikal: */
:root{
  /* opsional */
  /* --intro-panel-pad-y: 22px; */
}


/* === Center-kan konten intro agar selalu berada di tengah panel === */
#home .intro h1,
#home .intro #hero-kicker,
#home .intro #hero-sub,
#home .intro .hero-cta{
  display: block;                 /* pastikan bisa di-center dengan margin */
  margin-left: auto;              /* center horizontally */
  margin-right: auto;             /* center horizontally */
  text-align: center;               /* teks tetap rata kiri (ubah ke center jika mau) */
}

/* Jika tombol CTA berupa flex, pastikan item-nya juga center */
#home .intro .hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;        /* center tombol */
}

/* ===== Header compact ===== */
:root{
  --header-pad-y: 2px;      /* semula mungkin 16–20px */
  --header-pad-x: 16px;
  --logo-h: 40px;            /* logo lebih tipis */
  --nav-gap: 18px;
  --nav-font: 14px;
  /* --header-shadow: 0 6px 18px rgba(0,0,0,.08); */
}

/* Bar utama */
.header, .navbar{
  padding: var(--header-pad-y) var(--header-pad-x);
  box-shadow: var(--header-shadow);
  backdrop-filter: saturate(1.1) blur(6px); /* opsional, modern feel */
}

/* Logo */
.navbar .brand-logo{
  height: var(--logo-h);
  width: auto;
  display: block;
}

/* Menu */
.navbar-nav{
  display: flex;
  gap: var(--nav-gap);
}
.navbar-nav > li > a{
  padding: 8px 6px;          /* kurangi padding link */
  font-size: var(--nav-font);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Shrink saat scroll */
.header.is-shrink, .navbar.is-shrink{
  --header-pad-y: 6px;
  --logo-h: 34px;
  --nav-font: 13px;
  --nav-gap: 14px;
}

/* Mobile */
@media (max-width: 768px){
  :root{ --logo-h: 34px; }
  .navbar-nav > li > a{ padding: 8px 4px; }
}

/* ===== Hero full-screen ===== */
.section--hero{
  position: relative;
  height: 100vh;                 /* penuh 1 layar */
  min-height: 520px;             /* fallback layar mungil */
  padding: 0;                    /* hilangkan padding agar tidak ada gap */
  overflow: hidden;              /* sembunyikan batas bawah */
}

/* Container slider & gambar cover */
.hero-slider{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-slide{ position:absolute; inset:0; }
.hero-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;             /* gambar mengisi penuh */
  object-position: center;       /* fokus tengah */
}

/* Konten intro ditengah vertikal & responsif */
.section--hero .intro{
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;         /* center vertical & horizontal */
  height: 56%;
  width: min(92%, 980px);
  margin-inline: auto;
  padding: clamp(16px, 4vw, 28px);
}

/* Auto-wrap & ukuran ramah mobile */
.section--hero .intro h1,
.section--hero .intro #hero-kicker,
.section--hero .intro #hero-sub{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.section--hero .intro #hero-sub{
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.6;
}

/* Jika Anda pakai panel ::before di .intro, biarkan ikut tinggi konten */

[id]{
  scroll-margin-top: 96px;   /* kira-kira tinggi header saat compact */
}

/* Desktop / default */
:root{
  --logo-h: 72px;  /* semula 40px; silakan naikkan ke 48–56px sesuai selera */
}

/* Saat header mengecil (scroll) tetap proporsional */
.header.is-shrink,
.navbar.is-shrink{
  --logo-h: 48px;  /* semula 34px; sesuaikan agar tidak terlalu kecil */
}