/*!
 * style.css - tampilan untuk hasanbasri.dev
 * Dipakai bersama oleh index.html (Inggris) dan id.html (Indonesia).
 * Tanpa framework, tanpa dependensi eksternal.
 */

:root{
  --bg:#f8fafc; --bg-alt:#ffffff; --bg-soft:#f1f5f9;
  --fg:#0f172a; --fg-muted:#475569; --fg-faint:#64748b;
  --line:#e2e8f0; --line-soft:#eef2f7;
  --brand:#0369a1; --brand-soft:#e0f2fe;
  --ai:#6d28d9; --ai-soft:#f3e8ff;
  --ok:#047857; --ok-soft:#d1fae5;
  --rose:#be123c; --rose-soft:#ffe4e6;
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 32px -18px rgba(15,23,42,.35);
  --radius:16px; --maxw:1120px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Consolas,'Liberation Mono',Menlo,monospace;
}
html[data-theme="dark"]{
  --bg:#020617; --bg-alt:#0f172a; --bg-soft:#111f38;
  --fg:#f1f5f9; --fg-muted:#cbd5e1; --fg-faint:#94a3b8;
  --line:#1e293b; --line-soft:#182236;
  --brand:#38bdf8; --brand-soft:#0c2c45;
  --ai:#c4b5fd; --ai-soft:#2a1d4d;
  --ok:#34d399; --ok-soft:#06312a;
  --rose:#fda4af; --rose-soft:#3f1220;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.25; margin:0; letter-spacing:-.02em}
p{margin:0} ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
section{padding-block:clamp(56px,8vw,88px)}
.band{background:var(--bg-alt); border-block:1px solid var(--line)}
.skip{position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; z-index:100; font-weight:600}
.skip:focus{left:0}
.ico{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none}

header.site{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:12px; height:68px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.brand .mark{width:40px; height:40px; border-radius:12px; flex:none; background:linear-gradient(135deg,#0284c7,#7c3aed); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; letter-spacing:.5px}
.brand b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em}
.brand small{display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); font-weight:600}
.nav-links{display:none; gap:24px; align-items:center}
.nav-links a{color:var(--fg-muted); text-decoration:none; font-size:14px; font-weight:500}
.nav-links a:hover,.nav-links a[aria-current="true"]{color:var(--brand)}
.nav-actions{display:flex; align-items:center; gap:8px}
.icon-btn{width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--bg-alt); color:var(--fg-muted); border-radius:11px; cursor:pointer; font-size:17px; transition:color .2s, border-color .2s}
.icon-btn:hover{color:var(--brand); border-color:var(--brand)}
/* Tombol ajakan disembunyikan di layar sempit agar header tidak meluber.
   Spesifisitas sengaja dinaikkan agar tidak tertimpa aturan .btn di bawah. */
.nav-actions .nav-cta{display:none}
@media(min-width:600px){.nav-actions .nav-cta{display:inline-flex}}

/* Pengalih bahasa */
.lang{display:inline-flex; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--bg-alt)}
.lang a{padding:8px 11px; font-size:12px; font-weight:700; text-decoration:none; color:var(--fg-faint); letter-spacing:.04em}
.lang a[aria-current="page"]{background:var(--brand); color:#fff}
html[data-theme="dark"] .lang a[aria-current="page"]{color:#04121f}

#mobile-toggle{display:inline-flex}
#mobile-panel{display:none; border-top:1px solid var(--line); background:var(--bg-alt); padding:8px 20px 18px}
#mobile-panel.open{display:block}
#mobile-panel a{display:block; padding:11px 0; color:var(--fg-muted); text-decoration:none; font-weight:500; border-bottom:1px solid var(--line-soft)}
@media(min-width:960px){.nav-links{display:flex} #mobile-toggle{display:none} #mobile-panel{display:none !important}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:12px; font-size:14px; font-weight:650; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#0369a1,#6d28d9); color:#fff; box-shadow:0 10px 24px -12px rgba(3,105,161,.8)}
.btn-ghost{background:var(--bg-alt); border-color:var(--line); color:var(--fg)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-sm{padding:9px 16px; font-size:13px}
.btn-block{width:100%}

.hero{position:relative; padding-top:clamp(48px,7vw,76px)}
/* Lebar dibatasi 100% agar tidak pernah memicu gulir horizontal di ponsel */
.hero::before{content:""; position:absolute; inset:-10% 0 auto 50%; translate:-50% 0; width:min(760px,100%); height:520px; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at center, rgba(2,132,199,.16), transparent 62%)}
.hero-grid{display:grid; gap:40px}
@media(min-width:980px){.hero-grid{grid-template-columns:1.15fr .85fr; align-items:center; gap:56px}}
.pill{display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px; background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 28%, transparent); font-size:12.5px; font-weight:650}
.dot{width:8px; height:8px; border-radius:50%; background:currentColor; animation:blip 2.2s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
h1{font-size:clamp(30px,4.4vw,44px); font-weight:800; margin:20px 0 16px}
.grad{background:linear-gradient(115deg,#0284c7,#7c3aed 55%,#db2777); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(16px,1.9vw,18px); color:var(--fg-muted); max-width:60ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
.fact{display:flex; gap:11px; align-items:flex-start}
.fact .bx{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; background:var(--brand-soft); color:var(--brand)}
.fact small{display:block; font-size:11.5px; color:var(--fg-faint)}
.fact span{font-size:13px; font-weight:650}

.card{background:var(--bg-alt); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow)}
.profile-card{padding:26px}
.profile-head{display:flex; gap:15px; align-items:center; margin-bottom:20px}
/*
  FOTO PROFIL
*/
.avatar{width:60px; height:60px; border-radius:17px; flex:none; position:relative; background:linear-gradient(135deg,#0284c7,#7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:21px}
.avatar::after{content:""; position:absolute; right:-2px; bottom:-2px; width:15px; height:15px; border-radius:50%; background:#10b981; border:3px solid var(--bg-alt)}
.avatar-img{width:60px; height:60px; border-radius:17px; object-fit:cover; flex:none}
.profile-head h2{font-size:17px}
.profile-head p{font-size:12.5px; color:var(--fg-faint)}
.socials{display:flex; gap:12px; margin-top:8px; font-size:17px}
.socials a{color:var(--fg-faint)}
.socials a:hover{color:var(--brand)}
.kv{background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:14px; padding:14px 16px; display:grid; gap:11px}
.kv-row{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12.5px; color:var(--fg-muted)}
.kv-row span:first-child{display:flex; align-items:center; gap:9px}
.kv-row b{font-weight:650; color:var(--fg); font-size:12px}
.term{margin-top:16px; background:#020617; color:#cbd5e1; border:1px solid #1e293b; border-radius:14px; padding:14px; font-family:var(--mono); font-size:11.5px; line-height:1.85}
.term .bar{display:flex; gap:6px; align-items:center; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid #1e293b; color:#64748b; font-size:10.5px}
.term .bar i{width:9px; height:9px; border-radius:50%; display:inline-block}
.term p{margin:0; word-break:break-word}
.c-green{color:#34d399} .c-blue{color:#38bdf8} .c-purple{color:#c4b5fd} .c-amber{color:#fbbf24} .c-dim{color:#64748b}

.head{text-align:center; max-width:660px; margin:0 auto 46px}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brand)}
.head h2{font-size:clamp(25px,3.6vw,34px); font-weight:800; margin:10px 0 12px}
.head p{color:var(--fg-muted); font-size:15px}
.rule{width:56px; height:3px; border-radius:99px; margin:18px auto 0; background:linear-gradient(90deg,#0284c7,#7c3aed)}

.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.about{display:grid; gap:26px; padding:28px}
@media(min-width:860px){.about{grid-template-columns:1.6fr 1fr; padding:34px; gap:34px}}
.about p{color:var(--fg-muted); margin-bottom:14px}
.quote{border-left:3px solid var(--brand); padding-left:16px; font-style:italic; color:var(--fg-faint); font-size:14.5px; margin-top:20px}
.value{background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:16px; padding:22px}
.value h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; display:flex; gap:9px; align-items:center}
.value li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--fg-muted); margin-bottom:11px}
.value li svg{color:var(--ok); margin-top:4px}

.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-top:34px}
.metric{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center}
.metric b{display:block; font-size:26px; font-weight:800; color:var(--brand); letter-spacing:-.03em}
.metric span{font-size:12.5px; color:var(--fg-faint)}

/* ===== BUKTI KARYA ===== */
.work{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; transition:border-color .2s, transform .2s}
.work:hover{border-color:var(--brand); transform:translateY(-3px)}
.work .bx{width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:15px}
.work h3{font-size:16px; margin-bottom:5px}
.work .role{font-size:12px; color:var(--fg-faint); margin-bottom:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase}
.work p{font-size:13.5px; color:var(--fg-muted); margin-bottom:15px; flex:1}
/* flex:1 hanya untuk paragraf isi, bukan baris peran atau catatan */
.work .role,.work .work-note{flex:none}
.work .tags{margin-bottom:15px}
.work-link{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:650; text-decoration:none; color:var(--brand)}
.work-link:hover{text-decoration:underline}
.work-note{font-size:12.5px; color:var(--fg-faint); font-style:italic}

.tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:34px}
.tab{padding:9px 17px; border-radius:11px; font-size:13px; font-weight:650; cursor:pointer; background:var(--bg-alt); border:1px solid var(--line); color:var(--fg-muted); transition:.2s}
.tab:hover{border-color:var(--brand); color:var(--brand)}
.tab[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:#fff}
html[data-theme="dark"] .tab[aria-pressed="true"]{color:#04121f}
.skill{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.skill-top{display:flex; gap:13px; align-items:center; margin-bottom:13px}
.skill-top .bx{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; flex:none}
.skill-top h3{font-size:15px}
.skill-top small{font-size:11.5px; font-weight:600; color:var(--fg-faint)}
.skill p{font-size:13px; color:var(--fg-muted); margin-bottom:14px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:11px; font-family:var(--mono); padding:4px 9px; border-radius:7px; background:var(--bg-soft); border:1px solid var(--line-soft); color:var(--fg-muted)}
.bx-brand{background:var(--brand-soft); color:var(--brand)}
.bx-ai{background:var(--ai-soft); color:var(--ai)}
.bx-ok{background:var(--ok-soft); color:var(--ok)}
.bx-rose{background:var(--rose-soft); color:var(--rose)}
.toolbar{margin-top:26px; background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between}
.toolbar > b{font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-faint)}

.timeline{position:relative; padding-left:26px; display:grid; gap:24px}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative}
.tl-item::before{content:""; position:absolute; left:-26px; top:22px; width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--bg)}
.tl-card{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.tl-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:6px}
.chip{font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--brand-soft); color:var(--brand); letter-spacing:.03em}
.chip.ai{background:var(--ai-soft); color:var(--ai)}
.chip.rose{background:var(--rose-soft); color:var(--rose)}
.tl-card h3{font-size:17px; margin-bottom:3px}
.tl-card .org{font-size:13px; color:var(--fg-faint); margin-bottom:13px}
.tl-card li{display:flex; gap:10px; font-size:13.5px; color:var(--fg-muted); margin-bottom:9px}
.tl-card li svg{color:var(--brand); margin-top:5px; flex:none}
.foot-line{margin-top:15px; padding-top:14px; border-top:1px solid var(--line-soft)}

.edu{padding:26px}
.edu-top{display:flex; gap:15px; align-items:flex-start; margin-bottom:18px}
.edu-top .bx{width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:21px; flex:none; background:var(--brand-soft); color:var(--brand)}
.edu-top small{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand)}
.edu-top h3{font-size:18px; margin:3px 0}
.edu-top p{font-size:13px; color:var(--fg-faint)}
.edu-body{border-top:1px solid var(--line); padding-top:16px; font-size:13px; color:var(--fg-muted); display:grid; gap:12px}
.badge{padding:4px 11px; border-radius:8px; font-weight:700; font-size:12px; background:var(--ok-soft); color:var(--ok)}
.badge.neutral{background:var(--bg-soft); color:var(--fg-muted)}
.certs{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.cert{display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; padding:10px 15px; border-radius:11px; background:var(--bg-alt); border:1px solid var(--line); color:var(--fg-muted)}

.demo{background:#0b1220; color:#e2e8f0; border-radius:22px; padding:clamp(24px,4vw,38px); display:grid; gap:26px}
@media(min-width:960px){.demo{grid-template-columns:.9fr 1.1fr; align-items:center; gap:36px}}
.demo h2{font-size:clamp(21px,2.8vw,27px); color:#fff; margin:10px 0 12px}
.demo p{color:#94a3b8; font-size:14.5px}
.demo .eyebrow{color:#c4b5fd}
.demo-out{background:#020617; border:1px solid #1e293b; border-radius:16px; padding:18px; font-family:var(--mono); font-size:12px; line-height:1.9; min-height:210px}
.demo-out .bar{display:flex; justify-content:space-between; color:#64748b; font-size:11px; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid #1e293b}
.demo-out p{color:#cbd5e1; margin:0 0 6px; font-size:12px}

.contact-grid{display:grid; gap:22px}
@media(min-width:960px){.contact-grid{grid-template-columns:.85fr 1.15fr; gap:28px; align-items:start}}
.contact-item{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:inherit; transition:border-color .2s}
.contact-item:hover{border-color:var(--brand)}
.contact-item .l{display:flex; gap:14px; align-items:center; min-width:0}
.contact-item .bx{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex:none}
.contact-item small{display:block; font-size:11.5px; color:var(--fg-faint)}
.contact-item b{font-size:13.5px; word-break:break-all}
.note{display:flex; gap:11px; padding:16px 18px; border-radius:var(--radius); background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 22%, transparent); font-size:13px; color:var(--fg-muted)}
.note svg{color:var(--brand); margin-top:3px; flex:none}
form{background:var(--bg-alt); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,3vw,30px); box-shadow:var(--shadow)}
form h3{font-size:17px; display:flex; gap:10px; align-items:center; margin-bottom:6px}
.form-sub{font-size:13px; color:var(--fg-faint); margin-bottom:20px}
.field{margin-bottom:16px}
.two{display:grid; gap:16px}
@media(min-width:620px){.two{grid-template-columns:1fr 1fr}}
label{display:block; font-size:12.5px; font-weight:650; margin-bottom:7px}
input,select,textarea{width:100%; padding:12px 14px; font:inherit; font-size:14px; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:11px; transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--brand); outline:none; box-shadow:0 0 0 3px var(--brand-soft)}
textarea{resize:vertical; min-height:120px}
.hp{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.form-hint{font-size:12px; color:var(--fg-faint); margin-top:12px; text-align:center}

footer.site{background:var(--bg-alt); border-top:1px solid var(--line); padding-block:34px; font-size:13px; color:var(--fg-faint)}
.foot{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
.foot nav{display:flex; flex-wrap:wrap; gap:20px}
.foot a{color:var(--fg-faint); text-decoration:none}
.foot a:hover{color:var(--brand)}

#toast{position:fixed; left:50%; bottom:24px; translate:-50% 140%; z-index:90; display:flex; gap:11px; align-items:center; max-width:min(440px,calc(100vw - 32px)); padding:14px 18px; border-radius:13px; font-size:13.5px; font-weight:600; background:var(--fg); color:var(--bg); box-shadow:0 20px 44px -16px rgba(0,0,0,.5); transition:translate .32s cubic-bezier(.22,1,.36,1), opacity .32s; opacity:0}
#toast.show{translate:-50% 0; opacity:1}
#toast svg{flex:none}