/* =========================
   DARK MODE OVERRIDES
===========================*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* elemen #beranda awal */
#beranda {
  background-image:
    linear-gradient(to top,
      #FFFFFF 0%,
      rgba(255, 255, 255, 0) 60%),
    url('https://ik.imagekit.io/magisite/0/magihead.png?updatedAt=1757649225767');
  background-size: cover;
  background-position: center;
  transition: background-image 1.0s ease-in-out;
  /* akan transisi saat class ganti */
}

.mghead {
  color: black;
  transition: color 0.5s ease-in-out, text-shadow 1.0s ease-in-out, font-weight 1.0s ease-in-out;
}

body.dark-mode .mghead {
  color: white;
  transition: color 0.5s ease-in-out, text-shadow 1.0s ease-in-out, font-weight 1.0s ease-in-out;
}

.mgtx {
  all: unset;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
  transition: color 0.5s ease-in-out, text-shadow 1.0s ease-in-out, font-weight 1.0s ease-in-out;
  margin-left: -8px;
  margin-right: -8px;
}

.mgtx:hover {
  font-weight: 600;
  color: #52387c;
  text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.75);
  transition: color 0.5s ease-in-out, text-shadow 1.0s ease-in-out, font-weight 1.0s ease-in-out;
}

body.dark-mode .mgtx {
  all: unset;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.25);
  transition: color 0.5s ease-in-out, text-shadow 1.0s ease-in-out, font-weight 1.0s ease-in-out;
  margin-left: -8px;
  margin-right: -8px;
}

body.dark-mode .mgtx:hover {
  font-weight: 600;
  color: #c7a8f7;
  text-shadow: 1px 1px 15px rgba(255, 255, 255, 0.75);
  transition: color 0.5s ease-in-out, text-shadow 1.0s ease-in-out, font-weight 1.0s ease-in-out;
}

/* Dark mode override */
body.dark-mode #beranda {
  background-image:
    linear-gradient(to top,
      #121212 1%,
      rgba(18, 18, 18, 0) 100%),
    url('https://ik.imagekit.io/magisite/0/magihead.png?updatedAt=1757649225767');
  transition: background-image 1.0s ease-in-out;
}

body.dark-mode {
  background: #121212;
  color: #e0e0e0;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #ffffff;
}

body.dark-mode p {
  color: #cccccc;
}

/* Navbar & sticky state */
body.dark-mode .navbar-area {
  background: rgba(18, 18, 18, 0.8);
}

