/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  --bg:        #F6F6FB;
  --surface:   #FFFFFF;
  --line:      #E8E8F2;
  --ink:       #15151F;
  --ink-dim:   #5B5B6E;
  --ink-faint: #9494A8;
  --indigo:    #4A3AFF;
  --indigo-ink:#2E22C7;
  --coral:     #FF5D73;
  --mint:      #17B890;
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --sora: "Sora", "Inter", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
  position:relative;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
::selection{ background:var(--indigo); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

.bg-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(640px 420px at 85% -8%, rgba(74,58,255,.14), transparent 60%),
    radial-gradient(520px 360px at -5% 18%, rgba(255,93,115,.10), transparent 60%);
}

/* ── Topbar ──────────────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(22px + var(--safe-t)) clamp(18px,5vw,56px) 0;
  max-width:980px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; background:var(--indigo);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.brand-mark svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; }
.brand-word{ font-family:var(--sora); font-weight:700; font-size:18px; letter-spacing:-.2px; }
.brand-tag{ font-size:12.5px; color:var(--ink-faint); font-weight:500; }
@media (max-width:560px){ .brand-tag{ display:none; } }

/* ── Hero / search ───────────────────────────────────────────────────── */
.app{ max-width:980px; margin:0 auto; padding:0 clamp(18px,5vw,56px) 60px; }
.hero{ text-align:center; padding:56px 0 36px; }
.hero h1{
  font-family:var(--sora); font-weight:700; letter-spacing:-.5px;
  font-size:clamp(26px,4.4vw,42px); line-height:1.12; margin:0 0 14px;
}
.hero p{ color:var(--ink-dim); font-size:15.5px; max-width:460px; margin:0 auto 32px; line-height:1.6; }

.search-row{
  display:flex; gap:10px; max-width:460px; margin:0 auto; align-items:stretch;
}
.input-wrap{
  flex:1; display:flex; align-items:center; background:var(--surface);
  border:1.5px solid var(--line); border-radius:999px; padding:0 4px 0 20px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-wrap:focus-within{ border-color:var(--indigo); box-shadow:0 0 0 4px rgba(74,58,255,.10); }
.input-prefix{ color:var(--ink-faint); font-weight:600; font-size:15px; }
#usernameInput{
  flex:1; border:0; outline:0; background:transparent; padding:15px 10px;
  font-size:15px; color:var(--ink); min-width:0;
}
#usernameInput::placeholder{ color:var(--ink-faint); }

.btn-submit{
  flex-shrink:0; border:0; cursor:pointer; background:var(--indigo); color:#fff;
  border-radius:999px; padding:0 26px; font-weight:700; font-size:14.5px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease, transform .12s ease;
}
.btn-submit:hover{ background:var(--indigo-ink); }
.btn-submit:active{ transform:scale(.97); }
.btn-submit:disabled{ opacity:.7; cursor:default; }
.btn-spinner{
  width:15px; height:15px; display:none; animation:spin .8s linear infinite;
  fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-dasharray:46; stroke-dashoffset:34;
}
.btn-submit.is-loading .btn-label{ display:none; }
.btn-submit.is-loading .btn-spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:480px){
  .search-row{ flex-direction:column; }
  .btn-submit{ padding:14px 0; }
}

/* ── Result zone ─────────────────────────────────────────────────────── */
.result-zone{ min-height:40px; }

.state-panel{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:40px 24px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); max-width:520px; margin:0 auto;
}
.state-panel.is-error{ border-color:#FFD9DE; background:#FFF6F7; }
.state-icon{
  width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:var(--line); color:var(--ink-dim); margin-bottom:4px;
}
.state-panel.is-error .state-icon{ background:#FFE3E7; color:var(--coral); }
.state-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.state-title{ font-family:var(--sora); font-weight:700; font-size:17px; }
.state-sub{ color:var(--ink-dim); font-size:13.5px; max-width:360px; line-height:1.55; }

/* profile card skeleton */
.profile-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  max-width:560px; margin:0 auto; overflow:hidden; box-shadow:0 20px 50px -24px rgba(21,21,31,.18);
}
.profile-top{ display:flex; gap:20px; align-items:center; padding:30px 28px 22px; }
.avatar-wrap{
  width:92px; height:92px; border-radius:999px; flex-shrink:0; overflow:hidden;
  background:var(--line); display:flex; align-items:center; justify-content:center;
  border:3px solid var(--surface); box-shadow:0 0 0 2px var(--line);
}
.avatar-wrap img{ width:100%; height:100%; object-fit:cover; }
.avatar-fallback{ font-family:var(--sora); font-weight:700; font-size:28px; color:var(--ink-faint); }

.profile-id{ min-width:0; }
.profile-name-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.profile-fullname{ font-family:var(--sora); font-weight:700; font-size:18px; line-height:1.25; }
.badge-verified{
  width:16px; height:16px; flex-shrink:0; color:var(--indigo);
}
.badge-verified svg{ width:100%; height:100%; fill:currentColor; }
.profile-username{ color:var(--ink-dim); font-size:13.5px; margin-top:2px; }
.badge-private{
  display:inline-flex; align-items:center; gap:4px; margin-top:8px;
  background:var(--line); color:var(--ink-dim); font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:999px;
}
.badge-private svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.2; }

.stat-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat-cell{ text-align:center; padding:18px 8px; border-left:1px solid var(--line); }
.stat-cell:first-child{ border-left:0; }
.stat-value{ font-family:var(--sora); font-weight:700; font-size:19px; letter-spacing:-.2px; }
.stat-label{ color:var(--ink-faint); font-size:11.5px; margin-top:3px; text-transform:uppercase; letter-spacing:.4px; }

.profile-bio{
  padding:22px 28px 28px; color:var(--ink); font-size:14px; line-height:1.7; white-space:pre-wrap; word-break:break-word;
}
.profile-bio:empty::after{ content:"Tidak ada bio."; color:var(--ink-faint); font-style:italic; }
.profile-bio a{ color:var(--indigo); font-weight:600; text-decoration:none; }
.profile-bio a:hover{ text-decoration:underline; }

/* skeleton loading state */
.skeleton{ background:linear-gradient(100deg, var(--line) 30%, #F0F0F8 50%, var(--line) 70%); background-size:200% 100%; animation:shimmer 1.3s ease-in-out infinite; }
@keyframes shimmer{ 0%{background-position:180% 0;} 100%{background-position:-20% 0;} }
.skel-avatar{ width:92px; height:92px; border-radius:999px; flex-shrink:0; }
.skel-line{ height:13px; border-radius:6px; }

.site-footer{ text-align:center; color:var(--ink-faint); font-size:11.5px; padding:28px 20px 40px; max-width:520px; margin:0 auto; line-height:1.6; }

@media (max-width:480px){
  .profile-top{ flex-direction:column; text-align:center; padding:28px 20px 18px; }
  .profile-name-row{ justify-content:center; }
  .stat-cell{ padding:16px 4px; }
}