/* ==========================================================================
   PT BAS - Inner-page styles (solutions, projects, products, ...).
   Loaded after styles.css. Reuses tokens + glacier language.
   ========================================================================== */

/* ----- Page hero (navy, glacier) ----- */
.bas-pagehero { background: var(--bas-hero-bg); position: relative; overflow: hidden; padding: 60px 0 54px; }
.bas-pagehero--img { background-size: cover; background-position: center; }
/* Duotone biru merek + ARUS AIR dalam satu lapisan. Kedua motif ditumpuk di
   ::before (bukan ::after, yang dipakai lengkung air) supaya halaman dalam
   punya keduanya persis seperti hero beranda. Hanya lapisan gelombang yang
   digeser saat animasi; dua gradien tetap diam. Alfa kiri .95 = kontras aman. */
.bas-pagehero--img::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='120'%20viewBox='0%200%201200%20120'%3E%3Cg%20fill='none'%20stroke='%2314B8D4'%20stroke-width='1.5'%3E%3Cpath%20d='M0%2064%20C200%2040%20400%2088%20600%2064%20S1000%2040%201200%2064'%20stroke-opacity='.38'/%3E%3Cpath%20d='M0%2090%20C220%2066%20420%20114%20620%2090%20S1020%2066%201200%2090'%20stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(0deg, rgba(20,184,212,.12) 0%, rgba(20,184,212,0) 46%),
    linear-gradient(115deg, rgba(6,28,54,.95) 0%, rgba(8,38,68,.82) 55%, rgba(10,50,82,.58) 100%);
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-size: 1200px 120px, cover, cover;
  background-position: 0 bottom, 0 0, 0 0;
  animation: bas-arus-ph 16s linear infinite;
}
@keyframes bas-arus-ph { to { background-position: -1200px bottom, 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .bas-pagehero--img::before { animation: none; } }
/* LENGKUNG AIR: pagehero berakhir dengan kurva, bukan garis lurus - bentuk
   yang sama dengan batas hero beranda supaya halaman dalam tidak terasa
   "beda situs". Warna diambil dari token lewat mask; di SEMUA halaman dalam
   seksi setelah pagehero berlatar var(--bas-bg), jadi kurvanya menyatu.
   z-index 0 supaya menutupi foto tetapi tetap di bawah teks (container z-1). */
.bas-pagehero--img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 0; pointer-events: none;
  background: var(--bas-bg);
  --bas-wave: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='56'%20viewBox='0%200%201200%2056'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M0%2028%20C220%203%20420%2048%20620%2028%20C820%208%201000%2039%201200%2023%20L1200%2056%20L0%2056%20Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--bas-wave); mask-image: var(--bas-wave);
  -webkit-mask-size: 100% 56px; mask-size: 100% 56px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 bottom; mask-position: 0 bottom;
}
.bas-pagehero--img .container { position: relative; z-index: 1; }
.bas-breadcrumb { display: flex; gap: 8px; align-items: center; color: #9FB0C4; font-size: .82rem; margin-bottom: 14px; }
.bas-breadcrumb a { color: #9FB0C4; text-decoration: none; }
.bas-breadcrumb a:hover { color: #fff; }
.bas-pagehero__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--bas-accent); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.bas-pagehero__eyebrow i { font-size: 15px; }
.bas-pagehero__title { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.022em; margin: 0 0 14px; }
.bas-pagehero__sub { color: #AEBED2; font-size: 1.05rem; line-height: 1.7; max-width: 620px; }

/* ----- Solution sections ----- */
.bas-sol { padding: 96px 0; scroll-margin-top: calc(var(--bas-header-h) + 24px); }
.bas-sol--alt { background: var(--bas-surface); }
@media (max-width: 991.98px) { .bas-sol { padding: 64px 0; } }
.bas-sol__media { border-radius: var(--bas-radius); overflow: hidden; box-shadow: var(--bas-card-shadow); aspect-ratio: 4 / 3; }
.bas-sol__media img { width: 100%; height: 100%; object-fit: cover; }

.bas-feature { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.bas-feature i { color: var(--bas-accent-700); font-size: 18px; margin-top: 2px; flex: none; }
[data-theme="dark"] .bas-feature i { color: var(--bas-ice); }
.bas-feature span { color: var(--bas-text-muted); font-size: .95rem; }

/* ----- Process flow ----- */
.bas-process { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.bas-process__step { flex: 1; min-width: 84px; text-align: center; }
.bas-process__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bas-accent-tint); color: var(--bas-accent-700); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 6px; }
[data-theme="dark"] .bas-process__ico { background: rgba(125,211,252,.12); color: var(--bas-ice); }
.bas-process__label { font-size: .74rem; color: var(--bas-text-muted); }

/* ----- Spec table (glacier data table) ----- */
.bas-spec { padding: 24px; overflow-x: auto; }
.bas-spec h3 { margin-bottom: 14px; }
.bas-spec table { width: 100%; min-width: 460px; border-collapse: collapse; }
.bas-spec th { text-align: left; font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--bas-text); border-bottom: 1px solid var(--bas-border); padding: 11px 10px; }
.bas-spec td { padding: 11px 10px; border-bottom: 1px solid var(--bas-border); font-size: .9rem; color: var(--bas-text-muted); }
.bas-spec tr:last-child td { border-bottom: none; }

/* ----- Map embed ----- */
.bas-map { border-radius: var(--bas-radius); overflow: hidden; box-shadow: var(--bas-card-shadow); height: 300px; }
.bas-map iframe { width: 100%; height: 100%; border: 0; display: block; }