/* ==========================================================
   TUK PAGE
   LSP KOMUNIKASI MEDIA
========================================================== */

:root{

    --tuk-radius:22px;
    --tuk-shadow:0 15px 45px rgba(0,0,0,.08);
    --tuk-shadow-hover:0 25px 60px rgba(0,0,0,.14);
}

/* ==========================================================
   HERO
========================================================== */

.tuk-hero{
    position:relative;
    padding:110px 0 90px;
    overflow:hidden;
    background:
    linear-gradient(135deg,#9b111e 0%,#d62839 100%);
    color:#fff;
}

.tuk-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,.12),
    transparent 45%);
}

.tuk-hero .container{
    position:relative;
    z-index:2;
}

.tuk-hero h1{
    font-size:52px;
    font-weight:800;
    margin:18px 0;
    color:#fff;
}

.tuk-hero p{
    max-width:760px;
    margin:auto;
    color:rgba(255,255,255,.92);
    line-height:1.9;
    font-size:18px;
}

.tuk-hero .section-badge{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
}

/* ==========================================================
   SEARCH
========================================================== */

.tuk-search-section{
    margin-top:-45px;
    position:relative;
    z-index:20;
}

.tuk-search-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:var(--tuk-shadow);
}

.search-input{
    position:relative;
}

.search-input i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#999;
}

.search-input input{
    padding-left:48px;
    height:54px;
    border-radius:14px;
}

.tuk-search-card select{
    height:54px;
    border-radius:14px;
}

.tuk-search-card .btn{
    height:54px;
    border-radius:14px;
    font-weight:600;
}

.search-result{
    margin-top:18px;
    text-align:center;
    color:#666;
}

.search-result strong{
    color:#b5121b;
}

/* ==========================================================
   FEATURED TUK
========================================================== */

.featured-section{

    padding:70px 0 50px;

}

.featured-wrapper{
    display:grid;
    grid-template-columns:55% 45%;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--tuk-shadow);
    transition:.35s;
}

.featured-wrapper:hover{
    transform:translateY(-6px);
    box-shadow:var(--tuk-shadow-hover);
}

/* ==========================================================
   COVER
========================================================== */

.featured-cover{
    position:relative;
    overflow:hidden;
    height:100%;
    min-height:200px;

}

.featured-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.featured-wrapper:hover .featured-cover img{
    transform:scale(1.05);
}

.featured-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,.05)
    );
}

.featured-type{
    position:absolute;
    top:20px;
    right:20px;
    z-index:5;
    background:#b5121b;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
}

/* ==========================================================
   CONTENT
========================================================== */

.featured-content{
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:30px;
    background:#fff2f2;
    color:#b5121b;
    font-weight:600;
    margin-bottom:18px;
}

.featured-content h2{
    font-size:36px;
    font-weight:700;
    margin-bottom:12px;
    color:#222;
}

.featured-location{
    color:#777;
    margin-bottom:20px;
    font-size:15px;

}

.featured-location i{
    color:#b5121b;
    margin-right:6px;

}

.featured-description{
    color:#666;
    line-height:1.6;
    margin-bottom:20px;
}

/* ==========================================================
   INFO BOX
========================================================== */

.featured-info{
    display:grid;
    grid-template-columns:repeat(2,180px);
    gap:18px;
    margin:28px 0;
}

.info-box{
    background:#fafafa;
    border-radius:16px;
    text-align:center;
    padding:22px;
    transition:.3s;
}

.info-box:hover{
    background:#fff2f2;
}

.info-box strong{
    display:block;
    font-size:32px;
    color:#b5121b;
    margin-bottom:6px;
}

.info-box span{
    color:#666;
    font-size:14px;
}

/* ==========================================================
   BUTTON
========================================================== */

.featured-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.featured-buttons .btn{
    border-radius:50px;
    padding:12px 24px;
    font-weight:600;
}

/* ==========================================================
   DAFTAR TUK
========================================================== */

.tuk-list-section{
    padding:40px 0 80px;
    background:#fafafa;
}

