/* ============================================================
   XECHCYBER - DARK THEME CYBER
   Komunitas Cybersecurity Indonesia
   Primary: #00ff88 (Neon Green)
   Secondary: #00d4ff (Cyan)
   Background: #0a0a0a / #111111 / #161b22
   Author: Xechcyber Team
   ============================================================ */

:root {
  --cyber-green: #00ff88;
  --cyber-green-dim: #00cc6b;
  --cyber-cyan: #00d4ff;
  --cyber-purple: #aa00ff;
  --cyber-orange: #ffaa00;
  --cyber-pink: #ff00aa;
  --cyber-red: #ff3355;
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #161b22;
  --bg-card: #1a1f2e;
  --bg-border: #2a2f45;
  --text-primary: #e6edf3;
  --text-secondary: #9198a1;
  --text-muted: #6e7681;
  --glow-green: 0 0 8px rgba(0, 255, 136, 0.6), 0 0 20px rgba(0, 255, 136, 0.3);
  --glow-cyan: 0 0 8px rgba(0, 212, 255, 0.6), 0 0 20px rgba(0, 212, 255, 0.3);
  --font-mono: 'Consolas', 'Courier New', 'Fira Code', monospace;
}

/* ===== GENERAL ===== */
body {
  font-family: "Open Sans", sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
  background-image:
    linear-gradient(rgba(0, 255, 136, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

a {
  color: var(--cyber-green);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--cyber-cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
  color: var(--text-primary);
}

h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--cyber-green), var(--cyber-cyan));
  margin: 15px auto 0;
  box-shadow: var(--glow-green);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cyber-green), var(--cyber-cyan));
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-green);
  box-shadow: var(--glow-green);
}

/* ===== SELECTION ===== */
::selection {
  background: var(--cyber-green);
  color: var(--bg-primary);
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--cyber-green);
  width: 44px;
  height: 44px;
  border-radius: 4px;
  transition: all 0.4s;
  border: 1px solid var(--cyber-green);
  box-shadow: var(--glow-green);
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}

.back-to-top i {
  font-size: 28px;
  color: var(--bg-primary);
  line-height: 0;
  font-weight: bold;
}

.back-to-top:hover {
  background: var(--bg-primary);
  color: var(--cyber-green);
  box-shadow: var(--glow-cyan);
  border-color: var(--cyber-cyan);
}

.back-to-top:hover i {
  color: var(--cyber-cyan);
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/* ===== HEADER / NAVBAR ===== */
#header {
  transition: all 0.5s;
  z-index: 997;
  padding: 16px 0;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}

#header.header-transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
}

#header.header-scrolled {
  background: rgba(10, 10, 10, 0.95);
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 255, 136, 0.25);
  box-shadow: 0 4px 30px rgba(0, 255, 136, 0.08);
}

#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 2px;
  font-family: "Poppins", sans-serif;
}

#header .logo a {
  color: var(--text-primary);
  position: relative;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

#header .logo a:hover {
  text-shadow: var(--glow-green);
}

/* ===== NAVBAR MENU ===== */
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 28px;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: 0.3s;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: var(--cyber-green);
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}

/* Dropdown Menu (Desktop) */
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% + 20px);
  margin: 0;
  padding: 8px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  background: rgba(10, 15, 25, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 255, 136, 0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 260px;
}

.navbar .dropdown ul li {
  min-width: 100%;
  margin-bottom: 3px;
}

.navbar .dropdown ul li:last-child {
  margin-bottom: 0;
}

.navbar .dropdown ul a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: #cbd5e1 !important;
  letter-spacing: 0.2px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.navbar .dropdown ul a i {
  font-size: 18px !important;
  width: 22px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.navbar .dropdown ul a .nav-desc {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.25;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
  background: rgba(0, 255, 136, 0.08) !important;
  color: #00ff88 !important;
  transform: translateX(3px);
}

.navbar .dropdown ul a:hover .nav-desc {
  color: #94a3b8;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

/* User & Auth Buttons in Navbar */
.nav-btn-signin {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #00d4ff !important;
  background: rgba(0, 212, 255, 0.08) !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.25s ease !important;
  margin-left: 10px !important;
}

.nav-btn-signin:hover {
  background: rgba(0, 212, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.35) !important;
}

.nav-btn-signup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #010409 !important;
  background: #00ff88 !important;
  border: 1px solid #00ff88 !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.35) !important;
  transition: all 0.25s ease !important;
  margin-left: 6px !important;
}

.nav-btn-signup:hover {
  background: #2eff9c !important;
  color: #010409 !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.6) !important;
  transform: translateY(-1px);
}

.nav-user-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(0, 255, 136, 0.3) !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  transition: all 0.25s ease !important;
}

.nav-user-pill:hover {
  border-color: #00ff88 !important;
  background: rgba(0, 255, 136, 0.1) !important;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2) !important;
}

.nav-user-pill .user-status-dot {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff88;
}

.nav-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  font-weight: 700;
  padding: 6px 12px 2px;
  margin-top: 4px;
}

/* Mobile nav toggle */
.mobile-nav-toggle {
  color: var(--cyber-green);
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

/* Intermediate screen responsive navbar adjustments (992px - 1320px) */
@media (min-width: 992px) and (max-width: 1320px) {
  #header .logo {
    font-size: 20px;
    letter-spacing: 1px;
  }
  #header .logo img {
    height: 28px !important;
    width: 28px !important;
    margin-right: 6px !important;
  }
  .navbar a,
  .navbar a:focus {
    padding: 8px 0 8px 12px;
    font-size: 12.5px;
    letter-spacing: 0.2px;
  }
  .navbar a i,
  .navbar a:focus i {
    font-size: 13px;
    margin-left: 3px;
  }
}

@media (min-width: 1321px) and (max-width: 1440px) {
  .navbar a,
  .navbar a:focus {
    padding: 10px 0 10px 18px;
    font-size: 13.5px;
  }
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navbar ul {
    display: none;
  }
}

@media (max-width: 576px) {
  #header {
    padding: 12px 0;
  }
  #header .logo {
    font-size: 20px;
    letter-spacing: 1px;
  }
  #header .logo img {
    height: 28px !important;
    width: 28px !important;
  }
}

/* ===== HERO SECTION ===== */
#hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 120px 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.10) 0%, transparent 45%),
    linear-gradient(135deg, #0a0a0a 0%, #0d1410 50%, #0a0a0a 100%);
  border-bottom: 1px solid rgba(0, 255, 136, 0.1);
  overflow: hidden;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 136, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

#hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyber-green), transparent);
  animation: scanline 4s ease-in-out infinite;
}

@keyframes scanline {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(100vh); opacity: 0.7; }
}

#hero .container {
  position: relative;
  z-index: 3;
}

#hero h1 {
  margin: 0 0 20px;
  font-size: 64px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -1px;
  font-family: var(--font-mono);
  text-shadow: 0 0 30px rgba(0, 255, 136, 0.25);
}

#hero h1::before {
  content: "> ";
  color: var(--cyber-green);
  opacity: 0.7;
}

