:root{
  --sky:#0284c7; --sky2:#0ea5e9; --sky-dark:#0369a1; --tint:#e0f2fe;
  --ink:#0f2233; --mut:#5b7183; --line:#dcebf4; --bg:#f4fafd;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
header.site{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.logo{font-size:26px;font-weight:800;letter-spacing:-.5px;text-decoration:none;color:var(--ink)}
.logo span{color:var(--sky)}
nav.main{display:flex;gap:28px;align-items:center;font-size:15px;font-weight:600}
nav.main a{color:var(--mut);text-decoration:none}
nav.main a:hover{color:var(--sky-dark)}
nav.main a.btn{color:#fff}
.btn{display:inline-block;background:var(--sky);color:#fff;font-weight:700;border-radius:12px;padding:13px 24px;text-decoration:none;font-size:15px;border:0;cursor:pointer}
.btn:hover{background:var(--sky-dark)}
.btn:disabled{background:#b6c7d1;cursor:wait}
.btn.ghost{background:#fff;color:var(--sky);border:2px solid var(--tint)}
.badge{display:inline-block;background:var(--tint);color:var(--sky-dark);font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start;padding:26px 0 10px}
h1{font-size:46px;line-height:1.12;letter-spacing:-1px;font-weight:800}
h1 em{font-style:normal;color:var(--sky)}
.sub{margin-top:18px;font-size:17.5px;line-height:1.55;color:var(--mut)}
.sub b{color:var(--sky-dark)}
.ticks{margin-top:24px;display:grid;gap:11px;font-size:15.5px;font-weight:600}
.ticks div::before{content:"✓";color:var(--sky);font-weight:800;margin-right:10px}
.cta{margin-top:28px;display:flex;gap:14px;align-items:center}
.cta .btn{font-size:16.5px;padding:16px 30px;border-radius:14px}
.micro{font-size:13px;color:var(--mut)}
.stats{display:flex;margin-top:34px;border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.stats div{flex:1;padding:15px 10px;text-align:center;background:#fff}
.stats div+div{border-left:1.5px solid var(--line)}
.stats b{display:block;font-size:20px;color:var(--sky-dark)}
.stats span{font-size:12.5px;color:var(--mut);font-weight:600}
section.block{padding:42px 0 6px}
section.block h2{font-size:27px;letter-spacing:-.5px;text-align:center}
section.block .tp{text-align:center;color:var(--mut);margin-top:8px;font-size:15.5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.card{border:1.5px solid var(--line);border-radius:16px;padding:14px;background:#fff}
.card h4{margin-top:13px;font-size:16px}
.card p{font-size:13.5px;color:var(--mut);margin-top:3px;line-height:1.5}
.thumb{border-radius:10px;height:190px;padding:14px;overflow:hidden}
.thumb .nm2{font-weight:800;font-size:15px}
.thumb .rl{font-size:11px;opacity:.75;font-weight:600}
.thumb .bar{height:6px;border-radius:3px;margin-top:10px}
.thumb .ln{height:5px;border-radius:3px;margin-top:7px;background:rgba(15,34,51,.16)}
.t1{background:#eef6fb}.t1 .bar{background:var(--sky);width:55%}
.t2{background:#0e2a3f;color:#eaf6fd}.t2 .ln{background:rgba(255,255,255,.28)}.t2 .bar{background:#38bdf8;width:55%}
.t3{background:#fff;border:1.5px solid var(--line)}.t3 .bar{background:#0f2233;width:55%}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:26px}
.pcard{border:1.5px solid var(--line);border-radius:16px;padding:18px 14px;background:#fff;text-align:center;text-decoration:none;color:var(--ink);display:block}
.pcard:hover{border-color:var(--sky2)}
.pcard .ic{font-size:30px}
.pcard h4{font-size:15.5px;margin-top:9px;line-height:1.35}
.pcard p{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.5}
.pcard .tag{display:inline-block;margin-top:9px;font-size:11px;font-weight:700;background:var(--tint);color:var(--sky-dark);border-radius:999px;padding:4px 10px}
.steps{display:flex;gap:22px;margin:38px 0 10px}
.step{flex:1;text-align:center;padding:0 12px}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--sky);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:17px}
.step b{font-size:16px}
.step p{font-size:13.5px;color:var(--mut);margin-top:4px;line-height:1.5}
footer.site{margin:56px 0 0;border-top:1.5px solid var(--line);padding:26px 0 40px;color:var(--mut);font-size:13.5px;line-height:1.7}
footer.site a{color:var(--sky-dark)}
/* builder */
.doctabs{display:flex;gap:9px;margin:8px 0 18px;flex-wrap:wrap}
.doctabs button{font-size:14px;font-weight:700;padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);color:var(--mut);background:#fff;cursor:pointer;font-family:inherit}
.doctabs button.on{background:var(--sky);color:#fff;border-color:var(--sky)}
.stepsbar{display:flex;gap:10px;margin:14px 0 20px;flex-wrap:wrap}
.stepsbar span{font-size:13.5px;font-weight:700;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--mut);background:#fff}
.builder{display:grid;grid-template-columns:1fr 1.05fr;border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -22px rgba(2,132,199,.30)}
.form{padding:22px;border-right:1.5px solid var(--line)}
.form h3{font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--sky-dark);margin:20px 0 12px}
.form h3:first-child{margin-top:0}
.f{margin-bottom:12px}
.f label{display:block;font-size:12.5px;font-weight:700;color:var(--mut);margin-bottom:5px}
.f input,.f select,.f textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
.f textarea{resize:vertical;min-height:64px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-size:12.8px;font-weight:700;padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);color:var(--mut);background:#fff;cursor:pointer;font-family:inherit}
.chips button.on{background:var(--tint);color:var(--sky-dark);border-color:var(--sky)}
.note{margin-top:16px;background:#fff7e6;border:1.5px solid #fde9bd;border-radius:12px;padding:12px 14px;font-size:12.8px;color:#7a5a12;line-height:1.55}
.note.blue{background:var(--tint);border-color:var(--tint);color:var(--sky-dark)}
.savehint{font-size:12.5px;color:var(--sky-dark);margin-top:10px;font-weight:600}
.repeat{border:1.5px dashed #a8cfe4;border-radius:12px;padding:12px;margin-bottom:12px}
.linkbtn{background:none;border:0;color:var(--sky);font-weight:700;cursor:pointer;font-size:13.5px;font-family:inherit;padding:4px 0}
.danger{color:#c2410c}
.prev{background:linear-gradient(180deg,#fdfefe,#f7fbfd);padding:22px}
.prev .cap{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.paper{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:24px 24px 20px;box-shadow:0 10px 24px -14px rgba(15,34,51,.25);font-family:Georgia,"Times New Roman",serif;color:#20303c;font-size:13.5px;line-height:1.65;min-height:420px}
.paper .city{text-align:right;margin-bottom:12px}
.paper p{margin-bottom:9px}
.paper table.bio{border-collapse:collapse;margin:2px 0 10px;font:inherit}
.paper table.bio td{padding:1.5px 0;vertical-align:top}
.paper table.bio td.k{white-space:nowrap;padding-right:8px}
.paper table.bio td.c{padding-right:8px}
.paper ol.lamp{margin:0 0 10px 20px;padding:0}
.paper ol.lamp li{margin-bottom:2px}
.lampwrap{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.lampwrap label{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:500;color:var(--ink);margin:0}
.lampwrap input{width:17px;height:17px;accent-color:var(--sky);flex:none}
.paper .sig{margin-top:16px}
.paper .nm{margin-top:44px;font-weight:bold;text-decoration:underline}
.paper.cv{font-family:"Segoe UI",Arial,sans-serif;font-size:13px}
.paper.cv h1{font-size:20px;letter-spacing:-.3px}
.paper.cv .role{color:var(--sky);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.8px;margin-top:3px;font-family:inherit}
.paper.cv .contact{font-size:11.5px;color:var(--mut);margin-top:6px}
.paper.cv hr{border:0;border-top:3px solid var(--sky);margin:12px 0 10px}
.paper.cv h5{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--sky-dark);margin:12px 0 5px;font-family:inherit}
.paper.cv .cvtop{display:flex;gap:14px}
.paper.cv .sb{display:flex;margin:-24px -24px -20px;min-height:420px}
.paper.cv .sb-side{width:34%;background:#0d3a5c;color:#e8f4fc;padding:16px 12px;border-radius:7px 0 0 7px;flex:none}
.paper.cv .sb-side img.cvp{width:100%;height:auto;aspect-ratio:3/4;border:0}
.paper.cv .sb-side h6{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:#7cc3ef;border-bottom:1px solid #2b5a7d;padding-bottom:3px;margin:12px 0 6px;font-family:inherit}
.paper.cv .sb-side .ci{font-size:10.5px;margin-bottom:4px;overflow-wrap:break-word}
.paper.cv .sb-side ul{list-style:none}
.paper.cv .sb-side li{font-size:11px;margin-bottom:3px}
.paper.cv .sb-side li::before{content:"•  ";color:#38bdf8}
.paper.cv .sb-main{flex:1;padding:16px 16px 10px;min-width:0}
.paper.cv .ak-band{background:#0284c7;color:#fff;margin:-24px -24px 10px;padding:14px 16px;border-radius:7px 7px 0 0;display:flex;gap:12px;align-items:center}
.paper.cv .ak-band h1{color:#fff}
.paper.cv .ak-band .role{color:#d8f0fe}
.paper.cv .ak-band img.cvp{border:2px solid #fff}
.paper.cv .ak h5{border-left:4px solid var(--sky);padding-left:7px;color:var(--ink)}
.thumb.t4{display:flex;padding:0;overflow:hidden;background:#fff}
.thumb.t4 .sbx{width:32%;background:#0d3a5c;flex:none}
.thumb.t4 .mn{flex:1;padding:9px 10px}
.thumb.t5{padding:0;overflow:hidden;background:#fff}
.thumb.t5 .bd5{background:var(--sky);padding:8px 10px}
.thumb.t5 .bd5 .nm2{color:#fff}
.thumb.t5 .bd5 .rl{color:#d8f0fe}
.thumb.t5 .ln{margin-left:10px;margin-right:10px}
.paper.cv img.cvp{width:86px;height:114px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.dlpanel{margin:22px 0 44px;border:1.5px solid var(--line);border-radius:18px;padding:20px 22px;background:var(--bg)}
.dlpanel h3{font-size:18px}
.dlpanel p{color:var(--mut);font-size:13.5px;margin-top:4px}
.files{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.file{flex:1;min-width:210px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:center}
.file .fi{font-size:24px}
.file b{font-size:14.5px;display:block}
.file span{font-size:12px;color:var(--mut)}
.file button{margin-left:auto;background:var(--sky);color:#fff;border:0;border-radius:9px;padding:9px 13px;font-weight:700;cursor:pointer}
.file button:disabled{background:#b6c7d1}
.status{font-size:13px;margin-top:10px;color:var(--sky-dark);min-height:18px}
.fotobox{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.drop{flex:1;min-width:200px;border:2px dashed #a8cfe4;border-radius:14px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;text-align:center;cursor:pointer}
.drop b{font-size:14.5px;margin-top:6px}
.drop span{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.45}
.shot{width:118px;border-radius:10px;overflow:hidden;border:1.5px solid var(--line);background:#f1f5f9;display:flex;align-items:center;justify-content:center}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.swatches{display:flex;gap:14px}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mut);background:none;border:0;cursor:pointer;font-family:inherit}
.sw i{width:38px;height:38px;border-radius:50%;display:block;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
.sw.on{color:var(--sky-dark)}
.sw.on i{box-shadow:0 0 0 2.5px var(--sky)}
.pills{display:flex;gap:9px}
.pills button{font-size:13px;font-weight:700;padding:8px 15px;border-radius:999px;border:1.5px solid var(--line);color:var(--mut);background:#fff;cursor:pointer;font-family:inherit}
.pills button.on{background:var(--sky);border-color:var(--sky);color:#fff}
.lbl{font-size:12.5px;font-weight:700;color:var(--mut);margin:16px 0 8px}
/* contoh pages */
.docwrap{max-width:820px;margin:0 auto;padding:10px 28px 0}
.docwrap h1{font-size:34px}
.docwrap .paper{margin-top:20px;min-height:0}
.docwrap h2{font-size:22px;margin:34px 0 10px}
@media (max-width:880px){
  .wrap{padding:0 14px}
  nav.main a:not(.btn){display:none}
  .logo{font-size:21px}
  /* HP mengikuti komposisi contoh desktop: dua kolom, bukan tumpuk satu */
  .hero{grid-template-columns:1.05fr .95fr;gap:14px;padding-top:12px}
  .badge{font-size:10px;padding:5px 10px;margin-bottom:10px}
  h1{font-size:22.5px;letter-spacing:-.4px;line-height:1.18}
  .sub{font-size:12px;margin-top:10px;line-height:1.5}
  .ticks{margin-top:12px;gap:7px;font-size:11.5px}
  .ticks div::before{margin-right:6px}
  .cta{margin-top:14px;flex-wrap:wrap;gap:8px}
  .cta .btn{font-size:13px;padding:11px 15px;border-radius:11px}
  .micro{font-size:10.5px}
  .stats{margin-top:16px}
  .stats div{padding:9px 3px}
  .stats b{font-size:13.5px}
  .stats span{font-size:9px;line-height:1.3;display:block}
  .hero .paper{font-size:7.4px;line-height:1.5;padding:11px 10px;min-height:0;border-radius:6px}
  .hero .paper p{margin-bottom:5px}
  .hero .paper .city{margin-bottom:6px}
  .hero .paper .sig{margin-top:7px}
  .hero .paper .nm{margin-top:15px}
  section.block{padding:28px 0 4px}
  section.block h2{font-size:19.5px}
  section.block .tp{font-size:12px}
  .grid3{grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}
  .card{padding:8px;border-radius:12px}
  .thumb{height:84px;padding:8px}
  .thumb .nm2{font-size:9px}
  .thumb .rl{font-size:6.5px}
  .thumb .bar{height:4px;margin-top:6px}
  .thumb .ln{height:3px;margin-top:4px}
  .card h4{font-size:12px;margin-top:8px}
  .card p{font-size:9.5px;line-height:1.4}
  .pgrid{grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}
  .pcard{padding:11px 7px;border-radius:12px}
  .pcard .ic{font-size:19px}
  .pcard h4{font-size:11px;margin-top:6px}
  .pcard p{font-size:9px;line-height:1.4;margin-top:3px}
  .pcard .tag{font-size:8.5px;padding:3px 7px;margin-top:6px}
  .steps{flex-direction:row;gap:8px;margin:26px 0 6px}
  .step{padding:0 2px}
  .step .n{width:29px;height:29px;font-size:13px;margin-bottom:7px}
  .step b{font-size:11.5px}
  .step p{font-size:9.5px;line-height:1.4}
  .builder{grid-template-columns:1fr}
  .form{border-right:0;border-bottom:1.5px solid var(--line)}
  .row2{grid-template-columns:1fr}
}

.paper .sigimg{height:46px;display:block;margin-top:2px}
.paper .nm2{margin-top:6px}
.ttdbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ttdbox input[type=file]{font-size:13px}
.ttdprev{display:inline-flex;align-items:center;gap:8px}
.ttdprev img{height:42px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px}
.cekbox{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:#fbfdff}
.cekbox .bar{height:8px;background:var(--tint);border-radius:99px;overflow:hidden;margin:8px 0}
.cekbox .bar i{display:block;height:100%;background:var(--sky);border-radius:99px;transition:width .3s}
.cekbox ul{list-style:none;font-size:13px;color:var(--mut)}
.cekbox li::before{content:"○ ";color:#b6c9d6}
.cekbox li.ok{color:var(--ink)}
.cekbox li.ok::before{content:"✓ ";color:var(--sky);font-weight:800}
.btn.word{background:#fff;color:var(--sky);border:2px solid var(--tint);font-size:13.5px;padding:9px 16px;border-radius:10px;width:100%;margin-top:8px;cursor:pointer;font-weight:700}
.btn.word:hover{border-color:var(--sky)}
.glist{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.gitem{display:flex;justify-content:space-between;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;background:#fff}

/* --- galeri template & titik warna (pembuat CV) --- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tpl{border:2px solid var(--line);border-radius:12px;background:#fff;padding:8px;cursor:pointer;text-align:center}
.tpl.on{border-color:var(--sky);box-shadow:0 0 0 3px var(--tint)}
.tpl .pv{height:74px;border-radius:6px;border:1px solid #e6eef4;overflow:hidden;position:relative;background:#fff}
.tpl b{display:block;font-size:12px;margin-top:7px;color:var(--ink)}
.tpl small{font-size:10.5px;color:var(--mut)}
.pv i{position:absolute;display:block;background:#cbd5e1;border-radius:2px}
.pv .sd{position:absolute;left:0;top:0;bottom:0;width:34%;background:#0d3a5c}
.pv .sdl{position:absolute;left:0;top:0;bottom:0;width:34%;background:#eef4f8;border-right:1px solid #dcebf4}
.pv .bd{position:absolute;left:0;right:0;top:0;height:26%;background:#0284c7}
.pv .bd2{position:absolute;left:0;right:0;top:0;height:30%;background:#0e2a3f}
.pv .bx{position:absolute;inset:6px;border:2px solid #0e2a3f;border-radius:3px}
.dots{display:flex;gap:9px}
.dots i{width:24px;height:24px;border-radius:50%;display:block;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
.dots i.on{box-shadow:0 0 0 2.5px var(--sky)}
details.extra{border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;margin-top:14px}
details.extra summary{font-weight:700;font-size:14px;cursor:pointer;color:var(--sky-dark)}
details.extra .f:first-of-type{margin-top:12px}
/* --- unduh satu tombol + pilihan format --- */
.dlbar{display:flex;gap:10px;margin-top:12px}
.seg{display:flex;border:2px solid var(--tint);border-radius:11px;overflow:hidden;flex:none}
.seg button{border:0;background:#fff;padding:0 13px;font-weight:700;font-size:13px;color:var(--mut);cursor:pointer;font-family:inherit}
.seg button.on{background:var(--sky);color:#fff}
.dlbar .btn{flex:1;margin:0}
/* --- pratinjau nempel di layar lebar --- */
@media (min-width:881px){ .builder .prev{position:sticky;top:14px;align-self:start} }
/* --- pratinjau CV template baru --- */
.paper.cv .g5 h5{border-left:4px solid var(--sky);padding-left:7px;color:var(--ink)}
.paper.cv .tgh .cvtop{flex-direction:column;align-items:center;text-align:center}
.paper.cv .tgh .cvtop img.cvp{margin:0 auto}
.paper.cv .ktk .cvtop{border:2px solid #0e2a3f;padding:12px}
.paper.cv .ktk hr{display:none}
.paper.cv .ktk h5{background:#eef4f8;padding:4px 7px;color:var(--ink)}
.paper.cv .sb.smp .sb-side{color:#20303c}
.paper.cv .sb.smp .sb-side h6{color:#0369a1;border-bottom-color:#cfdde8}
.paper.cv .sb.smp .sb-side li::before{color:var(--sky)}
/* --- beranda dua pintu --- */
.doors{display:flex;gap:12px;margin-top:20px}
.door{flex:1;background:#fff;border:2px solid var(--line);border-radius:18px;padding:18px 14px 16px;text-decoration:none;color:var(--ink);display:block}
.door .ic{font-size:30px}
.door h2{font-size:18px;margin-top:9px;line-height:1.3}
.door p{font-size:12.8px;color:var(--mut);line-height:1.5;margin-top:6px}
.door .go{display:inline-block;margin-top:10px;background:var(--sky);color:#fff;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:10px}
.door.cv .go{background:#fff;color:var(--sky);border:2px solid var(--sky)}
.doors2{display:flex;gap:12px;margin-top:12px}
.door2{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px}
.door2 small{display:block;font-weight:600;color:var(--mut);font-size:11px;margin-top:1px}
.thumb.t6 .ln{margin-left:14px}
.thumb.t6::before{content:"";display:block;width:5px;height:120px;background:var(--sky);border-radius:3px;float:left;margin-right:9px}
.thumb.t7{text-align:center}
.thumb.t7 .nm2,.thumb.t7 .rl{text-align:center}
.thumb.t8{display:flex;padding:0;overflow:hidden;background:#fff}
.thumb.t8 .sbx{width:32%;background:#eef4f8;border-right:1px solid var(--line);flex:none}
.thumb.t8 .mn{flex:1;padding:9px 10px}
.thumb.t9 .bx9{border:2px solid #0e2a3f;border-radius:6px;padding:8px 9px}