.tuk-list-section .section-header{
    margin-bottom:50px;

}

.tuk-list-section h2{
    font-size:36px;
    font-weight:700;
    color:#222;
    margin-top:10px;

}

.tuk-list-section p{
    max-width:700px;
    margin:15px auto 0;
    font-size:18px;
    color:#666;
}

/* ==========================================================
   CARD
========================================================== */

.tuk-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    transition:.35s;
    box-shadow:var(--tuk-shadow);
    height:100%;
    display:flex;
    flex-direction:column;
}

.tuk-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--tuk-shadow-hover);
}

/* ==========================================================
   IMAGE
========================================================== */

.tuk-image{
    position:relative;
    overflow:hidden;
}

.tuk-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:.6s;
}

.tuk-card:hover .tuk-image img{
    transform:scale(1.08);
}

.tuk-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.40),
        rgba(0,0,0,0)
    );
}

/* ==========================================================
   BADGE
========================================================== */

.tuk-badge{
    position:absolute;
    top:18px;
    right:18px;
    z-index:3;
    background:#b5121b;
    color:#fff;
    border-radius:30px;
    padding:8px 16px;
    font-size:13px;
    font-weight:600;
}

/* ==========================================================
   BODY
========================================================== */

.tuk-body{
    padding:25px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.tuk-body h4{
    font-size:22px;
    font-weight:700;
    color:#222;
    margin-bottom:10px;
    line-height:1.5;
    min-height:30px;
}

/* ==========================================================
   LOKASI
========================================================== */

.tuk-location,
.tuk-phone{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#666;
    margin-bottom:10px;
    font-size:14px;
}

.tuk-location i,
.tuk-phone i{
    color:#b5121b;
    margin-top:3px;
}

/* ==========================================================
   ICON FASILITAS
========================================================== */

.facility-icons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:13px 0;
}

.facility-icons span{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff3f3;
    transition:.3s;
}

.facility-icons span:hover{
    background:#b5121b;
}

.facility-icons span:hover i{
    color:#fff;
}

.facility-icons i{
    color:#b5121b;
    font-size:18px;
}

.more-icon{
    font-size:13px;
    font-weight:600;
    color:#666;
}

/* ==========================================================
   META
========================================================== */

.tuk-meta{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:auto;
    margin-bottom:20px;
}

.tuk-meta div{
    background:#fafafa;
    border-radius:14px;
    text-align:center;
    padding:10px 10px;
}

.tuk-meta strong{
    display:block;
    font-size:28px;
    color:#b5121b;
}

.tuk-meta small{
    color:#777;
}



/* ==========================================================
   BUTTON
========================================================== */

.tuk-card .btn{
    border-radius:50px;
    font-weight:600;
    padding:12px;
    transition:.3s;
}

.tuk-card .btn i{
    transition:.3s;

}

.tuk-card .btn:hover i{
    transform:translateX(5px);
}

/* ==========================================================
   PAGINATION
========================================================== */

.pagination-section{
    padding:20px 0 70px;
}

.pagination{
    gap:8px;
}

.pagination .page-link{
    width:46px;
    height:46px;
    border-radius:50% !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    color:#555;
    font-weight:600;
    background:#fff;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
    transition:.3s;
}

.pagination .page-link:hover{
    background:#b5121b;
    color:#fff;
}

.pagination .active .page-link{
    background:#b5121b;
    color:#fff;
}

/* ==========================================================
   CTA
========================================================== */

.tuk-cta{

    padding:30px 0 90px;

}

.cta-wrapper{
    background:linear-gradient(135deg,#9b111e,#d62839);
    border-radius:26px;
    padding:55px;
    color:#fff;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 60px rgba(181,18,27,.25);
}

.cta-wrapper::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    top:-120px;
    right:-120px;

}

.cta-wrapper>*{
    position:relative;
    z-index:2;
}

.cta-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(255,255,255,.18);
    margin-bottom:18px;
    font-weight:600;
}

.cta-wrapper h2{
    color:#fff;
    font-size:38px;
    font-weight:700;
    margin-bottom:16px;
}

