:root {
      --swadharma-orange: #f05a28;
      --swadharma-teal: #0f5f58;
      --glass: rgba(255,255,255,0.6);
      --accent1: #095D79; /* biru tua */
      --accent2: #06D6B3; /* hijau toska */
      --swadharma-gradient: linear-gradient(135deg, #f05a28,rgb(65, 238, 224));
      --metaverse-gradient:linear-gradient(135deg,rgb(0, 10, 20),rgb(9, 93, 121),rgb(247, 0, 0));
      --growing-gradient2:linear-gradient(30deg,rgb(9, 93, 121),rgb(6, 214, 179),rgb(9, 93, 121));
      --growing-gradient:linear-gradient(65deg,rgb(9, 93, 121),rgb(255, 255, 255),rgb(255, 127, 80));
      --growing-gradientnew:linear-gradient(5deg,rgb(9, 93, 121),rgb(9, 93, 121),rgb(6, 214, 179));
      --growingbg: linear-gradient(90deg,var(--accent1),var(--accent2));
      --bg-color: #0b0c10;
            --primary-color: rgb(9, 93, 121);
            --secondary-color: rgb(255, 255, 255);
            --accent-color: rgb(255, 127, 80);
            --text-color: #f0f0f0;
            --particle-color: rgba(255, 255, 255, 0.8);
            --particle-line-color: rgba(255, 255, 255, 0.6);
            --large-text-color: rgba(255, 255, 255, 0.6);
            --background-light: #f8f9fa; /* Abu-abu muda */
    --card-background: #ffffff; /* Putih */
    --card-background2: linear-gradient(180deg,#f6f9fb 0%, #eef7f6 100%);
    --hover-link-color: #0056b3; /* Biru tua */
    
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      overflow-x: hidden;
    }
.pagebg {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f7ff 40%, #f8f9ff 100%);
  position: relative;
  overflow: hidden;
}

/* Tambahan efek pola lingkaran */
.pagebg::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at center, rgba(13,110,253,0.12), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.pagebg::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center, rgba(111,66,193,0.12), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.section-heading{
    color: var(--swadharma-teal);
    font-weight: bold;
    font-size: 2rem;
    position: relative;
    padding-bottom: 15px;
  }

  /* Garis dekoratif di bawah judul */
  .section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
  }
    .btn-orange {
      background-color: var(--swadharma-orange);
      color: white;
      transition: all 0.3s ease;
      transform: translateY(0);
    }

    .btn-orange:hover {
      background-color: #d64d1f;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(240, 90, 40, 0.3);
    }

    .bg-teal {
      background-color: var(--swadharma-teal);
    }

    .text-teal {
      color: var(--swadharma-teal);
    }

    .text-orange {
      color: var(--swadharma-orange);
    }

    /* --- Hero Section & Gradien --- */
        #heroSection {
            position: relative;
            width: 100%;
            height: 90vh;
            /*background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));*/
            background: var(--growing-gradient2);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-size: 300% 400%;
            animation: gradientAnimation 18s ease infinite;
        }


        /* --- Canvas Partikel --- */
        #particleCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* --- Konten & Logo --- */
        .hero-content {
            position: relative;
            z-index: 2;
            /*padding: 0.5rem;*/
            padding-top: 100px;
            animation: fadeInLift 2s ease-out;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .logo-container {
            margin-bottom: 2rem;
            padding: 1rem;
            width: 100%;
            max-width: 400px;
        }

        .company-logo {
            /* Logo 3x lebih besar dari 240px */
            width: 720px;
            height: auto;
            display: block;
            margin: 0 auto;
            max-width: 80%; /* Agar tidak terlalu besar di layar kecil */
        }

        /* --- Animasi Teks Utama --- */
        
        
        /* Media query untuk membuat teks responsif */
        @media (max-width: 768px) {
            .hero-content p {
                font-size: 2rem;
            }
        }
        @media (max-width: 480px) {
            .hero-content p {
                font-size: 1rem;
            }
        }
        @media (max-width: 412px) {
            .hero-content p {
                font-size: 0.75rem;
            }
        }
        .hero-content p span {
            opacity: 0;
            transform: scale(0.9);
            display: inline-block;
            margin-right: 15px;
        }

        .hero-content p span.fade-in {
            animation: wordFadeIn 1s ease-in-out forwards;
        }

        .hero-content p span.fade-out {
            animation: wordFadeOut 0.7s ease-in-out forwards;
        }

        /* --- Animasi Kata yang Membesar --- */
        .growing-animation, .together-animation, .through-animation, .innovation-animation {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 12rem;
            color: var(--large-text-color);
            opacity: 0;
            pointer-events: none;
            transform: translate(-50%, -50%);
            white-space: nowrap; /* Mencegah kata pindah baris */
        }
        
        /* Media query untuk responsivitas */
        @media (max-width: 1200px) {
             .growing-animation, .together-animation, .through-animation, .innovation-animation {
                font-size: 8rem;
            }
        }
        
        @media (max-width: 768px) {
            .growing-animation, .together-animation, .through-animation, .innovation-animation {
                font-size: 4rem;
            }
        }

    /* end herosection8/

    /* Products Section with geometric background */
    .products-section {
      /*background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);*/
      /*background-image: url("../images/bg2.png");*/
      background-image: url("../images/bg6.png");
       background-repeat: no-repeat;
       background-size: cover;
    }

    .products-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        polygon(74% 44%, 100% 61%, 97% 26%, 85% 0%, 80% 2%, 72% 32%, 60% 62%, 52% 68%, 47% 58%, 45% 34%, 27% 76%, 0% 64%, 17% 100%, 27% 76%, 76% 97%, 74% 44%);
      background-size: 200px 200px;
      opacity: 0.03;
      animation: moveBackground 20s linear infinite;
    }
 .card {
      /*backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.2);*/
      background: rgba(255, 255, 255, 0.10)!important;
            /*background: rgba(0, 0, 255, 0.5);*/
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2)!imp;
      transition: all 0.3s ease;
      
    }

    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .card-icon {
      font-size: 2.5rem;
      color: var(--swadharma-orange);
      transition: transform 0.3s ease;
    }

    .card:hover .card-icon {
      transform: scale(1.1) rotate(5deg);
    }

    /* News Section with wave background */
    .news-section {
      background-image: url("../images/righttopcorner.png"),linear-gradient(15deg,rgb(255, 255, 255),rgb(255, 255, 255),rgb(6, 214, 179));
      background-repeat: no-repeat, no-repeat;
  background-position: top right, center;
  background-size: 40%, cover;/*
      background-repeat: repeat-x; 
      background-size: cover;
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      position: relative;
      /*height: 100vh;
      min-height: 500px;*/
    }
