:root{
  --bg:#ffffff;
  --bg-alt:#f6f7f9;
  --card:#ffffff;
  --border:#e5e7eb;
  --ink:#161a20;
  --ink-dim:#6b7280;
  --accent:#159a6d;
  --accent-dim:#0e7a56;
  --accent-soft:#e5f5ee;
  --danger:#dc2626;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,32,.04), 0 6px 20px rgba(16,24,32,.06);
  --maxw:1080px;
  --font:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", monospace;
}
:root[data-theme="dark"]{
  --bg:#0f1115;
  --bg-alt:#161920;
  --card:#181b22;
  --border:#272b34;
  --ink:#eef0f3;
  --ink-dim:#9aa1ac;
  --accent:#2fd08a;
  --accent-dim:#1fae72;
  --accent-soft:#0f2b21;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}
:root{ color-scheme:light; }
select,.tool select,.field select{ color-scheme:inherit; }
select option{ background:var(--card); color:var(--ink); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.6;transition:background-color .25s ease, color .25s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;margin:0 0 .4em;}
code{font-family:var(--mono);background:var(--bg-alt);padding:.1em .4em;border-radius:4px;}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;} }

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .4s ease, visibility .4s ease;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader__logo{width:56px;height:56px;object-fit:cover;border-radius:12px;}
.loader__spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- layout ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:56px 20px;}
.section--alt{background:var(--bg-alt);}
.section__head{max-width:640px;margin:0 auto 32px;text-align:center;}
.section__head h2{font-size:clamp(1.5rem,4vw,2rem);}
.section__lede{color:var(--ink-dim);font-size:1rem;}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;
  font-weight:600;font-size:.92rem;border:1px solid transparent;cursor:pointer;
  font-family:var(--font);transition:opacity .15s ease, transform .1s ease;
}
.btn:hover{opacity:.9;}
.btn:active{transform:scale(.98);}
.btn--primary{background:var(--accent);color:#fff;}
.btn--ghost{background:transparent;border-color:var(--border);color:var(--ink);}
.btn--outline{background:transparent;border-color:var(--accent);color:var(--accent);}
.btn--small{padding:8px 16px;font-size:.84rem;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:18px;
  padding:14px 24px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
:root[data-theme="dark"] .nav{background:rgba(15,17,21,.85);}
.nav__brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;}
.nav__brand img{width:38px;height:38px;object-fit:cover;border-radius:9px;}
.nav__links{display:flex;gap:22px;margin-left:auto;}
.nav__links a{font-size:.9rem;font-weight:500;color:var(--ink-dim);}
.nav__links a:hover,.nav__links a.active{color:var(--accent);}
.nav__cta{background:var(--accent);color:#fff;padding:9px 18px;border-radius:8px;font-weight:600;font-size:.85rem;}
.theme__toggle{background:var(--bg-alt);border:1px solid var(--border);color:var(--ink);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.95rem;display:flex;align-items:center;justify-content:center;flex:none;}
.nav__burger{display:none;background:var(--bg-alt);border:1px solid var(--border);color:var(--ink);width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;flex:none;}

@media (max-width:820px){
  .nav__links{display:none;}
  .nav__burger{display:flex;align-items:center;justify-content:center;margin-left:auto;}
  .nav.open .nav__links{
    display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100vh;width:78%;max-width:300px;
    background:var(--card);padding:90px 24px 24px;gap:16px;border-left:1px solid var(--border);
    box-shadow:-10px 0 30px rgba(0,0,0,.15);z-index:160;
  }
  .nav__links a{font-size:1rem;}
  .nav__cta{display:none;}
}
@media (max-width:560px){ .nav__cta{display:none;} }
.nav__overlay{display:none;position:fixed;inset:0;z-index:155;background:rgba(0,0,0,.4);}
.nav.open + .nav__overlay{display:block;}

/* ---------- hero ---------- */
.hero{padding:64px 20px 40px;text-align:center;}
.hero__logo{width:112px;height:112px;object-fit:cover;border-radius:20px;margin:0 auto 20px;display:block;}
.hero__title{font-size:clamp(2rem,6vw,2.8rem);margin-bottom:10px;}
.hero__sub{color:var(--ink-dim);max-width:520px;margin:0 auto 28px;font-size:1.02rem;}
.hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- generic card ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin-bottom:22px;}
.card__head{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.card__head .emoji{font-size:1.3rem;}
.card__head h2{font-size:1.15rem;margin:0;}

/* keahlian meters */
.meter{margin-bottom:14px;}
.meter__top{display:flex;justify-content:space-between;font-weight:600;font-size:.88rem;margin-bottom:6px;}
.meter__track{height:8px;background:var(--bg-alt);border-radius:99px;overflow:hidden;}
.meter__fill{height:100%;width:0%;--v:0%;background:var(--accent);border-radius:99px;transition:width 1s ease;}
.meter__fill.go{width:var(--v);}

/* hobi / skills grid */
.hobi__grid,.skills__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:520px){ .skills__grid{grid-template-columns:repeat(4,1fr);} }
.hobi__item,.skill{
  border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:.88rem;background:var(--bg-alt);
}
.skill{justify-content:center;text-align:center;}
.hobi__item .ic{font-size:1.1rem;}

/* lagu favorit */
.song{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.song:last-child{border-bottom:none;}
.song__num{font-weight:700;color:var(--ink-dim);width:18px;flex:none;font-size:.9rem;}
.song__play{width:38px;height:38px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:.9rem;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;}
.song__meta{flex:1;min-width:0;}
.song__title{font-weight:600;font-size:.94rem;}
.song__artist{font-size:.8rem;color:var(--ink-dim);}
.song__bar{height:4px;background:var(--bg-alt);border-radius:99px;margin-top:6px;overflow:hidden;}
.song__bar span{display:block;height:100%;width:0%;background:var(--accent);transition:width .2s linear;}

/* mini player — persisten, nongol di semua halaman selama ada lagu aktif */
.miniplayer{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;align-items:center;gap:12px;
  padding:10px 84px 10px 14px;
  background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 -6px 20px rgba(16,24,32,.08);
  touch-action:pan-y;user-select:none;
}
.miniplayer.show{display:flex;}
.miniplayer.dismissed{display:none!important;}
.miniplayer__handle{
  display:none;position:fixed;left:14px;bottom:14px;z-index:95;
  width:46px;height:46px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;font-size:1.05rem;cursor:pointer;
  align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(21,154,109,.4);
  animation:handlePulse 1.6s ease-in-out infinite;
}
.miniplayer__handle.show{display:flex;}
@keyframes handlePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.miniplayer__btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:.85rem;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;}
.miniplayer__meta{flex:1;min-width:0;}
.miniplayer__title{font-weight:600;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.miniplayer__artist{font-size:.74rem;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.miniplayer__bar{height:3px;background:var(--bg-alt);border-radius:99px;margin-top:5px;overflow:hidden;}
.miniplayer__bar span{display:block;height:100%;width:0%;background:var(--accent);transition:width .2s linear;}
body.has-miniplayer{padding-bottom:60px;}
body.has-miniplayer .fab{bottom:76px;}
@media (max-width:480px){ .miniplayer{padding:9px 70px 9px 12px;} }

/* social pills */
.social__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.social{display:flex;align-items:center;gap:9px;justify-content:center;border:1px solid var(--border);border-radius:10px;padding:11px 12px;font-weight:600;font-size:.86rem;background:var(--bg-alt);}
.social i{font-size:1rem;color:var(--accent);}
.social--wa{background:var(--accent);color:#fff;}
.social--wa i{color:#fff;}

.about__text{color:var(--ink-dim);margin-bottom:12px;}

/* quick links */
.hub__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.hub__card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:block;transition:transform .12s ease, box-shadow .12s ease;}
.hub__card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,24,32,.1);}
.hub__card .icon{font-size:1.3rem;color:var(--accent);margin-bottom:8px;display:block;}
.hub__card h3{font-size:1rem;}
.hub__card p{color:var(--ink-dim);font-size:.86rem;margin:0 0 10px;}
.hub__link{font-size:.82rem;font-weight:600;color:var(--accent);}
.hub__link::after{content:" →";}

/* ---------- market ---------- */
.tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:8px;}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:16px 10px;border-radius:12px;border:1px solid var(--border);background:var(--card);
  font-weight:600;font-size:.78rem;cursor:pointer;transition:border-color .15s ease, background .15s ease;text-align:center;
}
.tab .tab__icon{font-size:1.2rem;color:var(--accent);}
.tab .tab__icon img{width:26px;height:26px;object-fit:contain;vertical-align:middle;}
.tab .tab__icon img.mono-icon{filter:brightness(0) saturate(100%);}
:root[data-theme="dark"] .tab .tab__icon img.mono-icon{filter:brightness(0) saturate(100%) invert(1);}
.tab.active .tab__icon img.mono-icon{filter:brightness(0) saturate(100%) invert(1);}
.tab:hover{border-color:var(--accent);}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.tab.active .tab__icon{color:#fff;}
.category__note{color:var(--ink-dim);font-size:.85rem;margin:0 0 22px;text-align:center;}

.market__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.market__card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:transform .12s ease;}
.market__card:hover{transform:translateY(-2px);}
.market__card .price{font-weight:700;font-size:1.2rem;color:var(--accent);}
.market__card h3{font-size:.9rem;margin:0;font-weight:600;}
.market__card span.tap{font-size:.72rem;color:var(--ink-dim);}
.empty-state{text-align:center;padding:50px 20px;color:var(--ink-dim);grid-column:1/-1;}

