.
(Sempat dicoba pakai teknik grid-template-rows 0fr→1fr, tapi padding
bawaan membentuk lantai minimum ~22px yang tidak pernah collapse
penuh ke 0 — makanya dipakai max-height yang diukur langsung dari
scrollHeight, bebas dari masalah itu.) */
.sd-faq__a{
max-height:0;
overflow:hidden;
transition:max-height .55s cubic-bezier(.16,1,.3,1);
}
.sd-faq__a p{
max-width:60ch;color:var(--muted-foreground);
font-size:clamp(.85rem,1.1vw,.94rem);line-height:1.75;text-wrap:pretty;
margin:0;
padding-block:.15rem 1.2rem;
opacity:0;
transform:translateY(-8px);
transition:opacity .4s ease .05s,transform .45s cubic-bezier(.16,1,.3,1) .05s;
}
.sd-faq__item.is-open .sd-faq__a p{opacity:1;transform:translateY(0);}
/* 3-kolom grid ALVA-style */
.svc-alva-grid{
display:grid;
grid-template-columns:1fr;
}
@media(min-width:768px){
.svc-alva-grid{
grid-template-columns:repeat(3,1fr);
}
.svc-alva-grid--two{
grid-template-columns:repeat(2,1fr);
}
}
.svc-alva-col{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:420px;
padding:2.5rem 4rem;
border-bottom:1px solid var(--border);
gap:2rem;
transition:background .25s ease;
}
.svc-alva-col:hover{
background:rgba(255,255,255,0.02);
}
@media(min-width:768px){
.svc-alva-col{
border-bottom:none;
border-right:1px solid var(--border);
}
.svc-alva-col:last-child{
border-right:none;
}
}
.svc-alva-col__top{
display:flex;
flex-direction:column;
gap:.75rem;
}
.svc-alva-num{
font-size:.8rem;
font-weight:600;
color:var(--muted-foreground);
letter-spacing:.05em;
}
.svc-alva-title{
font-family:var(--font-heading);
font-size:1.9rem;
font-weight:700;
line-height:1.15;
}
.svc-alva-desc{
color:var(--muted-foreground);
font-size:.88rem;
line-height:1.7;
margin-top:auto;
}
/* ============ INSIGHT PAGE ============ */
.article-grid{
display:grid;
grid-template-columns:1fr;
gap:2rem;
margin-top:1rem;
}
.article-card{
display:flex;
flex-direction:column;
}
.article-card__photo{
aspect-ratio:3/2;
overflow:hidden;
/* sedikit rounded, senada dengan kartu portofolio (.work-card__thumb) */
border-radius:var(--radius);
}
/* Lapisan reveal terpisah dari ![]()
itu sendiri: GSAP menggeser wrapper ini
(translateY) untuk mask reveal saat scroll, sementara transform pada
.article-card__img tetap murni milik efek zoom hover CSS yang sudah ada —
kalau digabung di satu elemen, transform inline dari GSAP akan menimpa
transform:scale(1.04) hover secara permanen. */
.article-card__reveal{
width:100%;
height:100%;
will-change:transform;
}
.article-card__img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .55s cubic-bezier(.25,.46,.45,.94);
}
.article-card:hover .article-card__img{transform:scale(1.04);}
.article-card__body{
padding:.9rem 0 0;
display:flex;
flex-direction:column;
gap:.5rem;
}
.article-card__tag{
font-family:var(--font-heading);
font-weight:700;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.09em;
color:var(--muted-foreground);
}
.article-card__headline{
font-family:var(--font-heading);
font-weight:600;
font-size:1rem;
line-height:1.45;
color:#fff;
}
.article-card__cta{
font-family:var(--font-heading);
font-weight:600;
font-size:.78rem;
color:var(--muted-foreground);
margin-top:.15rem;
transition:color .2s;
}
.article-card:hover .article-card__cta{color:var(--accent-brand);}
.article-card.is-hidden{display:none;}
@media(min-width:640px){
.article-grid{grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem;}
}
@media(min-width:1024px){
.article-grid{grid-template-columns:repeat(3,1fr);}
.article-card__headline{font-size:1.05rem;}
}
/* ============ FOOTER ============ */
.footer{
position:relative;
padding-top:0;
background:var(--background);
overflow:hidden;
}
.footer::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:2px;
background:linear-gradient(to right, #F5C518, #E8470A);
z-index:2;
}
.footer::after{
content:'';
position:absolute;
inset:0;
background-image:url('../../images/pattern-footer.webp');
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
opacity:0.22;
mix-blend-mode:screen;
pointer-events:none;
z-index:0;
}
.footer__wave{
display:none;
}
.footer__inner{
position:relative;
z-index:1;
padding-block:4rem 2.5rem;
text-align:center;
}
.footer__tagline{
font-family:var(--font-heading);
font-size:2.25rem;
font-weight:700;
}
.footer__sub{
color:var(--muted-foreground);
margin-top:.5rem;
}
.footer__bottom{
display:flex;
flex-direction:column;
gap:1rem;
align-items:center;
margin-top:2rem;
padding-top:2rem;
border-top:1px solid var(--border);
font-size:.8rem;
color:var(--muted-foreground);
}
.footer__social{display:flex;gap:1rem;}
.footer__social a{
border:1px solid var(--border);
border-radius:50%;
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
font-size:.7rem;
}
@media (min-width:768px){
.footer__inner{text-align:left;}
.footer__bottom{flex-direction:row;justify-content:space-between;}
}
/* ============ SCROLL REVEAL ============ */
.reveal{
opacity:0;
transform:translateY(22px);
transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{opacity:1;transform:translateY(0);}
/* ============ ABOUT HERO ============ */
/* --- Statement Heading --- */
.about-hero{
padding-bottom:0;
}
.about-hero__head{
min-height:calc(100vh - 96px);
padding-block:1.25rem 3rem;
display:flex;
align-items:center;
justify-content:center;
}
.about-hero__statement{
font-family:var(--font-body);
font-size:clamp(1.6rem, 3vw, 2.75rem);
font-weight:700;
line-height:1.25;
text-transform:uppercase;
text-align:center;
max-width:70rem;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:.3em 0;
}
.reveal-word{
color:#1a1a1a;
transition:color .5s ease;
margin-right:.28em;
display:inline-block;
}
.reveal-word.is-lit{
color:#ffffff;
}
/* --- Stacked Cards 5W1H — frosted glass halus, kontras jelas, tanpa noise warna --- */
.about-hero__cards {
position: relative;
padding: 14rem 5% 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6rem;
}
.about-hero__cards::before{
/* Satu glow amber sangat lembut saja — supaya tidak bocor jadi warna kotor lewat kaca card */
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(60% 32% at 50% 0%, rgba(255,176,32,.09) 0%, transparent 76%),
#000000;
}
.acard {
position: sticky;
z-index: 1;
top: 15vh;
width: 100%;
max-width: 1180px;
height: 66vh;
min-height: 540px;
padding-bottom: 5rem;
will-change: transform;
}
.acard__inner {
width: 100%;
height: 100%;
position: relative;
border-radius: 32px;
overflow: hidden;
transform-origin: top center;
/* Permukaan gelap sesuai mockup desain (images/about/5w1h/step-0*.png):
kartu nyaris hitam + watermark logogram, bukan blok oranye rata. */
background:
radial-gradient(120% 100% at 12% 0%, #1A1614 0%, #0B0A09 55%, #060505 100%);
border: 1px solid rgba(255,255,255,.09);
box-shadow:
0 40px 90px rgba(0,0,0,.7),
0 0 0 1px rgba(255,255,255,.03),
inset 0 1px 0 rgba(255,255,255,.06);
--acard-fg:#FFFFFF;
--acard-fg-soft:rgba(255,255,255,.66);
--acard-label:#000000;
--acard-chip-bg:rgba(255,255,255,.05);
--acard-chip-brd:rgba(255,255,255,.12);
--acard-divider:rgba(255,255,255,.14);
/* digeser oleh about-cards.js untuk parallax watermark */
--acard-wm:0px;
will-change: transform, opacity;
}
/* Watermark brand pattern — tekstur halus supaya ruang kosong kartu tidak
terasa mati. Aset sudah digambar gelap (#030303 → #161616) dan tanpa plate
latar, jadi dipakai apa adanya: tidak perlu filter, dan gradient kartu di
bawahnya tetap terlihat.
Path relatif terhadap FILE CSS (assets/css/), jadi butuh ../../ ke root;
spasi pada nama file di-encode %20 agar aman di semua server. */
.acard__inner::before{
content:"";
position:absolute;
/* overhang hanya vertikal — parallax-nya cuma sumbu Y, jadi tidak perlu
melebar ke samping (itu cuma menambah scrollWidth tanpa guna) */
inset:-14% 0;
z-index:0;
background-image:url('../../images/general/brand%20pattern%20imaginatif.svg');
background-repeat:no-repeat;
background-position:center;
background-size:cover;
opacity:.75;
pointer-events:none;
translate:0 var(--acard-wm);
will-change:translate;
}
.acard__inner > *{position:relative;z-index:1;}
/* Warna scroll-stage, sama untuk semua card — 2 layer overlay di-scrub lewat GSAP
(lihat script "GSAP STACKED CARDS EFFECT"):
naik : gelap redup -> pendar hangat menyala (acard__tint 0->1, selesai pas stay)
mundur : -> hitam, bersamaan dgn mengecil & memudar (acard__tint-black 0->1)
Kartu tetap gelap; "aktif" ditandai pendar, bukan blok oranye. */
.acard__tint{
position:absolute;
inset:0;
z-index:0;
background:
radial-gradient(70% 110% at 8% -10%, rgba(255,176,32,.30) 0%, rgba(255,94,0,.10) 42%, transparent 72%),
radial-gradient(60% 90% at 100% 108%, rgba(255,94,0,.16) 0%, transparent 68%);
opacity:0;
pointer-events:none;
}
.acard__tint-black{
position:absolute;
inset:0;
z-index:0;
background:#000000;
opacity:0;
pointer-events:none;
}
/* Label = pil gradient oranye dengan teks hitam (persis mockup) */
.acard__label{
display:inline-flex;
align-items:center;
gap:.5rem;
align-self:flex-start;
padding:.55rem 1.15rem;
border-radius:999px;
background:var(--grad-fire);
font-family: var(--font-heading);
font-weight:700;
font-size:.92rem;
letter-spacing:0;
text-transform:none;
color: var(--acard-label);
box-shadow:0 6px 18px rgba(255,94,0,.28);
}
.acard__label-num{
font-size:.74rem;
font-weight:700;
opacity:.55;
letter-spacing:.06em;
}
.acard__headline{
font-family: var(--font-body);
font-weight:700;
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height:1.12;
letter-spacing:-.025em;
text-wrap:balance;
color: var(--acard-fg);
margin-top:1.6rem;
max-width:18ch;
}
.acard__sub{
font-family: var(--font-body);
margin-top:.9rem;
font-size:1rem;
line-height:1.6;
color: var(--acard-fg-soft);
max-width:36ch;
text-wrap:pretty;
}
/* Card 1 — statement penuh, center */
.acard--text{
display:flex;
flex-direction:column;
padding: 3.25rem 4.5rem 3.75rem;
}
.acard--text .acard__statement{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:1.5rem;
}
.acard__statement-main{
font-family: var(--font-body);
font-weight:700;
font-size: clamp(1.65rem, 2.9vw, 2.5rem);
line-height:1.28;
letter-spacing:-.02em;
text-wrap:balance;
color: var(--acard-fg);
/* diperketat dari 42ch: baris terpusat yang panjang sulit dibaca */
max-width:34ch;
}
.acard__statement-sub{
font-family: var(--font-body);
font-size:1.02rem;
line-height:1.6;
/* JANGAN pakai --acard-label: itu warna teks di dalam pil oranye (hitam),
dan akan tidak terbaca di atas permukaan kartu yang gelap. */
color: var(--acard-fg-soft);
max-width:40ch;
text-wrap:pretty;
}
/* Card 2, 3, 4 — dua kolom */
.acard--split{
display:flex;
}
.acard__col{
flex:1;
padding: 3.5rem;
display:flex;
flex-direction:column;
justify-content:center;
}
/* Kolom teks diletakkan di bagian bawah card (bukan atas) — jarak ke tepi card
tetap terjaga lewat padding di .acard__col di atas */
.acard__col--text{
justify-content:flex-end;
}
.acard__col--grid,
.acard__col--logos,
.acard__col--map{
justify-content:center;
}
/* Card 2 — grid layanan di atas latar galeri karya */
.acard__col--grid{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
padding:2.4rem;
}
.acard__col-media{
position:absolute;
inset:1.6rem;
z-index:0;
border-radius:1rem;
overflow:hidden;
border:1px solid var(--acard-chip-brd);
}
.acard__col-media img{
width:100%;height:100%;
object-fit:cover;
opacity:.6;
}
/* redam latar supaya kartu kaca di atasnya tetap terbaca */
.acard__col-media::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(6,5,5,.35) 0%, rgba(6,5,5,.62) 100%);
}
.acard__col--grid > .acard__svc{position:relative;z-index:1;}
.acard__svc{
background: var(--acard-chip-bg);
border:1px solid var(--acard-chip-brd);
border-radius:1rem;
padding:1.2rem 1.3rem;
-webkit-backdrop-filter:blur(12px) saturate(1.1);
backdrop-filter:blur(12px) saturate(1.1);
}
.acard__svc-num{
font-family: var(--font-heading);
font-weight:700;
font-size:.82rem;
color: var(--accent-brand);
}
.acard__svc h4{
font-family: var(--font-heading);
font-size:1.02rem;
font-weight:700;
color: var(--acard-fg);
margin-top:.4rem;
}
.acard__svc p{
margin-top:.4rem;
font-size:.8rem;
line-height:1.45;
color: var(--acard-fg-soft);
}
/* Card 3 — logo grid + stats */
.acard__logogrid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:1.5rem 1.3rem;
padding:2.6rem;
width:100%;
}
.acard__logogrid img{
width:100%;height:1.8rem;object-fit:contain;
opacity:.72;
}
/* Box di belakang logo — ukuran & padding disamakan dgn box media card 04 */
.acard__col--logos{ padding:1.6rem; }
.acard__logobox{
width:100%;height:100%;
background:rgba(255,255,255,.04);
border:1px solid var(--acard-chip-brd);
border-radius:1rem;
display:flex;
align-items:center;
justify-content:center;
}
.acard__col--logos .acard__asset{
width:100%;height:100%;
padding:2.2rem;
object-fit:contain;
box-sizing:border-box;
}
/* Statistik disajikan sebagai angka besar editorial, bukan kartu chip generik */
.acard__stats{
display:flex;
align-items:center;
gap:1.8rem;
margin-top:2.2rem;
padding-top:1.6rem;
border-top:1px solid var(--acard-divider);
}
.acard__stat{
text-align:left;
}
.acard__stat strong{
display:block;
font-family:var(--font-heading);
font-weight:800;
font-size:clamp(2.1rem, 3.4vw, 2.75rem);
line-height:1;
letter-spacing:-.02em;
color: var(--acard-fg);
}
.acard__stat span{
display:block;
margin-top:.5rem;
font-size:.76rem;
letter-spacing:.08em;
text-transform:uppercase;
color: var(--acard-fg-soft);
}
.acard__stat-divider{
width:1px;
align-self:stretch;
background: var(--acard-divider);
}
/* Panel media — dipakai card 02 (galeri karya), 04 (peta), 05 (studi kasus).
Menggantikan iframe Google Maps: aset statis sudah bergaya brand, jauh lebih
ringan, dan tidak memuat skrip/cookie pihak ketiga. */
.acard__col--map{ padding:1.6rem; }
.acard__media{
position:relative;
width:100%;height:100%;
border-radius:1rem;
overflow:hidden;
border:1px solid var(--acard-chip-brd);
background:rgba(255,255,255,.03);
}
.acard__media img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
/* varian "float": aset PNG transparan (studi kasus) — tampil utuh, tanpa crop */
.acard__media--float{
border:0;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
}
.acard__media--float img{
width:100%;height:100%;
object-fit:contain;
}
/* penanda lokasi berdenyut di atas peta */
.acard__pin{
position:absolute;
left:50%; top:50%;
inline-size:16px; block-size:16px;
margin-inline-start:-8px; margin-block-start:-8px;
border-radius:50%;
background:var(--accent-brand);
box-shadow:0 0 0 4px rgba(255,176,32,.28);
pointer-events:none;
}
/* cincin denyut — --pin-ring (0..1) di-tween oleh about-cards.js */
.acard__pin::after{
content:"";
position:absolute;
inset:-6px;
border-radius:50%;
border:2px solid var(--accent-brand);
opacity:calc(1 - var(--pin-ring,1));
scale:calc(1 + var(--pin-ring,0) * 2.2);
}
/* Posisi "stay" card 06 diturunkan dari card lain, tapi ukuran kotaknya (.acard__inner)
tetap disamakan dengan card lain: .acard sendiri ditambah tinggi sebesar offset-nya,
lalu .acard__inner digeser turun via margin di dalam box yang sudah lebih tinggi itu —
bukan top sticky-nya .acard, supaya titik trigger GSAP (diukur dari .acard) tetap presisi. */
.acard--stay-low{
height: calc(66vh + 14vh);
min-height: calc(540px + 14vh);
}
.acard--stay-low .acard__inner{
margin-top: 14vh;
height: calc(100% - 14vh); /* 100% dari box .acard yg sudah ditambah 14vh -> hasil akhir 66vh, sama seperti card lain */
}
/* Card 6 — timeline horizontal. Lingkaran nomor dikunci persis di garis tengah
(position:absolute, independen dari tinggi teks label), label bergantian
naik/turun dari garis dengan jarak tetap — supaya tidak ada lagi label yang
"mengambang" lepas dari garis saat teksnya lebih panjang / turun ke 2-3 baris. */
.acard--timeline{
display:flex;
flex-direction:column;
padding: 3.5rem 4.5rem;
}
.acard__timeline{
flex:1;
display:flex;
align-items:stretch;
justify-content:space-between;
gap:.5rem;
margin-top:3.2rem;
min-height:12.5rem;
position:relative;
}
/* Garis dasar (belum dilalui) + garis progres (sudah dilalui, di-drive lewat JS saat scroll-lock) */
.acard__timeline-line{
position:absolute; left:0; right:0; top:50%;
height:1px;
background: rgba(255,255,255,.16);
transform:translateY(-50%);
z-index:0;
}
.acard__timeline-progress{
position:absolute; left:0; top:50%;
width:0; height:3px;
border-radius:2px;
background:var(--grad-fire);
transform:translateY(-50%);
z-index:0;
pointer-events:none;
}
.acard__tstep{
position:relative;
width:18%;
}
/* isinya angka polos (1-5), bukan lagi ikon SVG */
.acard__tnum{
position:absolute;
left:50%; top:50%;
transform:translate(-50%,-50%);
width:3.25rem;height:3.25rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-heading);font-weight:700;font-size:1.3rem;
border:1.5px solid rgba(255,255,255,.22);
color:var(--acard-fg-soft);
background:rgba(255,255,255,.04);
z-index:1;
transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.acard__tstep p{
position:absolute;
left:50%;
width:11.5rem;
transform:translateX(-50%);
margin:0;
font-family:var(--font-heading);
font-size:1.02rem;
font-weight:600;
line-height:1.34;
color: rgba(255,255,255,.42);
text-align:center;
text-wrap:balance;
transition: color .25s ease;
}
.acard__tstep[data-pos="up"] p{ bottom:calc(50% + 2.7rem); }
.acard__tstep[data-pos="down"] p{ top:calc(50% + 2.7rem); }
/* Pembeda alur yang sudah dilalui vs belum, di-toggle lewat JS (scroll-lock "How We Work") */
.acard__tstep.is-done .acard__tnum{
background:var(--grad-fire);
border-color:transparent;
color:#000000;
box-shadow:0 6px 20px rgba(255,94,0,.35);
}
.acard__tstep.is-done .acard__tnum svg{
fill:#000000;
}
.acard__tstep.is-done p{
color:var(--acard-fg);
}
@media(max-width: 1024px) {
.acard__headline{ font-size: 2rem; max-width:none; }
.acard__col{ padding: 2.2rem; }
}
@media(max-width: 767px) {
.about-hero__cards {
padding-top: 6rem;
gap: 3rem;
}
.acard {
height: auto;
min-height: auto;
top: 8vh;
}
.acard--stay-low .acard__inner{ margin-top:0; height:100%; }
.acard--split{ flex-direction:column; }
/* pemisah kolom ikut permukaan gelap — rgba hitam tidak terlihat di sini */
.acard__col--grid,
.acard__col--logos,
.acard__col--map{ border-left:none; border-top:1px solid var(--acard-divider); }
.acard__col--map{ min-height:240px; }
.acard__col-media{ inset:1rem; }
.acard--text{ padding:2.5rem 1.75rem 3rem; }
.acard__statement-main{ font-size:1.35rem; }
.acard__headline{ font-size: 1.8rem; }
.acard__timeline{
flex-direction:column;
align-items:flex-start;
gap:1.7rem;
min-height:0;
}
.acard__timeline-line{
left:1.625rem; top:0; bottom:0; right:auto; width:1px; height:auto;
transform:none;
}
.acard__tstep{
width:100%;
display:flex;
align-items:center;
gap:1.1rem;
}
.acard__tnum{
position:static;
transform:none;
flex-shrink:0;
}
.acard__tstep p{
position:static;
transform:none;
width:auto;
max-width:none;
text-align:left;
}
.acard__tstep[data-pos="up"] p,
.acard__tstep[data-pos="down"] p{ top:auto; bottom:auto; }
}
/* ============ SHOWREEL ============ */
.about-showreel{
padding-block:5rem 0;
}
.about-showreel__head{
display:flex;
flex-direction:column;
gap:1rem;
margin-bottom:2.5rem;
}
/* dulu eyebrow kecil "Showreel 2024" + headline "Dari brief ke layar...".
Sekarang dibalik: "Showreel 2024" JADI headline (tanpa eyebrow terpisah),
kalimat lama itu turun jadi baris body pertama (--lead). */
.about-showreel__title{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(2rem,4vw,3.25rem);
line-height:1.08;
letter-spacing:-.02em;
color:var(--foreground);
}
.about-showreel__sub{
font-size:.95rem;
color:var(--muted-foreground);
max-width:52ch;
line-height:1.7;
}
.about-showreel__frame{
position:relative;
display:block;
width:100%;
aspect-ratio:16/9;
background:#0a0a0a;
overflow:hidden;
text-decoration:none;
cursor:pointer;
}
/* thumbnail image — full-cover, zooms on frame hover */
.about-showreel__thumb{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:transform .55s cubic-bezier(.25,.46,.45,.94);
}
/* dark gradient for play button contrast */
.about-showreel__gradient{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(5,5,5,.15) 0%,rgba(5,5,5,.55) 100%);
pointer-events:none;
}
.about-showreel__overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1.25rem;
cursor:pointer;
z-index:5;
}
/* ── Inline video player ── */
.about-showreel__player{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
background:#000;
display:none;
z-index:10;
cursor:auto;
}
.about-showreel__player.is-active{ display:block; }
/* ── Loading indicator ── */
.about-showreel__loading{
position:absolute;
inset:0;
z-index:11;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.9rem;
background:rgba(5,5,5,.88);
color:rgba(255,255,255,.7);
font-family:var(--font-body);
font-size:.82rem;
letter-spacing:.06em;
pointer-events:none;
}
.about-showreel__loading.is-active{ display:flex; }
@keyframes srl-spin{ to{ transform:rotate(360deg); } }
.about-showreel__spinner{
width:26px;
height:26px;
border:2px solid rgba(255,255,255,.18);
border-top-color:rgba(255,255,255,.8);
border-radius:50%;
animation:srl-spin .8s linear infinite;
}
/* ── Close / kembali ke thumbnail ── */
.about-showreel__close{
position:absolute;
top:.85rem;
right:.85rem;
z-index:12;
display:none;
width:2rem;
height:2rem;
border-radius:50%;
background:rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.22);
color:rgba(255,255,255,.7);
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .2s,border-color .2s,color .2s;
}
.about-showreel__close.is-active{ display:flex; }
.about-showreel__close:hover{
background:rgba(0,0,0,.8);
border-color:rgba(255,255,255,.55);
color:#fff;
}
.about-showreel__play{
width:5rem;
height:5rem;
border:1.5px solid rgba(255,255,255,.6);
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
transition:background .25s ease, border-color .25s ease, transform .25s ease;
padding-left:3px;
}
.about-showreel__play-label{
font-size:.8rem;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,.55);
transition:color .25s ease;
}
/* hover: thumbnail zooms, play button scales up */
@media(hover:hover){
.about-showreel__frame:hover .about-showreel__thumb{ transform:scale(1.04); }
.about-showreel__frame:hover .about-showreel__play{
background:rgba(255,255,255,.18);
border-color:#fff;
transform:scale(1.1);
}
.about-showreel__frame:hover .about-showreel__play-label{ color:rgba(255,255,255,.85); }
}
/* ============ MILESTONES ============ */
.about-milestones{
/* jarak dari section sebelumnya — dinaikkan lagi (2.25rem masih mepet) */
padding-block:3.5rem 0;
}
.about-milestones__head{
display:flex;
flex-direction:column;
/* 1rem = spacing rule yang sama dipakai di seluruh site untuk jarak
label/eyebrow ke heading-nya (lihat .im-sec-head .im-kicker di
home.css: margin-bottom:1rem). Sebelumnya .5rem, jadi terlalu rapat
dibanding section head lain. */
gap:1rem;
/* jarak ke kotak grid di bawahnya — dinaikkan lagi (1.75rem masih mepet) */
margin-bottom:2.5rem;
}
.milestones__title{
font-family:var(--font-heading);
font-size:clamp(1.75rem,3vw,2.25rem);
font-weight:700;
letter-spacing:-.02em;
line-height:1.15;
max-width:38rem;
}
.milestones__desc{
max-width:38rem;
color:var(--muted-foreground);
font-size:clamp(.9rem,1.2vw,1rem);
line-height:1.6;
text-wrap:pretty;
}
.milestones__grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
border-top:1px solid var(--border);
border-left:1px solid var(--border);
}
.milestones__stat,
.milestones__img{
border-right:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.milestones__stat{
/* padding-inline SENGAJA disamakan persis dengan clamp() milik .container
(lihat style.css baris ~47) — .milestones__grid TIDAK dibungkus
.container (beda dari .about-milestones__head di atasnya), jadi tanpa
ini angka "52" akan punya inset kiri yang beda dari teks "Milestone".
Nilai ini dipakai SAMA di semua kolom (52/10/7/FnB) supaya jarak angka
ke garis pembatasnya juga konsisten satu sama lain, bukan cuma kolom
pertama yang sejajar. Vertikal TIDAK ikut memakai clamp ini — itu yang
menentukan tinggi section, dan section ini sengaja dijaga muat satu layar. */
padding:1.25rem clamp(1.25rem,5vw,4rem);
display:flex;
flex-direction:column;
gap:.4rem;
}
.milestones__stat--wide{
grid-column:span 2;
}
.milestones__img{
position:relative;
grid-column:3;
grid-row:1;
overflow:hidden;
background:var(--muted);
min-height:200px;
/* about-visual.png sangat tinggi secara natural (1785x2524px). Tanpa batas
eksplisit, CSS Grid memakai tinggi INTRINSIK gambar untuk menghitung
tinggi baris ini (height:100% pada ![]()
tidak bisa jadi acuan karena
tinggi induknya sendiri auto/circular) — baris jadi raksasa, dan kedua
kotak statistik di sampingnya ikut meregang (align-self:stretch grid)
mengikuti tinggi itu. aspect-ratio membuat tingginya bisa dihitung dari
lebar kolom saja, memutus siklus itu.
16/9 (bukan 4/5 atau 3/2) — baris ini adalah cell TERTINGGI di row 1
(menentukan tinggi seluruh baris termasuk kotak "52"/"10" di
sampingnya), jadi rasio ini yang paling menentukan apakah section
muat satu layar tanpa scroll, termasuk di laptop pendek (1366x768).
Angka .milestones__num sengaja dibuat besar (isi kotak, bukan cuma
padding) — anggaran tinggi section dikompensasi di sini, bukan
dengan mengecilkan angka atau memepetkan spacing lagi. */
aspect-ratio:16/9;
}
.milestones__img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* intro "Meet Our Team": box hitam menutupi foto, lalu memudar perlahan
begitu section masuk viewport (dipicu .reveal.is-visible yang sama
dengan section-nya, bukan animasi terpisah dari page load). */
.milestones__img-intro{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:#000;
color:#fff;
font-family:var(--font-heading);
font-weight:600;
font-size:clamp(1rem,2vw,1.25rem);
letter-spacing:.02em;
opacity:1;
pointer-events:none;
}
.reveal.is-visible .milestones__img-intro{
animation:milestones-intro-out 1.4s ease forwards;
animation-delay:.5s;
}
@keyframes milestones-intro-out{
0%{opacity:1;visibility:visible;}
99%{visibility:visible;}
100%{opacity:0;visibility:hidden;}
}
.milestones__num{
font-family:var(--font-heading);
/* dinaikkan supaya ANGKA-nya yang mengisi kotak (padding cukup kecil di
sekelilingnya), bukan angka kecil dikelilingi padding besar supaya
terlihat "pas" dengan kotak — itu yang bikin kotaknya terasa kosong. */
font-size:clamp(4rem,8vw,7rem);
font-weight:400;
line-height:1;
color:var(--foreground);
}
.milestones__desc{
font-size:.95rem;
color:var(--muted-foreground);
}
@media(max-width:767px){
.milestones__grid{
grid-template-columns:1fr 1fr;
}
.milestones__img{
grid-column:1 / 3;
grid-row:auto;
aspect-ratio:16/9;
min-height:unset;
}
.milestones__stat--wide{
grid-column:1 / 3;
}
/* padding-inline .milestones__stat TIDAK di-override di sini lagi — biarkan
ikut clamp() dari rule dasar, supaya angka tetap sejajar dengan teks
"Milestones..." di atasnya pada SEMUA lebar layar, bukan cuma desktop. */
}
/* ============ SERVICE DETAIL PAGES ============ */
a.svc-alva-col{ color:inherit; }
a.svc-alva-col:hover .svc-alva-title{ color:var(--accent-brand); }
/* === SERVICE CARD — THUMBNAIL HOVER === */
.svc-alva-col{ position:relative; overflow:hidden; }
.svc-alva-col::before{
content:'';
position:absolute;
inset:0;
background-image:var(--thumb);
background-size:cover;
background-position:center;
opacity:0;
transition:opacity .35s ease;
z-index:0;
}
.svc-alva-col::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(5,5,5,.9) 0%,rgba(5,5,5,.55) 45%,rgba(5,5,5,.3) 100%);
opacity:0;
transition:opacity .35s ease;
z-index:1;
}
.svc-alva-col:hover::before,
.svc-alva-col:hover::after{ opacity:1; }
.svc-alva-col__top,
.svc-alva-desc{ position:relative; z-index:2; }
@media(hover:hover){
a.svc-alva-col:hover .svc-alva-title{ color:#ffffff; }
}
@media(hover:none){
.svc-alva-col::before,
.svc-alva-col::after{ display:none; }
}
.svc-detail-section{ border-top:1px solid var(--border); }
.svc-detail-section h2{
font-family:var(--font-heading);
font-size:1.75rem;
font-weight:700;
margin-bottom:2rem;
}
.svc-deliver-list{
display:flex;
flex-direction:column;
gap:.9rem;
max-width:52ch;
}
.svc-deliver-list li{
position:relative;
padding-left:1.4rem;
color:var(--muted-foreground);
line-height:1.65;
}
.svc-deliver-list li::before{
content:'';
position:absolute;
left:0;top:.55em;
width:6px;height:6px;
border-radius:50%;
background:var(--accent-brand);
}
.svc-process-list{
display:flex;
flex-direction:column;
gap:2rem;
}
.svc-process-item{
display:grid;
grid-template-columns:2.5rem 1fr;
gap:1.25rem;
align-items:start;
}
.svc-process-num{
font-family:var(--font-heading);
font-weight:700;
font-size:.8rem;
letter-spacing:.06em;
color:var(--accent-brand);
padding-top:.2rem;
}
.svc-process-body strong{
display:block;
font-family:var(--font-heading);
font-size:1rem;
font-weight:600;
margin-bottom:.35rem;
}
.svc-process-body p{
color:var(--muted-foreground);
font-size:.9rem;
line-height:1.6;
}
/* ============ INSIGHT ARTICLE PAGES ============ */
.art-tag{
display:inline-block;
font-family:var(--font-heading);
font-weight:700;
font-size:.72rem;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--accent-brand);
}
.art-title{
font-family:var(--font-heading);
font-weight:800;
/* 3.3vw (bukan 4.5vw): judul kini tinggal di kolom ~52% lebar layar,
ukuran lama bikin baris menumpuk sampai hero jebol di layar pendek */
font-size:clamp(1.85rem,3.3vw,3rem);
line-height:1.08;
letter-spacing:-.02em;
text-wrap:balance;
}
/* layar pendek (mis. 1280x600): rapatkan supaya hero tetap satu layar */
@media(min-width:768px) and (max-height:700px){
.art-title{font-size:clamp(1.6rem,2.5vw,2.25rem);}
.art-hero__inner{
gap:.9rem;
padding-block:calc(96px + .9rem) 1.1rem;
}
.art-byline{font-size:.74rem;}
}
/* ---- HERO ARTIKEL (satu layout untuk SEMUA artikel insight) ----
Dua baris grid: teks (auto) lalu gambar (minmax(0,1fr)). Gambar
menyerap SISA tinggi viewport, jadi hero mustahil melebihi satu
layar — teks tidak pernah terpotong di lipatan. */
.art-hero{
min-block-size:100svh;
display:grid;
/* ponsel: atas-bawah (teks lalu gambar) */
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto minmax(0,1fr);
border-bottom:1px solid var(--border);
}
/* desktop: kiri-kanan, satu baris setinggi viewport */
@media(min-width:768px){
.art-hero{
grid-template-columns:minmax(0,52fr) minmax(0,48fr);
grid-template-rows:minmax(0,1fr);
}
}
.art-hero__inner{
display:flex;
flex-direction:column;
gap:clamp(1.25rem,3svh,2rem);
/* padding-inline disamakan dengan .container supaya judul tetap segaris
dengan isi artikel di bawahnya; kolom gambar sengaja dibiarkan
menyentuh tepi kanan layar (full-bleed). */
padding-inline:clamp(1.25rem,5vw,4rem);
padding-block:calc(96px + clamp(1.25rem,3svh,2.25rem)) clamp(1.5rem,3.5svh,2.5rem);
min-inline-size:0;
}
@media(min-width:768px){
.art-hero__inner{padding-inline-end:clamp(1.5rem,3vw,3rem);}
}
.art-hero__text{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:clamp(.8rem,1.8svh,1.15rem);
/* breadcrumb tetap menempel atas, blok judul mengambang di tengah
sisa ruang — bukan didorong mentok ke dasar kolom */
margin-block:auto;
}
.art-hero__media{
position:relative; /* jangkar untuk ![]()
absolut di bawah */
margin:0;
min-block-size:0; /* wajib: tanpa ini baris 1fr ikut melar */
overflow:hidden;
background:var(--muted);
}
/* ![]()
DIKELUARKAN dari alur (absolut). Kalau ikut alur, block-size:100%
tidak bisa di-resolve terhadap induk yang tingginya belum pasti, browser
jatuh ke tinggi INTRINSIK gambar, dan baris 1fr ikut melar sampai hero
jauh melebihi satu layar. Elemen absolut tidak menyumbang ukuran track. */
.art-hero__media img{
position:absolute;
inset:0;
inline-size:100%;
block-size:100%;
object-fit:cover;
display:block;
}
/* ponsel: biarkan mengalir wajar, gambar rasio tetap */
@media(max-width:767px){
.art-hero{min-block-size:auto;}
.art-hero__media{aspect-ratio:4/3;}
}
/* baris nama penulis */
.art-byline{
font-size:.8rem;
color:var(--muted-foreground);
letter-spacing:.01em;
}
.art-byline__name{
color:var(--foreground);
font-weight:600;
}
/* Article body — narrow column */
.art-content{ padding-block:4rem 5rem; }
.art-body{ max-width:68ch; }
.art-body p{ color:var(--muted-foreground); line-height:1.85; font-size:.965rem; margin-top:1.3rem; }
.art-body p:first-child{ margin-top:0; }
.art-body h2{
font-family:var(--font-heading);
font-weight:700;
font-size:1.25rem;
line-height:1.3;
margin-top:2.5rem;
margin-bottom:.5rem;
color:var(--foreground);
}
/* Kutipan: garis rambut atas-bawah, teks warna normal, ukuran sedang.
Sengaja TANPA bilah oranye tebal + teks oranye — itu bikin blok kutipan
berteriak lebih keras dari judul artikelnya sendiri. */
.art-pull{
margin-block:clamp(2.5rem,5vw,3.5rem);
padding-block:clamp(1.25rem,2.4vw,1.75rem);
border-block:1px solid var(--border);
max-width:46ch;
font-family:var(--font-heading);
font-weight:600;
font-size:clamp(1.05rem,1.7vw,1.35rem);
line-height:1.45;
letter-spacing:-.005em;
color:var(--foreground);
text-wrap:pretty;
}
/* ============ ARTICLE SIDEBAR LAYOUT ============ */
.art-layout{
display:grid;
grid-template-columns:1fr;
align-items:start;
}
.art-sidebar{ display:none; }
.art-layout .art-body{ max-width:68ch; }
@media(min-width:960px){
.art-layout{ grid-template-columns:200px 1fr; gap:4.5rem; }
.art-sidebar{ display:block; position:sticky; top:112px; }
.art-layout .art-body{ max-width:none; }
}
.art-toc__title{
font-family:var(--font-heading);
font-weight:700;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--muted-foreground);
margin-bottom:.85rem;
}
.art-toc__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.05rem; }
.art-toc__link{
display:block;
font-family:var(--font-heading);
font-size:.81rem;
font-weight:500;
color:var(--muted-foreground);
padding:.35rem 0 .35rem .85rem;
border-left:2px solid transparent;
transition:color .2s,border-color .2s;
line-height:1.35;
text-decoration:none;
}
.art-toc__link:hover,.art-toc__link.is-active{ color:var(--accent-brand); border-left-color:var(--accent-brand); }
/* ============ INFOGRAPHICS BASE ============ */
.infographic{
margin:1.75rem 0;
background:var(--muted);
border:1px solid var(--border);
border-radius:4px;
overflow:hidden;
}
/* Kartu: TIDAK pakai trik "gap:1px + latar container". Trik itu bikin sel
kosong terakhir (5 kartu di grid 3 kolom) tampak sebagai blok mati.
Pakai border asli per kartu + auto-fit, jadi jumlah kartu berapa pun
selalu rapi tanpa lubang. */
.infographic.infographic--cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:.6rem;
/* container TANPA latar & border: kalau baris terakhir tidak penuh,
tidak ada blok kosong yang ikut terwarnai */
background:none;
border:0;
border-radius:0;
padding:0;
}
.infographic--cards .icard{
background:var(--muted);
border:1px solid var(--border);
border-radius:4px;
padding:1.15rem 1.1rem 1.3rem;
display:flex;
flex-direction:column;
gap:.4rem;
}
/* ikon garis SVG (bukan emoji — emoji tampil beda di tiap OS) */
.icard__icon{
inline-size:22px;
block-size:22px;
display:block;
margin-bottom:.35rem;
fill:none;
stroke:var(--accent-brand);
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
}
.icard__label{ font-family:var(--font-heading); font-weight:700; font-size:.82rem; color:var(--foreground); line-height:1.3; }
.icard__desc{ font-size:.75rem; color:var(--muted-foreground); line-height:1.5; }
/* Comparison 2-col */
.infographic--compare{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); padding:0; }
.compare-col{ background:var(--muted); padding:1.4rem 1.1rem; }
.compare-col__head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.85rem; }
.compare-col__icon{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex-shrink:0; }
.compare-col--bad .compare-col__icon{ background:#3d1a1a; color:#f87171; }
.compare-col--good .compare-col__icon{ background:#1a2f1a; color:#4ade80; }
.compare-col__title{ font-family:var(--font-heading); font-weight:700; font-size:.82rem; color:var(--foreground); }
.compare-col__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.compare-col__list li{ font-size:.78rem; color:var(--muted-foreground); padding-left:1.1rem; position:relative; line-height:1.45; }
.compare-col--bad .compare-col__list li::before{ content:'✕'; position:absolute; left:0; color:#f87171; font-size:.68rem; top:.1rem; }
.compare-col--good .compare-col__list li::before{ content:'✓'; position:absolute; left:0; color:#4ade80; font-size:.68rem; top:.1rem; }
/* Timeline horizontal */
.infographic--timeline{ display:flex; flex-direction:column; gap:1px; background:var(--border); padding:0; }
@media(min-width:580px){ .infographic--timeline{ flex-direction:row; } }
.timeline-step{ flex:1; background:var(--muted); padding:1.25rem 1.15rem; position:relative; }
@media(min-width:580px){
.timeline-step::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--border); }
.timeline-step.is-peak::before{ background:var(--accent-brand); }
.timeline-step::after{ content:''; position:absolute; top:-5px; left:1.15rem; width:10px; height:10px; border-radius:50%; background:var(--muted-foreground); }
.timeline-step.is-peak::after{ background:var(--accent-brand); }
}
.timeline-step__time{ font-family:var(--font-heading); font-weight:700; font-size:.88rem; color:var(--accent-brand); margin-bottom:.3rem; }
.timeline-step__label{ font-family:var(--font-heading); font-weight:700; font-size:.82rem; color:var(--foreground); margin-bottom:.3rem; }
.timeline-step__desc{ font-size:.75rem; color:var(--muted-foreground); line-height:1.5; }
/* Hub & spoke wrapper (inline SVG inside) */
.infographic--hub{ padding:1.25rem 1rem; display:flex; justify-content:center; }
.infographic--hub svg{ max-width:100%; height:auto; }
/* Flow diagram */
.infographic--flow{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.5rem 1rem; }
@media(min-width:540px){ .infographic--flow{ flex-direction:row; justify-content:center; flex-wrap:nowrap; } }
.flow-node{ background:#050505; border:1px solid var(--border); border-radius:4px; padding:.65rem 1rem; font-family:var(--font-heading); font-weight:600; font-size:.8rem; color:var(--foreground); text-align:center; white-space:nowrap; }
.flow-node.is-highlight{ border-color:var(--accent-brand); color:var(--accent-brand); background:rgba(252,176,22,.05); }
.flow-arrow{ color:var(--muted-foreground); font-size:.9rem; flex-shrink:0; }
@media(max-width:539px){ .flow-arrow{ transform:rotate(90deg); } }
/* Checklist */
.infographic--checklist{ display:flex; flex-direction:column; padding:1.5rem; }
.checklist-item{ display:flex; align-items:flex-start; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--border); }
.checklist-item:first-child{ padding-top:0; }
.checklist-item:last-child{ border-bottom:none; padding-bottom:0; }
.checklist-item__num{ width:28px; height:28px; border-radius:50%; background:var(--accent-brand); color:#050505; font-family:var(--font-heading); font-weight:700; font-size:.72rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.1rem; }
.checklist-item__label{ font-family:var(--font-heading); font-weight:700; font-size:.87rem; color:var(--foreground); margin-bottom:.2rem; }
.checklist-item__desc{ font-size:.78rem; color:var(--muted-foreground); line-height:1.5; }
/* ============ ARTIKEL LAINNYA ============ */
.art-more{ padding-block:3rem 2.5rem; border-top:1px solid var(--border); }
.art-more__title{ font-family:var(--font-heading); font-weight:700; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-foreground); margin-bottom:1.5rem; }
.art-more__grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:600px){ .art-more__grid{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
/* ============ INTRO OVERLAY ============ */
#intro-overlay{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
background-image:url('../../images/brand/intro-background.webp');
background-size:cover;
background-position:center;
background-color:#0a0a0a;
transition:opacity .45s cubic-bezier(.4,0,.2,1);
}
#intro-overlay.is-exit{ opacity:0; pointer-events:none; }
#intro-inner{
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
}
#intro-brand{
display:flex;
align-items:center;
gap:18px;
/* rough initial shift so logo appears centered before JS measures text width */
transform:translateX(120px);
}
#intro-logo{
width:60px;
height:auto;
flex-shrink:0;
transform-origin:center;
}
#intro-text{
font-family:'Manrope',sans-serif;
font-weight:700;
font-size:2.5rem;
color:var(--accent-brand);
white-space:nowrap;
opacity:0;
line-height:1;
}
#intro-bar-wrap{
width:200px;
height:2px;
background:rgba(255,255,255,.12);
position:relative;
border-radius:2px;
overflow:hidden;
}
#intro-bar-fill{
position:absolute;
left:0;
top:0;
height:100%;
width:0%;
background:var(--accent-brand);
border-radius:2px;
}