:root{
  --bg:#f8fbff;
  --surface:#ffffff;
  --surface-soft:#f3f7ff;
  --ink:#06132f;
  --muted:#53627c;
  --muted-2:#71809c;
  --line:#dfe8f6;
  --line-2:#edf2fa;
  --primary:#0b63f6;
  --primary-2:#074ed1;
  --blue-soft:#e9f2ff;
  --green:#10a85a;
  --red:#ef364c;
  --orange:#ff8a00;
  --purple:#7a54f7;
  --pink:#ee3d8f;
  --shadow:0 10px 30px rgba(7, 26, 66, .08);
  --shadow-soft:0 8px 18px rgba(7, 26, 66, .05);
  --radius:18px;
  --radius-sm:12px;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#fff 0%,#f7fbff 42%,#fff 100%);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:400;
  letter-spacing:-.01em;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max), calc(100% - 56px)); margin:0 auto}
.app-shell{min-height:100vh}
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-2);
}
.nav{
  height:66px; display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.brand{display:flex; align-items:center; gap:10px; font-size:22px; letter-spacing:-.03em}
.brand-icon{width:34px;height:34px;border-radius:10px;background:var(--primary);display:grid;place-items:center;color:white;font-size:20px}
.brand span:nth-child(2){color:var(--primary)}
.navlinks{display:flex; align-items:center; gap:34px; font-size:14px; color:#071635}
.navlinks a{padding:21px 0; border-bottom:2px solid transparent}
.navlinks a.active{color:var(--primary);border-color:var(--primary)}
.pill-new{font-size:10px;background:var(--primary);color:#fff;padding:3px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.nav-actions{display:flex;gap:14px;align-items:center}
.icon-btn{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:50%;display:grid;place-items:center;color:#06132f}
.mobile-menu{display:none}
.menu-panel{display:none}
.main{padding:24px 0 0}
.hero-grid{display:grid;grid-template-columns:1fr 330px;gap:32px;align-items:start}
.hero{display:grid;grid-template-columns:1fr 390px;gap:30px;align-items:center;padding:10px 0 12px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:var(--muted);background:#fff;font-size:13px}
h1,h2,h3,h4,p{margin:0}
h1{
  font-size:48px; line-height:1.05; font-weight:400; letter-spacing:-.055em;
}
h2{font-size:34px;line-height:1.1;font-weight:400;letter-spacing:-.045em}
h3{font-size:20px;line-height:1.25;font-weight:400;letter-spacing:-.025em}
h4{font-size:16px;line-height:1.25;font-weight:400}
.blue{color:var(--primary)}
.sub{margin-top:14px;color:var(--muted);font-size:17px;line-height:1.62;max-width:720px}
.search-row{display:flex;gap:10px;margin-top:24px;width:min(610px,100%)}
.input-wrap{position:relative;flex:1}
.input-wrap .lead-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.search-input,.input,.textarea,.select{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;color:var(--ink);
  padding:14px 16px;outline:none;box-shadow:var(--shadow-soft);
  font-size:14px; font-weight:400;
}
.search-input{padding-left:46px}
.textarea{min-height:150px;resize:vertical;line-height:1.5}
.btn{
  border:none;border-radius:12px;background:var(--primary);color:#fff;padding:14px 26px;min-width:116px;
  box-shadow:0 10px 22px rgba(11,99,246,.18);font-weight:400;
}
.btn:hover{background:var(--primary-2)}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary);box-shadow:none}
.btn.soft{background:#edf5ff;color:var(--primary);box-shadow:none}
.btn.red{background:var(--red)}
.hero-visual,.visual-card{
  height:250px;border-radius:30px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 70% 30%,#dcecff 0%,#f8fbff 45%,#fff 70%);
}
.hero-visual::before{content:"";position:absolute;inset:46px 54px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.mock-window{position:absolute;right:42px;top:58px;width:250px;height:150px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#fff,#f5f9ff);box-shadow:var(--shadow)}
.mock-window::before{content:"";display:block;height:28px;border-radius:20px 20px 0 0;background:#b7d5ff}
.mock-card{position:absolute;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);display:grid;place-items:center}
.mock-card.one{left:28px;bottom:38px;width:84px;height:84px;color:#ef364c}
.mock-card.two{left:112px;bottom:20px;width:80px;height:80px;color:#0b63f6}
.mock-card.three{right:20px;bottom:44px;width:86px;height:86px;color:#0b63f6}
.shield{width:74px;height:84px;background:linear-gradient(180deg,#237cff,#0647c4);clip-path:polygon(50% 0,93% 18%,84% 82%,50% 100%,16% 82%,7% 18%);display:grid;place-items:center;color:#fff;font-size:34px}
.ad-box{
  background:linear-gradient(180deg,#fbfdff,#f4f8ff);border:1px dashed #a9b8d0;border-radius:14px;color:#5d6b84;
  display:grid;place-items:center;text-align:center;min-height:112px;font-size:18px;line-height:1.4
}
.ad-box.small{min-height:250px}.ad-box.banner{min-height:58px;font-size:16px;margin:18px 0}
.side-stack{display:grid;gap:16px}
.info-card,.card,.panel{
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);
}
.info-card{padding:20px}
.info-list{display:grid;gap:15px}
.info-row{display:flex;gap:13px;align-items:flex-start;color:var(--muted);font-size:14px;line-height:1.35}
.round-icon{width:38px;height:38px;min-width:38px;border-radius:14px;background:var(--blue-soft);display:grid;place-items:center;color:var(--primary);font-size:20px}
.gradient-cta{background:linear-gradient(135deg,#005cff,#0035aa);color:#fff;border:none;padding:22px;border-radius:16px;overflow:hidden;position:relative}
.gradient-cta p{color:#dbe7ff;line-height:1.45;margin-top:8px;font-size:14px}
.gradient-cta .btn{background:#fff;color:var(--primary);margin-top:16px;box-shadow:none}
.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0 12px}
.category-card,.tool-card{
  border:1px solid var(--line);background:#fff;border-radius:15px;padding:16px;box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;transition:.18s ease;
}
.category-card:hover,.tool-card:hover{transform:translateY(-2px);border-color:#b8ccff}
.category-card.active{border-color:var(--primary);background:#f6faff}
.c-left{display:flex;align-items:center;gap:13px}
.app-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:var(--shadow-soft)}
.red-bg{background:#ff4b55}.green-bg{background:#19bf70}.purple-bg{background:#8058ff}.blue-bg{background:#0b63f6}.pink-bg{background:#ef3d94}.teal-bg{background:#00b9af}.orange-bg{background:#ff8a00}.dark-bg{background:#0b1020}
.cat-title{font-size:14px;color:var(--ink)}
.cat-count{font-size:12px;color:var(--muted)}
.paint-strip{display:grid;grid-template-columns:270px repeat(6,1fr);background:linear-gradient(135deg,#01235d,#0759de);border-radius:16px;overflow:hidden;color:#fff;margin:12px 0 20px}
.paint-title{display:flex;gap:12px;align-items:center;padding:18px}
.paint-title .mark{width:54px;height:54px;border-radius:16px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:28px}
.paint-step{background:#fff;color:var(--ink);margin:10px 0 10px 0;padding:12px;border-right:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:13px}
.paint-step:last-child{border-right:none}
.paint-step .round-icon{width:34px;height:34px;min-width:34px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 12px}
.section-head a{font-size:14px;color:var(--primary)}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tool-card{min-height:104px;align-items:flex-start}
.tool-card .meta{font-size:12px;color:var(--muted);line-height:1.4;margin-top:3px}
.rating{margin-top:9px;color:#f5a400;font-size:12px}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.benefit{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;color:var(--muted);font-size:13px}
.footer{border-top:1px solid var(--line-2);margin-top:30px;padding:24px 0;background:#fff}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.8fr;gap:32px;color:var(--muted);font-size:13px}
.footer h4{color:var(--ink);margin-bottom:10px}
.footer a{display:block;margin:7px 0;color:var(--muted)}
.socials{display:flex;gap:9px;margin-top:14px}.socials span{width:28px;height:28px;border-radius:50%;background:#edf5ff;display:grid;place-items:center;color:var(--primary)}
.copyright{border-top:1px solid var(--line-2);margin-top:22px;padding-top:16px;display:flex;justify-content:space-between;color:var(--muted-2);font-size:12px}
.page-grid{display:grid;grid-template-columns:250px 1fr 300px;gap:28px}
.content-grid{display:grid;grid-template-columns:1fr 330px;gap:28px}
.sidebar{position:sticky;top:86px;align-self:start;display:grid;gap:16px}
.side-menu{padding:12px}.side-menu h4{padding:10px 12px}.side-link{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:12px;color:#0a1b3e;font-size:13px}.side-link.active{background:#eef5ff;color:var(--primary)}
.page-hero{display:grid;grid-template-columns:1fr 320px;align-items:center;gap:20px;margin-bottom:18px}
.page-hero h1{font-size:44px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;color:var(--muted);display:inline-flex;gap:8px;align-items:center}
.chip.active{border-color:var(--primary);background:#eef5ff;color:var(--primary)}
.subcat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.subcat-card{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-soft);min-height:126px}
.subcat-card ul{margin:10px 0 0 18px;padding:0;color:var(--muted);font-size:12px;line-height:1.7}
.paint-page-grid{display:grid;grid-template-columns:1fr 320px;gap:28px}
.paint-framework{padding:22px}
.paint-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.paint-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:18px;text-align:center;min-height:300px}
.paint-card .big-icon{font-size:44px;color:var(--primary);margin-bottom:12px}
.paint-card p{font-size:13px;color:var(--muted);line-height:1.5;margin:8px 0 14px}
.mini-list{display:grid;gap:8px}
.mini-link{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:11px;padding:10px;font-size:12px;color:#071635;background:#fff}
.score-card{text-align:center;padding:20px}
.score-ring{width:150px;height:150px;border-radius:50%;margin:4px auto 14px;background:conic-gradient(var(--primary) 72%,#e7edf7 0);display:grid;place-items:center}
.score-ring-inner{width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);font-size:34px}
.form-panel{padding:20px}
.form-grid{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.result-grid.three{grid-template-columns:1fr 1.4fr 1fr}
.status-card{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.status-card.good{border-color:#bce9d1;background:#fbfffd}.status-card.warn{border-color:#ffe0a6;background:#fffdf7}.status-card.danger{border-color:#ffc7cf;background:#fff9fa}
.progress{height:10px;background:#e8eef7;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--primary);width:50%}.progress.green span{background:var(--green)}.progress.red span{background:var(--red)}.progress.orange span{background:var(--orange)}
.check-list{display:grid;gap:9px;margin-top:12px}.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.35}.check.ok::before{content:"✓";color:var(--green)}.check.bad::before{content:"!";color:var(--red)}.check.warn::before{content:"!";color:var(--orange)}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;font-size:13px}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.table tr:last-child td{border-bottom:0}
.badge{padding:5px 9px;border-radius:999px;font-size:12px;background:#edf5ff;color:var(--primary);display:inline-block}
.badge.green{background:#e8faef;color:var(--green)}.badge.red{background:#fff0f2;color:var(--red)}.badge.orange{background:#fff5e5;color:var(--orange)}
.codebox{background:#f7fbff;border:1px solid var(--line);border-radius:14px;padding:14px;white-space:pre-wrap;font-family:ui-monospace, SFMono-Regular, Consolas, monospace;font-size:12px;line-height:1.55;color:#0a1b3e;overflow:auto}
.file-drop{border:1.5px dashed #91b5ff;border-radius:16px;background:#fbfdff;padding:34px;text-align:center;color:var(--muted)}
.file-preview{display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.file-preview img{width:160px;height:100px;object-fit:cover;border-radius:10px;background:#eef5ff}
.scenario-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.scenario{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px;text-align:center;min-height:112px}
.scenario.active{border-color:var(--primary);box-shadow:0 0 0 3px #e7f0ff}
.timeline{display:grid;gap:10px;counter-reset:step}
.timeline-row{display:grid;grid-template-columns:42px 1fr 110px;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px}
.timeline-num{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}
.notice{border:1px solid #bfd6ff;background:#f4f8ff;border-radius:12px;padding:13px 15px;color:#24518f;font-size:13px;line-height:1.45}
.legal-content{padding:28px;line-height:1.75;color:var(--muted);font-size:15px}
.legal-content h1{color:var(--ink);margin-bottom:10px}.legal-content h3{color:var(--ink);margin-top:24px;margin-bottom:8px}
.empty{padding:40px;text-align:center;color:var(--muted)}
.hidden{display:none!important}

@media(max-width:1180px){
  .hero-grid,.content-grid,.paint-page-grid{grid-template-columns:1fr}
  .page-grid{grid-template-columns:1fr}
  .sidebar{position:static}
  .side-stack{grid-template-columns:1fr 1fr}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .tool-grid,.subcat-grid{grid-template-columns:repeat(3,1fr)}
  .paint-strip{grid-template-columns:1fr 1fr 1fr}
  .paint-title{grid-column:1/-1}
  .paint-cards{grid-template-columns:repeat(2,1fr)}
  .page-hero{grid-template-columns:1fr}
}
@media(max-width:760px){
  .container{width:min(100% - 28px, var(--max))}
  .navlinks,.nav-actions{display:none}
  .mobile-menu{display:grid}
  .menu-panel.open{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
  .menu-panel a{padding:12px;border-radius:12px}
  h1{font-size:36px}.page-hero h1{font-size:34px}h2{font-size:28px}
  .hero{grid-template-columns:1fr}.hero-visual{display:none}
  .hero-grid{display:block}.side-stack{grid-template-columns:1fr;margin-top:16px}
  .category-grid,.tool-grid,.subcat-grid,.benefits,.result-grid,.result-grid.three,.scenario-grid{grid-template-columns:1fr}
  .paint-strip{grid-template-columns:1fr}
  .paint-step{margin:0}
  .paint-cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .copyright{display:grid;gap:8px}
  .form-grid{grid-template-columns:1fr}
  .file-preview{grid-template-columns:1fr}
  .timeline-row{grid-template-columns:36px 1fr}
  .timeline-row .badge{grid-column:2}
}


/* =====================================================
   Compact Responsive Patch v1.1.1
   Fokus: headline hero lebih kecil, layout lebih rapat,
   tetap clean, ringan, dan responsive.
   ===================================================== */

body{
  font-size:14px;
}

.nav{
  height:58px;
}

.brand{
  font-size:20px;
}

.brand-icon{
  width:31px;
  height:31px;
  border-radius:9px;
  font-size:18px;
}

.navlinks{
  gap:26px;
  font-size:13px;
}

.hero-grid{
  gap:24px;
}

.hero{
  grid-template-columns: minmax(0, 1fr) 330px;
  gap:22px;
  padding:4px 0 8px;
}

.hero h1{
  font-size:38px;
  line-height:1.08;
  letter-spacing:-.052em;
  max-width:760px;
}

.hero .sub{
  font-size:15px;
  line-height:1.55;
  max-width:660px;
  margin-top:12px;
}

.search-row{
  margin-top:18px;
}

.search-input,
.input,
.textarea,
.select{
  padding:12px 14px;
  font-size:13px;
  border-radius:11px;
}

.search-input{
  padding-left:42px;
}

.btn{
  padding:12px 22px;
  min-width:104px;
  border-radius:11px;
  font-size:13px;
}

.hero-visual,
.visual-card{
  height:218px;
}

.hero-visual::before{
  inset:38px 44px;
}

.mock-window{
  right:34px;
  top:48px;
  width:218px;
  height:132px;
}

.mock-card.one{
  left:24px;
  bottom:34px;
  width:72px;
  height:72px;
}

.mock-card.two{
  left:94px;
  bottom:20px;
  width:68px;
  height:68px;
}

.mock-card.three{
  right:18px;
  bottom:38px;
  width:74px;
  height:74px;
}

.shield{
  width:62px;
  height:70px;
  font-size:27px;
}

.category-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  margin:14px 0 10px;
}

.category-card,
.tool-card{
  padding:13px;
  border-radius:13px;
}

.app-icon{
  width:38px;
  height:38px;
  border-radius:11px;
  font-size:19px;
}

.cat-title{
  font-size:13px;
}

.cat-count,
.tool-card .meta{
  font-size:11px;
}

.paint-strip{
  margin:10px 0 16px;
  border-radius:14px;
}

.paint-title{
  padding:14px;
}

.paint-title .mark{
  width:46px;
  height:46px;
  border-radius:13px;
  font-size:24px;
}

.paint-step{
  padding:10px;
  font-size:12px;
}

.paint-step .round-icon{
  width:30px;
  height:30px;
  min-width:30px;
}

.section-head{
  margin:14px 0 10px;
}

.tool-grid{
  gap:11px;
}

.tool-card{
  min-height:92px;
}

.rating{
  margin-top:6px;
  font-size:11px;
}

.info-card{
  padding:16px;
}

.info-row{
  gap:11px;
  font-size:13px;
}

.round-icon{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:12px;
  font-size:18px;
}

.gradient-cta{
  padding:18px;
  border-radius:14px;
}

.gradient-cta p{
  font-size:13px;
}

.ad-box.small{
  min-height:220px;
}

.ad-box.banner{
  min-height:52px;
  font-size:14px;
  margin:14px 0;
}

.benefits{
  gap:10px;
  margin:12px 0;
}

.benefit{
  padding:12px;
  border-radius:13px;
  font-size:12px;
}

.footer{
  margin-top:22px;
  padding:20px 0;
}

.footer-grid{
  gap:24px;
  font-size:12px;
}

.page-hero h1{
  font-size:38px;
}

h2{
  font-size:30px;
}

h3{
  font-size:18px;
}

h4{
  font-size:14px;
}

.sub{
  font-size:15px;
  line-height:1.56;
}

/* Tablet */
@media(max-width:1180px){
  .hero{
    grid-template-columns:1fr 280px;
  }

  .hero h1{
    font-size:34px;
    max-width:680px;
  }

  .hero-visual,
  .visual-card{
    height:190px;
  }

  .category-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .paint-strip{
    grid-template-columns:1fr 1fr 1fr;
  }

  .tool-grid,
  .subcat-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .side-stack{
    grid-template-columns:1fr 1fr;
  }
}

/* Mobile */
@media(max-width:760px){
  .container{
    width:min(100% - 22px, var(--max));
  }

  .nav{
    height:54px;
  }

  .brand{
    font-size:18px;
  }

  .brand-icon{
    width:29px;
    height:29px;
    font-size:16px;
  }

  .main{
    padding-top:14px;
  }

  .hero{
    display:block;
    padding:2px 0 6px;
  }

  .hero h1{
    font-size:27px;
    line-height:1.13;
    letter-spacing:-.045em;
    max-width:100%;
  }

  .hero .sub{
    font-size:13px;
    line-height:1.5;
    margin-top:10px;
  }

  .search-row{
    margin-top:14px;
    gap:8px;
  }

  .btn{
    padding:11px 16px;
    min-width:82px;
  }

  .category-grid{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:12px;
  }

  .category-card,
  .tool-card{
    padding:12px;
  }

  .paint-strip{
    grid-template-columns:1fr;
    margin:10px 0 14px;
  }

  .paint-title{
    padding:14px;
  }

  .paint-step{
    margin:0;
  }

  .tool-grid,
  .subcat-grid,
  .benefits,
  .result-grid,
  .result-grid.three,
  .scenario-grid{
    grid-template-columns:1fr;
  }

  .tool-card{
    min-height:82px;
  }

  .side-stack{
    grid-template-columns:1fr;
  }

  .ad-box.small{
    min-height:160px;
  }

  .page-hero h1,
  h1{
    font-size:29px;
    line-height:1.12;
  }

  h2{
    font-size:25px;
  }

  h3{
    font-size:17px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* Small mobile */
@media(max-width:420px){
  .hero h1{
    font-size:24px;
  }

  .hero .sub{
    font-size:12.5px;
  }

  .search-row{
    display:grid;
    grid-template-columns:1fr;
  }

  .btn{
    width:100%;
  }

  .category-card .c-left,
  .tool-card .c-left{
    gap:10px;
  }

  .app-icon{
    width:35px;
    height:35px;
    font-size:17px;
  }
}


/* =====================================================
   Responsive No Horizontal Slider Patch v1.1.2
   Fokus: hilangkan scroll horizontal pada PAINT strip,
   layout fit lebar layar, gradasi lebih manis.
   ===================================================== */

html,
body,
#app,
.app-shell{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.container,
.hero-grid,
.hero-grid > *,
.content-grid,
.content-grid > *,
.page-grid,
.page-grid > *,
.paint-page-grid,
.paint-page-grid > *,
section,
aside,
.panel,
.info-card{
  min-width:0;
}

.main{
  overflow-x:hidden;
}

.hero-grid{
  grid-template-columns:minmax(0, 1fr) 320px;
}

.side-stack{
  min-width:0;
}

.paint-strip{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(190px, 1.25fr) repeat(5, minmax(86px, .82fr)) minmax(108px, .78fr);
  gap:0;
  background:
    radial-gradient(circle at 0% 0%, rgba(80,156,255,.40), transparent 28%),
    linear-gradient(135deg, #05245f 0%, #063f9f 45%, #086bff 100%);
  box-shadow:0 12px 28px rgba(7, 54, 148, .14);
}

.paint-title{
  min-width:0;
  overflow:hidden;
}

.paint-title h3{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.paint-title p{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.paint-step{
  min-width:0;
  overflow:hidden;
  white-space:normal;
  align-items:center;
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
}

.paint-step span:last-child{
  min-width:0;
  overflow:hidden;
}

.paint-step .cat-title,
.paint-step .cat-count{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}

.paint-step .cat-title{
  white-space:nowrap;
}

.paint-step .cat-count{
  white-space:normal;
  line-height:1.25;
}

.paint-step[style*="background:#0759de"]{
  background:linear-gradient(135deg, #0b63f6, #0046c9) !important;
  border-color:rgba(255,255,255,.16) !important;
  justify-content:center;
  text-align:center;
  min-width:0;
}

.gradient-cta{
  background:
    radial-gradient(circle at 92% 30%, rgba(255,255,255,.28), transparent 24%),
    radial-gradient(circle at 10% 100%, rgba(80,156,255,.36), transparent 38%),
    linear-gradient(135deg, #075df0 0%, #0046c9 52%, #002e8f 100%);
  box-shadow:0 14px 30px rgba(8, 83, 217, .16);
}

.category-card,
.tool-card,
.subcat-card,
.status-card,
.benefit{
  min-width:0;
}

.c-left{
  min-width:0;
}

.c-left span:last-child{
  min-width:0;
  overflow:hidden;
}

.cat-title,
.meta,
.cat-count{
  overflow:hidden;
  text-overflow:ellipsis;
}

.tool-card .meta{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.ad-box{
  max-width:100%;
  overflow:hidden;
}

/* Medium desktop: PAINT menjadi 4 kolom agar tidak memaksa lebar */
@media(max-width:1360px){
  .hero-grid{
    grid-template-columns:minmax(0, 1fr) 300px;
    gap:18px;
  }

  .paint-strip{
    grid-template-columns:1.35fr repeat(3, 1fr);
  }

  .paint-title{
    grid-row:span 2;
  }

  .paint-step{
    margin:0;
    border-top:1px solid rgba(12, 57, 135, .08);
  }

  .paint-step[style*="background:#0759de"]{
    grid-column:auto;
  }
}

/* Laptop/tablet: side turun, PAINT makin nyaman */
@media(max-width:1180px){
  .hero-grid,
  .content-grid,
  .paint-page-grid{
    grid-template-columns:1fr;
  }

  .side-stack{
    grid-template-columns:1fr 1fr;
  }

  .paint-strip{
    grid-template-columns:1fr 1fr 1fr;
  }

  .paint-title{
    grid-column:1/-1;
    grid-row:auto;
  }

  .paint-step[style*="background:#0759de"]{
    grid-column:1/-1;
  }
}

/* Tablet kecil */
@media(max-width:900px){
  .category-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .tool-grid,
  .subcat-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .paint-strip{
    grid-template-columns:1fr 1fr;
  }

  .paint-title,
  .paint-step[style*="background:#0759de"]{
    grid-column:1/-1;
  }
}

/* Mobile: semua full-width, tanpa horizontal scroll */
@media(max-width:760px){
  .container{
    width:calc(100% - 22px);
    max-width:calc(100% - 22px);
  }

  .hero-grid,
  .hero,
  .content-grid,
  .page-grid,
  .paint-page-grid{
    display:block;
    width:100%;
    max-width:100%;
  }

  .side-stack{
    display:grid;
    grid-template-columns:1fr;
    margin-top:14px;
  }

  .category-grid,
  .tool-grid,
  .subcat-grid,
  .benefits,
  .result-grid,
  .result-grid.three,
  .scenario-grid{
    grid-template-columns:1fr;
    width:100%;
  }

  .paint-strip{
    grid-template-columns:1fr;
    border-radius:15px;
  }

  .paint-title,
  .paint-step,
  .paint-step[style*="background:#0759de"]{
    grid-column:auto;
    width:100%;
  }

  .paint-step{
    padding:12px;
    border-right:none;
    border-top:1px solid rgba(12, 57, 135, .08);
  }

  .paint-step .cat-title,
  .paint-step .cat-count{
    white-space:normal;
  }

  .search-row{
    width:100%;
  }

  .footer,
  .topbar{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
}

/* Ultra small */
@media(max-width:420px){
  .container{
    width:calc(100% - 18px);
    max-width:calc(100% - 18px);
  }

  .paint-title{
    gap:10px;
  }

  .paint-title .mark{
    width:42px;
    height:42px;
    min-width:42px;
  }
}


/* =====================================================
   PDF & File Tools Functional Patch v1.2.0
   ===================================================== */

input[type="file"].input{
  padding:10px;
  background:#fff;
}

input[type="file"].input::file-selector-button{
  border:0;
  background:linear-gradient(135deg,#0b63f6,#0046c9);
  color:#fff;
  border-radius:9px;
  padding:9px 13px;
  margin-right:12px;
  cursor:pointer;
  font:inherit;
  font-size:12px;
}

.form-panel label{
  display:block;
  color:#071635;
  font-size:13px;
  margin-bottom:4px;
}

#pdfToolResult .status-card{
  overflow:auto;
}

#pdfToolResult .tool-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media(max-width:760px){
  .page-hero[style*="grid-template-columns:90px"]{
    display:grid !important;
    grid-template-columns:54px 1fr !important;
    align-items:center;
    gap:12px;
  }

  #pdfToolResult .tool-grid{
    grid-template-columns:1fr;
  }

  .toolbar{
    width:100%;
  }

  .toolbar .btn,
  .toolbar .chip{
    flex:1;
  }
}