#hero h2 {
  color: var(--text-secondary);
  margin-bottom: 40px;
  font-size: 20px;
  font-weight: 400;
}

#hero h2::after { display: none; }

.btn-get-started,
.btn-cyber-primary {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  display: inline-block;
  padding: 14px 36px;
  border-radius: 0;
  transition: 0.4s;
  color: var(--bg-primary);
  background: var(--cyber-green);
  border: 2px solid var(--cyber-green);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-green);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.btn-get-started::before,
.btn-cyber-primary::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.btn-get-started:hover,
.btn-cyber-primary:hover {
  background: var(--bg-primary);
  color: var(--cyber-green);
  box-shadow: var(--glow-cyan);
  border-color: var(--cyber-cyan);
  transform: translateY(-2px);
}

.btn-cyber-secondary {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  display: inline-block;
  padding: 10px 24px;
  border-radius: 0;
  transition: 0.4s;
  color: var(--cyber-cyan);
  background: transparent;
  border: 2px solid var(--cyber-cyan);
  text-transform: uppercase;
  margin-top: 8px;
}

.btn-cyber-secondary:hover {
  background: var(--cyber-cyan);
  color: var(--bg-primary);
  box-shadow: var(--glow-cyan);
}

/* ===== SECTIONS ===== */
section {
  padding: 80px 0;
  overflow: hidden;
}

.section-bg {
  background: var(--bg-secondary);
  border-top: 1px solid var(--bg-border);
  border-bottom: 1px solid var(--bg-border);
}

.section-title {
  padding-bottom: 30px;
  text-align: center;
}

.section-title h2 {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.section-title h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--cyber-green), var(--cyber-cyan));
  margin: 18px auto 0;
  box-shadow: var(--glow-green);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.section-title p {
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ===== PROFILE / ABOUT SECTION ===== */
.about .content h3 {
  font-weight: 700;
  font-size: 26px;
}

.about h3 {
  color: var(--text-primary);
  font-weight: 800;
  margin-bottom: 20px;
}

.about p {
  color: var(--text-secondary);
  line-height: 1.8;
}

.cyber-illustration-box {
  background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-card));
  border: 1px solid var(--bg-border);
  padding: 30px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.cyber-illustration-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 60px;
  border-top: 2px solid var(--cyber-green);
  border-left: 2px solid var(--cyber-green);
}

.cyber-illustration-box::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 60px; height: 60px;
  border-bottom: 2px solid var(--cyber-cyan);
  border-right: 2px solid var(--cyber-cyan);
}

.ascii-art {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  color: var(--cyber-green);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  text-align: center;
  white-space: pre;
  margin: 0;
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96%, 98% { opacity: 0.6; }
}

.badge-cyber {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border: 1px solid;
  margin-right: 8px;
  margin-bottom: 6px;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.badge-success {
  background: rgba(0, 255, 136, 0.1);
  border-color: var(--cyber-green);
  color: var(--cyber-green);
}

.badge-info {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--cyber-cyan);
  color: var(--cyber-cyan);
}

.badge-warning {
  background: rgba(255, 170, 0, 0.1);
  border-color: var(--cyber-orange);
  color: var(--cyber-orange);
}

/* ===== VISI MISI - SERVICES ===== */
.services .icon-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  margin: 0;
  text-align: left;
  transition: all 0.4s ease;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
}

.services .icon-box:hover {
  background: var(--bg-tertiary);
  transform: translateY(-6px);
  border-color: var(--cyber-green);
  box-shadow: 0 15px 40px rgba(0, 255, 136, 0.1);
}

.iconbox-green {
  border-top: 4px solid var(--cyber-green) !important;
}
.iconbox-cyan {
  border-top: 4px solid var(--cyber-cyan) !important;
}
.iconbox-orange {
  border-top: 4px solid var(--cyber-orange) !important;
}
.iconbox-purple {
  border-top: 4px solid var(--cyber-purple) !important;
}

.services .icon-box .icon {
  margin: 0 auto 20px;
  padding: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  position: relative;
  width: 64px;
  height: 64px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0,255,136,0.4);
  box-shadow: inset 0 0 15px rgba(0,255,136,0.1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.services .icon-box .icon i {
  color: var(--cyber-green);
  font-size: 32px;
}

.services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.services .icon-box h4 a {
  color: var(--text-primary);
  transition: 0.3s;
}

.services .icon-box:hover h4 a {
  color: var(--cyber-green);
}

.services .icon-box p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 14px;
}

/* ===== FEATURES - KEUNGGULAN ===== */
.features {
  padding-top: 0;
}

.cyber-feature {
  padding: 30px 25px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  transition: all 0.35s ease;
  text-align: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.cyber-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyber-green), var(--cyber-cyan));
  transition: width 0.4s ease;
}

.cyber-feature::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyber-cyan), var(--cyber-green));
  transition: width 0.4s ease;
}

.cyber-feature:hover {
  transform: translateY(-6px);
  border-color: var(--cyber-green);
  box-shadow: 0 10px 40px rgba(0, 255, 136, 0.1);
  background: var(--bg-tertiary);
}

.cyber-feature:hover::before,
.cyber-feature:hover::after {
  width: 100%;
}

.cyber-feature .icon {
  margin-bottom: 20px;
}

.cyber-feature .icon i {
  font-size: 44px;
  line-height: 1;
}

.cyber-feature h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.cyber-feature p {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
}

/* ===== PORTFOLIO / LEARNING HUB ===== */
.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px;
  list-style: none;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  display: inline-block;
  padding: 6px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin: 0 2px;
  margin-bottom: 5px;
  transition: all 0.3s ease;
  font-family: var(--font-mono);
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: var(--bg-primary);
  background: var(--cyber-green);
  box-shadow: var(--glow-green);
}

.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.95) 60%);
  padding: 18px;
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-bottom: 3px solid var(--cyber-green);
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 700;
  margin-bottom: 4px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 40px;
  font-size: 22px;
  top: calc(50% - 14px);
  color: var(--cyber-green);
  transition: 0.3s;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--cyber-cyan);
  text-shadow: var(--glow-cyan);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 10px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 12px;
}

.difficulty-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.diff-beginner {
  background: rgba(0, 212, 255, 0.9);
  color: var(--bg-primary);
}
.diff-intermediate {
  background: rgba(255, 170, 0, 0.9);
  color: var(--bg-primary);
}
.diff-advanced {
  background: rgba(255, 51, 85, 0.9);
  color: #fff;
}

.portfolio-item img {
  transition: all 0.5s ease;
  filter: grayscale(30%);
}

.portfolio-item:hover img {
  transform: scale(1.06);
  filter: grayscale(0%) saturate(1.2);
}

.portfolio-wrap {
  border: 1px solid var(--bg-border);
  background: var(--bg-card);
  overflow: hidden;
  position: relative;
  display: block;
}

.portfolio-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 255, 136, 0.1) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.portfolio-wrap:hover::after {
  opacity: 1;
}