.carousel-item {
  transition: opacity 1.5s ease-in-out; /* ubah 1.5s sesuai kebutuhan */
}
    .news-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

    }


    /* Location Section with modern overlay */
    .location-section {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      position: relative;
    }

    .location-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(45deg, transparent 30%, rgba(240, 90, 40, 0.03) 40%, transparent 50%),
        linear-gradient(-45deg, transparent 30%, rgba(15, 95, 88, 0.03) 40%, transparent 50%);
      background-size: 100px 100px;
    }

    .ratio iframe {
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    /* Social Media Section */
    .social-section {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      position: relative;
    }

    .social-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(240, 90, 40, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(15, 95, 88, 0.1) 0%, transparent 20%);
    }

    .social-section a {
      transition: all 0.3s ease;
      display: inline-block;
    }

    .social-section a:hover {
      transform: translateY(-5px) scale(1.2);
      color: var(--swadharma-orange) !important;
    }
  .socialicon {
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .socialicon:hover {
    transform: scale(1.8);
    color: #ffc107; /* Optional: highlight color on hover */
  }
    /* CTA Section with animated gradient */
    .cta-section {
      background: #fff;
      position: relative;
      overflow: hidden;
    }

    .cta-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: 
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: rotate 6s linear infinite;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .cta-section .container {
      position: relative;
      z-index: 1;
    }

    /* Footer with modern design */
    .footer {
      background: var(--growing-gradientnew);
      /*background-image: linear-gradient( 111.1deg,  rgba(69,150,164,1) 2.5%, rgba(17,20,34,1) 100.3% );
      background-color: #06d6b3;*/
      position: relative;
      color: dimgrey;
    }

    .footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /*background-image: 
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%);
      background-size: 30px 30px;
      background-position: 0 0, 0 15px;*/
    }

   
    /* Responsive adjustments */
    @media (max-width: 768px) {
      .products-section::before,
      .news-section::before,
      .location-section::before,
      .social-section::before {
        opacity: 0.5;
      }
    }
    
  /*product overlay*/
  .product-column {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  .product-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 222, 238, 0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    text-align: center;
    padding: 1rem;
  }

  .product-column:hover .product-overlay {
    opacity: 1;
    transform: translateY(0); /* Fade in from bottom */
  }
  .product-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .product-description {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .product-button {
    background-color: #ffffff;
    color: #000;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
  }

  .product-button:hover {
    background-color: #000;
    color: #fff;
  }
  .triangle {
      position: absolute;
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 25px solid #e74c3c;
      opacity: 0;
      animation: muncul 9s ease-out infinite;
    }
#beritaCarousel .carousel-control-prev-icon,
  #beritaCarousel .carousel-control-next-icon {
    filter: none;               /* hilangkan filter bootstrap (invert) */
    background-color: #f00; /* warna background icon */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
  }

  #beritaCarousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  }

  #beritaCarousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708-.708L9.293 7 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  }
