@font-face{font-family:"Great Vibes";src:url("../fonts/great-vibes.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* ===========================================================
   rismandro.id — Beranda "Personal Space"
   =========================================================== */
:root{--sw:292px;--v1:#6d5cf0;--v2:#9a86ff;--glass:rgba(20,17,40,.55);--glass-b:rgba(255,255,255,.12);--script:"Great Vibes","Allura",cursive}
html.light{--bg:#f5f4fb;--bg2:#ecebf6;--card:#ffffff;--line:rgba(20,16,50,.1);--ink:#16132a;--mute:#625f78}
html.light body.home{background:var(--bg)}
body.home{background:#0b0a1a}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- sidebar ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--sw);z-index:120;display:flex;flex-direction:column;padding:26px 18px 0;background:linear-gradient(180deg,#121029 0%,#0d0b1f 70%,#0b0a1a 100%);border-right:1px solid rgba(255,255,255,.06);color:#e9e7f5;overflow:hidden}
html.light .side{background:linear-gradient(180deg,#ffffff,#f3f1fb);color:var(--ink);border-color:var(--line)}
.side-brand{display:flex;align-items:center;gap:14px;padding:0 6px 26px}
.avatar{width:78px;height:78px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 38%,#4a3f7c 0 26%,transparent 27%),radial-gradient(ellipse 60% 42% at 50% 100%,#4a3f7c 0 98%,transparent 100%),linear-gradient(160deg,#2b2450,#17132e);border:2px solid rgba(255,255,255,.14);background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.avatar.sm{width:38px;height:38px;border-width:1.5px}
.sig{display:flex;flex-direction:column;line-height:1;position:relative}
.sig b{font-family:var(--script);font-weight:400;font-size:40px;letter-spacing:.01em}
.sig small{font-size:15px;color:#a7a2c4;margin-top:4px;letter-spacing:.02em}
html.light .sig small{color:var(--mute)}
.sig.sm b{font-size:28px}
.sig-swash{width:140px;height:14px;margin-top:2px;stroke:#e9a14a;stroke-width:1.6}
.side-label{display:none}
.side-x{display:none}
.side-nav{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.side-nav a{display:flex;align-items:center;gap:16px;padding:13px 16px;border-radius:16px;color:#d6d3ea;font-size:16px;transition:background .2s,color .2s;border:1.5px solid transparent;position:relative}
html.light .side-nav a{color:#3b3854}
.side-nav a>svg:first-child{font-size:24px;stroke-width:1.6}
.side-nav a span{display:flex;flex-direction:column;flex:1;min-width:0}
.side-nav a b{font-weight:500}
.side-nav a small,.side-nav a .chev{display:none}
.side-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
html.light .side-nav a:hover{background:rgba(109,92,240,.07);color:var(--ink)}
.side-nav a.on{background:linear-gradient(90deg,rgba(109,92,240,.55),rgba(109,92,240,.18));border-color:rgba(154,134,255,.7);color:#fff;box-shadow:0 0 0 4px rgba(109,92,240,.08),0 10px 30px rgba(109,92,240,.25)}
html.light .side-nav a.on{color:#fff;background:linear-gradient(90deg,#6d5cf0,#9a86ff)}
.side-social{display:flex;gap:22px;padding:26px 30px 0;margin-top:22px;border-top:1px solid rgba(255,255,255,.08);margin-inline:14px;font-size:26px}
html.light .side-social{border-color:var(--line)}
.side-social a{color:#c9c5e2;transition:color .2s,transform .2s}
.side-social a:hover{color:#fff;transform:translateY(-2px)}
html.light .side-social a{color:#55516f}
.side-mtn{margin:auto -18px 0;height:200px;background:
  linear-gradient(180deg,rgba(11,10,26,1) 0%,transparent 40%),
  linear-gradient(170deg,transparent 45%,#1b1534 46%) ,
  radial-gradient(ellipse 60% 30% at 70% 100%,#e2894f55,transparent 70%),
  linear-gradient(180deg,#3b2a5a 0%,#6c4466 60%,#c27058 100%);
  -webkit-mask:linear-gradient(transparent,#000 35%);mask:linear-gradient(transparent,#000 35%);opacity:.9}
.side-mtn{position:relative}
.side-mtn::before{content:"";position:absolute;inset:auto 0 0;height:150px;background:#120e24;clip-path:polygon(0 70%,12% 45%,22% 60%,35% 25%,45% 40%,55% 8%,66% 38%,78% 28%,90% 55%,100% 40%,100% 100%,0 100%)}
.side-mtn::after{content:"";position:absolute;inset:auto 0 0;height:80px;background:#0b0918;clip-path:polygon(0 60%,15% 35%,30% 55%,48% 30%,62% 52%,80% 34%,100% 58%,100% 100%,0 100%)}
html.light .side-mtn{display:none}
.side-scrim{display:none}

/* ---------- top tools ---------- */
.topbar{position:fixed;top:18px;right:22px;left:calc(var(--sw) + 22px);z-index:110;display:flex;justify-content:flex-end;align-items:center;pointer-events:none}
.topbar>*{pointer-events:auto}
.top-brand{display:none;align-items:center;gap:10px;color:#fff;margin-right:auto}
.tools{display:flex;gap:12px}
.icon-round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(18,15,36,.45);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:22px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,transform .2s}
.icon-round:hover{background:rgba(40,34,80,.7);transform:translateY(-1px)}
body.scrolled .icon-round{background:rgba(18,15,36,.8)}
html.light body.scrolled .icon-round{background:rgba(255,255,255,.9);color:var(--ink);border-color:var(--line)}

/* ---------- page ---------- */
.page{margin-left:var(--sw);min-width:0}

/* ---------- hero ---------- */
.hero2{position:relative;min-height:max(100vh,820px);overflow:hidden;color:#fff;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-3}
.scene svg{width:100%;height:100%;display:block;stroke:none}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(11,10,26,.55) 0%,rgba(11,10,26,0) 30%),
  linear-gradient(180deg,rgba(11,10,26,0) 55%,rgba(11,10,26,.75) 88%,#0b0a1a 100%)}
html.light .hero-shade{background:linear-gradient(90deg,rgba(11,10,26,.45) 0%,rgba(11,10,26,0) 30%),linear-gradient(180deg,rgba(11,10,26,0) 55%,rgba(11,10,26,.6) 85%,var(--bg) 100%)}
.portrait-wrap{position:absolute;left:0;bottom:0;width:min(46%,760px);height:94%;z-index:-2;margin:0;display:flex;align-items:flex-end;justify-content:center}
.portrait{width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-mask:linear-gradient(90deg,#000 70%,transparent),linear-gradient(#000 70%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 72%,transparent 100%);transition:opacity .45s var(--ease)}
.portrait.png{object-fit:contain;object-position:bottom center;-webkit-mask:none;mask:none}
.portrait-ph{width:78%;height:auto;max-height:100%;opacity:.9}
.portrait-wrap.swap .portrait,.portrait-wrap.swap .portrait-ph{opacity:0}

.hero-copy{position:absolute;left:52%;right:5%;top:12%;max-width:640px}
.hello{font-size:clamp(26px,2.4vw,38px);font-weight:500;letter-spacing:-.01em;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.script-name{font-family:var(--script);font-weight:400;font-size:clamp(84px,9.6vw,168px);line-height:.95;letter-spacing:.005em;margin:6px 0 4px;position:relative;display:inline-block;text-shadow:0 6px 40px rgba(0,0,0,.25)}
.name-swash{position:absolute;left:28%;right:-6%;bottom:-24px;width:78%;height:auto;stroke:#fff;stroke-width:3;opacity:.95}
.roles{margin-top:42px;font-size:clamp(17px,1.5vw,23px);display:flex;flex-wrap:wrap;gap:6px 0;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.roles span+span::before{content:"|";margin:0 14px;opacity:.7}
.intro{margin-top:22px;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:#f1eef9;max-width:520px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px}
.btn svg{font-size:20px}
.btn-violet{background:linear-gradient(90deg,var(--v1),var(--v2));color:#fff;box-shadow:0 10px 30px rgba(109,92,240,.45);padding:14px 26px;border-radius:999px}
.btn-violet svg{stroke-width:2}
.btn-outline{border:1.5px solid rgba(160,145,255,.85);color:#fff;background:rgba(20,16,40,.35);backdrop-filter:blur(6px);padding:14px 26px;border-radius:999px}
.btn-outline:hover{background:rgba(109,92,240,.25)}
.copy-swap{animation:copySwap .5s var(--ease)}
@keyframes copySwap{from{opacity:0;transform:translateY(8px)}}

.hero-bottom{position:absolute;left:3%;right:3%;bottom:30px;display:flex;gap:28px;align-items:flex-end}
.mini-h{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;margin-bottom:14px}
.mini-h svg{font-size:24px;color:#b6a8ff}
.personas{flex:1.35;min-width:0}
.persona-row{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 2px}
.persona-row::-webkit-scrollbar{display:none}
.persona{flex:0 0 auto;width:clamp(116px,10.4vw,170px);background:none;border:0;color:#fff;text-align:center;font-weight:500;font-size:15px;cursor:pointer}
.persona .ph{position:relative;display:block;aspect-ratio:1.02;border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.12);margin-bottom:10px;transition:border-color .25s,transform .25s,box-shadow .25s;background-size:cover;background-position:center top}
.persona:hover .ph{transform:translateY(-3px)}
.persona[aria-checked=true] .ph{border-color:#a596ff;box-shadow:0 0 0 3px rgba(109,92,240,.35),0 14px 30px rgba(109,92,240,.35)}
.persona .ok{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;background:#3fbf7f;display:grid;place-items:center;color:#fff;font-size:18px;opacity:0;transform:scale(.6);transition:.25s var(--ease)}
.persona .ok svg{stroke-width:2.6}
.persona[aria-checked=true] .ok{opacity:1;transform:none}
.persona .ph-init{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;opacity:.85}
.focus{flex:1;min-width:0;padding-left:28px;border-left:1px solid rgba(255,255,255,.18)}
.focus-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.focus-tile{background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;padding:18px 8px 14px;color:#fff;text-align:center;font-size:12.5px;line-height:1.3;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .25s,border-color .25s,background .25s;min-height:132px;justify-content:center}
.focus-tile svg{font-size:40px;color:#c9beff;stroke-width:1.5}
.focus-tile:hover{transform:translateY(-4px);border-color:rgba(165,150,255,.8);background:rgba(60,48,130,.45)}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,10vw,130px) 0;position:relative}
.sec.alt{background:linear-gradient(180deg,transparent,rgba(109,92,240,.05) 30%,transparent)}
html.light .sec.alt{background:linear-gradient(180deg,transparent,rgba(109,92,240,.06) 30%,transparent)}
.sub-h{font-size:20px;margin:40px 0 16px;letter-spacing:-.01em}
.about2{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,60px);align-items:start}
@media(max-width:900px){.about2{grid-template-columns:1fr}}
.fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact-grid div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.fact-grid b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);margin-bottom:6px}
.fact-grid span{color:var(--ink);font-size:15px}
.principles{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.principles li{counter-increment:p;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 20px 20px 64px;position:relative;font-size:15px}
.principles li::before{content:counter(p);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--v1),var(--v2));color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
html.light .about-text{color:#2d2a44}

.timeline{list-style:none;position:relative;padding-left:34px;max-width:760px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--v2),rgba(154,134,255,.1))}
.timeline li{position:relative;padding:0 0 34px}
.timeline li::before{content:"";position:absolute;left:-31px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--v2);box-shadow:0 0 0 5px rgba(154,134,255,.15)}
.timeline .yr{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700}
.timeline h3{font-size:20px;margin:4px 0 6px;letter-spacing:-.01em}
.timeline p{color:var(--mute)}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.proj{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.proj .t{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--acc);font-weight:700}
.proj h4{font-size:17px;margin:6px 0}
.proj p{color:var(--mute);font-size:14px}
.install-box{margin-top:40px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 22px}
.install-box summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.install-box summary::-webkit-details-marker{display:none}
.install-box summary span{color:var(--mute);font-size:13px}
.install-box[open]{padding-bottom:22px}
.install-box .steps li{background:transparent}
#faq .sub-h{margin-top:56px}

.chips{margin-bottom:24px}
.idea-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.idea{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .3s var(--ease),border-color .3s;color:var(--ink)}
.idea:hover{transform:translateY(-4px);border-color:rgba(154,134,255,.45)}
.idea .meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px}
.idea .meta span{padding:3px 9px;border-radius:12px;background:rgba(139,124,246,.14);color:#b9adff;font-weight:600}
html.light .idea .meta span{color:#5b4bd6}
.idea .meta span.cat{background:transparent;border:1px solid var(--line);color:var(--mute)}
.idea h3{font-size:18px;letter-spacing:-.01em;line-height:1.3}
.idea p{color:var(--mute);font-size:14px;flex:1}
.idea time{font-size:12px;color:var(--mute)}
.idea.quote{background:linear-gradient(150deg,rgba(109,92,240,.28),rgba(109,92,240,.06));}
.idea.quote h3{font-family:var(--serif);font-weight:400;font-size:24px;font-style:italic}

.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;grid-auto-flow:dense}
.gal{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--card);border:1px solid var(--line)}
.gal:nth-child(5n+1){grid-row:span 2;aspect-ratio:auto}
.gal img,.gal iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.gal .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);font-size:34px}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.gal figcaption small{opacity:.75}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:34px;text-align:left}
.c-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;color:var(--ink);transition:transform .25s,border-color .25s}
.c-card:hover{transform:translateY(-3px);border-color:rgba(154,134,255,.5)}
.c-card .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--v1),var(--v2));color:#fff;font-size:22px;flex:none}
.c-card b{display:block;font-size:15px}
.c-card small{color:var(--mute);font-size:12.5px;word-break:break-all}
.c-card.off{opacity:.55}

html.light .footer{color:var(--mute)}
html.light .app,html.light .steps li{color:var(--ink)}
html.light .app p,html.light .about-text,html.light .faq details p{color:#4a4763}
html.light .chip{color:var(--mute)}html.light .chip.on{background:var(--ink);color:#fff}
html.light .search input{background:#fff;color:var(--ink)}
html.light .icon-btn{color:var(--ink)}

/* ---------- search overlay ---------- */
.search-ov{position:fixed;inset:0;z-index:400;background:rgba(6,5,16,.6);backdrop-filter:blur(8px);display:flex;justify-content:center;padding:12vh 16px 16px}
.search-ov[hidden]{display:none}
.search-box{width:min(620px,100%);background:#141128;border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;align-self:flex-start;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pop .3s var(--ease)}
html.light .search-box{background:#fff;border-color:var(--line)}
.search-box label{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);font-size:22px;color:var(--mute)}
.search-box input{flex:1;background:none;border:0;outline:none;color:var(--ink);font:inherit;font-size:17px}
.search-res{max-height:52vh;overflow:auto;padding:8px}
.search-res a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;color:var(--ink)}
.search-res a:hover,.search-res a.sel{background:rgba(139,124,246,.14)}
.search-res small{display:block;color:var(--mute);font-size:12px}
.search-res .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);font-weight:700;min-width:72px}
.search-res p{padding:14px;color:var(--mute);font-size:14px}

/* ---------- responsive ---------- */
@media(max-width:1280px){
  :root{--sw:250px}
  .side-nav a{font-size:15px;padding:12px 14px}
  .focus-row{grid-template-columns:repeat(3,1fr)}
  .focus-tile:nth-child(n+4){display:none}
}
@media(max-width:1080px){
  :root{--sw:0px}
  .side{width:min(360px,88vw);transform:translateX(-102%);transition:transform .35s var(--ease);padding-top:20px;overflow-y:auto}
  .side.open{transform:none;box-shadow:30px 0 80px rgba(0,0,0,.5)}
  .side-scrim{display:block;position:fixed;inset:0;z-index:115;background:rgba(5,4,14,.55);opacity:0;pointer-events:none;transition:opacity .3s}
  .side.open+.side-scrim{opacity:1;pointer-events:auto}
  .side-x{display:grid;position:absolute;right:14px;top:18px;width:42px;height:42px;font-size:18px}
  .side-label{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a7a2c4;padding:0 8px 10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
  .side-label svg{font-size:18px}
  .side-nav a{padding:10px 10px;gap:14px}
  .side-nav a>svg:first-child{width:46px;height:46px;padding:11px;border-radius:14px;background:rgba(255,255,255,.06);font-size:46px}
  .side-nav a.on>svg:first-child{background:rgba(255,255,255,.15)}
  .side-nav a small{display:block;font-size:12.5px;color:#a7a2c4;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-nav a.on small{color:#e6e1ff}
  .side-nav a .chev{display:block;font-size:18px;opacity:.6}
  .side-mtn{min-height:120px}
  .topbar{left:16px;right:16px;top:12px}
  .top-brand{display:flex}
  body.scrolled .topbar .top-brand{color:#fff}
  .icon-round{width:44px;height:44px;font-size:20px}
  .tools{gap:8px}
  .hero-copy{left:48%}
}
@media(min-width:1081px){#btnMenu{display:none}}
@media(max-width:860px){
  .hero2{min-height:auto;display:flex;flex-direction:column;padding-top:70px}
  .portrait-wrap{position:relative;width:100%;height:56vh;max-height:520px;left:auto;order:1;z-index:0}
  .portrait{-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
  .hero-copy{position:relative;left:auto;right:auto;top:auto;order:2;padding:0 22px;margin-top:-90px;max-width:none}
  .script-name{font-size:clamp(78px,22vw,120px)}
  .name-swash{bottom:-16px}
  .roles{margin-top:30px;font-size:16px}
  .roles span+span::before{margin:0 9px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1;padding:13px 16px;font-size:14px}
  .hero-bottom{position:relative;order:3;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:stretch;padding:34px 22px 40px;gap:26px}
  .focus{padding-left:0;border-left:0}
  .focus-row{grid-template-columns:repeat(5,minmax(110px,1fr));overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .focus-tile:nth-child(n+4){display:flex}
  .focus-tile{min-height:116px}
  .persona{width:118px;font-size:14px}
  .hero-shade{background:linear-gradient(180deg,rgba(11,10,26,0) 30%,rgba(11,10,26,.6) 50%,#0b0a1a 75%)}
  html.light .hero-shade{background:linear-gradient(180deg,rgba(11,10,26,0) 30%,rgba(11,10,26,.6) 50%,#0b0a1a 75%)}
  .fact-grid{grid-template-columns:1fr}
}
.portrait[hidden]{display:none!important}
.side .side-x{display:none}
@media(max-width:1080px){.side .side-x{display:grid}}
.portrait-ph{stroke:none}

.fan{overflow:hidden;padding:10px 0 4px}
.persona{width:clamp(96px,8.4vw,170px)}
.focus-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.focus-tile{padding:16px 6px 12px;font-size:12px;min-height:120px}
.focus-tile svg{font-size:36px}
@media(max-width:1500px){.focus-tile{font-size:11px;min-height:110px}.focus-tile svg{font-size:30px}.hero-bottom{gap:20px}.focus{padding-left:20px}}
@media(max-width:1280px){.focus-row{grid-template-columns:repeat(5,minmax(0,1fr))}.focus-tile:nth-child(n+4){display:flex}.focus-tile span{font-size:10.5px}}
@media(max-width:860px){.focus-row{grid-template-columns:repeat(5,minmax(104px,1fr))}.focus-tile span{font-size:11.5px}}
.roles{font-size:clamp(15px,1.35vw,23px)}
@media(max-width:1500px){.roles span+span::before{margin:0 10px}}
/* nama panjang (Rismandroid) */
.sig b{font-size:33px;white-space:nowrap}
.avatar{width:66px;height:66px}
.side-brand{gap:12px;padding-right:4px}
.script-name{white-space:nowrap}
@media(max-width:1080px){.side-brand{padding-right:52px}.side .sig b{font-size:30px}}

/* ---------- foto latar & potret ---------- */
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-shade{background:
  linear-gradient(90deg,rgba(11,10,26,.3) 0%,rgba(11,10,26,0) 28%,rgba(11,10,26,0) 48%,rgba(11,10,26,.3) 64%,rgba(11,10,26,.38) 100%),
  linear-gradient(180deg,rgba(11,10,26,.15) 0%,rgba(11,10,26,0) 22%,rgba(11,10,26,0) 55%,rgba(11,10,26,.7) 86%,#0b0a1a 100%)}
html.light .hero-shade{background:
  linear-gradient(90deg,rgba(11,10,26,.3) 0%,rgba(11,10,26,0) 28%,rgba(11,10,26,0) 48%,rgba(11,10,26,.3) 64%,rgba(11,10,26,.38) 100%),
  linear-gradient(180deg,rgba(11,10,26,.15) 0%,rgba(11,10,26,0) 22%,rgba(11,10,26,0) 55%,rgba(11,10,26,.6) 86%,var(--bg) 100%)}
.portrait-wrap{left:1%;width:min(50%,900px);height:100%}
.portrait.png{filter:drop-shadow(0 30px 50px rgba(0,0,0,.45));object-position:bottom center}
.persona .ph{background-color:#d6cdf0}
@media(max-width:860px){
  .scene img{object-position:62% 40%}
  .portrait-wrap{height:62vh;max-height:600px;width:100%;left:auto}
  .portrait.png{-webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
  .hero-shade{background:linear-gradient(180deg,rgba(11,10,26,.2) 0%,rgba(11,10,26,0) 25%,rgba(11,10,26,.55) 52%,#0b0a1a 72%)}
  html.light .hero-shade{background:linear-gradient(180deg,rgba(11,10,26,.2) 0%,rgba(11,10,26,0) 25%,rgba(11,10,26,.55) 52%,#0b0a1a 72%)}
}
.idea.has-cover{padding-top:0;overflow:hidden}
.idea-cover{width:calc(100% + 44px);margin:0 -22px 6px;aspect-ratio:16/9;object-fit:cover;display:block}