/* ==========================================================
   Handyman — layanan jasa kebutuhan rumah
   ========================================================== */
.hdy-hero{position:relative;overflow:hidden;border-radius:24px;padding:26px 28px;margin-top:16px;color:#fff;
  background:linear-gradient(112deg,#0a3521 0%,#0f7d45 52%,#12a1a0 100%);
  box-shadow:0 20px 44px -26px rgba(10,60,38,.6);
  display:grid;grid-template-columns:1.5fr .9fr;gap:26px;align-items:center}
.hdy-hero-glow{position:absolute;right:-90px;top:-130px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 66%);pointer-events:none}
.hdy-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1px);background-size:20px 20px;
  -webkit-mask-image:linear-gradient(115deg,transparent 42%,#000 100%);mask-image:linear-gradient(115deg,transparent 42%,#000 100%)}
.hdy-hero-txt{position:relative;z-index:1;min-width:0}
.hdy-hero .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  color:#c7f3da;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:5px 11px;border-radius:99px}
.hdy-hero h2{font-size:clamp(21px,2.5vw,29px);line-height:1.18;letter-spacing:-.035em;margin-top:11px;color:#fff}
.hdy-hero p{font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.82);margin-top:9px;max-width:430px}
.hdy-hero-act{margin-top:16px;flex-wrap:wrap;gap:9px}
.hdy-btn-light{background:#fff;color:#0b5f37;border:0;font-weight:800;box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.hdy-btn-light:hover{background:#f2fbf6;color:#084d29}
.hdy-btn-ghost{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.32);font-weight:700}
.hdy-btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}
.hdy-trust{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.hdy-trust span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);padding:4px 9px;border-radius:99px}

.hdy-hero-card{position:relative;z-index:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:18px;padding:15px 16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hdy-hc-top{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.85)}
.dot-live{width:7px;height:7px;border-radius:50%;background:#8ef2b4;box-shadow:0 0 0 0 rgba(142,242,180,.7);animation:hdyPulse 2s infinite}
@keyframes hdyPulse{0%{box-shadow:0 0 0 0 rgba(142,242,180,.65)}70%{box-shadow:0 0 0 7px rgba(142,242,180,0)}100%{box-shadow:0 0 0 0 rgba(142,242,180,0)}}
.hdy-hc-row{display:flex;align-items:baseline;gap:8px;margin-top:9px}
.hdy-hc-row b{font-size:34px;font-weight:800;letter-spacing:-.05em;line-height:1}
.hdy-hc-row span{font-size:11px;color:rgba(255,255,255,.78);font-weight:600}
.hdy-hc-sep{height:1px;background:rgba(255,255,255,.18);margin:12px 0 10px}
.hdy-hc-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hdy-hc-mini b{display:block;font-size:16px;letter-spacing:-.03em}
.hdy-hc-mini span{font-size:9.5px;color:rgba(255,255,255,.72);line-height:1.3;display:block}
.hdy-fav-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.hdy-fav-list>div{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.92)}
.hdy-fav-list b{margin-left:auto;font-size:11.5px;color:#d3f7e2}
.hdy-fic{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.16);color:#fff}
.hdy-hc-foot{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);font-size:10.5px;color:rgba(255,255,255,.75)}
.hdy-hc-foot b{color:#eafff2}

.hdy-cats{display:flex;flex-wrap:wrap;gap:7px}
.hdy-cat{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:99px;border:1.3px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:11.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
.hdy-cat:hover{border-color:#bcd9c8;background:#f7fbf8}
.hdy-cat.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 16px -8px rgba(15,125,69,.6)}
.hdy-cat .n{font-size:9.5px;font-weight:800;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:99px}
.hdy-cat.active .n{background:rgba(255,255,255,.22)}

.hdy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:12px}
.hdy-svc{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 15px 13px;
  display:flex;flex-direction:column;gap:9px;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer}
.hdy-svc:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(15,45,30,.4);border-color:#c6e2d2}
.hdy-svc .hdy-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none}
.hdy-svc h4{font-size:13px;letter-spacing:-.015em;color:var(--ink);line-height:1.35}
.hdy-svc p{font-size:11px;line-height:1.55;color:var(--muted);flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hdy-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:10px;color:var(--muted-2);font-weight:600}
.hdy-meta span{display:inline-flex;align-items:center;gap:4px}
.hdy-foot{display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px dashed var(--line-2);margin-top:2px}
.hdy-foot .price{margin-left:0;flex:1;font-size:14.5px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.hdy-foot .price small{display:block;font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--muted-2);text-transform:uppercase}
.hdy-add{width:31px;height:31px;border-radius:10px;border:0;background:var(--green-050);color:var(--green);
  display:grid;place-items:center;cursor:pointer;transition:.15s;flex:none}
