.inner-page{margin:48px 22px 30px}.inner-page h1,.auth-card h1{font:800 clamp(27px,5vw,38px) 'Plus Jakarta Sans';margin:0 0 8px;letter-spacing:-1px}.search{width:100%;max-width:600px;padding:15px 17px;border:1px solid var(--line);border-radius:12px;font:14px 'DM Sans';background:white}.filter-row{display:flex;gap:8px;overflow:auto;margin:18px 0 25px;padding-bottom:4px}.chip,.tabs button{white-space:nowrap;border:1px solid var(--line);background:white;border-radius:30px;padding:9px 13px;color:var(--muted);font-size:12px;cursor:pointer}.chip:hover,.tabs .active{background:var(--mint);color:var(--teal);border-color:#b9d9cd}.explore-list{max-width:760px;grid-template-columns:repeat(2,1fr)}.helper{position:relative}.small-button{border:0;background:var(--mint);color:var(--teal);border-radius:7px;padding:7px 9px;font-size:11px;font-weight:700;cursor:pointer;margin-left:auto}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px;margin:25px 0}.order-card{background:white;border:1px solid var(--line);border-radius:14px;padding:17px;margin:12px 0;max-width:680px}.order-top{display:flex;justify-content:space-between}.order-card h3{margin:13px 0 5px;font-size:15px}.order-card p,.order-card small{color:var(--muted);font-size:12px}.status{background:#fff1df;color:#b76c40;border-radius:20px;padding:5px 9px;font-size:11px;font-weight:700}.empty{text-align:center;background:white;border:1px dashed #ccdcd7;border-radius:15px;padding:45px 20px;max-width:500px}.empty span{font-size:38px}.empty h3{margin:12px 0 6px}.empty p{color:var(--muted);font-size:13px;margin-bottom:22px}.profile-head{display:flex;align-items:center;gap:15px;margin-bottom:30px}.profile-head .text-button{margin-left:auto}.profile-head h1{font-size:22px;margin:0}.profile-avatar{width:64px;height:64px;display:grid;place-items:center;background:var(--mint);border-radius:19px;font-size:32px}.profile-menu{background:white;border:1px solid var(--line);border-radius:15px;max-width:680px}.profile-menu a{display:flex;align-items:center;gap:14px;padding:18px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}.profile-menu a:last-child{border:0;color:#b85f49}.profile-menu b{font-size:21px}.profile-menu span{display:flex;flex-direction:column;gap:4px;flex:1}.profile-menu small{color:var(--muted);font-size:11px}.auth-card{max-width:440px;background:white;border:1px solid var(--line);border-radius:20px;padding:35px;margin:60px auto;text-align:center}.auth-card .brand-mark{margin:auto}.auth-card h1{font-size:26px;margin-top:18px}.auth-card form{text-align:left}.auth-card .primary-button{width:100%;margin-top:8px}.auth-switch{font-size:12px;color:var(--muted);margin-top:22px}.auth-switch a{color:var(--teal);font-weight:700}.helper-dashboard{display:flex;gap:12px;max-width:680px;margin:24px 0}.helper-dashboard>div{background:var(--teal);color:white;border-radius:14px;padding:18px;flex:1}.helper-dashboard small,.helper-dashboard strong{display:block}.helper-dashboard small{color:#b5dbd0;font-size:11px}.helper-dashboard strong{margin-top:8px;font-size:18px}.simple-form{max-width:680px}.simple-form .primary-button{margin-top:8px}@media(max-width:680px){.inner-page{margin:32px 15px}.explore-list{display:flex}.helper-dashboard strong{font-size:14px}}
.role-switch{display:flex;gap:8px;margin:20px 0;text-align:left}.role-option{flex:1;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);padding:11px 9px;font:600 11px 'DM Sans';cursor:pointer}.role-option.active{background:var(--mint);border-color:#a7d2c4;color:var(--teal)}.helper-note{background:#fff7ef;border-radius:9px;color:#895d49;font-size:11px;line-height:1.5;padding:10px 12px;margin:14px 0}
.request-list{max-width:760px}.request-card,.offer-card{background:white;border:1px solid var(--line);border-radius:14px;padding:17px;margin:12px 0}.request-card h3{margin:13px 0 6px}.request-card p{color:var(--muted);font-size:12px;line-height:1.5}.request-card strong{display:block;margin:12px 0;color:var(--teal)}.offer-button{padding:9px 12px}.offers-box{max-width:680px;margin-top:35px}.offers-box h2{font:700 20px 'Plus Jakarta Sans'}.offer-card{display:grid;grid-template-columns:1fr auto;gap:5px 12px}.offer-card p,.offer-card small{grid-column:1/-1;color:var(--muted);font-size:12px;margin:4px 0}.offer-card b{color:var(--teal)}
.offer-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:10px}.accept-button,.reject-button{border:0;border-radius:8px;padding:9px 13px;font:700 11px 'DM Sans';cursor:pointer}.accept-button{background:var(--teal);color:white}.reject-button{background:#fff0ed;color:#bd634b}
.profile-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:680px;margin-top:16px}.profile-panel{background:white;border:1px solid var(--line);border-radius:15px;padding:20px}.profile-panel h2{font:700 18px 'Plus Jakarta Sans';margin:0 0 16px}.profile-form{display:grid;gap:12px}.profile-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.profile-form input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fbfdfc;font:13px 'DM Sans'}.profile-form .primary-button{justify-self:start}.profile-form small{font-size:11px;margin-top:-3px}
/* Form pendaftaran: avatar, kolom helper, dan baris persetujuan. */
.avatar-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.avatar-preview{width:64px;height:64px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--teal);border:1px dashed #9acdbd;overflow:hidden}
.avatar-preview span{font:700 11px 'DM Sans'}
.avatar-preview.has-image{border-style:solid}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-pick{flex:1 1 180px;display:grid;gap:6px;font-size:12px;font-weight:700}
.avatar-pick input[type=file]{width:100%;padding:9px 10px;border:1px dashed var(--line);border-radius:9px;background:#fbfdfc;font:12px 'DM Sans'}
.avatar-upload .small-button{flex:0 0 auto}
.helper-fields{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f7fcfa}
.helper-fields[hidden]{display:none}
.checkbox-row{display:flex!important;align-items:flex-start;gap:9px;font-size:12px;font-weight:500;line-height:1.45}
.checkbox-row input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex:0 0 auto;accent-color:var(--teal)}
/* Ringkasan akun di halaman profil. */
.account-summary{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 0 22px;padding:18px;border:1px solid var(--line);border-radius:15px;background:white;max-width:680px}
.account-avatar{width:72px;height:72px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--mint);color:var(--teal);font:800 26px 'Plus Jakarta Sans';border:1px solid #9acdbd;overflow:hidden}
.account-avatar.has-image{border-style:solid}
.account-avatar img{width:100%;height:100%;object-fit:cover}
.account-info{flex:1 1 220px;display:grid;gap:8px;min-width:0}
.account-info-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;border-bottom:1px dashed var(--line);padding-bottom:7px}
.account-info-row:last-child{border-bottom:0;padding-bottom:0}
.account-info-row span{color:var(--muted)}
.account-info-row strong{text-align:right;word-break:break-word}.profile-panel-active{border-color:#9acdbd;box-shadow:0 8px 24px #155e5a12}@media(max-width:680px){.profile-panels{grid-template-columns:1fr}.profile-panel{padding:16px}}
.order-action,.job-submit{margin-top:12px}.chat-open{display:block;margin-top:12px;color:var(--teal);font-size:12px}
.payment-line{color:var(--teal)!important;font-weight:700}.pay-action{margin-top:10px}
.tabs button{cursor:pointer}.chat-panel{max-width:680px;background:#fff;border:1px solid var(--line);border-radius:14px;margin:18px 0;padding:0;overflow:hidden}.chat-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line)}.chat-head strong,.chat-head small{display:block}.chat-head small{color:var(--muted);font-size:11px;margin-top:3px}.chat-close{border:0;background:transparent;font-size:24px;color:var(--muted);cursor:pointer}.chat-messages{height:260px;overflow:auto;padding:15px;background:#f7fbf9}.chat-message{max-width:80%;padding:9px 11px;border-radius:12px;margin:7px 0;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.4}.chat-message.mine{margin-left:auto;background:var(--teal);color:white;border-color:var(--teal)}.chat-message small{display:block;opacity:.65;font-size:10px;margin-top:4px}.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.chat-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:9px;padding:11px;font:13px 'DM Sans'}.chat-form .primary-button{padding:10px 14px}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');
:root{--font-display:'Plus Jakarta Sans',sans-serif;--ink:#164f4b;--muted:#71858e;--teal:#08766d;--mint:#e4f6ef;--orange:#ffb82e;--line:#e5eeeb;--white:#fff}
body{font-family:var(--font-display)}
.location{border:0;background:transparent;display:flex;align-items:center;gap:5px;cursor:pointer;font:500 12px var(--font-display);padding:8px;color:var(--muted)}
.location:hover{color:var(--teal);background:var(--mint);border-radius:9px}.location b{font-size:15px}
.notification-wrap{position:relative}.notification-panel{position:absolute;right:0;top:42px;width:270px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 12px 28px #16333320;padding:8px;z-index:10}.notification-title{font:700 13px var(--font-display);padding:8px 9px 6px}.notification-panel a{display:block;text-decoration:none;color:var(--ink);padding:10px 9px;border-radius:8px}.notification-panel a:hover{background:var(--mint)}.notification-panel strong,.notification-panel small{display:block}.notification-panel strong{font-size:12px}.notification-panel small,.notification-empty{color:var(--muted);font-size:11px;margin:4px 0 0}.notification-empty{padding:9px}
:root{--ink:#163333;--muted:#718181;--teal:#155e5a;--mint:#e6f2ed;--orange:#ff9466;--line:#e5ece9;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f8fbfa;font-family:'DM Sans',sans-serif;padding-bottom:88px}.topbar{height:72px;background:#fff;display:flex;align-items:center;padding:0 max(22px,calc((100vw - 1120px)/2));gap:24px;border-bottom:1px solid #eef3f1;position:sticky;top:0;z-index:3}.brand{font:800 21px 'Plus Jakarta Sans';color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}.brand-mark{background:var(--teal);color:white;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:18px}.location{margin-left:auto;color:var(--muted);font-size:13px}.location b{color:var(--ink);margin-left:5px}.icon-button{border:0;background:transparent;font-size:23px;color:var(--teal);position:relative}.icon-button i{position:absolute;width:6px;height:6px;background:var(--orange);border-radius:50%;right:1px;top:1px}.page{max-width:1120px;margin:auto}.hero{margin:38px 22px 54px;background:var(--teal);border-radius:24px;min-height:282px;padding:38px 44px;color:white;display:flex;overflow:hidden;position:relative}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;font-weight:700;color:#df8a63;margin:0 0 9px}.hero .eyebrow{color:#a9d6c8}.hero h1{font:800 clamp(30px,5vw,45px)/1.12 'Plus Jakarta Sans';margin:0;letter-spacing:-1.8px}.hero h1 em{font-style:normal;color:#a9d6c8}.hero-text{max-width:390px;line-height:1.6;color:#d2e5df;font-size:14px;margin:16px 0 22px}.primary-button{background:var(--orange);border:0;color:#442519;border-radius:10px;padding:13px 18px;font:700 13px 'DM Sans';cursor:pointer;box-shadow:0 5px 15px #d77a5260}.hero-art{position:absolute;right:10%;top:20px;width:180px;height:230px;background:#d8ede2;border-radius:90px 90px 18px 18px;transform:rotate(9deg);display:grid;place-items:center;font-size:95px}.hero-art span{position:absolute;right:13px;top:8px;font-size:25px;color:var(--orange);transform:rotate(-15deg)}.section-block{margin:0 22px 47px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-heading h2{margin:0;font:700 21px 'Plus Jakarta Sans';letter-spacing:-.5px}.section-heading .eyebrow{margin-bottom:7px}.text-button{border:0;background:none;color:var(--teal);font-weight:700;font-size:12px}.categories{display:flex;gap:13px;overflow:auto;padding-bottom:5px}.category{background:white;border:1px solid var(--line);min-width:114px;height:104px;border-radius:15px;padding:15px;cursor:pointer;color:var(--ink);text-align:left}.category:hover,.category.selected{border-color:var(--teal);background:var(--mint)}.category-icon{font-size:27px;display:block;margin-bottom:11px}.category span:last-child{font-size:12px;font-weight:600}.helper-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.helper{background:white;border:1px solid var(--line);border-radius:16px;padding:17px;display:flex;gap:12px;align-items:center}.avatar{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;flex:none}.helper-info{min-width:0}.helper-name{font-weight:700;font-size:14px;display:flex;gap:5px;align-items:center}.verified{font-size:11px;color:var(--teal)}.helper-skill,.helper-meta{font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.helper-meta{color:#d77a52}.trust-card{margin:0 22px 30px;padding:18px 20px;background:#fff7ef;border-radius:15px;display:flex;align-items:center;gap:14px;color:#80513c}.trust-card p{margin:4px 0 0;font-size:12px;color:#9e7968}.trust-icon{width:31px;height:31px;background:#ffd6bc;border-radius:50%;display:grid;place-items:center;color:#b86139}.trust-card>span:last-child{margin-left:auto;font-size:22px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center;gap:clamp(22px,7vw,80px);align-items:center;z-index:4}.bottom-nav a{color:#9aabab;text-decoration:none;font-size:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}.bottom-nav a span{font-size:10px}.bottom-nav .active{color:var(--teal)}.bottom-nav .nav-request{background:var(--teal);color:#fff;width:48px;height:48px;border-radius:15px;justify-content:center;font-size:30px;line-height:40px;box-shadow:0 8px 20px #155e5a40}.nav-request:active{transform:scale(.95)}dialog{border:0;border-radius:22px;width:min(92%,470px);padding:0;box-shadow:0 20px 70px #12383835}dialog::backdrop{background:#12383870}#request-form{padding:28px;position:relative}#request-form h2{font:800 25px 'Plus Jakarta Sans';margin:0 0 7px}.muted{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 22px}.close-button{position:absolute;right:20px;top:18px;border:0;background:#f0f5f3;border-radius:50%;font-size:23px;width:31px;height:31px;color:var(--ink);cursor:pointer}label{display:block;font-size:12px;font-weight:700;margin:14px 0}input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:9px;padding:12px;font:14px 'DM Sans';color:var(--ink);background:#fbfdfc}textarea{resize:vertical}#request-form .primary-button{width:100%;margin-top:8px}.toast{position:fixed;left:50%;bottom:91px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:white;padding:13px 18px;border-radius:10px;font-size:13px;transition:.25s;z-index:8;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:680px){.topbar{height:63px;padding:0 18px}.location span{display:none}.hero{margin:22px 15px 42px;padding:29px 25px;min-height:330px}.hero-art{right:-8px;bottom:-30px;top:auto;width:150px;height:190px;font-size:75px}.hero-copy{position:relative;z-index:1}.hero-text{max-width:235px}.section-block{margin-left:15px;margin-right:15px}.helper-list{display:flex;overflow:auto}.helper{min-width:245px}.trust-card{margin-left:15px;margin-right:15px}.bottom-nav{gap:21px}.brand{font-size:19px}}
/* Brand direction: Beresin visual identity */
@media(max-width:900px){.desktop-nav{display:none}.header-auth{padding:10px 14px;font-size:11px}.location{margin-left:auto}.topbar{gap:10px}.brand{font-size:22px}.brand-logo{width:36px;height:36px}}


/* Beresin brand system */
.brand{font:800 27px 'Plus Jakarta Sans';color:var(--teal);text-decoration:none;display:flex;align-items:center;gap:9px;letter-spacing:-1.2px}.brand-logo{width:42px;height:42px;object-fit:contain}.desktop-nav{display:flex;align-items:center;gap:38px;margin-left:150px}.desktop-nav a{color:#536a76;text-decoration:none;font:600 13px 'DM Sans';padding:27px 0;border-bottom:2px solid transparent}.desktop-nav a:hover{color:var(--teal);border-bottom-color:var(--teal)}.header-auth{background:var(--teal);color:white;text-decoration:none;border-radius:24px;padding:13px 24px;font:700 13px 'DM Sans';white-space:nowrap}@media(max-width:900px){.desktop-nav{display:none}.header-auth{padding:10px 14px;font-size:11px}.topbar{gap:10px}.brand{font-size:22px}.brand-logo{width:36px;height:36px}}

/* Homepage visual matching the Beresin reference */
.page{max-width:1280px}.hero{margin:0 0 44px;border-radius:0;background:linear-gradient(110deg,#effbf7 0%,#f8fcfa 66%,#fff 100%);color:var(--ink);min-height:325px;padding:48px max(44px,calc((100% - 970px)/2));align-items:center}.hero .eyebrow{color:#15977d;background:#daf3eb;border-radius:20px;display:inline-block;padding:7px 13px;letter-spacing:0;text-transform:none}.hero h1{font-size:56px;line-height:1.04;color:#12645d;letter-spacing:-2.5px}.hero h1 em{color:#4dc99e}.hero-text{color:#6c7f89;font-size:14px;line-height:1.5}.hero .primary-button{background:#087c6d;color:white;border-radius:18px;box-shadow:none;padding:14px 22px}.hero-art{right:15%;top:45px;width:360px;height:245px;background:transparent;transform:none;font-size:0}.hero-art:before{content:"";position:absolute;left:30px;right:30px;bottom:16px;height:48px;border-radius:50%;background:#cdeee2}.hero-art img{position:absolute;left:110px;top:0;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 12px 4px #b9dcd055)}.hero-art span{position:absolute;right:-4px;top:72px;color:#087c6d;font:700 25px/1.02 cursive;transform:rotate(-6deg)}.section{margin:0 auto 18px;max-width:1130px}.section-heading{align-items:end}.section-heading h2{font-size:27px;color:#12645d;letter-spacing:-.7px}.section-heading a{color:#087c6d;font-weight:700;font-size:11px}.category-grid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:14px}.category{height:106px;border-radius:14px;box-shadow:0 5px 16px #183d3810;border:1px solid #edf2ef}.category:first-child{background:#e8f9f3;border-color:#c9ede0}.category span{font-size:31px}.category b{font-size:12px;color:#12645d}.trusted-section{background:#f0faf6;border-radius:25px;padding:14px 0 20px}.trusted-section .section-heading,.trusted-section .helper-list{margin-left:30px;margin-right:30px}.helper-list{grid-template-columns:repeat(3,1fr);gap:16px}.helper{display:grid;grid-template-columns:58px 1fr auto;grid-template-rows:auto auto auto;column-gap:12px;align-items:center;background:#fff!important;border:1px solid #edf1ef;border-radius:15px;padding:12px 16px;box-shadow:0 4px 12px #173e3710}.helper-avatar{grid-row:1/4;width:52px;height:52px;font-size:29px}.helper h3{font-size:12px;margin:0;color:#12645d}.helper p{font-size:11px;margin:2px 0;color:#718181}.helper small{font-size:10px;color:#eea62c}.helper .small-button{grid-column:3;grid-row:1/4}.bottom-nav{height:62px}.desktop-only{display:block}@media(max-width:900px){.hero{padding:34px 25px;min-height:300px}.hero h1{font-size:42px}.hero-art{opacity:.42;right:-100px}.category-grid{grid-template-columns:repeat(3,1fr)}.helper-list{grid-template-columns:1fr}.trusted-section{margin-left:12px;margin-right:12px}.desktop-only{display:none}}


/* Final navigation and category polish */
.desktop-nav{margin-left:auto;gap:32px}
.desktop-nav a{border-bottom:0!important;text-decoration:none!important;padding:10px 0}
.desktop-nav a:hover,.desktop-nav a:focus-visible{border-bottom:0!important}
.category,.category:hover,.category:focus-visible{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:104px;min-width:0;padding:14px 10px;border:1px solid #e3ece8;border-radius:16px;background:#fff;color:var(--ink);text-align:center;text-decoration:none;box-shadow:0 5px 16px #183d3810;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.category:hover,.category:focus-visible{border-color:#b9d9cd;background:#f4fcf8;box-shadow:0 8px 20px #183d3818;transform:translateY(-2px)}
.category:first-child{background:#e8f9f3;border-color:#c9ede0}
.category span{display:block;font-size:30px;line-height:1}
.category b{display:block;font:700 12px/1.25 'DM Sans';color:#12645d;white-space:normal}
.section-heading a,.brand,.header-auth,.bottom-nav a,.profile-menu a{text-decoration:none!important}
.bottom-nav a{border:0!important}
@media(min-width:901px){.category-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}}
@media(max-width:900px){.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.category{height:98px;padding:12px 7px}.category span{font-size:27px}.category b{font-size:11px}.desktop-nav{margin-left:0}}
@media(max-width:600px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category{height:92px}.section-heading h2{font-size:23px}.desktop-nav{display:none}}

/* Reference landing page styling */
:root{--teal:#087466;--teal-dark:#075e54;--mint:#38bd91;--mint-pale:#edf9f4;--body:#78899d;--line:#e8f0ed;--yellow:#ffbf3f}
body{background:#fff;font-family:"Plus Jakarta Sans",sans-serif;color:var(--teal-dark);padding-bottom:0}
.topbar{display:none!important}
.site-header{height:80px;padding:0 clamp(22px,7.5vw,124px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(255,255,255,.96);border-bottom:1px solid #f0f5f2;position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none!important}.brand-mark{width:54px;height:54px;display:block;object-fit:contain;background:transparent;border-radius:0}.brand-name{font-size:35px;font-weight:800;letter-spacing:-1.7px;color:var(--teal-dark)}
.header-actions{display:flex;align-items:center;gap:26px}.location-button,.icon-button{border:0;background:transparent;color:var(--teal);display:inline-flex;align-items:center;cursor:pointer}.location-button{gap:10px;text-align:left}.location-button strong{display:block;font-size:12px;font-weight:700}.location-button small{display:block;margin-top:3px;color:#91a0b1;font-size:10px}.location-pin{font-size:24px}.chevron{margin-left:2px;color:#8799a9}.icon-button{width:32px;height:38px;justify-content:center;position:relative;font-size:24px}.notification i{position:absolute;width:7px;height:7px;background:var(--mint);border:1px solid white;border-radius:50%;top:4px;right:1px}.login-button{background:linear-gradient(135deg,#0b806e,#075e54);color:#fff;border-radius:16px;font-weight:700;padding:14px 27px;font-size:12px;white-space:nowrap;text-decoration:none!important}
.page{max-width:none;margin:0}.hero{margin:0;background:linear-gradient(110deg,#f0fbf6 0%,#f8fcfa 58%,#f0faf5 100%);border-radius:0;color:var(--teal-dark);min-height:334px;padding:0;display:block;overflow:hidden}.hero-inner{max-width:1090px;min-height:334px;margin:auto;padding:36px 8px 28px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px}.hero-copy{position:relative;z-index:1}.eyebrow-pill{display:inline-flex;padding:7px 12px;border-radius:999px;background:#d9f5eb;color:#16836e;font-size:10px;font-weight:700}.hero h1{margin:13px 0 12px;font-size:clamp(42px,4.2vw,64px);line-height:.99;letter-spacing:-2.9px;font-weight:800;color:var(--teal-dark)}.hero h1 span{color:var(--mint)}.hero-subtitle{margin:14px 0 8px;color:#75869a;font-size:18px;font-weight:700;letter-spacing:-.4px}.hero-description{max-width:400px;margin:0 0 18px;color:#75869a;font-size:13px;line-height:1.65}.primary-button{display:inline-flex;align-items:center;gap:13px;padding:15px 25px;font-size:13px;border-radius:16px;background:linear-gradient(135deg,#0b806e,#075e54);color:#fff;box-shadow:0 5px 12px #075e541a;text-decoration:none!important;border:0}
.hero-art{min-height:250px;position:relative;display:flex;align-items:center;justify-content:center;right:auto;top:auto;width:auto;height:auto;background:transparent;transform:none;font-size:initial}.art-blob{position:absolute;background:rgba(193,240,222,.33);border-radius:48% 52% 42% 58%}.blob-one{width:270px;height:190px;left:8%;top:23px;transform:rotate(-13deg)}.blob-two{width:340px;height:115px;left:14%;bottom:8px;transform:rotate(5deg)}.big-mark{width:180px;height:205px;position:relative;z-index:1;filter:drop-shadow(0 12px 10px #08746614)}.big-mark img{width:100%;height:100%;object-fit:contain}.art-shadow{position:absolute;bottom:10px;left:25%;width:270px;height:22px;border-radius:50%;background:#48ae8b29}.art-spark{position:absolute;z-index:2;background:var(--yellow);width:14px;height:34px;border-radius:8px;transform:rotate(28deg)}.spark-one{top:23px;right:22%}.spark-two{top:43px;right:17%;transform:rotate(42deg)}.art-dash{position:absolute;width:28px;height:7px;background:#0b806e;border-radius:10px;left:12%;z-index:2}.dash-one{top:88px;transform:rotate(15deg)}.dash-two{top:127px;left:10%}.dash-three{top:166px;left:15%;transform:rotate(-48deg)}.handwritten{position:absolute;z-index:2;right:-2%;top:64px;margin:0;color:var(--teal-dark);font-family:Caveat,cursive;font-size:29px;font-weight:700;line-height:.96;transform:rotate(-7deg)}.handwritten span{display:block;width:105px;height:4px;margin:9px 0 0 24px;background:var(--teal);border-radius:100%;transform:rotate(-8deg)}
.content-section{max-width:1090px;margin:0 auto}.categories-section{padding:27px 8px 18px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:15px}.section-kicker{display:block;margin-bottom:4px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.7px}.section-heading h2{margin:0;color:var(--teal-dark);font-size:25px;font-weight:800;letter-spacing:-.9px}.text-link{font-size:11px;font-weight:700;padding-bottom:5px;white-space:nowrap;color:var(--teal);text-decoration:none!important}.category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}.category-card{min-height:105px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;border:1px solid #edf2ef;border-radius:17px;background:#fff;box-shadow:0 4px 12px #0d453b09;transition:transform .2s,border-color .2s,background .2s;text-decoration:none!important;color:var(--teal-dark)}.category-card:hover{transform:translateY(-3px);border-color:#bcebd9}.category-card.selected{background:#e9f8f1;border-color:#b5ead7}.category-card strong{font-size:12px;font-weight:700;text-align:center}.category-icon{height:36px;min-width:38px;display:grid;place-items:center;font-size:31px;line-height:1}
.helpers-section{position:relative;padding:18px 8px 20px}.helpers-section:after{content:"";position:absolute;inset:0 -90px;border-radius:28px;background:linear-gradient(100deg,#f0faf6,#f7fcf9)}.helpers-section>.section-heading,.helper-grid{position:relative;z-index:1}.helper-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.helper-card{min-width:0;display:flex;align-items:center;gap:13px;padding:12px 15px;background:rgba(255,255,255,.94);border:1px solid #f0f5f2;border-radius:17px;box-shadow:0 5px 18px #0f4d4112}.avatar{width:55px;height:55px;flex:0 0 55px;display:grid;place-items:center;border-radius:50%;background:var(--avatar-bg,#d9f6eb);font-size:31px}.helper-info{min-width:0;flex:1}.helper-info h3{margin:0 0 4px;font-size:12px;font-weight:800;white-space:nowrap}.verified{display:inline-grid;place-items:center;width:12px;height:12px;color:#fff;background:#19a780;border-radius:50%;font-size:8px}.helper-info p{margin:0 0 5px;color:#8291a4;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rating{display:flex;gap:7px;font-size:10px;white-space:nowrap}.rating span:first-child{color:#f6a51a}.rating span:last-child{color:#8291a4}.choose-button{flex-shrink:0;border:0;padding:8px 12px;border-radius:999px;color:#087866;background:#e0f7ed;font-size:10px;font-weight:800;cursor:pointer}.benefits-strip{margin-top:0;padding:23px max(22px,calc((100% - 1320px)/2));background:#f0faf6;display:flex;justify-content:space-between;align-items:center;gap:20px}.benefit{display:flex;align-items:center;gap:13px;min-width:0;color:#247e70;font-size:12px;line-height:1.35;font-weight:600}.benefit+.benefit{border-left:1px solid #ccebe0;padding-left:34px}.benefit-icon{font-size:36px;line-height:1;color:#087866;font-weight:500}.benefit-icon.shield{display:grid;place-items:center;border:3px solid #087866;border-radius:12px 12px 16px 16px;width:29px;height:32px;font-size:19px;font-weight:800}.benefit-icon.heart{font-size:40px}.benefit-icon.pin{font-size:42px}.benefit-icon.sparkle{font-size:34px}.site-footer{display:flex;justify-content:space-between;padding:17px max(22px,calc((100% - 1090px)/2));color:#8a9b9b;font-size:11px}
.bottom-nav{display:none!important}
@media(max-width:1000px){.site-header{padding-inline:28px}.hero-inner,.content-section{margin-inline:28px}.hero-inner{grid-template-columns:1fr .9fr}.category-grid{gap:9px}.category-card strong{font-size:11px}.helper-card{gap:9px;padding:11px}.avatar{width:45px;height:45px;flex-basis:45px;font-size:26px}.choose-button{padding:7px 9px}.benefit+.benefit{padding-left:17px}}
@media(max-width:720px){.site-header{height:70px;padding-inline:18px}.brand{gap:8px}.brand-mark{width:43px;height:43px}.brand-name{font-size:29px}.header-actions{gap:12px}.location-button{display:none}.login-button{padding:12px 15px;font-size:11px;border-radius:13px}.hero-inner{margin:0;padding:30px 22px 20px;grid-template-columns:1fr;gap:0}.hero h1{font-size:clamp(43px,10vw,60px);letter-spacing:-2.4px}.hero-subtitle{font-size:16px}.hero-description{font-size:12px;max-width:340px}.hero-art{min-height:205px;margin-top:8px}.big-mark{height:175px;width:150px}.blob-one{left:16%;top:15px}.blob-two{left:14%;bottom:8px}.handwritten{right:5%;top:48px;font-size:25px}.spark-one{right:27%;top:10px}.spark-two{right:21%;top:28px}.art-dash{left:17%}.dash-two{left:14%}.dash-three{left:19%}.content-section{margin-inline:0;padding-inline:18px}.categories-section{padding-top:25px;padding-bottom:15px}.section-heading h2{font-size:22px}.section-kicker{font-size:10px}.text-link{font-size:10px}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.category-card{min-height:100px}.category-card strong{font-size:11px}.helpers-section{padding-top:18px;padding-bottom:22px}.helpers-section:after{inset:0 8px;border-radius:22px}.helper-grid{grid-template-columns:1fr;gap:10px}.helper-card{padding:12px;gap:12px}.avatar{width:48px;height:48px;flex-basis:48px}.benefits-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:22px 24px;gap:19px}.benefit{gap:10px;font-size:11px}.benefit+.benefit{border-left:0;padding-left:0}.benefit-icon{font-size:30px}.benefit-icon.heart,.benefit-icon.pin{font-size:34px}.site-footer{padding:16px 22px;gap:12px;font-size:10px}}

/* Header alignment and icon cleanup */
.site-header{min-height:80px;box-sizing:border-box}
.header-actions{margin-left:auto;justify-content:flex-end;align-items:center;white-space:nowrap}
.location-button{min-height:44px;padding:0;line-height:1}
.location-pin{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px}
.location-button strong,.location-button small{line-height:1.2}
.chevron{font-size:18px;line-height:1;display:inline-block;transform:translateY(-2px)}
.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:720px){.site-header{min-height:70px}.header-actions{gap:12px}.login-button{line-height:1.2}}

.section-title{margin:28px 0 12px;font-size:20px;color:var(--teal-dark)}
.offer-card .small-button{margin-right:8px}
.small-button.danger{background:#fff0ed;color:#a75243}
.chat-window{width:min(640px,90vw);padding:28px;position:relative}.chat-window h2{margin:0 0 8px;color:var(--teal-dark)}.chat-safety{background:#eef9f4;border-radius:10px;padding:10px 12px;color:var(--muted);font-size:12px}.chat-messages{height:310px;overflow:auto;background:#f7fbf9;border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0}.chat-message{display:flex;margin:8px 0}.chat-message.mine{justify-content:flex-end}.chat-bubble{max-width:78%;display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:9px 11px;font-size:12px}.chat-message.mine .chat-bubble{background:#dff5eb;border-color:#c1e8d8;border-radius:12px 12px 3px 12px}.chat-bubble strong{font-size:11px;color:var(--teal)}.chat-bubble small{font-size:9px;color:var(--muted)}.chat-form{display:flex;gap:8px}.chat-form input{margin:0;flex:1}.chat-form .primary-button{padding:11px 16px;margin:0}.chat-empty{text-align:center;padding:80px 10px}

/* Halaman masuk dan daftar berada di tengah halaman. */
.page > .auth-card {
  width: min(440px, calc(100% - 44px));
  box-sizing: border-box;
  margin: 60px auto;
}

@media (max-width: 680px) {
  .page > .auth-card {
    width: calc(100% - 30px);
    margin: 32px auto;
  }
}

/* Pusatkan halaman pilihan akun tanpa mengubah layout halaman lain. */
.profile-page {
  width: min(680px, calc(100% - 44px));
  margin: 48px auto 30px;
}

.profile-page .eyebrow,
.profile-page h1 {
  text-align: center;
}

.profile-page h1 {
  margin-bottom: 14px;
}

.profile-page .profile-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  max-width: none;
}

.profile-page .profile-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.profile-page .profile-menu a:hover {
  border-color: #b9d9cd;
  box-shadow: 0 8px 22px #155e5a14;
  transform: translateY(-1px);
}

.profile-page .profile-menu a > b,
.profile-page .profile-menu a > .profile-menu-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  background: var(--mint);
  border-radius: 11px;
  font-size: 19px;
}

.profile-page .profile-menu span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.profile-page .profile-menu span:not(.profile-menu-icon) {
  align-items: flex-start;
}

.profile-page .profile-menu strong {
  font: 700 14px 'Plus Jakarta Sans';
  letter-spacing: -.2px;
}

.profile-page .profile-menu small {
  color: var(--muted);
  font-size: 11px;
}

/* Item aksi (Keluar) dibuat satu baris penuh di bawah grid. */
.profile-page .profile-menu a:last-child {
  grid-column: 1 / -1;
  color: #b85f49;
  border-color: #f0d9d1;
  background: #fff8f5;
}

.profile-page .profile-menu a:last-child .profile-menu-icon,
.profile-page .profile-menu a:last-child > b {
  background: #fbe6df;
}

@media (max-width: 560px) {
  .profile-page .profile-menu {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .profile-page {
    width: calc(100% - 30px);
    margin: 32px auto 24px;
  }
}

/* Hero illustration dipakai kembali sebagai kolom kanan — lihat blok final di bawah. */
.hero-art{background:transparent;transform:none;position:static;width:auto;height:auto}
.art-blob{background:rgba(193,240,222,.42);border-radius:50%}
.blob-one{width:300px;height:190px;left:3%;top:28px;transform:none}
.blob-two{width:360px;height:92px;left:10%;bottom:12px;transform:none}
.art-shadow{left:18%;bottom:8px;width:300px;height:18px;background:rgba(72,174,139,.15)}
.art-dash,.art-spark,.handwritten{display:none}

/* Header alignment and icon cleanup */
.site-header{min-height:80px;box-sizing:border-box}
.header-actions{margin-left:auto;justify-content:flex-end;align-items:center;white-space:nowrap}
.location-button{min-height:44px;padding:0;line-height:1}
.location-pin{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px}
.location-button strong,.location-button small{line-height:1.2}
.chevron{font-size:18px;line-height:1;display:inline-block;transform:translateY(-2px)}
.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:720px){.site-header{min-height:70px}.header-actions{gap:12px}.login-button{line-height:1.2}}

/* Payment dialog styles */
.payment-window{width:min(520px,92vw);padding:28px;position:relative;box-sizing:border-box}
.payment-window h2{margin:0 0 16px;color:var(--teal-dark)}
.payment-amount-box{background:var(--mint);border-radius:14px;padding:16px 18px;margin-bottom:20px;display:flex;flex-direction:column;gap:4px}
.payment-amount-box strong{font:800 22px 'Plus Jakarta Sans';color:var(--teal-dark)}
.payment-step-label{font:700 12px 'DM Sans';color:var(--teal);margin:18px 0 10px;text-transform:uppercase;letter-spacing:.5px}
.payment-methods{display:grid;gap:10px}
.method-card{display:flex;flex-direction:column;gap:3px;text-align:left;border:2px solid var(--line);border-radius:12px;padding:14px 16px;background:white;cursor:pointer;transition:border-color .2s,background .2s}
.method-card:hover{border-color:#b9d9cd;background:#f7fbf9}
.method-card.active{border-color:var(--teal);background:#eef9f4}
.method-card .method-type{font:700 10px 'DM Sans';color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.method-card strong{font:700 14px 'Plus Jakarta Sans';color:var(--teal-dark)}
.method-card small{font:13px 'DM Sans';color:var(--muted)}
.method-card em{font:italic 11px 'DM Sans';color:var(--muted)}
.payment-detail-box{background:#f7fbf9;border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:12px}
.detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.detail-row span{font:600 12px 'DM Sans';color:var(--muted)}
.detail-row strong{font:700 14px 'DM Sans';color:var(--teal-dark);text-align:right}
.copy-button{justify-self:start;margin:0}
.payment-ref-section{margin:18px 0}
.payment-ref-section input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:14px 'DM Sans';background:white;box-sizing:border-box}
.payment-safety{background:#fff7ef;border-radius:10px;padding:10px 12px;color:#895d49;font-size:11px;line-height:1.5;margin-top:16px}
#submit-payment{width:100%;margin-top:6px;text-align:center}
/* Dialog improvements */
dialog{border:0;border-radius:20px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.18);max-height:90vh;overflow:auto}
dialog::backdrop{background:rgba(15,40,38,.45);backdrop-filter:blur(3px)}
.close-button{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;background:rgba(0,0,0,.05);border-radius:50%;font-size:20px;cursor:pointer;z-index:10;color:var(--muted);display:grid;place-items:center;transition:background .2s}
.close-button:hover{background:rgba(0,0,0,.1)}
/* Order card button improvements */
.order-card{display:flex;flex-direction:column;gap:8px}
.order-card .small-button{align-self:flex-start;margin-top:6px}
/* Responsive payment dialog */
@media(max-width:560px){
.payment-window{padding:20px}
.payment-amount-box strong{font-size:18px}
.method-card{padding:12px 14px}
.detail-row{flex-direction:column;align-items:flex-start;gap:2px}
}
/* Chat dialog responsive improvements */
@media(max-width:560px){
.chat-window{padding:20px}
.chat-messages{height:260px}
.chat-form{flex-wrap:wrap}
.chat-form input{min-width:0}
}

/* Status badge colors */
.status-pay{background:#fff1df;color:#b76c40}
.status-active{background:#e3f0ff;color:#3b6fb6}
.status-review{background:#f0e3ff;color:#7b4fb6}
.status-done{background:#e0f5ec;color:#3d8a64}
.status-open{background:#f0f0f0;color:#888}
/* Order price display */
.order-price{display:flex;align-items:baseline;gap:8px;margin:4px 0}
.price-label{font:700 10px 'DM Sans';color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.order-price strong{font:800 16px 'Plus Jakarta Sans';color:var(--teal-dark)}
/* ===== Final reference pass: hero artwork, handwritten font, benefits ===== */
@media(min-width:721px){.hero-inner{grid-template-columns:1.05fr .95fr}}
.hero-art{display:flex;align-items:center;justify-content:center;position:relative;width:auto;min-height:340px}
.hero-art:before{display:none}
.art-blob{display:inline-block;position:absolute;background:#e3f6ec;border-radius:50%}
.blob-one{width:340px;height:200px;left:10%;top:30px;transform:none}
.blob-two{width:380px;height:104px;left:16%;bottom:16px;transform:none}
.art-shadow{display:inline-block;position:absolute;left:24%;bottom:10px;width:270px;height:16px;border-radius:50%;background:rgba(72,174,139,.16)}
.big-mark{position:relative;z-index:1;left:auto;top:auto;transform:none;width:205px;height:205px;margin-top:38px;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(21,94,90,.16))}
.art-dash,.art-spark{display:inline-block;position:absolute;border-radius:6px}
.art-dash{width:26px;height:5px;background:#0d5c50}
.dash-one{left:calc(50% - 148px);top:38%;transform:rotate(-30deg)}
.dash-two{left:calc(50% - 160px);top:51%;transform:rotate(-10deg)}
.dash-three{left:calc(50% - 146px);top:64%;transform:rotate(14deg)}
.art-spark{width:12px;height:36px;background:#ffb52e}
.spark-one{right:26%;top:5%;transform:rotate(32deg)}
.spark-two{right:18%;top:13%;transform:rotate(32deg)}
.handwritten{display:inline-block;position:absolute;right:2%;top:24%;font:700 31px/1.06 'Caveat',cursive;color:#0d5c50;transform:rotate(-7deg)}
.benefits-strip{margin-top:26px}
.benefit svg{width:30px;height:30px;fill:none;stroke:#087866;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 30px}
.benefit span{line-height:1.3}
.choose-button{text-decoration:none!important}
@media(max-width:720px){
.hero-art{min-height:245px}
.big-mark{width:150px;height:150px;margin-top:18px}
.blob-one{width:240px;height:150px;left:6%;top:20px}
.blob-two{width:280px;height:84px;left:10%}
.art-shadow{width:210px;left:16%}
.handwritten{font-size:24px;right:2%;top:30%}
.spark-one{right:30%}
}
.spark-one,.spark-two{display:none}
/* logo resmi (icon.svg) sudah memuat garis oranye sendiri — spark CSS dimatikan agar tidak dobel */

/* Header icon cleanup */
.location-pin{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px}
.chevron svg{width:12px;height:12px;fill:none;stroke:#8799a9;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block}
.icon-button svg{width:21px;height:21px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification i{top:3px;right:2px}

/* Garis oranye di kanan atas logo (dipisah agar bisa diatur jaraknya) */
.spark-one,.spark-two{display:inline-block!important;position:absolute;background:#f7a928;border-radius:8px;z-index:2}
.spark-one{width:12px;height:38px;right:calc(50% - 215px);top:14%;transform:rotate(34deg)}
.spark-two{width:13px;height:44px;right:calc(50% - 258px);top:26%;transform:rotate(34deg)}
@media(max-width:720px){.spark-one{width:9px;height:28px;right:4%;top:12%}.spark-two{width:10px;height:32px;right:-2%;top:24%}}

/* Jarak garis oranye disetel ulang - lebih dekat ke logo */
.spark-one{width:12px;height:36px;right:calc(50% - 178px)!important;top:16%!important}
.spark-two{width:13px;height:42px;right:calc(50% - 214px)!important;top:28%!important}
@media(max-width:720px){.spark-one{right:12%!important;top:14%!important}.spark-two{right:4%!important;top:26%!important}}

/* ===== Hero art clearance: placeholder lama tidak dipakai lagi ===== */
/* Kolom kanan hero dipakai oleh .hero-art baru (lihat blok di bawah).
   Aturan dekorasi lama (blob/dash/spark/handwritten/big-mark) kini inert. */
.hero-art{min-height:0}

/* ===== Logo bisa dikustom dari halaman Pengaturan (upload) ===== */
/* .brand-mark tetap 54x54 di header, hanya isinya (src) yang diganti lewat app.js. */
.brand-mark{object-fit:contain}
@media(max-width:720px){.brand-mark{width:43px;height:43px}}
/* Kartu logo di halaman pengaturan: kotak pratinjau persegi + garis bantu. */
.logo-box{position:relative;width:120px;height:120px;margin:0 auto 14px;border-radius:24px;
  border:2px dashed #a9d6c8;background:#f0fbf6;display:grid;place-items:center;overflow:hidden}
.logo-box img{width:86%;height:86%;object-fit:contain;display:block}
.logo-box .logo-fallback{font:800 30px 'Plus Jakarta Sans';color:#16836e;letter-spacing:-1px}
.logo-box.has-custom{border-style:solid;border-color:#cfe9e0;background:white}
.logo-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.logo-meta{color:var(--muted);font:12px/1.6 'DM Sans';text-align:center;margin:0 0 6px}
/* Daftar spesifikasi gambar: teks rapi berbentuk poin, bukan paragraf padat. */
.spec-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:360px;margin-left:auto;margin-right:auto}
.spec-list li{position:relative;padding-left:20px;color:#5b6b72;font:12px/1.5 'DM Sans'}
.spec-list li::before{content:"";position:absolute;left:4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.spec-list li strong{color:var(--teal-dark)}
.settings-intro{max-width:640px;margin-left:auto;margin-right:auto}
.spec-note{margin:10px auto 0;text-align:center;max-width:360px;font-size:11.5px}
.upload-zone{display:grid;place-items:center;gap:8px;text-align:center;padding:26px 20px;margin:4px 0 14px;
  border:2px dashed #b7ddd0;border-radius:16px;background:#f7fcfa;cursor:pointer;transition:background .15s,border-color .15s}
.upload-zone:hover,.upload-zone.is-over{border-color:var(--mint);background:#eefaf5}
.upload-zone strong{font:700 14px 'Plus Jakarta Sans';color:var(--teal-dark)}
.upload-zone small{color:var(--muted);font-size:11px}
.upload-zone .upload-icon{font-size:30px;line-height:1}
.upload-zone input[type=file]{display:none}
.upload-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;max-height:190px;overflow:auto}
.upload-list li{display:flex;align-items:center;gap:10px;background:#fbfdfc;border:1px solid var(--line);
  border-radius:11px;padding:8px 10px;font-size:12px}
.upload-list .file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-list .file-size{color:var(--muted);font-size:10px;white-space:nowrap}
.upload-list .file-state{font-size:10px;font-weight:700;white-space:nowrap}
.upload-list .file-state.ok{color:#16836e}
.upload-list .file-state.err{color:#b4523c}
.upload-list .file-state.busy{color:var(--muted)}
.file-remove{border:0;background:#fff0ed;color:#a75243;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:700;cursor:pointer}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:680px;margin-top:16px}
@media(max-width:680px){.settings-grid{grid-template-columns:1fr}}
.settings-note{background:#fff7ef;border-radius:12px;padding:12px 14px;color:#895d49;font:12px/1.6 'DM Sans';margin:14px 0 0}
/* Tombol gerigi pengaturan di header (di samping tombol Masuk). */
.settings-button{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:14px;
  border:1px solid var(--line);background:white;color:var(--teal);font-size:20px;line-height:1;text-decoration:none!important}
.settings-button:hover{background:#eefaf5;border-color:#b9d9cd}
@media(max-width:720px){.settings-button{width:40px;height:40px;flex-basis:40px;font-size:18px}}

/* ===== Hero art — kolom KANAN di dalam kartu hero ===== */
/* app.js memakai heroArt(): tampilkan gambar hasil unggah (appBrand.hero) bila ada,
   jika belum ada baru jatuh ke placehero() (kotak putus-putus .is-placeholder).
   CSS di bawah menjaga gambar tetap di kolom kanan dan tidak menimpa headline. */
.hero-inner{display:grid;grid-template-columns:1fr;align-items:center;gap:24px;width:100%}
.hero-art{
  display:flex;align-items:center;justify-content:center;
  min-width:0;order:1;
  /* reset sisa gaya placeholder lama (pill miring + dekorasi absolut) */
  position:static;min-height:0;border-radius:0;transform:none;
  background:transparent;overflow:visible;
}
.hero-art .hero-image{
  display:block;
  width:100%;
  max-width:560px;
  height:auto;
  object-fit:contain;
  /* Reset sisa aturan lama ".hero-art img" (position:absolute; left:110px; top:0)
     supaya gambar tetap berada di kolom kanan, bukan menempel ke kiri viewport. */
  position:static;
  left:auto;
  top:auto;
  right:auto;
  bottom:auto;
  filter:none;
}

/* Kotak placeholder: kunci rasio 16:10 supaya tinggi kartu tidak bergeser
   saat gambar asli dipasang. */
.hero-art.is-placeholder{
  aspect-ratio:8/5;                 /* 523x300 -> 1046x600 @2x */
  border:2px dashed #a9d6c8;
  border-radius:18px;
  background:rgba(255,255,255,.55);
  flex-direction:column;gap:10px;
  padding:20px;text-align:center;
}
.hero-art.is-placeholder .ph-title{
  font:800 15px 'Plus Jakarta Sans';color:var(--teal-dark);letter-spacing:-.3px;
}
.hero-art.is-placeholder .ph-size{
  display:inline-block;margin-top:6px;padding:5px 12px;border-radius:999px;
  background:#d9f5eb;color:#16836e;font:700 12px 'DM Sans';
}
.hero-art.is-placeholder .ph-note{
  max-width:270px;color:#75869a;font:12px/1.55 'DM Sans';
}
.hero-art.is-placeholder .ph-note strong{color:var(--teal-dark)}
.hero-art.is-placeholder [aria-hidden]{font-size:34px;line-height:1;opacity:.65}

/* Desktop: dua kolom — tulisan kiri, placeholder kanan. */
@media(min-width:721px){
  .hero-inner{grid-template-columns:1fr 1fr;gap:0;padding:0 0 0 44px}
  .hero-art{align-self:center}
  .hero-art.is-placeholder{margin:0 44px 0 0}
}
@media(max-width:720px){
  .hero-art{order:1}
  .hero-art.is-placeholder{aspect-ratio:auto;min-height:180px}
}

/* ===== Pusatkan konten halaman dalam (Jelajahi, Pesanan, Helper, Pengaturan) ===== */
/* Blok ber-max-width ini sebelumnya menempel ke kiri; margin auto membuatnya di tengah. */
.inner-page > .explore-list,
.inner-page > .request-list,
.inner-page > .profile-menu,
.inner-page > .offers-box,
.inner-page > .helper-dashboard,
.inner-page > .settings-grid,
.inner-page > .chat-panel,
.inner-page > .empty,
.inner-page > .search,
.inner-page > .order-card,
.inner-page > .offer-card,
.inner-page > .profile-panel,
.inner-page > .admin-members,
.inner-page > .admin-stats {
  margin-left: auto;
  margin-right: auto;
}
/* Judul halaman dalam ikut dipusatkan agar seimbang dengan blok konten. */
.inner-page > .eyebrow,
.inner-page > h1,
.inner-page > h2,
.inner-page > h3,
.inner-page > .section-title {
  text-align: center;
}
/* Teks pendukung (deskripsi .muted) & subtitle di bawah judul juga dipusatkan,
   agar tidak hanya judul yang di tengah sedangkan paragrafnya menempel ke kiri. */
.inner-page > .muted,
.inner-page > .settings-intro,
.inner-page > .profile-subtitle {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
/* Tombol aksi utama tepat di bawah judul (mis. "Cari Helper cocok") ikut di tengah,
   bukan menempel ke kiri. */
.inner-page > .primary-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Baris tab / chip filter dipusatkan saat berada langsung di dalam halaman dalam. */
.inner-page > .tabs,
.inner-page > .filter-row {
  justify-content: center;
}
/* Blok konten ber-max-width yang belum tercakup aturan di atas ikut dipusatkan. */
.inner-page > .offers-list,
.inner-page > .transactions-list,
.inner-page > .transaction-list,
.inner-page > .settings-grid,
.inner-page > .account-summary {
  margin-left: auto;
  margin-right: auto;
}

/* Panel notifikasi (dibuat oleh app.js) dijadikan konteks posisi agar menempel ke grup tombol header. */
.header-actions{position:relative}
.header-actions > .notification-panel{right:0;top:calc(100% + 6px)}

/* ===== Peran akun: lencana User / Helper / Admin ===== */
.role-badge{display:inline-block;vertical-align:middle;border-radius:20px;padding:3px 10px;font:700 10px 'DM Sans';letter-spacing:.4px;text-transform:uppercase;background:#eef2f1;color:#71858e}
.role-badge.role-user{background:#e9f1fb;color:#3b6fb6}
.role-badge.role-helper{background:#e4f6ef;color:#0b7a5c}
.role-badge.role-admin{background:#fdeede;color:#b76c40}
/* Panel khusus admin disembunyikan untuk User & Helper. */
.settings-grid.is-hidden{display:none}

/* ===== Dashboard Admin ===== */
/* Deskripsi di bawah judul halaman dibuat rata tengah agar seimbang dengan judul
   dan blok konten (menu + statistik) yang sudah dipusatkan. */
.admin-page > .muted{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.admin-page .admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;max-width:760px}
.admin-page .admin-stats > div{background:white;border:1px solid var(--line);border-radius:15px;padding:16px;text-align:center}
.admin-page .admin-stats small{display:block;color:var(--muted);font:600 11px 'DM Sans';letter-spacing:.3px;text-transform:uppercase}
.admin-page .admin-stats strong{display:block;margin-top:4px;font:800 22px 'Plus Jakarta Sans';color:var(--teal)}
.admin-page .admin-members{display:grid;gap:12px;max-width:680px}
.admin-page .admin-member .role-select-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font:600 12px 'DM Sans';color:var(--muted)}
.admin-page .admin-member select{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:9px 12px;font:600 13px 'DM Sans';cursor:pointer}

/* ===== Database User & Helper ===== */
/* Deskripsi di bawah judul halaman dibuat rata tengah agar seimbang dengan judul
   dan blok konten (search + daftar) yang sudah dipusatkan di atas. */
.directory-page > .muted{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.directory-page .directory-member .directory-skill{font:600 13px 'DM Sans';color:var(--ink);margin:6px 0 0}
.directory-page .directory-member .directory-meta{display:block;margin-top:8px;font:600 11px 'DM Sans';color:var(--muted)}
.directory-page .section-title .role-badge{margin-left:6px}
.directory-page .profile-menu{margin-bottom:14px}

/* ===== Tabel Database (User & Helper) ===== */
/* Tampilan ringkas berbasis tabel agar data tidak memakan banyak tempat.
   Dibungkus .table-scroll agar tetap bisa digeser horizontal di layar kecil. */
.directory-page .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:22px;border:1px solid var(--line);border-radius:14px}
.directory-table{width:100%;border-collapse:collapse;font:500 13px 'DM Sans';min-width:640px}
.directory-table thead th{text-align:left;font:700 11px 'Plus Jakarta Sans';letter-spacing:.4px;text-transform:uppercase;color:var(--muted);padding:12px 14px;background:#f5faf8;border-bottom:1px solid var(--line);white-space:nowrap}
.directory-table tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.directory-table tbody tr:last-child td{border-bottom:0}
.directory-table tbody tr:hover{background:#fafdfb}
.directory-table .col-name strong{display:block;font:700 14px 'Plus Jakarta Sans';color:var(--ink)}
.directory-table .col-name .directory-meta{display:block;margin-top:3px}
.directory-table .col-orders{text-align:center;font-weight:700}
.directory-table .col-email{color:var(--muted);word-break:break-all}
.directory-table .col-skill{max-width:220px}
.directory-table .col-action select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font:600 13px 'DM Sans';color:var(--ink);cursor:pointer}
.directory-table .role-badge{margin-left:0}

@media(max-width:680px){
  .directory-table thead{display:none}
  .directory-table,.directory-table tbody,.directory-table tr,.directory-table td{display:block;width:100%;min-width:0}
  .directory-table tbody tr{border-bottom:8px solid #f5faf8;padding:6px 0}
  .directory-table tbody td{border-bottom:0;padding:6px 14px}
  .directory-table tbody td::before{content:attr(data-label);display:block;font:700 10px 'Plus Jakarta Sans';letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .directory-table .col-orders{text-align:left}
}

/* ===== Panel Admin: layout sidebar kiri ===== */
/* Membungkus halaman admin (Dashboard, Database, Pengaturan) dengan navigasi
   vertikal di kiri dan area konten di kanan. Pada layar kecil sidebar berubah
   menjadi bilah horizontal yang bisa digeser agar tetap hemat ruang. */
.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:stretch;margin:26px 22px 40px;max-width:1280px;min-height:calc(100vh - 160px)}
.admin-sidebar{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:14px;height:calc(100vh - 116px);min-height:420px;background:white;border:1px solid var(--line);border-radius:16px;padding:16px 14px;box-shadow:0 8px 24px #183d380f;overflow-y:auto}
.admin-sidebar-head{display:flex;flex-direction:column;gap:6px;padding:4px 6px 12px;border-bottom:1px solid var(--line)}
.admin-sidebar-title{font:700 15px 'Plus Jakarta Sans';color:var(--ink);margin:0}
.admin-sidebar-head .role-badge{align-self:flex-start}
.admin-nav{display:flex;flex-direction:column;gap:4px}
.admin-nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:var(--ink);text-decoration:none;transition:background .18s,color .18s}
.admin-nav-item:hover{background:#f4fbf8}
.admin-nav-item.is-active{background:var(--mint);color:var(--teal)}
.admin-nav-icon{width:24px;text-align:center;font-size:17px;flex:0 0 24px}
.admin-nav-text{display:flex;flex-direction:column;line-height:1.25}
.admin-nav-text strong{font:700 13px 'Plus Jakarta Sans'}
.admin-nav-text small{font:500 11px 'DM Sans';color:var(--muted)}
.admin-nav-item.is-active .admin-nav-text small{color:var(--teal);opacity:.8}
.admin-sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.admin-nav-back{color:var(--muted)}
.admin-nav-logout{color:#b42318;margin-top:6px}
.admin-nav-logout:hover{background:#fef3f2}
.admin-nav-logout .admin-nav-icon{color:#b42318}
.admin-main{min-width:0}
.admin-main .inner-page{margin:0}

@media(max-width:900px){
  .admin-shell{grid-template-columns:1fr;gap:16px;margin:20px 16px 32px;min-height:0}
  .admin-sidebar{position:static;height:auto;min-height:0;overflow:visible;border-radius:14px;padding:12px}
  .admin-sidebar-head{flex-direction:row;align-items:center;justify-content:space-between;padding-bottom:10px}
  .admin-nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .admin-nav-item{flex:0 0 auto;padding:9px 12px}
  .admin-nav-text small{display:none}
  .admin-sidebar-foot{margin-top:6px;padding-top:10px}
  .admin-sidebar-foot .admin-nav-item{width:100%;justify-content:center}
}

@media(max-width:600px){
  .admin-shell{margin:16px 12px 28px}
  .admin-nav-text strong{font-size:12px}
  .admin-nav-icon{font-size:15px}
}



/* ===== Halaman Transaksi (User & Helper) ===== */
/* Deskripsi di bawah judul dibuat rata tengah agar seimbang dengan judul dan
   blok ringkasan/daftar transaksi yang sudah dipusatkan. */
.transactions-page > .muted{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.transactions-page > .primary-button{display:block;margin:0 auto 22px}
.transactions-page .transaction-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.transactions-page .transaction-actions .small-button{margin-left:0}
.transactions-page .transaction-card .status{margin-top:10px}
.transactions-page .section-title{margin-top:26px}
/* Isi kartu transaksi dipusatkan agar seimbang dengan judul & ringkasan yang
   sudah rata tengah. Sebelumnya teks kartu menempel ke kiri. */
.transactions-page .transaction-card{text-align:center;align-items:center}
.transactions-page .transaction-card .order-top{justify-content:center;flex-wrap:wrap;gap:8px}
.transactions-page .transaction-card .order-price{justify-content:center}
.transactions-page .transaction-card .small-button{align-self:center;margin-top:6px}
.transactions-page .transaction-card .status{align-self:center}
.transactions-page .transaction-card .directory-meta{text-align:center}
/* Pesan status di dalam daftar (mis. "Belum ada transaksi") ikut dipusatkan,
   karena bukan anak langsung .inner-page melainkan berada di dalam .admin-members. */
.transactions-page .admin-members > .muted{text-align:center;margin-left:auto;margin-right:auto}

/* ===== Dialog "Kirim Penawaran" & "Cari Helper" ===== */
/* Header ikon bersama untuk kedua bubble */
.dialog-head{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.dialog-icon{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,#e6f2ed,#d3ece0);box-shadow:inset 0 0 0 1px #d8ece2}
.dialog-head-text{min-width:0}
.dialog-head-text .eyebrow{margin:0 0 2px}
#offer-form h2,.matching-window h2{font:800 24px 'Plus Jakarta Sans';margin:0;color:var(--teal-dark);letter-spacing:-.5px}

/* --- Bubble kirim penawaran --- */
#offer-form{padding:28px;position:relative;box-sizing:border-box}
.dialog-lead{margin:12px 0 4px;color:var(--muted);font:500 12.5px 'DM Sans';line-height:1.55;background:#f4faf7;border-radius:10px;padding:10px 12px}
#offer-form label{display:grid;gap:6px;margin:16px 0 0;font:700 12px 'DM Sans'}
#offer-form input,#offer-form textarea{margin-top:0;background:#fbfdfc;transition:border-color .18s,box-shadow .18s}
#offer-form input:focus,#offer-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #155e5a1f}
.field-hint{display:block;font:500 11px 'DM Sans';color:var(--muted);margin-top:-1px}
.dialog-note{display:flex;gap:9px;align-items:flex-start;background:#eef9f4;border:1px solid #d6ede2;border-radius:12px;padding:11px 13px;margin:18px 0 0}
.dialog-note span{font-size:15px;line-height:1.3;flex:none}
.dialog-note p{margin:0;font:500 11.5px 'DM Sans';color:var(--muted);line-height:1.5}
#offer-form .primary-button{width:100%;margin-top:16px;padding:14px 18px}

/* --- Bubble cari Helper --- */
.matching-window{width:min(560px,92vw);padding:28px;position:relative;box-sizing:border-box}
.matching-hint{display:flex;gap:9px;align-items:flex-start;background:#eef9f4;border-radius:10px;padding:10px 12px;color:var(--muted);font:500 11.5px 'DM Sans';line-height:1.5;margin:12px 0 16px}
.matching-hint span{flex:none}
.matching-body{max-height:62vh;overflow:auto;padding-right:4px;margin:0 -2px}
.match-list{display:flex;flex-direction:column;gap:14px}
.match-list .order-card{margin:0;max-width:none}

/* Kartu Helper hasil matching */
.match-card{gap:0}
.match-card .match-head{display:flex;align-items:center;gap:12px}
.match-avatar{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;font:800 18px 'Plus Jakarta Sans';color:#fff;background:linear-gradient(135deg,#087466,#38bd91);box-shadow:0 4px 12px #08746633}
.match-id{flex:1;min-width:0}
.match-name-row{display:flex;align-items:center;gap:8px}
.match-name{font:700 15px 'Plus Jakarta Sans';color:var(--teal-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-rank{flex:none;font:700 10px 'DM Sans';color:var(--muted);background:#f0f5f3;border-radius:20px;padding:2px 7px}
.match-tier{display:inline-block;margin-top:5px;font:700 10px 'DM Sans';text-transform:uppercase;letter-spacing:.4px;border-radius:20px;padding:3px 9px}
.match-tier-high{background:#e0f5ec;color:#2f8a5f}
.match-tier-mid{background:#e3f0ff;color:#3b6fb6}
.match-tier-low{background:#f0f0f0;color:#888}
.match-score{flex:none;display:flex;flex-direction:column;align-items:center;font:800 20px 'Plus Jakarta Sans';color:var(--teal);line-height:1}
.match-score small{font:700 9px 'DM Sans';color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.match-card .match-bar{position:relative;height:8px;border-radius:6px;background:var(--line);margin:12px 0 0;overflow:hidden}
.match-card .match-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#0b806e,#38bd91);transition:width .5s ease}
.match-skill{font:600 12.5px 'DM Sans';color:var(--ink);margin:10px 0 0}
.match-reasons{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.match-reasons li{position:relative;padding-left:20px;color:var(--muted);font:500 12px 'DM Sans';line-height:1.45}
.match-reasons li:before{content:'\2713';position:absolute;left:0;top:0;color:#2f8a5f;font-weight:800}
.match-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding-top:11px;border-top:1px dashed var(--line)}
.match-stat{font:600 11.5px 'DM Sans';color:var(--muted)}
.match-stat b{color:var(--teal-dark);font-size:13px}
.match-offered{font:700 10px 'DM Sans';text-transform:uppercase;letter-spacing:.4px;border-radius:20px;padding:4px 10px;background:#f0f0f0;color:#888}
.match-offered.is-yes{background:#e0f5ec;color:#2f8a5f}

/* Kartu pilih permintaan */
.match-pick h3{margin:11px 0 5px}
.match-budget{margin:8px 0 0;font:600 12px 'DM Sans';color:var(--muted)}
.match-budget strong{color:var(--teal-dark)}
.match-pick .small-button{align-self:flex-start;margin-top:12px}

/* Empty & loading state */
.match-empty{max-width:none;margin:6px 0;padding:34px 18px}
.match-empty span{font-size:34px;display:block;margin-bottom:8px}
.match-loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:38px 10px;text-align:center}
.match-loading p{margin:0}
.spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--teal);animation:spin .7s linear infinite;display:block}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:560px){
  #offer-form,.matching-window{padding:20px}
  .dialog-icon{width:40px;height:40px;font-size:19px}
  #offer-form h2,.matching-window h2{font-size:21px}
  .match-score{font-size:17px}
  .match-avatar{width:40px;height:40px;font-size:16px}
}


@media(max-width:680px){
  .transactions-page > .primary-button{width:100%}
}





/* Semua kategori dalam grid lebih rapat di halaman Semua Bantuan */
.category-grid-all{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(max-width:560px){.category-grid-all{grid-template-columns:repeat(2,1fr)}}


/* ===== Halaman pemesanan per-kategori ===== */
.book-form{max-width:640px;display:flex;flex-direction:column;gap:1.25rem}
.book-step{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface,#fff);border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:1.1rem 1.2rem}
.book-num{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--primary,#4f46e5);color:#fff;font-weight:700;font-size:.9rem}
.book-q{flex:1;min-width:0}
.book-q h3{margin:0 0 .6rem;font-size:1rem}
.field-hint{display:block;margin-top:.35rem;color:#6b7280;font-size:.8rem}
.chip-group{display:flex;flex-wrap:wrap;gap:.5rem}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:.5rem 1rem;border:1.5px solid rgba(0,0,0,.15);border-radius:999px;cursor:pointer;font-size:.9rem;transition:all .15s}
.chip input:checked+span{background:var(--primary,#4f46e5);border-color:var(--primary,#4f46e5);color:#fff}
.chip span:hover{border-color:var(--primary,#4f46e5)}
.book-form textarea.search{resize:vertical}

/* ===== Halaman pemesanan (#book): rata tengah & rapi ===== */
/* Kategori di halaman Semua Bantuan ikut di tengah, grid-nya dibatasi lebar agar rapi */
.services-page > .category-grid{margin-left:auto;margin-right:auto}
/* Form pemesanan: di tengah, teks rata tengah menyeluruh */
.book-page > .book-form{margin-left:auto;margin-right:auto}
.book-page > .eyebrow,.book-page > h1{text-align:center}
.book-page > .muted{text-align:center}
/* Setiap kartu langkah: konten di tengah, teks rata tengah */
.book-step{flex-direction:column;align-items:stretch;text-align:center}
.book-num{margin:0 auto .55rem}
.book-q h3{text-align:center}
.chip-group{justify-content:center}
.field-hint{text-align:center}
.book-form .search{margin-left:auto;margin-right:auto}
.book-form textarea.search{text-align:left}
.book-form .primary-button{display:block;margin:.35rem auto 0}