/*Write your custom styles here*/

/*
Available Fonts: Promo Test Normal, Aileron, Quicksilver, DM Sans 9pt, DM Sans, Myriad Pro
Use it by your own risk
You can add more font from the fonts folder, font face are crated on the /fonts/stylesheet.css and you can add new fonts file on the same folder
*/

.search-form {
    position: relative;
    width: 220px;        /* ukuran fix */
    height: 30px;
    margin-bottom: 10px;
}

.search-input {
    width: 100%;
    height: 100%;
    padding: 0 36px 0 12px;
    border-radius: 999px;
}

/* versi mobile */
@media (max-width: 768px) {
    .search-form {
        width: 150px; /* lebih kecil di mobile */
        height: 26px;
    }
    .search-input {
        padding: 0 28px 0 8px; /* sesuaikan padding */
        font-size: 0.875rem; /* optional, lebih kecil */
    }
}

.nav-items .nav-link{
    font-family: 'Aileron';
    font-weight: normal;
}

.nav-link{
    font-family: 'Aileron';
    font-weight: normal;
}

.fot-link{
    font-family: 'Aileron';
    font-weight: normal;
}

.title-link2{
    font-family: 'Aileron';
}

.title-link{
    font-family: 'Quicksilver';
}


.badge {
    min-height: 40px;
    padding: 6px 6px;
    width: 160px; 
    font-size : 24px;
}

.badge h3 {
    padding-left: 30px; /* 👉 geser ke kanan */
}

@media (max-width: 768px) {
    .badge-ltr {
        width: 200px;
        height: 28px;
        padding-left: 28px;
    }

    .badge-ltr h3 {
        font-size: 16px;
    }
}


.badge-ltr {
    min-height: 40px;
    padding: 6px 14px;
    width: 220px;
    justify-content: flex-start;
    
}

@media (max-width: 768px) {
    .badge {
        width: auto;
        max-width: 100%;
        min-height: 20px;
        padding: 4px 22px;
    }

    .badge h3 {
        font-size: 14px;
        transform: translateX(-4px);
    }
}

.badge-ltr h3 {
    white-space: nowrap;
    padding-left: 0;
    transform: translateX(-8px);
    
}

.badge-ltr2 {
    min-height: 40px;
    padding: 6px 8px;
    width: 250px;
    justify-content: flex-start;
    background-repeat: no-repeat;
    
}


.badge-ltr2 h3 {
    white-space: nowrap;
    padding-left: 0;
    transform: translateX(-8px);
    
}



@media (max-width: 768px) {
    .badge-ltr2 {
        width: auto;
        height: 30px;
        padding: 2px 30px;
    }

    .badge-ltr2 h3 {
        font-size: 16px;
    }
}



.featured-products {
    position: relative;

    padding-left: 1.25rem;   /* px-5 */
    padding-right: 1.25rem;
    padding-top: 3.5rem;     /* pt-14 */
    padding-bottom: 4rem;    /* pb-16 */

    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 1rem;     /* rounded-2xl */

    overflow: hidden;
    width: 100%;
}

/* lg breakpoint */
@media (min-width: 1024px) {
    .featured-products {
        padding-top: 5rem; /* lg:pt-20 */
    }
}

.article-news {
    position: relative;

    padding-top: 5rem;   /* pt-20 */
    padding-bottom: 2.5rem; /* pb-10 */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 1rem;     /* rounded-2xl */

    width: 100%;
    overflow: hidden;
}

.product-tag {
    display: inline-flex;
    align-items: center;
    
    padding: 4px 12px;
    border-radius: 9999px; /* pill / rounded penuh */

    background-color: var(--tag-bg);
    color: #fff;
    font-style: bold;

    border: none; /* HAPUS border lama */
}

.content-box {
    background: rgba(255, 255, 255, 0.9); /* putih transparan */
    padding: 24px 28px;
    max-width: 420px;

    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    text-align: center;
    margin-right: 60px;
    backdrop-filter: blur(4px);
}

.featured-products {
    position: relative;
    width: 100%;
    min-height: 260px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.about__section {
    position: relative;

    padding-top: 2.5rem;
    padding-bottom: 2.5rem;

    padding-left: 1rem;
    padding-right: 1rem;

    width: 100%;
    overflow: hidden;
}

/* lg breakpoint (≥1024px) */
@media (min-width: 1024px) {
    .about__section {
        display: flex;
        align-items: center;

        padding-top: 5rem;
        padding-bottom: 5rem;

        padding-left: 6rem;
        padding-right: 0;

        aspect-ratio: 3 / 1;
    }
}

.thumbnail_milestone__swiper .swiper-slide {
    opacity: 0.35;
    transition: all 0.4s ease;
    transform: scale(0.9);
    text-align: center;
}

.milestone__thumbnail--active {
    opacity: 1 !important;
    transform: scale(1);
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.article-badge {
    position: absolute;
    bottom: 0;
    left: 0;

     /* ganti sesuai warna 'blue-mensana' */
    color: #ffffff;

    font-weight: 900; /* font-black */
    font-size: 1.125rem; /* text-lg = 18px default Tailwind */

    padding-top: 0.25rem;    /* py-1 = 4px */
    padding-bottom: 0.25rem; /* py-1 = 4px */
    padding-left: 1.5rem;    /* pl-6 = 24px */
    padding-right: 2rem;     /* pr-8 = 32px */

    border-top-right-radius: 1.5rem; /* rounded-tr-3xl = 24px */
}

/* Default: hidden di mobile, muncul saat hamburger */

/* ShareThis fix icon wrap */
.sharethis-inline-share-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    gap: 4px;
}

.article-content p {
    text-align: justify;
    text-indent: 2rem;
    line-height: 1.75;
    margin-top: 20px;
    margin-bottom: -15px;
}

.article-content p:first-child {
    text-indent: 0;
}

.article-content p:last-child {
    margin-bottom: 0;
}

.article-content h1,
.article-content h2,
.article-content h4,
.article-content h5,
.article-content h6{
    text-align: center;
}

.article-content h3{
    text-align: left;
    font-size: 16px;
}