/* ============================================================
   lazy-main.css  — Credittus P1 LazySlides template
   Rapikan: font sizing, spacing, gambar, carousel konsisten
   ============================================================ */

/* Google Fonts sudah di-load via head — Roboto + Material Symbols */

/* ── Base container ─────────────────────────────────── */
.container_lazy {
  overflow-x: hidden;
  color: #333333;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  box-sizing: border-box;
}

.container_lazy *,
.container_lazy *::before,
.container_lazy *::after {
  box-sizing: border-box;
}

.container_lazy img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Typography ─────────────────────────────────────── */
.container_lazy h1,
.container_lazy h2,
.container_lazy h3,
.container_lazy h4,
.container_lazy h5,
.container_lazy h6,
.roboto {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Heading size hierarchy ─────────────────────────── */
.container_lazy h1 { font-size: 1.75rem !important; font-weight: 700; line-height: 1.25; }
.container_lazy h2 { font-size: 1.35rem !important; font-weight: 700; line-height: 1.3;  }
.container_lazy h3 { font-size: 1.15rem !important; font-weight: 700; line-height: 1.35; }
.container_lazy h4 { font-size: 1.05rem !important; font-weight: 600; }
.container_lazy h5 { font-size: 1rem    !important; font-weight: 600; }
.container_lazy h6 { font-size: 0.95rem !important; font-weight: 600; }


/* ── Material Symbols ───────────────────────────────── */
.container_lazy .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  vertical-align: middle;
  font-size: 20px;
  line-height: 1;
}

/* ── Colors ─────────────────────────────────────────── */
.container_lazy .color-cyan { color: #33A88F; }
.container_lazy .bg-orange  { background-color: #33A88F; }

/* ── Buttons ─────────────────────────────────────────── */
.container_lazy a.button {
  display: block;
  width: 90%;
  max-width: 320px;
  margin: 0 auto 8px;
  padding: 14px 22px;
  background: #33A88F;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  transition: opacity 0.2s ease-in-out, transform 0.1s ease;
}

.container_lazy a.button:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.container_lazy div.button-sm {
  display: block;
  width: 250px;
  padding: 10px 16px;
  background: #33A88F;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
  border-radius: 6px;
  transition: opacity 0.2s ease-in-out;
  box-sizing: border-box;
}

.container_lazy div.button-sm:hover { opacity: 0.80; }

/* ── Button with icon ───────────────────────────────── */
.container_lazy .btn-with-icon {
  position: relative;
  padding-right: 40px;
}

.container_lazy .btn-with-icon .material-symbols-outlined {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Cards (carousel slides) ────────────────────────── */
.container_lazy .card {
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.container_lazy .card-body {
  padding: 16px !important;
}

.container_lazy .card img {
  width: auto !important;
  max-width: 220px;
  height: auto;
  margin: 12px auto;
}

/* ── Slick carousel overrides ──────────────────────── */
.container_lazy .slick-slider {
  margin-bottom: 0;
}

.container_lazy .slick-slide img {
  width: auto;
  max-width: 220px;
  margin: 0 auto;
}

.container_lazy .slick-prev,
.container_lazy .slick-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  z-index: 10;
}

.container_lazy .slick-prev { left: -12px; }
.container_lazy .slick-next { right: -12px; }

/* ── Headings in content sections ───────────────────── */
.container_lazy .asdasdas h2,
.container_lazy .asdasdas h3,
.container_lazy .asdasdas h4 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  padding-left: 16px;
  margin-top: 24px;
  margin-bottom: 10px;
}

.container_lazy .asdasdas h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #33A88F;
  display: block;
  border-radius: 2px;
}

.container_lazy .asdasdas p {
  font-size: 16px;
  line-height: 1.7;
  color: #444444;
  margin-bottom: 12px;
}

/* ── Redirect note under button ─────────────────────── */
.container_lazy .redirect,
.redirect {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #888888;
  margin-top: 4px;
}

/* ── Footer ─────────────────────────────────────────── */
.container_lazy footer {
  width: 100%;
  background: #f4f4f4;
}

.container_lazy footer .container {
  padding-top: 20px;
  padding-bottom: 10px;
}

.container_lazy footer .container p {
  font-size: 12px;
  text-align: justify;
  line-height: 1.5;
}

.container_lazy footer .container span {
  font-size: 14px;
  font-weight: bold;
}

.container_lazy footer .container a {
  font-size: 10px;
  color: #194b40;
  text-decoration: none;
  font-weight: bold;
}

.container_lazy footer img {
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ── FAQ section ─────────────────────────────────────── */
.container_lazy .faq {
  margin-top: 16px;
}

.container_lazy .faq h2 {
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.4;
  color: #222222;
  cursor: pointer;
  margin: 0;
  display: block;
  letter-spacing: 0.2px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.container_lazy .faq ul {
  list-style: none;
  padding: 0;
  margin: 0;
  perspective: 900px;
}

.container_lazy .faq ul li {
  position: relative;
  padding: 16px 0 4px;
  margin: 0;
  border-top: 1px solid #dce7eb;
}

.container_lazy .faq ul li:first-of-type { animation-delay: 0.5s; }
.container_lazy .faq ul li:nth-of-type(2) { animation-delay: 0.75s; }
.container_lazy .faq ul li:nth-of-type(3) { animation-delay: 1s; }
.container_lazy .faq ul li:last-of-type { padding-bottom: 0; }

.container_lazy .faq ul li i {
  position: absolute;
  right: 0;
  top: 20px;
  transform: translateX(-6px);
}

.container_lazy .faq ul li i::before,
.container_lazy .faq ul li i::after {
  content: "";
  position: absolute;
  background-color: #33A88F;
  width: 3px;
  height: 9px;
}

.container_lazy .faq ul li i::before {
  transform: translate(-2px, 0) rotate(45deg);
}

.container_lazy .faq ul li i::after {
  transform: translate(2px, 0) rotate(-45deg);
}

.container_lazy .faq ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

.container_lazy .faq ul li p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(48, 69, 92, 0.85);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 10px;
  transition: all 0.25s ease-in-out;
  z-index: 2;
}

.container_lazy .faq ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}

.container_lazy .faq ul li input[type=checkbox]:checked ~ i::before {
  transform: translate(2px, 0) rotate(45deg);
}

.container_lazy .faq ul li input[type=checkbox]:checked ~ i::after {
  transform: translate(-2px, 0) rotate(-45deg);
}

/* ── Animations ─────────────────────────────────────── */
.container_lazy .transition,
.container_lazy ul li i::before,
.container_lazy ul li i::after,
.container_lazy p {
  transition: all 0.25s ease-in-out;
}

.container_lazy .flipIn,
.container_lazy ul li,
.container_lazy h1 {
  animation: flipdown 0.4s ease both;
}

@keyframes flipdown {
  0%   { opacity: 0; transform-origin: top center; transform: rotateX(-90deg); }
  5%   { opacity: 1; }
  80%  { transform: rotateX(8deg); }
  83%  { transform: rotateX(6deg); }
  92%  { transform: rotateX(-3deg); }
  100% { transform-origin: top center; transform: rotateX(0deg); }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 576px) {
  .container_lazy a.button {
    font-size: 13px;
    padding: 13px 16px;
    width: 96%;
  }

  .container_lazy .card img {
    max-width: 180px;
  }

  .container_lazy .faq h2 {
    font-size: 15px !important;
  }

  .container_lazy .asdasdas h2 {
    font-size: 17px !important;
  }
}

/* ── Options section overflow fix ──────────────────── */
.container_lazy .options-section,
.options-section {
  overflow-x: hidden !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
}