/* =================================================
   MOHD ALIFF – CYBER NEON CORPORATE SYSTEM
   Digital • Corporate • Neon Glass (Desktop-first)
   CLEAN + SAFE (NO DUPLICATES)
================================================= */

/* ================= TOKENS ================= */
:root{
  --bg:#060914;
  --bg2:#070B1A;

  --violet:#5B3DF5;
  --cyan:#00F0FF;

  --text:#EAF0FF;
  --muted:rgba(255,255,255,0.64);

  --radius:20px;
  --container:1180px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --nav-h:74px;

  /* Background controls */
  --grid: rgba(255,255,255,0.055);
  --noise: rgba(255,255,255,0.035);

  /* Unified typography */
  --h1:48px;   /* page header H1 baseline */
  --h2:28px;   /* section title H2 */
}

/* ================= RESET ================= */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--text);
  min-height:100vh;
  line-height:1.65;
  font-size:16px;
  letter-spacing:.2px;
  padding-top:var(--nav-h);

  background:
    radial-gradient(1200px 600px at 18% 10%, rgba(91,61,245,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(0,240,255,.12), transparent 60%),
    radial-gradient(900px 650px at 60% 92%, rgba(91,61,245,.10), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2) 60%, #080F24 100%);
  position:relative;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.2;font-weight:700}
p{color:var(--muted)}
small{color:rgba(255,255,255,0.62)}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
main{padding-top:0}

/* =================================================
   BACKGROUND LAYERS
================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.18;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9) 40%, transparent 75%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 2px,
      var(--noise) 3px,
      transparent 4px
    );
  opacity:.12;
  mix-blend-mode:overlay;
}

/* Optional glow blobs */
.glow{
  position:fixed;
  width:520px;
  height:520px;
  filter:blur(60px);
  opacity:.18;
  pointer-events:none;
  z-index:-1;
}
.glow.blue{left:-160px;top:140px;background:rgba(0,240,255,.55)}
.glow.purple{right:-180px;top:-120px;background:rgba(91,61,245,.65)}
.glow.cyan{right:120px;bottom:-220px;background:rgba(0,240,255,.40)}

/* ================= NAVBAR ================= */
.navbar{
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
  background: rgba(6,9,20,0.72);
  border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
}
.navbar .nav-inner{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:26px;

  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand-mark{display:flex;align-items:center;justify-content:center;height:34px}
.brand-mark img{
  height:70px;width:auto;object-fit:contain;
  filter:
    drop-shadow(0 0 10px rgba(91,61,245,.20))
    drop-shadow(0 0 10px rgba(0,240,255,.14));
}
.brand-text{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand-text strong{font-size:14px;letter-spacing:.35px;line-height:1}
.brand-text span{font-size:16px;opacity:.72;letter-spacing:.25px;line-height:1}

.nav-links{
  display:flex;align-items:center;justify-content:center;
  gap:36px;flex:1;min-width:0;
}
.nav-links a{
  font-size:14px;font-weight:500;letter-spacing:.3px;
  color:rgba(255,255,255,0.62);
  position:relative;padding:8px 0;transition:.25s ease;line-height:1;
  white-space:nowrap;
}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--cyan)}
.nav-links a.active::after{
  content:"";position:absolute;left:0;bottom:-10px;width:100%;height:2px;
  background:var(--cyan);box-shadow:0 0 12px rgba(0,240,255,.35);
}

.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex:0 0 auto}

.isekolah-btn{
  height:36px;padding:0 22px;display:flex;align-items:center;justify-content:center;
  border-radius:30px;border:1px solid rgba(91,61,245,.65);
  font-size:13px;font-weight:600;color:rgba(91,61,245,.95);
  transition:.3s;white-space:nowrap;background: rgba(255,255,255,0.02);
}
.isekolah-btn:hover,.isekolah-btn.active{
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  color:#060914;border:1px solid transparent;
  box-shadow:0 0 22px rgba(91,61,245,.22), 0 0 18px rgba(0,240,255,.14);
}

