:root{
  --paper:#f5efe3; --ink:#121212; --white:#fffdf8;
  --coral:#ff5a36; --blue:#2f55ff; --lime:#c6f432; --pink:#ff9ecb;
  --bd:3px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Space Grotesk',sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(rgba(18,18,18,.12) 1px,transparent 1px);background-size:22px 22px}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime)}
.progress{position:fixed;top:0;left:0;height:6px;width:0;background:var(--coral);border-bottom:2px solid var(--ink);z-index:300}

/* TOP BAR */
.top{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:14px 5%;background:var(--paper);border-bottom:var(--bd)}
.brand{font-family:'Space Mono',monospace;font-weight:700;font-size:1.5rem;background:var(--ink);color:var(--paper);padding:2px 12px}
.brand span{color:var(--coral)}
.links{display:flex;gap:8px}
.links a{font-weight:600;padding:6px 14px;border:2px solid transparent;border-radius:40px;transition:.15s}
.links a:hover,.links a.on{border-color:var(--ink);background:var(--lime)}
.menu-btn{display:none;font:700 .85rem 'Space Mono',monospace;border:var(--bd);background:var(--lime);padding:6px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}

/* HERO */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:center;padding:70px 5% 60px;max-width:1280px;margin:auto}
.tag{display:inline-block;font:700 .8rem 'Space Mono',monospace;border:2px solid var(--ink);background:var(--white);padding:4px 12px;border-radius:40px;margin-bottom:18px;text-transform:uppercase;letter-spacing:1px}
.hero h1{font-size:clamp(3.4rem,10vw,7.6rem);line-height:.92;font-weight:700;letter-spacing:-3px}
.hero h1 .line{display:block}
.hero h1 .hl{display:inline-block;background:var(--coral);color:var(--ink);padding:0 14px;border:var(--bd);box-shadow:var(--sh);transform:rotate(-1.5deg);margin-top:8px}
.lead{max-width:520px;margin:30px 0;font-size:1.1rem}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;font:700 .95rem 'Space Grotesk',sans-serif;padding:13px 26px;border:var(--bd);background:var(--white);box-shadow:var(--sh);cursor:pointer;transition:.12s}
.btn.solid{background:var(--blue);color:#fff}
.btn:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}

