/* Stage 139 - Responsive Service Category Grid UI Final */
:root{
  --ys139-blue:#0766E8;
  --ys139-navy:#05245C;
  --ys139-cyan:#15C3D6;
  --ys139-soft:#F5FAFF;
  --ys139-border:#DCE8F6;
  --ys139-muted:#66758F;
  --ys139-shadow:0 18px 48px rgba(8,31,70,.10);
}
.ys139-section{margin:22px 0}
.ys139-head{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ys139-head span{display:inline-flex;padding:7px 11px;border-radius:999px;background:#EAF4FF;color:var(--ys139-blue);font-weight:950;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.ys139-head h2,.ys139-head h3{margin:7px 0 0;color:#0B1F46;font-weight:950;letter-spacing:-.03em}
.ys139-head p{margin:6px 0 0;color:var(--ys139-muted);font-weight:700;line-height:1.5}
.ys139-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ys139-category-card{position:relative;min-height:148px;border:1px solid var(--ys139-border);border-radius:24px;background:linear-gradient(180deg,#fff,#F9FCFF);box-shadow:0 10px 28px rgba(8,31,70,.06);padding:18px;text-decoration:none;color:#0B1F46;display:flex;flex-direction:column;justify-content:space-between;gap:12px;transition:.18s ease;overflow:hidden;cursor:pointer;text-align:left}
.ys139-category-card:before{content:"";position:absolute;right:-34px;top:-42px;width:110px;height:110px;border-radius:999px;background:rgba(7,102,232,.08)}
.ys139-category-card:hover,.ys139-category-card.active{border-color:var(--ys139-blue);transform:translateY(-2px);box-shadow:var(--ys139-shadow);background:linear-gradient(180deg,#fff,#F2F8FF)}
.ys139-category-card.active:after{content:"Dipilih";position:absolute;right:13px;top:13px;background:var(--ys139-blue);color:#fff;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:950}
.ys139-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#EAF4FF;color:var(--ys139-blue);font-size:28px;box-shadow:inset 0 0 0 1px rgba(7,102,232,.08)}
.ys139-category-card h3{font-size:16px;margin:0 0 4px;font-weight:950;letter-spacing:-.02em}.ys139-category-card p{margin:0;color:var(--ys139-muted);font-size:12.5px;font-weight:700;line-height:1.45}.ys139-price{margin-top:10px;display:inline-flex;align-items:center;gap:6px;color:var(--ys139-blue);font-weight:950;font-size:12px}.ys139-cta{margin-top:10px;color:var(--ys139-blue);font-weight:950;font-size:13px}.ys139-compact .ys139-category-card{min-height:126px;padding:15px}.ys139-compact .ys139-icon{width:48px;height:48px;font-size:24px}.ys139-compact .ys139-category-card h3{font-size:14px}.ys139-touch-note{margin-top:12px;padding:12px 14px;border-radius:16px;background:#EAF4FF;color:#075FEA;font-weight:850;font-size:13px}
.ys139-service-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ys139-hide{display:none!important}
@media(max-width:1050px){.ys139-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ys139-category-card{padding:14px;min-height:132px}.ys139-category-card h3{font-size:14px}.ys139-icon{width:46px;height:46px;font-size:23px}}
@media(max-width:720px){.ys139-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ys139-category-card{min-height:138px;border-radius:20px;padding:15px}.ys139-category-card:hover{transform:none}.ys139-icon{width:48px;height:48px;font-size:24px}.ys139-head h2,.ys139-head h3{font-size:22px}.ys139-service-item-grid{grid-template-columns:1fr}}