.lang-toggle{
  display:flex;align-items:center;height:36px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:30px;padding:4px;gap:6px;
}
.lang-btn{
  border:none;background:transparent;padding:6px 16px;border-radius:20px;
  font-size:13px;color:rgba(255,255,255,0.62);cursor:pointer;transition:.3s;
}
.lang-btn.active{
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  color:#060914;font-weight:600;
}

/* =================================================
   PAGE HEADER (Unified H1 baseline)
================================================= */
.page-header{
  padding:64px 0 34px;
  text-align:left;
}
.page-header .container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.page-header h1{
  font-size:var(--h1);
  line-height:1.15;
  font-weight:700;
  margin:0 0 18px;
  letter-spacing:.3px;
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}
.page-header h1::after{
  content:"";
  position:absolute;left:0;bottom:0;
  height:3px;width:58px;border-radius:999px;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--violet));
  background-size:200% 100%;
  box-shadow:0 0 14px rgba(0,240,255,.25), 0 0 18px rgba(91,61,245,.20);
  animation: glowSweep 2.6s ease-in-out infinite;
  opacity:.95;
}
.page-header h1::before{
  content:"";
  position:absolute;left:0;bottom:1px;
  height:1px;width:140px;border-radius:999px;
  background: rgba(255,255,255,0.12);
}
@keyframes glowSweep{
  0%{background-position:0% 50%;filter:brightness(1)}
  50%{background-position:100% 50%;filter:brightness(1.12)}
  100%{background-position:0% 50%;filter:brightness(1)}
}
.page-header p{
  font-size:18px;
  max-width:720px;
  line-height:1.6;
  margin:0;
}

/* =================================================
   SECTION TITLES (Unified H2)
================================================= */
.section-title{margin-bottom:26px}
.section-title h2{font-size:var(--h2);margin-bottom:8px}
.section-title p{max-width:820px}

/* =================================================
   CARDS (Neon Glass)
================================================= */
.card{
  padding:30px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.028)),
    radial-gradient(900px 280px at 10% 0%, rgba(91,61,245,.10), transparent 55%),
    radial-gradient(900px 280px at 90% 0%, rgba(0,240,255,.08), transparent 55%);
  box-shadow:0 12px 40px rgba(0,0,0,0.28);
  transition:.28s ease;
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;inset:-2px;
  background:linear-gradient(90deg, rgba(91,61,245,.25), rgba(0,240,255,.18), rgba(91,61,245,.22));
  opacity:0;
  filter:blur(18px);
  transition:.28s ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color: rgba(0,240,255,.28);
  box-shadow:
    0 16px 50px rgba(0,0,0,0.34),
    0 0 26px rgba(91,61,245,.14),
    0 0 18px rgba(0,240,255,.10);
}
.card:hover::after{opacity:.9}

/* =================================================
   GRIDS
================================================= */
.grid-3,.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  align-items:stretch;
}
.grid-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  align-items:stretch;
}
.grid .card, .grid-3 .card{min-height:170px}