.market__modal{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s ease;}
.market__modal.open{opacity:1;pointer-events:auto;}
.market__panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;max-width:420px;width:100%;max-height:80vh;overflow-y:auto;position:relative;}
.market__close{position:absolute;top:14px;right:14px;background:var(--bg-alt);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;cursor:pointer;}
.market__note{color:var(--ink-dim);font-size:.85rem;margin-bottom:16px;}
.pricelist{display:flex;flex-direction:column;gap:8px;}
.pricelist__row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-alt);border-radius:10px;padding:10px 14px;}
.pricelist__row .price{font-weight:700;color:var(--accent);}

.field{margin-bottom:14px;text-align:left;}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:5px;}
.field input{width:100%;background:var(--bg-alt);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--ink);font-family:var(--font);}
.field .hint{display:block;font-size:.72rem;color:var(--ink-dim);margin-top:4px;}

.success{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.success.show{opacity:1;pointer-events:auto;}
.success__check{width:72px;height:72px;}
.success__check circle{fill:none;stroke:var(--accent);stroke-width:4;stroke-dasharray:280;stroke-dashoffset:280;animation:circleDraw .5s ease forwards;}
.success__check path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:checkDraw .3s .45s ease forwards;}
@keyframes circleDraw{to{stroke-dashoffset:0;}}
@keyframes checkDraw{to{stroke-dashoffset:0;}}
.success__text{color:var(--ink);font-size:.95rem;text-align:center;}

