*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

:root{
    --navy:#06194a;
    --navy2:#082b70;
    --blue:#1769e8;
    --blue2:#2d7df6;
    --orange:#ff9700;
    --green:#0ca34a;
    --light:#f5f8fc;
    --text:#182335;
    --muted:#687385;
    --white:#ffffff;
    --border:#dfe6ef;
    --shadow:0 16px 40px rgba(8,30,70,.12);
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:var(--light);
    color:var(--text);
    line-height:1.55;
}

a{
    text-decoration:none;
}

.container{
    max-width:1200px;
    margin:auto;
    padding-left:20px;
    padding-right:20px;
}

/* HEADER */

.topbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(6,25,74,.97);
    color:#fff;
    box-shadow:0 5px 20px rgba(0,0,0,.14);
}

.nav{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
    color:#fff;
}

.brand-mark{
    width:43px;
    height:43px;
    border-radius:10px;
    background:#fff;
    color:var(--navy);
    display:grid;
    place-items:center;
    font:700 24px Georgia,serif;
}

.brand strong{
    display:block;
    font-size:18px;
    letter-spacing:.5px;
}

.brand small{
    display:block;
    margin-top:2px;
    font-size:9px;
    letter-spacing:1.8px;
    opacity:.72;
}

.nav nav{
    display:flex;
    gap:25px;
}

.nav nav a{
    color:#fff;
    font-size:14px;
    opacity:.9;
}

.nav nav a:hover{
    opacity:1;
}

/* HERO */

.hero{
    background:
        radial-gradient(circle at 15% 20%,rgba(30,110,255,.25),transparent 35%),
        linear-gradient(135deg,#04143c,#0b327d);
    color:#fff;
    text-align:center;
    padding:78px 0 105px;
}

.hero-inner{
    max-width:900px;
}

.hero-kicker,
.section-kicker{
    color:var(--orange);
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}

.hero h1{
    font:700 48px/1.12 Georgia,serif;
    margin:18px 0 15px;
}

.hero p{
    max-width:720px;
    margin:auto;
    color:#dce8f8;
}

.searchbar{
    max-width:680px;
    margin:30px auto 0;
    padding:6px;
    background:#fff;
    border-radius:50px;
    display:flex;
    box-shadow:0 15px 40px rgba(0,0,0,.22);
}

.searchbar input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    padding:14px 18px;
    border-radius:50px;
    font-size:14px;
}

.searchbar button{
    border:0;
    border-radius:50px;
    background:var(--orange);
    color:#fff;
    padding:0 25px;
    font-weight:700;
    cursor:pointer;
}

/* STATS */

.stats{
    margin-top:-38px;
    position:relative;
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    overflow:hidden;
}

.stat{
    text-align:center;
    padding:27px 15px;
    border-right:1px solid var(--border);
}

.stat:last-child{
    border-right:0;
}

.stat strong{
    display:block;
    font-size:32px;
    color:var(--navy2);
}

.stat span{
    color:var(--muted);
    font-size:12px;
}

/* MAIN */

.main{
    padding-top:65px;
    padding-bottom:80px;
}

.section-heading{
    text-align:center;
    margin-bottom:32px;
}

.section-heading .section-kicker,
.about .section-kicker{
    color:#1671dd;
}

.section-heading h2,
.about h2{
    font:700 34px Georgia,serif;
    color:var(--navy);
    margin:7px 0;
}

.section-heading p,
.about p{
    color:var(--muted);
}

/* FILTERS */

.filters{
    background:#fff;
    padding:18px;
    border-radius:14px;
    box-shadow:0 7px 24px rgba(0,0,0,.05);
    display:grid;
    grid-template-columns:1.7fr 1fr 1fr auto;
    gap:10px;
    margin-bottom:30px;
}

.filters input,
.filters select{
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px 13px;
    background:#fff;
    outline:0;
}

.filters button{
    border:0;
    border-radius:8px;
    background:var(--navy2);
    color:#fff;
    padding:0 18px;
    cursor:pointer;
}

/* JOURNAL GRID */

.journal-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.journal-card{
    background:#fff;
    border-radius:17px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid #edf1f6;
    transition:.28s ease;
}

.journal-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 45px rgba(8,30,70,.17);
}

/* COVER */

.cover-wrapper{
    position:relative;
    background:#eaf0f8;
    padding:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:350px;
}

.cover-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 85%,rgba(23,105,232,.16),transparent 30%),
        radial-gradient(circle at 85% 15%,rgba(255,151,0,.12),transparent 30%);
}

