/* betapi-refresh.css — bright, modern visual refresh for BETAPI. */
:root{
  --betapi-primary:#12a4a9; --betapi-primary-600:#0e878b;
  --betapi-secondary:#ff6b57; --betapi-secondary-600:#e75845;
  --betapi-ink:#1e2a2f; --betapi-ink-weak:#5b6b73;
  --betapi-bg:#f7fafb; --betapi-card:#ffffff;
  --betapi-ring:rgba(18,164,169,.25);
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
body{ background:var(--betapi-bg); color:var(--betapi-ink); font-family:'Poppins','Roboto',sans-serif; font-weight:400; line-height:1.65; overflow-x:hidden; }
h1,h2,h3,.h1,.h2,.h3{ font-family:'Poppins','Roboto',sans-serif; color:var(--betapi-ink); letter-spacing:.2px; }
h4,h5,h6,.h4,.h5,.h6{ font-family:'Poppins','Roboto',sans-serif; }
p,.lead,.info-card ul li,.info-card p,.careers-list .meta{ color:var(--betapi-ink-weak); font-size:1.06rem; line-height:1.7; letter-spacing:.15px; }
.heading_container p{ max-width:620px; margin-left:auto; margin-right:auto; }
h4,h5,h6{ color:var(--betapi-ink); }
/* Navbar */
.header_section{ background:rgba(255,255,255,.96); backdrop-filter:blur(12px); box-shadow:0 18px 48px -34px rgba(17,40,53,.55); position:sticky; top:0; z-index:1030; }
.custom_nav-container{ padding:12px 0; }
.navbar-brand{ padding:0; display:flex; align-items:center; }
.navbar-logo{ height:44px; width:auto; max-width:210px; object-fit:contain; display:block; }
.navbar-brand span{ color:var(--betapi-primary); letter-spacing:.4px; }
.custom_nav-container .navbar-nav .nav-item .nav-link{ color:var(--betapi-ink); text-transform:none; font-weight:600; }
.custom_nav-container .nav-item.active .nav-link,
.custom_nav-container .nav-link:hover{ color:var(--betapi-primary); }
.custom_nav-container .navbar-toggler{ border:1px solid rgba(30,42,47,.18); border-radius:10px; padding:6px 8px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.custom_nav-container .navbar-toggler span{ margin:0; width:28px; height:3px; border-radius:999px; background:var(--betapi-ink); }
.custom_nav-container .navbar-toggler span::before,
.custom_nav-container .navbar-toggler span::after{ display:none !important; content:none; }
.custom_nav-container .navbar-toggler[aria-expanded="true"] span,
.custom_nav-container .navbar-toggler[aria-expanded="true"] span::before,
.custom_nav-container .navbar-toggler[aria-expanded="true"] span::after{ background:var(--betapi-primary); }
@media (max-width: 991.98px){
  .custom_nav-container .navbar-toggler{ display:flex; }
}
/* Buttons */
.btn{ border-radius:12px !important; padding:12px 18px !important; border:none !important;
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease; }
.btn-primary{ background:var(--betapi-primary) !important; color:#fff !important; }
.btn-primary:hover{ background:var(--betapi-primary-600) !important; transform:translateY(-1px);
  box-shadow:0 8px 22px -12px var(--betapi-ring); }
.btn-secondary{ background:var(--betapi-secondary) !important; color:#fff !important; }
.btn-secondary:hover{ background:var(--betapi-secondary-600) !important; transform:translateY(-1px);
  box-shadow:0 8px 22px -12px rgba(255,107,87,.35); }
/* Hero */
.hero_area{ background:linear-gradient(180deg,#ffffff 0%,#f3fbfc 100%) !important; min-height:auto; }
.slider_section{ padding:112px 0 84px; }
.slider_section .detail-box h1{ font-size:2.6rem; line-height:1.15; }
.slider_section .detail-box h1 span{ color:var(--betapi-primary) !important; font-size:inherit; display:inline-block; }
.slider_section .detail-box p{ color:var(--betapi-ink-weak); font-size:1.05rem; }
.slider_section .img-box img{ border-radius:18px; box-shadow:0 10px 30px -12px rgba(0,0,0,.18); }
@media (max-width: 992px){ .slider_section{ padding:96px 0 72px; } }
@media (max-width: 576px){ .slider_section{ padding:84px 0 64px; } }
/* Cards / sections */
.section-sm{ padding:56px 0; } .section-md{ padding:80px 0; } .section-lg{ padding:110px 0; }
.container{ max-width:1240px; }
.service_section .box{ background:var(--betapi-card) !important; border:1px solid #eef4f6; border-radius:18px;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.22); padding:24px; }
.service_section .box .img-box{ background:var(--betapi-primary) !important; }
.service_section .box:hover{ transform:translateY(-4px); box-shadow:0 18px 44px -24px rgba(0,0,0,.28); }
.service-grid .box{ text-align:center; display:flex; flex-direction:column; align-items:center; height:100%; gap:10px; }
.service-grid .box .img-box{ margin-bottom:6px; border-radius:14px; width:92px; height:92px; display:grid; place-items:center; }
.service-grid .box ul{ margin-top:auto; }
/* Careers teaser/list */
.careers-list .career-card{ background:var(--betapi-card); border:1px solid #eef4f6; border-radius:14px;
  padding:18px; margin-bottom:14px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.careers-list .meta{ color:var(--betapi-ink-weak); }
.benefit-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:#e9f7f8; color:var(--betapi-primary); border:1px solid #d7f0f1; font-weight:600; margin:6px 6px 0 0; }
.section-alt{ background:#eaf5f6; }
.info-card{ background:var(--betapi-card); border:1px solid #e0edef; border-radius:18px; padding:26px; box-shadow:0 18px 46px -30px rgba(13,60,72,.35); height:100%; }
.info-card h4{ font-weight:600; margin-bottom:12px; }
.info-card p{ color:var(--betapi-ink-weak); margin-bottom:0; }
.info-card ul{ color:var(--betapi-ink-weak); padding-left:1.2rem; margin:0; }
.info-card ul li{ margin-bottom:6px; }
.info-card ul li:last-child{ margin-bottom:0; }
.process-flow .process-step{ background:var(--betapi-card); border:1px solid #e0edef; border-radius:14px; padding:18px; height:100%; box-shadow:0 12px 30px -20px rgba(10,60,72,.35); transition:transform .15s ease, box-shadow .15s ease; }
.process-flow .process-step:hover{ transform:translateY(-4px); box-shadow:0 16px 42px -22px rgba(10,60,72,.42); }
.process-flow .process-step h5{ font-size:1.06rem; margin-top:12px; margin-bottom:8px; }
.process-flow .process-step p{ margin:0; }
.process-flow .step-icon{ position:relative; width:52px; height:52px; border-radius:50%; background:#e9f7f8; color:var(--betapi-primary); display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; border:1px solid #d7f0f1; }
.process-flow .step-number{ position:absolute; bottom:-6px; right:-8px; background:var(--betapi-secondary); color:#fff; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; box-shadow:0 6px 16px -8px rgba(255,107,87,.8); }
@media (max-width: 767.98px){
  #o-nama .info-card{ margin-bottom:24px; }
  #o-nama .row:last-of-type .col-md-6:last-child .info-card{ margin-bottom:0; }
}
/* Footer */
.info_section{ background:#0c1f2b; color:#dde7ec; } .info_section a{ color:#cfe9ee; } .info_section a:hover{ color:#fff; }
.footer-bottom{ gap:16px; }
.footer-branding{ display:flex; flex-direction:column; gap:4px; }
.footer-affiliate{ font-size:.95rem; }
.affiliation-inline{ display:inline-flex; align-items:center; gap:10px; font-weight:700; color:#0c1f2b; }
.affiliation-inline a{ color:inherit; }
.affiliation-inline a:hover{ color:#0e878b; }
.affiliation-logo{ height:32px; width:auto; }
/* Accessibility */
a:focus, button:focus, .btn:focus{ outline:3px solid var(--betapi-ring) !important; outline-offset:2px;
  box-shadow:0 0 0 4px var(--betapi-ring) !important; }
/* Responsive */
@media (max-width: 768px){
  .slider_section .detail-box h1{ font-size:2.2rem; }
  .slider_section .detail-box h1 span{ display:block; margin-top:6px; }
  .careers-list .career-card{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 575.98px){
  .slider_section .detail-box h1{ font-size:1.85rem; line-height:1.28; }
}

/* Reveal animations */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease; will-change:opacity, transform; }
.reveal.reveal-left{ transform:translateX(-36px); }
.reveal.reveal-right{ transform:translateX(36px); }
.reveal.reveal-up{ transform:translateY(32px); }
.reveal.reveal-down{ transform:translateY(-32px); }
.reveal.is-visible{ opacity:1; transform:translate3d(0,0,0); }
.reveal-delay-1{ transition-delay:.12s; }
.reveal-delay-2{ transition-delay:.24s; }
.reveal-delay-3{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal.reveal-left,
  .reveal.reveal-right,
  .reveal.reveal-up,
  .reveal.reveal-down{ opacity:1; transform:none !important; transition:none !important; }
}

/* Gallery overlay band */
.gallery-overlay{ position:relative; margin:64px auto; max-width:1320px; overflow:hidden; }
.gallery-overlay__card{ position:relative; z-index:2; overflow:hidden; background:#0c1f2b; border-radius:28px; padding:32px 36px; box-shadow:0 30px 68px -36px rgba(12,31,43,.65); border:1px solid rgba(255,255,255,.08); }
.gallery-overlay__grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:32px; }
.gallery-overlay__visual{ position:relative; min-height:380px; }
.gallery-overlay__slideshow{ position:absolute; inset:-4%; filter:saturate(1.06) contrast(1.06) blur(0); display:block; opacity:1; }
.gallery-overlay__slideshow .frame{ position:absolute; background-size:cover; background-position:center; border-radius:28px; transform:scale(1.006); box-shadow:0 26px 68px -38px rgba(0,0,0,.4); transition:opacity .9s ease, transform .9s ease, filter .35s ease; width:var(--frame-w,60%); aspect-ratio:var(--frame-ratio, 4/3); opacity:1; filter:saturate(1.02) contrast(1.02); }
.gallery-overlay__slideshow .frame.is-swapping{ opacity:0; transform:scale(.988); filter:saturate(.9); }
.gallery-overlay__slideshow .frame.is-portrait{ --frame-ratio: 2/3; }
.gallery-overlay__slideshow .frame.is-landscape{ --frame-ratio: 16/10; }
.gallery-overlay__slideshow .frame-1{ --frame-w:66%; top:6%; left:2%; }
.gallery-overlay__slideshow .frame-2{ --frame-w:44%; top:4%; right:6%; }
.gallery-overlay__slideshow .frame-3{ --frame-w:60%; bottom:2%; left:26%; }
.gallery-overlay__slideshow .frame-4{ --frame-w:48%; top:10%; left:10%; }
.gallery-overlay__slideshow .frame-5{ --frame-w:66%; bottom:8%; right:4%; }
.gallery-overlay__slideshow .frame-6{ --frame-w:52%; bottom:12%; left:0; }
.gallery-overlay::after{ content:""; position:absolute; inset:18px; border-radius:22px; background:radial-gradient(120% 120% at 20% 20%, rgba(18,164,169,.08), transparent 48%), linear-gradient(135deg, rgba(12,31,43,.12) 0%, rgba(12,31,43,.12) 50%, rgba(12,31,43,.16) 100%); z-index:1; pointer-events:none; }
.gallery-overlay__card::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(8,24,33,.34) 0%, rgba(12,31,43,.32) 40%, rgba(12,31,43,.28) 100%); z-index:0; }
.gallery-overlay__card > *{ position:relative; z-index:2; }
.gallery-overlay__content{ color:#f1fbfd; background:linear-gradient(135deg, rgba(12,31,43,.78), rgba(12,31,43,.64)); border-radius:18px; padding:18px 18px 16px; box-shadow:0 18px 48px -28px rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.gallery-overlay__content h2{ color:#fff; font-size:2.1rem; margin-bottom:14px; }
.gallery-overlay__content .lead{ color:#e1f3f7; max-width:720px; margin-bottom:14px; }
.eyebrow{ text-transform:uppercase; letter-spacing:2px; font-weight:700; font-size:.78rem; color:#9fe3e8; margin-bottom:12px; display:block; }
.eyebrow--desktop{ margin-bottom:10px; }
.gallery-overlay__eyebrow-mobile{ display:none; color:var(--betapi-ink); margin:0 0 12px; letter-spacing:1.6px; font-weight:700; }
.mini-meta{ color:#c3dfe4; font-weight:600; letter-spacing:.3px; display:inline-block; margin-top:2px; }
@media (max-width: 1199.98px){
  .gallery-overlay__grid{ grid-template-columns:1fr 1.05fr; }
}
@media (max-width: 991.98px){
  .gallery-overlay{ margin:42px 16px; }
  .gallery-overlay__card{ padding:26px 24px; border-radius:22px; }
  .gallery-overlay__grid{ grid-template-columns:1fr; gap:18px; }
  .gallery-overlay__visual{ min-height:300px; order:1; }
  .gallery-overlay__content{ order:2; }
  .gallery-overlay__slideshow{ inset:-2%; }
  .gallery-overlay__content h2{ font-size:1.8rem; }
}
@media (max-width: 575.98px){
  .gallery-overlay__card{ padding:22px 18px; }
  .gallery-overlay__visual{ min-height:260px; }
  .gallery-overlay__slideshow .frame{ border-radius:18px; }
  .eyebrow--desktop{ display:none; }
  .gallery-overlay__eyebrow-mobile{ display:block; color:#0e878b; }
}
@media (prefers-reduced-motion: reduce){
  .gallery-overlay__slideshow .frame{ animation:none; opacity:1; }
}