@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cairo:wght@700;800;900&family=Tajawal:wght@300;400;500;700&display=swap');

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  --navy:        #0d1b2a;
  --navy-mid:    #1a2d45;
  --navy-light:  #243b55;
  --lemon:       #f5e642;
  --lemon-hot:   #ffcc00;
  --lemon-dim:   rgba(245,230,66,0.12);
  --lemon-glow:  rgba(245,230,66,0.35);
  --gold:        #d4a017;
  --white:       #ffffff;
  --off-white:   #f0f4f8;
  --muted:       #7a8fa6;
  --border-dark: rgba(255,255,255,0.07);
  --border-lite: rgba(255,255,255,0.15);
  --radius:      14px;
  --ease:        0.3s ease;

  /* gradients */
  --grad-hero:   linear-gradient(135deg, #0d1b2a 0%, #1a2d45 40%, #0d2137 100%);
  --grad-gold:   linear-gradient(135deg, #f5e642 0%, #ffcc00 50%, #d4a017 100%);
  --grad-card:   linear-gradient(145deg, #1a2d45 0%, #0d1b2a 100%);
  --grad-section:linear-gradient(180deg, #0d1b2a 0%, #111f30 100%);
}

/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
h1,h2,h3,h4,.nav-logo,.section-title,.stat-num,.service-title,.value-title,.vm-label,.h-card-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
}
img { display:block; max-width:100%; }
a  { text-decoration:none; color:inherit; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#0d1b2a; }
::-webkit-scrollbar-thumb { background:var(--lemon); border-radius:4px; }

/* ══════════════════════════════════════
   PATTERNS (reusable)
══════════════════════════════════════ */
.pattern-dots {
  background-image: radial-gradient(rgba(245,230,66,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}
.pattern-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.pattern-lines {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(245,230,66,0.03) 8px,
    rgba(245,230,66,0.03) 9px
  );
}

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: 70px; padding: 0 48px;
  display: flex; align-items:center; justify-content:space-between;
  background: rgba(13,27,42,0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(245,230,66,0.15);
  transition: all var(--ease);
}
.navbar.scrolled {
  background: rgba(13,27,42,0.98);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.nav-logo {
  font-size: 1.9rem;
  letter-spacing: 3px;
  color: var(--white);
  line-height: 1;
}
.nav-logo span { color: var(--lemon); }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a {
  font-size: 0.875rem; color: var(--muted);
  font-weight: 500; font-family: 'Barlow', sans-serif;
  transition: color var(--ease); position:relative; padding-bottom:3px;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--grad-gold);
  transition: width var(--ease);
  border-radius: 2px;
}
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  background: var(--grad-gold) !important;
  color: var(--navy) !important;
  padding: 10px 24px; border-radius: 8px;
  font-weight: 700 !important; font-size: 0.85rem !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 1.5px !important;
  transition: all var(--ease) !important;
  box-shadow: 0 4px 15px rgba(245,230,66,0.25);
}
.nav-cta::after { display:none !important; }
.nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(245,230,66,0.4) !important;
}
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { display:block; width:26px; height:2px; background:var(--white); border-radius:2px; transition:var(--ease); }
.mobile-menu {
  display:none; flex-direction:column;
  position:fixed; top:70px; left:0; right:0; z-index:999;
  background: rgba(13,27,42,0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(245,230,66,0.15);
  padding: 20px 24px; gap:4px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  color:var(--muted); font-size:0.95rem;
  padding:13px 0; border-bottom:1px solid var(--border-dark);
  transition:color var(--ease);
}
.mobile-menu a:last-child { border:none; }
.mobile-menu a:hover { color:var(--lemon); }
.mobile-menu .nav-cta {
  color:var(--navy) !important; text-align:center;
  margin-top:8px; padding:13px; border-radius:8px;
  display:block;
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  min-height: 100vh;
  padding: 110px 48px 80px;
  display: flex; align-items:center; justify-content:center;
  position: relative; overflow:hidden;
  background: var(--grad-hero);
}
.hero-bg {
  position: absolute; inset:0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12;
}
.hero-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(245,230,66,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 10% 80%, rgba(13,100,200,0.08) 0%, transparent 60%),
    linear-gradient(135deg, rgba(13,27,42,0.95) 0%, rgba(13,27,42,0.6) 50%, rgba(13,27,42,0.9) 100%);
}
/* dots pattern overlay */
.hero::before {
  content:'';
  position:absolute; inset:0; z-index:1;
  background-image: radial-gradient(rgba(245,230,66,0.06) 1px, transparent 1px);
  background-size: 30px 30px;
}
.hero-content {
  position: relative; z-index:2;
  max-width: 1200px; width:100%;
  display: grid; grid-template-columns:1.1fr 0.9fr;
  gap: 64px; align-items:center;
}
.hero-eyebrow {
  display: inline-flex; align-items:center; gap:8px;
  background: rgba(245,230,66,0.1);
  border: 1px solid rgba(245,230,66,0.3);
  padding: 7px 16px; border-radius:30px;
  font-size: 0.72rem; color:var(--lemon);
  font-weight: 700; font-family:'Barlow',sans-serif;
  letter-spacing: 2px; text-transform:uppercase; margin-bottom:22px;
}
.hero-eyebrow::before {
  content:''; width:6px; height:6px; background:var(--lemon);
  border-radius:50%; animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(245,230,66,0.4)} 50%{opacity:0.3;box-shadow:0 0 0 6px rgba(245,230,66,0)} }
.hero h1 {
  font-size: clamp(3rem,5.5vw,5rem);
  letter-spacing: 4px; line-height: 1.0;
  margin-bottom: 24px; color:var(--white);
}
.hero h1 em {
  font-style: normal;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  color: #90a4b8; font-size:1.05rem; line-height:1.8;
  max-width: 500px; margin-bottom:38px;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary {
  background: var(--grad-gold);
  color: var(--navy);
  padding: 14px 30px; border-radius:10px;
  font-weight: 800; font-size:0.92rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  display: inline-flex; align-items:center; gap:8px;
  transition: all var(--ease); border:none; cursor:pointer;
  box-shadow: 0 6px 20px rgba(245,230,66,0.3);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(245,230,66,0.45);
}
.btn-outline {
  background: transparent; color:var(--white);
  padding: 14px 30px; border-radius:10px;
  font-weight: 600; font-size:0.92rem;
  font-family: 'Barlow', sans-serif;
  display: inline-flex; align-items:center; gap:8px;
  border: 1px solid rgba(255,255,255,0.2);
  transition: all var(--ease); cursor:pointer;
  backdrop-filter: blur(4px);
}
.btn-outline:hover {
  border-color: var(--lemon);
  color: var(--lemon);
  background: rgba(245,230,66,0.05);
}

/* HERO RIGHT CARDS */
.hero-cards { display:flex; flex-direction:column; gap:14px; }
.h-card {
  background: rgba(26,45,69,0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(245,230,66,0.15);
  border-radius: var(--radius); padding:22px 24px;
  transition: all var(--ease);
  position: relative; overflow:hidden;
}
.h-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background: var(--grad-gold); opacity:0;
  transition: opacity var(--ease);
}
.h-card:hover { border-color:rgba(245,230,66,0.4); transform:translateX(6px); }
.h-card:hover::before { opacity:1; }
.h-card-top { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.h-card-icon { font-size:1.5rem; }
.h-card-title { font-size:1.05rem; letter-spacing:1.5px; }
.h-card-desc { color:var(--muted); font-size:0.83rem; line-height:1.7; }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px; }
.stat-box {
  background: rgba(26,45,69,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245,230,66,0.1);
  border-radius: var(--radius); padding:18px; text-align:center;
  transition: all var(--ease); position:relative; overflow:hidden;
}
.stat-box:hover { border-color:rgba(245,230,66,0.35); transform:translateY(-3px); }
.stat-num {
  font-size:2rem; letter-spacing:3px;
  background: var(--grad-gold);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-lbl { color:var(--muted); font-size:0.72rem; margin-top:3px; letter-spacing:1px; font-family:'Barlow',sans-serif; }

/* ══════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════ */
.page-hero {
  padding: 110px 48px 60px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-bottom: 1px solid rgba(245,230,66,0.15);
  position: relative; overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(245,230,66,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 {
  font-size: clamp(2.2rem,4vw,3.2rem); letter-spacing:3px;
  margin-bottom:10px;
}
.page-hero p { color:var(--muted); font-size:1rem; font-family:'Barlow',sans-serif; }

/* ══════════════════════════════════════
   SECTIONS
══════════════════════════════════════ */
section { padding: 96px 48px; }
.container { max-width:1200px; margin:0 auto; }
.section-label {
  display: inline-block; color:var(--lemon);
  font-size: 0.72rem; font-weight:700; font-family:'Barlow',sans-serif;
  letter-spacing: 3px; text-transform:uppercase; margin-bottom:12px;
}
.section-title {
  font-size: clamp(2rem,3.5vw,3rem);
  letter-spacing: 2.5px; line-height:1.1; margin-bottom:14px;
}
.section-sub { color:var(--muted); max-width:520px; font-size:0.97rem; line-height:1.8; font-family:'Barlow',sans-serif; }

/* DIVIDERS */
.divider {
  height: 1px; max-width:100%; margin:0;
  background: linear-gradient(90deg, transparent, rgba(245,230,66,0.2), transparent);
}

/* ══════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════ */
#about {
  background: var(--grad-section);
  position: relative; overflow:hidden;
}
#about::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}
#about .container { position:relative; z-index:1; }
.about-grid {
  display: grid; grid-template-columns:1fr 1fr;
  gap: 72px; align-items:start;
}
.about-desc { color:#9ab0c5; font-size:0.97rem; line-height:1.85; margin-bottom:28px; font-family:'Barlow',sans-serif; }
.philosophy {
  background: linear-gradient(135deg, rgba(245,230,66,0.08) 0%, rgba(245,230,66,0.03) 100%);
  border: 1px solid rgba(245,230,66,0.2);
  border-left: 4px solid var(--lemon);
  border-radius: var(--radius); padding:28px 30px;
}
.philosophy blockquote {
  font-size: 1rem; color:var(--white); font-style:italic;
  line-height: 1.8; font-family:'Barlow',sans-serif;
}
.philosophy cite {
  display:block; font-size:0.78rem; color:var(--lemon);
  font-style:normal; margin-top:12px; font-weight:700;
  letter-spacing:1px; font-family:'Barlow',sans-serif;
}
.vm-stack { display:flex; flex-direction:column; gap:16px; }
.vm-card {
  background: linear-gradient(145deg, rgba(26,45,69,0.8) 0%, rgba(13,27,42,0.9) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--lemon);
  border-radius: var(--radius); padding:24px 26px;
  transition: all var(--ease); position:relative; overflow:hidden;
}
.vm-card::after {
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:3px;
  background: var(--grad-gold); opacity:0;
  transition: opacity var(--ease);
}
.vm-card:hover { transform:translateX(5px); border-color:rgba(245,230,66,0.35); box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.vm-card:hover::after { opacity:1; }
.vm-label {
  color:var(--lemon); font-size:0.78rem; letter-spacing:2.5px;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.vm-label::before { content:''; width:16px; height:2px; background:var(--grad-gold); border-radius:2px; }
.vm-text { color:#9ab0c5; font-size:0.88rem; line-height:1.8; font-family:'Barlow',sans-serif; }
.misi-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.misi-list li {
  display:flex; gap:12px; align-items:flex-start;
  color:#9ab0c5; font-size:0.88rem; line-height:1.7; font-family:'Barlow',sans-serif;
}
.misi-list li::before {
  content:'→'; color:var(--lemon);
  flex-shrink:0; font-weight:700; margin-top:1px;
}

/* ══════════════════════════════════════
   SERVICES
══════════════════════════════════════ */
#layanan {
  background: linear-gradient(180deg, #111f30 0%, #0d1b2a 100%);
  position:relative; overflow:hidden;
}
#layanan::before {
  content:'';
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 10px,
    rgba(245,230,66,0.02) 10px, rgba(245,230,66,0.02) 11px
  );
}
#layanan .container { position:relative; z-index:1; }
.services-grid {
  display: grid; grid-template-columns:repeat(3,1fr);
  gap: 20px; margin-top:48px;
}
.service-card {
  background: linear-gradient(145deg, #1a2d45 0%, #0d1b2a 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius); padding:32px 26px;
  transition: all var(--ease); cursor:default; position:relative; overflow:hidden;
}
.service-card::before {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:3px;
  background: var(--grad-gold); transform:scaleX(0);
  transition: transform var(--ease); transform-origin:left;
}
.service-card:hover { border-color:rgba(245,230,66,0.3); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon { font-size:2.2rem; margin-bottom:18px; }
.service-title { font-size:1.05rem; letter-spacing:1.5px; margin-bottom:10px; }
.service-desc { color:var(--muted); font-size:0.86rem; line-height:1.8; font-family:'Barlow',sans-serif; }
.service-tag {
  display:inline-block; margin-top:18px;
  background: rgba(245,230,66,0.1);
  border: 1px solid rgba(245,230,66,0.2);
  color:var(--lemon); padding:4px 14px;
  border-radius:20px; font-size:0.72rem;
  font-weight:700; letter-spacing:1px; font-family:'Barlow',sans-serif;
}

/* ══════════════════════════════════════
   VALUE PROPS — LIGHT SECTION
══════════════════════════════════════ */
#nilai {
  background: linear-gradient(135deg, #f0f4f8 0%, #e8edf3 100%);
  position:relative; overflow:hidden;
}
#nilai::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(13,27,42,0.05) 1px, transparent 1px);
  background-size:24px 24px;
}
#nilai .container { position:relative; z-index:1; }
#nilai .section-label { color:var(--navy); }
#nilai .section-title { color:var(--navy); }
#nilai .section-sub { color:#4a5568; }
.value-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; margin-top:48px;
}
.value-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: var(--radius); padding:30px 22px; text-align:center;
  transition: all var(--ease); position:relative; overflow:hidden;
  box-shadow: 0 4px 20px rgba(13,27,42,0.06);
}
.value-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background: var(--grad-gold);
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 50px rgba(13,27,42,0.12);
  border-color: rgba(212,160,23,0.3);
}
.value-icon { font-size:2.2rem; margin-bottom:14px; }
.value-title { font-size:1.1rem; letter-spacing:1.5px; color:var(--navy); margin-bottom:10px; }
.value-desc { color:#4a5568; font-size:0.83rem; line-height:1.75; font-family:'Barlow',sans-serif; }

/* ══════════════════════════════════════
   DOCUMENTATION
══════════════════════════════════════ */
#dokumentasi {
  background: linear-gradient(180deg, #0d1b2a 0%, #111f30 100%);
  position:relative; overflow:hidden;
}
#dokumentasi::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(245,230,66,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,230,66,0.03) 1px, transparent 1px);
  background-size:40px 40px;
}
#dokumentasi .container { position:relative; z-index:1; }
.filter-bar {
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:32px; align-items:center;
}
.filter-bar select, .filter-bar input[type="date"] {
  background: rgba(26,45,69,0.8); border:1px solid rgba(255,255,255,0.1);
  color:var(--white); padding:10px 16px; border-radius:8px;
  font-size:0.85rem; font-family:'Barlow',sans-serif;
  transition:border-color var(--ease);
  backdrop-filter:blur(8px);
}
.filter-bar select:focus, .filter-bar input[type="date"]:focus { outline:none; border-color:var(--lemon); }
.gallery-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.gallery-item {
  border-radius: var(--radius); overflow:hidden;
  aspect-ratio:4/3; position:relative; cursor:pointer;
  background:var(--navy-mid); border:1px solid rgba(255,255,255,0.06);
  transition:all var(--ease);
}
.gallery-item:nth-child(4n+1) { grid-column:span 2; aspect-ratio:16/7; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.gallery-item:hover { box-shadow:0 12px 40px rgba(0,0,0,0.5); border-color:rgba(245,230,66,0.25); }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,27,42,0.95) 0%, rgba(13,27,42,0.2) 55%, transparent 100%);
  padding:20px; display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; transition:opacity var(--ease);
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-title { font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:1.5px; }
.gallery-cat {
  color:var(--lemon); font-size:0.72rem; margin-top:4px;
  font-family:'Barlow',sans-serif; font-weight:700; letter-spacing:1px;
}
.gallery-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(145deg, #1a2d45, #0d1b2a);
}
.gallery-placeholder .icon { font-size:2.5rem; opacity:0.2; }
.gallery-placeholder span { font-size:0.78rem; color:var(--muted); opacity:0.5; font-family:'Barlow',sans-serif; }
.empty-docs { text-align:center; padding:80px 20px; color:var(--muted); font-family:'Barlow',sans-serif; }
.pagination { display:flex; gap:8px; justify-content:center; margin-top:32px; }
.pagination a {
  padding:9px 16px; background:rgba(26,45,69,0.8); border:1px solid rgba(255,255,255,0.08);
  color:var(--muted); border-radius:8px; font-size:0.85rem;
  transition:all var(--ease); font-family:'Barlow',sans-serif;
}
.pagination a:hover,.pagination a.active {
  background: var(--grad-gold); color:var(--navy);
  border-color:transparent; font-weight:700;
}

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.88); z-index:9999;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.active { display:flex; }
.modal {
  background:linear-gradient(145deg, #1a2d45 0%, #0d1b2a 100%);
  border-radius:18px; padding:34px;
  max-width:620px; width:100%;
  border:1px solid rgba(245,230,66,0.2);
  animation:slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
@keyframes slideUp { from{transform:translateY(50px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal img { width:100%; border-radius:10px; margin-bottom:18px; }
.modal h3 { font-size:1.2rem; letter-spacing:2px; color:var(--lemon); margin-bottom:14px; }
.modal p { color:#9ab0c5; font-size:0.9rem; margin-bottom:8px; font-family:'Barlow',sans-serif; }
.modal-close {
  background: var(--grad-gold); color:var(--navy);
  border:none; padding:11px 26px; border-radius:8px;
  cursor:pointer; font-weight:700; margin-top:18px;
  font-family:'Bebas Neue',sans-serif; letter-spacing:1.5px; font-size:0.9rem;
}
.modal-row { display:grid; grid-template-columns:130px 1fr; gap:8px; margin-bottom:12px; font-size:0.88rem; font-family:'Barlow',sans-serif; }
.modal-row .label { color:var(--muted); }
.modal-row .value { color:var(--white); }

/* ══════════════════════════════════════
   FORM SECTION — LIGHT BG
══════════════════════════════════════ */
#permintaan {
  background: linear-gradient(135deg, #e8edf3 0%, #f0f4f8 100%);
  position:relative; overflow:hidden;
}
#permintaan::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(13,27,42,0.04) 1px, transparent 1px);
  background-size:24px 24px;
}
#permintaan .container { position:relative; z-index:1; }
#permintaan .section-label { color:var(--navy); }
#permintaan .section-title { color:var(--navy); }
#permintaan .section-sub { color:#4a5568; }
.form-layout { display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:start; }
.contact-items { display:flex; flex-direction:column; gap:14px; }
.contact-item {
  display:flex; gap:16px; align-items:center;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(8px);
  border:1px solid rgba(13,27,42,0.08);
  border-radius:12px; padding:18px 22px;
  transition:all var(--ease);
  box-shadow:0 2px 12px rgba(13,27,42,0.05);
}
.contact-item:hover {
  border-color:rgba(212,160,23,0.4);
  transform:translateX(4px);
  box-shadow:0 8px 25px rgba(13,27,42,0.1);
}
.contact-item-icon { font-size:1.5rem; flex-shrink:0; }
.contact-label { color:#6a7a8e; font-size:0.72rem; margin-bottom:2px; letter-spacing:1px; font-family:'Barlow',sans-serif; font-weight:700; text-transform:uppercase; }
.contact-val { font-size:0.92rem; font-weight:700; color:var(--navy); font-family:'Barlow',sans-serif; }
.form-card {
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(12px);
  border:1px solid rgba(13,27,42,0.08);
  border-radius:18px; padding:36px;
  box-shadow:0 8px 40px rgba(13,27,42,0.1);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fg { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.fg label {
  font-size:0.72rem; color:#4a5568;
  font-weight:700; letter-spacing:1px; text-transform:uppercase;
  font-family:'Barlow',sans-serif;
}
.fg input, .fg select, .fg textarea {
  background:#f8fafc; border:1.5px solid #e2e8f0;
  border-radius:10px; padding:13px 16px; color:var(--navy);
  font-size:0.9rem; width:100%; font-family:'Barlow',sans-serif;
  transition:all var(--ease);
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,160,23,0.12);
  background:#fff;
}
.fg input::placeholder, .fg textarea::placeholder { color:#a0aec0; }
.fg select { color:var(--navy); }
.fg textarea { resize:vertical; min-height:100px; }
.input-group { display:flex; gap:8px; }
.input-group input { flex:1; }
.input-group select { width:100px; flex-shrink:0; }
.btn-submit {
  width:100%; padding:15px;
  background: var(--grad-gold);
  color:var(--navy); border:none; border-radius:10px;
  font-weight:900; font-size:1rem; cursor:pointer;
  transition:all var(--ease);
  font-family:'Bebas Neue',sans-serif; letter-spacing:2.5px;
  box-shadow:0 6px 20px rgba(212,160,23,0.35);
}
.btn-submit:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 35px rgba(212,160,23,0.5);
}
.form-note {
  text-align:center; color:#6a7a8e;
  font-size:0.78rem; margin-top:12px; font-family:'Barlow',sans-serif;
}
.alert { padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:0.9rem; font-family:'Barlow',sans-serif; }
.alert-success { background:rgba(72,187,120,0.1); border:1px solid #48bb78; color:#276749; }
.alert-error   { background:rgba(245,101,101,0.1); border:1px solid #f56565; color:#c53030; }

/* ══════════════════════════════════════
   CTA BAND
══════════════════════════════════════ */
.cta-band {
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%);
  padding:72px 48px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(245,230,66,0.07) 1px, transparent 1px);
  background-size:28px 28px;
}
.cta-band::after {
  content:'';
  position:absolute; top:-80px; right:-80px;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(245,230,66,0.06) 0%, transparent 70%);
  border-radius:50%;
}
.cta-band .container { position:relative; z-index:1; }
.cta-band h2 { font-size:clamp(2rem,4vw,3rem); letter-spacing:3px; margin-bottom:14px; }
.cta-band p { color:var(--muted); max-width:480px; margin:0 auto 32px; font-family:'Barlow',sans-serif; line-height:1.75; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.toast {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  background:linear-gradient(135deg, #1a2d45, #0d1b2a);
  border:1px solid rgba(72,187,120,0.4);
  color:#48bb78; padding:16px 22px; border-radius:12px;
  font-size:0.9rem; font-weight:600; font-family:'Barlow',sans-serif;
  transform:translateY(80px); opacity:0;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);
  pointer-events:none;
}
.toast.show { transform:translateY(0); opacity:1; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  background: #080f18;
  border-top:1px solid rgba(245,230,66,0.12);
  padding:56px 48px 28px;
  position:relative; overflow:hidden;
}
footer::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(245,230,66,0.03) 1px, transparent 1px);
  background-size:32px 32px;
}
.footer-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  max-width:1200px; margin:0 auto 40px;
  gap:48px; flex-wrap:wrap; position:relative; z-index:1;
}
.footer-brand h3 {
  font-size:1.4rem; letter-spacing:2.5px; margin-bottom:10px;
}
.footer-brand h3 span { color:var(--lemon); }
.footer-brand p { color:var(--muted); font-size:0.85rem; max-width:240px; line-height:1.7; font-family:'Barlow',sans-serif; }
.footer-col h4 {
  font-size:0.72rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:18px; font-family:'Barlow',sans-serif;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col a {
  color:#4a5a6e; font-size:0.875rem;
  transition:color var(--ease); font-family:'Barlow',sans-serif;
}
.footer-col a:hover { color:var(--lemon); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.05); padding-top:24px;
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; position:relative; z-index:1;
}
.footer-bottom p { color:#3a4a5a; font-size:0.78rem; font-family:'Barlow',sans-serif; }
.footer-badge {
  background:rgba(245,230,66,0.08); border:1px solid rgba(245,230,66,0.2);
  color:var(--lemon); font-size:0.72rem; font-weight:700;
  padding:5px 14px; border-radius:20px; letter-spacing:1.5px; font-family:'Barlow',sans-serif;
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
.fade-up {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up:nth-child(2) { transition-delay:0.1s; }
.fade-up:nth-child(3) { transition-delay:0.2s; }
.fade-up:nth-child(4) { transition-delay:0.3s; }
.fade-up:nth-child(5) { transition-delay:0.4s; }
.fade-up:nth-child(6) { transition-delay:0.5s; }

/* ══════════════════════════════════════
   HERO — CENTERED LAYOUT
══════════════════════════════════════ */
.hero-center {
  position: relative; z-index:2;
  max-width: 860px; width:100%;
  text-align: center;
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.hero-center .hero-eyebrow { margin-bottom: 26px; }
.hero-center h1 { margin-bottom: 26px; }
.hero-center .hero-sub { margin: 0 auto 38px; max-width: 620px; text-align:center; }
.hero-pillars {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 16px; margin-top: 56px; width: 100%;
}
.pillar-item {
  background: rgba(26,45,69,0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(245,230,66,0.12);
  border-radius: var(--radius);
  padding: 24px 18px; text-align: center;
  transition: all var(--ease);
}
.pillar-item:hover {
  border-color: rgba(245,230,66,0.4);
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}
.pillar-icon { font-size: 1.8rem; margin-bottom: 12px; }
.pillar-title {
  font-size: 0.92rem; letter-spacing: 1.5px;
  color: var(--white); margin-bottom: 8px;
}
.pillar-desc {
  color: var(--muted); font-size: 0.78rem;
  line-height: 1.6; font-family: 'Barlow', sans-serif;
}
@media(max-width: 900px) {
  .hero-pillars { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 540px) {
  .hero-pillars { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   LANGUAGE SWITCHER
══════════════════════════════════════ */
.lang-switch { position: relative; }
.lang-btn {
  background: rgba(245,230,66,0.08);
  border: 1px solid rgba(245,230,66,0.25);
  color: var(--lemon);
  padding: 8px 14px; border-radius: 8px;
  font-size: 0.82rem; font-weight: 700;
  font-family: 'Barlow', sans-serif;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: all var(--ease);
}
.lang-btn:hover { background: rgba(245,230,66,0.15); }
.lang-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: linear-gradient(145deg,#1a2d45,#0d1b2a);
  border: 1px solid rgba(245,230,66,0.2);
  border-radius: 10px; padding: 6px;
  min-width: 160px; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 2000;
}
.lang-dropdown.open { display: block; }
.lang-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 7px;
  color: #b0bec5; font-size: 0.85rem; font-family:'Barlow',sans-serif;
  transition: all var(--ease);
}
.lang-dropdown a:hover { background: rgba(245,230,66,0.1); color: var(--lemon); }
.lang-dropdown a.active { color: var(--lemon); font-weight: 700; }
@media(max-width: 768px) {
  .lang-switch { margin-left: auto; margin-right: 12px; }
}

/* ══════════════════════════════════════
   RTL SUPPORT (Arabic)
══════════════════════════════════════ */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .misi-list li::before { content:'←'; }
[dir="rtl"] .vm-card { border-left:none; border-right:3px solid var(--lemon); }
[dir="rtl"] .vm-card:hover { transform: translateX(-5px); }
[dir="rtl"] .h-card:hover { transform: translateX(-6px); }
[dir="rtl"] .contact-item:hover { transform: translateX(-4px); }
[dir="rtl"] .gallery-item:nth-child(4n+1) { grid-column: span 2; }
[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
[dir="rtl"] .modal-row { grid-template-columns: 1fr 130px; }
[dir="rtl"] .modal-row .label { text-align: left; }
body.lang-ar, body.lang-ar input, body.lang-ar select, body.lang-ar textarea, body.lang-ar button {
  font-family: 'Tajawal', sans-serif !important;
}
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3,
body.lang-ar .nav-logo, body.lang-ar .section-title,
body.lang-ar .stat-num, body.lang-ar .service-title,
body.lang-ar .value-title, body.lang-ar .vm-label,
body.lang-ar .h-card-title, body.lang-ar .pillar-title,
body.lang-ar .footer-brand h3, body.lang-ar .gallery-title,
body.lang-ar .modal h3, body.lang-ar .fsubmit,
body.lang-ar .form-heading h2 {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
}
@media(max-width:1024px) {
  .hero-content, .about-grid, .form-layout { grid-template-columns:1fr; gap:48px; }
  .hero-cards { display:none; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .value-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  section { padding:64px 20px; }
  .navbar { padding:0 20px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .page-hero { padding:96px 20px 48px; }
  .cta-band { padding:56px 20px; }
  footer { padding:48px 20px 24px; }
  .services-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .gallery-item:nth-child(4n+1) { grid-column:span 2; aspect-ratio:16/9; }
  .form-row { grid-template-columns:1fr; }
  .footer-top { flex-direction:column; gap:32px; }
  .footer-bottom { flex-direction:column; text-align:center; }
}
@media(max-width:480px) {
  .value-grid { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-item:nth-child(4n+1) { grid-column:span 1; aspect-ratio:4/3; }
  .hero-stats { grid-template-columns:repeat(3,1fr); }
  .hero h1 { font-size:2.6rem; }
}