/* ===== EVENT CARD ===== */
.event-card {
  padding: 30px 25px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  transition: all 0.35s;
  height: 100%;
  width: 100%;
  position: relative;
  border-top: 3px solid var(--cyber-green);
}

.event-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyber-green);
  box-shadow: 0 12px 40px rgba(0, 255, 136, 0.12);
  background: var(--bg-tertiary);
}

.event-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-family: var(--font-mono);
  margin-bottom: 15px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.event-ctf {
  background: rgba(0, 255, 136, 0.15);
  color: var(--cyber-green);
  border: 1px solid var(--cyber-green);
}

.event-workshop {
  background: rgba(0, 212, 255, 0.15);
  color: var(--cyber-cyan);
  border: 1px solid var(--cyber-cyan);
}

.event-meetup {
  background: rgba(170, 0, 255, 0.15);
  color: var(--cyber-purple);
  border: 1px solid var(--cyber-purple);
}

.event-card h4 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.event-meta {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 8px;
}

.event-meta i {
  color: var(--cyber-green);
  margin-right: 6px;
}

.event-card p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 14px;
  margin-bottom: 14px;
  font-size: 14px;
}

/* ===== CONTACT SECTION ===== */
.contact .info-box {
  color: var(--text-secondary);
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  padding: 30px 20px;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}

.contact .info-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--cyber-green);
  transition: height 0.35s ease;
}

.contact .info-box:hover::before {
  height: 100%;
}

.contact .info-box:hover {
  border-color: var(--cyber-green);
  background: var(--bg-tertiary);
  transform: translateY(-3px);
}

.contact .info-box i.bx {
  font-size: 28px;
  color: var(--cyber-green);
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(0, 255, 136, 0.08);
  border: 1px dashed var(--cyber-green);
  display: inline-block;
}

.contact .info-box h3 {
  font-size: 17px;
  color: var(--text-primary);
  font-weight: 800;
  margin: 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 0;
}

.social-box {
  display: block;
  text-align: center;
  padding: 16px 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s;
}

.social-box i {
  display: block;
  font-size: 24px;
  color: var(--cyber-green);
  margin-bottom: 6px;
}

.social-box:hover {
  background: var(--bg-tertiary);
  border-color: var(--cyber-green);
  transform: translateY(-3px);
  color: var(--cyber-green);
}

/* ===== CONTACT FORM ===== */
.php-email-form {
  background: var(--bg-card);
  padding: 30px;
  border: 1px solid var(--bg-border);
  border-top: 3px solid var(--cyber-green);
  height: 100%;
}

.php-email-form .form-group input,
.php-email-form .form-group textarea {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--bg-border);
  border-radius: 0;
  padding: 12px 16px;
  font-size: 14px;
  transition: 0.3s;
  font-family: inherit;
}

.php-email-form .form-group input::placeholder,
.php-email-form .form-group textarea::placeholder {
  color: var(--text-muted);
}

.php-email-form .form-group input:focus,
.php-email-form .form-group textarea:focus {
  outline: none;
  border-color: var(--cyber-green);
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.12);
  background: var(--bg-secondary);
}

.php-email-form button[type=submit] {
  background: var(--cyber-green);
  border: 2px solid var(--cyber-green);
  color: var(--bg-primary);
  padding: 12px 36px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  transition: 0.4s;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow: var(--glow-green);
}

.php-email-form button[type=submit]:hover {
  background: var(--bg-primary);
  color: var(--cyber-green);
  border-color: var(--cyber-cyan);
  box-shadow: var(--glow-cyan);
}

.php-email-form .sent-message,
.php-email-form .error-message,
.php-email-form .loading {
  display: none;
  padding: 15px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 13px;
}

.php-email-form .sent-message {
  background: rgba(0, 255, 136, 0.1);
  color: var(--cyber-green);
  border-left: 3px solid var(--cyber-green);
}

.php-email-form .error-message {
  background: rgba(255, 51, 85, 0.1);
  color: var(--cyber-red);
  border-left: 3px solid var(--cyber-red);
}

.php-email-form .loading {
  background: rgba(0, 212, 255, 0.1);
  color: var(--cyber-cyan);
  border-left: 3px solid var(--cyber-cyan);
}

.php-email-form .loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--cyber-cyan);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== CTA SECTION ===== */
.cta {
  background:
    radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.15), transparent 50%),
    linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  background-size: cover;
  padding: 80px 0;
  border-top: 1px solid var(--bg-border);
  border-bottom: 1px solid var(--bg-border);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 136, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

.cta .container {
  position: relative;
  z-index: 2;
}

.cta h3 {
  color: var(--text-primary);
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.cta h3::after { display: none; }

.cta p {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-btn {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 0;
  transition: 0.4s;
  border: 2px solid var(--cyber-green);
  color: var(--cyber-green);
  background: transparent;
  position: relative;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.cta-btn:hover {
  background: var(--cyber-green);
  color: var(--bg-primary);
  box-shadow: var(--glow-green);
  transform: translateY(-2px);
}

.cta-btn i {
  margin-right: 8px;
}

/* ===== FOOTER ===== */
#footer {
  background: #050505;
  color: var(--text-secondary);
  font-size: 14px;
  position: relative;
  border-top: 2px solid;
  border-image: linear-gradient(90deg, transparent, var(--cyber-green), transparent) 1;
}

#footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyber-green), transparent);
}

#footer .footer-top {
  padding: 60px 0 30px 0;
  background: #070707;
}

#footer .footer-top .footer-contact h3 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  margin: 0 0 18px 0;
  letter-spacing: 1px;
  font-family: "Poppins", sans-serif;
}

#footer .footer-top .footer-contact h3::after { display: none; }

#footer .footer-top .footer-contact p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 0;
  color: var(--text-secondary);
}

#footer .footer-top h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--cyber-green);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#footer .footer-top h4::before {
  content: "> ";
  color: var(--cyber-green);
  opacity: 0.8;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 4px;
  color: var(--cyber-green);
  font-size: 14px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 8px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: var(--text-secondary);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
  font-size: 14px;
}

#footer .footer-top .footer-links ul a:hover {
  color: var(--cyber-green);
  padding-left: 4px;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}

#footer .footer-newsletter {
  font-size: 15px;
}

#footer .footer-newsletter h4 {
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
}

#footer .footer-newsletter p {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

#footer .footer-newsletter form {
  margin-top: 0;
  background: var(--bg-card);
  padding: 0;
  position: relative;
  border-radius: 0;
  border: 1px solid var(--bg-border);
  text-align: left;
}

#footer .copyright {
  text-align: center;
  color: var(--text-secondary);
  padding-top: 20px;
  border-top: 1px solid var(--bg-border);
  font-size: 13px;
}

#footer .credits {
  padding-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

#footer .social-links a {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--cyber-green);
  line-height: 1;
  margin-right: 6px;
  border-radius: 0;
  width: 38px;
  height: 38px;
  transition: 0.3s;
  border: 1px solid var(--bg-border);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