/* ---------- tools ---------- */
.tools__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.tool{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px;}
.tool__icon{font-size:1.2rem;color:var(--accent);}
.tool h3{font-size:.95rem;}
.tool p{color:var(--ink-dim);font-size:.83rem;margin:0;}
.tool input,.tool textarea,.tool select{background:var(--bg-alt);border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:9px 11px;font-family:var(--font);width:100%;resize:vertical;}
.tool__row{display:flex;gap:8px;flex-wrap:wrap;}
.tool__result{min-height:4px;font-size:.83rem;color:var(--accent);word-break:break-all;white-space:pre-wrap;font-family:var(--mono);}
.tool--soon{opacity:.9;}

/* ---------- footer ---------- */
.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:var(--maxw);margin:0 auto;padding:24px 20px 60px;color:var(--ink-dim);font-size:.85rem;}
.footer__wa{color:var(--accent);font-weight:600;}
.fab{position:fixed;bottom:20px;right:20px;z-index:60;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:0 6px 20px rgba(21,154,109,.4);}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease;}
.reveal-in{opacity:1;transform:translateY(0);}

/* ---------- admin ---------- */
.admin-wrap{max-width:var(--maxw);margin:0 auto;padding:32px 20px 80px;}
.admin-lock{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;}
.admin-lock input{width:260px;max-width:80vw;background:var(--bg-alt);border:1px solid var(--border);color:var(--ink);padding:11px 14px;border-radius:8px;text-align:center;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px;}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow);}
.stat .n{font-size:1.5rem;font-weight:700;color:var(--accent);}
.stat .l{font-size:.72rem;color:var(--ink-dim);}
.admin-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:20px;}
.admin-block h3{font-size:1.05rem;margin-bottom:4px;}
.admin-block .desc{color:var(--ink-dim);font-size:.82rem;margin-bottom:14px;}
.arow{display:grid;grid-template-columns:1fr 1fr 90px 1fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.arow input{background:var(--bg-alt);border:1px solid var(--border);color:var(--ink);border-radius:6px;padding:8px 10px;font-size:.82rem;width:100%;}
.crow{display:grid;grid-template-columns:50px 1fr 90px 1fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.crow input,.crow select{background:var(--bg-alt);border:1px solid var(--border);color:var(--ink);border-radius:6px;padding:8px 10px;font-size:.82rem;width:100%;}
.srow{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.srow input{background:var(--bg-alt);border:1px solid var(--border);color:var(--ink);border-radius:6px;padding:8px 10px;font-size:.82rem;width:100%;}
.row-head{font-size:.68rem;color:var(--ink-dim);text-transform:uppercase;}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
table.orders{width:100%;border-collapse:collapse;font-size:.82rem;}
table.orders th,table.orders td{border-bottom:1px solid var(--border);padding:8px 6px;text-align:left;}
table.orders th{color:var(--accent);font-size:.7rem;text-transform:uppercase;}
.logo-preview{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--border);}
.note-box{background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:14px 16px;font-size:.82rem;color:var(--ink);margin-bottom:22px;}
.del{background:transparent;border:1px solid var(--danger);color:var(--danger);border-radius:6px;padding:8px 10px;cursor:pointer;}

/* ---------- admin: rapi di mode HP ---------- */
@media (max-width:680px){
  .nav{flex-wrap:wrap;row-gap:10px;padding:14px 16px;}
  .admin-wrap{padding:24px 14px 70px;}
  .admin-block{padding:16px;}
  .arow,.crow,.srow{
    grid-template-columns:1fr;gap:8px;background:var(--bg-alt);border:1px solid var(--border);
    border-radius:10px;padding:12px;margin-bottom:10px;
  }
  .arow .del,.crow .del,.srow .del{width:100%;margin-top:2px;}
  .arow .row-head,.crow .row-head,.srow .row-head,.row-head{display:none;}
  .crow > span{font-size:.72rem;color:var(--ink-dim);}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  table.orders{font-size:.76rem;}
}