:root{
  --green-primary:#22c55e;
  --green-deep:#059669;
  --green-dark:#065f46;
  --green-night:#022c22;
  --black-shadow:#020617;
  --logo-blue:#0067a3;
  --logo-orange:#f7941d;
  --logo-red:#e6332a;
  --logo-green:#009344;
  --accent-glow:#4ade80;
  --accent-mint:#a7f3d0;
  --accent-lime:#bef264;
  --text-soft:#e5e7eb;
  --text-sub:#cbd5e1;
  --text-border:#94a3b8;
  --shadow-soft:0 10px 25px rgba(15,23,42,.15);
  --radius-lg:18px;
  --radius-xl:30px;
  --transition:.25s ease
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0
}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#0f172a;
  color:var(--text-soft);
  line-height:1.6
}
a{
  text-decoration:none;
  color:inherit
}
img{
  max-width:100%;
  display:block
}

/* WRAPPER + CONTAINER */
.page{
  min-height:100vh;
  background:radial-gradient(circle at top left,var(--green-primary) 0%,var(--green-dark) 40%,var(--black-shadow) 100%);
  color:var(--text-soft)
}
.container{
  width:min(1120px,92vw);
  margin:0 auto
}

/* NAVBAR */
.navbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(16px);
  background:linear-gradient(to bottom,rgba(4,30,22,.95),rgba(4,20,15,.8));
  border-bottom:1px solid rgba(148,163,184,.25)
}
.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 0
}
.brand{
  display:flex;
  align-items:center;
  gap:.5rem
}
.brand-logo{
  width:46px;
  height:46px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%,#fff,#e5fce8);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:var(--shadow-soft)
}
.brand-logo img{
  width:90%;
  height:auto;
  object-fit:contain
}
.brand-text{
  display:flex;
  flex-direction:column;
  gap:.1rem
}
.brand-title{
  font-weight:700;
  letter-spacing:.08em;
  font-size:.9rem;
  color:var(--text-soft)
}
.brand-subtitle{
  font-size:.75rem;
  color:var(--text-sub)
}
.nav-links{
  display:flex;
  align-items:center;
  gap:1.5rem;
  font-size:.9rem
}
.nav-links a{
  color:var(--text-sub);
  position:relative;
  padding-bottom:.1rem
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.3rem;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--logo-blue),var(--logo-orange),var(--logo-red),var(--logo-green));
  border-radius:999px;
  transition:width .2s ease
}
.nav-links a:hover::after{
  width:100%
}
.nav-cta{
  padding:.55rem 1.2rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg,var(--green-primary),var(--accent-lime));
  color:#052e16;
  font-size:.88rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  box-shadow:0 10px 30px rgba(22,163,74,.5);
  transition:transform var(--transition),box-shadow var(--transition)
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(22,163,74,.7)
}
.nav-toggle{
  display:none;
  border:1px solid rgba(148,163,184,.6);
  padding:.25rem .5rem;
  border-radius:999px;
  font-size:.8rem;
  background:rgba(3,31,23,.9);
  color:var(--text-soft);
  cursor:pointer
}