#footer .social-links a:hover {
  background: var(--cyber-green);
  color: var(--bg-primary);
  box-shadow: var(--glow-green);
  border-color: var(--cyber-green);
  transform: translateY(-3px);
}

#footer .container.py-4 {
  border-top: 1px solid var(--bg-border);
}

/* ===== TEAM (for future use) ===== */
.team .member {
  text-align: center;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

.team .member:hover {
  border-color: var(--cyber-green);
  transform: translateY(-4px);
}

.team .member .member-info {
  padding: 25px 15px;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
  color: var(--text-primary);
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: var(--cyber-green);
  font-family: var(--font-mono);
  letter-spacing: 1px;
}

/* ===== BREADCRUMBS / PAGE TITLE (for other pages) ===== */
.page-title-area {
  background:
    linear-gradient(135deg, rgba(0,255,136,0.08), rgba(0,212,255,0.04)),
    var(--bg-tertiary);
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--bg-border);
}

.page-title-area h1 {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.page-title-area h1::before {
  content: "$ ";
  color: var(--cyber-green);
  font-family: var(--font-mono);
  font-weight: 400;
}

.page-title-area h1::after { display: none; }

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 10px 0 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "»";
  color: var(--cyber-green);
  padding: 0 8px;
}

.breadcrumb-item a { color: var(--cyber-green); }
.breadcrumb-item.active { color: var(--text-secondary); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  #hero h1 {
    font-size: 36px;
  }
  #hero h2 {
    font-size: 16px;
  }
  .ascii-art {
    font-size: 6px;
  }
  .section-title h2 {
    font-size: 28px;
  }
}

/* ===== ANIMATIONS ===== */
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--glow-green); }
  50% { box-shadow: var(--glow-cyan); }
}

[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
  transition-duration: .4s;
}

/* ===== MEMBER AREA ===== */
.member-area {
  background: var(--bg-primary);
  min-height: calc(100vh - 100px);
  position: relative;
}
.member-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
}
.member-area > .container { position: relative; z-index: 2; }

.page-header-box {
  padding: 22px 26px;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-border);
  border-left: 3px solid var(--cyber-green);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  margin-bottom: 24px;
  box-shadow: 0 0 0 1px rgba(0,255,136,0.06);
}
.page-header-box h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
}
.page-header-box h2 i { margin-right: 6px; }

.cyber-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  padding: 24px;
  margin-bottom: 20px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: all 0.3s;
  position: relative;
}
.cyber-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-top: 2px solid var(--cyber-green);
  border-left: 2px solid var(--cyber-green);
  opacity: 0.5;
}
.cyber-card::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 28px;
  border-bottom: 2px solid var(--cyber-cyan);
  border-right: 2px solid var(--cyber-cyan);
  opacity: 0.5;
}
.cyber-card:hover {
  border-color: rgba(0,255,136,0.25);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,255,136,0.08);
}

.section-subtitle {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cyber-green);
  padding: 3px 10px;
  background: rgba(0,255,136,0.08);
  border: 1px solid rgba(0,255,136,0.2);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.section-subtitle span { padding: 0; }

.member-profile-card {
  text-align: center;
  position: sticky;
  top: 100px;
}
.avatar-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.avatar-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1f2e, #2a2f45);
  border: 3px solid var(--cyber-green);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  font-size: 40px;
  color: var(--cyber-green);
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 0 8px rgba(0,255,136,0.4);
  box-shadow: 0 0 20px rgba(0,255,136,0.15);
}
.avatar-circle img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.member-socials {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
}
.member-socials a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,255,136,0.06);
  border: 1px solid var(--bg-border);
  color: var(--text-secondary);
  font-size: 18px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  transition: all 0.25s;
}
.member-socials a:hover {
  background: var(--cyber-green);
  color: #050505;
  border-color: var(--cyber-green);
}

.points-progress-box {
  padding: 14px;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.2);
}
.progress-track {
  height: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
  border: 1px solid var(--bg-border);
  position: relative;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyber-green), var(--cyber-cyan));
  transition: width 0.6s ease;
  position: relative;
}
.progress-fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: progressShine 2s linear infinite;
}
@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.btn-member-action {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-border);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.btn-member-action:hover {
  border-color: var(--cyber-green);
  color: var(--cyber-green);
  background: rgba(0,255,136,0.06);
  text-decoration: none;
}
.btn-member-action i { margin-right: 6px; }
.btn-member-action.btn-primary-action {
  background: var(--cyber-green);
  color: #050505;
  border-color: var(--cyber-green);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0,255,136,0.2);
}
.btn-member-action.btn-primary-action:hover {
  background: transparent;
  color: var(--cyber-green);
  border-color: var(--cyber-cyan);
  box-shadow: 0 0 20px rgba(0,212,255,0.3);
}
.btn-member-action.btn-danger-action {
  border-color: rgba(255,51,85,0.35);
  color: #ff6680;
}
.btn-member-action.btn-danger-action:hover {
  background: rgba(255,51,85,0.08);
  color: #ff3355;
  border-color: #ff3355;
}

