/* Panel "Solusi Kami / Our Solutions" (halaman Kemitraan). Konten dari Control Center > Solusi Kami (PUB.solutions). */
.sol-sec { position: relative; overflow: clip; padding-block: clamp(14px, 2.4vh, 28px) clamp(36px, 5vw, 64px); scroll-margin-top: 72px; }
/* Skala huruf tunggal untuk seluruh panel: judul, subjudul, isi, keterangan */
.sol { --sol-blue: #4458A2; --sol-blue-d: #384692; --sol-gray: #4A4B50; --sol-ease: cubic-bezier(.2, .8, .2, 1);
  --fs-title: clamp(22px, 2.2vw, 28px); --fs-sub: 15px; --fs-body: 14px; --fs-small: 12px; --lh-body: 1.5;
  --sol-pad: 54px; --sol-img: clamp(220px, calc(100vh - 612px), 330px);
  position: relative; font-family: var(--sf); }
.sol h2, .sol h3, .sol h4, .sol p, .sol li, .sol button, .sol input, .sol output, .sol a, .sol small, .sol span, .sol b { font-family: var(--sf); }
.sol svg text { font-family: var(--sf); }
.sol__head { text-align: center; margin: 0 auto clamp(14px, 2.2vh, 26px); max-width: 760px; }
.sol__k { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.2; color: #7E8494; font-weight: var(--w-display, 300); letter-spacing: -0.01em; }
.sol__h { margin: 2px 0 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.02em; font-weight: var(--w-display, 300); color: var(--ink); text-wrap: balance; }
.sol__k b, .sol__h b { color: var(--sol-blue); font-weight: var(--w-strong, 800); }
.sol__h b { background: linear-gradient(100deg, var(--sol-blue) 0%, var(--sol-blue) 38%, #9FB4FF 48%, #FFFFFF 50%, #9FB4FF 52%, var(--sol-blue) 62%, var(--sol-blue) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: solText 6s ease-in-out infinite; }
@keyframes solText { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sol__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 44px); align-items: stretch; }
.sol__left { display: flex; flex-direction: column; min-width: 0; }

/* Panggung kartu */
.sol__stage { position: relative; padding-top: var(--sol-pad); touch-action: pan-y; }
/* Kartu BEFORE dan AFTER selalu sama tinggi: gambar sama, pita teks mengisi sisa (garis abu dan biru sejajar) */
.sol__cards { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 36px); align-items: stretch; }
.sol__cards[data-kind="slider"] { grid-template-columns: 1fr; }
.solc { position: relative; display: flex; flex-direction: column; border-radius: 26px; background: #fff; box-shadow: 0 18px 44px rgba(20, 28, 55, .16), 0 2px 6px rgba(20, 28, 55, .06); min-width: 0; }
.solc__img { position: relative; flex: none; height: var(--sol-img); border-radius: 26px 26px 0 0; overflow: visible; }
.solc__bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.solc--before .solc__bg { background: linear-gradient(180deg, #ECECEE 0%, #C9CACE 60%, #9C9DA2 100%); }
.solc--after .solc__bg { background: linear-gradient(180deg, #F2F8F4 0%, #DCEFE5 55%, #C3E3D4 100%); }
.solc__ph { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100%; width: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.solc--after .solc__ph { height: 106%; transform: translateX(-56%); filter: drop-shadow(0 18px 24px rgba(20, 28, 55, .18)); }
.solc--before .solc__ph { border-radius: 0 0 0 0; clip-path: inset(0 0 0 0 round 26px 26px 0 0); }
.solc__svg { position: absolute; inset: 6% 6% 0; width: 88%; height: 94%; }
/* Desktop dan tablet: foto AFTER berlatar transparan bebas menonjol ke atas dan ke celah antar kartu (estetika desain). */
/* Foto berlatar penuh: isi bingkai, tidak menonjol, tidak terpotong aneh */
.solc__ph.is-cut, .solc--after .solc__ph.is-cut { inset: 0; left: 0; top: 0; width: 100%; height: 100%; max-width: 100%; transform: none; object-fit: cover; object-position: 50% 18%; filter: none; clip-path: none; border-radius: 26px 26px 0 0; }

.solc__band { position: relative; flex: 1 1 auto; padding: 14px clamp(14px, 1.8vw, 22px) 18px; border-radius: 0 0 26px 26px; color: #fff; }
.solc--before .solc__band { background: linear-gradient(180deg, #55565B, #3F4045); }
.solc--after .solc__band { background: linear-gradient(180deg, var(--sol-blue), var(--sol-blue-d)); }
.solc__band h3 { margin: 0 0 8px; text-align: center; font-size: var(--fs-sub); font-weight: 800; letter-spacing: .08em; line-height: 1.2; }
.solc__band ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.solc__band li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-body); line-height: 1.4; }
.solc__band li svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.solc--after .solc__band li svg circle { fill: #5CC8F5; }

/* Kartu slider transformasi hotel: gambar di kiri, daftar BEFORE/AFTER bertumpuk di kanan */
.solc--wide { flex-direction: row; }
.solc--wide .solc__img { flex: 1 1 56%; height: auto; min-height: calc(var(--sol-img) + 160px); border-radius: 26px 0 0 26px; }
.solc--wide .solc__img .cmp { border-radius: 26px 0 0 26px; }
.solc--wide .solc__band { flex: 1 1 44%; display: grid; grid-template-rows: 1fr 1fr; padding: 0; overflow: hidden; border-radius: 0 26px 26px 0; }
.solc--wide .solc__band > div { display: flex; flex-direction: column; justify-content: center; padding: 18px clamp(14px, 1.8vw, 24px); }
.solc--wide .solc__band > div:first-child { background: linear-gradient(180deg, #55565B, #3F4045); }
.solc--wide .solc__band > div:last-child { background: linear-gradient(180deg, var(--sol-blue), var(--sol-blue-d)); }
.solc--wide .solc__band > div:last-child li svg circle { fill: #5CC8F5; }
.cmp { position: absolute; inset: 0; border-radius: 26px 26px 0 0; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; --p: 50%; background: #9C9DA2; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; -webkit-user-drag: none; }
.cmp__b { filter: saturate(.78) contrast(.98); }
.cmp__a { clip-path: inset(0 0 0 var(--p)); }
.cmp__glow { position: absolute; top: 0; bottom: 0; left: var(--p); width: 120px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgba(255, 236, 170, .55), rgba(140, 170, 255, .18) 55%, transparent 80%); mix-blend-mode: screen; opacity: .55; transition: opacity .3s; }
.cmp.is-drag .cmp__glow { opacity: 1; }
.cmp__line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,255,255,.2), #fff 20%, #fff 80%, rgba(255,255,255,.2)); box-shadow: 0 0 12px rgba(255, 220, 130, .9), 0 0 28px rgba(110, 140, 255, .7); pointer-events: none; }
.cmp__knob { position: absolute; top: 50%; left: var(--p); width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, #EEF0F8 60%, #D9DEF2); box-shadow: 0 8px 24px rgba(20, 28, 55, .35), 0 0 0 4px rgba(255, 255, 255, .55), 0 0 26px rgba(255, 210, 110, .8); transition: transform .2s var(--sol-ease); }
.cmp.is-drag .cmp__knob { transform: translate(-50%, -50%) scale(1.1); }
.cmp__knob svg { width: 30px; height: 30px; }
.cmp__knob::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(255, 214, 120, .75); animation: solRing 2.4s ease-out infinite; }
@keyframes solRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.cmp__tag { position: absolute; bottom: 14px; padding: 6px 14px; border-radius: 999px; font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; color: #fff; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cmp__tag--b { left: 14px; background: rgba(40, 40, 46, .62); }
.cmp__tag--a { right: 14px; background: rgba(68, 88, 162, .78); }
.cmp__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cmp__hint { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(14, 19, 48, .55); color: #fff; font-size: var(--fs-small); font-weight: 600; pointer-events: none; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .4s; }
.cmp.is-used .cmp__hint { opacity: 0; }
.cmp input[type="range"] { position: absolute; inset: auto 0 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.cmp input[type="range"]:focus-visible ~ .cmp__knob { box-shadow: 0 0 0 4px var(--sol-blue), 0 8px 24px rgba(20, 28, 55, .35); }

/* Gelembung logo OTA */
.sol__bub { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bub { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); pointer-events: auto; transition: left .9s var(--sol-ease), top .9s var(--sol-ease), width .6s var(--sol-ease), height .6s var(--sol-ease); transform: translate(calc(var(--px, 0) * var(--d, 10px)), calc(var(--py, 0) * var(--d, 10px))); }
.bub__in { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: var(--bg, #fff); overflow: hidden;
  box-shadow: 0 10px 26px rgba(20, 28, 55, .2), inset 0 -6px 14px rgba(20, 28, 55, .08), inset 0 0 0 1px rgba(255, 255, 255, .65);
  animation: solFloat var(--t, 7s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.bub__in img { width: var(--fit, 72%); height: var(--fit, 72%); object-fit: contain; pointer-events: none; }
.bub__in.is-cover img { width: 100%; height: 100%; object-fit: cover; }
.bub__txt { position: relative; z-index: 2; font-size: calc(var(--s, 60px) * .2); font-weight: 800; letter-spacing: -0.02em; color: #287DFA; white-space: nowrap; pointer-events: none; }
.bub__in::before { content: ""; position: absolute; inset: 6% 18% auto 14%; height: 38%; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); pointer-events: none; z-index: 1; }
.bub__in::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from 40deg, rgba(255, 120, 200, .35), rgba(120, 220, 255, .35), rgba(255, 240, 140, .3), rgba(160, 130, 255, .35), rgba(255, 120, 200, .35));
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 72%); mask: radial-gradient(circle, transparent 60%, #000 72%); opacity: .8; }
.bub__in:hover { animation-play-state: paused; }
.bub__in:focus-visible { outline: 3px solid var(--sol-blue); outline-offset: 3px; }
.bub.is-pop .bub__in { animation: solPop .5s var(--sol-ease) forwards; }
.bub.is-back .bub__in { animation: solBack .7s var(--sol-ease) both, solFloat var(--t, 7s) ease-in-out .7s infinite alternate; }
.bub__ring { position: absolute; inset: -20%; border-radius: 50%; border: 2px solid rgba(110, 160, 255, .7); opacity: 0; pointer-events: none; }
.bub.is-pop .bub__ring { animation: solBurst .55s ease-out forwards; }
@keyframes solFloat {
  0% { transform: translate(0, 0) rotate(-3deg) scale(1); }
  33% { transform: translate(var(--fx, 6px), calc(var(--fy, 10px) * -1)) rotate(2deg) scale(1.04); }
  66% { transform: translate(calc(var(--fx, 6px) * -.6), calc(var(--fy, 10px) * -.4)) rotate(-1deg) scale(.98); }
  100% { transform: translate(calc(var(--fx, 6px) * .4), var(--fy, 10px)) rotate(3deg) scale(1.02); }
}
@keyframes solPop { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
@keyframes solBack { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes solBurst { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* Kontrol carousel */
.sol__nav { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 8vw, 110px); margin-top: 16px; }
.sol__arrow { position: relative; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: linear-gradient(180deg, var(--sol-blue), var(--sol-blue-d)); box-shadow: 0 10px 22px rgba(68, 88, 162, .35); transition: transform .18s var(--sol-ease), box-shadow .18s; }
.sol__arrow:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 28px rgba(68, 88, 162, .42); }
.sol__arrow:active { transform: scale(.95); }
.sol__arrow svg { position: relative; width: 20px; height: 20px; fill: currentColor; }
.sol__arrow::before { content: ""; position: absolute; inset: 2px 8px auto; height: 45%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none; }
.sol__dots { display: flex; gap: 10px; }
.sol__dot { width: 13px; height: 13px; border: 0; padding: 0; border-radius: 999px; background: #CDD0D8; cursor: pointer; transition: width .38s var(--sol-ease), background .26s; }
.sol__dot[aria-current="true"] { width: 30px; background: var(--sol-blue); }
.sol__pill { position: relative; margin: 14px 0 0; padding: 13px 24px; border-radius: 999px; text-align: center; color: #fff; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.25; background: linear-gradient(180deg, #5468B4, var(--sol-blue) 45%, var(--sol-blue-d)); box-shadow: 0 14px 30px rgba(68, 88, 162, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sol__pill > span { position: relative; z-index: 1; }
.sol__pill b { font-weight: 800; }

/* Panel kanan */
/* Panel kanan: puncaknya sejajar dengan puncak kartu kiri (sama-sama turun setinggi ruang gelembung) */
.sol__panel { position: relative; display: flex; flex-direction: column; margin-top: var(--sol-pad); padding: clamp(20px, 2.4vh, 28px) clamp(18px, 2.2vw, 30px) clamp(16px, 2vh, 22px); border-radius: 26px; color: #fff; background: linear-gradient(170deg, #5468B4 0%, var(--sol-blue) 45%, var(--sol-blue-d) 100%); box-shadow: 0 24px 60px rgba(20, 28, 55, .2), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sol__pbody { position: relative; z-index: 1; }
.sol__pbody > .sol__morph:first-child { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.sol__star { position: absolute; z-index: 3; top: -34px; right: 6px; width: 96px; height: 96px; pointer-events: none; animation: solStar 5.5s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(255, 190, 40, .55)); }
.sol__star .tw { transform-box: fill-box; transform-origin: center; animation: solTw 2.2s ease-in-out infinite; }
.sol__star .tw2 { animation-delay: .8s; } .sol__star .tw3 { animation-delay: 1.5s; }
@keyframes solStar { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-6px, -8px) rotate(8deg); } 50% { transform: translate(4px, -14px) rotate(-4deg); } 75% { transform: translate(6px, -4px) rotate(6deg); } }
@keyframes solTw { 0%, 100% { transform: scale(.3); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }
.sol__pt { margin: 0; text-align: center; font-size: var(--fs-title); font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.sol__pd { margin: 8px auto 0; max-width: 420px; text-align: center; font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255, 255, 255, .92); }
.sol__pd b { font-weight: 800; color: #fff; }
.sol__items { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 12px; text-align: center; }
.sol__items li { padding: 10px 8px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.sol__items h4 { margin: 0; font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; line-height: 1.25; }
.sol__items p { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.45; color: rgba(255, 255, 255, .86); }

/* Simulator di kotak putih */
.sol__pbody { display: flex; flex-direction: column; flex: 1 1 auto; }
.ssim { margin-top: auto; padding-top: 14px; }
.ssim__box { background: #fff; color: var(--ink); border-radius: 18px; padding: 14px clamp(12px, 1.6vw, 18px) 12px; box-shadow: 0 10px 26px rgba(14, 19, 48, .22); }
.ssim__t { margin: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 8px; text-align: center; color: var(--sol-blue); font-size: var(--fs-sub); font-weight: 800; line-height: 1.2; letter-spacing: .04em; }
.ssim__t small { font-size: 11px; letter-spacing: .14em; color: #7E8494; font-weight: 700; }
.ssim__f { display: grid; gap: 4px; margin: 8px 0; }
.ssim__r { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; font-size: var(--fs-small); color: var(--muted); }
.ssim__r output { font-weight: 800; color: var(--ink); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.ssim__r input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--sol-blue); height: 20px; }
.ssim__res { display: grid; gap: 8px; }
.ssim__c { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--blue-tint, #EEF0F8); }
.ssim__c .tag { grid-row: span 2; padding: 4px 8px; border-radius: 8px; background: var(--sol-blue); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ssim__c small { font-size: 11px; line-height: 1.3; color: var(--muted); }
.ssim__c strong { font-size: var(--fs-sub); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ssim__res.is-2 { grid-template-columns: 1fr 1fr; }
.ssim__res.is-2 .ssim__c { grid-template-columns: 1fr; gap: 3px; align-content: start; padding: 9px 10px; }
.ssim__res.is-2 .ssim__c .tag { grid-row: auto; justify-self: start; }
.ssim__c strong.is-low { color: #B23A3A; }
.ssim__c em { grid-column: 2; font-style: normal; font-size: 11px; color: var(--muted); }
.ssim__res.is-2 .ssim__c em { grid-column: auto; }
.ssim__c--fr { grid-template-columns: auto 1fr; background: #FFF7E0; }
.ssim__c--fr .tag { background: #C08A00; }
.ssim__n { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); text-align: center; }
.ssim__go { display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 0; font-size: var(--fs-small); font-weight: 700; color: var(--sol-blue); text-decoration: none; }
.ssim__go span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sol-blue); color: #fff; }
.ssim__go span svg { width: 13px; height: 13px; fill: currentColor; }
.ssim__ft { text-align: center; }
.ssim__p { margin: 10px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); text-align: center; }

/* Animasi pergantian slide: morph lewat View Transitions, cadangan lewat kelas */
.sol.is-out .sol__morph { opacity: 0; filter: blur(10px); transform: scale(.97) translateX(var(--sol-dx, 0)); transition: opacity .24s ease, filter .24s ease, transform .24s ease; }
.sol.is-in .sol__morph { animation: solIn .52s var(--sol-ease) both; }
@keyframes solIn { from { opacity: 0; filter: blur(12px); transform: scale(.96) translateX(calc(var(--sol-dx, 0) * -1)); } to { opacity: 1; filter: none; transform: none; } }
::view-transition-group(sol-a), ::view-transition-group(sol-b), ::view-transition-group(sol-p), ::view-transition-group(sol-pill), ::view-transition-group(sol-sim) { animation-duration: .62s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(sol-a), ::view-transition-old(sol-b), ::view-transition-old(sol-p), ::view-transition-old(sol-pill), ::view-transition-old(sol-sim) { animation: solVtOut .34s ease both; }
::view-transition-new(sol-a), ::view-transition-new(sol-b), ::view-transition-new(sol-p), ::view-transition-new(sol-pill), ::view-transition-new(sol-sim) { animation: solVtIn .62s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-image-pair(sol-a), ::view-transition-image-pair(sol-b) { isolation: auto; }
@keyframes solVtOut { to { opacity: 0; filter: blur(14px); } }
@keyframes solVtIn { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: none; } }

/* Efek kilap: sapuan cahaya berkala di kartu, panel, dan pita judul */
.gloss { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.gloss::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 50%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, 0) 100%); transform: translateX(0) skewX(-18deg); animation: solShine 7s cubic-bezier(.45, .05, .25, 1) infinite; animation-delay: var(--gd, .6s); }
.gloss::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 34%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.solc .gloss::after { background: none; }
.gloss--2 { --gd: 1.1s; }
.sol__panel > .gloss { --gd: 1.8s; }
.sol__pill > .gloss { --gd: 2.6s; }
@keyframes solShine { 0%, 64% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(440%) skewX(-18deg); } }
.solc:hover .gloss::before, .sol__panel:hover > .gloss::before { animation-duration: 3.2s; }

/* Animasi kecil di ilustrasi */
.solc__svg .fl { animation: solBob 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.solc__svg .fl2 { animation-delay: -1.5s; } .solc__svg .fl3 { animation-delay: -3s; }
.solc__svg .gl { animation: solTw 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes solBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (max-width: 1024px) {
  .sol { --sol-img: clamp(230px, 34vw, 320px); }
  .sol__grid { grid-template-columns: 1fr; }
  .sol__panel { max-width: 640px; width: 100%; margin: 26px auto 0; }
}
/* Layar laptop pendek: rapatkan agar seluruh panel muat satu layar */
@media (max-height: 820px) and (min-width: 1025px) {
  .sol { --sol-pad: 42px; --sol-img: clamp(210px, calc(100vh - 590px), 300px); --fs-title: 24px; }
  .sol__head { margin-bottom: 8px; }
  .sol__panel { padding-top: 18px; padding-bottom: 14px; }
  .sol__items { margin-top: 8px; }
  .sol__items li { padding: 8px 6px; }
  .ssim { padding-top: 10px; }
  .ssim__box { padding: 10px 14px 10px; }
  .ssim__f { margin: 6px 0; gap: 2px; }
  .ssim__r input { height: 18px; }
  .ssim__n { margin-top: 6px; }
  .ssim__go { margin-top: 4px; }
  .sol__nav { margin-top: 12px; }
  .sol__arrow { width: 44px; height: 44px; }
  .sol__pill { margin-top: 10px; padding: 11px 22px; font-size: 17px; }
  .solc--wide .solc__img { flex-basis: 52%; min-height: calc(var(--sol-img) + 150px); }
  .solc--wide .solc__band > div { padding: 12px 18px; }
  .solc--wide .solc__band ul { gap: 4px; }
}
@media (max-width: 640px) {
  .sol__stage { padding-top: 46px; }
  .sol__cards { gap: 12px; }
  .solc, .solc__img, .solc__bg, .cmp { border-radius: 18px 18px 0 0; }
  .solc { border-radius: 18px; }
  .solc__band { border-radius: 0 0 18px 18px; padding: 12px 10px 14px; }
  .sol { --fs-body: 12.5px; --fs-sub: 14px; --sol-pad: 46px; }
  .solc__band h3 { margin-bottom: 6px; }
  .solc__band li { gap: 5px; }
  .solc__band li svg { width: 13px; height: 13px; }
  .solc__img { height: 210px; }
  .sol__items { grid-template-columns: 1fr; }
  .ssim__res.is-2 { grid-template-columns: 1fr; }
  .ssim__res.is-2 .ssim__c { grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; }
  .ssim__res.is-2 .ssim__c .tag { grid-row: span 2; }
  .ssim__res.is-2 .ssim__c em { grid-column: 2; }
  /* HP: foto orang masuk penuh ke bingkai, tidak menonjol dan tidak terpotong */
  .solc--after .solc__img { overflow: hidden; border-radius: 18px 18px 0 0; }
  .solc__ph, .solc--after .solc__ph { left: 0; right: 0; width: 100%; height: 100%; max-width: 100%; transform: none; object-fit: contain; object-position: 50% 100%; clip-path: none; }
  .solc__ph.is-cut, .solc--after .solc__ph.is-cut { border-radius: 18px 18px 0 0; }
  .solc--wide { flex-direction: column; }
  .solc--wide .solc__img, .solc--wide .solc__img .cmp { height: 380px; min-height: 0; flex: none; border-radius: 18px 18px 0 0; }
  .solc--wide .solc__band { grid-template-rows: none; grid-template-columns: 1fr 1fr; border-radius: 0 0 18px 18px; }
  .solc--wide .solc__band > div { padding: 12px 10px 14px; justify-content: flex-start; }
  .sol__nav { margin-top: 20px; }
  .sol__arrow { width: 46px; height: 46px; }
  .sol__pill { padding: 12px 18px; font-size: 15px; }
  .sol__star { width: 72px; height: 72px; top: -26px; }
  .cmp__knob { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .bub__in, .sol__star, .sol__star .tw, .solc__svg .fl, .solc__svg .gl, .cmp__knob::after, .gloss::before, .sol__h b { animation: none !important; }
  .gloss::before { display: none; }
  .bub { transition: none; }
  .sol.is-in .sol__morph { animation: none; }
}