/* =================================================
   HERO (Utama)
================================================= */
.hero{padding:100px 0 80px}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:60px;
}
.badge-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.badge{
  padding:6px 14px;border-radius:30px;font-size:12px;
  border:1px solid rgba(91,61,245,.55);
  color:rgba(91,61,245,.95);
  background: rgba(255,255,255,0.02);
}
.hero h1{font-size:52px;margin-bottom:20px}
.hero-tagline{font-size:20px;color:var(--cyan);margin-bottom:18px}
.hero-desc{max-width:560px;margin-bottom:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  padding:12px 22px;border-radius:30px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  font-size:14px;transition:.25s ease;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.btn.primary{
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  color:#05070D;border:1px solid transparent;
  box-shadow:0 0 20px rgba(91,61,245,.18), 0 0 14px rgba(0,240,255,.10);
}
.btn.ghost{ background: rgba(255,255,255,0.03); }
.btn:hover{transform:translateY(-2px)}

.profile-glass{
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  box-shadow:0 18px 60px rgba(0,0,0,0.35), 0 0 26px rgba(91,61,245,.12);
}

/* =================================================
   STATS (Centralised)
================================================= */
.stats-section{padding:26px 0 46px}
.stats-center{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}
.stat-box{
  padding:24px 26px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    radial-gradient(900px 320px at 12% 0%, rgba(91,61,245,.22), transparent 60%),
    radial-gradient(900px 320px at 88% 0%, rgba(0,240,255,.18), transparent 60%);
  box-shadow:
    0 16px 50px rgba(0,0,0,0.30),
    0 0 26px rgba(91,61,245,.10),
    0 0 18px rgba(0,240,255,.08);
  text-align:center;
}
.stat-box h2{
  font-size:40px;
  line-height:1.05;
  margin-bottom:10px;
  letter-spacing:.4px;
}
.stat-box p{
  font-size:15px;
  color:rgba(255,255,255,0.72);
  margin:0;
}

/* =================================================
   FOOTER
================================================= */
.footer{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:26px 0;
  background: rgba(6,9,20,0.40);
}
.footer-grid{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.footer-links{display:flex;gap:14px}
.footer-links a{color:rgba(255,255,255,0.70);font-size:14px}
.footer-links a:hover{color:#fff;text-decoration:underline}

/* =================================================
   iSEKOLAH — HERO + BANNER + GRID
================================================= */
.isekolah-hero{ padding:58px 0 18px; }
.isekolah-hero h1{
  font-size:18px;
  letter-spacing:2px;
  color:rgba(255,255,255,0.72);
  text-transform:uppercase;
  margin-bottom:10px;
}
.isekolah-hero h2{
  font-size:52px;
  line-height:1.05;
  margin-bottom:12px;
}
.isekolah-hero p{
  max-width:720px;
  font-size:18px;
  line-height:1.65;
}

.isekolah-banner{ padding:18px 0 10px; }
.isekolah-banner-wrap{
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  box-shadow:0 18px 60px rgba(0,0,0,0.35);
  position: relative;
}

.isekolah-apps-section{ padding:26px 0 70px; }

.isekolah-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
  margin-top:18px;
}

/* App card dirender oleh JS: <article class="card app-card"> */
.app-card{
  cursor:pointer;
  padding:22px 22px 18px;
  border-radius:22px;
  min-height:170px;
}
.app-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.app-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.4px;
  color:rgba(255,255,255,0.88);
  border:1px solid rgba(91,61,245,.45);
  background: rgba(255,255,255,0.03);
}
.app-title{font-size:18px;line-height:1.25;margin-top:6px}
.app-desc{font-size:14px;line-height:1.55;color:rgba(255,255,255,0.68);margin-top:8px}
.app-footer{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,0.62);
  font-size:13px;
}
.app-lock{opacity:.9}

/* =================================================
   MODAL (Password Protection) — HTML uses .modal#adminModal
   IMPORTANT: this must exist for JS openModal()
================================================= */
.modal{
  position:fixed;
  inset:0;
  display:none;                 /* default hidden */
  align-items:center;
  justify-content:center;
  padding:24px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  z-index: 9999;                /* ensure above everything */
}
.modal.open{ display:flex; }

.modal-card{
  width:min(520px, 92vw);
  border-radius:22px;
  padding:22px 22px 18px;
  position:relative;
  border:1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
    radial-gradient(900px 320px at 10% 0%, rgba(91,61,245,.18), transparent 55%),
    radial-gradient(900px 320px at 90% 0%, rgba(0,240,255,.12), transparent 55%);
  box-shadow: 0 18px 70px rgba(0,0,0,0.55);
}

