/* =========================================================================
   Website UI Kit — Setiya Dinamika Integrasi
   Component-level styles. Imports brand tokens from colors_and_type.css.
   ========================================================================= */

@import url('colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-body);
}

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Layout helpers ---------- */
.sd-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.sd-section { padding-block: var(--space-12); }
.sd-section--tint { background: var(--bg-page-tint); }

/* ---------- Buttons ---------- */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  padding: 14px 26px;
  border-radius: var(--radius-md);
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.sd-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.sd-btn--primary {
  background: var(--gradient-brand);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-1);
}
.sd-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); filter: saturate(1.05); }
.sd-btn--primary:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); }

.sd-btn--solid {
  background: var(--sd-cyan-500);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-1);
}
.sd-btn--solid:hover { background: var(--sd-cyan-600); transform: translateY(-1px); box-shadow: var(--shadow-2); }

.sd-btn--ghost {
  background: transparent;
  color: var(--sd-navy-800);
  border: 1.5px solid var(--sd-navy-800);
}
.sd-btn--ghost:hover { background: var(--sd-navy-050); }

.sd-btn--ghost-light {
  background: transparent;
  color: var(--fg-on-dark);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.sd-btn--ghost-light:hover { background: rgba(255,255,255,0.08); border-color: white; }

/* ---------- Inputs ---------- */
.sd-input, .sd-textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: var(--sd-white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.sd-input:focus, .sd-textarea:focus {
  outline: none;
  border-color: var(--border-accent);
  box-shadow: var(--shadow-focus);
}
.sd-input::placeholder, .sd-textarea::placeholder { color: var(--fg-4); }
.sd-textarea { min-height: 120px; resize: vertical; }

/* ---------- Cards ---------- */
.sd-card {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-7);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.sd-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--sd-navy-200);
}

/* ---------- Hexagon icon container ---------- */
.sd-hex {
  --hex-size: 64px;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1);
  display: grid;
  place-items: center;
  background: var(--gradient-brand);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--fg-on-dark);
  flex-shrink: 0;
}
.sd-hex--cyan { background: var(--gradient-cyan); }
.sd-hex--lg { --hex-size: 88px; }

.sd-circle-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sd-navy-800);
  color: var(--fg-on-dark);
  flex-shrink: 0;
}
.sd-circle-icon--cyan { background: var(--sd-cyan-500); }