.hero-right{position:relative;display:flex;justify-content:center}
.idcard{width:min(360px,100%);background:var(--white);border:var(--bd);box-shadow:10px 10px 0 var(--ink);transform:rotate(3deg);transition:.3s}
.idcard:hover{transform:rotate(0)}
.idcard-top{display:flex;justify-content:space-between;align-items:center;background:var(--blue);color:#fff;padding:10px 16px;font:700 .8rem 'Space Mono',monospace;letter-spacing:2px;border-bottom:var(--bd)}
.dot{width:12px;height:12px;border-radius:50%;background:var(--lime);border:2px solid var(--ink)}
.photo{height:170px;margin:18px;border:var(--bd);background:repeating-linear-gradient(45deg,var(--pink),var(--pink) 12px,#ffc4e0 12px,#ffc4e0 24px);display:flex;align-items:center;justify-content:center;font-size:5.5rem;font-weight:700}
.idcard dl{display:grid;grid-template-columns:90px 1fr;gap:6px 10px;padding:0 18px 20px;font-size:.92rem}
.idcard dt{font:700 .72rem 'Space Mono',monospace;text-transform:uppercase;color:#555;padding-top:4px}
.idcard dd{font-weight:600}
.sticker{position:absolute;right:-6px;bottom:-26px;width:96px;height:96px;border-radius:50%;background:var(--lime);border:var(--bd);display:flex;align-items:center;justify-content:center;text-align:center;font:700 .85rem/1.15 'Space Mono',monospace;animation:wob 5s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(14deg) scale(1.06)}}

/* MARQUEE */
.marquee{overflow:hidden;background:var(--ink);color:var(--lime);border-block:var(--bd);padding:12px 0;transform:rotate(-1deg);margin:30px -10px}
.track{display:flex;width:max-content;animation:run 28s linear infinite;font:700 1.05rem 'Space Mono',monospace;white-space:nowrap}
.track span{padding-right:10px}
@keyframes run{to{transform:translateX(-50%)}}

/* BLOCKS */
.block{max-width:1100px;margin:auto;padding:80px 5% 20px}
.head{display:flex;align-items:center;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.no{font:700 1rem 'Space Mono',monospace;background:var(--ink);color:var(--paper);padding:4px 12px}
.head h2{font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.1;letter-spacing:-1px;font-weight:700}

.about{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:start}
.big{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:500;line-height:1.4}
.facts{display:grid;gap:14px}
.fact{display:flex;align-items:baseline;gap:14px;background:var(--white);border:var(--bd);box-shadow:var(--sh);padding:14px 20px}
.fact:nth-child(1){background:var(--lime)}.fact:nth-child(2){background:var(--pink)}
.fact b{font-size:2.4rem;line-height:1}
.fact span{font-weight:600}

/* MODULES */
.modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.mod{background:var(--white);border:var(--bd);box-shadow:var(--sh);padding:22px;transition:.15s;position:relative}
.mod:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.mod .n{font:700 .85rem 'Space Mono',monospace;background:var(--coral);border:2px solid var(--ink);padding:1px 10px;display:inline-block;margin-bottom:12px}
.mod:nth-child(3n+2) .n{background:var(--lime)}
.mod:nth-child(3n) .n{background:var(--pink)}
.mod h3{font-size:1.15rem;line-height:1.25;margin-bottom:8px}
.mod p{font-size:.92rem;color:#333}

/* UTS */
.panel{background:var(--white);border:var(--bd);box-shadow:var(--sh);padding:20px;margin-bottom:26px}
input,textarea{width:100%;font:500 1rem 'Space Grotesk',sans-serif;padding:13px 16px;border:var(--bd);background:var(--paper);color:var(--ink);outline:none;resize:vertical}
input:focus,textarea:focus{background:#fff;box-shadow:4px 4px 0 var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.chip{font:700 .82rem 'Space Mono',monospace;border:2px solid var(--ink);background:var(--paper);padding:6px 14px;cursor:pointer;transition:.12s}
.chip:hover{background:var(--pink)}
.chip.on{background:var(--ink);color:var(--lime)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font:700 .85rem 'Space Mono',monospace}
.mini{font:700 .78rem 'Space Mono',monospace;border:2px solid var(--ink);background:var(--white);padding:4px 12px;cursor:pointer;margin-left:6px}
.mini:hover{background:var(--lime)}

.group{font:700 .95rem 'Space Mono',monospace;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.group i{font-style:normal;background:var(--blue);color:#fff;padding:2px 10px;border:2px solid var(--ink)}
.group::after{content:"";flex:1;height:3px;background:var(--ink)}

.q{background:var(--white);border:var(--bd);margin-bottom:12px;transition:.15s}
.q:hover{box-shadow:4px 4px 0 var(--ink)}
.q.open{box-shadow:var(--sh);background:#fffbe9}
.q-head{width:100%;display:flex;align-items:center;gap:14px;text-align:left;font:600 1rem 'Space Grotesk',sans-serif;color:inherit;background:none;border:0;padding:14px 16px;cursor:pointer}
.q-no{flex:none;min-width:44px;text-align:center;font:700 .85rem 'Space Mono',monospace;background:var(--lime);border:2px solid var(--ink);padding:2px 0}
.q-t{flex:1}
.q-plus{flex:none;font:700 1.4rem 'Space Mono',monospace;transition:.2s}
.q.open .q-plus{transform:rotate(45deg);color:var(--coral)}
.q-body{display:none;padding:0 16px 18px 74px;white-space:pre-line;color:#222}
.q.open .q-body{display:block;animation:in .25s}
@keyframes in{from{opacity:0;transform:translateY(-6px)}}
.empty{text-align:center;padding:30px;font-weight:600}
.gapnote{margin-top:22px;border:2px dashed var(--ink);padding:12px 16px;font-size:.9rem;background:var(--white)}

/* CONTACT */
.contact{background:var(--blue);color:#fff;border:var(--bd);box-shadow:10px 10px 0 var(--ink);padding:36px}
.mail{display:inline-block;margin:20px 0 26px;font-size:clamp(1.3rem,3.6vw,2.4rem);font-weight:700;background:var(--lime);color:var(--ink);border:var(--bd);padding:6px 18px;word-break:break-all;transition:.12s}
.mail:hover{background:var(--pink);transform:rotate(-1.5deg)}
.form{display:grid;gap:12px;max-width:560px}
.form .btn{justify-self:start}
.note{font-weight:600;min-height:1.4em}

.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:90px;padding:22px 5%;background:var(--ink);color:var(--paper);font:500 .85rem 'Space Mono',monospace}
.foot a:hover{color:var(--lime)}

.rv{opacity:0;transform:translateY(34px);transition:opacity .7s,transform .7s}
.rv.show{opacity:1;transform:none}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:44px}
  .about{grid-template-columns:1fr}
  .menu-btn{display:block}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:var(--bd);padding:10px 5%;display:none}
  .links.open{display:flex}
  .q-body{padding-left:16px}
  .contact{padding:24px}
}

/* FOTO PROFIL */
.photo{position:relative;overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%}

.photo{height:170px;overflow:hidden}
.photo img{max-width:100%!important;max-height:100%!important;width:100%!important;height:100%!important}