/* ===== FAKHRICON UPGRADE KIT ===== */

/* 1) Navbar kaca (glassmorphism) + glow halus */
header, .navbar {
  position: sticky; top: 0; z-index: 999;
  background: rgba(10,16,28,.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(56,210,240,.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}

/* 2) Link navbar: underline neon tumbuh dari kiri */
nav a:not(:has(img)), .nav-links a, .navbar a:not(:has(img)) {
  position: relative; transition: color .25s, text-shadow .25s;
}
nav a:not(:has(img))::after, .nav-links a::after, .navbar a:not(:has(img))::after {
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px;
  border-radius:2px; background:linear-gradient(90deg,#22d3ee,#a78bfa);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.65,.05,.36,1);
}
nav a:not(:has(img)):hover, .navbar a:not(:has(img)):hover {
  color:#7dd3fc; text-shadow:0 0 12px rgba(56,210,240,.6);
}
nav a:not(:has(img)):hover::after, .navbar a:not(:has(img)):hover::after { transform:scaleX(1); }

/* 3) Logo: background gradien cyan→ungu + glow (sudut transparan ikut cantik) */
nav img, .navbar img, .logo img {
  border-radius:12px;
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(167,139,250,.18));
  box-shadow:0 0 0 1px rgba(56,210,240,.35), 0 0 18px rgba(34,211,238,.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
nav img:hover, .navbar img:hover {
  transform:rotate(-6deg) scale(1.08);
  box-shadow:0 0 0 1px rgba(56,210,240,.6), 0 0 26px rgba(34,211,238,.45);
}

/* 4) Badge PELANGI otomatis (nth-child = tiap badge warna beda!) */
.badges > * { transition:transform .25s ease, box-shadow .25s ease; }
.badges > *:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.badges > *:nth-child(5n+1){border-color:#22d3ee;color:#67e8f9;background:rgba(34,211,238,.08);}
.badges > *:nth-child(5n+2){border-color:#a78bfa;color:#c4b5fd;background:rgba(167,139,250,.08);}
.badges > *:nth-child(5n+3){border-color:#f472b6;color:#f9a8d4;background:rgba(244,114,182,.08);}
.badges > *:nth-child(5n+4){border-color:#fbbf24;color:#fcd34d;background:rgba(251,191,36,.08);}
.badges > *:nth-child(5n+5){border-color:#34d399;color:#6ee7b7;background:rgba(52,211,153,.08);}

/* 5) Tombol: minimalis, smooth, terangkat saat hover */
.btn, .hero a[class*="btn"] {
  border-radius:12px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover, .hero a[class*="btn"]:hover { transform:translateY(-2px); }
.btn-primary { box-shadow:0 6px 24px rgba(34,211,238,.35); }

/* 6) Animasi masuk hero berurutan (stagger fade-up) */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
.hero > * { animation:fadeUp .7s ease both; }
.hero > *:nth-child(1){animation-delay:.05s} .hero > *:nth-child(2){animation-delay:.15s}
.hero > *:nth-child(3){animation-delay:.25s} .hero > *:nth-child(4){animation-delay:.35s}
.hero > *:nth-child(5){animation-delay:.45s} .hero > *:nth-child(6){animation-delay:.55s}

/* 7) Scroll halus */
html { scroll-behavior:smooth; }

/* ===== v2: brand bersih + efek mewah ===== */
nav a:has(img), .brand, .logo {
  background:transparent!important; border:none!important;
  box-shadow:none!important; padding:0!important;
}
nav img, .brand img, .logo img {
  padding:0!important; border:none!important;
  background:transparent!important; box-shadow:none!important;
  border-radius:10px;
  filter: drop-shadow(0 0 10px rgba(34,211,238,.5));
  transition: transform .3s ease, filter .3s ease;
}
nav img:hover, .brand img:hover {
  transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 0 18px rgba(34,211,238,.85));
}
/* Tulisan brand: gradien berjalan (shimmer) */
.brand *:not(img), .logo *:not(img), nav a:has(img) *:not(img) {
  background: linear-gradient(90deg,#f0fbff 0%,#22d3ee 25%,#a78bfa 50%,#22d3ee 75%,#f0fbff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* ===== FORCE ZERO GAP pada brand ===== */
.brand, .brand a, .logo, .logo a,
nav a:has(img), nav .brand-text,
a[href="/"] {
  gap: 0 !important;
  column-gap: 0 !important;
  letter-spacing: normal !important;
  word-spacing: 0 !important;
}
.brand span, .brand a span,
.logo span, .logo a span,
nav span, a[href="/"] span {
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== v3 CYBERPUNK MINIMALIST (scope: stats, about, skills, journey) ===== */

/* [1] STATS STRIP — counter holografik + sweep shine */
#stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
#stats .stat {
  background:linear-gradient(160deg,rgba(34,211,238,.07),rgba(10,16,28,.65));
  border:1px solid rgba(56,210,240,.16); border-radius:14px;
  padding:24px 12px; text-align:center; position:relative; overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
#stats .stat::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(34,211,238,.14) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .6s ease;
}
#stats .stat:hover::after { transform:translateX(100%); }
#stats .stat:hover { transform:translateY(-4px); border-color:rgba(34,211,238,.55); box-shadow:0 12px 32px rgba(34,211,238,.16); }
#stats .num {
  font-family:'JetBrains Mono',monospace; font-size:2.3rem; font-weight:700;
  background:linear-gradient(90deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#stats .lbl { letter-spacing:2.5px; text-transform:uppercase; font-size:.68rem; color:#6f93a5; }

/* [2] Grid holografik latar (hanya about & journey) */
#about, section:has(.tl) { position:relative; }
#about::before, section:has(.tl)::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(34,211,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 25%,transparent 75%);
  mask-image:radial-gradient(ellipse at center,black 25%,transparent 75%);
}

/* [3] Judul section: mono + glow neon */
#about .sec-title, section:has(.chip):not(.hero) .sec-title, section:has(.tl) .sec-title { font-family:'JetBrains Mono',monospace; }
#about .sec-title span, section:has(.chip):not(.hero) .sec-title span, section:has(.tl) .sec-title span { color:#22d3ee; text-shadow:0 0 20px rgba(34,211,238,.55); }

/* [4] Kartu ABOUT = dossier cyber */
#about .glass {
  background:rgba(10,16,28,.6); border:1px solid rgba(56,210,240,.18);
  backdrop-filter:blur(12px); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.45);
  transition:transform .35s ease,border-color .35s ease;
}
#about .glass:hover { transform:translateY(-4px); border-color:rgba(34,211,238,.4); }
#about [class*="ava"] { box-shadow:0 0 34px rgba(167,139,250,.45); }

/* [5] SKILL cards + chip neon tiga-warna */
section:has(.chip):not(.hero) .glass {
  background:rgba(10,16,28,.55); border:1px solid rgba(56,210,240,.16);
  backdrop-filter:blur(12px); border-radius:18px;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
section:has(.chip):not(.hero) .glass:hover { transform:translateY(-5px); border-color:rgba(34,211,238,.45); box-shadow:0 18px 44px rgba(34,211,238,.12); }
section:has(.chip):not(.hero) .chip {
  background:rgba(34,211,238,.05); border:1px solid rgba(56,210,240,.28); border-radius:8px;
  font-family:'JetBrains Mono',monospace; font-size:.78rem; transition:all .25s ease;
}
section:has(.chip):not(.hero) .chip:hover { transform:translateY(-2px); background:rgba(34,211,238,.14); border-color:#22d3ee; box-shadow:0 0 16px rgba(34,211,238,.35); }
section:has(.chip):not(.hero) .chip:nth-child(3n+2) { border-color:rgba(167,139,250,.35); }
section:has(.chip):not(.hero) .chip:nth-child(3n+2):hover { border-color:#a78bfa; background:rgba(167,139,250,.12); box-shadow:0 0 16px rgba(167,139,250,.4); }
section:has(.chip):not(.hero) .chip:nth-child(3n) { border-color:rgba(52,211,153,.35); }
section:has(.chip):not(.hero) .chip:nth-child(3n):hover { border-color:#34d399; background:rgba(52,211,153,.12); box-shadow:0 0 16px rgba(52,211,153,.4); }

/* [6] JOURNEY = sirkuit neon berjalan */
.tl { position:relative; padding-left:38px; transition:transform .3s ease; }
.tl:hover { transform:translateX(6px); }
.tl::before {
  content:""; position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:50%;
  background:#0a101c; border:2px solid #22d3ee; box-shadow:0 0 14px rgba(34,211,238,.8);
  transition:background .3s ease,box-shadow .3s ease;
}
.tl:hover::before { background:#22d3ee; box-shadow:0 0 22px rgba(34,211,238,1); }
.tl::after {
  content:""; position:absolute; left:6px; top:24px; bottom:-22px; width:2px;
  background:linear-gradient(180deg,rgba(34,211,238,.55),rgba(167,139,250,.15));
}
.tl:last-of-type::after { display:none; }
.tl h4 { font-family:'JetBrains Mono',monospace; color:#e2f6ff; }

/* ===== v4 CONTACT — CYBERPUNK MINIMALIST (scope: form ber-textarea SAJA) ===== */

/* [1] Latar halaman: grid holografik fixed */
body:has(form textarea)::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(34,211,238,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 80%);
  mask-image:radial-gradient(ellipse at center,black 20%,transparent 80%);
}

/* [2] Kartu = dossier cyber + bracket sudut neon */
div:has(> form:has(textarea)), .glass:has(textarea), [class*="contact"]:has(textarea) {
  position:relative;
  background:rgba(10,16,28,.72)!important;
  border:1px solid rgba(56,210,240,.22)!important;
  backdrop-filter:blur(14px);
  border-radius:16px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 40px rgba(34,211,238,.06)!important;
}
div:has(> form:has(textarea))::before, .glass:has(textarea)::before {
  content:""; position:absolute; top:10px; left:10px; width:26px; height:26px;
  border-style:solid; border-color:#22d3ee; border-width:2px 0 0 2px;
  border-radius:6px 0 0 0; pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(34,211,238,.8));
}
div:has(> form:has(textarea))::after, .glass:has(textarea)::after {
  content:""; position:absolute; bottom:10px; right:10px; width:26px; height:26px;
  border-style:solid; border-color:#a78bfa; border-width:0 2px 2px 0;
  border-radius:0 0 6px 0; pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(167,139,250,.8));
}

/* [3] Judul: mono sinematik */
div:has(> form:has(textarea)) h1, div:has(> form:has(textarea)) h2,
.glass:has(textarea) h1, .glass:has(textarea) h2 {
  font-family:'JetBrains Mono',monospace!important; letter-spacing:-.5px;
}

/* [4] Label = prompt terminal: "> YOUR NAME" */
form:has(textarea) label {
  font-family:'JetBrains Mono',monospace; font-size:.72rem;
  letter-spacing:1.5px; text-transform:uppercase; color:#67e8f9;
}
form:has(textarea) label::before { content:"> "; color:#a78bfa; }

/* [5] Input & textarea neon + focus glow */
form:has(textarea) input, form:has(textarea) textarea {
  background:rgba(8,13,24,.8)!important;
  border:1px solid rgba(56,210,240,.2)!important;
  border-radius:10px!important; color:#e2f6ff!important;
  font-family:'JetBrains Mono',monospace;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
form:has(textarea) input:focus, form:has(textarea) textarea:focus {
  outline:none; border-color:#22d3ee!important;
  box-shadow:0 0 0 3px rgba(34,211,238,.15),0 0 18px rgba(34,211,238,.25);
  background:rgba(10,18,32,.9)!important;
}
form:has(textarea) input::placeholder, form:has(textarea) textarea::placeholder { color:#4d6b7a; }

/* [6] Tombol Send: gradien neon + sweep shine */
form:has(textarea) button {
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,#22d3ee,#67e8f9)!important;
  border:none!important; border-radius:10px!important;
  font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:1px;
  color:#06121c!important;
  box-shadow:0 8px 28px rgba(34,211,238,.35)!important;
  transition:transform .25s ease,box-shadow .25s ease;
}
form:has(textarea) button::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
}
form:has(textarea) button:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(34,211,238,.5)!important; }
form:has(textarea) button:hover::after { animation:btnSweep .7s ease; }
@keyframes btnSweep { to { transform:translateX(100%); } }

/* [7] Catatan keamanan & link pulang */
div:has(> form:has(textarea)) p, .glass:has(textarea) p { color:#5d7f8f; font-size:.78rem; }
div:has(> form:has(textarea)) a, .glass:has(textarea) a {
  font-family:'JetBrains Mono',monospace; color:#22d3ee; text-decoration:none;
  transition:color .25s ease,text-shadow .25s ease;
}
div:has(> form:has(textarea)) a:hover, .glass:has(textarea) a:hover {
  color:#67e8f9; text-shadow:0 0 14px rgba(34,211,238,.7);
}

/* ===== v5 ABOUT — CYBER ID-CARD + DOSSIER ===== */
#about .about-grid { display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start; }
@media (max-width:900px){ #about .about-grid { grid-template-columns:1fr; } }

#about .id-card {
  text-align:center; padding:30px 20px; position:relative; overflow:hidden;
  background:linear-gradient(165deg,rgba(34,211,238,.08),rgba(10,16,28,.78));
  border:1px solid rgba(56,210,240,.22); border-radius:18px;
  backdrop-filter:blur(12px); box-shadow:0 24px 60px rgba(0,0,0,.45);
}
#about .id-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#22d3ee,#a78bfa,#22d3ee);
}
#about .id-avatar {
  width:96px; height:96px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:44px;
  background:radial-gradient(circle at 30% 30%,#12203a,#0a101c);
  box-shadow:0 0 0 3px rgba(34,211,238,.5),0 0 30px rgba(34,211,238,.35);
}
#about .id-name { font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:2px; color:#e2f6ff; }
#about .id-role { font-size:.78rem; color:#67e8f9; letter-spacing:1px; margin-top:4px; }
#about .id-meta { display:flex; flex-direction:column; gap:6px; margin:16px 0; font-size:.8rem; color:#8fb3c2; font-family:'JetBrains Mono',monospace; }
#about .id-status {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:2px;
  color:#34d399; border:1px solid rgba(52,211,153,.4);
  padding:6px 12px; border-radius:999px; background:rgba(52,211,153,.08);
}
#about .id-status i { width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 10px #34d399; animation:pulse 2s infinite; }

#about .about-text {
  position:relative; padding:30px 34px;
  background:rgba(10,16,28,.55); border:1px solid rgba(56,210,240,.16);
  border-radius:18px; backdrop-filter:blur(12px); box-shadow:0 24px 60px rgba(0,0,0,.4);
}
#about .about-text::before {
  content:""; position:absolute; left:0; top:24px; bottom:24px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,#22d3ee,#a78bfa); box-shadow:0 0 14px rgba(34,211,238,.5);
}
#about .about-text p { color:#b9cfda; line-height:1.85; margin-bottom:1.1rem; }
#about .about-text p.lead { font-family:'JetBrains Mono',monospace; font-size:1.25rem; color:#e2f6ff; }
#about .about-text p.lead strong { color:#22d3ee; text-shadow:0 0 16px rgba(34,211,238,.5); }
#about .hl-cyan { color:#67e8f9; font-style:normal; font-weight:600; }
#about .hl-purple { color:#c4b5fd; font-style:normal; font-weight:600; }
#about .hl-gold { color:#fcd34d; font-style:normal; font-weight:600; }
#about .hl-red { color:#fda4af; font-style:normal; font-weight:600; }
#about .about-text code {
  font-family:'JetBrains Mono',monospace; font-size:.82em;
  background:rgba(34,211,238,.08); border:1px solid rgba(56,210,240,.25);
  padding:2px 8px; border-radius:6px; color:#67e8f9; margin:0 2px;
  transition:all .2s ease;
}
#about .about-text code:hover { background:rgba(34,211,238,.18); box-shadow:0 0 12px rgba(34,211,238,.3); }
#about .foot-chip {
  display:inline-block; margin-top:6px; font-size:.8rem; color:#8fb3c2;
  border:1px dashed rgba(56,210,240,.3); padding:8px 14px; border-radius:10px;
}

/* ===== v6 LIVE MARKET TICKER ===== */
#stats .sec-sub { text-align:center; color:#6f93a5; font-family:'JetBrains Mono',monospace; font-size:.82rem; letter-spacing:1px; margin-bottom:24px; }
#stats .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:800px){ #stats .stat-grid { grid-template-columns:1fr; } }
#stats .stat {
  position:relative; overflow:hidden; text-align:center; padding:28px 18px;
  background:linear-gradient(165deg,rgba(34,211,238,.07),rgba(10,16,28,.75));
  border:1px solid rgba(56,210,240,.18); border-radius:16px;
  backdrop-filter:blur(12px);
  box-shadow:0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
#stats .stat::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#22d3ee,transparent);
  opacity:.6;
}
#stats .stat::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 35%,rgba(34,211,238,.14) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .8s ease;
}
#stats .stat:hover::after { transform:translateX(120%); }
#stats .stat:hover { transform:translateY(-4px); border-color:rgba(34,211,238,.5); box-shadow:0 20px 50px rgba(34,211,238,.18); }
#stats .stat-icon { font-size:28px; margin-bottom:8px; filter:drop-shadow(0 0 8px rgba(34,211,238,.5)); }
#stats .num { font-family:'JetBrains Mono',monospace; font-size:1.9rem; font-weight:700; letter-spacing:-.5px; }
#stats .num .sym { color:#67e8f9; font-size:1.1rem; margin-right:4px; }
#stats .num .val {
  background:linear-gradient(90deg,#22d3ee,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#stats .lbl { font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:2.5px; color:#6f93a5; text-transform:uppercase; margin-top:4px; }
#stats .delta { font-family:'JetBrains Mono',monospace; font-size:.78rem; margin-top:8px; color:#6f93a5; min-height:1.2em; transition:color .3s ease; }
#stats .delta.up { color:#34d399; text-shadow:0 0 10px rgba(52,211,153,.5); }
#stats .delta.down { color:#f87171; text-shadow:0 0 10px rgba(248,113,113,.5); }
#stats .ticker-ts { text-align:center; color:#4d6b7a; font-family:'JetBrains Mono',monospace; font-size:.72rem; margin-top:16px; letter-spacing:1px; }

/* Animasi "live" pulse pada angka saat update */
@keyframes livePulse { 0%{text-shadow:0 0 0 rgba(34,211,238,0)} 50%{text-shadow:0 0 18px rgba(34,211,238,.7)} 100%{text-shadow:0 0 0 rgba(34,211,238,0)} }
#stats .num .val.updating { animation:livePulse 1s ease; }

/* ===== v7: FIX LAYOUT + SPARKLINES ===== */
#stats { display:block!important; }
#stats .sec-title { text-align:center; }
#stats .stat-grid {
  display:grid!important; grid-template-columns:repeat(3,1fr)!important;
  gap:18px; max-width:1050px; margin:26px auto 0;
}
@media (max-width:800px){ #stats .stat-grid { grid-template-columns:1fr!important; } }
#stats .num { white-space:nowrap; }
#stats .spark { height:40px; margin-top:12px; }
#stats .spark svg { width:100%; height:100%; display:block; filter:drop-shadow(0 0 6px rgba(52,211,153,.25)); }

/* ===== v8 CONTACT WOW — aurora + flowing gradient border ===== */

/* [1] Aurora hidup di latar (hanya halaman contact) */
body:has(form textarea)::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(700px 500px at 85% 75%, rgba(167,139,250,.10), transparent 60%);
  animation:auroraShift 12s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  from { transform:translate3d(-2%,-1%,0) scale(1); }
  to   { transform:translate3d(2%,2%,0) scale(1.06); }
}

/* [2] Telanjangi kartu lama biar panel baru yang bersinar */
body:has(form textarea) div:has(form textarea) {
  background:transparent!important; border:none!important;
  box-shadow:none!important; padding:0!important; backdrop-filter:none!important;
}
body:has(form textarea) div:has(form textarea)::before,
body:has(form textarea) div:has(form textarea)::after { content:none!important; }

/* [3] Judul shimmer gradien (senada brand navbar) */
body:has(form textarea) h1, body:has(form textarea) h2, body:has(form textarea) h3 {
  font-family:'JetBrains Mono',monospace!important; letter-spacing:-.5px;
  background:linear-gradient(90deg,#f0fbff,#22d3ee,#a78bfa,#22d3ee,#f0fbff);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent!important;
  animation:shine 5s linear infinite;
}
body:has(form textarea) h1 + p, body:has(form textarea) h2 + p, body:has(form textarea) h3 + p {
  color:#6f93a5; font-family:'JetBrains Mono',monospace; font-size:.85rem; letter-spacing:.5px;
}

/* [4] Form = panel kaca ber-border gradien MENGALIR + bracket neon */
form:has(textarea) {
  position:relative; margin-top:26px; padding:34px 32px;
  border:1px solid transparent; border-radius:18px;
  background:
    linear-gradient(rgba(10,16,28,.84),rgba(10,16,28,.84)) padding-box,
    linear-gradient(120deg,#22d3ee,#a78bfa,#22d3ee) border-box;
  background-size:100% 100%,300% 100%;
  animation:borderFlow 6s linear infinite;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
@keyframes borderFlow { to { background-position:0 0,300% 0; } }
form:has(textarea)::before, form:has(textarea)::after {
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  border-style:solid; filter:drop-shadow(0 0 6px rgba(34,211,238,.8));
}
form:has(textarea)::before { top:-1px; left:-1px; border-width:2px 0 0 2px; border-color:#22d3ee; border-radius:18px 0 0 0; }
form:has(textarea)::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-color:#a78bfa; border-radius:0 0 18px 0; filter:drop-shadow(0 0 6px rgba(167,139,250,.8)); }

/* [5] Input: fokus = ring cyan→ungu */
form:has(textarea) input:focus, form:has(textarea) textarea:focus {
  border-color:#a78bfa!important;
  box-shadow:0 0 0 3px rgba(167,139,250,.15),0 0 18px rgba(167,139,250,.3)!important;
}

/* [6] Tombol: gradien tema + teks mono bersih (logo kotak dilepas) */
form:has(textarea) button img { display:none!important; }
form:has(textarea) button {
  background:linear-gradient(90deg,#22d3ee,#a78bfa)!important;
  color:#071018!important; letter-spacing:2px!important; text-transform:uppercase;
  box-shadow:0 10px 30px rgba(34,211,238,.35)!important;
}
form:has(textarea) button:hover {
  box-shadow:0 14px 40px rgba(167,139,250,.45)!important;
}

/* [7] Catatan & link pulang: mono kalem */
body:has(form textarea) p { font-family:'JetBrains Mono',monospace; }

/* ===== v9: COLOR SWAP + BREATHING BACKGROUND ===== */

/* [1] Background BERNAFAS: glow ungu+cyan mengembang-mengempis */
body:has(form textarea)::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(55% 45% at 18% 25%, rgba(167,139,250,.17), transparent 65%),
    radial-gradient(60% 50% at 82% 72%, rgba(34,211,238,.15), transparent 65%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity:.4; transform:scale(1); }
  50%     { opacity:1;  transform:scale(1.08); }
}
/* Grid ikut berdenyut pelan (fase berbeda = organik) */
body:has(form textarea)::before { animation:gridBreath 9s ease-in-out infinite; }
@keyframes gridBreath {
  0%,100% { opacity:.55; }
  50%     { opacity:1; }
}

/* [2] SWAP: ungu dulu, cyan kemudian */
form:has(textarea) {
  background:
    linear-gradient(rgba(12,10,24,.85),rgba(12,10,24,.85)) padding-box,
    linear-gradient(120deg,#a78bfa,#22d3ee,#a78bfa) border-box!important;
  background-size:100% 100%,300% 100%;
  animation:borderFlow 6s linear infinite;
}
form:has(textarea)::before { border-color:#a78bfa!important; filter:drop-shadow(0 0 6px rgba(167,139,250,.8))!important; }
form:has(textarea)::after  { border-color:#22d3ee!important; filter:drop-shadow(0 0 6px rgba(34,211,238,.8))!important; }

/* [3] Label: teks ungu, prompt ">" cyan */
form:has(textarea) label { color:#c4b5fd!important; }
form:has(textarea) label::before { color:#22d3ee!important; }

/* [4] Input: border ungu kalem, fokus = ring CYAN (dibalik dari v8) */
form:has(textarea) input, form:has(textarea) textarea {
  border:1px solid rgba(167,139,250,.22)!important;
}
form:has(textarea) input:focus, form:has(textarea) textarea:focus {
  border-color:#22d3ee!important;
  box-shadow:0 0 0 3px rgba(34,211,238,.15),0 0 18px rgba(34,211,238,.3)!important;
}

/* [5] Tombol: gradien UNGU → CYAN (dibalik) */
form:has(textarea) button {
  background:linear-gradient(90deg,#a78bfa,#22d3ee)!important;
  box-shadow:0 10px 30px rgba(167,139,250,.4)!important;
}
form:has(textarea) button:hover {
  box-shadow:0 14px 40px rgba(34,211,238,.5)!important;
}

/* [6] Judul shimmer ungu-led */
body:has(form textarea) h1, body:has(form textarea) h2, body:has(form textarea) h3 {
  background:linear-gradient(90deg,#f5f3ff,#a78bfa,#22d3ee,#a78bfa,#f5f3ff)!important;
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
}

/* [7] Link pulang: ungu, hover menyala */
body:has(form textarea) a { color:#c4b5fd!important; }
body:has(form textarea) a:hover { color:#a78bfa!important; text-shadow:0 0 14px rgba(167,139,250,.7)!important; }

/* ===== v10: FIX TITLE BAR + NAVBAR SHIELD ===== */

/* [1] Judul: neon solid + glow + underline gradien (tanpa clip = anti-bar) */
body:has(form textarea) h1, body:has(form textarea) h2, body:has(form textarea) h3 {
  background:none!important;
  -webkit-background-clip:border-box!important; background-clip:border-box!important;
  color:#eaf6ff!important;
  text-shadow:0 0 22px rgba(167,139,250,.55),0 0 55px rgba(34,211,238,.3);
  animation:none!important;
}
body:has(form textarea) h1:not(a h1):not(nav h1):not(header h1):not(.navbar h1)::after,
body:has(form textarea) h2:not(a h1):not(nav h1):not(header h1):not(.navbar h1)::after,
body:has(form textarea) h3:not(a h1):not(nav h1):not(header h1):not(.navbar h1)::after {
  content:""; display:block; width:140px; height:3px; margin:12px auto 0;
  border-radius:3px; background:linear-gradient(90deg,#a78bfa,#22d3ee);
  box-shadow:0 0 16px rgba(167,139,250,.65);
}

/* [2] Brand navbar: kembalikan putih + span gradien (clip hanya di span inline = aman) */
body:has(form textarea) a h1, body:has(form textarea) nav h1,
body:has(form textarea) header h1, body:has(form textarea) .navbar h1 {
  background:none!important; color:#eaf6ff!important;
  -webkit-background-clip:border-box!important; background-clip:border-box!important;
  text-shadow:none!important; animation:none!important;
}
body:has(form textarea) a h1 span, body:has(form textarea) nav h1 span,
body:has(form textarea) header h1 span, body:has(form textarea) .navbar h1 span {
  background:linear-gradient(90deg,#22d3ee,#a78bfa)!important;
  background-size:200% auto;
  -webkit-background-clip:text!important; background-clip:text!important;
  color:transparent!important; animation:shine 5s linear infinite!important;
}

/* [3] Link navbar: kembali netral, hover cyan (bukan ungu semua) */
body:has(form textarea) nav a, body:has(form textarea) header a, body:has(form textarea) .navbar a {
  color:#d3dfe7!important; text-shadow:none!important;
}
body:has(form textarea) nav a:hover, body:has(form textarea) header a:hover, body:has(form textarea) .navbar a:hover {
  color:#7dd3fc!important; text-shadow:0 0 12px rgba(56,210,240,.6)!important;
}

/* ===== v11: NAVBAR "LAINNYA" DROPDOWN + SCROLL STRIP ===== */

/* Navbar jadi strip scrollable (layar sempit aman) */
header nav, .navbar nav, nav { overflow-x:auto; scrollbar-width:none; }
header nav::-webkit-scrollbar, .navbar nav::-webkit-scrollbar, nav::-webkit-scrollbar { display:none; }

/* Tombol Lainnya */
.nav-more { position:relative; }
.nav-more summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:7px;
  padding:8px 14px; border:1px solid rgba(56,210,240,.28); border-radius:10px;
  font-family:'JetBrains Mono',monospace; font-size:.85rem; color:#9fd8e8;
  background:rgba(34,211,238,.06); transition:all .25s ease; white-space:nowrap;
}
.nav-more summary::-webkit-details-marker { display:none; }
.nav-more summary:hover { color:#67e8f9; border-color:rgba(34,211,238,.6); box-shadow:0 0 16px rgba(34,211,238,.3); }
.nav-more .caret { transition:transform .3s ease; }
.nav-more[open] .caret { transform:rotate(180deg); }
.nav-more[open] summary { border-color:rgba(167,139,250,.6); color:#c4b5fd; box-shadow:0 0 16px rgba(167,139,250,.3); }

/* Panel dropdown: kaca gelap + scroll neon (referensi gambar, tema Anda) */
.nav-more-panel {
  position:absolute; top:calc(100% + 10px); right:0; min-width:230px;
  background:rgba(10,16,28,.94); backdrop-filter:blur(16px);
  border:1px solid rgba(56,210,240,.25); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 30px rgba(34,211,238,.08);
  padding:8px; max-height:320px; overflow-y:auto; z-index:1000;
  animation:dropIn .28s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes dropIn { from { opacity:0; transform:translateY(-10px) scale(.96); } to { opacity:1; transform:none; } }
.nav-more-panel a {
  display:flex; align-items:center; gap:9px; padding:10px 14px; border-radius:9px;
  color:#c9d6df!important; font-size:.9rem; text-decoration:none;
  transition:all .2s ease;
}
.nav-more-panel a::before {
  content:""; width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#a78bfa,#22d3ee);
  box-shadow:0 0 8px rgba(34,211,238,.6); transition:width .25s ease;
}
.nav-more-panel a:hover { background:rgba(34,211,238,.08); color:#67e8f9!important; transform:translateX(4px); }
.nav-more-panel a:hover::before { width:14px; }

/* Scrollbar neon di dalam panel */
.nav-more-panel::-webkit-scrollbar { width:6px; }
.nav-more-panel::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#22d3ee,#a78bfa); border-radius:3px; }
.nav-more-panel::-webkit-scrollbar-track { background:rgba(255,255,255,.04); }

/* ===== v12: FIX CLIP DROPDOWN + RAPATKAN NAVBAR ===== */
header, .navbar, header nav, .navbar nav, nav { overflow:visible!important; }
@media (max-width:900px){
  header nav, .navbar nav, nav { flex-wrap:wrap; row-gap:10px; }
}
.nav-more-panel { top:calc(100% + 12px); }