body.dark-mode .sticky {
  background-color: rgba(18, 18, 18, 0.85);
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .navbar-nav .nav-item a {
  color: #e0e0e0;
}

body.dark-mode .navbar-nav .nav-item a:hover,
body.dark-mode .navbar-nav .nav-item a.active {
  color: #ae97bf;
}

body.dark-mode .sticky .navbar-toggler .toggler-icon {
  background-color: #e0e0e0;
}

/* Sections with light backgrounds */
body.dark-mode .single-services,
body.dark-mode .subscribe-area {
  background-color: #1e1e1e;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode .single-services .services-content .services-title a {
  color: #fff;
}

body.dark-mode .single-services .services-content .text {
  color: #ccc;
}

body.dark-mode .subscribe-form input {
  background-color: #2b2b2b;
  border-color: #444;
  color: #fff;
}

body.dark-mode .subscribe-form input::placeholder {
  color: #999;
}

body.dark-mode .footer-about .text,
body.dark-mode .footer-about .social li a,
body.dark-mode .footer-title .title,
body.dark-mode .link-wrapper .link li a,
body.dark-mode .footer-contact .contact li,
body.dark-mode .copyright-content p,
body.dark-mode .copyright-content a {
  color: #ddd;
}

body.dark-mode .copyright-content a:hover,
body.dark-mode .link-wrapper .link li a:hover,
body.dark-mode .footer-about .social li a:hover {
  color: #ae97bf;
}

/* Back-to-top button keeps gradient but darker text if needed */
body.dark-mode .back-to-top {
  background: linear-gradient(to right, #ae97bf 0%, #fe6e9a 50%, #ae97bf 100%);
}

/* Optional: darken preloader */
body.dark-mode .preloader {
  background: #121212;
}

body.dark-mode .preloader .loader .spinner-circle {
  border-color: #ae97bf #ae97bf #333;
}

/* Generic cards/boxes */
body.dark-mode .section-title .line {
  background: linear-gradient(#ae97bf 0%, #fe6e9a 100%);
}

body.dark-mode .navbar-toggler .toggler-icon,
/* body.dark-mode .navbar-collapse, */
body.dark-mode .video-wrapper .video-icon a,
body.dark-mode .single-testimonial,
body.dark-mode .subscribe-area {
  background-color: #121212;
}

body.dark-mode .header-hero-content .header-sub-title,
body.dark-mode .header-hero-content .header-title,
body.dark-mode .header-hero-content .text {
  color: #fff;
}

body.dark-mode .single-services .services-content .more {
  color: #ae97bf;
  text-shadow: 0px 1px 2px black;
}

/* =========================
   MODE TOGGLE BUTTON
===========================*/

/* ==== Toggle Switch Style ==== */
.theme-toggle {
  /* position: fixed; */
  /* bebas pindah, misal fixed kanan atas */
  /* top: 20px; */
  /* right: 20px; */
  /* z-index: 1000; */
  opacity:0.25;
}

.theme-toggle input {
  display: none;
}

.switch-label {
  cursor: pointer;
  text-align: center;
  width: 60px;
  height: 30px;
  background: #ccc;
  border-radius: 30px;
  position: relative;
  display: inline-block;
  transition: background 0.3s;
}

.switch-label .ball {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.switch-label .sun,
.switch-label .moon {
  position: absolute;
  font-size: 14px;
  top: 3px;
}

.switch-label .moon {
  left: 8px;
}

.switch-label .sun {
  right: 8px;
}

/* Checkbox checked = dark mode */
.theme-toggle input:checked+.switch-label {
  background: #4b4b4b;
}

.theme-toggle input:checked+.switch-label .ball {
  transform: translateX(30px);
}

/* Smooth theme transition */
body {
  transition: background 0.4s ease, color 0.4s ease;
}


/*semua*/
.talent.tentang {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
}

.talent.tentang:active {
  transform: scale(0.96);
  /* sedikit mengecil */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  /* bayangan lebih kecil */
}


/*mama*/
.talent.tentang.mamyra {
  background: radial-gradient(circle,
      rgba(205, 205, 205, 0.5) 50%,
      /* tengah transparan */
      rgba(255, 255, 255, 1) 100%
      /* tepi gelap */
    ),
    url('https://ik.imagekit.io/magisite/Lyra%20Azzalea/home%20page%20lyra.jpg?updatedAt=1732886421704') center/cover no-repeat;
  background-size: 70vh;
  /* awal normal */
  background-position: center bottom;
  /* posisi tengah */
  transition: background-size 0.6s ease, background-position 0.6s ease;
}

body.dark-mode .talent.tentang.mamyra {
  background: radial-gradient(circle,
      rgba(18, 18, 18, 0.5) 2%,
      /* tengah transparan */
      rgba(18, 18, 18, 1) 100%
      /* tepi gelap */
    ),
    url('https://ik.imagekit.io/magisite/Lyra%20Azzalea/home%20page%20lyra.jpg?updatedAt=1732886421704') center/cover no-repeat;
  background-size: 70vh;
  /* awal normal */
  background-position: center bottom;
  /* posisi tengah */
  transition: background-size 0.6s ease, background-position 0.6s ease;
}

.talent.tentang.mamyra:hover,
body.dark-mode .talent.tentang.mamyra:hover {
  background-size: 80vh;
  /* zoom 10% */
  background-position: right center;
  /* geser ke kiri */
}

/*reinyan*/
.talent.tentang.reika {
  background: radial-gradient(circle,
      rgba(205, 205, 205, 0.5) 50%,
      /* tengah transparan */
      rgba(255, 255, 255, 1) 100%
      /* tepi gelap */
    ),
    url('https://ik.imagekit.io/magisite/Reika%20Ayasa/home%20page%20reika.jpg?updatedAt=1732886442259') center/cover no-repeat;
  background-size: 70vh;
  /* awal normal */
  background-position: center bottom;
  /* posisi tengah */
  transition: background-size 0.6s ease, background-position 0.6s ease;
}

body.dark-mode .talent.tentang.reika {
  background: radial-gradient(circle,
      rgba(18, 18, 18, 0.5) 2%,
      /* tengah transparan */
      rgba(18, 18, 18, 1) 100%
      /* tepi gelap */
    ),
    url('https://ik.imagekit.io/magisite/Reika%20Ayasa/home%20page%20reika.jpg?updatedAt=1732886442259') center/cover no-repeat;
  background-size: 70vh;
  /* awal normal */
  background-position: center bottom;
  /* posisi tengah */
  transition: background-size 0.6s ease, background-position 0.6s ease;
}

.talent.tentang.reika:hover,
body.dark-mode .talent.tentang.reika:hover {
  background-size: 80vh auto;
  /* zoom 10% */
  background-position: center center;
  /* geser ke kiri */
}


/*bg piel*/
.talent.tentang.piel {
  background: radial-gradient(circle,
      rgba(205, 205, 205, 0.5) 50%,
      /* tengah transparan */
      rgba(255, 255, 255, 1) 100%
      /* tepi gelap */
    ),
    url('https://ik.imagekit.io/magisite/Iofiel%20Feliz/homepage%20Fiel.jpg?updatedAt=1732886477475') center/cover no-repeat;
  background-size: 70vh;
  /* awal normal */
  background-position: right bottom;
  /* posisi tengah */
  transition: background-size 0.6s ease, background-position 0.6s ease;
}

body.dark-mode .talent.tentang.piel {
  background: radial-gradient(circle,
      rgba(18, 18, 18, 0.5) 2%,
      /* tengah transparan */
      rgba(18, 18, 18, 1) 100%
      /* tepi gelap */
    ),
    url('https://ik.imagekit.io/magisite/Iofiel%20Feliz/homepage%20Fiel.jpg?updatedAt=1732886477475') center/cover no-repeat;
  background-size: 70vh;
  /* awal normal */
  background-position: right bottom;
  /* posisi tengah */
  transition: background-size 0.6s ease, background-position 0.6s ease;
}

.talent.tentang.piel:hover,
body.dark-mode .talent.tentang.piel:hover {
  background-size: 80vh;
  /* zoom 10% */
  background-position: center center;
  /* geser ke kiri */
}

/*tombol toko*/
.about-content .main-btn {
  position: relative;
  display: inline-block;
  border: none;
  border-radius: 50px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  height: 50px;
  box-shadow: 0px 0px none;
  transition: transform .75s ease, background-position 1s ease, color .5s ease, box-shadow .5s ease;
}

.main-btn.tokopedia {
  background: url('https://ik.imagekit.io/magisite/0/tokopedia.png?updatedAt=1757760847179') center/contain no-repeat, #46b549;
  /* background-color: #46b549; */
}

.main-btn.shopee {
  background: url('https://ik.imagekit.io/magisite/0/shopee.png?updatedAt=1757760847179') center/contain no-repeat, #fff;
}

.main-btn.tiktokshop {
  background: url('https://ik.imagekit.io/magisite/0/tiktokshop.png?updatedAt=1757760847179') center/contain no-repeat, #000;
}

.main-btn.gcal {
  background: url('https://ik.imagekit.io/magisite/0/gugelkalender.png?updatedAt=1757760847178') center/contain no-repeat, #fff;
}

.main-btn.gcals {
  background: url('https://ik.imagekit.io/magisite/0/gugelkalenderscan.png?updatedAt=1757760847178') center/contain no-repeat, #fff;
}

.main-btn.discord {
  background: url('https://ik.imagekit.io/magisite/0/discord.png?updatedAt=1757760847178') center/contain no-repeat, #5865F2;
}

.sosmed-area {
  /* min-height: 100vh; */
  /* penuh tinggi layar */
  display: flex;
  /* flex agar bisa center */
  justify-content: center;
  /* horizontal center */
  align-items: center;
  /* vertical center */
}

.sosmed-area .container {
  display: flex;
  flex-direction: column;
  /* tombol di-stack vertikal */
  align-items: center;
  /* teks dan ikon di tengah */
}

.social-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 12px 20px;
  margin: 10px 0;
  border-radius: 50px;
  font-weight: normal;
  transition: transform .2s ease;
  background-size: 200% 200%;
  background-position: left center;
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0px 0px none;
  transition: transform .75s ease, background-position 1s ease, color .5s ease, box-shadow .5s ease;
}

.social-btn span {
  display: block;
  line-height: 1.2;
}

.social-btn small {
  font-size: 12px;
  opacity: 0.85;
  display: block;
}

.social-btn img {
  width: 28px;
  height: 28px;
}

.cal-btn {
  width: 64px !important;
  height: 64px !important;
}

/* Brand colors */
.facebook {
  background: linear-gradient(45deg, #1877F2, #4d94f5);
}

.twitter {
  background: linear-gradient(45deg, #1DA1F2, #55b8f6);
}

.instagram {
  background: linear-gradient(45deg, #E4405F, #f0738a);
}

.youtube {
  background: linear-gradient(45deg, #FF0000, #ff5c5c);
}

.tiktok {
  background: linear-gradient(45deg, #000000, #444444);
}

.visi {
  background: linear-gradient(45deg, #770a56, #c44fa1);
}

.misi {
  background: linear-gradient(45deg, #c44fa1, #a77096);
}

.timkami {
  background: linear-gradient(45deg, #a77096, #e6bcd8);
}

.jadwal:hover {
  text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.9) !important;
}

.jadwallyra {
  background: url('https://ik.imagekit.io/magisite/0/jadwal_lyraazalea_btn-bgx.png') center/cover repeat-x;
  color: purple;
  font-size: 1.5em;
}

.jadwalreika {
  background: url('https://ik.imagekit.io/magisite/0/jadwal_reikaayasa_btn-bgx.png') center/cover repeat-x;
  color: navy;
  font-size: 1.5em;
}

.jadwalfiel {
  background: url('https://ik.imagekit.io/magisite/0/jadwal_iofielfeliz_btn-bgx.png') center/cover repeat-x;
  color: fuchsia;
  font-size: 1.5em;
}

.msoc-btn:hover,
.social-btn:hover,
.about-content .main-btn:hover {
  transform: scale(1.05);
  color: rgba(255, 255, 255, 1);
  -webkit-font-smoothing: antialiased;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
  transition: transform .75s ease, background-position 1s ease, color .5s ease, box-shadow .5s ease;
}

body.dark-mode .msoc-btn:hover,
body.dark-mode .social-btn:hover,
body.dark-mode .about-content .main-btn:hover {
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.3);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.satt {
  background: #121212;
  border-radius: 25px;
  box-shadow: 0px 0px 20px #121212;
  padding: 15px;
  overflow: hidden auto;
  max-height: 75vh;
}

/*modal*/
/* Bootbox fade helper (letakkan di akhir CSS supaya override aman) */
.modal-content {
  /* Pastikan modal-content punya transition agar fade-in berjalan */
  transition: opacity 300ms ease, transform 300ms ease;
  opacity: 1;
}

/* Saat class bbx-hidden ada pada modal wrapper, modal-content disembunyikan */
.bbx-hidden .modal-content {
  opacity: 0 !important;
  /* optional: sedikit translate supaya terasa 'naik' pas fade-in */
  transform: translateY(6px);
}

/* Setelah fade-in kita ingin posisi normal */
.bbx-shown .modal-content {
  opacity: 1;
  transform: translateY(0);
}

.mati {
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.25;
}

.blurbb {
  filter: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  /* Adjust the blur value as needed */
  transition: filter 0.3s ease-in-out;
  /* Optional: for a smooth transition */
}

.alternatext span {
  display: none;
  /* default semua hidden */
  /* font-size: 1.4rem; */
}

/*closebutton bootbox*/
.tutup {
  padding: 5px 5px 5px 25px;
  font-size: 25px;
  width: 75px;
  text-align: center;
  color: #444;
  position: absolute;
  right: 0px;
  top: 5px;
  text-shadow: 0px 0px none;
  cursor: pointer;
  transition: background 0.3s ease,
    color 0.3s ease, text-shadow 0.3s ease;
}

.tutup:hover {
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: background 0.3s ease,
    color 0.3s ease, text-shadow 0.3s ease;
}

/*info sosmed bootbox talent*/
.bottom-dock {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 75%;
  display: flex;
  justify-content: center; /* bisa ganti space-between kalau mau */
  z-index: 9999;
  justify-self:anchor-center;
}

.dock-btn {
  flex: 1; /* semua tombol sama lebar */
  background-color: #6c5ce7; /* ungu muda */
  color: white;
  text-align: center;
  padding: 12px 0;
  text-decoration: none;
  font-weight: 500;
  font-size:12px;
  border-top: 2px solid #4b3ecf;
  transition: background 0.3s ease, transform 0.2s ease;
  font-family: "Open Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 991px) {
  .dock-btn span {
    display:none;
  }
  
  .dock-btn img {
  width: 30px !important;
  height: 30px !important;
  }
}

.dock-btn img {
  width: 20px;
  height: 20px;
}

/* hover */
.dock-btn:hover {
  background-color: #8e77ff;
  transform: translateY(-2px);
}

/* radius */
.dock-btn.first {
  border-top-left-radius: 25px;
}

.dock-btn.middle {
  border-radius: 0;
}

.dock-btn.last {
  border-top-right-radius: 25px;
}

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
    transition: -webkit-filter 1s ease;
}

.carousel-container {
    /* width: 60%; */
    margin: 0 auto;
}
.typed-text-wrapper {
    text-align: center;
    min-height: 50px; /* Adjust height to prevent layout shift */
}
.prefix-text {
    color: #fff;
}
.my-carousel {
    display: none; /* Hide the source text slides */
}

/* Custom blinking cursor style for Typed.js */
.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}