.admin-modal-close{
  position:absolute;
  top:14px;
  right:14px; /* kanan atas */
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.85);
  cursor:pointer;
  transition:.25s ease;
}
.admin-modal-close:hover{
  background:rgba(255,255,255,0.12);
  border-color: rgba(0,240,255,0.35);
  box-shadow: 0 0 14px rgba(0,240,255,.12);
}
.admin-modal-close svg{width:14px;height:14px;display:block}

.modal-title{ font-size:20px; margin: 6px 0 6px; }
.modal-sub{ font-size:14px; margin:0 0 14px; color:rgba(255,255,255,0.70); }

.modal-label{ display:block; margin-top:14px; opacity:.85; font-size:14px; }
.modal-input{
  width:100%;
  margin-top:8px;
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(6,9,20,0.55);
  color:#EAF0FF;
  outline:none;
}
.modal-input:focus{
  border-color: rgba(0,240,255,0.28);
  box-shadow: 0 0 0 3px rgba(0,240,255,0.10);
}
.modal-error{
  margin-top:10px;
  color:rgba(255,120,120,0.92);
  font-size:13px;
  min-height:18px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

/* =================================================
   RESPONSIVE (mobile later)
================================================= */
@media(max-width:1000px){
  .grid,.grid-2,.grid-3{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .stats-center{grid-template-columns:1fr}
  .footer-grid{flex-direction:column;align-items:flex-start}
  .isekolah-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media(max-width:640px){
  .isekolah-grid{grid-template-columns:1fr}
  .isekolah-hero h2{font-size:42px}
}

/* =================================================
   FORCE MODAL FIX (letak PALING BAWAH style.css)
   - pastikan popup admin muncul bila JS tambah class .open
================================================= */

#adminModal.modal{
  position: fixed !important;
  inset: 0 !important;
  display: none !important;           /* default hidden */
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 99999 !important;          /* pastikan atas semua */
}

#adminModal.modal.open{
  display: flex !important;           /* WAJIB bila open */
}

#adminModal .modal-card{
  width: min(520px, 92vw) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  position: relative !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important,
    radial-gradient(900px 320px at 10% 0%, rgba(91,61,245,.18), transparent 55%) !important,
    radial-gradient(900px 320px at 90% 0%, rgba(0,240,255,.12), transparent 55%) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,0.55) !important;
}

#adminModal .admin-modal-close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.85) !important;
  cursor: pointer !important;
}

/* ===== Modal Single Button Layout ===== */
.modal-actions.single{
  display:flex;
  justify-content:center;   /* center button */
  margin-top:22px;          /* jarak bawah input */
}

.modal-actions.single .btn{
  min-width:180px;          /* kekalkan rasa premium */
}

/* =================================================
   GLOBAL SECTION RHYTHM (SAFE PATCH)
   - betulkan padding section termasuk "Projek Terpilih"
================================================= */

.section{
  padding: 70px 0;
}

.section .section-title{
  margin-bottom: 26px;
}

/* Jika ada section berturut-turut, elak nampak "terlalu jauh" */
.section + .section{
  padding-top: 0;
}

/* “Projek Terpilih” biasanya selepas grid — bagi spacing yang kemas */
.section .grid,
.section .grid-3,
.section .grid-2{
  margin-top: 0;
}

/* Jika anda guna anchor/scroll ke section, elak navbar cover tajuk */
[id]{
  scroll-margin-top: calc(var(--nav-h) + 18px);
}

.section{ padding: 40px 0 70px; }

.contact-grid{ gap: 32px; }

.contact-list{ margin-top: 14px; display: grid; gap: 14px; }

