/* =====================================================================
   STYLE / TAMPILAN WEBSITE AIRTEK MULTI PERSADA
   Warna, jenis huruf, dan jarak antar elemen diatur di bagian :root
   di bawah ini kalau sewaktu-waktu ingin diubah.
   ===================================================================== */

:root{
  --color-bg:#161826;
  --color-surface:#232532;
  --color-surface-2:#2b2e3e;
  --color-text:#e9e9ed;
  --color-accent:#9184d9;
  --color-accent-2:#a7a1db;
  --color-divider: rgba(233,233,237,0.16);

  --color-accent-100:#f5f4ff;
  --color-accent-300:#d2cefd;
  --color-accent-800:#423a6a;

  --color-section:#262a60;
  --color-section-glow:#353b80;

  --wa:#25D366;
  --wa-ink:#0b1a10;

  --font-heading:"Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  --space-1:2.8px; --space-2:5.6px; --space-3:8.4px; --space-4:11.2px; --space-6:16.8px; --space-8:22.4px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;

  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-md: 0 0 0 1px rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,0.10), 0 16px 40px rgba(0,0,0,0.65);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.6;
  /* ===== Gradasi latar belakang halaman =====
     Atas: warna gelap existing -> tengah: navy tua -> lalu: teal tua -> bawah: cyan.
     Karena diterapkan pada <body>, gradasi ini mengalir menerus dari atas
     sampai bawah halaman, melewati semua section tanpa terputus. */
  background: linear-gradient(180deg,
    #161826 0%,
    #161826 9%,
    #12203a 16%,
    #0e2a4c 23%,
    #0b1f3f 30%,
    #0c2b48 37%,
    #0e3648 44%,
    #0f3f46 51%,
    #0d3b3b 58%,
    #0e463f 65%,
    #105048 72%,
    #115a55 79%,
    #10646a 86%,
    #0f6f7e 93%,
    #0e7a90 100%
  );
  background-attachment: scroll;
}
img{ display:block; max-width:100%; }
a{ color:var(--color-accent); text-decoration:none; }
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading); font-weight:700; line-height:1.15;
  letter-spacing:-0.015em; margin:0 0 var(--space-3);
}
h6{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; }
p{ margin:0 0 var(--space-3); }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.section{ padding:88px 24px; }
@media (max-width:720px){ .section{ padding:56px 20px; } }
.eyebrow{ color:var(--color-accent-300); margin-bottom:8px; }
.lede{ opacity:.82; font-size:17px; max-width:620px; }

.hr{
  height:1px; border:0; margin:32px 0;
  background:linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; text-decoration:none; font-family:var(--font-heading); font-weight:600;
  font-size:14px; line-height:1.2; border-radius:999px; padding:13px 26px;
  border:1px solid transparent; white-space:nowrap;
}
.btn-wa{
  background:var(--wa); color:var(--wa-ink);
  box-shadow:0 0 0 1px var(--wa), 0 6px 20px rgba(37,211,102,0.35);
}
.btn-wa:hover{ filter:brightness(1.06); }
.btn-outline{
  border-color:var(--color-divider); color:var(--color-text);
  background:rgba(255,255,255,0.03);
}
.btn-outline:hover{ background:rgba(255,255,255,0.08); }
.btn-sm{ padding:10px 20px; font-size:13px; }

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(22,24,38,0.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-divider);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-brand img{ width:36px; height:36px; object-fit:contain; }
.nav-brand .brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.nav-brand .brand-name{ font-family:var(--font-heading); font-weight:700; font-size:15px; }
.nav-brand .brand-tag{ font-size:10px; font-weight:500; color:var(--color-accent-300); letter-spacing:0.04em; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ color:var(--color-text); font-size:14px; opacity:.88; }
.nav-links a:hover{ opacity:1; color:var(--color-accent-2); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:0; color:var(--color-text); font-size:26px; cursor:pointer; }
@media (max-width:900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--color-bg);
    flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--color-divider);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-links.open{ max-height:340px; }
  .nav-links a{ width:100%; padding:14px 24px; border-top:1px solid var(--color-divider); }
  .nav-toggle{ display:block; }
  .nav-cta .btn-label{ display:none; }
}