/* HERO */
.hero{
  padding:3.5rem 0 3.25rem
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:2.5rem;
  align-items:center
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem .85rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  background:radial-gradient(circle at top left,rgba(34,197,94,.5),rgba(3,31,23,.95));
  font-size:.75rem;
  color:var(--text-soft);
  margin-bottom:1rem
}
.hero-badge-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.25)
}
.hero-badge-flag{
  padding:.1rem .5rem;
  border-radius:999px;
  background:rgba(6,95,70,.7);
  border:1px solid rgba(52,211,153,.7);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em
}
.hero-title{
  font-size:clamp(2.1rem,4vw,2.8rem);
  line-height:1.15;
  font-weight:800;
  margin-bottom:.75rem;
  color:var(--text-soft)
}
.hero-title span{
  background:linear-gradient(120deg,var(--logo-blue),var(--logo-orange),var(--logo-red),var(--logo-green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.hero-subtitle{
  font-size:.98rem;
  color:var(--text-sub);
  max-width:480px;
  margin-bottom:1.5rem
}
.hero-highlight{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:1.75rem
}
.hero-chip{
  font-size:.75rem;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid rgba(0,103,163,.6);
  color:var(--text-soft);
  background:rgba(3,24,19,.95)
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1.75rem;
  flex-wrap:wrap
}
.btn-primary{
  padding:.8rem 1.6rem;
  border-radius:999px;
  border:none;
  font-weight:700;
  font-size:.94rem;
  cursor:pointer;
  background:linear-gradient(135deg,var(--green-primary),var(--accent-lime));
  color:#052e16;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  box-shadow:0 16px 45px rgba(22,163,74,.6);
  transition:transform var(--transition),box-shadow var(--transition)
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 60px rgba(22,163,74,.8)
}
.btn-secondary{
  padding:.78rem 1.4rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.8);
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  background:rgba(3,24,19,.95);
  color:var(--text-soft);
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition)
}
.btn-secondary:hover{
  background:rgba(5,46,33,1);
  transform:translateY(-1px)
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  font-size:.78rem;
  color:var(--text-sub)
}
.hero-meta-item strong{
  display:block;
  font-size:.9rem;
  color:#fef9c3
}

/* HERO CARD */
.hero-card{
  background:radial-gradient(circle at top left,var(--accent-glow),#064e3b);
  border-radius:28px;
  padding:1.2rem;
  border:1px solid rgba(148,163,184,.6);
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden
}
.hero-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem
}
.hero-pill{
  padding:.25rem .65rem;
  border-radius:999px;
  background:rgba(3,24,19,.85);
  font-size:.72rem;
  color:var(--text-soft);
  display:inline-flex;
  align-items:center;
  gap:.3rem
}
.hero-card-tag{
  font-size:.72rem;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(3,24,19,.9);
  border:1px solid rgba(148,163,184,.7)
}
.hero-ribbon{
  display:flex;
  gap:.45rem;
  margin-bottom:1.3rem
}
.hero-ribbon span{
  flex:1;
  border-radius:999px;
  padding:.3rem .6rem;
  font-size:.7rem;
  text-align:center;
  font-weight:600;
  background:rgba(4,30,22,.9);
  color:var(--text-soft);
  border:1px solid rgba(148,163,184,.7)
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem
}
.hero-stat{
  background:rgba(3,24,19,.92);
  border-radius:18px;
  padding:.7rem .75rem;
  border:1px solid rgba(148,163,184,.75)
}
.hero-stat-label{
  font-size:.68rem;
  color:var(--text-sub)
}
.hero-stat-value{
  font-size:1.15rem;
  font-weight:800;
  margin-top:.1rem;
  color:var(--accent-lime)
}
.hero-stat-foot{
  font-size:.62rem;
  color:var(--text-soft);
  margin-top:.2rem
}
.hero-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:1rem;
  font-size:.72rem;
  color:var(--text-soft);
  gap:1rem
}
.hero-footer-badge{
  padding:.3rem .7rem;
  border-radius:999px;
  background:rgba(22,163,74,.92);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-weight:600;
  font-size:.7rem;
  color:#052e16
}

/* GENERIC SECTION */
section{
  padding:3rem 0 2.75rem
}
.section-header{
  text-align:center;
  margin-bottom:2rem
}
.section-eyebrow{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#bbf7d0;
  margin-bottom:.3rem
}
.section-title{
  font-size:1.6rem;
  font-weight:800;
  color:var(--text-soft);
  margin-bottom:.5rem
}
.section-subtitle{
  font-size:.9rem;
  color:var(--text-sub);
  max-width:620px;
  margin:.25rem auto 0
}