.contact-item{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.contact-label{ font-size: 13px; color: rgba(255,255,255,0.65); margin-bottom: 6px; }
.contact-value{ font-size: 15px; color: rgba(255,255,255,0.88); }
.contact-value:hover{ text-decoration: underline; }

/* CONTACT SECTION REFINEMENT */
.contact-section {
  padding: 50px 0 90px;
}

.contact-grid {
  gap: 36px;
  align-items: stretch;
}

.contact-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Contact List */
.contact-list {
  margin-top: 20px;
  display: grid;
  gap: 16px;
}

.contact-item {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.contact-label {
  font-size: 13px;
  letter-spacing: .3px;
  color: rgba(255,255,255,0.60);
  margin-bottom: 6px;
}

.contact-value {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.90);
}

.contact-value:hover {
  text-decoration: underline;
}

/* Services List */
.contact-services {
  margin-top: 20px;
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
}

.contact-services li {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(91,61,245,.25);
  background: rgba(255,255,255,0.03);
  font-size: 14px;
  transition: .25s ease;
}

.contact-services li:hover {
  border-color: rgba(0,240,255,.35);
  background: rgba(255,255,255,0.06);
  transform: translateX(6px);
}

/* Button spacing */
.contact-actions {
  margin-top: 24px;
}

/* ===============================
   FIX: List dalam card terlalu terang
================================ */
.card ul,
.card ol{
  margin-top: 0px;
  padding-left: 22px;
}

.card li{
  color: var(--muted);           /* ikut tone teks card lain */
  line-height: 1.65;
}

/* jika ada <strong> dalam li, biar highlight sikit */
.card li strong{
  color: rgba(234,240,255,0.92);
}

/* bullet pun ikut tone lembut */
.card li::marker{
  color: rgba(255,255,255,0.55);
}

/* ===============================
   Footer Center Alignment
================================ */
.footer {
  text-align: center;
}

.footer-grid {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =================================================
   UNIVERSAL BACKGROUND FIX (REMOVE "DIVIDER" SEAM)
   Tampal PALING BAWAH style.css
================================================= */

/* 1) Lock background layers supaya tak nampak "garis sambungan" bila scroll */
body{
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
}

/* 2) Pastikan tiada section letak background yang buat band/divider */
section{
  background: transparent !important;
}

/* Jika ada class section tertentu yang pernah diberi bg, paksa transparent juga */
.hero,
.stats-section,
.isekolah-hero,
.isekolah-banner,
.isekolah-apps-section{
  background: transparent !important;
}

/* 3) Stabilkan overlay grid/noise (Chrome kadang muncul seam) */
body::before,
body::after{
  transform: translateZ(0);
  will-change: transform;
}

/* Mask kadang tak konsisten kalau hanya mask-image (Safari/Chrome) */
body::before{
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9) 40%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.9) 40%, transparent 75%);
}

.blog-card .app-desc{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card .app-title{
  margin-top:6px;
}

/* ===============================
   TIMELINE (Programs/Achievements)
================================ */
.timeline{
  display:grid;
  gap:16px;
}

.tl-item{
  position:relative;
  padding:18px 18px 18px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.028)),
    radial-gradient(900px 280px at 10% 0%, rgba(91,61,245,.10), transparent 55%),
    radial-gradient(900px 280px at 90% 0%, rgba(0,240,255,.08), transparent 55%);
  box-shadow:0 12px 40px rgba(0,0,0,0.28);
  overflow:hidden;
  transition:.25s ease;
}

.tl-item::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg, rgba(91,61,245,.25), rgba(0,240,255,.18), rgba(91,61,245,.22));
  opacity:0;
  filter:blur(18px);
  transition:.25s ease;
  pointer-events:none;
}
.tl-item:hover{
  transform:translateY(-4px);
  border-color: rgba(0,240,255,.24);
}
.tl-item:hover::after{ opacity:.9; }

.tl-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.tl-year{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.4px;
  color:rgba(255,255,255,0.88);
  border:1px solid rgba(91,61,245,.45);
  background: rgba(255,255,255,0.03);
}

.tl-tag{
  font-size:12px;
  color: rgba(255,255,255,0.65);
}