.cta-wrapper p{
    color:rgba(255,255,255,.92);
    max-width:650px;
    line-height:1.9;
}

.cta-buttons{
    display:flex;
    gap:15px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.cta-buttons .btn{
    min-width:180px;
    border-radius:50px;
    padding:14px 28px;
    font-weight:600;
}

/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state{
    background:#fff;
    border-radius:22px;
    padding:80px 40px;
    text-align:center;
    box-shadow:var(--tuk-shadow);
}

.empty-state i{
    font-size:70px;
    color:#b5121b;
    margin-bottom:25px;
}

.empty-state h3{
    font-size:30px;
    margin-bottom:16px;
    color:#222;
}

.empty-state p{
    color:#666;
    max-width:600px;
    margin:auto;
    line-height:1.9;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:991px){

    .featured-wrapper{
    grid-template-columns:1fr;

    }

    .featured-cover{
        min-height:300px;

    }

    .tuk-hero{

        padding:90px 0 70px;

    }

    .tuk-hero h1{

        font-size:40px;

    }

    .featured-content{

        padding:30px;

    }

    .featured-content h2{

        font-size:28px;

    }

    .cta-wrapper{

        padding:40px;

        text-align:center;

    }

    .cta-buttons{

        justify-content:center;

        margin-top:30px;

    }

}


@media (max-width:768px){

    .tuk-search-card{

        padding:24px;

    }

    .featured-info{

        grid-template-columns:1fr;

    }

    .tuk-meta{

        grid-template-columns:1fr 1fr;

    }

    .cta-wrapper h2{

        font-size:30px;

    }
}


@media (max-width:576px){

    .tuk-hero{

        padding:80px 0 60px;

    }

    .tuk-hero h1{

        font-size:32px;

    }

    .featured-content{

        padding:24px;

    }

    .featured-buttons{

        flex-direction:column;

    }

    .featured-buttons .btn{

        width:100%;

    }

    .cta-wrapper{

        padding:28px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;
    }
}


/* ==========================================================
   DETAIL TUK
========================================================== */


/* ==========================================================
   HERO DETAIL
========================================================== */

.detail-tuk-hero{
    position:relative;
    min-height:560px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    color:#fff;
    background:#111;
}

.hero-cover{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s;
}

.detail-tuk-hero:hover .hero-cover{
    transform:scale(1.04);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.40),
        rgba(0,0,0,.15)
    );
    z-index:1;
}

.detail-tuk-hero .container{
    position:relative;
    z-index:5;
}


/* ==========================================================
   ABOUT SECTION
========================================================== */

.detail-about-section{
    padding:70px 0 40px;
    background:#fafafa;
}

.card-premium{
    background:#fff;
    border-radius:24px;
    padding:45px;
    box-shadow:var(--tuk-shadow);
    transition:.35s;
}

.card-premium:hover{
    transform:translateY(-5px);
    box-shadow:var(--tuk-shadow-hover);
}

.section-heading{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:35px;
}

.heading-icon{
    width:70px;
    height:70px;
    border-radius:22px;
    background:#fff2f2;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b5121b;
    font-size:30px;
    flex-shrink:0;
}

.section-label{
    display:block;
    color:#b5121b;
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.section-heading h2{
    margin:0;
    font-size:34px;
    font-weight:700;
    color:#222;
}

.about-content{
    font-size:17px;
    color:#555;
    line-height:1.7;
    text-align:justify;
}

/* ==========================================================
   INFO SECTION
========================================================== */

.detail-info-section{
    padding:0 0 50px;
    background:#fafafa;
}

.info-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:30px;
}

.info-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding-bottom:14px;
    border-bottom:1px solid #efefef;
}

.info-item:last-child{
    border-bottom:none;
}

.info-item span{
    color:#777;
    font-size:15px;
}

.info-item strong{
    text-align:right;
    color:#222;
    font-weight:600;
}

.info-item a{
    color:var(--primary-color);
    text-decoration:none;
}

