.hp-shell{max-width:1450px;margin:24px auto 40px;padding:0 18px;display:grid;gap:22px}.hp-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:22px;padding:40px;border-radius:28px;box-shadow:0 24px 55px rgba(53,130,174,.2);color:#fff;transition:background .3s ease}.hp-hero-main{align-self:center}.hp-kicker,.hp-heading span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.hp-kicker{display:inline-block;padding:7px 11px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.14);border-radius:999px}.hp-hero h1{max-width:820px;margin:15px 0 12px;font:700 clamp(35px,4.5vw,58px)/1.08 Georgia,serif;color:#fff}.hp-hero-main>p{max-width:750px;margin:0 0 23px;color:rgba(255,255,255,.9);font-size:15px;line-height:1.7}.hp-search{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;max-width:760px;padding:8px;background:#fff;border-radius:15px;box-shadow:0 14px 30px rgba(35,100,140,.18)}.hp-search>span{color:#397fa7;text-align:center}.hp-search input{min-width:0;border:0;outline:0;padding:10px 4px;font-size:14px}.hp-search button{border:0;padding:11px 18px;border-radius:10px;background:#2e7da9;color:#fff;font-weight:700;cursor:pointer}.hp-hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.hp-hero-links a{color:#fff;font-size:12px;font-weight:700;padding:7px 10px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:999px}.hp-hero-side{display:grid;gap:12px;align-content:center}.hp-total,.hp-mini-grid>div{background:rgba(255,255,255,.95);color:#31546c;border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 25px rgba(33,92,125,.12)}.hp-total{display:flex;align-items:center;gap:15px;padding:20px;border-radius:18px}.hp-total>span{font-size:32px}.hp-total strong{display:block;font-size:28px;color:#235b7e}.hp-total small,.hp-mini-grid small{display:block;color:#7890a2}.hp-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hp-mini-grid>div{padding:15px;border-radius:15px}.hp-mini-grid>div>span{font-size:18px}.hp-mini-grid strong{display:block;margin-top:6px;font-size:20px;color:#2a678d}.hp-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.hp-shortcuts>a{display:flex;align-items:center;gap:12px;padding:17px;background:#fff;border:1px solid #d6eaf7;border-radius:16px;box-shadow:0 9px 24px rgba(84,151,194,.09);color:#31546c}.hp-shortcuts>a>span{width:42px;height:42px;display:grid;place-items:center;background:#edf8ff;border-radius:12px;font-size:20px}.hp-shortcuts strong,.hp-shortcuts small{display:block}.hp-shortcuts small{margin-top:3px;color:#7890a2;font-size:11px}.hp-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.hp-latest-panel,.hp-country-panel,.hp-categories{background:rgba(255,255,255,.96);border:1px solid #d6eaf7;border-radius:20px;box-shadow:0 12px 30px rgba(84,151,194,.1);padding:20px}.hp-heading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:16px}.hp-heading span{color:#4a95c1}.hp-heading h2{margin:4px 0 0;color:#294e67;font:700 24px/1.2 Georgia,serif}.hp-heading>a{font-size:12px;font-weight:700}.hp-latest-viewport{overflow:hidden;scroll-snap-type:x mandatory;border-radius:16px}.hp-latest-track{display:flex;gap:14px}.hp-sch-card{flex:0 0 calc((100% - 14px)/2);scroll-snap-align:start;display:flex;flex-direction:column;min-height:225px;padding:19px;border:1px solid #dceef9;border-radius:16px;background:linear-gradient(145deg,#fff,#f7fcff)}.hp-country{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700}.hp-country .flag-image,.hp-country .world-icon{width:21px;height:15px}.hp-sch-card h3{margin:12px 0 8px;font-size:17px;line-height:1.45}.hp-sch-card h3 a{color:#23658f}.hp-sch-card p{margin:0;color:#7890a2;font-size:13px;line-height:1.55}.hp-sch-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}.hp-sch-bottom span{padding:5px 8px;background:#edf8ff;border-radius:999px;font-size:10px}.hp-sch-bottom a{font-size:11px;font-weight:700}.hp-carousel-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:15px}.hp-carousel-controls button{width:34px;height:34px;border:1px solid #d5eaf7;border-radius:50%;background:#f5fbff;color:#2f739b;font-size:22px;cursor:pointer}.hp-carousel-dots{display:flex;gap:5px}.hp-carousel-dots span{width:6px;height:6px;border-radius:50%;background:#c7dfed}.hp-carousel-dots span.active{width:18px;border-radius:999px;background:#4a9bc7}.hp-country-panel{position:sticky;top:15px}.hp-country-marquee{height:520px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%)}.hp-country-list{display:grid;gap:8px;padding:8px 4px 40px}.hp-country-list>a{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:9px;padding:11px;border:1px solid #e0eff8;border-radius:11px;background:#f9fdff;color:#31546c;font-size:12px;font-weight:700}.hp-country-list .flag-image{width:22px;height:16px}.hp-country-list b{color:#91bad3}.hp-categories{padding:24px}.hp-category-columns{display:grid;grid-template-columns:1fr 1fr;gap:25px}.hp-category-columns h3{margin:0 0 11px;color:#31546c;font-size:14px}.hp-chip-wrap{display:flex;flex-wrap:wrap;gap:8px}.hp-chip-wrap a{padding:8px 11px;border:1px solid #d6eaf7;background:#f5fbff;border-radius:999px;font-size:12px;font-weight:700}.hp-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px 0;border-top:1px solid #d8ebf7;color:#6f8798;font-size:12px}.hp-footer p{margin:0}.hp-footer nav{display:flex;flex-wrap:wrap;gap:16px}.hp-footer a{font-weight:700}.hp-sch-card:hover,.hp-shortcuts>a:hover{transform:translateY(-2px);transition:.18s;box-shadow:0 15px 30px rgba(67,137,178,.13)}@media(max-width:1050px){.hp-hero{grid-template-columns:1fr}.hp-hero-side{grid-template-columns:1fr 1fr}.hp-total{grid-row:span 2}.hp-shortcuts{grid-template-columns:repeat(2,1fr)}.hp-dashboard{grid-template-columns:1fr}.hp-country-panel{position:static}.hp-country-marquee{height:340px}.hp-country-list{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.hp-shell{padding:0 12px}.hp-hero{padding:23px;border-radius:20px}.hp-hero h1{font-size:32px}.hp-search{grid-template-columns:25px 1fr}.hp-search button{grid-column:1/-1;width:100%}.hp-hero-side,.hp-shortcuts,.hp-category-columns,.hp-country-list{grid-template-columns:1fr}.hp-mini-grid{grid-template-columns:1fr 1fr}.hp-total{grid-row:auto}.hp-dashboard{display:block}.hp-country-panel{margin-top:18px}.hp-sch-card{flex-basis:100%}.hp-footer{align-items:flex-start;flex-direction:column}}