/* ABOUT / CARDS */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr 1.1fr;
  gap:2rem
}
.card{
  background:rgba(3,24,19,.95);
  border-radius:var(--radius-lg);
  padding:1.4rem 1.35rem 1.3rem;
  border:1px solid rgba(148,163,184,.7);
  box-shadow:0 14px 40px rgba(2,20,15,.7)
}
.card-title{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:.45rem;
  color:var(--text-soft)
}
.card-body{
  font-size:.88rem;
  color:var(--text-sub)
}
.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1.2rem
}
.pill{
  font-size:.72rem;
  padding:.25rem .7rem;
  border-radius:999px;
  background:rgba(4,30,22,.95);
  border:1px solid rgba(148,163,184,.7);
  color:var(--text-soft)
}

/* FAQ GRID + ITEM */
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
  align-items:flex-start;
}

/* FAQ STYLE – Q & A beda visual */
.faq-question{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  font-weight:700;
  font-size:1.05rem;
  color:#ffffff;
  line-height:1.5;
  margin-bottom:.8rem;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.faq-question::before{
  content:"Q";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:50%;
  font-size:.9rem;
  font-weight:900;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#001a0e;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(16,185,129,0.5);
}
.faq-answer{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  font-size:.9rem;
  font-weight:400;
  line-height:1.8;
  color:#94a3b8;
}
.faq-answer::before{
  content:"A";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:50%;
  font-size:.9rem;
  font-weight:700;
  background:linear-gradient(135deg,#334155,#1e293b);
  color:#e2e8f0;
  flex-shrink:0;
  box-shadow:0 3px 8px rgba(0,0,0,0.4);
}
.faq-item{
  margin-bottom:1rem;
  padding:1.3rem 1.5rem;
  border-radius:16px;
  background:radial-gradient(circle at top left,rgba(65,233,144,0.1),transparent 60%),rgba(1,9,21,0.7);
  border:1px solid rgba(148,255,196,0.15);
  transition:all .3s ease;
}
.faq-item:hover{
  border-color:rgba(148,255,196,0.3);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}

/* STATS */
.stats{
  background:radial-gradient(circle at top,#16a34a,var(--green-night))
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem
}
.stat-card{
  background:rgba(3,24,19,.96);
  border-radius:18px;
  padding:1rem;
  text-align:center;
  border:1px solid rgba(148,163,184,.7);
  box-shadow:0 14px 40px rgba(2,20,15,.8)
}
.stat-number{
  font-size:1.6rem;
  font-weight:800;
  margin-bottom:.15rem;
  background:linear-gradient(130deg,var(--logo-blue),var(--logo-red),var(--green-primary));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.stat-label{
  font-size:.8rem;
  color:var(--text-soft)
}
.stat-foot{
  font-size:.7rem;
  margin-top:.25rem;
  color:var(--text-sub)
}

/* FIELDS */
.fields-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.field-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(140deg,rgba(3,24,19,.98),rgba(4,34,25,.98));
  border:1px solid rgba(148,163,184,.75);
  box-shadow:0 18px 50px rgba(2,20,15,.9);
  padding:1.1rem 1rem 1rem
}
.field-label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem .65rem;
  border-radius:999px;
  font-size:.72rem;
  margin-bottom:.6rem;
  color:var(--text-soft)
}
.field-label span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--text-soft)
}
.field-name{
  font-size:1rem;
  font-weight:700;
  margin-bottom:.25rem
}
.field-type{
  font-size:.78rem;
  color:var(--text-soft);
  margin-bottom:.55rem;
  opacity:.9
}
.field-body{
  font-size:.8rem;
  color:var(--text-sub)
}
.field-body ul{
  padding-left:1rem;
  margin-top:.25rem
}
.field-body li{
  margin-bottom:.15rem
}
.field-tag{
  position:absolute;
  right:.7rem;
  top:.7rem;
  font-size:.65rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background:rgba(248,250,252,.08);
  border:1px solid rgba(248,250,252,.25);
  color:var(--text-soft)
}