.hdy-add:hover{background:var(--green);color:#fff;transform:scale(1.06)}
.hdy-fav-tag{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:3px;
  font-size:9px;font-weight:800;letter-spacing:.02em;color:#8f5c00;background:var(--amber-050);padding:3px 7px;border-radius:99px}
.hdy-empty-filter{grid-column:1/-1;text-align:center;padding:26px 10px;font-size:12px;color:var(--muted)}
.hdy-ic.sm{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex:none}

.hdy-side{display:flex;flex-direction:column;gap:16px}
.hdy-step{display:flex;gap:10px;padding:9px 0}
.hdy-step>span{width:24px;height:24px;border-radius:50%;background:var(--green-050);color:var(--green-700);
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.hdy-step b{font-size:12px;display:block;color:var(--ink)}
.hdy-step p{font-size:11px;line-height:1.5;color:var(--muted);margin-top:2px}

.hdy-tr{cursor:pointer}
.hdy-tr:hover td{background:#f8fbf9}
.hdy-mord{border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin-bottom:9px;cursor:pointer;background:#fff}
.hdy-mord:active{background:#f7fbf8}
.hdy-mord-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hdy-mord-top b{font-size:12.5px;line-height:1.35}
.hdy-mord-meta{font-size:10.5px;color:var(--muted);margin-top:4px}
.hdy-mord-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--ink-2)}

.hdy-book{display:grid;grid-template-columns:1.55fr .85fr;gap:16px;align-items:start}
.hdy-sum{position:sticky;top:16px;overflow:hidden}
.hdy-sum-head{display:flex;align-items:center;gap:11px;padding:16px 17px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#f7fbf8,#fff)}
.hdy-sum-head b{font-size:13px;display:block;line-height:1.35}
.hdy-sum-head .hdy-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.hdy-sum-body{padding:14px 17px 17px}
.hdy-sum-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:11.5px;color:var(--muted)}
.hdy-sum-row b{font-size:12px;color:var(--ink);text-align:right}
.hdy-sum-note{display:flex;gap:6px;align-items:flex-start;font-size:10px;line-height:1.5;color:var(--muted);
  background:#f7faf8;border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:10px 0 12px}
.hdy-sum-note svg{flex:none;margin-top:1px}
.hdy-sum-safe{text-align:center;font-size:10px;color:var(--muted-2);margin-top:9px;display:flex;align-items:center;justify-content:center;gap:5px}

.hdy-steps{display:flex;gap:5px;margin-top:14px}
.hdy-steps .st{flex:1;text-align:center;font-size:9px;font-weight:700;color:var(--muted-2);letter-spacing:.01em}
.hdy-steps .st .bar{height:5px;border-radius:99px;background:#e9f0eb;margin-bottom:5px}
.hdy-steps .st.done{color:var(--green-700)}
.hdy-steps .st.done .bar{background:var(--green)}
.hdy-steps .st.current{color:#7a5200}
.hdy-steps .st.current .bar{background:var(--lime);box-shadow:0 0 0 3px rgba(126,194,66,.18)}
.hdy-batal{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#ab333e;
  background:var(--rose-050);padding:8px 11px;border-radius:10px;margin-top:12px}

.hdy-detail-head{display:flex;gap:12px;align-items:flex-start}
.hdy-detail-head .hdy-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none}
.hdy-kv{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;padding-top:14px;border-top:1px solid var(--line-2);margin-top:14px}
.hdy-kv>div{min-width:0}
.hdy-kv span{display:block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.hdy-kv b{font-size:12px;color:var(--ink);line-height:1.45;font-weight:700}

.hdy-rate{background:#f8fbf9;border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.hdy-rate b{font-size:12.5px}
.hdy-stars{display:flex;gap:4px;margin:8px 0}
.hdy-stars button{border:0;background:none;font-size:26px;line-height:1;color:#dfe8e2;cursor:pointer;padding:0 2px;transition:transform .12s,color .12s}
.hdy-stars button:hover{transform:scale(1.12)}
.hdy-stars button.on{color:#f0a41b}
.hdy-rate textarea{width:100%;padding:9px 11px;border:1.3px solid var(--line);border-radius:10px;font-size:12px;
  resize:vertical;min-height:56px;outline:none;font-family:inherit;color:var(--ink);background:#fff}
.hdy-rate textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(15,125,69,.09)}
.mt4{margin-top:4px}

@media (max-width:1080px){
  .hdy-book{grid-template-columns:1fr}
  .hdy-sum{position:static}
  .hdy-hero{grid-template-columns:1fr;gap:18px;padding:22px}
  .hdy-hero-card--warga{display:none}
}
@media (max-width:980px){
  .hdy-hero{padding:20px 18px;border-radius:20px;margin-top:12px}
  .hdy-hero p{font-size:12px;max-width:none}
  .hdy-hero-card{padding:13px 14px}
  .hdy-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
  .hdy-svc{padding:12px 12px 11px;gap:7px;border-radius:14px}
  .hdy-svc h4{font-size:12px}
  .hdy-svc p{font-size:10.5px;-webkit-line-clamp:2}
  .hdy-foot .price{font-size:13px}
  .hdy-trust span{font-size:9.5px;padding:3px 8px}
  .hdy-kv{grid-template-columns:1fr}
  .hdy-cat{padding:6px 11px;font-size:11px}
}
@media (max-width:560px){
  .hdy-hero h2{font-size:20px}
  .hdy-hero-act .btn{flex:1;justify-content:center}
  .hdy-grid{grid-template-columns:1fr 1fr}
  .hdy-svc .hdy-ic{width:36px;height:36px;border-radius:11px}
  .hdy-hc-row b{font-size:29px}
  .hdy-detail-head{flex-wrap:wrap}
}

.hdy-cat-desc{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* katalog: tabel jadi kartu di layar kecil */
@media (max-width:820px){
  .hdy-cat-card .table-wrap{overflow:visible}
  .hdy-cat-card table,.hdy-cat-card tbody,.hdy-cat-card tr,.hdy-cat-card td{display:block;width:auto;min-width:0}
  .hdy-cat-card thead{display:none}
  .hdy-cat-card tr{border:1px solid var(--line);border-radius:14px;padding:11px 12px;margin:0 0 9px}
  .hdy-cat-card td{border:0;padding:2px 0;text-align:left;white-space:normal}
  .hdy-cat-card td.num{text-align:left}
  .hdy-cat-card td:nth-child(4){display:none}
  .hdy-cat-card td:nth-child(3){margin-top:6px}
  .hdy-cat-card td:nth-child(2),.hdy-cat-card td:nth-child(5){display:inline-block;margin-right:6px;margin-top:6px}
  .hdy-cat-card td:last-child{margin-top:8px}
  .hdy-cat-card td:last-child .btn{flex:1;justify-content:center}
  .hdy-cat-desc{max-width:none;white-space:normal;overflow:visible}
}