/* =========================================================
   MOBILE FIX + MANUAL COUNTRY SCROLL
   ========================================================= */

/* Negara tidak bergerak otomatis */
.hp-country-track,
.hp-country-list,
.hp-country-marquee,
.hp-country-scroller {
    animation: none !important;
    transform: none !important;
}

/* Area negara scroll manual */
.hp-country-scroll,
.hp-country-viewport,
.hp-country-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

/* Negara dibuat satu baris horizontal */
.hp-country-track,
.hp-country-list {
    width: max-content;
    min-width: 100%;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 10px;

    padding: 4px 2px 12px;
}

/* Ukuran kartu negara */
.hp-country-card,
.hp-country-item,
.hp-country-link {
    flex: 0 0 auto !important;
    width: 145px;
    min-width: 145px;
    max-width: 145px;
}

/* Hilangkan duplikat track khusus marquee */
.hp-country-track[aria-hidden="true"],
.hp-country-list[aria-hidden="true"],
.hp-country-clone {
    display: none !important;
}


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

@media (max-width: 960px) {
    .hp-hero,
    .hp-main-layout,
    .hp-content-layout,
    .hp-latest-country-layout,
    .hp-category-layout {
        grid-template-columns: 1fr !important;
    }

    .hp-hero {
        gap: 20px;
        padding: 28px 22px;
    }

    .hp-hero-side,
    .hp-stat-panel,
    .hp-quick-panel {
        width: 100%;
        max-width: none;
    }

    .hp-quick-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .hp-scholarship-area,
    .hp-country-area {
        min-width: 0;
        width: 100%;
    }
}


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