.stat-card {
  padding: 16px 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-border);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 100%;
}
.stat-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Poppins', sans-serif;
}
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.stat-green::before { background: var(--cyber-green); }
.stat-green .stat-icon { color: var(--cyber-green); text-shadow: 0 0 8px rgba(0,255,136,0.4); }
.stat-cyan::before { background: var(--cyber-cyan); }
.stat-cyan .stat-icon { color: var(--cyber-cyan); text-shadow: 0 0 8px rgba(0,212,255,0.4); }
.stat-purple::before { background: var(--cyber-purple); }
.stat-purple .stat-icon { color: var(--cyber-purple); text-shadow: 0 0 8px rgba(170,0,255,0.4); }
.stat-orange::before { background: #ffaa00; }
.stat-orange .stat-icon { color: #ffaa00; text-shadow: 0 0 8px rgba(255,170,0,0.4); }

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.badge-cyber-card {
  padding: 16px 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-border);
  text-align: center;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  position: relative;
  transition: all 0.3s;
}
.badge-cyber-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.badge-cyber-card.badge-common { border-top: 3px solid var(--cyber-cyan); }
.badge-cyber-card.badge-rare { border-top: 3px solid var(--cyber-green); }
.badge-cyber-card.badge-epic { border-top: 3px solid var(--cyber-purple); }
.badge-cyber-card.badge-legendary { border-top: 3px solid #ffaa00; }
.badge-cyber-card.badge-mythic {
  border-top: 3px solid #ff3355;
  background: linear-gradient(135deg, rgba(255,51,85,0.08), rgba(170,0,255,0.06), var(--bg-tertiary));
}
.badge-cyber-card.badge-locked {
  filter: grayscale(0.7) opacity(0.6);
}
.badge-ico {
  font-size: 38px;
  margin-bottom: 8px;
  color: var(--cyber-green);
  text-shadow: 0 0 12px rgba(0,255,136,0.5);
  line-height: 1;
}
.badge-legendary .badge-ico { color: #ffaa00; text-shadow: 0 0 12px rgba(255,170,0,0.5); }
.badge-epic .badge-ico { color: var(--cyber-purple); text-shadow: 0 0 12px rgba(170,0,255,0.5); }
.badge-common .badge-ico { color: var(--cyber-cyan); text-shadow: 0 0 12px rgba(0,212,255,0.5); }
.badge-mythic .badge-ico { color: #ff3355; text-shadow: 0 0 14px rgba(255,51,85,0.6); }

.badge-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 4px;
}
.badge-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  min-height: 30px;
}
.badge-req {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--bg-border);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.badge-req .text-success { color: var(--cyber-green) !important; }
.badge-unlocked-dot {
  position: absolute;
  top: 8px; right: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyber-green);
  box-shadow: 0 0 8px var(--cyber-green);
  animation: blinkDot 1.5s ease-in-out infinite;
}
@keyframes blinkDot {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-border);
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.25s;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.quick-action i {
  font-size: 28px;
  width: 40px;
  flex-shrink: 0;
}
.quick-action div strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.quick-action div span {
  font-size: 11px;
  color: var(--text-secondary);
}
.quick-action:hover {
  text-decoration: none;
  color: var(--text-primary);
  border-color: currentColor;
  transform: translateX(4px);
}
.qa-green { color: var(--cyber-green); }
.qa-green i { color: var(--cyber-green); }
.qa-cyan { color: var(--cyber-cyan); }
.qa-cyan i { color: var(--cyber-cyan); }
.qa-purple { color: var(--cyber-purple); }
.qa-purple i { color: var(--cyber-purple); }
.qa-orange { color: #ffaa00; }
.qa-orange i { color: #ffaa00; }

.activity-timeline {
  position: relative;
  padding-left: 10px;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--bg-border);
  position: relative;
}
.activity-item:last-child { border-bottom: none; }
.act-ico {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.act-green { background: rgba(0,255,136,0.1); color: var(--cyber-green); border: 1px solid rgba(0,255,136,0.3); }
.act-cyan { background: rgba(0,212,255,0.1); color: var(--cyber-cyan); border: 1px solid rgba(0,212,255,0.3); }
.act-purple { background: rgba(170,0,255,0.1); color: var(--cyber-purple); border: 1px solid rgba(170,0,255,0.3); }
.act-orange { background: rgba(255,170,0,0.1); color: #ffaa00; border: 1px solid rgba(255,170,0,0.3); }
.act-title {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 3px;
  font-weight: 600;
}
.act-time {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 576px) {
  .profile-info-grid { grid-template-columns: 1fr 1fr; }
}
.info-row {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--bg-border);
}
.info-row:nth-child(odd) {
  border-right: 1px dashed var(--bg-border);
}
@media (max-width: 575px) {
  .info-row:nth-child(odd) { border-right: none; }
}
.info-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.bio-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-border);
  padding: 18px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  font-family: 'Poppins', sans-serif;
  border-left: 3px solid var(--cyber-green);
}

.cyber-label {
  display: block;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.cyber-label small { font-weight: 400; color: var(--text-secondary); }
.cyber-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-border);
  color: var(--text-primary);
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.25s;
  outline: none;
  font-family: inherit;
  resize: vertical;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
textarea.cyber-input { min-height: 90px; }
.cyber-input:focus {
  background: #0e1117;
  border-color: var(--cyber-green);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(0,255,136,0.12);
}
.cyber-input:disabled, .cyber-input[disabled] {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  opacity: 0.7;
  cursor: not-allowed;
}
.cyber-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
input[type=file].cyber-input {
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-mono);
}
.input-group-cyber {
  display: flex;
  align-items: stretch;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-border);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  overflow: hidden;
  transition: all 0.25s;
}
.input-group-cyber:focus-within {
  border-color: var(--cyber-green);
  box-shadow: 0 0 0 3px rgba(0,255,136,0.12);
}
.input-group-cyber > span {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  border-right: 1px solid var(--bg-border);
}
.input-group-cyber .cyber-input {
  border: none;
  background: transparent;
  flex: 1;
  clip-path: none;
}
.input-group-cyber .cyber-input:focus { box-shadow: none; background: transparent; }
.input-group-cyber .btn-member-action {
  margin: 0;
  clip-path: none;
  border: none;
  border-left: 1px solid var(--bg-border);
}

.sosials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.soc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--bg-border);
  color: inherit;
  text-decoration: none;
  transition: all 0.25s;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.soc-item i {
  font-size: 24px;
  color: var(--cyber-green);
  flex-shrink: 0;
}
.soc-item.active { border-color: rgba(0,255,136,0.25); }
.soc-item.active:hover {
  transform: translateX(3px);
  background: rgba(0,255,136,0.05);
  border-color: var(--cyber-green);
}
.soc-item.muted { opacity: 0.55; }
.soc-item.muted:hover { text-decoration: none; cursor: default; border-color: var(--bg-border); }
.soc-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.soc-val {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

.member-mini-card {
  padding: 14px 16px;
  margin-bottom: 0;
}
.member-mini-card:hover {
  transform: translateY(-2px);
}
.member-mini-card .badge-cyber { padding: 2px 6px; font-size: 10px; }

.pagination-cyber {
  display: inline-flex;
  gap: 4px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.pagination-cyber a, .pagination-cyber span {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-decoration: none;
  transition: all 0.2s;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.pagination-cyber a:hover {
  color: var(--cyber-green);
  background: rgba(0,255,136,0.08);
}
.pagination-cyber .page-num.active {
  background: var(--cyber-green);
  color: #050505;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.pagination-cyber .page-disabled {
  color: #3a3f55;
  cursor: not-allowed;
}
.pagination-cyber .page-ellipsis {
  padding: 8px 8px;
  color: var(--text-secondary);
}

.public-profile-hero {
  padding-top: 0 !important;
  overflow: hidden;
}
.public-profile-banner {
  height: 120px;
  background:
    radial-gradient(circle at 30% 50%, rgba(0,255,136,0.3), transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(0,212,255,0.25), transparent 50%),
    linear-gradient(135deg, #1a1f2e, #0a0a0a);
  margin: -24px -24px 20px;
  border-bottom: 1px solid var(--bg-border);
  position: relative;
}
.public-profile-banner::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(to bottom, black, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}

.soc-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0,255,136,0.06);
  border: 1px solid var(--bg-border);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 18px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  transition: all 0.25s;
}
.soc-mini:hover {
  background: var(--cyber-green);
  color: #050505 !important;
  border-color: var(--cyber-green);
  text-decoration: none;
}

/* ===== ARTICLES / LEARNING HUB ===== */
.featured-articles-card {
  background:
    radial-gradient(circle at top right, rgba(0,255,136,0.06), transparent 50%),
    var(--bg-card);
}
.featured-card {
  display: block;
  position: relative;
  height: 240px;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  border: 1px solid var(--bg-border);
  transition: all 0.35s;
  text-decoration: none;
}
.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, #0b1220 0%, #161b2e 50%, #1a1f2e 100%);
  z-index: 0;
}
.featured-card.featured-beginner::before { background: linear-gradient(135deg, rgba(0,212,255,0.18), #0b1220 60%, #1a1f2e); }
.featured-card.featured-intermediate::before { background: linear-gradient(135deg, rgba(255,170,0,0.16), #0b1220 60%, #1a1f2e); }
.featured-card.featured-advanced::before { background: linear-gradient(135deg, rgba(255,80,80,0.18), #0b1220 60%, #1a1f2e); }
.featured-card.featured-critical::before { background: linear-gradient(135deg, rgba(255,51,85,0.25), #0b1220 55%, #1a1f2e); }

.featured-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(45deg, black, transparent 70%);
  -webkit-mask-image: linear-gradient(45deg, black, transparent 70%);
  z-index: 0;
}
.featured-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyber-green);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,255,136,0.2);
  text-decoration: none;
}
.featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.6) 50%, transparent 100%);
  z-index: 1;
}
.featured-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 18px 16px;
  z-index: 2;
}
.featured-date {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  margin-bottom: 8px;
  letter-spacing: 0.4px;
}
.featured-date i { margin-right: 3px; }
.featured-meta h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  transition: color 0.25s;
}
.featured-card:hover .featured-meta h4 { color: var(--cyber-green); }
.featured-meta p {
  color: var(--text-secondary);
  font-size: 12.5px;
  margin: 0;
  line-height: 1.5;
}
.ctf-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  background: rgba(170,0,255,0.2);
  border: 1px solid var(--cyber-purple);
  color: #d080ff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 3;
  font-family: var(--font-mono);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.articles-list-grid .article-card { margin-bottom: 18px; padding: 18px 20px; }
