/* ============================================================
   INDOMITRA — Lapisan Peningkatan Tampilan (enhance.css)
   Efek lembut & cerah, animasi halus, navigasi responsif penuh.
   File ini bersifat tambahan: tidak mengubah style.css.
   ============================================================ */

:root{
  --ease-lembut: cubic-bezier(.22,.61,.36,1);
  --kursor-warna: 11,77,162;      /* biru korporat */
  --kursor-aksen: 244,123,32;     /* oranye aksen */
  --kaca: rgba(255,255,255,.72);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%}
:focus-visible{outline:3px solid rgba(var(--kursor-aksen),.55);outline-offset:2px;border-radius:6px}


/* ---------- 2. Animasi masuk saat gulir ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease-lembut),transform .7s var(--ease-lembut)}
[data-reveal].tampil{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- 3. Sentuhan halus pada komponen ---------- */
.kat-card,.card-produk,.pt-card,.paket-card,.card,.artikel-card{
  transition:transform .35s var(--ease-lembut),box-shadow .35s var(--ease-lembut),border-color .35s var(--ease-lembut)}
@media (hover:hover){
  .kat-card:hover,.card-produk:hover,.pt-card:hover,.paket-card:hover,.artikel-card:hover{
    transform:translateY(-4px);box-shadow:0 14px 34px rgba(16,24,40,.13)}
  .btn{transition:transform .25s var(--ease-lembut),box-shadow .25s var(--ease-lembut),background .25s var(--ease-lembut),color .25s var(--ease-lembut)}
  .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,24,40,.16)}
}
.btn:active{transform:translateY(0) scale(.985)}
.cp-img img{transition:transform .6s var(--ease-lembut)}
@media (hover:hover){.card-produk:hover .cp-img img{transform:scale(1.05)}}
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:-40% -20% auto auto;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.20),rgba(255,255,255,0) 68%);pointer-events:none;
  animation:kilau 12s ease-in-out infinite alternate}
@keyframes kilau{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-40px,30px,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}

/* ---------- 4. Navigasi: rapi & jelas di semua perangkat ---------- */
.mainnav{backdrop-filter:saturate(150%) blur(6px);-webkit-backdrop-filter:saturate(150%) blur(6px)}
.mainnav-inner{position:relative;min-height:48px;flex-wrap:wrap}
.mainnav-links a{position:relative}
.mainnav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:2px;
  background:linear-gradient(90deg,var(--oranye),var(--biru));border-radius:2px;
  transition:right .3s var(--ease-lembut)}
@media (hover:hover){.mainnav-links a:hover::after{right:0}}

.megamenu-panel{
  transition:opacity .28s var(--ease-lembut),transform .28s var(--ease-lembut);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.megamenu.open .megamenu-panel{animation:panelMasuk .28s var(--ease-lembut) both}
@keyframes panelMasuk{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.megamenu-btn{transition:background .25s var(--ease-lembut)}
.mm-link{border-radius:6px;padding:3px 6px;margin-left:-6px;transition:background .2s var(--ease-lembut),color .2s var(--ease-lembut)}
@media (hover:hover){.mm-link:hover{background:var(--biru-muda);color:var(--biru)}}

/* Tirai gelap saat menu mobile terbuka */
.nav-tirai{position:fixed;inset:0;background:rgba(8,26,54,.42);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-lembut),visibility .3s;z-index:45}
body.nav-terbuka .nav-tirai{opacity:1;visibility:visible}

/* Titik henti utama: mode mobile/tablet sampai 960px */
@media (max-width:960px){
  .navtoggle{display:inline-flex!important;align-items:center;gap:8px;margin-left:auto;
    background:var(--biru);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:700;
    font-size:14px;box-shadow:0 4px 14px rgba(11,77,162,.28)}
  .navtoggle[aria-expanded="true"]{background:var(--oranye);box-shadow:0 4px 14px rgba(244,123,32,.3)}
  .mainnav-inner{gap:10px;padding-top:8px;padding-bottom:8px}
  .megamenu{order:1}
  .megamenu-btn{border-radius:10px}
  .navtoggle{order:2}
  .mainnav-links{order:3;display:flex!important;flex-direction:column;gap:0;width:100%;
    max-height:0;overflow:hidden;opacity:0;border-top:0;
    transition:max-height .38s var(--ease-lembut),opacity .3s var(--ease-lembut),margin .3s var(--ease-lembut);
    z-index:60;position:relative}
  .mainnav-links.open{max-height:min(70vh,560px);overflow-y:auto;opacity:1;margin-bottom:8px;
    border-top:1px solid var(--garis)}
  .mainnav-links li{width:100%;border-bottom:1px solid var(--garis)}
  .mainnav-links li:last-child{border-bottom:0}
  .mainnav-links a{padding:14px 4px;font-size:15px;font-weight:600;display:flex;align-items:center}
  .mainnav-links a:active{background:var(--biru-muda)}
  /* Panel kategori tampil penuh & mudah digulir */
  .megamenu{position:static}
  .megamenu-panel{position:absolute;left:0;right:0;top:100%;width:100%;
    grid-template-columns:1fr 1fr;max-height:min(66vh,520px);border-radius:0 0 14px 14px;z-index:70}
}
@media (max-width:560px){
  .megamenu-panel{grid-template-columns:1fr}
  .header-inner{gap:12px;padding:12px 16px}
  .header-cta{width:100%;gap:8px}
  .header-cta .btn{flex:1}
  .topbar-inner{height:auto;padding:6px 16px;flex-wrap:wrap;gap:4px;justify-content:center}
  .topbar-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
  .topbar-nav a{margin-left:12px}
  .page{padding:16px 14px 40px}
}
@media (max-width:400px){
  .grid-kategori,.grid-produk,.grid-perusahaan,.grid-perusahaan.wide,.grid-artikel{grid-template-columns:1fr}
}

/* Area sentuh nyaman & tabel tidak merusak layout di HP */
@media (pointer:coarse){
  .btn,.navtoggle,.megamenu-btn,.mainnav-links a{min-height:44px}
  select,input,textarea{font-size:16px} /* cegah zoom otomatis iOS */
}
table{max-width:100%}
.tabel-scroll,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Dukungan notch iOS */
@supports(padding:max(0px)){
  .container{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

/* Kunci gulir saat menu terbuka */
body.nav-terbuka{overflow:hidden}

/* Alert lebih lembut */
.alert{animation:alertMasuk .45s var(--ease-lembut) both}
@keyframes alertMasuk{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Tombol kembali ke atas */
#ke-atas{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;font-size:18px;line-height:1;
  color:#fff;background:linear-gradient(135deg,var(--biru),var(--biru-tua));
  box-shadow:0 10px 24px rgba(11,77,162,.32);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease-lembut),transform .3s var(--ease-lembut),visibility .3s}
#ke-atas.tampil{opacity:1;visibility:visible;transform:none}
@media print{#ke-atas,.nav-tirai{display:none!important}}