/* ===== Tokens ===== */
:root{
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg:#0b1220; --panel:#0f172a; --edge:#1f2937;
  --text:#e6edf3; --muted:#9aa4b2;
  --primary:#7c3aed; --secondary:#06b6d4; --accent:#22d3ee;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --ring: 0 0 0 2px var(--accent);

  /* layout scaling */
  --wrap: min(1200px, 92vw);
  --px: clamp(12px, 2.5vw, 24px);
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.6}

/* ===== Themes ===== */
html[data-theme="techno"]{
  --bg: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.2), transparent),
        radial-gradient(1200px 600px at 90% 110%, rgba(34,211,238,.12), transparent),
        #0b1220;
  --panel:#0f172a; --text:#e6edf3; --muted:#9aa4b2;
  --primary:#7c3aed; --secondary:#06b6d4; --accent:#22d3ee;
}
html[data-theme="terminal"]{ --bg:#0a0f0a; --panel:#0c140c; --text:#e5ffe8; --muted:#89c9a3; --primary:#00ff88; --secondary:#00d1b2; --accent:#00ffa3; }
html[data-theme="quartz"]  { --bg:#0b0c10; --panel:#12131a; --text:#eaeaea; --muted:#aaaaaa; --primary:#a78bfa; --secondary:#60a5fa; --accent:#f472b6; }
html[data-theme="light"]   { --bg:#ffffff; --panel:#f7f8fa; --text:#0b1220; --muted:#64748b; --primary:#4f46e5; --secondary:#06b6d4; --accent:#0ea5e9; }
html[data-theme="solar"]   { --bg:#fdf6e3; --panel:#f5efdb; --text:#073642; --muted:#586e75; --primary:#b58900; --secondary:#2aa198; --accent:#268bd2; }

/* ===== Layout ===== */
.container{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--px);
  padding-right:var(--px);
  padding-top:24px;
  padding-bottom:24px;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px var(--px);border-bottom:1px solid var(--edge);background:rgba(0,0,0,.06)}
.brand{font-weight:800;letter-spacing:.5px}
.brand .mono{font-family:var(--font-mono);opacity:.85}
.actions{display:flex;gap:18px;align-items:center}
.links a{color:var(--text);text-decoration:none;opacity:.85;margin-left:12px}
.links a:hover{opacity:1;text-decoration:underline}

/* ==== Sticky Footer Root ==== */
#app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:3;
}
#app > main.container{ flex:1 0 auto; }

/* ===== A11y helper ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Theme dropdown ===== */
.theme-select{
  appearance:none; -webkit-appearance:none;
  font:600 12px/1 var(--font-sans);
  padding:10px 36px 10px 12px;
  border-radius:10px; border:1px solid var(--edge);
  background:var(--panel); color:var(--text);
  background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                    linear-gradient(135deg,var(--muted) 50%,transparent 50%),
                    linear-gradient(to right,transparent,transparent);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px), 100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat: no-repeat;
}
.theme-select:focus{outline:none; box-shadow: var(--ring);}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:56px var(--px);border-bottom:1px solid var(--edge)}
.hero-inner{
  max-width:var(--wrap);
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero .cta{ justify-content:center; }
.hero .counters{ justify-content:center; }

.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.1;margin:0 0 10px 0;font-weight:800}
.subtitle{opacity:.85;margin-bottom:18px}

