/* Versi ringkas untuk HP (<768px): mengurangi panjang gulir tanpa membuang isi.
   Beranda: karya, langkah, dan alat jadi slider geser; Layanan: rincian dilipat; footer lebih padat. Laptop tidak berubah. */
@media (max-width:767.98px){
	/* Beranda — pita teks satu baris walau gerak dikurangi */
	.x-marquee{padding:16px 0}
	.x-marquee__track{flex-wrap:nowrap!important;width:max-content!important}

	/* Beranda — studio: kolase lebih pendek */
	.h-home .x-collage{height:300px;margin-top:8px}
	.h-home .x-studio{padding-block:64px}

	/* Beranda — Karya Pilihan: slider geser, bukan kartu menumpuk */
	.h-home .h-reel__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
	.h-home .h-reel__viewport::-webkit-scrollbar{display:none}
	.h-home .h-reel__track{display:flex;gap:12px;padding:4px var(--gutter) 8px;margin:0}
	.h-home .h-panel{position:relative;top:auto;flex:0 0 80vw;max-width:340px;margin:0;scroll-snap-align:center}
	.h-home .h-panel__media{aspect-ratio:4/5;max-height:none}
	.h-home .h-reel__foot{display:flex;align-items:center;gap:14px;margin-top:14px}
	.h-home .h-reel__count{display:block}
	.h-home .h-reel__bar{flex:1}

	/* Beranda — layanan: nama + bidang saja, deskripsi di halaman Layanan */
	.h-home .x-services{padding-block:64px}
	.h-home .x-svc__desc{display:none}
	.h-home .x-services__head{margin-bottom:28px}

	/* Beranda — empat langkah & alat bantu: slider geser */
	.h-home .x-process,.h-home .x-tools{padding-block:64px}
	.h-home .x-steps,.h-home .x-bento{display:flex!important;gap:12px;margin-inline:calc(var(--gutter)*-1);padding:6px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
	.h-home .x-steps::-webkit-scrollbar,.h-home .x-bento::-webkit-scrollbar{display:none}
	.h-home .x-step,.h-home .x-tool{flex:0 0 78vw;max-width:320px;scroll-snap-align:start}
	.h-home .x-tool{padding:24px}
	.h-home .x-tool__demo{display:none}
	.h-home .x-detail,.h-home .x-insight,.h-home .x-faq{padding-block:64px}
	.h-home .x-closing{padding-block:72px}

	/* Penanda "geser" di bawah slider */
	.h-home .x-steps::after,.h-home .x-bento::after{content:"";flex:0 0 1px}

	/* Layanan — rincian tiap layanan dilipat (tombol ditambahkan compact.js) */
	.ly-svc.x-section{padding-block:56px}
	.ly-svc__n{font-size:3.5rem!important}
	.js .ly-svc:not(.is-open) .ly-svc__body > :not(.ly-pic):not(.ly-more-btn){display:none}
	.ly-pic img{aspect-ratio:16/10;object-fit:cover}
	.ly-more-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;margin-top:16px;padding:0 8px 0 20px;border:0;border-radius:var(--r-pill);font:inherit;font-size:.9375rem;font-weight:700;color:var(--navy);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer}
	.x-section--soft .ly-more-btn{background:var(--white)}
	.ly-more-btn__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--white);background:var(--navy);transition:transform .45s cubic-bezier(.32,.72,0,1)}
	.ly-svc.is-open .ly-more-btn__ic{transform:rotate(180deg)}
	.ly-svc.is-open .ly-svc__body > *{animation:cp-in .5s cubic-bezier(.16,1,.3,1) both}
	@keyframes cp-in{from{opacity:0;transform:translateY(12px)}}

	/* Footer — lebih padat */
	.f4-svc__media{display:none}
	.f4-show{min-height:0!important;height:auto}
	.f4-tools li small,.f4-tools__d{display:none}
	.f4-card{padding:22px!important}
	.f4-svc__name{font-size:1.125rem!important}
	/* Beranda sudah ditutup ajakan konsultasi: panggung foto footer tidak diulang di HP */
	.home .f4-show{display:none}
}
@media (min-width:768px){.ly-more-btn{display:none}}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.ly-svc.is-open .ly-svc__body > *{animation:none}}

/* Aksesibilitas (audit 2026-10-19): teks label minimal 12px, sasaran sentuh minimal 44px. */
.x-fan__label,.pf-tile__chip,.pf-tile__tag,.ly-pic__k,.t-row__role,.t-row__tag,.kt-hero__tag,.kt-pj__type,.f4-cap__no,.f4-bottom__tag,.pj-hero__tag,.x-glass__cap,.c-nav-liquid__label,.f4-card small,.f4-body small{font-size:max(12px,.75rem)!important}
.h-panel__title a{display:inline-block;padding-block:8px;margin-block:-8px}
.f4-card--studio a,.f4-card a.f4-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.f4-bar{position:relative}
.f4-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.h-spot{position:absolute}
.h-spot::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
.k-wa__num{display:inline-flex;align-items:center;min-height:44px}
.pj-hero__kicker{display:inline-flex;align-items:center;min-height:44px}
/* Halaman yang sudah ditutup ajakan konsultasi sendiri: panggung foto + ajakan di footer tidak diulang (dua ajakan beruntun). */
body:has(main .x-cta, main .x-closing, main .t-close, main .c-cta, main .k-page) .f4-show{display:none}

/* Tablet landscape & laptop kecil (1024–1279px): header muat satu baris (audit perangkat 2026-10-19). */
@media (min-width:1024px) and (max-width:1279.98px){
	.c-header__inner{gap:10px}
	.c-header .c-search-trigger{min-width:44px;width:44px;padding:0;justify-content:center}
	.c-header .c-search-trigger__label,.c-header .c-search-trigger__kbd{display:none!important}
	.c-header .c-header__cta{white-space:nowrap;padding-inline:16px;font-size:.875rem}
	.c-nav-elastic__list > li > a,.c-nav-elastic__list > li > button{padding-inline:11px}
}
/* Header transparen di atas banner: setelah halaman digulir, beri latar navy kaca agar isi banner tidak bertabrakan dengan menu. */
.c-header.is-over-hero.is-scrolled{background:rgba(4,54,102,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px -18px rgba(2,29,56,.6)}
/* Tablet potret (768–1023px): Karya Pilihan juga slider geser (bukan kartu menumpuk), pita teks satu baris. */
@media (min-width:768px) and (max-width:1023.98px){
	.x-marquee__track{flex-wrap:nowrap!important;width:max-content!important}
	.h-home .h-reel__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
	.h-home .h-reel__viewport::-webkit-scrollbar{display:none}
	.h-home .h-reel__track{display:flex;gap:16px;padding:4px var(--gutter) 8px;margin:0}
	.h-home .h-panel{position:relative;top:auto;flex:0 0 46vw;margin:0;scroll-snap-align:start}
	.h-home .h-panel__media{aspect-ratio:4/5;max-height:none}
	.h-home .h-reel__foot{display:flex;align-items:center;gap:14px;margin-top:14px}
	.h-home .h-reel__count{display:block}
	.h-home .h-reel__bar{flex:1}
}