:root{--bg:#07111f;--panel:rgba(255,255,255,.065);--line:rgba(255,255,255,.12);--text:#f5f8ff;--muted:#aeb9cc;--pink:#ff8ab3;--violet:#b9a9ff;--green:#a7f3d0;--gold:#e3bb78;--mint:#b9f7dd;--mono:"JetBrains Mono",monospace;--sans:"Space Grotesk","Plus Jakarta Sans",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--sans);color:var(--text);background:radial-gradient(circle at 16% 0%,rgba(255,138,179,.15),transparent 28%),radial-gradient(circle at 82% 10%,rgba(185,169,255,.16),transparent 32%),#07111f}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 84%)}a{text-decoration:none;color:inherit}.topbar{position:sticky;top:0;z-index:50;height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 24px;background:rgba(7,17,31,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-weight:800}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--violet));color:#07111f;font-weight:900}.brand strong{font-size:20px;letter-spacing:-.04em}.brand em{font-style:normal;color:var(--pink)}.topnav{display:flex;align-items:center;gap:24px;color:var(--muted);font-weight:700;font-size:14px}.topnav a:hover{color:#fff}.cta-small{padding:11px 16px;border-radius:999px;background:linear-gradient(135deg,#ffb0ca,#b9a9ff);color:#07111f!important;font-weight:900}.menu-btn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:11px 15px;font-weight:800}.shell{display:grid;grid-template-columns:282px 1fr;min-height:calc(100vh - 72px)}.sidebar{position:sticky;top:72px;height:calc(100vh - 72px);overflow:auto;padding:22px 14px;border-right:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}.side-title{padding:8px 10px 16px}.kicker,.side-title small,.code-label{font-family:var(--mono);color:var(--pink);font-weight:700;font-size:12px}.side-title h2{margin:7px 0 0;font-size:24px;letter-spacing:-.055em}.category-list{display:grid;gap:7px}.category-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-radius:13px;color:#b9c4d6;border:1px solid transparent;transition:.2s ease;font-size:13.5px;font-weight:750}.category-list a:hover{transform:translateX(2px);background:rgba(255,138,179,.13);border-color:rgba(255,138,179,.2);color:#fff5fa}.category-list a.active{background:linear-gradient(135deg,#ffbfd2,#b9a9ff);color:#07111f}.category-list span{font-family:var(--mono);font-size:11px;opacity:.78}.main{min-width:0}.hero{max-width:1480px;margin:auto;padding:52px 34px 26px;display:grid;grid-template-columns:1.12fr .88fr;gap:36px;align-items:center}.hero h1{margin:0 0 22px;font-size:clamp(44px,7vw,88px);line-height:1.01;letter-spacing:-.055em}.hero h1 span,.section-head h2 span{background:linear-gradient(135deg,var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:18px;line-height:1.78;max-width:740px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{min-height:50px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:900;transition:.22s ease}.btn:hover{transform:translateY(-2px)}.btn.primary{background:linear-gradient(135deg,#ffb0ca,#b9a9ff);color:#07111f}.btn.ghost{border:1px solid var(--line);background:rgba(255,255,255,.065);color:#eef4ff}.hero-panel{border:1px solid var(--line);border-radius:34px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));box-shadow:0 26px 80px rgba(0,0,0,.28)}.browser-line{height:44px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line);color:#8290a6;font-family:var(--mono);font-size:11px}.browser-line i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.30)}.browser-line span{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-screen{min-height:300px;display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:end;gap:18px;padding:30px;background:radial-gradient(circle at 78% 20%,rgba(255,138,179,.22),transparent 28%),linear-gradient(135deg,rgba(191,245,255,.17),rgba(185,169,255,.17))}.hero-screen small{font-family:var(--mono);color:var(--green)}.hero-screen h3{margin:10px 0;font-size:34px;line-height:1.02;letter-spacing:-.06em}.hero-screen p{margin:0;color:rgba(255,255,255,.78)}
.hero-copy{min-width:0}
.chip-visual{position:relative;min-height:170px;border:1px solid rgba(255,255,255,.16);border-radius:26px;background:linear-gradient(180deg,rgba(7,17,31,.3),rgba(7,17,31,.16));overflow:hidden}
.chip-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(135deg,#ffb0ca,#b9a9ff);color:#07111f;font-weight:900;font-size:28px;box-shadow:0 18px 48px rgba(185,169,255,.34)}
.chip-visual .trace{position:absolute;background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,0));height:2px;border-radius:999px}
.chip-visual .trace:after{content:"";position:absolute;right:-6px;top:-3px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.chip-visual .t1{left:18px;top:34px;width:76px}
.chip-visual .t2{right:18px;top:34px;width:76px;transform:scaleX(-1)}
.chip-visual .t3{left:18px;bottom:38px;width:76px}
.chip-visual .t4{right:18px;bottom:38px;width:76px;transform:scaleX(-1)}
.chip-visual .t5{left:50%;top:14px;width:2px;height:52px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));transform:translateX(-50%)}
.chip-visual .t5:after{right:-3px;top:-6px}
.chip-visual .t6{left:50%;bottom:14px;width:2px;height:52px;background:linear-gradient(0deg,rgba(255,255,255,.42),rgba(255,255,255,0));transform:translateX(-50%)}
.chip-visual .t6:after{right:-3px;top:auto;bottom:-6px}
.feature-section{padding-top:18px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature-grid article,.review-grid article{padding:22px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.052)}
.feature-grid b{font-family:var(--mono);color:var(--pink)}
.feature-grid h3{margin:14px 0 8px;font-size:22px;letter-spacing:-.03em}
.feature-grid p{color:var(--muted);line-height:1.68}
.review-section{padding-top:10px}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.review-stars{margin-bottom:14px;color:#ffd583;letter-spacing:.18em;font-size:14px}
.review-grid p{margin-bottom:16px;color:#e4ebf6;line-height:1.76}
.review-grid strong,.review-grid span{display:block}
.review-grid strong{font-size:16px}
.review-grid span{margin-top:4px;color:var(--muted);font-size:13px}
.card-subline{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.card-subline p,.card-subline span{margin:0}
.stats{max-width:1480px;margin:0 auto 24px;padding:0 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stats div{padding:20px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.052)}.stats b{display:block;font-size:22px;letter-spacing:-.04em}.stats span{color:var(--muted);font-size:14px}.price-strip{max-width:1412px;margin:18px auto 0;padding:22px 26px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));display:flex;align-items:center;justify-content:space-between;gap:18px}.price-strip p{margin:0;color:var(--pink);font-family:var(--mono);font-size:12px}.price-strip h2{margin:0;font-size:clamp(24px,4vw,42px);letter-spacing:-.055em}.price-strip h2 span{color:#ffb0ca}.price-strip small{max-width:330px;color:var(--muted);line-height:1.5}.section{max-width:1480px;margin:auto;padding:48px 34px}.catalog-section{padding-top:54px}.section-head{max-width:850px;margin-bottom:24px}.section-head h2{margin:8px 0 12px;font-size:clamp(32px,5vw,58px);line-height:1.02;letter-spacing:-.055em}.section-head p{color:var(--muted);line-height:1.72}.section-head-row{max-width:none;display:flex;align-items:end;justify-content:space-between;gap:22px}.page-note{min-width:150px;padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.055);text-align:right}.page-note b{display:block;color:#ffb0ca;font-size:26px;letter-spacing:-.05em}.page-note small,.page-note span{display:block;color:var(--muted);font-size:12px}.more-link{min-height:44px;padding:0 18px;border-radius:999px;background:linear-gradient(135deg,#ffb0ca,#b9a9ff);color:#07111f;font-weight:900;display:inline-flex;align-items:center;justify-content:center}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:26px}.web-card{position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.092),rgba(255,255,255,.042));box-shadow:0 18px 54px rgba(0,0,0,.20);transition:.22s ease}.web-card:hover{transform:translateY(-4px);border-color:rgba(255,138,179,.38);box-shadow:0 22px 66px rgba(0,0,0,.30)}.web-card.hide{display:none}.preview-art{position:relative;width:100%;height:128px;overflow:hidden;background:#101827}.gradient-preview{position:relative;width:100%;height:100%;min-height:128px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden}.gradient-preview:before{content:"";position:absolute;inset:0;z-index:-2}.gradient-preview:after{content:"";position:absolute;width:160px;height:160px;right:-62px;top:-70px;border-radius:50%;background:rgba(255,255,255,.16);z-index:-1}.visual-pill{width:max-content;max-width:100%;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.86);font-size:10.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.visual-copy strong,.visual-copy small{display:block}.visual-copy strong{max-width:94%;font-size:18px;line-height:1.04;letter-spacing:-.05em;color:#fff;text-shadow:0 8px 22px rgba(0,0,0,.22)}.visual-copy small{margin-top:4px;color:rgba(255,255,255,.72);font-size:12px;font-weight:800}.tone-amber:before{background:linear-gradient(135deg,#231d15 0%,#875c4e 53%,#d5a46c 100%)}.tone-cedar:before{background:linear-gradient(135deg,#261815 0%,#8c573f 52%,#d8a26b 100%)}.tone-aurora:before{background:linear-gradient(135deg,#112032 0%,#246a7a 52%,#a4d4a9 100%)}.tone-indigo:before{background:linear-gradient(135deg,#14172d 0%,#4e3d88 55%,#b782c5 100%)}.tone-crimson:before{background:linear-gradient(135deg,#23131b 0%,#8f4055 52%,#e09f62 100%)}.tone-moss:before{background:linear-gradient(135deg,#111f1b 0%,#315e4d 55%,#a8b978 100%)}.tone-nocturne:before{background:linear-gradient(135deg,#111528 0%,#403375 51%,#9c5b94 100%)}.tone-obsidian:before{background:linear-gradient(135deg,#0f1821 0%,#225a5b 54%,#b3b681 100%)}.tone-copper:before{background:linear-gradient(135deg,#1c1513 0%,#74513b 55%,#e2a36b 100%)}.tone-teal:before{background:linear-gradient(135deg,#0d1d24 0%,#23696b 52%,#83d7c1 100%)}.tone-lavender:before{background:linear-gradient(135deg,#22172f 0%,#76518f 55%,#d9afdd 100%)}.tone-espresso:before{background:linear-gradient(135deg,#17110d 0%,#65513d 52%,#d4a15f 100%)}.preview-art:after{content:"";position:absolute;inset:0;z-index:2;background:rgba(7,17,31,.46);opacity:0;transition:.25s ease}.web-card:hover .preview-art:after{opacity:1}.preview-btn{position:absolute;left:50%;top:50%;z-index:4;width:112px;height:42px;display:grid;place-items:center;border-radius:999px;transform:translate(-50%,-42%) scale(.96);opacity:0;background:linear-gradient(135deg,#ff8ab3,#b9a9ff);color:#07111f;border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 48px rgba(255,138,179,.34),0 0 0 7px rgba(255,138,179,.10);font-weight:900;font-size:13px;transition:.25s ease}.web-card:hover .preview-btn{opacity:1;transform:translate(-50%,-50%) scale(1)}.fav-btn{position:absolute;right:12px;top:12px;z-index:5;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(7,17,31,.50);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(10px)}.fav-btn.active{color:#ffd6e7;background:rgba(255,255,255,.16)}.card-meta{padding:14px 14px 10px;display:grid;gap:10px}.card-meta h3{min-height:42px;margin:0 0 5px;font-size:18px;line-height:1.14;letter-spacing:-.04em}.card-meta p{margin:0;color:var(--muted);font-size:12.5px}.card-meta span{font-family:var(--mono);font-size:10px;color:var(--violet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-links{display:flex;gap:8px;padding:0 14px 14px}.card-links a{flex:1;min-height:38px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:#e9eef8;font-weight:850;font-size:12.5px}.card-links a:hover{background:rgba(255,138,179,.13)}.pagination{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}.pagination a,.pagination span{min-width:42px;min-height:42px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted);font-weight:900}.pagination a:hover,.pagination a.active{background:linear-gradient(135deg,#ffb0ca,#b9a9ff);color:#07111f}.pagination a.disabled{opacity:.38;pointer-events:none}.category-showcase{padding-top:18px}.pro-section{border-block:1px solid var(--line);background:rgba(255,255,255,.03)}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.process article{padding:22px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.052)}.process b{font-family:var(--mono);color:var(--pink)}.process h3{margin:14px 0 8px}.process p{color:var(--muted);line-height:1.65}.final-cta{max-width:1480px;margin:auto;padding:64px 34px;text-align:center}.final-cta h2{max-width:860px;margin:0 auto 16px;font-size:clamp(38px,6vw,76px);line-height:1.02;letter-spacing:-.055em}.final-cta p{color:var(--muted);line-height:1.7;font-size:18px}.footer{padding:34px;text-align:center;color:var(--muted);border-top:1px solid var(--line)}.preview-modal{position:fixed;inset:0;z-index:999;display:none;flex-direction:column;gap:12px;padding:16px;background:rgba(4,8,16,.92);backdrop-filter:blur(16px)}.preview-modal.open{display:flex}.preview-topbar,.preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px}.preview-label{font-family:var(--mono);color:var(--pink)}.preview-actions{display:flex;gap:10px}.preview-actions a,.preview-actions button{min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.065);color:#fff;cursor:pointer;font-weight:850}#previewFrame{width:100%;flex:1;border:0;border-radius:22px;background:#101827;box-shadow:0 20px 80px rgba(0,0,0,.45)}.preview-bottom p{margin:4px 0 0;color:var(--muted);font-size:14px}.preview-order-btn{min-width:220px;min-height:50px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(135deg,#ffb0ca,#b9a9ff);color:#07111f;font-weight:900}.detail-hero{max-width:1480px;margin:auto;padding:56px 34px;display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}.detail-card,.detail-info,.related-card{border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.06);overflow:hidden}.gradient-detail-card{padding:14px}.detail-card .gradient-preview.large{height:380px;border-radius:22px}.gradient-preview.large .visual-copy strong{font-size:clamp(38px,6vw,68px);line-height:.94;max-width:760px}.gradient-preview.large .visual-copy small{font-size:15px}.detail-info{padding:30px}.detail-info h1{font-size:clamp(38px,6vw,70px);line-height:1.02;letter-spacing:-.055em;margin:8px 0 16px}.detail-info p{color:var(--muted);line-height:1.75}.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.tag-row span{padding:8px 11px;border-radius:999px;background:rgba(255,138,179,.12);color:#ffd6e7;font-size:12px;font-family:var(--mono)}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 26px;padding:0;list-style:none}.feature-list li{padding:12px;border:1px solid var(--line);border-radius:16px;color:#d8e1ee}.feature-list li:before{content:"✓";color:var(--green);margin-right:8px}.inline-actions{display:flex;gap:12px;flex-wrap:wrap}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.related-card .gradient-preview{height:150px;min-height:150px}.related-card div{padding:16px}.empty-state{padding:26px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.05);color:var(--muted)}@media(max-width:1180px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-hero{grid-template-columns:1fr}.process{grid-template-columns:repeat(2,1fr)}}@media(max-width:980px){.shell{grid-template-columns:1fr}.menu-btn{display:inline-flex}.topnav{display:none}.sidebar{display:none;position:fixed;left:14px;right:14px;top:84px;z-index:90;height:72vh;border:1px solid var(--line);border-radius:24px;background:#07111f;box-shadow:0 25px 80px rgba(0,0,0,.5)}.sidebar.open{display:block}.hero{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid,.review-grid{grid-template-columns:1fr 1fr}.price-strip{margin-left:34px;margin-right:34px;flex-direction:column;align-items:flex-start}.related-grid{grid-template-columns:repeat(2,1fr)}.section-head-row{align-items:flex-start;flex-direction:column}.page-note{text-align:left}.hero-screen{grid-template-columns:1fr}}@media(max-width:620px){.topbar{padding:0 14px}.brand strong{font-size:17px}.hero,.section,.stats,.final-cta,.detail-hero{padding-left:18px;padding-right:18px}.stats,.process,.feature-list,.related-grid,.cards,.feature-grid,.review-grid{grid-template-columns:1fr}.price-strip{margin-left:18px;margin-right:18px}.preview-art{height:140px}.preview-topbar,.preview-bottom{flex-direction:column;align-items:stretch}.preview-order-btn{width:100%}.hero-screen{grid-template-columns:1fr}.chip-visual{min-height:150px}}

/* --- Card cleanup patch: May 2026 --- */
.preview-art{
  height:138px;
  margin-bottom:12px;
}
.gradient-preview{
  min-height:138px;
  justify-content:flex-start;
  padding:12px;
}
.preview-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.visual-orb{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(7,17,31,.44);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.88);
  font-size:16px;
  line-height:1;
  backdrop-filter:blur(10px);
}
.visual-copy{display:none !important;}
.card-meta{
  padding:0 14px 8px;
  display:grid;
  gap:10px;
}
.card-meta h3{
  min-height:0;
  margin:0;
  font-size:17px;
  line-height:1.12;
}
.card-subline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
}
.card-subline p,
.card-subline span{
  margin:0;
}
.card-subline p{
  color:var(--muted);
  font-size:12.5px;
}
.card-subline span{
  font-family:var(--mono);
  font-size:10px;
  color:var(--violet);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.card-links{
  padding:0 14px 14px;
  margin-top:2px;
}
.card-links a{
  min-height:36px;
}
.detail-card .gradient-preview.large{
  height:380px;
  padding:16px;
  justify-content:flex-start;
}
.gradient-preview.large .preview-topline{
  align-items:flex-start;
}
@media(max-width:620px){
  .preview-art{height:146px;}
  .gradient-preview{min-height:146px;}
}
/* --- Final breathing layout patch: more space, cleaner sidebar --- */
.catalog-section .cards.compact-cards,
.category-showcase .cards.compact-cards{
  column-gap:18px !important;
  row-gap:42px !important;
}
.sidebar{
  border-right:1px solid rgba(255,255,255,.045) !important;
  background:rgba(255,255,255,.028) !important;
}
.category-list a{
  border-color:rgba(255,255,255,.025) !important;
}
.category-list a.active{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
@media(max-width:1180px){
  .catalog-section .cards.compact-cards,
  .category-showcase .cards.compact-cards{row-gap:36px !important;}
}
@media(max-width:620px){
  .catalog-section .cards.compact-cards,
  .category-showcase .cards.compact-cards{row-gap:26px !important;}
}
/* PATCH MOBILE CATEGORY BG - tambahkan di PALING BAWAH style.css */
@media (max-width: 980px) {
  body.menu-open {
    overflow: hidden;
  }

  body.menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(3, 7, 14, .88);
    backdrop-filter: blur(4px);
  }

  body.menu-open .sidebar.open,
  .sidebar.open {
    z-index: 120 !important;
    background: #050a14 !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 26px 100px rgba(0,0,0,.88) !important;
  }

  body.menu-open .sidebar.open .category-list a {
    background: rgba(255,255,255,.035);
  }

  body.menu-open .sidebar.open .category-list a.active {
    background: linear-gradient(135deg,#ffbfd2,#b9a9ff);
  }
}
/* =========================================================
   PATCH MOBILE CATEGORY SOLID BG
   Tempel di PALING BAWAH public_html/style.css
   Fungsi: membuat menu kategori mobile gelap pekat/full panel.
   ========================================================= */

@media (max-width: 980px) {
  .sidebar.open {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 72px !important;
    bottom: 0 !important;
    width: auto !important;
    height: calc(100dvh - 72px) !important;
    max-height: none !important;
    overflow-y: auto !important;

    z-index: 9999 !important;
    padding: 22px 18px 34px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;

    background: #020712 !important;
    background-image:
      radial-gradient(circle at 18% 0%, rgba(255,138,179,.08), transparent 28rem),
      radial-gradient(circle at 82% 8%, rgba(185,169,255,.08), transparent 30rem) !important;
    box-shadow: 0 30px 100px rgba(0,0,0,.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .sidebar.open .side-title,
  .sidebar.open .category-list {
    position: relative !important;
    z-index: 2 !important;
  }

  .sidebar.open .category-list {
    gap: 9px !important;
    padding-bottom: 28px !important;
  }

  .sidebar.open .category-list a {
    background: #07111f !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #dce7f8 !important;
  }

  .sidebar.open .category-list a:hover {
    background: #101b2d !important;
    border-color: rgba(255,138,179,.22) !important;
    color: #ffffff !important;
  }

  .sidebar.open .category-list a.active {
    background: linear-gradient(135deg,#ffbfd2,#b9a9ff) !important;
    color: #07111f !important;
    border-color: transparent !important;
  }

  .sidebar.open .category-list a span {
    color: inherit !important;
  }
}


/* =========================================================
   PabrikWeb simplification patch - May 2026
   Fokus: hero jelas, box mini, harga naik, auth links, popup.
   ========================================================= */
.topnav{gap:16px}.profile-pill,.login-link,.signup-link{padding:10px 13px;border-radius:999px}.login-link{border:1px solid rgba(255,255,255,.12);color:#fff!important}.signup-link{background:rgba(255,138,179,.12);color:#ffd9e8!important}.profile-pill{background:rgba(185,169,255,.13);border:1px solid rgba(185,169,255,.22);color:#efeaff!important}.hero{padding-bottom:18px}.hero p{max-width:690px}.price-strip{margin-top:8px;margin-bottom:18px}.mini-links{max-width:980px;padding-left:34px;padding-right:34px;margin:0 auto 24px;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mini-links a{display:flex;min-height:82px;flex-direction:column;justify-content:center;gap:5px;padding:16px 18px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04));box-shadow:0 14px 35px rgba(0,0,0,.16);transition:transform .22s ease,border-color .22s ease,background .22s ease}.mini-links a:hover{transform:translateY(-4px);border-color:rgba(255,138,179,.32);background:linear-gradient(180deg,rgba(255,138,179,.13),rgba(255,255,255,.05))}.mini-links b{font-size:17px}.mini-links span{font-family:var(--mono);font-size:10.5px;color:#ffb0ca}.review-section{padding-top:20px}.feature-section{display:none!important}.info-popup{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(3,7,14,.78);backdrop-filter:blur(10px)}.info-popup.open{display:flex}.info-box{position:relative;width:min(520px,100%);padding:26px;border-radius:28px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#0b1627,#060b15);box-shadow:0 30px 100px rgba(0,0,0,.6)}.info-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font-size:24px;cursor:pointer}.info-box small{font-family:var(--mono);color:var(--pink);font-weight:800}.info-box h3{margin:10px 44px 10px 0;font-size:clamp(25px,4vw,38px);line-height:1.04;letter-spacing:-.045em}.info-box p{margin:0;color:var(--muted);line-height:1.7}.dashboard-card{margin-top:16px;padding:16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}.dashboard-card strong{display:block;margin-bottom:6px}.dashboard-card span{display:block;color:var(--muted);font-size:13px;line-height:1.55}.read-more-frame{margin-top:16px;width:100%;height:170px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#091323;color:#dfe8f6;padding:16px;overflow:auto}.read-more-frame h4{margin:0 0 8px}.read-more-frame p{font-size:14px;line-height:1.6}
@media(max-width:980px){.price-strip{margin-top:6px}.mini-links{padding-left:18px;padding-right:18px;max-width:100%;display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;scrollbar-width:thin}.mini-links::-webkit-scrollbar{height:2px}.mini-links::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}.mini-links::-webkit-scrollbar-thumb{background:rgba(255,138,179,.75);border-radius:999px}.mini-links a{min-width:132px;min-height:76px;scroll-snap-align:start;border-radius:18px}.mini-links b{font-size:15px}.sidebar.open{background:#020712!important;background-image:none!important}.category-list{gap:6px}.category-list a{transition:background .18s ease,color .18s ease,border-color .18s ease!important;transform:none!important}.category-list a:hover{transform:none!important}.topnav{display:none}}
@media(max-width:620px){.hero h1{font-size:clamp(40px,13vw,58px)}.hero p{font-size:16px;line-height:1.65}.price-strip{padding:18px;margin-bottom:14px}.price-strip h2{font-size:28px}.mini-links{margin-bottom:22px}.mini-links a{min-width:128px}.stats.mini-links{grid-template-columns:none}.review-grid article:nth-child(n+3){display:none}}

/* =========================================================
   PATCH 2 — Revisi sesuai catatan: mobile kategori solid,
   scrollbar nyaris tidak terlihat, auth page, dashboard only login.
   ========================================================= */
.mini-links,.review-section{display:none!important}.profile-pill.user-only{display:none}.auth-page{min-height:100dvh;background:radial-gradient(circle at 18% 0%,rgba(255,138,179,.16),transparent 32rem),radial-gradient(circle at 82% 12%,rgba(185,169,255,.18),transparent 34rem),#07111f;color:#fff}.auth-wrap{width:min(560px,calc(100% - 34px));margin:0 auto;padding:44px 0 70px}.auth-brand{display:inline-flex;margin-bottom:24px}.auth-card{border:1px solid rgba(255,255,255,.12);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 30px 90px rgba(0,0,0,.33);padding:30px}.auth-card h1{margin:6px 0 10px;font-size:clamp(38px,8vw,64px);letter-spacing:-.06em;line-height:.95}.auth-card p{color:var(--muted);line-height:1.7}.auth-form{display:grid;gap:14px;margin-top:22px}.auth-form label{display:grid;gap:8px;color:#eaf2ff;font-weight:800}.auth-form input{height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.13);background:#07111f;color:#fff;padding:0 15px;outline:none}.auth-form input:focus{border-color:rgba(255,138,179,.55);box-shadow:0 0 0 4px rgba(255,138,179,.09)}.auth-form .btn{width:100%;border:0;cursor:pointer}.auth-note a{color:#ffbfd2;font-weight:900}.dashboard-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.dashboard-list article{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055)}.dashboard-list b{display:block;font-size:20px}.dashboard-list span{display:block;margin-top:4px;color:var(--muted);font-size:13px}.read-more-iframe{width:100%;height:160px;margin-top:16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#091323}
@media(max-width:980px){body.menu-open{overflow:hidden!important}body.menu-open::before{content:"";position:fixed;inset:0;z-index:9998;background:#020712!important;opacity:1!important}.sidebar.open{z-index:9999!important;background:#020712!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.sidebar.open,.sidebar.open *{scrollbar-width:none!important}.sidebar.open::-webkit-scrollbar,.sidebar.open *::-webkit-scrollbar{width:0!important;height:0!important;background:transparent!important}.category-list{scrollbar-width:none!important}.category-list::-webkit-scrollbar{width:0!important;height:0!important}.category-list a{box-shadow:none!important}.topbar{z-index:10001!important}.menu-btn{position:relative;z-index:10002}}
@media(max-width:620px){.auth-wrap{width:calc(100% - 28px);padding-top:28px}.auth-card{padding:22px;border-radius:24px}.dashboard-list{grid-template-columns:1fr}.price-strip{margin-top:10px!important}}

/* Google OAuth button */
.auth-separator{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:13px}.auth-separator:before,.auth-separator:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.12)}.google-btn{width:100%;min-height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#fff;color:#152033;display:flex;align-items:center;justify-content:center;gap:11px;font-weight:900;box-shadow:0 14px 34px rgba(0,0,0,.18);transition:.22s ease}.google-btn:hover{transform:translateY(-2px)}.google-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#eef2ff);border:1px solid #dce3ef;font-weight:900;color:#4285f4;font-family:Arial,sans-serif}

/* =========================================================
   PabrikWeb Tahap 2-3: user menu, order, favorit, request, feedback.
   ========================================================= */
.user-menu{position:relative;display:inline-flex;align-items:center}.user-menu-btn{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-dropdown{display:none;position:absolute;right:0;top:calc(100% + 10px);min-width:190px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#07111f;box-shadow:0 20px 60px rgba(0,0,0,.42);z-index:10010}.user-menu:hover .user-dropdown,.user-menu:focus-within .user-dropdown{display:block}.user-dropdown a{display:block;padding:11px 12px;border-radius:12px;color:#dce8f8!important}.user-dropdown a:hover{background:rgba(255,255,255,.08);color:#fff!important}.dashboard-wrap{width:min(1180px,calc(100% - 34px));margin:0 auto;padding:28px 0 70px}.dashboard-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.dashboard-actions{display:flex;gap:10px;flex-wrap:wrap}.dash-section{margin-top:22px;padding:26px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}.success-box,.error-box{padding:13px 15px;border-radius:16px;margin:14px 0;font-weight:800}.success-box{background:rgba(167,243,208,.12);border:1px solid rgba(167,243,208,.24);color:#d9ffef}.error-box{background:rgba(255,138,179,.12);border:1px solid rgba(255,138,179,.24);color:#ffd9e8}.empty-state.slim{padding:18px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);color:var(--muted)}.order-table{display:grid;gap:12px}.order-table article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.048)}.order-table b{display:block}.order-table span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.order-table p{color:var(--muted);line-height:1.55;margin:8px 0 0}.status-badge{white-space:nowrap;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.12)}.status-pending{background:rgba(227,187,120,.12);color:#ffe0aa}.status-diproses{background:rgba(185,169,255,.12);color:#eee9ff}.status-revisi{background:rgba(255,138,179,.12);color:#ffd8e8}.status-selesai{background:rgba(167,243,208,.12);color:#d9ffef}.mini-action,.admin-actions a{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:900}.admin-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.favorite-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.favorite-grid a,.request-list article{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}.favorite-grid b,.request-list b{display:block}.favorite-grid span,.request-list span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.dash-form{display:grid;gap:14px;max-width:680px}.dash-form label{display:grid;gap:8px;font-weight:800}.dash-form input,.dash-form textarea,.dash-form select{border-radius:16px;border:1px solid rgba(255,255,255,.13);background:#07111f;color:#fff;padding:14px 15px;font:inherit;outline:none}.dash-form textarea{resize:vertical}.request-list{display:grid;gap:10px;margin-top:18px}.feedback-public{padding-top:28px}.feedback-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feedback-grid article{padding:20px;border-radius:22px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.052)}.feedback-grid p{color:#dce8f8;line-height:1.65}.feedback-grid b,.feedback-grid span{display:block}.feedback-grid span{color:var(--muted);font-size:13px;margin-top:4px}.stars{color:#ffcf91;letter-spacing:2px}.card-links{gap:8px;flex-wrap:wrap}.card-links a{white-space:nowrap}
@media(max-width:980px){.topnav{display:flex;gap:8px}.topnav>a:not(.cta-small),.user-menu{display:none}.dashboard-header{align-items:flex-start;flex-direction:column}.order-table article{align-items:flex-start;flex-direction:column}.favorite-grid,.feedback-grid{grid-template-columns:1fr}.dash-section{padding:20px}.admin-actions{justify-content:flex-start}.user-dropdown{right:auto;left:0}}


/* Fix kecil: dropdown user tidak putus saat kursor turun, favorit dipindah ke area judul */
.user-menu{position:relative;isolation:isolate}
.user-menu::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:16px;background:transparent}
.user-dropdown{top:100%!important;margin-top:8px;z-index:10020!important}
.user-menu:hover .user-dropdown,.user-menu:focus-within .user-dropdown{display:block}
.card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card-title-row h3{flex:1;min-width:0}
.favorite-inline{flex:0 0 38px;width:38px;height:38px;margin-top:-3px;display:grid;place-items:center;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.075);color:#ffd6e7!important;text-decoration:none;font-size:20px;font-weight:900;line-height:1;position:relative;z-index:8;transition:.2s ease}
.favorite-inline:hover{transform:translateY(-2px);background:rgba(255,138,179,.17);border-color:rgba(255,138,179,.35);color:#fff!important}
.card-links a{min-width:0}
@media(max-width:620px){.favorite-inline{width:36px;height:36px;font-size:19px}.card-title-row{gap:8px}}