.address-box{
    margin-top:35px;
    padding:24px;
    background:#fafafa;
    border-radius:18px;
}

.address-box h5{
    font-size:18px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:10px;
}

.address-box p{
    color:#666;
    line-height:1.8;
    margin-bottom:20px;
}


/* ==========================================================
   FACILITY SECTION
========================================================== */

.detail-facility-section{
    padding:0 0 70px;
    background:#fafafa;
}

.facility-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.facility-box{
    background:#fafafa;
    border-radius:20px;
    padding:28px 20px;
    text-align:center;
    transition:.35s;
    border:1px solid #eee;
}

.facility-box:hover{
    transform:translateY(-8px);
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.facility-box .facility-icon{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#c61f2d,#9d1520);
    color:#fff;
    font-size:28px;
}

.facility-box h5{
    margin:0;
    font-size:16px;
    font-weight:600;
    color:#333;
    line-height:1.5;
}

/* ==========================================================
   HERO BADGE
========================================================== */

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);
    padding:10px 18px;
    border-radius:40px;
    margin-bottom:20px;
    font-weight:600;
}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero-content-detail{
    max-width:760px;
    padding:120px 0 70px;
}

.hero-content{
    padding:0 0 50px;
}

.hero-content h1{
    font-size:56px;
    font-weight:800;
    margin-bottom:18px;
    color:#fff;
    line-height:1.2;
}

.hero-location{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:30px;   
    font-size:18px;
    color:rgba(255,255,255,.94);
}

.hero-location div{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.10);
    padding:10px 18px;
    border-radius:30px;
    backdrop-filter:blur(8px);
}

.hero-location i{
    color:#ffd54f;
}

/* ==========================================================
   HERO STATS
========================================================== */

.hero-stats{
    display:flex;
    gap:18px;
    margin-bottom:35px;
}

.hero-stats div{
    min-width:150px;
    padding:20px;
    border-radius:18px;
    backdrop-filter:blur(12px);
    background:rgba(255,255,255,.12);
}

.hero-stats strong{
    display:block;
    font-size:34px;
    color:#fff;
}

.hero-stats span{
    color:rgba(255,255,255,.88);
}

/* ==========================================================
   HERO BUTTON
========================================================== */

.hero-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.hero-buttons .btn{
    border-radius:50px;
    padding:14px 30px;
    font-weight:600;
}


/* ==========================================================
   QUICK INFO
========================================================== */

.quick-info{
    margin-top:-55px;
    position:relative;
    z-index:30;
}

.quick-card{
    background:#fff;
    border-radius:22px;
    padding:28px;
    text-align:center;
    box-shadow:var(--tuk-shadow);
    transition:.35s;
    height:100%;
}

.quick-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--tuk-shadow-hover);
}

.quick-card i{
    font-size:34px;
    color:#b5121b;
    margin-bottom:18px;
}

.quick-card span{
    display:block;
    color:#888;
    margin-bottom:8px;
}

.quick-card strong{
    font-size:24px;
    color:#222;
}

/* ==========================================================
   CONTENT SECTION
========================================================== */

.detail-content-section{
    padding:80px 0 40px;
    background:#fafafa;
}

/* ==========================================================
   CARD
========================================================== */

.content-card,
.info-card{
    background:#fff;
    border-radius:22px;
    padding:35px;
    box-shadow:var(--tuk-shadow);
    transition:.35s;
    height:100%;
}

.content-card:hover,
.info-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--tuk-shadow-hover);
}

/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px;
}

.section-title i{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:#fff2f2;
    color:#b5121b;
    font-size:22px;
}

.section-title h2,
.section-title h3{
    margin:0;
    color:#222;
    font-weight:700;
}

.section-title h2{
    font-size:30px;
}

.section-title h3{
    font-size:24px;
}


/* ==========================================================
   CONTENT TEXT
========================================================== */

.content-text{
    color:#666;
    font-size:16px;
    line-height:2;
    text-align:justify;
}


/* ==========================================================
   INFO LIST
========================================================== */

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