/* TIMELINE */
.timeline-wrapper{
  position:relative;
  margin-top:1rem;
  padding-left:.75rem
}
.timeline-line{
  position:absolute;
  top:.3rem;
  bottom:.3rem;
  left:.9rem;
  width:2px;
  background:linear-gradient(to bottom,var(--green-primary),var(--accent-lime));
  opacity:.7
}
.timeline-item{
  position:relative;
  padding-left:2.1rem;
  margin-bottom:1.3rem
}
.timeline-dot{
  position:absolute;
  left:.4rem;
  top:.4rem;
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--black-shadow);
  border:3px solid var(--green-primary);
  box-shadow:0 0 0 5px rgba(34,197,94,.35)
}
.timeline-card{
  background:rgba(3,24,19,.96);
  border-radius:16px;
  padding:.75rem .9rem .8rem;
  border:1px solid rgba(148,163,184,.75)
}
.timeline-date{
  font-size:.8rem;
  color:#d9f99d;
  margin-bottom:.2rem
}
.timeline-title{
  font-size:.9rem;
  font-weight:700;
  margin-bottom:.2rem;
  color:var(--text-soft)
}
.timeline-desc{
  font-size:.8rem;
  color:var(--text-sub)
}

/* PRICING */
.pricing-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:1.5rem;
  align-items:flex-start
}
.pricing-table{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
  margin-top:.7rem
}
.pricing-card{
  background:rgba(3,24,19,.96);
  border-radius:16px;
  padding:.8rem .95rem .9rem;
  border:1px solid rgba(148,163,184,.75);
  font-size:.8rem
}
.pricing-badge{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--logo-orange);
  margin-bottom:.15rem
}
.pricing-period{
  font-size:.72rem;
  color:var(--text-sub);
  margin-bottom:.35rem
}
.pricing-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:.15rem
}
.pricing-row span:last-child{
  font-weight:700;
  color:#fef9c3
}
.benefits-list{
  font-size:.82rem;
  color:var(--text-sub);
  margin-top:.7rem
}
.benefits-list ul{
  margin-top:.25rem;
  padding-left:1.1rem
}
.benefits-list li{
  margin-bottom:.15rem
}

/* FORM */
.form-wrapper{
  background:rgba(3,24,19,.97);
  border-radius:var(--radius-xl);
  padding:1.7rem 1.6rem 1.5rem;
  border:1px solid rgba(148,163,184,.8);
  box-shadow:0 20px 60px rgba(2,20,15,.95)
}
.form-header{
  margin-bottom:1rem
}
.form-title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:.2rem;
  color:var(--text-soft)
}
.form-subtitle{
  font-size:.86rem;
  color:var(--text-sub)
}
#omadaForm{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem 1rem;
  margin-top:1rem
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  font-size:.82rem;
  color:var(--text-soft)
}
.form-group.full{
  grid-column:1/-1
}
.form-step {
  display: none;
}
.form-step.active {
  display: block;
}
.form-step-title {
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}
.form-actions-step {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}
.form-group select {
  width: 100%;
}

label span{
  color:var(--accent-lime);
  margin-left:.08rem
}
input,select,textarea{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.9);
  padding:.55rem .75rem;
  font-size:.85rem;
  font-family:inherit;
  background:rgba(4,30,22,.98);
  color:var(--text-soft);
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)
}
textarea{
  border-radius:16px;
  min-height:80px;
  resize:vertical
}
input:focus,select:focus,textarea:focus{
  border-color:var(--green-primary);
  box-shadow:0 0 0 1px rgba(34,197,94,.9);
  background:rgba(5,46,33,1)
}
.form-footnote{
  font-size:.74rem;
  color:#9ca3af;
  margin-top:.5rem
}
.form-actions{
  margin-top:1rem;
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  align-items:center
}
.btn-submit{
  padding:.8rem 1.6rem;
  border-radius:999px;
  border:none;
  font-weight:700;
  font-size:.93rem;
  cursor:pointer;
  background:linear-gradient(135deg,var(--green-primary),var(--accent-lime));
  color:#052e16;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  box-shadow:0 16px 45px rgba(22,163,74,.7);
  transition:transform var(--transition),box-shadow var(--transition)
}
.btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 60px rgba(22,163,74,.9)
}
.form-note{
  font-size:.78rem;
  color:var(--text-sub)
}
.form-alt {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px dashed rgba(148, 255, 196, 0.4);
  background: rgba(15, 23, 42, 0.7);
  font-size: 0.9rem;
  color: #cbd5f5;
}