.carousel-control-prev,
.carousel-control-next {
  position: absolute; /* Ensure absolute positioning */
  bottom: auto; /* Position at the bottom of the carousel container */
  top: 120px; /* Override default top positioning */
  /* Adjust left/right as needed for horizontal placement */
}
/*
  .afiliasi {
    background-image: url("../images/leftbottomcorner.png"),url("../images/righttopcorner.png");
      background-repeat: no-repeat, no-repeat;
  background-position: bottom left, top right;
  background-size: 50%, 50%;
  }
*/
  

  .list-container {
    background-color: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* Bayangan lebih halus */
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transisi untuk efek hover */
  }

  /* Efek hover untuk list-container */
  .list-container:hover {
    transform: translateY(-10px); /* Naik sedikit saat di-hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .list-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .list-container ul li {
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
  }

  .list-container ul li:last-child {
    border-bottom: none;
  }

.list-container ul li a {
    color: var(--swadharma-teal);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    /* Tambahan kode untuk nowrap */
    display: inline-block; /* Penting untuk nowrap pada link */
    white-space: nowrap; /* Mencegah teks terpotong */
    overflow: hidden; /* Menyembunyikan teks yang melampaui batas */
    text-overflow: ellipsis; /* Menampilkan elipsis (...) jika teks terlalu panjang */
    max-width: 100%; /* Batasi lebar agar tidak melebar keluar dari kolom */
  }
  .list-container ul li a:hover {
    color: var(--primary-color);
  }
  .btn-link {
      background: #40E0D0; /* turquoise */
      color: white;
      padding: 10px 24px; /* lebih kecil */
      font-size: 12px; /* diperkecil */
      border: none;
      border-radius: 25px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: all 0.4s ease;

      position: relative;
      overflow: hidden;
      width: auto;
    }

    .btn-link::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.3);
      transition: all 0.5s ease;
    }

    .btn-link:hover::before {
      left: 100%;
    }

    .btn-link:hover {
      background: #30c9ba;
      /*box-shadow: 0 6px 14px rgba(64, 224, 208, 0.6);*/
      /*transform: translateY(-3px);*/
      color: navy;
      font-weight: bold;
    }
    /*product*/
    .product-card {
            border: none;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 24px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }
        .product-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-bottom: 1px solid #e9ecef;
        }
        .product-card .card-body {
            padding: 1.5rem;
        }
        .product-card .card-title {
            font-weight: 600;
            color: #343a40;
            font-size: 1rem;
        }
        .product-card .card-text {
            font-weight: 700;
            color: #28a745;
            font-size: 1.1rem;
        }
        .search-form {
            max-width: 600px;
            margin: 0 auto;
        }
        .input-group .form-control,
        .input-group .btn {
            border-radius: 50rem !important;
        }
/*atas mystyle-->bawah ksstyle*/

  .navbar {
  transform: translateY(-100%);
  opacity: 0;
  animation: slideDown 0.8s ease-out forwards;
}

@keyframes slideDown {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes pulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    /* === Panah semua slider === */
.custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 0, 0, 0.5);
  border: none;
  color: #fff;
  font-size: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  opacity: 1; /* sembunyi default */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s, background 0.3s;
}

.custom-arrow:hover {
  background: rgba(0,0,0,0.8);
}

/* tampilkan panah saat hover slider */
.slick-slider:hover .custom-arrow {
  opacity: 1;
}

/* Posisi panah */
.slick-prev { left: -50px; }
.slick-next { right: -50px; }