.info-list li{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:15px 0;
    border-bottom:1px solid #f2f2f2;
}

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

.info-list span{
    color:#888;
    font-size:14px;
}

.info-list strong{
    color:#222;
    text-align:right;
    font-weight:600;
}

.info-list a{
    color:#b5121b;
    text-decoration:none;
}

.info-list a:hover{
    text-decoration:underline;
}


/* ==========================================================
   ADDRESS
========================================================== */

.alamat{
    margin:0;
    color:#666;
    line-height:1.9;
}

/* ==========================================================
   DETAIL FEATURE SECTION
========================================================== */

.detail-feature-section{
    padding:20px 0 80px;
    background:#fafafa;
}


/* ==========================================================
   FACILITY LIST
========================================================== */

.facility-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.facility-item{
    display:flex;
    align-items:center;
    gap:18px;
    padding:16px 18px;
    border-radius:18px;
    background:#fafafa;
    transition:.3s;
}

.facility-item:hover{
    background:#fff2f2;
    transform:translateX(6px);
}

.facility-icon{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:#b5121b;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.facility-name{
    font-size:16px;
    font-weight:600;
    color:#333;
}

/* ==========================================================
   SCHEME CARD
========================================================== */

.scheme-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px;
    border-radius:18px;
    background:#fafafa;
    text-decoration:none;
    transition:.35s;
    height:100%;
}

.scheme-card:hover{
    background:#fff2f2;
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.scheme-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#b5121b;
    color:#fff;
    font-size:24px;
    flex-shrink:0;
}

.scheme-content{
    flex:1;
}

.scheme-content h4{
    margin:0 0 6px;
    color:#222;
    font-size:18px;
    font-weight:700;
    line-height:1.4;
}

.scheme-content span{
    color:#888;
    font-size:14px;
}

.scheme-arrow{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#b5121b;
    transition:.3s;
    flex-shrink:0;
}

.scheme-card:hover .scheme-arrow{
    background:#b5121b;
    color:#fff;
    transform:translateX(4px);
}

/* ==========================================================
   EMPTY BOX
========================================================== */

.empty-box{
    text-align:center;
    padding:50px 30px;
    border-radius:20px;
    background:#fafafa;
}

.empty-box i{
    font-size:56px;
    color:#b5121b;
    margin-bottom:18px;
}

.empty-box p{
    margin:0;
    color:#666;
}

/* ==========================================================
   DETAIL MAP
========================================================== */

.detail-map-section{
    padding:20px 0 80px;
    background:#fafafa;
}

.map-wrapper{
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    margin-top:20px;
}

.map-wrapper iframe{
    width:100%;
    height:450px;
    border:0;
    display:block;
}

.map-action{
    margin-top:24px;
    text-align:center;
}

.map-action .btn{
    border-radius:50px;
    padding:14px 30px;
    font-weight:600;
}

/* ==========================================================
   DETAIL CTA
========================================================== */

.detail-tuk-cta{
    padding:20px 0 90px;
}

/* Menggunakan style CTA yang sudah ada */

.detail-tuk-cta .cta-wrapper{
    margin:0;
}



/*==========================================================
  DETAIL TUK DESIGN SYSTEM
==========================================================*/

/* ===========================
   CARD SECTION
=========================== */

.card-section{  
    background:#ffffff;
    border:1px solid #ececec;
    border-radius:20px;
    padding:27px;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
    transition:.30s;
}

.card-section:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

/* ===========================
   SECTION HEADER
=========================== */

.section-header-detail-tuk{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:26px;
}

.section-icon{
    width:63px;
    height:63px;
    border-radius:12px;
    background:#fff3f3;
    color:indianred;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    flex-shrink:0;
}

.section-text small{
    display:block;
    color:var(--primary-color);
    text-transform:uppercase;
    letter-spacing:.8px;
    font-size:12px;
    font-weight:700;
    margin-bottom:3px;
}

.section-text h2{
    margin:0;
    font-size:30px;
    font-weight:700;
    color:indianred;
}

/* ===========================
   ITEM CARD
=========================== */