/* ---------- Eyebrow tag (angled ribbon) ---------- */
.sd-tag {
  display: inline-flex;
  align-items: center;
  background: var(--sd-navy-800);
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 28px 8px 18px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

/* ---------- Section header pattern ---------- */
.sd-section-head {
  text-align: center;
  margin-bottom: var(--space-9);
}
.sd-section-head h2 {
  font-size: var(--fs-h1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.sd-section-head h2 .accent { color: var(--sd-cyan-500); }
.sd-section-head .sd-rule { display: inline-flex; }

/* ---------- Cyan/Navy segmented rule ---------- */
.sd-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sd-rule::before {
  content: "";
  width: 60px; height: 3px;
  background: var(--sd-cyan-500);
  border-radius: 2px;
}
.sd-rule::after {
  content: "";
  width: 8px; height: 8px;
  background: var(--sd-cyan-500);
  border-radius: 50%;
}
.sd-rule--with-line {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 480px;
  margin-inline: auto;
}
.sd-rule--with-line::after {
  content: ""; flex: 1; height: 1px; background: var(--sd-slate-200);
}
.sd-rule--with-line::before {
  content: ""; flex: 1; height: 1px; background: var(--sd-slate-200);
}

/* ---------- Animation entrance ---------- */
@keyframes sd-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.sd-rise { animation: sd-rise 0.6s var(--ease-out) both; }
.sd-rise-delay-1 { animation-delay: 0.08s; }
.sd-rise-delay-2 { animation-delay: 0.16s; }
.sd-rise-delay-3 { animation-delay: 0.24s; }
.sd-rise-delay-4 { animation-delay: 0.32s; }

@keyframes sd-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sd-orbit { animation: sd-orbit 14s linear infinite; transform-origin: center; }

/* ── Hero Animation Keyframes ────────────────────────── */

/* Blob morph — organic shape-shift */
@keyframes hero-blob-morph {
  0%   { border-radius: 60% 40% 50% 70% / 60% 50% 50% 40%; }
  25%  { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
  50%  { border-radius: 65% 35% 45% 55% / 55% 40% 60% 45%; }
  75%  { border-radius: 35% 65% 55% 45% / 45% 55% 35% 65%; }
  100% { border-radius: 60% 40% 50% 70% / 60% 50% 50% 40%; }
}
.hero-blob-animate {
  animation: hero-blob-morph 12s ease-in-out infinite;
}

/* Floating illustration */
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero-illustration-float {
  animation: hero-float 5s var(--ease-in-out) infinite;
}

/* Glow pulse — for accent elements */
@keyframes hero-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 164, 245, 0.3); }
  50% { box-shadow: 0 0 20px 4px rgba(43, 164, 245, 0.18); }
}
.hero-glow-pulse {
  animation: hero-glow-pulse 3s ease-in-out infinite;
}

/* Text stagger — word-by-word reveal */
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(24px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-text-stagger {
  display: inline-block;
  animation: hero-text-in 0.65s var(--ease-out) both;
}

/* Subtle gradient shift on the blob */
@keyframes hero-gradient-shift {
  0%, 100% { opacity: 0.94; }
  50% { opacity: 0.88; }
}
.hero-blob-animate {
  animation: hero-blob-morph 12s ease-in-out infinite,
             hero-gradient-shift 6s ease-in-out infinite;
}

/* Rotating ring accent (on the illustration) */
@keyframes hero-ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* =========================================================================
   RESPONSIVE — Mobile-first overrides
   ========================================================================= */

/* === Desktop: show nav, hide mobile === */
@media (min-width: 769px) {
  .sd-mobile-menu { display: none !important; }
  .sd-hamburger { display: none !important; }
}

/* === Mobile: show hamburger, fix layouts === */
@media (max-width: 768px) {
  .sd-nav-desktop { display: none !important; }
  .sd-hamburger { display: flex !important; }

  .sd-container { padding: 0 16px; }
  section.sd-section, section { padding: 48px 0 !important; }

  /* Hero: stack vertically, hide big illustration */
  .sd-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; text-align: center; }
  .sd-hero-illustration { display: none !important; }
  .sd-hero-actions { justify-content: center !important; flex-wrap: wrap; }
  .sd-hero-attributes { justify-content: center !important; flex-wrap: wrap; }

  /* Pillars: stack vertically */
  .sd-pillars-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .sd-pillars-cards { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sd-pillars-cards > div:nth-child(even) { transform: none !important; }

  /* Products: single column */
  .sd-products-grid { grid-template-columns: 1fr !important; }

  /* Services: single column */
  .sd-services-grid { grid-template-columns: 1fr !important; }

  /* WhyPartner: stack */
  .sd-why-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .sd-why-cards { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* CTA: stack form below info */
  .sd-cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .sd-cta-form-row { grid-template-columns: 1fr !important; }

  /* Footer: stack columns */
  .sd-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center; }
  .sd-footer-social { justify-content: center !important; }

  /* Smaller headings */
  h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  h2 { font-size: clamp(24px, 6vw, 36px) !important; }
  h3 { font-size: 18px !important; }

  /* --- INLINE STYLE OVERRIDES (JSX grid fix) --- */
  /* Force all inline grid layouts to single column */
  main > section > div > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards: smaller padding */
  .sd-card {
    padding: 20px !important;
  }

  /* Buttons: touch-friendly */
  .sd-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
    width: 100%;
    justify-content: center;
  }
  .sd-btn--ghost, .sd-btn--ghost-light {
    width: auto;
  }

  /* Section heads: tighter */
  .sd-section-head { margin-bottom: 32px !important; }
  .sd-section-head h2 { font-size: clamp(22px, 6vw, 32px) !important; }

  /* CTA contact info: stack */
  main section div[style*="gridTemplateColumns: 1fr 1fr"],
  main section div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer bottom bar */
  .sd-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* Form inputs: full width */
  .sd-input, .sd-textarea { font-size: 16px !important; }
}

/* === Extra small devices (phones, < 400px) === */
@media (max-width: 400px) {
  .sd-container { padding: 0 12px; }
  section.sd-section, section { padding: 36px 0 !important; }
  .sd-card { padding: 16px !important; }
  .sd-btn { padding: 11px 16px !important; font-size: 13px !important; }

  /* Promo badges: smaller */
  main section div[style*="position: absolute; top: 12px"] {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
}

/* ── Promo Carousel ──────────────────────────────────── */
.promo-carousel-wrap {
  max-width: 900px; margin: 0 auto 48px;
  display: flex; flex-direction: column; align-items: center;
}
.promo-carousel-track {
  display: flex; gap: 0; overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(7,26,77,0.1);
  aspect-ratio: 1 / 1; max-height: 500px;
  background: var(--sd-slate-100);
  align-items: center; justify-content: center;
}
.promo-carousel-slide {
  flex: 0 0 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: none;
}
.promo-carousel-slide.active {
  display: flex; align-items: center; justify-content: center;
}
.promo-carousel-slide img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: var(--sd-slate-050); margin: auto;
}
.promo-carousel-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.promo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sd-slate-300);
  border: none; cursor: pointer; padding: 0;
  transition: all 0.3s ease;
}
.promo-dot.active {
  background: var(--sd-navy-800);
  width: 28px; border-radius: 5px;
}
.promo-dot:hover { background: var(--sd-navy-400); }

