/* ============================================================
   BIRUTOTO - custom stylesheet
   Diekstrak dari blok style inline landingpage.html.
   Urutan blok = urutan dokumen asli (cascade dipertahankan).
   Dimuat SETELAH olxtoto1-4.css agar override tetap menang.

   PALET BIRUTOTO
     Primary Blue  #0057D9      White        #FFFFFF
     Dark Blue     #0B2E6B      Gold         #FFC107
     Light Blue    #EAF3FF      Gold Hover   #E6A800
     Text Dark     #1C2B4A
   Turunan: Card Border #D9E8FF | Muted Text #5A6B8C
            Hover Shadow rgba(0,87,217,.18)
   Hero gradient: linear-gradient(135deg,#0B2E6B 0%,#0057D9 100%)
   ============================================================ */

/* ---------- Header top bar override ---------- */
.header-alt__top-bar{background: linear-gradient(135deg, #0B2E6B 0%, #0057D9 100%);}

/* ---------- CTA banner (daftar / login) ---------- */
.CTABIRUTOTO468516465{display:flex;width:100%;max-width:2000px;border:2px solid #FFC107;border-radius:8px;overflow:hidden;box-shadow:0 0 24px rgba(0,87,217,.35);animation:glowing 2s infinite alternate}.m-btn{flex:1;padding:15px 0;text-align:center;text-decoration:none;color:#0B2E6B;font:900 18px Arial,sans-serif;letter-spacing:1px;background:linear-gradient(180deg,#FFC107 0,#E6A800 100%);position:relative;overflow:hidden;transition:.3s;display:block;border-right:1px solid rgba(11,46,107,.25)}.m-btn:last-child{border-right:none}.m-btn::before{content:"";position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-25deg);animation:sh 3s infinite}.m-btn::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(11,46,107,.12);transform:scaleX(0);transition:.3s;transform-origin:right}.m-btn:hover::after{transform:scaleX(1);transform-origin:left}.m-btn:hover{background:linear-gradient(180deg,#E6A800 0,#E6A800 100%);color:#0B2E6B;text-shadow:0 0 10px rgba(255,255,255,.85)}@keyframes glowing{0%{box-shadow:0 0 5px #FFC107,0 0 10px rgba(0,87,217,.35)}50%{box-shadow:0 0 20px #0057D9,0 0 10px #FFC107}100%{box-shadow:0 0 5px #FFC107,0 0 20px rgba(0,87,217,.35)}}@keyframes sh{0%{left:-150%}20%{left:150%}100%{left:150%}}

/* ---------- Carousel link resmi ---------- */
.birutotolinkresmi {
  width: 100%;
  max-width: 668px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6px;
  position: relative;
  }

  .birutotolinkresmi .carousel-track {
  display: flex;
  width: calc(110px * 3); /* total lebar = 3 slide */
  animation: sigma-slide 20s infinite;
  }

  .birutotolinkresmi .slide {
  width: 110px;
  flex-shrink: 0;
  }

  .birutotolinkresmi .slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  }

  @keyframes sigma-slide {
  0%   { transform: translateX(0); }
  33%  { transform: translateX(-110px); }
  66%  { transform: translateX(-600px); }
  100% { transform: translateX(0); }
  }

/* ---------- FAQ section (accordion) ---------- */
.faq-section {
              max-width: 1200px;
              margin: 50px auto;
              padding: 40px 20px;
              position: relative;
              background-color: #EAF3FF;
              backdrop-filter: blur(25px);
              border-radius: 20px;
            }

            .faq-section::before {
              content: "";
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 80%;
              height: 2px;
              background: linear-gradient(90deg, transparent, #0057D9, transparent)
            }

            .faq-section h2 {
              text-align: center;
              font-size: 34px;
              font-weight: 700;
              margin-bottom: 50px;
              background: linear-gradient(135deg, #0B2E6B, #0057D9, #0B2E6B);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              font-family: "Poppins", sans-serif;
              letter-spacing: 1px
            }

            .faq-container {
              display: flex;
              flex-direction: column;
              gap: 25px
            }

            .faq-item {
              background: #FFFFFF;
              border: 2px solid #0057D9;
              border-radius: 20px;
              overflow: hidden;
              transition: all .4s ease;
              box-shadow: 0 6px 20px rgba(0, 87, 217, 0.10)
            }

            .faq-item:hover {
              border-color: #FFC107;
              transform: translateX(10px);
              box-shadow: 0 12px 35px rgba(0, 87, 217, 0.18)
            }

            .faq-question {
              width: 100%;
              padding: 28px 35px;
              background: transparent;
              color: #0B2E6B;
              font-size: 18px;
              font-weight: 600;
              text-align: left;
              border: none;
              cursor: pointer;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: "Poppins", sans-serif;
              transition: all .3s ease
            }

            .faq-question:hover {
              color: #0057D9
            }

            .faq-question::after {
              content: '+';
              font-size: 32px;
              font-weight: 300;
              transition: all .4s ease;
              color: #0057D9;
              width: 40px;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 2px solid #0057D9;
              border-radius: 50%;
              background: #EAF3FF
            }

            .faq-item.active .faq-question::after {
              transform: rotate(135deg);
              background: linear-gradient(135deg, #FFC107, #E6A800);
              color: #0B2E6B;
              border-color: transparent
            }

            .faq-answer {
              max-height: 0;
              overflow: hidden;
              transition: max-height .5s ease, padding .5s ease;
              background: linear-gradient(180deg, rgba(0, 87, 217, 0.05), transparent);
              padding: 0 35px
            }

            .faq-item.active .faq-answer {
              max-height: 800px;
              padding: 30px 35px;
              border-top: 1px solid rgba(0, 87, 217, 0.25)
            }

            .faq-answer p {
              color: #1C2B4A;
              font-size: 16px;
              line-height: 2;
              margin: 0;
              font-family: "Poppins", sans-serif
            }

            @media (max-width:768px) {
              .faq-section {
                padding: 30px 15px
              }

              .faq-section h2 {
                font-size: 26px
              }

              .faq-question {
                font-size: 16px;
                padding: 22px 25px
              }

              .faq-question::after {
                width: 35px;
                height: 35px;
                font-size: 28px
              }

              .faq-answer {
                padding: 0 25px
              }

              .faq-item.active .faq-answer {
                padding: 25px
              }

              .faq-item:hover {
                transform: translateX(5px)
              }
            }

/* ---------- FAQ alternatif (cok-faq) ---------- */
/* === TITLE MATCH COLOR WITH FAQ === */
            .cok-faq-title {
              text-align: center;
              color: #0B2E6B;
              font-size: 32px;
              margin-top: 25px;
              margin-bottom: 25px;
              font-weight: 800;
              font-family: "Segoe UI", sans-serif;
              text-shadow: 0 0 12px rgba(0, 87, 217, 0.25), 0 0 20px rgba(255, 193, 7, 0.30);
              letter-spacing: 1px;
            }

            /* === FAQ CONTAINER === */
            .cok-faq {
              max-width: 1200px;
              margin: 10px auto 40px auto;
              font-family: "Segoe UI", sans-serif;
            }

            /* === QUESTION BUTTON === */
            .cok-faq-q {
              width: 100%;
              padding: 14px;
              background: #FFC107;
              color: #0B2E6B;
              font-weight: bold;
              border: 1px solid #E6A800;
              border-radius: 8px;
              cursor: pointer;
              text-align: left;
              margin-bottom: 8px;
              transition: .25s ease;
              box-shadow: 0 4px 14px rgba(0, 87, 217, 0.18);
            }

            .cok-faq-q:hover {
              background: #E6A800;
              box-shadow: 0 6px 18px rgba(0, 87, 217, 0.28);
            }

            /* === ANSWER BOX === */
            .cok-faq-a {
              max-height: 0;
              overflow: hidden;
              background: #FFFFFF;
              color: #1C2B4A;
              margin-top: -5px;
              border-radius: 0 0 8px 8px;
              padding: 0 14px;
              border-left: 1px solid #D9E8FF;
              border-right: 1px solid #D9E8FF;
              border-bottom: 1px solid #D9E8FF;
              transition: max-height .35s ease, padding .25s ease;
              box-shadow: inset 0 0 10px rgba(0, 87, 217, 0.08);
            }

            .cok-faq-a.open {
              max-height: 500px;
              padding: 14px;
            }

            /* === RESPONSIVE === */
            @media (max-width: 480px) {
              .cok-faq-title {
                font-size: 26px;
              }
            }

/* ---------- Testimoni section ---------- */
.testimoni-section {
  padding: 60px 20px;
  background: #EAF3FF;
  text-align: center;
  margin: 40px 0;
}

.testimoni-section h2 {
  color: #0B2E6B;
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 800;
  text-shadow: 0 0 18px rgba(0, 87, 217, 0.18);
  letter-spacing: 1px;
}

.testimoni-section > p {
  color: #1C2B4A;
  font-size: 18px;
  margin-bottom: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


.testimoni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}


.testimoni-card {
  background: #FFFFFF;
  border: 1px solid #D9E8FF;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 8px 24px rgba(0, 87, 217, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimoni-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 34px rgba(0, 87, 217, 0.18);
}

.rating-stars {
  color: #FFC107;
  font-size: 28px;
  margin-bottom: 15px;
  letter-spacing: 5px;
}

.testimoni-card blockquote {
  color: #1C2B4A;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  font-style: italic;
}

.testimoni-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #0057D9;
  font-size: 15px;
  font-weight: bold;
}

.testimoni-author small {
  color: #5A6B8C;
  font-weight: normal;
  font-size: 14px;
}

.testimoni-closing {
  color: #0B2E6B;
  font-size: 20px;
  margin-top: 50px;
  font-style: italic;
  text-align: justify;
}

@media (max-width: 768px) {
  .testimoni-section h2 {
    font-size: 30px;
  }
  .testimoni-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Testimoni grid (kartu animasi) ---------- */
#testimonibirutototerbaik{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:20px;max-width:1200px;margin:0 auto;font-family:'Segoe UI',sans-serif}#testimonibirutototerbaik .t-card{position:relative;background:#FFFFFF;border-radius:15px;overflow:hidden;z-index:1;padding:3px;transition:transform .3s ease;box-shadow:0 10px 30px rgba(0,87,217,0.10)}#testimonibirutototerbaik .t-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,transparent,transparent,#FFC107);animation:rotateBorder 4s linear infinite;z-index:-2}#testimonibirutototerbaik .t-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,transparent,transparent,#0057D9);animation:rotateBorder 4s linear infinite;animation-delay:-2s;z-index:-2}#testimonibirutototerbaik .t-content{background:linear-gradient(160deg,#FFFFFF 0,#EAF3FF 95%);border-radius:12px;padding:20px;height:100%;display:flex;flex-direction:column;position:relative;z-index:2;overflow:hidden}#testimonibirutototerbaik .t-content::before{content:'';position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0,rgba(0,87,217,0.10) 50%,transparent 100%);transform:skewX(-25deg);animation:kilatAuto 3.5s infinite ease-in-out;pointer-events:none}#testimonibirutototerbaik .t-card:hover{transform:scale(1.03);box-shadow:0 0 25px rgba(0,87,217,0.18)}#testimonibirutototerbaik.t-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #FFC107;padding-bottom:10px;margin-bottom:15px}#testimonibirutototerbaik .t-name{color:#0B2E6B;font-weight:900;font-size:16px;text-transform:uppercase;text-shadow:0 0 6px rgba(255,193,7,0.55)}#testimonibirutototerbaik .t-loc{color:#0057D9;font-size:12px;font-weight:700}#testimonibirutototerbaik .t-text{color:#1C2B4A;font-size:14px;line-height:1.6;font-weight:600;font-style:italic}@keyframes rotateBorder{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes kilatAuto{0%{left:-150%}30%{left:150%}100%{left:150%}}

/* ---------- Wrapper link alternatif ---------- */
.wrapbirutotolinkalternatif{position:relative;width:100%;max-width:1500px;margin:5px auto;padding:30px;background:linear-gradient(135deg,#0B2E6B 0%,#0057D9 100%) padding-box,linear-gradient(180deg,#FFC107 0,#0057D9 100%) border-box;border:4px solid transparent;border-radius:20px;text-align:center;font-family:'Segoe UI',sans-serif;box-shadow:0 0 25px rgba(0,87,217,0.28),inset 0 0 20px rgba(11,46,107,0.45);overflow:hidden;z-index:1}
.wrapbirutotolinkalternatif > *{position:relative;z-index:10}
.wrapbirutotolinkalternatif h2,.judul-wrapper-birutoto{margin:0 0 20px;font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:#FFC107;display:block;width:100%;text-align:center}
.wrapbirutotolink{color:#fff;font-size:16px;line-height:1.5;font-weight:700}

/* ---------- Footer inner override ---------- */
.footer__inner {background: #0B2E6B;}

/* ---------- Footer bottom: payment + copyright ---------- */
.footer__bottom {
    background: #fff;
}

.footer__bottom .footer__list--payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 20px 0 6px;
    list-style: none;
}

.footer__bottom .footer__list--payments .footer__list-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.footer__bottom .footer__icon {
    display: block;
    height: 28px;
    width: auto;
    max-width: none;
}

.footer__bottom .footer__hr {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid #D9E8FF;
}

.footer__bottom .footer__copyright {
    margin: 12px 0 16px;
    text-align: right;
    color: #5A6B8C;
}

.footer__bottom .footer__small {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Tablet */
@media (max-width: 991.98px) {
    .footer__bottom .footer__list--payments {
        gap: 16px;
        padding: 18px 0 6px;
    }
    .footer__bottom .footer__icon {
        height: 26px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .footer__bottom .footer__list--payments {
        justify-content: center;
        gap: 14px;
        padding: 16px 0 4px;
    }
    .footer__bottom .footer__icon {
        height: 24px;
    }
    .footer__bottom .footer__copyright {
        text-align: center;
        margin: 12px 0;
    }
}

/* ---------- Footer bar bawah (ft-btn) ---------- */
body { padding-bottom: 70px; } /* Mencegah konten tertutup footer */

    .footerbirutoto {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: linear-gradient(180deg, #0057D9 0%, #0B2E6B 100%);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 99999;
        border-top: 2px solid #FFC107;
        box-shadow: 0 -5px 20px rgba(11, 46, 107, 0.45);
        animation: activeBorder 2s infinite alternate;
        overflow: visible;
    }

    /* Animasi Border Emas / Putih Aktif Bergani-ganti */
    @keyframes activeBorder {
        0% { border-color: #FFC107; box-shadow: 0 -2px 10px rgba(255, 193, 7, 0.55); }
        50% { border-color: #FFFFFF; box-shadow: 0 -4px 20px rgba(0, 87, 217, 0.55); }
        100% { border-color: #FFC107; box-shadow: 0 -2px 15px rgba(255, 193, 7, 0.45); }
    }

    .ft-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #fff;
        font-family: sans-serif;
        transition: 0.3s;
        position: relative;
    }

    .ft-btn svg {
        width: 22px;
        height: 22px;
        fill: #fff;
        margin-bottom: 3px;
        transition: 0.3s;
    }

    .ft-btn span {
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
    }

    /* Tombol Daftar di Tengah (Lebih Menonjol) */
    .ft-main {
        background: linear-gradient(145deg, #FFC107, #E6A800);
        height: 75px;
        margin-top: -30px;
        border-radius: 50% 50% 0 0;
        border-top: 3px solid #FFFFFF;
        box-shadow: 0 -5px 15px rgba(255, 193, 7, 0.45);
    }

    .ft-main svg { width: 28px; height: 28px; }

    /* Animasi Kilatan Otomatis di Background */
    .footerbirutoto::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transform: skewX(-30deg);
        animation: flashBg 4s infinite;
    }

    @keyframes flashBg {
        0% { left: -100%; }
        30% { left: 150%; }
        100% { left: 150%; }
    }

    /* Hover After Before Effect */
    .ft-btn:hover svg {
        transform: scale(1.2) translateY(-3px);
        fill: #FFC107;
    }

    .ft-btn::after {
        content: "";
        position: absolute;
        bottom: -5px;
        width: 0;
        height: 2px;
        background: #FFC107;
        transition: 0.3s;
    }

    .ft-btn:hover::after { width: 50%; }

    /* Presisi Mobile */
    @media (max-width: 360px) {
        .ft-btn span { font-size: 8px; }
        .ft-btn svg { width: 18px; }
    }

/* ---------- Footer floating CTA ---------- */
.footer-floating-toto {
              position: fixed;
              bottom: 18px;
              left: 50%;
              transform: translateX(-50%);
              width: 100%;
              max-width: 1500px;
              display: flex;
              gap: 14px;
              padding: 16px 22px;
              background: rgb(11 46 107 / 82%);
              backdrop-filter: blur(10px);
              border-radius: 20px;
              border: 2px solid rgb(255 193 7 / 55%);
              box-shadow: 0 0 30px rgb(0 87 217 / 35%);
              z-index: 999;
          }

          /* BUTTON BASE (EQUAL SIZE) */
          .footer-btn-toto {
              flex: 1;
              min-width: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 8px;
              padding: 12px 10px;
              font-size: 14px;
              font-weight: bold;
              color: #0B2E6B;
              background: #FFC107;
              border-radius: 32px;
              border: 2px solid #E6A800;
              cursor: pointer;
              transition: all 0.3s ease;
              box-shadow: 0 4px 14px rgba(0, 87, 217, 0.28);
              animation: floatUpDown 3s ease-in-out infinite;
              text-decoration: none;
              user-select: none;
              white-space: nowrap;
          }
          /* ICON */
          .footer-btn-toto img,
          .footer-btn-toto svg {
              width: 18px;
              height: 18px;
              flex-shrink: 0;
              filter: drop-shadow(0 0 5px rgb(11 46 107 / 45%));
          }
          /* FLOAT DELAY */
          .footer-btn-toto.login {
              animation-delay: 0.3s;
          }
          .footer-btn-toto.daftar {
              animation-delay: 0.6s;
          }
          .footer-btn-toto.link {
              animation-delay: 0.9s;
          }
          .footer-btn-toto.chat {
              animation-delay: 1.2s;
          }
          /* HOVER GLOW */
          .footer-btn-toto:hover {
              background: #E6A800;
              box-shadow:
                  0 0 15px rgba(0, 87, 217, 0.25),
                  0 0 30px rgba(0, 87, 217, 0.18),
                  0 0 50px rgba(255, 193, 7, 0.35);
              transform: translateY(-6px) scale(1.05);
          }
          /* ACTIVE GOLD */
          .footer-btn-toto:active {
              background: linear-gradient(135deg, #E6A800, #FFC107);
              color: #0B2E6B;
              border-color: #FFC107;
              box-shadow:
                  0 0 18px rgba(0, 87, 217, 0.30),
                  0 0 35px rgba(0, 87, 217, 0.18);
          }
          /* FLOAT ANIMATION */
          @keyframes floatUpDown {
              0% {
                  transform: translateY(0);
              }
              50% {
                  transform: translateY(-8px);
              }
              100% {
                  transform: translateY(0);
              }
          }
          /* RESPONSIVE */
          @media (max-width: 1024px) {
              .footer-floating-toto {
                  flex-wrap: wrap;
              }
              .footer-btn-toto {
                  flex: 1 1 calc(50% - 10px);
              }
          }
          @media (max-width: 600px) {
              .footer-btn-toto {
                  flex: 1 1 100%;
                  font-size: 13px;
                  padding: 10px 12px;
              }
              .footer-btn-toto img,
              .footer-btn-toto svg {
                  width: 16px;
                  height: 16px;
              }
          }