.btn-gform {
  display: inline-flex;
  margin-top: 0.6rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.btn-gform:hover {
  background: rgba(34, 197, 94, 0.15);
}


/* GALLERY GRID (INDEX & GALERI – untuk section #galeri di index) */
.gallery{
  background:radial-gradient(circle at top,rgba(6,95,70,.7),rgba(3,24,19,.98))
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.gallery-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#020617;
  border:1px solid rgba(148,163,184,.7);
  box-shadow:0 16px 45px rgba(2,20,15,.85);
  cursor:pointer;
  isolation:isolate
}
.gallery-img-wrap{
  position:relative;
  overflow:hidden
}
.gallery-img{
  width:100%;
  height:180px;
  object-fit:cover;
  transition:transform .4s ease,opacity .3s ease;
  display:block;
  opacity:0;           /* akan jadi 1 setelah .loaded */
}
.gallery-img.loaded{
  opacity:1;
}
.gallery-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(15,23,42,.9),rgba(15,23,42,.1));
  opacity:0;
  transition:opacity .3s ease
}
.gallery-badge{
  position:absolute;
  top:.5rem;
  left:.5rem;
  padding:.18rem .55rem;
  border-radius:999px;
  font-size:.68rem;
  background:rgba(34,197,94,.9);
  color:#052e16;
  font-weight:600
}
.gallery-card:hover .gallery-img{
  transform:scale(1.06);
  opacity:.95
}
.gallery-card:hover .gallery-overlay{
  opacity:1
}
.gallery-caption{
  padding:.6rem .75rem .7rem;
  font-size:.8rem;
  color:var(--text-soft);
  background:rgba(3,24,19,.98);
  border-top:1px solid rgba(30,64,175,.35)
}
.gallery-caption .year{
  display:block;
  font-size:.7rem;
  color:#bfdbfe;
  margin-bottom:.15rem
}

/* IMAGE LOADER (pakai logo) */
.gallery-loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.9);
  backdrop-filter:blur(2px);
  transition:opacity .25s ease;
  z-index:2
}
.gallery-loader.hidden{
  opacity:0;
  pointer-events:none
}
.gallery-loader::before{
  content:"";
  width:42px;
  height:42px;
  border-radius:999px;
  background:#020617 url("../img/logo_omada_x.png") center/70% no-repeat;
  box-shadow:0 0 0 2px rgba(148,163,184,.6);
  animation:omada-pulse 1.1s ease-in-out infinite
}
@keyframes omada-pulse{
  0%{
    transform:scale(.9);
    opacity:.8
  }
  50%{
    transform:scale(1);
    opacity:1
  }
  100%{
    transform:scale(.9);
    opacity:.8
  }
}

/* LIGHTBOX (dipakai index & galeri) */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:60;
  padding:1rem
}
.lightbox.open{
  opacity:1;
  pointer-events:auto
}
.lightbox-inner{
  max-width:900px;
  width:100%;
  background:#020617;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.8);
  box-shadow:0 24px 80px rgba(0,0,0,.8);
  overflow:hidden
}
.lightbox-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.6rem .9rem;
  border-bottom:1px solid rgba(51,65,85,.8);
  font-size:.78rem;
  color:#e5e7eb;
  background:radial-gradient(circle at top left,rgba(34,197,94,.3),rgba(15,23,42,1))
}
.lightbox-close{
  border:none;
  border-radius:999px;
  width:26px;
  height:26px;
  cursor:pointer;
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease,transform .2s ease
}
.lightbox-close:hover{
  background:rgba(220,38,38,.95);
  transform:translateY(-1px)
}
.lightbox-body{
  padding:.75rem .9rem .9rem
}
#lightboxImage{
  width:100%;
  max-height:480px;
  object-fit:contain;
  border-radius:12px;
  background:#020617
}
#lightboxCaption{
  margin-top:.6rem;
  font-size:.82rem;
  color:#e5e7eb
}