/* ==== ADDED: Techno Neon + Glitch Title ==== */
.hero .techno-title{
  position:relative;
  font-weight:900;
  letter-spacing:.5px;
  line-height:1.07;
  background: linear-gradient(90deg, var(--primary), var(--accent) 30%, #ffffff 50%, var(--secondary) 70%, var(--primary));
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: techno-shine 6s ease-in-out infinite;
  text-shadow:
    0 0 10px rgba(124,58,237,.28),
    0 0 24px rgba(34,211,238,.20);
}
.hero .techno-title::before,
.hero .techno-title::after{
  content: attr(data-text);
  position:absolute; inset:0;
  pointer-events:none; mix-blend-mode:screen;
}
.hero .techno-title::before{
  text-shadow: -2px 0 var(--secondary);
  clip-path: inset(0 0 85% 0);
  animation: techno-glitch 2.6s infinite linear alternate;
}
.hero .techno-title::after{
  text-shadow: 2px 0 var(--primary);
  clip-path: inset(65% 0 0 0);
  animation: techno-glitch 3.1s infinite linear alternate-reverse;
}
/* cursor kedip */
.hero .caret{
  display:inline-block;
  width:.08em; height:1em; margin-left:.12em; vertical-align:-.06em;
  background: var(--accent);
  box-shadow:0 0 6px rgba(34,211,238,.9), 0 0 14px rgba(124,58,237,.6);
  animation: caret-blink 1s steps(1,end) infinite;
  border-radius:1px;
}
/* scanline tipis melintas */
.hero .techno-title .scan{
  position:absolute; left:0; right:0; top:0; height:100%;
  pointer-events:none; overflow:hidden;
}
.hero .techno-title .scan::before{
  content:""; position:absolute; left:-10%; top:0; bottom:0; width:20%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  filter: blur(1px);
  animation: scan-pass 4.5s ease-in-out infinite;
}
/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero .techno-title,
  .hero .techno-title::before,
  .hero .techno-title::after,
  .hero .caret,
  .hero .techno-title .scan::before{
    animation: none !important;
  }
}

/* keyframes */
@keyframes techno-shine{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes caret-blink{ 50%{opacity:0} }
@keyframes scan-pass{ 0%{transform:translateX(-120%)} 100%{transform:translateX(520%)} }
@keyframes techno-glitch{
  0%{transform:translate(0,0); clip-path: inset(0 0 85% 0); opacity:.85}
  10%{transform:translate(-1px,1px); clip-path: inset(10% 0 70% 0)}
  20%{transform:translate(1px,-1px); clip-path: inset(80% 0 5% 0)}
  30%{transform:translate(1px,0); clip-path: inset(40% 0 40% 0)}
  40%{transform:translate(-2px,0); clip-path: inset(5% 0 85% 0)}
  50%{transform:translate(0,2px); clip-path: inset(60% 0 25% 0)}
  60%{transform:translate(-1px,-1px); clip-path: inset(20% 0 65% 0)}
  70%{transform:translate(2px,1px); clip-path: inset(75% 0 10% 0)}
  80%{transform:translate(0,-2px); clip-path: inset(35% 0 45% 0)}
  90%{transform:translate(-1px,0); clip-path: inset(15% 0 70% 0)}
  100%{transform:translate(0,0); clip-path: inset(0 0 85% 0)}
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;
  padding: clamp(10px,1.8vw,12px) clamp(14px,2.4vw,16px);
  font-weight:700;
  font-size: clamp(13px,1.6vw,14px);
  border:1px solid var(--edge);text-decoration:none
}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;border:0}
.btn.ghost{background:transparent;color:var(--text)}
.btn:hover{transform:translateY(-1px)}
.btn .icon{display:inline-flex;line-height:0}
.btn .icon svg{width:18px;height:18px}
.cta{display:flex;gap:12px;margin:18px 0 28px}
.counters{display:flex;gap:28px}
.counter .num{font-size:28px;font-weight:800}
.counter .label{font-size:12px;opacity:.7;margin-top:2px}

/* ===== Watermark bergerak ===== */
.watermark{
  pointer-events:none;position:absolute;bottom:-10px;left:0;right:0;white-space:nowrap;
  font-family:var(--font-mono);font-weight:800;opacity:.06;font-size:96px;line-height:1;
  transform:translateX(0);animation:scrollx 24s linear infinite
}
@keyframes scrollx { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ===== Generic Cards ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:18px}
.card:hover{transform:translateY(-2px);transition:.2s}
.card .title{font-weight:700;font-size:18px}
.card .meta{font-size:12px;color:var(--muted);margin-top:4px}
.card .desc{font-size:14px;margin-top:8px;color:var(--text)}