.tl-title{
  font-size:16px;
  line-height:1.3;
  margin:0 0 6px;
}

.tl-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  color: rgba(255,255,255,0.68);
  font-size:13px;
}

.tl-meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  opacity:.95;
}

.tl-dot{
  width:6px;height:6px;border-radius:99px;
  background: rgba(0,240,255,0.65);
  box-shadow: 0 0 14px rgba(0,240,255,0.20);
}

/* =========================
   ABOUT — TIMELINE
========================= */

.timeline {
  position: relative;
  margin-top: 32px;
  padding-left: 24px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(91,61,245,.6),
    rgba(0,240,255,.6)
  );
  box-shadow: 0 0 12px rgba(0,240,255,.3);
}

.timeline-item {
  position: relative;
  margin-bottom: 28px;
  padding-left: 24px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow:
    0 0 12px rgba(91,61,245,.6),
    0 0 12px rgba(0,240,255,.5);
}

.timeline-year {
  font-size: 13px;
  letter-spacing: .6px;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

.timeline-content {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: .25s ease;
}

.timeline-content:hover {
  transform: translateY(-4px);
  border-color: rgba(0,240,255,.25);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.45),
    0 0 20px rgba(0,240,255,.15);
}

.timeline-content h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.timeline-meta {
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

/* ===== ABOUT Timeline Meta Chips (Org + Level) ===== */
.timeline-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.meta-chip{
  font-size:12px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  letter-spacing:.2px;
}

.meta-chip.level{
  border-color: rgba(91,61,245,.45);
  box-shadow: 0 0 14px rgba(91,61,245,.14);
}

.meta-chip.org{
  border-color: rgba(0,240,255,.30);
  box-shadow: 0 0 14px rgba(0,240,255,.10);
}

/* ==========================================
   PROFILE CAROUSEL (Neon Corporate)
========================================== */

.profile-carousel{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:20px;
  overflow:hidden;
  margin-bottom:22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 24px rgba(91,61,245,.08);
}

.carousel-track{
  display:flex;
  height:100%;
  transition: transform .6s ease;
}

.carousel-slide{
  min-width:100%;
  height:100%;
}

.carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Arrows */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color:#fff;
  cursor:pointer;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  transition:.25s;
}

.carousel-btn:hover{
  border-color: rgba(0,240,255,.35);
  box-shadow:0 0 16px rgba(0,240,255,.2);
}

.carousel-btn.prev{ left:14px; }
.carousel-btn.next{ right:14px; }

/* Dots */
.carousel-dots{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}

.carousel-dots button{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:.3s;
}

.carousel-dots button.active{
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  box-shadow:0 0 10px rgba(0,240,255,.4);
}

/* ==========================================
   ABOUT — Animated Stats
========================================== */

.about-stats{
  padding: 10px 0 40px;
}

.about-stats .stat-box{
  padding: 20px 24px;
  border-radius: 22px;
  min-height: auto;
  text-align:center;
}

.about-stats .stat-box h2{
  font-size: 38px;
  font-weight:700;
  margin-bottom:8px;
  letter-spacing:.5px;
}

.about-stats .stat-box p{
  font-size:14px;
  opacity:.75;
}

/* ================= ABOUT: ACHIEVEMENTS CAROUSEL ================= */
.ach-carousel{
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 16px;
}

.ach-viewport{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) - 6px);
}

.ach-track{
  display: flex;
  gap: 14px;
  transform: translateX(0);
  transition: transform 520ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

.ach-slide{
  flex: 0 0 100%;
  position: relative;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  aspect-ratio: 16 / 9; /* ✅ tukar ke 4/3 jika perlu */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}

.ach-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

.ach-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 15% 15%, rgba(91,61,245,0.22), transparent 55%),
    radial-gradient(120% 90% at 85% 25%, rgba(0,240,255,0.18), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,0.30), transparent 55%);
  pointer-events:none;
}