@media (max-width: 768px) {
  .promo-carousel-wrap { margin: 0 0 36px; }
  .promo-carousel-track { aspect-ratio: 1 / 1; max-height: 340px; border-radius: 10px; }
}

/* ── Welcome Popup ──────────────────────────────────── */
.popup-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(4, 18, 58, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(10px);
  animation: popup-fadein 0.3s ease;
}
@keyframes popup-fadein { from { opacity: 0; } to { opacity: 1; } }
.popup-modal {
  background: white; border-radius: 20px;
  width: 100%; max-width: 480px;
  box-shadow: 0 32px 80px rgba(4, 18, 58, 0.35);
  animation: popup-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden;
}
@keyframes popup-rise {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.popup-close:hover { color: var(--sd-slate-600) !important; }
.popup-header {
  text-align: center; padding: 28px 24px 16px;
  border-bottom: 1px solid var(--sd-slate-100);
}
.popup-header h3 {
  font-size: 20px; font-weight: 800; color: var(--sd-navy-800);
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.popup-header p {
  font-size: 13px; color: var(--sd-slate-400); margin: 0;
}
.popup-slider {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; gap: 12px;
}
.popup-slide {
  flex: 1; max-width: 380px;
  aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(7,26,77,0.08);
  background: var(--sd-slate-050);
}
.popup-slide img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.popup-arrow {
  background: var(--sd-slate-100); border: 1px solid var(--sd-slate-200);
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--sd-slate-600);
  transition: all 0.2s; flex-shrink: 0;
}
.popup-arrow:hover { background: var(--sd-navy-800); color: white; border-color: var(--sd-navy-800); }
.popup-dots {
  display: flex; justify-content: center; gap: 8px; padding: 0 20px 20px;
}
.popup-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sd-slate-300); border: none; cursor: pointer;
  padding: 0; transition: all 0.3s;
}
.popup-dot.active { background: var(--sd-navy-800); width: 24px; border-radius: 4px; }
.popup-dot:hover { background: var(--sd-navy-400); }
.popup-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 24px 24px;
}
.popup-btn-primary {
  width: 100%; padding: 13px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sd-navy-800), var(--sd-cyan-600));
  color: white; font-size: 14px; font-weight: 700; border: none;
  cursor: pointer; transition: all 0.2s;
}
.popup-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(18,135,214,0.3); }
.popup-btn-skip {
  width: 100%; padding: 10px; background: none;
  border: 1px solid var(--sd-slate-200); border-radius: 10px;
  color: var(--sd-slate-500); font-size: 13px; cursor: pointer;
  transition: all 0.2s;
}
.popup-btn-skip:hover { border-color: var(--sd-slate-400); color: var(--sd-slate-700); }

@media (max-width: 480px) {
  .popup-modal { max-width: 92vw; }
  .popup-slider { padding: 16px 8px; gap: 6px; }
  .popup-slide { max-width: 280px; }
  .popup-arrow { width: 32px; height: 32px; font-size: 18px; }
}