.card-item{
    background:#fff;
    border:1px solid #ededed;
    border-radius:14px;
    padding:16px;
    transition:.3s;
}

.card-item:hover{
    border-color:var(--primary-color);
    transform:translateY(-3px);
}

/* ===========================
   SECTION SPACING
=========================== */

.detail-section{
    padding:35px 0px 35px;
}


/*==========================================================
INFO MODERN
==========================================================*/

.info-list-modern{
    display:flex;
    flex-direction:column;
}

.info-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0px 10px;
    border-bottom:1px solid #efefef;
    line-height: 12px;
}

.info-row:last-child{
    border:none;
}

.info-row span{
    color:#888;
    font-size:14px;
}

.info-row strong{
    font-weight:600;
    color:#222;
    text-align:right;
}

.scheme-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.scheme-item{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:20px 14px;
    text-align:center;
    text-decoration:none;
    transition:.30s;
}

.scheme-item:hover{
    border-color:indianred;
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.scheme-item-icon{
    width:52px;
    height:52px;
    margin:0 auto 14px;
    border-radius:14px;
    background:#fff3f3;
    color:indianred;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
}

.scheme-item-title{
    font-size:14px;
    font-weight:600;
    color:#333;
    line-height:1.45;
}

/*==========================================================
SECTION DESCRIPTION
==========================================================*/

.section-desc{
    margin-top:6px;
    margin-bottom:0;
    color:#777;
    font-size:16px;
    line-height:1.7;
}

/*==========================================================
FACILITY GRID
==========================================================*/

.facility-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:18px;
}

.facility-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12px 10px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    transition:.30s;
}

.facility-item:hover{
    transform:translateY(-4px);
    border-color:indianred;
    background: #fff;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.facility-item-icon{
    width:48px;
    height:48px;
    margin:0 auto 12px;
    border-radius:12px;
    background:#fff3f3;
    color:indianred;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
}

.facility-item-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:42px;
    font-size:14px;
    line-height:1.45;
    font-weight:600;
    color:#333;
}

/*==========================================================
MAP
==========================================================*/

.map-box{
    overflow:hidden;
    border-radius:18px;
    height:100%;
    min-height:340px;
    border:1px solid #ececec;
}

.map-box iframe{
    width:100%;
    height:100%;
    border:0;
}

.map-info{
    height:100%;
    border:1px solid #ececec;
    border-radius:18px;
    padding:32px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#fafafa;
}

.map-info-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    background:#fff3f3;
    color:var(--primary-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:18px;
}

.map-info h4{
    margin-bottom:14px;
    font-size:22px;
    font-weight:700;
}

.map-info p{
    color:#666;
    line-height:1.9;
    margin-bottom:28px;
}

.map-info .btn{
    width:100%;
    border-radius:50px;
}

/*==========================================================
  HERO DETAIL TUK
==========================================================*/


.detail-hero{
    position:relative;
    min-height:500px;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    overflow:hidden;
    
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.58) 50%,
        rgba(0,0,0,.25) 100%
    ),

    linear-gradient(
        180deg,
        rgba(0,0,0,.10),
        rgba(0,0,0,.35)
    );
}

.detail-hero .container{
    position:relative;
    z-index:5;
}

.hero-row{
    min-height:560px;
}

.detail-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.02);
}

/*==========================================================
  BREADCRUMB
==========================================================*/

.hero-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:22px;
    font-size:14px;
}

.hero-breadcrumb a{
    color:rgba(255,255,255,.78);
    text-decoration:none;
}

.hero-breadcrumb strong{
    color:#fff;
    font-weight:600;
}

.hero-breadcrumb span{
    color:rgba(255,255,255,.45);

}

/*==========================================================
  BADGE
==========================================================*/

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:50px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(14px);
    color:#fff;
    font-size:14px;
    font-weight:600;
    margin-bottom:24px;
}

/*==========================================================
  TITLE
==========================================================*/

.hero-title{
    font-size:45px;
    line-height:1.08;
    font-weight:800;
    color:#fff;
    margin-bottom:20px;
}