@media (max-width: 680px) {
    body {
        overflow-x: hidden;
    }

    .wrap,
    .hp-container,
    .hp-page {
        width: 100%;
        max-width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hp-hero {
        display: block !important;

        margin-bottom: 16px;
        padding: 22px 16px;

        border-radius: 18px;
    }

    .hp-hero-copy,
    .hp-hero-content {
        width: 100%;
        max-width: none;
    }

    .hp-hero h1 {
        max-width: none;

        font-size: 29px !important;
        line-height: 1.13;
    }

    .hp-hero p {
        font-size: 14px;
        line-height: 1.55;
    }

    .hp-search-form,
    .hp-search {
        width: 100%;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px;
    }

    .hp-search-form input,
    .hp-search-form button,
    .hp-search input,
    .hp-search button {
        width: 100% !important;
        min-width: 0;
    }

    .hp-hero-side,
    .hp-stat-panel {
        width: 100%;

        margin-top: 18px;
    }

    .hp-stats,
    .hp-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px;
    }

    .hp-quick-grid {
        grid-template-columns: 1fr !important;
        gap: 9px;
    }

    .hp-quick-card {
        min-height: auto;
        padding: 14px;
    }

    .hp-main-layout,
    .hp-content-layout,
    .hp-latest-country-layout,
    .hp-category-layout {
        display: block !important;
    }

    .hp-section,
    .hp-panel,
    .hp-latest-panel,
    .hp-country-panel {
        width: 100%;
        max-width: 100%;

        margin-bottom: 16px;
        padding: 15px;

        border-radius: 16px;
    }

    .hp-section-head,
    .hp-panel-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .hp-section-head h2,
    .hp-panel-head h2 {
        font-size: 19px;
    }

    /* Satu kartu beasiswa terlihat penuh */
    .hp-scholarship-viewport,
    .hp-latest-viewport,
    .hp-slider-viewport {
        width: 100%;
        max-width: 100%;

        overflow: hidden;
    }

    .hp-scholarship-track,
    .hp-latest-track,
    .hp-slider-track {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .hp-scholarship-card,
    .hp-latest-card,
    .hp-slide {
        flex: 0 0 100% !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        padding: 16px;
    }

    .hp-scholarship-card h3,
    .hp-latest-card h3 {
        font-size: 16px;
        line-height: 1.4;
    }

    .hp-slider-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        margin-top: 12px;
    }

    /* Negara manual horizontal */
    .hp-country-scroll,
    .hp-country-viewport,
    .hp-country-wrapper {
        margin-left: -2px;
        margin-right: -2px;
    }

    .hp-country-card,
    .hp-country-item,
    .hp-country-link {
        width: 135px;
        min-width: 135px;
        max-width: 135px;

        padding: 12px;
    }

    .hp-country-card .flag-image,
    .hp-country-item .flag-image,
    .hp-country-link .flag-image {
        width: 28px;
        height: 20px;
    }

    .hp-category-grid,
    .hp-degree-grid,
    .hp-funding-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px;
    }

    .hp-category-card {
        min-width: 0;
        padding: 13px 10px;
    }

    .hp-footer {
        padding: 22px 14px;
    }

    .hp-footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 12px;

        text-align: center;
    }

    .hp-footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
}


/* HP sangat kecil */
@media (max-width: 390px) {
    .hp-hero h1 {
        font-size: 26px !important;
    }

    .hp-stats,
    .hp-stat-grid,
    .hp-category-grid,
    .hp-degree-grid,
    .hp-funding-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-country-card,
    .hp-country-item,
    .hp-country-link {
        width: 125px;
        min-width: 125px;
        max-width: 125px;
    }
}

/* FIX MOBILE MELEBAR */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.hp-shell,
.hp-hero,
.hp-hero-main,
.hp-hero-side,
.hp-search,
.hp-search input,
.hp-search button,
.hp-shortcuts,
.hp-dashboard,
.hp-latest-panel,
.hp-country-panel,
.hp-categories {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 680px) {

    .hp-shell {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        overflow: hidden;
    }

    .hp-hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hp-search {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px;
    }

    .hp-search > span {
        display: none !important;
    }

    .hp-search input {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 48px;
        padding: 0 14px;
        font-size: 14px;
    }

    .hp-search button {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px;
    }

    .hp-hero h1,
    .hp-hero p {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .hp-dashboard,
    .hp-category-columns {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hp-latest-panel,
    .hp-country-panel,
    .hp-categories {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .hp-latest-viewport {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .hp-latest-track {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hp-sch-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .hp-country-vertical-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .hp-country-vertical-list,
    .hp-country-vertical-list > a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}