.cover-wrapper img{
    position:relative;
    width:220px;
    height:295px;
    object-fit:cover;
    border-radius:4px;
    box-shadow:0 15px 30px rgba(0,0,0,.22);
}

/* CARD */

.card-content{
    padding:22px;
}

.journal-name{
    font:700 20px/1.35 Georgia,serif;
    color:var(--navy);
    margin-bottom:6px;
}

.issn{
    font-size:11px;
    color:var(--muted);
    margin-bottom:18px;
}

/* INDEXING */

.index-title{
    color:var(--navy2);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    text-align:center;
    margin-bottom:10px;
}

.indexing{
    background:linear-gradient(135deg,#071c50,#0b428f);
    border:1px solid #1f6bd1;
    border-radius:11px;
    padding:12px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:7px;
    margin-bottom:16px;
}

.index-badge{
    background:#fff;
    color:var(--navy);
    border-radius:6px;
    padding:6px 4px;
    text-align:center;
    font-size:9px;
    font-weight:800;
    box-shadow:0 2px 7px rgba(0,0,0,.08);
}

/* SCOPE */

.scope-box{
    background:linear-gradient(135deg,#0d4fa7,#1677e9);
    color:#fff;
    border-radius:11px;
    padding:14px;
    margin-bottom:16px;
    min-height:105px;
}

.scope-label{
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:5px;
    opacity:.85;
}

.scope-text{
    font-size:11px;
    line-height:1.55;
}

/* APC */

.apc-box{
    background:#f5f8fc;
    border:1px solid var(--border);
    border-radius:11px;
    padding:14px;
    margin-bottom:17px;
}

.apc-label{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.apc-price{
    color:#1253a3;
    font-size:25px;
    font-weight:800;
    margin-top:2px;
}

/* BUTTONS */

.card-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 7px;
    border-radius:7px;
    text-align:center;
    font-size:10px;
    font-weight:800;
    transition:.2s;
}

.btn-journal{
    background:linear-gradient(135deg,#0c4fc5,#176de7);
    color:#fff;
}

.btn-journal:hover{
    background:var(--navy2);
}

.btn-template{
    background:linear-gradient(135deg,#ff8b00,#ffb000);
    color:#fff;
}

.btn-template:hover{
    background:#e77a00;
}

.btn-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:45px;
    margin-top:9px;
    border-radius:7px;
    background:linear-gradient(135deg,#0a963f,#12b84f);
    color:#fff;
    text-align:center;
    font-size:10px;
    font-weight:800;
    transition:.2s;
}

.btn-whatsapp:hover{
    background:#087a35;
}

/* NO RESULT */

.no-result{
    display:none;
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
}

.no-result strong{
    display:block;
    color:var(--navy);
    font-size:20px;
}

/* ABOUT */

.about{
    background:#fff;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:65px 0;
}

.about p{
    max-width:760px;
}

/* FOOTER */

.footer{
    background:#06152f;
    color:#fff;
    padding:50px 0 22px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:45px;
}

.footer h3{
    margin-bottom:10px;
}

.footer h4{
    margin-bottom:10px;
}

.footer p,
.footer a{
    display:block;
    color:#b7c4d5;
    font-size:13px;
    margin-bottom:7px;
}

.footer a:hover{
    color:#fff;
}

.copyright{
    text-align:center;
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:35px;
    padding-top:18px;
    color:#8da0b5;
    font-size:11px;
}

/* RESPONSIVE */

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

    .filters{
        grid-template-columns:1fr 1fr;
    }

    .filters button{
        padding:12px;
    }
}

@media(max-width:680px){
    .nav{
        min-height:68px;
    }

    .nav nav{
        display:none;
    }

    .hero{
        padding:60px 0 90px;
    }

    .hero h1{
        font-size:35px;
    }

    .searchbar{
        border-radius:14px;
    }

    .searchbar input{
        border-radius:12px;
    }

    .searchbar button{
        border-radius:10px;
        padding:0 16px;
    }

    .stats{
        grid-template-columns:1fr;
        margin-left:15px;
        margin-right:15px;
    }

    .stat{
        border-right:0;
        border-bottom:1px solid var(--border);
    }

    .stat:last-child{
        border-bottom:0;
    }

    .filters,
    .journal-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .filters button{
        padding:12px;
    }

    .indexing{
        grid-template-columns:repeat(2,1fr);
    }
}

/* V3 INDEXING PANEL */
.indexing-panel{
    background:linear-gradient(135deg,#7b2cbf,#9d4edd);
    color:#fff;
    border-radius:11px;
    padding:14px 16px;
    margin-bottom:16px;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:10px;
    font-weight:800;
    line-height:1.7;
    box-shadow:0 5px 14px rgba(123,44,191,.15);
}

/* =====================================================
   V4 — INDEXING IN
   Lighter than Scope, same editorial text style.
===================================================== */

.indexing-panel{
    background:linear-gradient(135deg,#dcecff,#eaf3ff);
    color:#164b8d;
    border-radius:11px;
    padding:13px 15px;
    margin-bottom:16px;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:10px;
    font-weight:700;
    line-height:1.7;
    border:1px solid #c8ddf6;
    box-shadow:none;
}

/* First indexing: floating badge on the upper side of cover */
.cover-wrapper{
    position:relative;
}

.cover-index-badge{
    position:absolute;
    top:15px;
    left:0;
    z-index:3;
    background:linear-gradient(135deg,#2d7df6,#1769e8);
    color:#fff;
    padding:7px 13px 8px 14px;
    border-radius:0 7px 7px 0;
    box-shadow:0 5px 14px rgba(8,40,100,.22);
    line-height:1.15;
    min-width:92px;
}

.cover-index-badge span{
    display:block;
    font-size:7px;
    font-weight:700;
    letter-spacing:.8px;
    opacity:.82;
    margin-bottom:3px;
}

.cover-index-badge strong{
    display:block;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

/* Keep cover visually clean */
.cover-wrapper img{
    position:relative;
    z-index:1;
}

/* =====================================================
   FINAL VISUAL UPDATE
===================================================== */

/* Cover must remain fully visible */
.cover-wrapper{
    position:relative;
    overflow:hidden;
}

.cover-wrapper img{
    width:220px;
    height:295px;
    object-fit:contain !important;
    object-position:center;
    background:#fff;
}

/* Large indexing badge on cover — no extra label */
.cover-index-badge{
    position:absolute;
    top:15px;
    left:0;
    z-index:5;
    min-width:92px;
    padding:8px 16px;
    border-radius:0 8px 8px 0;
    color:#fff;
    font-size:16px;
    line-height:1;
    font-weight:900;
    letter-spacing:.2px;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Indexing label belongs INSIDE the panel */
.indexing-panel{
    display:block !important;
    min-height:0 !important;
    padding:13px 15px !important;
    text-align:left !important;
    border-radius:11px !important;
    box-shadow:none !important;
}

.indexing-panel-label{
    display:block;
    font-size:9px;
    line-height:1.2;
    letter-spacing:1px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:5px;
}

.indexing-panel-text{
    font-size:10px;
    line-height:1.65;
    font-weight:700;
}

/* Colorful journal themes */
.journal-theme-1 .cover-index-badge{
    background:linear-gradient(135deg,#ff8a00,#ffb300);
}
.journal-theme-1 .indexing-panel{
    background:linear-gradient(135deg,#e4f0ff,#f0f6ff);
    color:#164b8d;
    border:1px solid #c9def7;
}
.journal-theme-1 .scope-box{
    background:linear-gradient(135deg,#0d4fa7,#176de7);
}

.journal-theme-2 .cover-index-badge{
    background:linear-gradient(135deg,#43a900,#7acb18);
}
.journal-theme-2 .indexing-panel{
    background:linear-gradient(135deg,#e9f7d8,#f4fbe9);
    color:#326915;
    border:1px solid #cde7b0;
}
.journal-theme-2 .scope-box{
    background:linear-gradient(135deg,#23730e,#42a51a);
}

.journal-theme-3 .cover-index-badge{
    background:linear-gradient(135deg,#7024b7,#a04bd5);
}
.journal-theme-3 .indexing-panel{
    background:linear-gradient(135deg,#f0e4fa,#f8effd);
    color:#63328c;
    border:1px solid #dec5ef;
}
.journal-theme-3 .scope-box{
    background:linear-gradient(135deg,#542083,#7d35b8);
}

.journal-theme-4 .cover-index-badge{
    background:linear-gradient(135deg,#d71920,#ff4b35);
}
.journal-theme-4 .indexing-panel{
    background:linear-gradient(135deg,#fde7e7,#fff2f2);
    color:#a31d25;
    border:1px solid #f2c6c6;
}
.journal-theme-4 .scope-box{
    background:linear-gradient(135deg,#a80e16,#db252b);
}

.journal-theme-5 .cover-index-badge{
    background:linear-gradient(135deg,#0794a7,#14bdca);
}
.journal-theme-5 .indexing-panel{
    background:linear-gradient(135deg,#dff5f8,#effbfc);
    color:#176d7a;
    border:1px solid #c1e6ea;
}
.journal-theme-5 .scope-box{
    background:linear-gradient(135deg,#087789,#0aa9bd);
}

.journal-theme-6 .cover-index-badge{
    background:linear-gradient(135deg,#e66b00,#ff9b16);
}
.journal-theme-6 .indexing-panel{
    background:linear-gradient(135deg,#fff0dd,#fff8ee);
    color:#a95100;
    border:1px solid #f4d1a9;
}
.journal-theme-6 .scope-box{
    background:linear-gradient(135deg,#c95000,#ef7908);
}

/* Keep APC, buttons and WhatsApp visually integrated */
.journal-card .apc-box{
    background:#fff;
}

.journal-card .btn-journal{
    background:var(--navy2);
}

.journal-card .btn-template{
    background:var(--orange);
    color:#fff;
}

.journal-card .btn-whatsapp{
    background:linear-gradient(135deg,#0a963f,#12b84f);
}

/* Mobile */
@media(max-width:680px){
    .cover-wrapper img{
        width:210px;
        height:285px;
    }

    .cover-index-badge{
        font-size:14px;
        padding:8px 13px;
    }
}


/* =====================================================
   FINAL — INDEXING BADGE COLOR SYSTEM
   Badge color is determined automatically by the
   first indexing item in journals.js.
===================================================== */

.cover-index-badge{
    top:15px;
    left:0;
    z-index:5;
    min-width:100px;
    padding:10px 17px;
    border-radius:0 8px 8px 0;
    color:#fff !important;
    font-size:17px;
    line-height:1;
    font-weight:900;
    letter-spacing:.1px;
    text-align:center;
    box-shadow:0 7px 18px rgba(0,0,0,.24);
    border:0;
}

/* SINTA 1 — hijau tua */
.cover-index-badge.badge-sinta1{
    background:linear-gradient(135deg,#075d2a,#0b7f39) !important;
}

/* SINTA 2 — hijau muda */
.cover-index-badge.badge-sinta2{
    background:linear-gradient(135deg,#58b52c,#7dcc42) !important;
}

/* SINTA 3 — hijau kekuningan */
.cover-index-badge.badge-sinta3{
    background:linear-gradient(135deg,#9bab17,#c1cf2b) !important;
}

/* SINTA 4 — orange muda */
.cover-index-badge.badge-sinta4{
    background:linear-gradient(135deg,#ffae4a,#ffc477) !important;
}

/* SINTA 5 — orange */
.cover-index-badge.badge-sinta5{
    background:linear-gradient(135deg,#f27a00,#ff9415) !important;
}

/* SCOPUS — orange tua */
.cover-index-badge.badge-scopus{
    background:linear-gradient(135deg,#b84a00,#d96508) !important;
}

/* EBSCO — biru tua */
.cover-index-badge.badge-ebsco{
    background:linear-gradient(135deg,#06366f,#07529c) !important;
}

/* COPERNICUS — merah tua */
.cover-index-badge.badge-copernicus{
    background:linear-gradient(135deg,#7e111c,#a31c29) !important;
}

/* DOAJ — orange kemerahan */
.cover-index-badge.badge-doaj{
    background:linear-gradient(135deg,#d9461e,#ed6235) !important;
}

/* GOOGLE SCHOLAR — biru */
.cover-index-badge.badge-google-scholar{
    background:linear-gradient(135deg,#1769e8,#3986f5) !important;
}

/* GARUDA — hijau kebiruan */
.cover-index-badge.badge-garuda{
    background:linear-gradient(135deg,#007f78,#00a69a) !important;
}

/* Unknown indexing */
.cover-index-badge.badge-default{
    background:linear-gradient(135deg,#334155,#475569) !important;
}

/* =====================================================
   INDEXING PANEL
   Label and values stay together in one box.
===================================================== */

.indexing-panel{
    background:linear-gradient(135deg,#e6f1ff,#f1f7ff) !important;
    color:#174f91 !important;
    border:1px solid #c8def7 !important;
    border-radius:11px !important;
    padding:13px 15px !important;
    margin-bottom:16px !important;
    min-height:0 !important;
    display:block !important;
    text-align:left !important;
    box-shadow:none !important;
}

.indexing-panel-label{
    display:block;
    color:#174f91;
    font-size:9px;
    line-height:1.2;
    letter-spacing:1px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:5px;
}

.indexing-panel-text{
    color:#315e91;
    font-size:10px;
    line-height:1.7;
    font-weight:700;
}

/* Scope remains visually stronger than Indexing */
.scope-box{
    background:linear-gradient(135deg,#0d4fa7,#176de7) !important;
    color:#fff !important;
}

/* Full cover — no crop */
.cover-wrapper img{
    object-fit:contain !important;
    object-position:center !important;
}


/* =====================================================
   PRODUCTION / MOBILE / PUBLISHER BRANDING
===================================================== */

.publisher-logo{
    width:220px;
    height:auto;
    display:block;
}

.menu-toggle{
    display:none;
    width:44px;
    height:42px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.08);
    border-radius:9px;
    padding:9px;
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    height:2px;
    margin:5px 0;
    background:#fff;
    border-radius:2px;
    transition:.2s;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* =====================================================
   JOURNAL COVER SLIDER
===================================================== */

.hero{
    position:relative;
    overflow:hidden;
}

.hero-slider{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.hero-slider::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(4,20,60,.93) 0%,
        rgba(4,20,60,.75) 45%,
        rgba(4,20,60,.90) 100%
    );
}

.hero-inner{
    position:relative;
    z-index:3;
}

.hero-slide{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:45px;
    opacity:0;
    transform:scale(1.02);
    transition:opacity .65s ease, transform .9s ease;
    padding:20px 7%;
}

.hero-slide.active{
    opacity:1;
    transform:scale(1);
}

.hero-slide-cover{
    width:150px;
    height:200px;
    flex:0 0 150px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-slide-cover img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:4px;
    box-shadow:0 18px 35px rgba(0,0,0,.38);
}

.hero-slide-content{
    width:min(520px,50vw);
    text-align:left;
    color:#fff;
}

.hero-slide-content > span{
    color:var(--orange);
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.hero-slide-content h2{
    font:700 27px/1.2 Georgia,serif;
    margin:8px 0;
    color:#fff;
}

.hero-slide-content p{
    color:#d8e6f7;
    font-size:12px;
}

.hero-slide-button{
    display:inline-flex;
    margin-top:13px;
    padding:9px 15px;
    border-radius:7px;
    background:var(--orange);
    color:#fff;
    font-size:10px;
    font-weight:800;
    pointer-events:auto;
}

.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:29px;
    line-height:30px;
    cursor:pointer;
    pointer-events:auto;
}

.slider-arrow:hover{
    background:rgba(255,255,255,.20);
}

.slider-prev{
    left:20px;
}

.slider-next{
    right:20px;
}

.slider-dots{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    pointer-events:auto;
}

.slider-dot{
    width:7px;
    height:7px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.4);
    padding:0;
    cursor:pointer;
}

.slider-dot.active{
    width:20px;
    border-radius:5px;
    background:#fff;
}

/* =====================================================
   ABOUT / FOOTER BRAND
===================================================== */

.about-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:40px;
    align-items:center;
}

.publisher-logo-card{
    justify-self:end;
    width:min(330px,100%);
    background:#fff;
    padding:18px;
    border-radius:15px;
    box-shadow:var(--shadow);
    text-align:center;
}

.publisher-logo-card img{
    width:100%;
    height:auto;
}

.publisher-logo-card span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:8px;
}

.footer-logo{
    width:210px;
    max-width:100%;
    margin-bottom:10px;
}

.online-counter{
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    margin-top:5px;
}

.online-counter strong{
    font-size:21px;
}

.online-counter span:last-child{
    color:#b7c4d5;
    font-size:11px;
}

.online-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#19c65a;
    box-shadow:0 0 0 4px rgba(25,198,90,.12);
}

.online-note{
    display:block;
    color:#7f93aa;
    font-size:9px;
    margin-top:6px;
}

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

@media(max-width:980px){

    .publisher-logo{
        width:195px;
    }

    .hero-slide{
        gap:25px;
        padding-left:55px;
        padding-right:55px;
    }

    .hero-slide-cover{
        width:125px;
        height:170px;
        flex-basis:125px;
    }

    .hero-slide-content h2{
        font-size:22px;
    }

}

@media(max-width:680px){

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    .topbar{
        position:sticky;
    }

    .nav{
        min-height:66px;
    }

    .publisher-logo{
        width:180px;
    }

    .menu-toggle{
        display:block;
    }

    .main-nav{
        position:absolute;
        left:10px;
        right:10px;
        top:66px;
        display:none !important;
        flex-direction:column;
        gap:0 !important;
        padding:8px;
        background:#06194a;
        border:1px solid rgba(255,255,255,.12);
        border-radius:12px;
        box-shadow:0 15px 35px rgba(0,0,0,.25);
    }

    .main-nav.mobile-open{
        display:flex !important;
    }

    .main-nav a{
        padding:13px 14px;
        border-radius:8px;
    }

    .main-nav a:hover{
        background:rgba(255,255,255,.08);
    }

    .hero{
        padding-top:45px;
        padding-bottom:85px;
    }

    .hero-slider{
        display:block;
        height:100%;
    }

    .hero-slide{
        gap:14px;
        padding:15px 48px;
        align-items:flex-start;
        padding-top:35px;
    }

    .hero-slide-cover{
        width:92px;
        height:125px;
        flex-basis:92px;
    }

    .hero-slide-content{
        width:auto;
        flex:1;
    }

    .hero-slide-content h2{
        font-size:17px;
        margin:5px 0;
    }

    .hero-slide-content p{
        font-size:10px;
    }

    .hero-slide-button{
        font-size:8px;
        padding:7px 10px;
    }

    .slider-arrow{
        width:30px;
        height:30px;
        font-size:23px;
        line-height:23px;
    }

    .slider-prev{
        left:8px;
    }

    .slider-next{
        right:8px;
    }

    .slider-dots{
        bottom:13px;
    }

    .hero-inner{
        padding-top:145px;
    }

    .hero h1{
        font-size:31px;
    }

    .hero p{
        font-size:12px;
    }

    .searchbar{
        margin-top:20px;
    }

    .searchbar button{
        padding:0 14px;
    }

    .stats{
        margin-left:15px;
        margin-right:15px;
    }

    .about-grid{
        grid-template-columns:1fr;
    }

    .publisher-logo-card{
        justify-self:stretch;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:28px;
    }

}


/* =====================================================
   FINAL LAYOUT — SLIDER BELOW STATISTICS
===================================================== */

.journal-showcase{
    padding:58px 0 35px;
    background:#f5f8fc;
}

.showcase-heading{
    text-align:center;
    margin-bottom:24px;
}

.showcase-heading .section-kicker{
    color:#1769e8;
}

.showcase-heading h2{
    font:700 30px Georgia,serif;
    color:var(--navy);
    margin:6px 0;
}

.showcase-heading p{
    color:var(--muted);
    font-size:12px;
}

/* Clean horizontal showcase */
.showcase-slider{
    position:relative;
    height:350px;
    overflow:hidden;
    border-radius:20px;
    background:
        radial-gradient(circle at 15% 25%,rgba(23,105,232,.18),transparent 32%),
        radial-gradient(circle at 85% 75%,rgba(255,151,0,.14),transparent 32%),
        linear-gradient(135deg,#06194a,#0b327d);
    box-shadow:0 18px 45px rgba(8,30,70,.18);
}

.showcase-slider::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(3,17,52,.15),
        rgba(3,17,52,.05)
    );
    pointer-events:none;
}

.showcase-slider .hero-slide{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:55px;
    padding:25px 80px 45px;
    opacity:0;
    transform:translateX(18px);
    transition:opacity .55s ease, transform .55s ease;
    z-index:1;
}

.showcase-slider .hero-slide.active{
    opacity:1;
    transform:translateX(0);
}

.showcase-slider .hero-slide-cover{
    width:215px;
    height:285px;
    flex:0 0 215px;
}

.showcase-slider .hero-slide-cover img{
    width:auto;
    height:auto;
    max-width:215px;
    max-height:285px;
    object-fit:contain;
    border-radius:5px;
    box-shadow:0 18px 35px rgba(0,0,0,.38);
}

.showcase-slider .hero-slide-content{
    width:min(560px,55%);
    text-align:left;
}

.showcase-slider .hero-slide-content > span{
    color:var(--orange);
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.showcase-slider .hero-slide-content h2{
    font:700 30px/1.2 Georgia,serif;
    color:#fff;
    margin:9px 0 10px;
}

.showcase-slider .hero-slide-content p{
    color:#d8e6f7;
    font-size:13px;
}

.showcase-slider .hero-slide-button{
    display:inline-flex;
    margin-top:18px;
    padding:11px 19px;
    border-radius:8px;
    background:var(--orange);
    color:#fff;
    font-size:10px;
    font-weight:800;
    box-shadow:0 7px 18px rgba(0,0,0,.2);
}

.showcase-slider .slider-arrow{
    z-index:5;
}

.showcase-slider .slider-prev{
    left:18px;
}

.showcase-slider .slider-next{
    right:18px;
}

.showcase-slider .slider-dots{
    bottom:15px;
}

/* Keep hero clean now that slider has moved below stats */
.hero{
    padding:72px 0 88px;
}

@media(max-width:680px){

    .journal-showcase{
        padding:38px 0 25px;
    }

    .showcase-heading h2{
        font-size:25px;
    }

    .showcase-slider{
        height:430px;
        border-radius:16px;
    }

    .showcase-slider .hero-slide{
        flex-direction:column;
        gap:10px;
        padding:22px 42px 42px;
        justify-content:flex-start;
    }

    .showcase-slider .hero-slide-cover{
        width:145px;
        height:190px;
        flex-basis:190px;
    }

    .showcase-slider .hero-slide-cover img{
        max-width:145px;
        max-height:190px;
    }

    .showcase-slider .hero-slide-content{
        width:100%;
        text-align:center;
    }

    .showcase-slider .hero-slide-content h2{
        font-size:18px;
    }

    .showcase-slider .hero-slide-content p{
        font-size:10px;
    }

    .showcase-slider .hero-slide-button{
        margin-top:10px;
        padding:9px 14px;
    }

}


/* =====================================================
   FINAL POLISH — 7 FINISHING FEATURES
===================================================== */

.center-heading{
    text-align:center;
}

.center-heading h2{
    margin-top:7px;
}

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

.publish-cta{
    padding:34px 0;
    background:linear-gradient(135deg,#06194a,#0b327d);
    color:#fff;
}

.publish-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.publish-cta h2{
    margin:6px 0 7px;
    font:700 26px/1.2 Georgia,serif;
    color:#fff;
}

.publish-cta p{
    margin:0;
    max-width:680px;
    color:#d8e6f7;
    font-size:12px;
    line-height:1.7;
}

.publish-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    flex-shrink:0;
}

.cta-primary,
.cta-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 15px;
    border-radius:8px;
    font-size:9px;
    font-weight:900;
    letter-spacing:.4px;
}

.cta-primary{
    background:var(--orange);
    color:#fff;
}

.cta-secondary{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.24);
    color:#fff;
}

/* =====================================================
   IMPACT WIDGET
===================================================== */

.impact-section{
    padding:58px 0;
    background:#fff;
}

.impact-widget{
    width:100%;
    min-height:310px;
    background:#f7f9fc;
    border:1px solid #e2e9f2;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(10,40,80,.08);
}

.impact-widget iframe{
    display:block;
    width:100%;
    min-height:310px;
    height:380px;
    border:0;
    background:#fff;
}

/* =====================================================
   WHY PUBLISH
===================================================== */

.why-publish{
    padding:58px 0;
    background:#f5f8fc;
}

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

.why-card{
    background:#fff;
    border:1px solid #e4ebf3;
    border-radius:14px;
    padding:23px 19px;
    box-shadow:0 7px 22px rgba(10,40,80,.05);
    transition:transform .2s ease,box-shadow .2s ease;
}

.why-card:hover{
    transform:translateY(-3px);
    box-shadow:0 13px 28px rgba(10,40,80,.09);
}

.why-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#e8f1ff;
    color:#1769e8;
    font-size:18px;
    font-weight:900;
    margin-bottom:14px;
}

.why-card h3{
    margin:0 0 8px;
    font-size:14px;
    color:var(--navy);
}

.why-card p{
    margin:0;
    color:var(--muted);
    font-size:10px;
    line-height:1.7;
}

/* =====================================================
   POLICIES
===================================================== */

.policies-section{
    padding:60px 0;
    background:#fff;
}

.policy-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:13px;
}

.policy-card{
    background:#f8fafc;
    border:1px solid #e2e9f2;
    border-radius:12px;
    padding:0 16px;
}

.policy-card summary{
    cursor:pointer;
    list-style:none;
    padding:16px 2px;
    color:var(--navy);
    font-size:12px;
    font-weight:900;
}

.policy-card summary::-webkit-details-marker{
    display:none;
}

.policy-card summary::after{
    content:"+";
    float:right;
    color:#1769e8;
    font-size:17px;
    line-height:12px;
}

.policy-card[open] summary::after{
    content:"−";
}

.policy-card p{
    margin:0 2px 16px;
    color:var(--muted);
    font-size:10px;
    line-height:1.75;
}

/* =====================================================
   FOOTER LINKS
===================================================== */

.footer a{
    transition:opacity .2s ease;
}

.footer a:hover{
    opacity:.78;
}

.copyright a{
    color:#b7c4d5;
}

.footer-separator{
    margin:0 5px;
    color:#6f839d;
}

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

@media(max-width:900px){

    .publish-cta-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .publish-cta-buttons{
        width:100%;
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:680px){

    .publish-cta{
        padding:28px 0;
    }

    .publish-cta h2{
        font-size:21px;
    }

    .publish-cta-buttons{
        flex-direction:column;
    }

    .cta-primary,
    .cta-secondary{
        width:100%;
    }

    .impact-section,
    .why-publish,
    .policies-section{
        padding:42px 0;
    }

    .impact-widget{
        min-height:360px;
    }

    .impact-widget iframe{
        min-height:360px;
        height:430px;
    }

    .why-grid{
        grid-template-columns:1fr;
    }

    .policy-grid{
        grid-template-columns:1fr;
    }

}


/* =====================================================
   LAFADZ PUBLISHING SERVICES
===================================================== */

.services-section{
    padding:60px 0;
    background:#f5f8fc;
}

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

.service-card{
    position:relative;
    display:block;
    min-height:245px;
    padding:22px 20px;
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    box-shadow:0 12px 30px rgba(10,35,75,.12);
    transition:transform .22s ease, box-shadow .22s ease;
}

.service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 38px rgba(10,35,75,.18);
}

.service-card::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-55px;
    bottom:-65px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.service-ojs{
    background:linear-gradient(145deg,#0757bd,#1786ed);
}

.service-accreditation{
    background:linear-gradient(145deg,#087844,#20a65e);
}

.service-theme{
    background:linear-gradient(145deg,#7c35b8,#a95be0);
}

.service-widget{
    background:linear-gradient(145deg,#c65312,#f18a25);
}

.service-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    font-size:22px;
    font-weight:900;
    margin-bottom:20px;
}

.service-number{
    display:block;
    margin-bottom:5px;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px;
    opacity:.72;
}

.service-content h3{
    margin:0 0 9px;
    color:#fff;
    font:700 18px/1.25 Georgia,serif;
}

.service-content p{
    margin:0;
    min-height:55px;
    color:rgba(255,255,255,.86);
    font-size:10px;
    line-height:1.7;
}

.service-content > strong{
    display:inline-block;
    margin-top:18px;
    color:#fff;
    font-size:9px;
    letter-spacing:.6px;
}

.service-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:15px;
}

.service-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    border-radius:7px;
    font-size:8px;
    font-weight:900;
    letter-spacing:.3px;
    text-decoration:none;
}

.service-widget-link{
    background:#fff;
    color:#b94c10 !important;
}

.service-whatsapp{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.35);
    color:#fff !important;
}

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

@media(max-width:680px){
    .services-section{
        padding:43px 0;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    .service-card{
        min-height:210px;
    }
}
/* =====================================================
   FEATURED JOURNAL SLIDER
   VISIT JOURNAL + INDEXING UTAMA
===================================================== */

.hero-slide-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:14px;
}


/* Visit Journal */

.hero-slide-actions .hero-slide-button{
    margin-top:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}


/* Indexing Utama */

.hero-slide-indexing{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:34px;

    padding:9px 15px;

    border-radius:7px;

    color:#ffffff;

    font-size:9px;

    font-weight:800;

    line-height:1;

    letter-spacing:.3px;

    white-space:nowrap;
}


/* =====================================================
   WARNA INDEXING UTAMA
===================================================== */

.hero-slide-indexing[data-indexing="SINTA 1"]{
    background:#176b3a;
}

.hero-slide-indexing[data-indexing="SINTA 2"]{
    background:#62b85a;
}

.hero-slide-indexing[data-indexing="SINTA 3"]{
    background:#a6bd35;
}

.hero-slide-indexing[data-indexing="SINTA 4"]{
    background:#f4a261;
}

.hero-slide-indexing[data-indexing="SINTA 5"]{
    background:#ed7d31;
}

.hero-slide-indexing[data-indexing="Scopus"]{
    background:#c45118;
}

.hero-slide-indexing[data-indexing="EBSCO"]{
    background:#164a73;
}

.hero-slide-indexing[data-indexing="Copernicus"]{
    background:#8f2020;
}

.hero-slide-indexing[data-indexing="DOAJ"]{
    background:#d94b2b;
}

.hero-slide-indexing[data-indexing="Garuda"]{
    background:#237a63;
}

.hero-slide-indexing[data-indexing="Google Scholar"]{
    background:#3568a8;
}


/* =====================================================
   JIKA URL JURNAL BELUM TERSEDIA
===================================================== */

.hero-slide-disabled{
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
}


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

@media(max-width:680px){

    .hero-slide-actions{
        gap:6px;
        margin-top:11px;
    }


    .hero-slide-actions .hero-slide-button,
    .hero-slide-indexing{

        min-height:30px;

        padding:7px 10px;

        font-size:8px;

    }

}