.hero-subtitle{
    max-width:640px;
    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.88);
    margin-bottom:32px;
}

/*==========================================================
  META
==========================================================*/

.hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:34px;
}

.hero-meta-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:40px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    color:#fff;
    font-size:14px;
}

.hero-meta-item.status{
    background: rgba(57, 255, 20, 0.4);

}

/*==========================================================
  BUTTON
==========================================================*/

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.hero-btn{
    padding:13px 28px;
    border-radius:50px;
    font-weight:600;
}

/*==========================================================
  HERO STATS
==========================================================*/

.hero-stats{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:22px;
}

.hero-stat-card{
    width:180px;
    height:280px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:26px;
    backdrop-filter:blur(18px);
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    padding:34px 25px;
    text-align:center;
    transition:.35s;
}

.hero-stat-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.18);
}


.hero-stat-number{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:64px;
    font-weight:800;
    color:#fff;
    background:rgba(255,255,255,.08);
    line-height:1;
    margin-bottom:12px;
}

.hero-stat-label{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 18px;
    font-size:19px;
    font-weight:600;
    line-height:1.45;
    color:#fff;
    background:rgba(255,255,255,.08);
}

/*==========================================================
  HERO ANIMATION
==========================================================*/

.hero-left{
    animation:fadeLeft .7s ease;
}

.hero-right{
    animation:fadeRight .7s ease;
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-30px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(30px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* ==========================================================
   HERO RESPONSIVE
========================================================== */

@media (max-width:991px){
    .detail-tuk-hero{
        min-height:480px;
    }

    .hero-content{
        padding:100px 0 60px;
    }

    .hero-content h1{
        font-size:42px;
    }

    .hero-stats{
        flex-wrap:wrap;
    }

    .hero-buttons{
        margin-top:10px;
    }
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:768px){

    .detail-content-section{
        padding:60px 0 30px;
    }

    .detail-feature-section{
        padding:10px 0 60px;
    }

    .content-card,
    .info-card{
        padding:28px;
    }

    .section-title h2{
        font-size:26px;
    }

    .section-title h3{
        font-size:22px;
    }

    .hero-content h1{
        font-size:36px;
    }

    .hero-location{
        font-size:16px;
    }

    .hero-stats{
        gap:14px;
    }

    .hero-stats div{
        flex:1;
        min-width:140px;
    }

    .map-wrapper iframe{
        height:360px;
    }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:576px){

    .detail-tuk-hero{
        min-height:420px;
    }

    .hero-content{
        padding:90px 0 45px;
    }

    .hero-content h1{
        font-size:30px;
    }

    .breadcrumb-custom{
        font-size:13px;
    }

    .hero-location{
        font-size:15px;
        margin-bottom:25px;
    }

    .hero-stats{
        flex-direction:column;
    }

    .hero-stats div{
        width:100%;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .content-card,
    .info-card{
        padding:24px;
    }

    .section-title{
        gap:12px;
    }

    .section-title i{
        width:46px;
        height:46px;
        font-size:20px;
    }

    .facility-item{
        padding:14px;
    }

    .facility-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .scheme-card{
        padding:16px;
    }

    .scheme-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .map-wrapper iframe{
        height:300px;
    }
}

@media (max-width:991px){
    .facility-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:576px){
    .facility-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:1200px){
    .scheme-grid{
    grid-template-columns:repeat(5,1fr);
    }
}

@media (max-width:992px){
    .scheme-grid{
    grid-template-columns:repeat(4,1fr);
    }
}

@media (max-width:768px){
    .scheme-grid{
    grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width:576px){
    .scheme-grid{
    grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:1200px){
    .facility-grid{
    grid-template-columns:repeat(5,1fr);
    }
}

@media(max-width:992px){
    .facility-grid{
    grid-template-columns:repeat(4,1fr);
    }
}

@media(max-width:768px){
    .facility-grid{
    grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:576px){
    .facility-grid{
    grid-template-columns:repeat(2,1fr);
    }
}