/* ==========================================================================
   hero.css: visual 3D hero (browser mockup, float panel, chip kategori)
   Dimuat setelah base.css agar dapat menimpa aturan .hero-visual
   ========================================================================== */

/* .hero-stage dipusatkan secara absolut (bukan lewat place-items:center), sebab
   item grid yang lebih besar dari selnya tidak dipusatkan oleh browser,
   akibatnya visual hero bergeser ke kanan di layar sempit.
   Ukuran visual diatur oleh --stage-scale (lihat media query di bawah). */
.hero-visual{height:650px;min-width:0;position:relative;perspective:1500px}
.hero-stage{--stage-scale:1;width:650px;height:560px;position:absolute;left:50%;top:50%;margin:-280px 0 0 -325px;transform-style:preserve-3d;transition:transform .18s ease-out}
.stage-glow{position:absolute;width:470px;height:320px;left:90px;top:120px;border-radius:50%;background:radial-gradient(ellipse,#dfe5ff,#ece8ff 38%,transparent 72%);filter:blur(35px);opacity:.7}
/* Tinggi 428px dipilih agar area isi (568px lebar) berasio tepat 1,5:1, sama
   dengan rasio screenshot assets/img/lumea.webp (1536x1024). Dengan begitu
   gambar tampil utuh tanpa terpangkas oleh object-fit:cover.
   Rincian: 47px chrome + 379px isi + 2px border = 428px. */
.browser-window{display:flex;flex-direction:column;position:absolute;width:570px;height:428px;left:38px;top:60px;border:1px solid rgba(255,255,255,.95);border-radius:27px;background:rgba(255,255,255,.76);backdrop-filter:blur(25px) saturate(145%);-webkit-backdrop-filter:blur(25px) saturate(145%);box-shadow:0 45px 100px rgba(45,50,80,.16),inset 0 1px rgba(255,255,255,.95);overflow:hidden;transform:translateZ(80px) rotateY(-8deg) rotateX(4deg);animation:browserfloat 7s ease-in-out infinite}
.browser-back{position:absolute;width:530px;height:392px;left:78px;top:82px;border-radius:25px;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 70px rgba(50,55,90,.08);transform:translateZ(10px) rotateY(-8deg) rotateX(4deg) translate(20px,25px)}
.browser-top{height:47px;border-bottom:1px solid rgba(20,20,20,.07);display:flex;align-items:center;padding:0 15px;gap:18px;background:rgba(250,250,250,.52)}.browser-dots{display:flex;gap:6px}.browser-dots i{width:7px;height:7px;border-radius:50%;background:#d8d8da}.browser-address{height:25px;flex:1;border-radius:9px;background:rgba(235,235,238,.75);font-size:9px;color:#999;display:flex;align-items:center;padding-left:12px}.browser-action{font-size:9px;color:#aaa}
.site-preview{flex:1;min-height:0;padding:20px 24px}.preview-nav{display:flex;align-items:center;gap:22px;font-size:8px;color:#999}.preview-nav b{font-family:var(--font-display);font-size:14px;letter-spacing:-.06em;color:#161719}.preview-nav span{flex:1}.preview-nav small{padding:7px 10px;border-radius:8px;background:#111;color:#fff;font-size:7px}.preview-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:15px;align-items:center;padding-top:29px}.preview-hero label{font-size:7px;letter-spacing:.14em;color:#96979b}.preview-hero strong{display:block;font-family:var(--font-display);font-size:31px;line-height:.94;letter-spacing:-.07em;margin:9px 0}.preview-hero em{font-style:normal;color:#8797ef}.preview-hero p{font-size:8px;color:#999;line-height:1.5;max-width:220px}.preview-hero button{margin-top:13px;border:0;border-radius:9px;padding:9px 12px;background:#151515;color:#fff;font-size:7px}.preview-portrait{height:190px;border-radius:18px;background:linear-gradient(145deg,#eef0ff,#eee8f9);position:relative;overflow:hidden}.portrait-orb{width:155px;height:190px;border-radius:50% 50% 40% 40%;position:absolute;right:-10px;bottom:-42px;background:radial-gradient(circle at 35% 25%,#fff,#cbd4ff 45%,#d9c9ed);box-shadow:inset 15px 10px 30px rgba(255,255,255,.7)}.preview-portrait span{position:absolute;left:12px;bottom:10px;font-size:8px;color:#888}.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.preview-cards div{padding:9px;border-radius:9px;background:rgba(246,246,247,.85);font-size:7px;color:#999}.preview-cards b{color:#222;font-size:8px}
/* ---- screenshot asli di dalam mockup ----
   Ditumpuk di atas mockup CSS. Mockup CSS sengaja TIDAK dihapus agar menjadi
   cadangan: selama berkas WebP belum tersedia, tampilan hero tetap normal.
   - top:47px  = tepat di bawah bilah browser (tinggi .browser-top)
   - object-fit:cover + object-position:top memastikan bagian ATAS website yang
     terlihat, apa pun rasio berkas yang dimasukkan. */
.preview-shot{position:absolute;top:47px;left:0;width:100%;height:calc(100% - 47px);object-fit:cover;object-position:top center;display:block;opacity:0;transition:opacity .55s ease;z-index:3}
.preview-shot.is-ready{opacity:1}
@media(prefers-reduced-motion:reduce){.preview-shot{transition:none}}

.flow-line{position:absolute;left:135px;bottom:8px;display:flex;align-items:center;gap:10px;font-size:9px;color:#999;padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:0 15px 35px rgba(40,45,80,.06);transform:translateZ(130px)}.flow-line i{font-style:normal;color:#bbb}.flow-line b{color:#222}@keyframes browserfloat{0%,100%{margin-top:0}50%{margin-top:-12px}}/* Skala visual hero lewat --stage-scale, bukan transform:scale, sebab JS
   parallax menulis ulang properti transform dan akan menghapus scale tersebut.

   Tahapan skala mengikuti menyempitnya kolom kanan grid hero, supaya mockup
   tidak pernah terpotong keluar layar pada lebar menengah (851-1200px). */
@media(max-width:1320px){.hero-stage{--stage-scale:.9}}
@media(max-width:1200px){.hero-stage{--stage-scale:.76}}
@media(max-width:1000px){.hero-stage{--stage-scale:.62}}
@media(max-width:850px){.hero-visual{height:500px}.hero-stage{--stage-scale:.72}}
@media(max-width:520px){.hero-visual{height:390px}.hero-stage{--stage-scale:.5}}
/* di layar sangat sempit, visual hero diperkecil agar tidak terpotong keluar viewport */
@media(max-width:400px){
 .hero-stage{--stage-scale:.44}
}
@media(prefers-reduced-motion:reduce){.browser-window{animation:none}}