/* ===== Footer (centered) ===== */
.footer{
  margin-top:auto;
  border-top:1px solid var(--edge);
  padding:12px 16px;
  color:var(--muted);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  text-align:center;
}
.footer a{color:inherit}
@media (min-width:900px){
  .footer.split{justify-content:space-between;text-align:left}
}

/* ===== Repo detail ===== */
.crumb{font-family: var(--font-mono); opacity:.9}
.crumb a{color:var(--text);text-decoration:none;opacity:.85}
.crumb a:hover{opacity:1;text-decoration:underline}
.chip2{font:600 11px/1 var(--font-sans); padding:7px 10px; border-radius:999px;
       border:1px solid var(--edge); background:var(--panel); color:var(--text)}
.zipbtn{display:inline-flex;align-items:center; gap:8px}
.file a{color:var(--text); text-decoration:none}
.file a:hover{text-decoration:underline}
.timestamp{color:var(--muted); font-size:12px}

/* ==== Card headers (untuk tombol ZIP di Files) ==== */
.card.section .card-head,
.card.info .card-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--edge)
}
.card .head-left{display:flex;gap:10px;align-items:center}
.btn-sm{padding:8px 12px;border-radius:10px;font-weight:700}

/* README area */
.markdown{
  background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:18px;
  max-width:75ch;
}
.markdown h1,.markdown h2,.markdown h3{margin-top:18px}
.markdown pre{background:#0b0c10; color:#eaeaea; padding:12px; border-radius:10px; overflow:auto}
.markdown code{font-family: var(--font-mono)}
.markdown img{max-width:100%; height:auto; border-radius:10px; border:1px solid var(--edge)}
.markdown video{width:100%;max-height:70vh;border-radius:10px;border:1px solid var(--edge);display:block;margin:10px 0;background:#000}
.md-embed{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;border:1px solid var(--edge);margin:12px 0;background:#000}
.md-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero h1{font-size:36px}
}
@media (max-width: 768px){
  .nav{flex-wrap:wrap; gap:10px}
  .actions{width:100%; justify-content:space-between}
  .hero{padding:36px var(--px)}
  .container{padding-left:var(--px);padding-right:var(--px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

  /* Header repo: tombol download full width & pindah baris */
  .repo-actions{ grid-column: 1 / -1; margin-top:10px; display:flex; }
  .repo-actions .btn{ width:100%; justify-content:center }
  .repo-header{ grid-template-columns:42px 1fr; }
}
@media (max-width: 640px){
  /* kalau makin kecil, rapikan spacing */
  .repo-header{grid-template-columns:32px 1fr;gap:10px}
}
@media (max-width: 600px){
  /* Files card: tombol ZIP full-width di bawah judul */
  .card.section .card-head{flex-wrap:wrap}
  .card.section .card-head .head-left{width:100%;justify-content:space-between}
  .card.section .card-head .btn{width:100%;order:2}
}
@media (max-width: 480px){
  .hero h1{font-size:28px}
  .counters{gap:16px}
  .watermark{font-size:72px}
}

/* ===== Background techno animated overlay + network ===== */
#netbg{position:fixed; inset:0; z-index:1; pointer-events:none}
body::before,
body::after{content:""; position:fixed; inset:0; pointer-events:none}

/* grid halus (fade-out dekat footer) */
body::before{
  z-index:0;
  background:
    repeating-linear-gradient(0deg,   rgba(255,255,255,.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,.02) 0 1px, transparent 1px 80px);
  animation: pan-grid 60s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}
@keyframes pan-grid{ from{background-position:0 0,0 0} to{background-position:2000px 0,0 2000px} }

/* sweep glow (fade-out dekat footer) */
body::after{
  z-index:2;
  background:
    radial-gradient(600px 300px at 10% -10%, rgba(124,58,237,.14), transparent 60%),
    radial-gradient(600px 300px at 90% 110%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient( to bottom, transparent 0%, rgba(255,255,255,.02) 50%, transparent 100% );
  background-blend-mode: screen;
  mix-blend-mode: screen;
  animation: sweep 10s linear infinite;
  opacity:.5;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
}
@keyframes sweep{ 0%{transform:translateY(-120%)} 100%{transform:translateY(120%)} }

/* ===== Explore: Repo Cards (solid, anti-belang) ===== */
.searchbar{display:flex;gap:10px;margin-bottom:16px}
.searchbar input{
  flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);
  background:var(--panel);color:var(--text)
}

/* grid container – default 1 kolom */
.repo-grid{display:grid;gap:16px;grid-template-columns:1fr;grid-auto-rows:1fr}
/* ≥ 720px → 2 kolom */
@media (min-width:720px){ .repo-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ≥ 1100px → 3 kolom */
@media (min-width:1100px){ .repo-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* ≥ 1480px → 4 kolom */
@media (min-width:1480px){ .repo-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* kartu solid */
.repo-grid > a.repo-card,
.repo-grid > a.repo-card:visited{
  display:flex;flex-direction:column;min-height:220px;
  text-decoration:none !important;color:var(--text);
  position:relative;overflow:hidden;
  padding:18px;border-radius:16px;background:var(--panel);
  border:1px solid var(--edge);transition:.25s ease;
}
.repo-grid > a.repo-card::before{ content:none }
.repo-grid > a.repo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(124,58,237,.35) inset;
  border-color: rgba(124,58,237,.45);
}

/* isi kartu */
.repo-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.repo-card__title{font-weight:800;font-size:18px}
.pill{font:700 11px/1 var(--font-sans);padding:6px 10px;border-radius:999px;border:1px solid var(--edge);opacity:.85;background:rgba(255,255,255,.02)}
.repo-card__meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;margin-bottom:8px}
.repo-card__meta .slug{font-family:var(--font-mono);opacity:.9}
.repo-card__desc{color:var(--text);opacity:.95}
.repo-card__desc.muted{opacity:.6}
.repo-card__footer{display:flex;gap:16px;margin-top:auto;color:var(--muted);font-size:12px}
.repo-card__footer .stat{display:inline-flex;gap:6px;align-items:center}
.repo-card__footer .stat svg{width:16px;height:16px}
.repo-card a{color:inherit;text-decoration:none}
.repo-card a:hover{text-decoration:underline}

/* ===== Repo page layout (desktop 2 kolom) ===== */
.repo-header{
  display:grid;grid-template-columns:42px 1fr auto;
  gap:14px;align-items:center;
  max-width:var(--wrap);margin:0 auto 16px;
  padding-left:var(--px);padding-right:var(--px);
}
.repo-icon{display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--edge);background:var(--panel);width:42px;height:42px}
.repo-title{margin:2px 0 4px 0;font-size:clamp(22px,2.2vw,34px)}
.repo-sub{display:flex;gap:8px;align-items:center}
.repo-actions .btn{white-space:nowrap}

.repo-two-col{
  display:grid;gap:20px;align-items:start;
  max-width:var(--wrap);margin:0 auto;
  padding-left:var(--px);padding-right:var(--px);
  grid-template-columns: 1fr;  /* mobile */
}
@media (min-width:980px){
  .repo-two-col{ grid-template-columns: minmax(0,1fr) min(34vw, 360px); }
}
@media (min-width:1400px){
  .repo-two-col{ grid-template-columns: minmax(0,740px) 380px; }
}
.repo-two-col .column.side .file-list{list-style:none;margin:10px 0 0 0;padding:0}
.repo-two-col .card{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:18px}


/* Repo layout & wrapping (safe override) */
.repo-two-col{display:grid;gap:20px;align-items:start;max-width:var(--wrap);margin:0 auto;padding:0 var(--px);grid-template-columns:1fr}
@media(min-width:980px){.repo-two-col{grid-template-columns:minmax(0,1fr) 360px}}
@media(min-width:1400px){.repo-two-col{grid-template-columns:minmax(0,740px) 400px}}
.card.info .meta{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.card.info code{display:block;padding:.25rem .45rem;border-radius:.35rem;background:rgba(255,255,255,.05)}
.file-list{margin:10px 0 0 0}
.file-list li{margin:.25rem 0}