/* ===== Hero + slider ===== */
.hero{
  position:relative; min-height:min(88vh,720px); display:flex; align-items:flex-end;
  overflow:hidden; background:#0e0f18;
}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s ease; pointer-events:none;
}
.hero-slide.active{ opacity:1; pointer-events:auto; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; filter:saturate(1) brightness(1.04); }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  /* Dibuat lebih terang dari sebelumnya supaya foto hero tetap terlihat jelas,
     namun teks di atasnya tetap terbaca. */
  background:
    linear-gradient(0deg, rgba(10,12,20,0.80) 6%, rgba(10,12,20,0.52) 42%, rgba(10,12,20,0.16) 100%),
    linear-gradient(100deg, rgba(10,12,20,0.72) 0%, rgba(10,12,20,0.38) 46%, rgba(10,12,20,0.06) 100%);
}
.hero-content{ position:relative; z-index:2; padding:64px 24px 56px; max-width:1200px; margin:0 auto; width:100%; }
.hero-content .tag{
  display:inline-flex; align-items:center; font-size:12px; font-weight:600;
  letter-spacing:0.03em; padding:6px 14px; border-radius:999px;
  border:1px solid var(--color-accent-2); color:var(--color-accent-100);
  background:rgba(145,132,217,0.14); margin-bottom:18px;
}
.hero-content h1{
  font-size:clamp(30px,5vw,52px); max-width:680px; color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,0.5);
}
.hero-content .lede{ color:#f0f0f4; max-width:540px; font-size:17px; text-shadow:0 1px 10px rgba(0,0,0,0.4); }
.hero-actions{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.hero-dots{ position:absolute; z-index:3; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.hero-dots button{
  width:24px; height:4px; border-radius:999px; border:none; cursor:pointer; padding:0;
  background:rgba(233,233,237,0.3);
}
.hero-dots button.active{ background:var(--color-accent-2); }

/* ===== About ===== */
.about-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
.about-photo{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:4/3; background:var(--color-surface);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-stats{ display:flex; gap:28px; margin-top:24px; flex-wrap:wrap; }
.about-stat b{ display:block; font-size:26px; font-family:var(--font-heading); color:var(--color-accent-2); }
.about-stat span{ font-size:12px; opacity:.7; }

/* ===== Peta lokasi (Google Maps) ===== */
.map-wrap{ margin-top:48px; }
.map-frame{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:16/7; background:var(--color-surface);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){ .map-frame{ aspect-ratio:4/3; } }

/* ===== CTA band ===== */
.cta-band{
  /* Highlight lembut saja (bukan blok warna solid) supaya gradasi latar
     belakang halaman tetap mengalir menerus melewati bagian ini. */
  background:radial-gradient(120% 220% at 50% 0%, rgba(255,255,255,0.09), transparent 65%);
  text-align:center; padding:72px 24px;
}
.cta-band h2{ margin-bottom:10px; }
.cta-band .lede{ margin:0 auto 26px; }

/* ===== Cards / Products / Advantages ===== */
.section-head{ margin-bottom:40px; max-width:640px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--color-surface); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,0.04);
}
.card-photo{ position:relative; aspect-ratio:4/3; cursor:pointer; overflow:hidden; }
.card-photo .zoom-hint{
  position:absolute; right:10px; bottom:10px; background:rgba(15,16,26,0.72); z-index:2;
  color:#fff; font-size:11px; padding:5px 10px; border-radius:999px; opacity:0; transition:opacity .2s;
}
.card-photo:hover .zoom-hint{ opacity:1; }
.card-body-wrap{ padding:18px 18px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-title{ font-family:var(--font-heading); font-weight:700; font-size:17px; margin:0; }
.card-desc{ margin:0; font-size:13.5px; opacity:.78; flex:1; }

.adv-card .card-photo{ aspect-ratio:16/10; }

/* ===== Gallery ===== */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:760px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{ border-radius:var(--radius-md); overflow:hidden; cursor:pointer; position:relative; height:260px; }
.gallery-cap{ padding:10px 2px 0; font-size:13px; text-align:center; opacity:.78; }

/* ===== Client logos ===== */
.logos-wrap{ display:none; }
.logos-wrap.has-logos{ display:block; }
.logos-caption{
  text-align:center; font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
  color:#b2b6ca; margin:0 0 32px;
}
/* Flex-wrap supaya jumlah logo berapa pun (10, 11, dst) tetap rapi dan
   berjajar center, tanpa kolom kosong yang janggal di baris terakhir. */
.logos-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:16px; }
.logo-slot{
  width:176px; height:100px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  padding:16px; background:#ffffff; box-shadow:var(--shadow-sm);
}
@media (max-width:600px){ .logo-slot{ width:calc(50% - 8px); height:90px; } }
/* object-fit:contain + tanpa crop apapun: logo selalu tampil utuh,
   ukurannya menyesuaikan sisi terpanjang ke dalam kotak. */
.logo-slot .photo-slot{ background:transparent; }
.logo-slot .photo-slot img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.logo-slot:hover{ transform:translateY(-2px); transition:transform .2s ease; }

/* ===== Contact ===== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ display:flex; flex-direction:column; gap:14px; margin:22px 0 26px; font-size:15px; }
.contact-list .row{ display:flex; gap:12px; align-items:flex-start; }
.contact-list .ico{
  width:34px; height:34px; border-radius:9px; background:var(--color-accent-800); color:var(--color-accent-100);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-list .ico svg{ width:17px; height:17px; }
.contact-photo{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:4/3; background:var(--color-surface);
}
.contact-photo img{ width:100%; height:100%; object-fit:cover; }
.contact-card{
  background:var(--color-surface); border-radius:var(--radius-lg); padding:32px;
  border:1px solid rgba(255,255,255,0.05); box-shadow:var(--shadow-md);
}
.contact-card h3{ margin-bottom:4px; }
.contact-card .lede{ font-size:14px; margin-bottom:20px; }

footer{ text-align:center; padding:28px 24px 34px; font-size:12px; opacity:.55; }

/* ===== Floating WA ===== */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:58px; height:58px; border-radius:50%; background:var(--wa); color:var(--wa-ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,0.45);
  animation:wa-pulse 2.6s ease-in-out infinite;
}
.wa-float svg{ width:28px; height:28px; }
@keyframes wa-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(10,10,16,0.86);
  display:none; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(3px);
}
.lightbox.open{ display:flex; }
.lightbox-inner{ max-width:920px; width:100%; }
.lightbox-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.lightbox-header h3{ margin:0 0 4px; color:#fff; }
.lightbox-header p{ margin:0; font-size:13px; opacity:.75; color:#e9e9ed; }
.lightbox-close{
  background:rgba(255,255,255,0.08); border:1px solid var(--color-divider); color:#fff;
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:18px; flex-shrink:0;
}
.lightbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ .lightbox-grid{ grid-template-columns:1fr; } }
.lightbox-grid .photo-slot{ aspect-ratio:4/3; border-radius:10px; }
.lightbox-single .photo-slot{ max-height:78vh; min-height:320px; border-radius:10px; }

/* =====================================================================
   KOTAK SLOT FOTO — dipakai di semua tempat yang butuh foto.
   Kalau file foto BELUM ada / gagal dimuat, otomatis tampil kotak
   putus-putus dengan ikon + nama file yang diharapkan.
   Begitu foto dengan nama file yang sesuai diupload, kotak ini otomatis
   berubah menjadi foto tersebut — tidak perlu edit kode apapun.
   ===================================================================== */
.photo-slot{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:var(--color-surface-2);
  border-radius:inherit;
}
.photo-slot img{
  width:100%; height:100%; object-fit:cover; position:relative; z-index:1;
}
.photo-slot .ph-empty{
  display:none; position:absolute; inset:0; z-index:2; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:14px;
  border:1.5px dashed rgba(233,233,237,0.25); border-radius:inherit;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px);
}
.photo-slot.is-empty img{ display:none; }
.photo-slot.is-empty .ph-empty{ display:flex; }
.photo-slot .ph-empty svg{ width:26px; height:26px; opacity:.5; }
.photo-slot .ph-empty .ph-label{ font-size:12.5px; font-weight:600; opacity:.75; max-width:200px; }
.photo-slot .ph-empty .ph-file{ font-size:10.5px; opacity:.45; font-family:monospace; word-break:break-all; max-width:200px; }

/* Logo slot uses a lighter/simpler empty state (small square), disesuaikan
   agar tetap terlihat jelas di atas kartu putih. */
.logo-slot .photo-slot .ph-empty{
  padding:6px; gap:4px; border-width:1px; border-color:rgba(20,24,38,0.18);
  background:repeating-linear-gradient(135deg, rgba(20,24,38,0.04) 0 10px, transparent 10px 20px);
  color:#2a2d3a;
}
.logo-slot .photo-slot .ph-empty svg{ width:18px; height:18px; opacity:.4; }
.logo-slot .photo-slot .ph-empty .ph-label{ font-size:9.5px; opacity:.6; }
.logo-slot .photo-slot .ph-empty .ph-file{ display:none; }

/* Hero slide empty state: full-bleed, text stays readable via scrim */
.hero-slide .photo-slot .ph-empty{ border-radius:0; border:none; background:linear-gradient(160deg,#20223a,#181a29); }
.hero-slide .photo-slot .ph-empty svg{ width:34px; height:34px; opacity:.35; }
.hero-slide .photo-slot .ph-empty .ph-label{ opacity:.4; }
.hero-slide .photo-slot .ph-empty .ph-file{ opacity:.28; }