.article-thumb {
  height: 100%;
  min-height: 120px;
  position: relative;
  overflow: hidden;
}
.thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  color: #fff;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.thumb-fb-0 { background: linear-gradient(135deg, #0ea5e9, #0b4f73); }
.thumb-fb-1 { background: linear-gradient(135deg, #22c55e, #0a4e26); }
.thumb-fb-2 { background: linear-gradient(135deg, #a855f7, #4a1580); }
.thumb-fb-3 { background: linear-gradient(135deg, #f97316, #6b2f0a); }
.thumb-fb-4 { background: linear-gradient(135deg, #ef4444, #5e1313); }
.thumb-fb-5 { background: linear-gradient(135deg, #eab308, #604700); }

.article-top-meta {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cat-pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-family: var(--font-mono);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  border: 1px solid transparent;
}
.cat-pill-berita-security, .cat-pill-news { background: rgba(255,51,85,0.12); color: #ff6680; border-color: rgba(255,51,85,0.3); }
.cat-pill-writeup-ctf, .cat-pill-ctf { background: rgba(170,0,255,0.12); color: #d080ff; border-color: rgba(170,0,255,0.3); }
.cat-pill-tutorial-hacking, .cat-pill-tutorial, .cat-pill-web-sec, .cat-pill-reverse-engineering, .cat-pill-forensics, .cat-pill-network-security { background: rgba(0,212,255,0.1); color: #4ddbff; border-color: rgba(0,212,255,0.3); }
.cat-pill-purple { background: rgba(170,0,255,0.12); color: #d080ff; border-color: rgba(170,0,255,0.3); }
.cat-pill-green { background: rgba(0,255,136,0.1); color: var(--cyber-green); border-color: rgba(0,255,136,0.25); }
.cat-pill-orange { background: rgba(255,170,0,0.1); color: #ffc766; border-color: rgba(255,170,0,0.3); }

.ctf-pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(170,0,255,0.1);
  color: #d080ff;
  border: 1px solid rgba(170,0,255,0.3);
  font-family: var(--font-mono);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.ctf-pill i { color: var(--cyber-purple); }
.points-pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,170,0,0.1);
  color: #ffc766;
  border: 1px solid rgba(255,170,0,0.3);
  font-family: var(--font-mono);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.cat-ctf-pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(0,212,255,0.08);
  color: #8ee6ff;
  border: 1px solid rgba(0,212,255,0.3);
  text-transform: uppercase;
  font-family: var(--font-mono);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.article-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}
.article-title a {
  color: var(--text-primary);
  transition: all 0.25s;
  text-decoration: none;
}
.article-title a:hover {
  color: var(--cyber-green);
  text-shadow: 0 0 8px rgba(0,255,136,0.2);
  text-decoration: none;
}
.article-summary {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0 0 12px;
}
.article-foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.article-foot-meta span i { margin-right: 3px; }
.article-foot-meta .read-more {
  margin-left: auto;
  color: var(--cyber-green);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
}
.article-foot-meta .read-more:hover { text-shadow: 0 0 8px rgba(0,255,136,0.4); }
.article-foot-meta .read-more i { margin-left: 3px; }

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-pill {
  display: inline-block;
  padding: 4px 11px;
  font-size: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--bg-border);
  text-decoration: none;
  transition: all 0.2s;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  font-family: var(--font-mono);
}
.tag-pill small { opacity: 0.6; margin-left: 2px; font-size: 10px; }
.tag-pill:hover, .tag-pill.tag-active {
  background: rgba(0,255,136,0.1);
  color: var(--cyber-green);
  border-color: var(--cyber-green);
  text-decoration: none;
}

.recent-posts { display: flex; flex-direction: column; gap: 10px; }
.recent-post {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.25s;
}
.recent-post:hover {
  background: rgba(0,255,136,0.04);
  border-color: rgba(0,255,136,0.2);
  text-decoration: none;
}
.rp-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.rp-thumb-0 { background: linear-gradient(135deg, #0ea5e9, #0b4f73); }
.rp-thumb-1 { background: linear-gradient(135deg, #22c55e, #0a4e26); }
.rp-thumb-2 { background: linear-gradient(135deg, #a855f7, #4a1580); }
.rp-thumb-3 { background: linear-gradient(135deg, #f97316, #6b2f0a); }
.rp-thumb-4 { background: linear-gradient(135deg, #ef4444, #5e1313); }
.rp-thumb-5 { background: linear-gradient(135deg, #eab308, #604700); }
.rp-info h5 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-post:hover .rp-info h5 { color: var(--cyber-green); }
.rp-info div {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.rp-info div i { margin-right: 2px; }

.ctf-sidebar-banner {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,255,136,0.12), transparent 60%),
    var(--bg-card);
  border: 1px solid rgba(0,255,136,0.2);
}

.stat-mini {
  display: inline-block;
  padding: 5px 12px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  border: 1px solid;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.stat-mini i { margin-right: 4px; }
.stat-mini-green { background: rgba(0,255,136,0.08); color: var(--cyber-green); border-color: rgba(0,255,136,0.25); }
.stat-mini-cyan { background: rgba(0,212,255,0.08); color: var(--cyber-cyan); border-color: rgba(0,212,255,0.25); }
.stat-mini-purple { background: rgba(170,0,255,0.08); color: #d080ff; border-color: rgba(170,0,255,0.25); }

/* ===== WRITEUP CTF PAGE ===== */
.writeup-hero-card {
  background:
    radial-gradient(circle at 10% 10%, rgba(170,0,255,0.15), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(0,255,136,0.08), transparent 50%),
    var(--bg-card);
}
.writeup-mono-ascii {
  background: var(--bg-tertiary);
  border: 1px solid rgba(170,0,255,0.3);
  padding: 14px 12px;
  display: inline-block;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.category-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.cat-filter {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--bg-border);
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  transition: all 0.25s;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.cat-filter:hover { border-color: rgba(0,255,136,0.3); color: var(--cyber-green); text-decoration: none; }
.cat-filter.cf-active { background: var(--cyber-green); color: #050505; border-color: var(--cyber-green); box-shadow: 0 0 12px rgba(0,255,136,0.25); }
.cat-filter-web.cf-active { background: var(--cyber-cyan); color: #050505; border-color: var(--cyber-cyan); box-shadow: 0 0 12px rgba(0,212,255,0.25); }
.cat-filter-pwn.cf-active, .cat-filter-crypto.cf-active { background: #ffaa00; color: #050505; border-color: #ffaa00; }
.cat-filter-reverse.cf-active, .cat-filter-forensics.cf-active { background: var(--cyber-purple); color: #fff; border-color: var(--cyber-purple); }

.writeup-card { margin-bottom: 0; padding: 0; overflow: hidden; }
.writeup-card .wc-top {
  position: relative;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.writeup-card .wc-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.wc-0 { background: linear-gradient(135deg, #0ea5e9 0%, #4a1580 100%); }
.wc-1 { background: linear-gradient(135deg, #22c55e 0%, #0b4f73 100%); }
.wc-2 { background: linear-gradient(135deg, #a855f7 0%, #ef4444 100%); }
.wc-3 { background: linear-gradient(135deg, #f97316 0%, #a855f7 100%); }
.wc-4 { background: linear-gradient(135deg, #ef4444 0%, #0ea5e9 100%); }
.wc-ctf-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  background: rgba(10,10,10,0.7);
  color: #fff;
  font-family: var(--font-mono);
  backdrop-filter: blur(4px);
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.12);
}
.wc-big-ico {
  font-size: 58px;
  color: rgba(255,255,255,0.25);
  position: relative;
  z-index: 1;
}
.wc-body { padding: 14px 16px 16px; }
.wc-event {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--cyber-purple);
  margin-bottom: 6px;
  font-weight: 600;
}
.wc-event i { color: var(--cyber-purple); }
.wc-title {
  font-size: 15px;
  margin: 0 0 8px;
  font-weight: 800;
  line-height: 1.3;
}
.wc-title a { color: var(--text-primary); text-decoration: none; transition: color 0.2s; }
.wc-title a:hover { color: var(--cyber-green); text-decoration: none; }
.wc-summary {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 12px;
  min-height: 38px;
}
.wc-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  padding-top: 8px;
  border-top: 1px dashed var(--bg-border);
}
.wc-foot i { margin-right: 3px; }

/* ===== ARTICLE DETAIL ===== */
.article-hero-card {
  background:
    radial-gradient(circle at top right, rgba(0,255,136,0.06), transparent 50%),
    var(--bg-card);
  border: 1px solid rgba(0,255,136,0.15);
}
.article-header-top {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.article-headline {
  margin: 0 0 18px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--text-primary);
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.2px;
}
.article-author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--bg-border);
}
.author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1f2e, #2a2f45);
  border: 2px solid var(--cyber-green);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 800;
  color: var(--cyber-green);
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  text-shadow: 0 0 6px rgba(0,255,136,0.4);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-info { flex: 1; min-width: 0; }
.author-name {
  font-size: 14px;
  color: var(--text-primary);
}
.author-meta {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.author-meta i { margin-right: 3px; }
.author-meta .mx-2 { margin: 0 8px; opacity: 0.4; }

.article-summary-card {
  border-left: 4px solid var(--cyber-cyan);
  background: rgba(0,212,255,0.04);
}

.ctf-info-card {
  border: 1px solid rgba(170,0,255,0.3);
  background:
    radial-gradient(circle at top left, rgba(170,0,255,0.08), transparent 50%),
    var(--bg-card);
}
.ctf-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bg-border);
  border: 1px solid var(--bg-border);
}
@media (max-width: 575px) { .ctf-info-grid { grid-template-columns: 1fr; } }
.ctf-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: var(--bg-tertiary);
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}
.ctf-info-row span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  opacity: 0.8;
}
.ctf-info-row span:last-child {
  color: var(--text-primary);
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}

.article-content { padding: 28px 32px; }
.article-body {
  color: #d4dce4;
  font-size: 15.5px;
  line-height: 1.85;
  font-family: 'Poppins', sans-serif;
}
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  color: var(--text-primary);
  font-weight: 800;
  margin: 34px 0 16px;
  position: relative;
  padding-left: 14px;
}
.article-body h2 { font-size: 24px; }
.article-body h3 { font-size: 20px; }
.article-body h2::before, .article-body h3::before {
  content: "> ";
  color: var(--cyber-green);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
}
.article-body p { margin: 0 0 18px; }
.article-body a { color: var(--cyber-green); text-decoration: none; border-bottom: 1px dashed rgba(0,255,136,0.3); }
.article-body a:hover { color: var(--cyber-cyan); border-color: var(--cyber-cyan); text-shadow: 0 0 6px rgba(0,255,136,0.3); }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body ul li, .article-body ol li { margin-bottom: 8px; }
.article-body ul li::marker { color: var(--cyber-green); }
.article-body blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  background: var(--bg-tertiary);
  border-left: 4px solid var(--cyber-green);
  color: #c2cad2;
  font-style: italic;
}
.article-body code, .article-body kbd {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 2px 6px;
  background: #0d1117;
  color: var(--cyber-green);
  border: 1px solid var(--bg-border);
  border-radius: 0;
}
.article-body pre {
  position: relative;
  margin: 20px 0;
  background: #0a0a0a;
  border: 1px solid var(--bg-border);
  padding: 16px 18px 16px 46px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #d4dce4;
}
.article-body pre::before {
  content: "$ ";
  color: var(--cyber-green);
  position: absolute;
  left: 18px;
  font-family: var(--font-mono);
  font-weight: 700;
}
.article-body code.comment-cmt { color: #6e7681 !important; font-style: italic; }

.article-body img {
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  display: block;
  border: 1px solid var(--bg-border);
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
.article-body table th {
  background: var(--bg-tertiary);
  color: var(--cyber-green);
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--bg-border);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.article-body table td {
  padding: 10px 14px;
  border: 1px solid var(--bg-border);
  color: #c2cad2;
}
.article-body hr {
  border: none;
  border-top: 1px dashed var(--bg-border);
  margin: 28px 0;
}

.flag-box {
  padding: 18px 22px;
  background:
    repeating-linear-gradient(45deg, rgba(0,255,136,0.03) 0 10px, transparent 10px 20px),
    rgba(0,255,136,0.05);
  border: 1px dashed var(--cyber-green);
  position: relative;
  overflow: hidden;
}
.flag-string {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--cyber-green);
  letter-spacing: 0.5px;
  padding: 6px 12px;
  background: #0a0a0a;
  border: 1px solid var(--cyber-green);
  display: inline-block;
  text-shadow: 0 0 8px rgba(0,255,136,0.4);
}
.flag-string i { color: var(--cyber-green); margin-right: 6px; }

.author-box-card {
  border: 1px solid rgba(0,212,255,0.25);
  background:
    radial-gradient(circle at 100% 0%, rgba(0,212,255,0.08), transparent 50%),
    var(--bg-card);
}

.related-card {
  display: block;
  height: 100%;
  border: 1px solid var(--bg-border);
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: all 0.3s;
  text-decoration: none;
  background: var(--bg-card);
  position: relative;
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--cyber-green);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.related-top {
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.related-top i { font-size: 40px; color: rgba(255,255,255,0.28); }
.related-top::after {
  content:"";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
.related-0 { background: linear-gradient(135deg,#0ea5e9,#4a1580); }
.related-1 { background: linear-gradient(135deg,#22c55e,#0b4f73); }
.related-2 { background: linear-gradient(135deg,#a855f7,#ef4444); }
.related-3 { background: linear-gradient(135deg,#f97316,#a855f7); }
.related-4 { background: linear-gradient(135deg,#ef4444,#0ea5e9); }
.related-5 { background: linear-gradient(135deg,#eab308,#604700); }
.related-body { padding: 12px 14px 14px; }
.related-body h5 {
  margin: 4px 0 8px;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.related-card:hover .related-body h5 { color: var(--cyber-green); }

/* ===== COMMENTS ===== */
.comment-form {
  padding: 16px 18px;
  background: var(--bg-tertiary);
  border: 1px dashed var(--bg-border);
  margin-bottom: 20px;
}
.comments-list { display: flex; flex-direction: column; gap: 2px; }
.comment-item {
  padding: 14px 0;
  border-bottom: 1px dashed var(--bg-border);
}
.comment-item:last-child { border-bottom: none; }
.reply-btn {
  background: transparent;
  border: none;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--cyber-green);
  cursor: pointer;
  font-family: var(--font-mono);
  border: 1px solid transparent;
  transition: all 0.2s;
}
.reply-btn:hover {
  border-color: rgba(0,255,136,0.3);
  background: rgba(0,255,136,0.06);
}

.article-side-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-border);
  border: 1px solid var(--bg-border);
}
.side-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: var(--bg-tertiary);
  font-size: 13px;
  color: var(--text-secondary);
}
.side-info-row span:first-child i { margin-right: 5px; color: var(--cyber-green); }
.side-info-row span:last-child {
  color: var(--text-primary);
  font-weight: 700;
  font-family: var(--font-mono);
}


.iconbox-cyan .icon { border-color: rgba(0,212,255,0.4); box-shadow: inset 0 0 15px rgba(0,212,255,0.1); background: rgba(0,212,255,0.08); }
.iconbox-cyan .icon i { color: var(--cyber-cyan); }

@media (max-width: 768px) { .cyber-illustration-box { overflow-x: hidden; width: 100%; } .ascii-art { font-size: 4px; overflow-x: auto; } .badge-cyber { display: inline-block; margin-bottom: 8px; font-size: 11px; padding: 4px 8px; } }


/* =========================================================
   ULTRA-COOL CYBERPUNK MOBILE DRAWER HUD NAVIGATION
   ========================================================= */
body.mobile-nav-active {
  overflow: hidden !important;
  touch-action: none;
}

.navbar-mobile {
  position: fixed !important;
  overflow: hidden !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(3, 7, 18, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 99999 !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 999999 !important;
  color: #00ff88 !important;
  font-size: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(0, 255, 136, 0.12) !important;
  border: 1px solid rgba(0, 255, 136, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.navbar-mobile .mobile-nav-toggle:active {
  transform: scale(0.92);
}

.navbar-mobile ul {
  display: block !important;
  position: absolute !important;
  top: 72px !important;
  right: 14px !important;
  bottom: 20px !important;
  left: 14px !important;
  max-height: calc(100vh - 92px) !important;
  padding: 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(13, 19, 33, 0.97), rgba(7, 10, 15, 0.98)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid rgba(0, 212, 255, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), inset 0 0 25px rgba(0,212,255,0.04) !important;
  animation: slideUpNav 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom scrollbar inside mobile drawer */
.navbar-mobile ul::-webkit-scrollbar {
  width: 5px;
}
.navbar-mobile ul::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.25);
  border-radius: 3px;
}

@keyframes slideUpNav {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.navbar-mobile ul li {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}

.navbar-mobile ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  color: #cbd5e1 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-left: 3px solid transparent !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.navbar-mobile ul li a i {
  font-size: 18px !important;
  width: 22px !important;
  text-align: center !important;
  color: #00d4ff !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.navbar-mobile ul li a i.bi-chevron-down {
  margin-left: auto !important;
  font-size: 13px !important;
  color: #64748b !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navbar-mobile ul li a i.bi-chevron-down.rotate-180 {
  transform: rotate(180deg) !important;
  color: #00ff88 !important;
}

.navbar-mobile ul li a:hover,
.navbar-mobile ul li a.active {
  color: #00ff88 !important;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.12), rgba(0, 212, 255, 0.04)) !important;
  border-color: rgba(0, 255, 136, 0.3) !important;
  border-left: 3px solid #00ff88 !important;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.1) !important;
  padding-left: 16px !important;
}

.navbar-mobile ul li a:hover i,
.navbar-mobile ul li a.active i {
  color: #00ff88 !important;
}

.navbar-mobile .dropdown ul {
  position: static !important;
  display: none !important;
  margin: 6px 0 6px 10px !important;
  padding: 8px !important;
  background: rgba(7, 10, 15, 0.85) !important;
  border: 1px solid rgba(0, 212, 255, 0.15) !important;
  border-left: 2px solid #00d4ff !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6) !important;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block !important;
  animation: fadeInDropdown 0.25s ease forwards;
}

@keyframes fadeInDropdown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.navbar-mobile .dropdown ul li {
  margin-bottom: 4px !important;
}

.navbar-mobile .dropdown ul li a {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
}

.navbar-mobile .dropdown ul li a:hover {
  color: #00d4ff !important;
  background: rgba(0, 212, 255, 0.08) !important;
  padding-left: 14px !important;
}

.navbar-mobile .dropdown ul li a:hover i {
  color: #00d4ff !important;
}

/* Mobile notification dropdown panel responsiveness */
@media (max-width: 991px) {
  .navbar-mobile .notif-bell-wrap {
    width: 100% !important;
    display: block !important;
  }
  .navbar-mobile .notif-dropdown-panel {
    position: static !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
    border-radius: 8px !important;
    clip-path: none !important;
  }
}

#header:has(.navbar-mobile) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}