.ach-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-58%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(7,11,26,0.55);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 24px;
  line-height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.ach-nav:hover{
  transform: translateY(-58%) scale(1.04);
  background: rgba(7,11,26,0.72);
  border-color: rgba(255,255,255,0.20);
}

.ach-nav.prev{ left: 14px; }
.ach-nav.next{ right: 14px; }

.ach-ui{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}

.ach-dots{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ach-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.ach-dot.active{
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  border-color: rgba(255,255,255,0.25);
  transform: scale(1.08);
}

.ach-hint{
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  white-space: nowrap;
}

@media (max-width: 820px){
  .ach-carousel{ padding: 14px; }
  .ach-nav{ display:none; } /* mobile: swipe */
  .ach-ui{ flex-direction: column; align-items:flex-start; }
  .ach-hint{ white-space: normal; }
}

/* ================= ABOUT: ACHIEVEMENT CAROUSEL ================= */
.about-carousel{
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 16px 50px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* 16:9 stage (premium feel) */
.about-carousel::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}

.about-carousel-track{
  position:absolute;
  inset:0;
  display:flex;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.about-carousel-slide{
  flex: 0 0 100%;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 600px at 30% 20%,
    rgba(91,61,245,0.20),
    rgba(0,240,255,0.10) 35%,
    rgba(0,0,0,0) 70%);
}

.about-carousel-slide img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  filter: saturate(1.05) contrast(1.02);
}

/* subtle overlay sheen */
.about-carousel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,240,255,0.12), rgba(91,61,245,0.12)),
    radial-gradient(800px 300px at 70% 10%, rgba(255,255,255,0.08), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  opacity:.45;
}

/* Buttons */
.about-carousel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(6,9,20,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
}

.about-carousel-btn:hover{
  background: rgba(6,9,20,0.62);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-50%) scale(1.03);
}

.about-carousel-btn:active{
  transform: translateY(-50%) scale(0.98);
}

.about-carousel-btn.prev{ left: 12px; }
.about-carousel-btn.next{ right: 12px; }

/* Dots */
.about-carousel-dots{
  position:absolute;
  left:50%;
  bottom:12px;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  z-index:3;
  padding: 6px 10px;
  border-radius:999px;
  background: rgba(6,9,20,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.about-carousel-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.about-carousel-dot.is-active{
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 0 6px rgba(0,240,255,0.08);
  transform: scale(1.08);
}

/* Hide controls on very small screens */
@media (max-width: 520px){
  .about-carousel-btn{ display:none; }
  .about-carousel-dots{ bottom:10px; }
}

/* ================= ABOUT: BANNER CAROUSEL ================= */
.about-banner .banner-card{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.about-banner .carousel{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.about-banner .carousel-track{
  height: 100%;
  position: relative;
}

.about-banner .carousel-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity .35s ease;
}

.about-banner .carousel-slide.active{
  opacity: 1;
}

.about-banner .carousel-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* buttons/dots (kalau dah ada, ini akan kemaskan sahaja) */
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.carousel-btn.prev{ left: 14px; }
.carousel-btn.next{ right: 14px; }

.carousel-dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.carousel-dots button{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.35);
}
.carousel-dots button.active{
  background: linear-gradient(90deg, var(--violet), var(--cyan));
}

/* ================= ABOUT: STATS (3 ITEMS) ================= */
.about-stats .stats-center{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.about-stats .stat-box{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 22px 22px;
  text-align: center;
}

.about-stats .stat-box h2{
  margin: 0;
  font-size: 44px;
  line-height: 1.05;
}

.about-stats .stat-box .stat-text{
  font-size: 34px;
}

.about-stats .stat-box p{
  margin: 10px 0 0;
  color: var(--muted);
  letter-spacing: .2px;
}

@media (max-width: 900px){
  .about-stats .stats-center{ grid-template-columns: 1fr; }
}