/* FOOTER */
footer{
  border-top:1px solid rgba(148,163,184,.6);
  padding:1.5rem 0 2rem;
  font-size:.78rem;
  color:#9ca3af;
  background:rgba(3,24,19,.95)
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:1.5rem
}
.footer-title{
  font-weight:700;
  color:var(--text-soft);
  margin-bottom:.4rem
}
.footer-contact{
  list-style:none;
  margin-top:.3rem
}
.footer-contact li{
  margin-bottom:.18rem
}
.footer-bottom{
  margin-top:1.2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.6rem;
  align-items:center
}
.footer-badge{
  font-size:.72rem;
  padding:.2rem .55rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7)
}

/* FLOATING CTA */
.floating-cta{
  position:fixed;
  bottom:1.4rem;
  right:1.4rem;
  z-index:40
}
.floating-cta button{
  padding:.7rem 1.1rem;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,var(--green-primary),var(--accent-lime));
  color:#052e16;
  font-size:.82rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  cursor:pointer;
  box-shadow:0 18px 55px rgba(22,163,74,.85);
  transition:transform var(--transition),box-shadow var(--transition),opacity var(--transition)
}
.floating-cta button:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 70px rgba(22,163,74,.95)
}
.floating-cta button .icon{
  font-size:1rem
}

/* RESPONSIVE */
@media(max-width:960px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr)
  }
  .hero{
    padding-top:2.4rem
  }
  .about-grid,
  .pricing-grid,
  .faq-grid,
  .footer-grid{
    grid-template-columns:minmax(0,1fr)
  }
  .fields-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  #omadaForm{
    grid-template-columns:minmax(0,1fr)
  }
}
@media(max-width:768px){
  .nav-links{
    position:fixed;
    inset:3.1rem .75rem auto;
    flex-direction:column;
    padding:.75rem .9rem .9rem;
    border-radius:16px;
    background:rgba(3,24,19,.98);
    border:1px solid rgba(148,163,184,.7);
    transform-origin:top;
    transform:scaleY(.6);
    opacity:0;
    pointer-events:none;
    transition:transform .2s ease,opacity .2s ease
  }
  .nav-links.open{
    transform:scaleY(1);
    opacity:1;
    pointer-events:auto
  }
  .nav-cta{
    width:100%;
    justify-content:center
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.3rem
  }
  .hero-title{
    font-size:2rem
  }
  .hero-card{
    margin-top:-.5rem
  }
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .fields-grid{
    grid-template-columns:minmax(0,1fr)
  }
  .gallery-grid{
    grid-template-columns:minmax(0,1fr)
  }
  .floating-cta{
    right:1rem;
    left:1rem;
    display:flex;
    justify-content:center
  }
  .floating-cta button{
    width:min(400px,100%);
    justify-content:center
  }
}
@media(max-width:520px){
  .navbar-inner{
    padding-inline:.15rem
  }
  .hero{
    padding-bottom:2.3rem
  }
  section{
    padding:2.3rem 0 2.1rem
  }
  .section-title{
    font-size:1.4rem
  }
  .gallery-img{
    height:170px
  }
}
/* PESERTA 2 (TIM IPS) */
.peserta2-hidden {
  display: none !important;
}

.peserta2-show {
  display: block !important;
  grid-column: 1 / -1;
}
input[readonly] {
  background: rgba(15, 23, 42, 0.9);
  color: var(--text-sub);
  cursor: not-allowed;
}