/* ==========================================================================
   showroom.css: section "kategori bisnis" (sidebar + preview browser)
   ========================================================================== */

.category-showroom{padding:150px 6vw 70px;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:58px}
.section-kicker,.preview-label{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:#7b7b82;margin-bottom:14px}
.section-head h2{font-size:clamp(38px,5vw,70px);line-height:.98;letter-spacing:-.055em;margin:0;max-width:780px}
.section-head h2 em{font-style:normal;color:#9a9aa1}
.section-head>p{max-width:410px;color:#777880;line-height:1.75;margin:0 0 3px}
.category-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:stretch}
.category-menu{display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid rgba(0,0,0,.07);background:rgba(255,255,255,.58);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,.045)}
.category-btn{appearance:none;border:0;background:transparent;text-align:left;padding:14px 15px;min-height:44px;border-radius:15px;color:#777880;font:inherit;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:background .35s ease,color .35s ease,transform .35s ease}
.category-btn span{font-size:10px;color:#b0b0b5;width:22px}.category-btn:hover{background:rgba(0,0,0,.035);color:#17171a;transform:translateX(3px)}
.category-btn.active{background:#111113;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.13)}.category-btn.active span{color:rgba(255,255,255,.5)}
.category-preview{--art:#f6eee5;min-width:0;border:1px solid rgba(0,0,0,.07);border-radius:30px;padding:28px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(245,245,247,.68));box-shadow:0 25px 80px rgba(0,0,0,.065);overflow:hidden}
.preview-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.preview-meta h3{font-size:24px;letter-spacing:-.035em;margin:0}.preview-number{font-size:11px;color:#9a9aa0;letter-spacing:.1em;padding-top:4px}
.showcase-browser{border-radius:20px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 30px 70px rgba(0,0,0,.12);transform:perspective(1300px) rotateX(1deg);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.category-preview:hover .showcase-browser{transform:perspective(1300px) rotateX(0deg) translateY(-3px)}
.showcase-bar{height:38px;background:rgba(248,248,250,.95);border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:12px;padding:0 14px;color:#aaa;font-size:9px}
.browser-dots{display:flex;gap:5px}.browser-dots i{width:7px;height:7px;border-radius:50%;background:#d7d7da}.secure{margin-left:auto;font-size:7px;color:#bcbcc1}
.showcase-page{position:relative;min-height:390px;padding:25px 30px 20px;background:linear-gradient(135deg,#f8f4ef,#f2eee9 50%,#e8e2da);transition:background .5s ease}

/* Screenshot asli untuk kategori yang datanya punya field "shot".
   Ditumpuk di atas isi mockup CSS; mockup CSS tetap ada sebagai cadangan.
   Angka 3/2 mengikuti rasio berkas screenshot (1536x1024) agar tidak terpotong. */
/* Atribut hidden pada elemen gambar diabaikan bila display disetel eksplisit,
   sehingga gambar tak-terlihat tetap terbaca pembaca layar. Aturan ini
   memastikan hidden benar-benar menyembunyikannya dari semua sisi. */
.showcase-shot[hidden]{display:none}
.showcase-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;opacity:0;transition:opacity .5s ease;z-index:2}
.showcase-shot.is-ready{opacity:1}
/* Saat screenshot tampil, isi mockup CSS disembunyikan sehingga panel tidak lagi
   perlu tinggi 390px untuk menampungnya. Panel lalu mengikuti rasio gambar
   (3/2) supaya screenshot tampil utuh. Tanpa aturan ini lebar panel yang
   berubah-ubah membuat rasio bergeser jauh dan gambar terpangkas sampai 66%. */
.showcase-page.has-shot{aspect-ratio:3/2;min-height:0}
/* isi mockup CSS disembunyikan selama screenshot tampil, supaya tidak ada
   elemen yang menembus gambar */
.showcase-shot.is-ready ~ .showcase-inner{visibility:hidden}
@media(prefers-reduced-motion:reduce){.showcase-shot{transition:none}}
.showcase-nav{display:flex;align-items:center;gap:28px;font-size:10px;color:#777}.showcase-nav strong{font-size:15px;letter-spacing:.12em;color:#222;margin-right:auto}.showcase-nav div{display:flex;gap:20px}
.showcase-nav button,.mini-cta{border:0;background:#171717;color:#fff;border-radius:100px;padding:9px 14px;font-size:9px;cursor:pointer}
.showcase-content{display:grid;grid-template-columns:1fr .78fr;gap:35px;align-items:center;min-height:275px;padding:15px 0}
.mini-tag{font-size:8px;letter-spacing:.17em;color:#8d7f73;font-weight:800}.showcase-content h4{font-size:clamp(35px,4.5vw,64px);line-height:.88;letter-spacing:-.065em;margin:16px 0}.showcase-content h4 i{font-weight:400;color:#8c8177}

/* aksen tipis mengikuti tema kategori terpilih */
.subtypes span{border-color:color-mix(in srgb, var(--art) 55%, rgba(0,0,0,.08))}
.mock-image span{background:rgba(0,0,0,.22);padding:4px 9px;border-radius:100px}
.category-preview.is-changing .preview-meta,.category-preview.is-changing .showcase-content>*{opacity:.4}
.preview-meta,.showcase-content>*{transition:opacity .2s ease}
.showcase-content p{font-size:11px;line-height:1.6;color:#817b76;max-width:300px;margin:0 0 18px}.mini-cta{background:#fff;color:#222;border:1px solid rgba(0,0,0,.08);padding:11px 14px}.mini-cta b{margin-left:8px}
.mock-image{height:245px;border-radius:18px;background:linear-gradient(145deg,#ded6cd,#a99b8e);position:relative;overflow:hidden;box-shadow:0 20px 45px rgba(68,54,43,.17)}
.mock-image:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 65%);transform:translateX(-100%);animation:showcaseShine 5s ease-in-out infinite}
.mock-orb{position:absolute;width:190px;height:190px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#f6eee5,#b6a598 58%,#88776a);box-shadow:inset -25px -30px 45px rgba(65,48,38,.18),0 25px 45px rgba(68,54,43,.18)}
.mock-image span{position:absolute;left:18px;bottom:16px;color:rgba(255,255,255,.8);font-size:9px;letter-spacing:.16em;z-index:2}
.showcase-stats{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid rgba(0,0,0,.08);padding-top:15px;font-size:9px;color:#858078}
.subtypes{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.subtypes span{font-size:9px;color:#7d7d83;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.07);border-radius:100px;padding:7px 10px}
.category-note{display:flex;gap:30px;align-items:center;margin-top:30px;padding:22px 25px;border:1px solid rgba(0,0,0,.07);border-radius:20px;background:rgba(255,255,255,.55)}.category-note span{white-space:nowrap;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.category-note p{margin:0;color:#8a8a90;font-size:12px;line-height:1.6}
@keyframes showcaseShine{0%,55%,100%{transform:translateX(-120%)}75%{transform:translateX(120%)}}
.category-preview.is-changing .showcase-browser{opacity:.35;transform:perspective(1300px) rotateY(2deg) translateY(6px)}
@media(max-width:980px){.category-showroom{padding-top:100px}.section-head{display:block}.section-head>p{margin-top:20px}.category-layout{grid-template-columns:1fr}.category-menu{display:grid;grid-template-columns:repeat(2,1fr)}.category-preview{padding:20px}}
@media(max-width:640px){.category-showroom{padding:90px 5vw 50px}.section-head{margin-bottom:35px}.section-head h2{font-size:42px}.category-menu{grid-template-columns:1fr 1fr;border-radius:19px}.category-btn{padding:12px 10px;font-size:10px;gap:7px}.category-btn span{width:17px}.category-preview{border-radius:22px;padding:15px}.preview-meta h3{font-size:18px}.showcase-page{padding:18px 17px 16px;min-height:410px}.showcase-nav div{display:none}.showcase-nav{gap:10px}.showcase-content{grid-template-columns:1fr;gap:15px;min-height:320px}.showcase-content h4{font-size:49px;margin:11px 0}.mock-image{height:145px}.mock-orb{width:115px;height:115px}.showcase-stats{gap:7px}.category-note{display:block;padding:18px}.category-note p{margin-top:9px}.subtypes{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.showcase-browser,.category-btn{transition:none}.mock-image:after{animation:none}}