/* ============================================================
   HOME PAGE — index.blade.php
   Halaman: barantum.com (homepage)
   ============================================================ */

/* ------------------------------------------------------------------
   1. PRODUCT CARDS — IMAGE
   ------------------------------------------------------------------ */
.product-card img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ------------------------------------------------------------------
   2. SECTION WRAP
   ------------------------------------------------------------------ */
.section-wrap {
  padding: 48px 20px;
}

/* ------------------------------------------------------------------
   3. PRODUCT CARD BASE
   ------------------------------------------------------------------ */
.product-card {
  border-radius: 20px;
  border: none;
  overflow: hidden;
  height: 100%;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px rgb(0 0 0 / .15);
}

/* ------------------------------------------------------------------
   4. CARD VARIANTS (background)
   ------------------------------------------------------------------ */
.card-whatsapp {
  background: linear-gradient(160deg, #D1F0FE 16%, #AEDBF9 97.04%);
}

.card-crm {
  background: linear-gradient(153.77deg, rgb(242 249 212 / .4) 16.5%, #62C655 97.04%);
  border: none;
}

.card-callcenter {
  background: linear-gradient(153.77deg, #D1F0FE 16%, #AEDBF9 96.04%);
}

/* ------------------------------------------------------------------
   5. CARD TYPOGRAPHY
   ------------------------------------------------------------------ */
.card-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #094674;
  line-height: 1.3;
}

.card-title-green {
  color: #0d6b39 !important;
}

.card-text {
  font-size: .9rem;
  color: #232933;
  line-height: 1.4;
  font-weight: 400;
  align-items: center;
}

/* ------------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------------ */
.btn-coba,
.btn-coba-primay {
  background: #6c3de8;
  color: #fff;
  border-radius: 4px;
  padding: 10px 48px;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn-coba:hover {
  background: #5a2fd6;
  color: #fff;
  transform: scale(1.04);
}

/* ------------------------------------------------------------------
   7. LINK "PELAJARI LEBIH LANJUT"
   ------------------------------------------------------------------ */
.link-pelajari {
  font-size: 16px;
  color: #1174B5;
  font-weight: 400;
  text-decoration: none;
}

.link-pelajari:hover {
  text-decoration: none;
  color: #0f649e;
}

/* ------------------------------------------------------------------
   8. UTILITIES
   ------------------------------------------------------------------ */
.text-muted        { color: #474747 !important; }
.see-feature       { color: #3d3f43; }
.text-primary-2    { color: #01558d !important; }
.text-primary-3    { color: #005387; }
.company-list      { gap: 1rem 1.25rem; }
#try-now           { width: 250px; }
.list-feature,
.why-choose        { row-gap: 1rem; }

/* ------------------------------------------------------------------
   9. WHY ITEM
   ------------------------------------------------------------------ */
.why-item          { position: relative; min-height: 305px; }
.why-item img      { position: absolute; bottom: 0; right: 0; }

/* ------------------------------------------------------------------
   10. SWIPER / CAROUSEL
   ------------------------------------------------------------------ */
.swiper-button-next,
.swiper-button-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: static;
  background: 0 0;
  border: 1px solid #ededed;
  border-radius: 50%;
  margin-top: 0;
}

.accordion .card-header::after { display: none; }

#feature-testimony-carousel {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

/* ------------------------------------------------------------------
   11. OTHER FEATURE ICONS
   ------------------------------------------------------------------ */
.other-feature-icon-container { width: 50px; height: 50px; margin-bottom: 32px; }
.other-feature-icon            { width: 50px; height: 50px; }

.small-icon {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: -15px;
  right: -12px;
  background: #e4f2fb;
  box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;
}

/* ------------------------------------------------------------------
   12. PRICING
   ------------------------------------------------------------------ */
.pricing-header { display: flex; align-items: center; margin-bottom: 1rem; }

@media (min-width: 1200px) {
  .card-pricing-omni { min-height: 400px; }
}

/* ------------------------------------------------------------------
   13. GRADIENT TEXT (animated)
   ------------------------------------------------------------------ */
.gradient-text {
  color: transparent;
  background: linear-gradient(90deg, #020024 0, #090979 35%, #00d4ff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: 5s infinite animateGradientText;
  -webkit-animation: 3s infinite animateGradientText;
}

@keyframes animateGradientText {
  0%, 100% { background-position: 10% 0; }
  50%       { background-position: 90% 0; }
}

/* ------------------------------------------------------------------
   14. HERO BACKGROUND & AGENT PHOTOS
   ------------------------------------------------------------------ */

/* Override: .slice dari barantum2022.css memberi background:#fff
   yang menutupi gradient. Buat transparan di dalam hero wrapper. */
.hero-home-bg,
.hero-home-bg section,
.hero-home-bg .slice {
  background: transparent !important;
}

.hero-home-bg {
  background: linear-gradient(180deg, #d8f4fb 0%, #eafdfb 55%, rgba(255,255,255,0) 100%) !important;
}

/* --- Animasi floating --- */
@keyframes agentFloatLeft {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(-2deg); }
  50%       { transform: translateY(calc(-50% - 14px)) translateX(4px) rotate(1deg); }
}

@keyframes agentFloatRight {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(2deg); }
  50%       { transform: translateY(calc(-50% - 10px)) translateX(-4px) rotate(-1deg); }
}

/* --- Wrapper --- */
.hero-side-agent {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}

/* Kiri — lebih besar */
.hero-agent-left {
  left: 10px;
  animation: agentFloatLeft 5.5s ease-in-out infinite;
  animation-fill-mode: both;
}

/* Kanan — lebih kecil, fase berbeda */
.hero-agent-right {
  right: 10px;
  animation: agentFloatRight 4.5s ease-in-out 1s infinite;
  animation-fill-mode: both;
}

/* --- Ring terluar --- */
.agent-ring-3 {
  border-radius: 50%;
  border: 1.5px solid rgba(1, 115, 165, .2);
  display: flex; align-items: center; justify-content: center;
}

/* --- Ring tengah --- */
.agent-ring-2 {
  border-radius: 50%;
  border: 1.5px solid rgba(1, 115, 165, .35);
  display: flex; align-items: center; justify-content: center;
}

/* --- Ring dalam / foto --- */
.agent-ring-1 {
  border-radius: 50%;
  overflow: hidden;
  background: rgba(200, 234, 245, .6);
}

.agent-ring-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* === KIRI: besar === */
.hero-agent-left .agent-ring-3 { width: 220px; height: 220px; }
.hero-agent-left .agent-ring-2 { width: 186px; height: 186px; }
.hero-agent-left .agent-ring-1 { width: 154px; height: 154px; }

/* === KANAN: lebih kecil === */
.hero-agent-right .agent-ring-3 { width: 170px; height: 170px; }
.hero-agent-right .agent-ring-2 { width: 144px; height: 144px; }
.hero-agent-right .agent-ring-1 { width: 118px; height: 118px; }

/* ------------------------------------------------------------------
   15. CARD ICON (di atas tiap product card)
   ------------------------------------------------------------------ */
.card-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 20px auto 0;
  font-size: 22px;
}

.card-icon-blue  { background: rgba(9, 70, 116, .1); color: #094674; }
.card-icon-green { background: rgba(18, 140, 78, .12); color: #0d7a40; }

/* ------------------------------------------------------------------
   16. HERO DECORATION (lingkaran kanan)
   ------------------------------------------------------------------ */
.hero-decoration::after {
  content: "";
  background: #d3f2fd;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: -20%;
  width: 50%;
  height: 120%;
}

/* ------------------------------------------------------------------
   17. ILLUSTRATION / HERO IMAGE
   ------------------------------------------------------------------ */
.hero-illustration { min-height: 300px; }

@media (max-width: 1299px) {
  .hero-illustration img { max-width: 100%; height: auto; }
}

@media (min-width: 993px) and (max-width: 1299px) {
  .illustration-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -12px;
    z-index: 1;
  }
}

/* ------------------------------------------------------------------
   18. TESTIMONY
   ------------------------------------------------------------------ */
.img-testimony {
  width: 100%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

.about-us-testimony .name,
.about-us-testimony .title,
.illustration-container { position: relative; z-index: 2; }

@media (min-width: 1200px) {
  .about-desktop-image {
    position: absolute;
    transform: scale(1.15);
    bottom: -38px;
    right: 30px;
  }
}

/* ------------------------------------------------------------------
   19. EVENT CONTAINER (promosi / banner atas)
   ------------------------------------------------------------------ */
@keyframes event-link-anim {
  0%   { transform: translateX(0); }
  100% { transform: translateX(8px); }
}

.event-container                        { background-color: #c4e7ff; }
.event-container .container             { gap: 8px 40px; }
.event-container a.event-title:hover    { color: #212529; }
.event-container a.event-link i         { animation: 1s ease-in-out infinite event-link-anim; }
.event-container .event-schedule        { gap: 8px; }

/* ------------------------------------------------------------------
   20. BUTTON WIDTH (responsive)
   ------------------------------------------------------------------ */
.d-flex button,
.d-flex .whatsapp-link-nav { width: 100%; }

@media (min-width: 768px) {
  .d-flex button,
  .d-flex .whatsapp-link-nav { width: auto; }
}

/* ------------------------------------------------------------------
   21. RESPONSIVE — TABLET (≤ 992px)
   ------------------------------------------------------------------ */
@media (max-width: 992px) {
  h2                          { font-size: 1.25rem !important; }
  h3                          { font-size: 1.125rem; }
  .h5, .text-lg               { font-size: 1rem !important; }
  .card-title                 { font-size: 1.35rem !important; }
  .card-text                  { font-size: 1rem !important; }
  .package-description        { min-height: initial !important; }
  .border-right-desktop       { border: none; }
  .event-subtitle             { font-size: 16px !important; }
}

/* ------------------------------------------------------------------
   22. RESPONSIVE — MOBILE (≤ 767px)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .hero-decoration::after          { display: none; }
  .testimony-video                 { height: auto; }
  .card-title                      { font-size: 1.3rem !important; }
  .card-text                       { font-size: .97rem !important; }
  .hero-home-bg h1.display-5       { font-size: 1.85rem !important; }
  .hero-home-bg .text-lg           { font-size: 1rem !important; }
  .link-pelajari                   { font-size: 1rem !important; }
}

@media (min-width: 500px) and (max-width: 767px) {
  .list-feature img { width: 100%; }
}

@media (min-width: 400px) and (max-width: 767px) {
  .testimony-video { height: 200px; }
}

/* ------------------------------------------------------------------
   23. RESPONSIVE — SMALL MOBILE (≤ 425px)
   ------------------------------------------------------------------ */
@media (max-width: 425px) {
  .homepage-headline { min-height: 135px; }
  .img-testimony     { top: unset; bottom: unset; }
}

/* ------------------------------------------------------------------
   24. RESPONSIVE — LANDSCAPE TABLET (768px – 992px)
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 992px) {
  .hero-decoration::after { height: 50%; }
  .homepage-headline      { min-height: 68px; }
}

/* ------------------------------------------------------------------
   25. KONSISTENSI ROUNDED CARD
   Semua elemen kartu di halaman ini menggunakan radius 20px
   ------------------------------------------------------------------ */
:root {
  --card-radius: 20px;
}

/* Product cards — sudah 20px, dipastikan via variable */
.product-card {
  border-radius: var(--card-radius);
}

/* Testimony slide cards */
#feature-testimony-carousel .bg-white {
  border-radius: var(--card-radius);
}

/* Testimony video iframe */
#feature-testimony-carousel .testimony-video {
  border-radius: var(--card-radius);
}

/* Testimony slider wrapper */
.bg-primary-light.rounded-lg {
  border-radius: var(--card-radius) !important;
}

/* Why Barantum cards */
.why-item {
  border-radius: var(--card-radius);
  overflow: hidden;
}

/* CTA / About contact us */
.about-contact-us.rounded-lg {
  border-radius: var(--card-radius) !important;
  overflow: hidden;
}