/* Hilangkan panah default bawaan slick */
.slick-prev:before,
.slick-next:before {
  content: '' !important;
}
.promo-slider .custom-arrow {
  background: rgba(56, 56, 56, 0.5) !important;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-slider .slick-prev { left: 15px !important; }
.promo-slider .slick-next { right: 15px !important; }

/* Default (desktop) */
.product-slider,
.news-slider {
  overflow: visible; /* biar arrow tidak kepotong */
}

.product-slider .slick-prev,
.news-slider .slick-prev {
  left: -45px;
}

.product-slider .slick-next,
.news-slider .slick-next {
  right: -45px;
}
.news-slider .custom-arrow {
  background: rgba(145, 146, 145, 0.5) !important;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-slider .custom-arrow {
  background: rgba(145, 146, 145, 0.5) !important;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Compact */
@media (max-width: 768px) {
  .custom-arrow {
    width: 32px;   /* lebih kecil */
    height: 32px;
    font-size: 16px;
  }

  .product-slider .slick-prev,
  .news-slider .slick-prev {
    left: 5px; /* rapat ke dalam */
  }

  .product-slider .slick-next,
  .news-slider .slick-next {
    right: 5px;
  }
}



/* Saat discroll → ganti background + shadow 
.navbar.scrolled {
  background: linear-gradient(
    270deg,
    rgb(9, 93, 121),
    rgb(9, 93, 121),
    rgb(6, 214, 179)
  ) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.5s ease-in-out;
}*/

  .fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
  #btnScrollTop {
    position: fixed;
    bottom: 20px;   /* Jarak dari bawah */
    right: 20px;    /* Jarak dari kanan */
    z-index: 1000;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    border: none;
    outline: none;
    padding: 16px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background 0.3s ease;
    animation: floatUpDown 2s infinite ease-in-out;
  }

  #btnScrollTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  #btnScrollTop:hover {
    background: linear-gradient(135deg, #007bff, #00c6ff);
    transform: scale(1.15);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.5);
  }

  #btnScrollTop svg {
    display: block;
  }

  /* Animasi melayang naik turun */
  @keyframes floatUpDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
  }

  /*anyma*/
  /* Animasi fade + slide + zoom */
@keyframes fadeZoomUp {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeZoomDown {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Base class: cukup tambahin ini */
.anyma-entry {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: fadeZoomUp 0.9s ease-out forwards;
}

/* Variasi: muncul dari atas */
.anyma-entry-down {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  animation: fadeZoomDown 0.9s ease-out forwards;
}

/* Utility untuk delay (stagger effect) */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1s; }

/* Section lebih ringkas */
.memjudulpage {
  padding: 0.6rem 0;
}

/* Liquid glass style */
.judul-wrapper {
  background: rgba(255, 255, 255, 0.15); /* efek kaca */
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-radius: 20px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out;
}

/* Glass shine animasi */
.judul-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 80%
  );
  transform: rotate(25deg);
  animation: shine 6s infinite linear;
}

/* Ikon bulat semi transparan */
.judul-icon {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 8px;
  font-size: 28px;
  color: #0a84ff; /* warna khas iOS biru */
  flex-shrink: 0;
}

/* Text styling */
.judul-text h2 {
  font-weight: 600;
  font-size: 1.3rem;
  color: #1c1c1e;
  margin: 0;
}

.judul-text .subtitle {
  margin: 0;
  font-size: 0.8rem;
  color: #666;
}

/* Animasi */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}
/*.member-wrapper{
  background-color: #e7e7e7ff;
  border-radius: 6cap 6cap 0px 0px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f7ff 40%, #f8f9ff 100%);
  margin-top: 20px;
  min-height:500px;
}*/
.member-wrapper {
  background: linear-gradient(
    135deg,
    #06D6B3   0%,
    #e8f7ff 40%,
    #f8f9ff 100%
  );

  border-radius: 100px 20px 0 0;
  margin-top: 20px;

  min-height: calc(90vh - 20px);
}
@media print {

  .no-print {
    display: none !important;
  }
}
.kopswa-button{
  background: linear-gradient(135deg, #00c6a7, #1e90ff);
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 12px;
  width: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.kopswa-button:hover {
  background: linear-gradient(135deg, #00b49f, #1976d2);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.ksbutton-warning {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 26px;
    border: 1.5px solid rgba(232,160,32,0.55);
    border-radius: 40px;
    color: #f5c960; font-size: 13px; font-weight: 600;
    letter-spacing: .8px; text-transform: uppercase;
    text-decoration: none;
    background: rgba(232,160,32,0.06);
    transition: background .25s, color .25s, transform .2s;
  }
  .ksbutton-warning:hover {
    background: #e8a020; color: #0d0d1a;
    transform: translateY(-2px);
  }
  .ksbutton-warning svg { transition: transform .2s; }
  .ksbutton-warning:hover svg { transform: translateX(3px); }