/* =========================================================
   JOURNAL HOUSE
   LEMBAGA DONGENG DOSEN
   PUBLIC WEBSITE
   VERSION 2026
========================================================= */


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #34445b;
    background: #ffffff;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
}


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --purple: #7061d8;
    --purple-dark: #5f4bb1;
    --purple-light: #eeeafd;

    --gold: #f4b62a;

    --pink: #f25291;
    --pink-dark: #d92f72;

    --green: #198754;
    --green-dark: #087443;

    --blue: #2589e8;
    --blue-dark: #1266bb;

    --orange: #d56b2a;
    --orange-dark: #99491d;

    --text-dark: #34445b;
    --text: #59677c;
    --text-light: #8994a5;

    --border: #e7e9ef;

    --background: #f7f8fb;
    --background-soft: #fafbfc;

    --header: #29283a;

    --shadow-sm:
        0 6px 20px rgba(45, 50, 70, .06);

    --shadow:
        0 10px 30px rgba(45, 50, 70, .08);

    --shadow-lg:
        0 20px 45px rgba(45, 50, 70, .14);
}


/* =========================================================
   GLOBAL
========================================================= */

.container {
    width: min(1100px, 90%);
    margin: auto;
}

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


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

.site-header {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .42),
            rgba(0, 0, 0, .04)
        );

    transition:
        background .25s ease,
        box-shadow .25s ease;
}

.site-header.solid {

    position: relative;

    background:
        linear-gradient(
            135deg,
            #282637,
            #302c42
        );

    box-shadow:
        0 5px 25px rgba(20, 20, 30, .12);
}


.header-inner {

    width: min(1160px, 92%);

    min-height: 84px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #ffffff;
}

.brand-icon {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #8664e7,
            #6944b6
        );

    color: #ffffff;

    font-size: 19px;

    font-weight: 900;

    box-shadow:
        0 8px 18px rgba(85, 59, 160, .25);
}

.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.15;
}

.brand-text strong {

    font-size: 17px;

    font-weight: 800;

    color: #ffffff;
}

.brand-text small {

    margin-top: 4px;

    font-size: 9px;

    color: #c8c8d0;

    letter-spacing: .02em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav,
.site-header nav {

    display: flex;

    align-items: center;

    gap: 31px;
}

.main-nav a,
.site-header nav a {

    position: relative;

    color: #c9c9d2;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .02em;

    padding: 33px 0;

    transition:
        color .2s ease;
}

.main-nav a:hover,
.main-nav a.active,
.site-header nav a:hover,
.site-header nav a.active {

    color: #ffffff;
}

.main-nav a.active::after,
.site-header nav a.active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 20px;

    height: 3px;

    border-radius: 10px;

    background: var(--gold);
}


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

.hero {

    position: relative;

    min-height: 570px;

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #171515 0%,
            #3b2e27 48%,
            #1d1a19 100%
        );
}

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at 18% 25%,
            rgba(182, 126, 84, .28),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 82% 45%,
            rgba(140, 125, 105, .20),
            transparent 38%
        );
}

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .25),
            rgba(0, 0, 0, .58)
        );
}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, .15);

    z-index: 1;
}

.hero-inner {

    position: relative;

    z-index: 2;

    width: min(1080px, 94%);

    margin: auto;

    padding-top: 140px;

    padding-bottom: 55px;
}


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

.hero-heading {

    text-align: center;
}

.hero-heading h1 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(43px, 5vw, 58px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.025em;
}

.hero-heading span {

    display: block;

    width: 80px;

    height: 4px;

    margin: 30px auto 15px;

    background: var(--gold);

    border-radius: 5px;
}

.hero-description {

    margin: 0 0 30px;

    text-align: center;

    color: #e0e0e0;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   STATISTICS
   SINTA 1 → SINTA 6 → ISSN & GARUDA
========================================================= */

.stats {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 9px;

    align-items: stretch;

    justify-content: center;
}


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

.stat {

    min-width: 0;

    height: 230px;

    padding:
        19px 7px 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    color: #ffffff;

    border:
        2px solid rgba(255, 255, 255, .85);

    border-radius: 16px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .25);

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.stat:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 20px 35px rgba(0, 0, 0, .30);
}

.stat b {

    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;

    line-height: 1;
}

.stat strong {

    margin-top: 4px;

    font-size: 43px;

    line-height: 1;

    font-weight: 900;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, .10);
}

.stat span {

    margin-top: 12px;

    text-align: center;

    font-size: 10px;

    line-height: 1.25;

    font-weight: 900;

    white-space: nowrap;
}

.stat small {

    margin-top: 11px;

    padding:
        5px 8px;

    border:
        1px solid rgba(255, 255, 255, .70);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .14);

    font-size: 7px;

    font-weight: 900;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   SINTA COLORS
========================================================= */

.sinta-1 {

    background:
        linear-gradient(
            145deg,
            #ffd83d,
            #f3a91d
        );
}

.sinta-2 {

    background:
        linear-gradient(
            145deg,
            #eeeeee,
            #a9a9a9
        );
}

.sinta-3 {

    background:
        linear-gradient(
            145deg,
            #d86d2b,
            #99491c
        );
}

.sinta-4 {

    background:
        linear-gradient(
            145deg,
            #a85ac5,
            #7b3ba0
        );
}

.sinta-5 {

    background:
        linear-gradient(
            145deg,
            #f31d91,
            #c90b6d
        );
}

.sinta-6 {

    background:
        linear-gradient(
            145deg,
            #288fe9,
            #1267b9
        );
}

.stat-others {

    background:
        linear-gradient(
            145deg,
            #0bcf68,
            #06a956
        );
}


/* =========================================================
   CATALOG
========================================================= */

.catalog {

    padding:
        62px 0 90px;

    background:
        #fafbfc;
}

.catalog-inner {

    width: 100%;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    text-align: center;

    position: relative;
}

.section-heading h2 {

    display: inline-block;

    margin:
        0 14px;

    color: var(--purple);

    font-size: 40px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -.02em;
}

.section-heading > div {

    display: inline-block;

    width: 50px;

    height: 2px;

    vertical-align: middle;

    background:
        var(--gold);
}

.section-heading p {

    margin:
        15px 0 0;

    color: #687898;

    font-size: 14px;
}


/* =========================================================
   CATALOG TOOLS
========================================================= */

.catalog-tools {

    width: min(1000px, 90%);

    margin:
        30px auto 0;
}


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

.search {

    width: min(620px, 100%);

    height: 56px;

    margin: auto;

    padding:
        5px 5px 5px 18px;

    display: flex;

    align-items: center;

    background: #ffffff;

    border:
        1px solid #edf0f5;

    border-radius: 30px;

    box-shadow:
        0 12px 35px rgba(83, 85, 150, .11);
}

.search > span {

    flex:
        0 0 auto;

    color: #697ee8;

    font-size: 25px;

    line-height: 1;
}

.search input {

    min-width: 0;

    flex: 1;

    height: 100%;

    padding:
        0 14px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #56647d;

    font-size: 13px;
}

.search input::placeholder {

    color: #a0a8b7;
}

.search button {

    flex:
        0 0 auto;

    height: 46px;

    padding:
        0 24px;

    border: 0;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #6879e6,
            #7851a9
        );

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 17px rgba(102, 89, 204, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.search button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px rgba(102, 89, 204, .28);
}


/* =========================================================
   FILTERS
========================================================= */

.filters {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin:
        25px auto;
}

.filters a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding:
        7px 13px;

    border:
        1px solid #e0e3eb;

    border-radius: 20px;

    background: #ffffff;

    color: #70788d;

    font-size: 9px;

    font-weight: 800;

    transition:
        all .2s ease;
}

.filters a:hover {

    color: var(--purple);

    border-color:
        rgba(112, 97, 216, .35);

    transform:
        translateY(-1px);
}

.filters a.active {

    color: #ffffff;

    border-color:
        var(--purple);

    background:
        linear-gradient(
            135deg,
            #7061d8,
            #7650ae
        );

    box-shadow:
        0 7px 17px rgba(112, 97, 216, .18);
}


/* =========================================================
   RESULT BAR
========================================================= */

.result-bar {

    width: min(1100px, 90%);

    margin:
        0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #8a93a2;

    font-size: 11px;

    line-height: 1.6;
}

.result-bar strong {

    color: #626d83;

    font-weight: 800;
}


/* =========================================================
   JOURNAL GRID
========================================================= */

.journal-grid {

    width: min(1100px, 90%);

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


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

.journal-card {

    min-width: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border:
        1px solid #eceef3;

    border-radius: 18px;

    box-shadow:
        0 8px 28px rgba(45, 50, 70, .08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.journal-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 42px rgba(45, 50, 70, .14);
}


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

.journal-cover {

    height: 280px;

    margin:
        20px 20px 0;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #edf2f7,
            #e5ebf2
        );

    border-radius:
        2px;

    position: relative;
}

.journal-cover::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.45);
}

.journal-cover img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 15px;

    position: relative;

    z-index: 1;

    transition:
        transform .35s ease;
}

.journal-card:hover .journal-cover img {

    transform:
        scale(1.025);
}


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

.cover-placeholder {

    width: 155px;

    height: 220px;

    padding: 15px 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #294f82,
            #1c365e
        );

    box-shadow:
        0 14px 30px rgba(0,0,0,.20);

    position: relative;

    z-index: 1;
}

.cover-placeholder.sinta1 {

    background:
        linear-gradient(
            145deg,
            #d39b13,
            #9d7010
        );
}

.cover-placeholder.sinta2 {

    background:
        linear-gradient(
            145deg,
            #999999,
            #666666
        );
}

.cover-placeholder.sinta3 {

    background:
        linear-gradient(
            145deg,
            #d06a29,
            #91451c
        );
}

.cover-placeholder.sinta4 {

    background:
        linear-gradient(
            145deg,
            #8a55b4,
            #563278
        );
}

.cover-placeholder.sinta5 {

    background:
        linear-gradient(
            145deg,
            #e91d83,
            #a70759
        );
}

.cover-placeholder.sinta6 {

    background:
        linear-gradient(
            145deg,
            #2789e9,
            #1267ba
        );
}

.cover-placeholder.others {

    background:
        linear-gradient(
            145deg,
            #23866c,
            #145844
        );
}

.cover-placeholder span {

    max-width: 100%;

    font-size: 19px;

    line-height: 1.15;

    font-weight: 900;

    word-break: break-word;
}

.cover-placeholder small {

    margin-top: 12px;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: .04em;
}

.cover-placeholder em {

    margin-top: 27px;

    font-size: 8px;

    line-height: 1;

    font-style: normal;

    opacity: .55;
}


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

.journal-body {

    padding:
        22px 30px 28px;

    display: flex;

    flex-direction: column;

    flex: 1;
}


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

.card-top {

    min-height: 27px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}

.status-badge {

    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding:
        5px 9px;

    border-radius: 6px;

    background:
        #eeeafd;

    color:
        #6655c2;

    font-size: 8px;

    line-height: 1;

    font-weight: 900;

    white-space: nowrap;
}

.status-badge.sinta1 {

    background: #fff4c9;
    color: #a47900;
}

.status-badge.sinta2 {

    background: #eeeeee;
    color: #666666;
}

.status-badge.sinta3 {

    background: #f8e5d8;
    color: #a34d1c;
}

.status-badge.sinta4 {

    background: #eee4f5;
    color: #75449a;
}

.status-badge.sinta5 {

    background: #fde3ef;
    color: #c20b68;
}

.status-badge.sinta6 {

    background: #e2f0fc;
    color: #1267b9;
}

.status-badge.others {

    background:
        #e5f5ed;

    color:
        #198754;
}

.number {

    flex: 0 0 auto;

    color: #d6d8df;

    font-size: 21px;

    line-height: 1;

    font-weight: 900;
}


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

.journal-body h3 {

    min-height: 68px;

    margin:
        17px 0 15px;

    color:
        #34445b;

    font-size: 17px;

    line-height: 1.5;

    font-weight: 800;
}


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

.meta {

    min-height: 38px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    color:
        #8994a5;

    font-size: 10px;

    line-height: 1.5;
}

.meta span {

    display: inline-flex;

    align-items: center;

    gap: 4px;
}

.meta i {

    color:
        #c2c6ce;

    font-style: normal;
}


/* =========================================================
   DIVIDER
========================================================= */

.divider {

    width: 100%;

    height: 1px;

    margin:
        15px 0 21px;

    background:
        #e8e9ed;
}


/* =========================================================
   ACTIONS
========================================================= */

.actions {

    display: flex;

    align-items: stretch;

    gap: 10px;

    margin-top: auto;
}

.actions a,
.actions button {

    flex: 1;

    min-width: 0;

    min-height: 41px;

    padding:
        8px 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    border: 0;

    border-radius: 9px;

    color: #ffffff;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.actions a:hover,
.actions button:hover {

    transform:
        translateY(-2px);
}

.view {

    background:
        linear-gradient(
            135deg,
            #6679e5,
            #744dab
        );

    box-shadow:
        0 8px 18px rgba(102, 89, 204, .20);
}

.description {

    background:
        linear-gradient(
            135deg,
            #f17ad2,
            #f34e7c
        );

    box-shadow:
        0 8px 18px rgba(239, 88, 142, .18);
}

.actions .disabled {

    opacity: .45;

    cursor:
        not-allowed;

    pointer-events:
        none;
}


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

.empty-state {

    width: min(1100px, 90%);

    min-height: 300px;

    margin: 20px auto 0;

    padding: 55px 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #ffffff;

    border:
        1px solid #eceef3;

    border-radius: 18px;

    box-shadow:
        var(--shadow-sm);
}

.empty-icon {

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--purple-light);

    color:
        var(--purple);

    font-size: 25px;

    font-weight: 700;
}

.empty-state h3 {

    margin:
        18px 0 7px;

    color:
        #414b5c;

    font-size: 17px;
}

.empty-state p {

    margin:
        0 0 18px;

    color:
        #8a93a2;

    font-size: 11px;
}

.empty-state a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        0 17px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #6679e5,
            #744dab
        );

    color:
        #ffffff;

    font-size: 10px;

    font-weight: 800;
}


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

.pagination {

    width: min(1100px, 90%);

    margin:
        32px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 6px;
}

.pagination a,
.pagination span {

    min-width: 35px;

    height: 35px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0 10px;

    border:
        1px solid #e1e4ec;

    border-radius: 8px;

    background: #ffffff;

    color: #70788d;

    font-size: 10px;

    font-weight: 800;
}

.pagination a {

    transition:
        all .2s ease;
}

.pagination a:hover {

    color:
        var(--purple);

    border-color:
        rgba(112, 97, 216, .35);

    transform:
        translateY(-1px);
}

.pagination a.current {

    color: #ffffff;

    border-color:
        var(--purple);

    background:
        linear-gradient(
            135deg,
            #7061d8,
            #7650ae
        );

    box-shadow:
        0 7px 15px rgba(112, 97, 216, .18);
}

.pagination .prev,
.pagination .next {

    padding:
        0 13px;
}


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

.about {

    padding:
        75px 0;

    background:
        #f1f3f8;
}

.about-inner {

    width: min(1100px, 90%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    align-items: center;
}

.eyebrow {

    display: inline-block;

    color:
        var(--purple);

    font-size: 9px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: .16em;
}

.about h2,
.contact h2 {

    margin:
        11px 0 0;

    color:
        #3e4050;

    font-size:
        clamp(28px, 3vw, 35px);

    line-height: 1.25;

    font-weight: 800;
}

.about p,
.contact p {

    margin: 0;

    color:
        #777f8f;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   CONTACT
========================================================= */

.contact {

    padding:
        70px 0;

    background:
        #ffffff;
}

.contact-inner {

    width: min(1100px, 90%);

    margin: auto;

    text-align: center;
}

.contact h2 {

    margin-top:
        10px;
}


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

footer {

    padding:
        38px 0 18px;

    background:
        #29283a;

    color:
        #c7c7d1;
}

.footer-inner {

    width: min(1100px, 90%);

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.footer-brand {

    color:
        #ffffff;

    font-size: 13px;

    font-weight: 800;
}

.copyright {

    color:
        #8f91a0;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   V2 CATALOG SUMMARY
========================================================= */

.catalog-summary {

    width: min(1100px, 90%);

    margin:
        0 auto 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color:
        #8a93a2;

    font-size: 11px;
}

.catalog-summary strong {

    color:
        #5f68a0;

    font-size: 13px;
}

.catalog-summary select {

    min-height: 34px;

    padding:
        0 13px;

    border:
        1px solid #e2e4ec;

    border-radius: 20px;

    outline: 0;

    background:
        #ffffff;

    color:
        #70788d;

    font-size: 10px;
}


/* =========================================================
   JOURNAL DETAIL PAGE
========================================================= */

.detail-page {

    width: min(1100px, 90%);

    margin: auto;

    padding:
        48px 0 80px;
}


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

.breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom:
        28px;

    color:
        #9199a7;

    font-size:
        10px;
}

.breadcrumb a {

    color:
        var(--purple);

    font-weight:
        800;
}


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

.detail-hero {

    display: grid;

    grid-template-columns:
        310px 1fr;

    gap: 55px;

    align-items: center;

    background:
        #ffffff;
}


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

.detail-cover {

    min-height:
        430px;

    overflow:
        hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        #eef3f8;

    border-radius:
        16px;

    box-shadow:
        var(--shadow-sm);
}

.detail-cover img {

    width: 100%;

    height: 100%;

    min-height:
        430px;

    padding:
        25px;

    object-fit:
        contain;
}

.detail-placeholder {

    width:
        190px;

    height:
        280px;

    padding:
        20px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #294f82,
            #1c365e
        );

    box-shadow:
        0 18px 35px rgba(0,0,0,.20);
}

.detail-placeholder.sinta1 {

    background:
        linear-gradient(
            145deg,
            #d39b13,
            #9d7010
        );
}

.detail-placeholder.sinta2 {

    background:
        linear-gradient(
            145deg,
            #999999,
            #666666
        );
}

.detail-placeholder.sinta3 {

    background:
        linear-gradient(
            145deg,
            #d06a29,
            #91451c
        );
}

.detail-placeholder.sinta4 {

    background:
        linear-gradient(
            145deg,
            #8a55b4,
            #563278
        );
}

.detail-placeholder.sinta5 {

    background:
        linear-gradient(
            145deg,
            #e91d83,
            #a70759
        );
}

.detail-placeholder.sinta6 {

    background:
        linear-gradient(
            145deg,
            #2789e9,
            #1267ba
        );
}

.detail-placeholder.others {

    background:
        linear-gradient(
            145deg,
            #23866c,
            #145844
        );
}

.detail-placeholder strong {

    font-size:
        25px;

    line-height:
        1.15;
}

.detail-placeholder small {

    margin-top:
        12px;

    font-size:
        9px;

    font-weight:
        800;
}

.detail-placeholder em {

    margin-top:
        35px;

    font-size:
        9px;

    font-style:
        normal;

    opacity:
        .55;
}


/* =========================================================
   DETAIL MAIN
========================================================= */

.detail-status {

    display: inline-flex;

    align-items: center;

    min-height: 29px;

    padding:
        7px 13px;

    border-radius:
        20px;

    background:
        #eeeafd;

    color:
        #6655c2;

    font-size:
        9px;

    font-weight:
        900;
}

.detail-main h1 {

    margin:
        17px 0;

    color:
        #34445b;

    font-size:
        38px;

    line-height:
        1.25;

    font-weight:
        800;
}

.detail-lead {

    max-width:
        650px;

    margin:
        0;

    color:
        #70798a;

    font-size:
        13px;

    line-height:
        1.9;
}


/* =========================================================
   DETAIL BUTTONS
========================================================= */

.detail-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;

    margin-top:
        27px;
}

.primary-btn,
.secondary-btn {

    min-height:
        44px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.primary-btn {

    background:
        linear-gradient(
            135deg,
            #6679e5,
            #744dab
        );

    color:
        #ffffff;

    box-shadow:
        0 8px 18px rgba(102, 89, 204, .20);
}

.secondary-btn {

    background:
        #f1f2f7;

    color:
        #697386;
}

.primary-btn:hover,
.secondary-btn:hover {

    transform:
        translateY(-2px);
}

.primary-btn.disabled {

    opacity:
        .55;

    pointer-events:
        none;
}


/* =========================================================
   DETAIL INFO
========================================================= */

.detail-info {

    display:
        grid;

    grid-template-columns:
        1.4fr .8fr;

    gap:
        24px;

    margin-top:
        55px;
}

.info-panel,
.scope-panel,
.index-panel {

    padding:
        30px;

    background:
        #ffffff;

    border:
        1px solid #eeeeee;

    border-radius:
        16px;

    box-shadow:
        var(--shadow-sm);
}

.detail-info h2,
.index-panel h2 {

    margin:
        0 0 22px;

    color:
        #414b5c;

    font-size:
        20px;
}


/* =========================================================
   INFO GRID
========================================================= */

.info-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}

.info-grid div {

    padding:
        12px 13px;

    background:
        #f7f8fb;

    border-radius:
        9px;
}

.info-grid small {

    display:
        block;

    color:
        #8c95a3;

    font-size:
        9px;
}

.info-grid strong {

    display:
        block;

    margin-top:
        3px;

    color:
        #3f4858;

    font-size:
        11px;

    line-height:
        1.5;

    word-break:
        break-word;
}


/* =========================================================
   SCOPE
========================================================= */

.scope-panel p {

    margin:
        0;

    color:
        #70798a;

    font-size:
        12px;

    line-height:
        1.9;
}


/* =========================================================
   INDEXING
========================================================= */

.index-panel {

    margin-top:
        24px;
}

.index-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;
}

.index-links a {

    padding:
        11px 17px;

    border-radius:
        9px;

    background:
        #eeeafd;

    color:
        #6655c2;

    font-size:
        10px;

    font-weight:
        800;

    transition:
        transform .2s ease;
}

.index-links a:hover {

    transform:
        translateY(-2px);
}

.not-set {

    color:
        #8a93a2;

    font-size:
        11px;
}


/* =========================================================
   MODAL
========================================================= */

.modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        200;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;
}

.modal.show {

    display:
        flex;
}

.modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(20,20,30,.72);

    backdrop-filter:
        blur(4px);
}

.modal-card {

    position:
        relative;

    z-index:
        2;

    width:
        min(900px, 96vw);

    max-height:
        90vh;

    overflow:
        auto;

    display:
        grid;

    grid-template-columns:
        280px 1fr;

    background:
        #ffffff;

    border-radius:
        20px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30);
}

.modal-close {

    position:
        absolute;

    right:
        14px;

    top:
        10px;

    z-index:
        3;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        #555555;

    font-size:
        25px;

    cursor:
        pointer;
}

.modal-cover {

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eef3f8;
}

.modal-cover .cover-placeholder {

    width:
        190px;

    height:
        275px;
}

.modal-content {

    padding:
        40px;
}

.modal-status {

    display:
        inline-block;

    padding:
        6px 12px;

    border-radius:
        20px;

    background:
        #eeeafd;

    color:
        #6655c2;

    font-size:
        9px;

    font-weight:
        900;
}

.modal-content h2 {

    margin:
        14px 0;

    color:
        #34445b;

    font-size:
        27px;

    line-height:
        1.35;
}

.modal-description {

    color:
        #70798a;

    font-size:
        12px;

    line-height:
        1.8;
}

.detail-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin:
        25px 0;
}

.detail-grid div {

    padding:
        11px 13px;

    background:
        #f7f8fb;

    border-radius:
        9px;
}

.detail-grid small {

    display:
        block;

    color:
        #8b94a4;

    font-size:
        9px;
}

.detail-grid strong {

    display:
        block;

    margin-top:
        3px;

    color:
        #3f4858;

    font-size:
        11px;
}

.focus-box {

    padding:
        12px 15px;

    border-left:
        3px solid var(--gold);

    background:
        #fffaf0;
}

.focus-box strong {

    font-size:
        11px;
}

.focus-box p {

    margin:
        5px 0 0;

    color:
        #70798a;

    font-size:
        11px;

    line-height:
        1.7;
}

.modal-visit {

    display:
        inline-flex;

    margin-top:
        22px;

    padding:
        12px 20px;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #6679e5,
            #744dab
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        800;
}

.modal-visit.disabled {

    opacity:
        .55;

    pointer-events:
        none;
}


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

@media (max-width: 1100px) {

    .header-inner {

        width:
            92%;
    }

    .hero-inner {

        width:
            94%;
    }

    .stats {

        grid-template-columns:
            repeat(4, minmax(105px, 1fr));

        max-width:
            570px;

        margin:
            auto;
    }

    .journal-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 800px) {

    .stats {

        grid-template-columns:
            repeat(3, minmax(100px, 1fr));

        max-width:
            470px;
    }

    .stat {

        height:
            215px;
    }

    .detail-hero {

        grid-template-columns:
            270px 1fr;

        gap:
            35px;
    }

    .detail-info {

        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 650px) {

    html {

        scroll-padding-top:
            70px;
    }


    /* HEADER */

    .header-inner {

        min-height:
            70px;

        width:
            92%;
    }

    .brand-icon {

        width:
            38px;

        height:
            38px;

        border-radius:
            11px;

        font-size:
            17px;
    }

    .brand-text strong {

        font-size:
            15px;
    }

    .brand-text small {

        font-size:
            8px;
    }

    .main-nav,
    .site-header nav {

        gap:
            14px;
    }

    .main-nav a,
    .site-header nav a {

        padding:
            28px 0;

        font-size:
            8px;
    }

    .main-nav a.active::after,
    .site-header nav a.active::after {

        bottom:
            17px;

        height:
            2px;
    }


    /* HERO */

    .hero {

        min-height:
            auto;
    }

    .hero-inner {

        padding:
            110px 0 48px;
    }

    .hero-heading h1 {

        font-size:
            42px;
    }

    .hero-heading span {

        width:
            70px;

        margin:
            25px auto 13px;
    }

    .hero-description {

        margin-bottom:
            24px;

        font-size:
            11px;
    }


    /* STATS */

    .stats {

        width:
            calc(100% + 20px);

        margin-left:
            -10px;

        display:
            flex;

        overflow-x:
            auto;

        justify-content:
            flex-start;

        gap:
            8px;

        padding:
            5px 10px 15px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            thin;
    }

    .stat {

        flex:
            0 0 103px;

        width:
            103px;

        min-width:
            103px;

        height:
            205px;

        padding-top:
            16px;

        scroll-snap-align:
            start;
    }

    .stat b {

        height:
            35px;

        font-size:
            26px;
    }

    .stat strong {

        font-size:
            39px;
    }

    .stat span {

        margin-top:
            9px;

        font-size:
            9px;
    }

    .stat small {

        margin-top:
            9px;

        padding:
            5px 7px;

        font-size:
            6.5px;
    }


    /* CATALOG */

    .catalog {

        padding:
            48px 0 65px;
    }

    .section-heading h2 {

        font-size:
            32px;

        margin:
            0 10px;
    }

    .section-heading > div {

        width:
            30px;
    }

    .section-heading p {

        margin-top:
            12px;

        font-size:
            11px;
    }


    /* SEARCH */

    .catalog-tools {

        width:
            92%;

        margin-top:
            24px;
    }

    .search {

        height:
            52px;

        padding-left:
            15px;
    }

    .search > span {

        font-size:
            22px;
    }

    .search input {

        padding:
            0 9px;

        font-size:
            11px;
    }

    .search button {

        height:
            42px;

        padding:
            0 15px;

        font-size:
            9px;
    }


    /* FILTER */

    .filters {

        margin:
            20px 0;
    }

    .filters a {

        min-height:
            30px;

        padding:
            6px 10px;

        font-size:
            8px;
    }


    /* RESULT */

    .result-bar {

        width:
            92%;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            4px;

        margin-bottom:
            12px;

        font-size:
            9px;
    }


    /* JOURNAL GRID */

    .journal-grid {

        width:
            92%;

        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .journal-cover {

        height:
            270px;

        margin:
            15px 15px 0;
    }

    .cover-placeholder {

        width:
            155px;

        height:
            220px;
    }

    .journal-body {

        padding:
            21px 21px 24px;
    }

    .journal-body h3 {

        min-height:
            auto;

        margin:
            15px 0;

        font-size:
            16px;
    }

    .meta {

        min-height:
            auto;

        font-size:
            9px;
    }

    .divider {

        margin:
            15px 0 18px;
    }

    .actions {

        gap:
            8px;
    }

    .actions a {

        min-height:
            40px;

        font-size:
            9px;
    }


    /* EMPTY */

    .empty-state {

        width:
            92%;

        min-height:
            260px;
    }


    /* PAGINATION */

    .pagination {

        width:
            92%;

        margin-top:
            25px;
    }

    .pagination a,
    .pagination span {

        min-width:
            32px;

        height:
            32px;

        font-size:
            9px;
    }


    /* ABOUT */

    .about {

        padding:
            55px 0;
    }

    .about-inner {

        width:
            92%;

        grid-template-columns:
            1fr;

        gap:
            22px;
    }

    .about h2,
    .contact h2 {

        font-size:
            27px;
    }

    .about p,
    .contact p {

        font-size:
            11px;

        line-height:
            1.8;
    }


    /* CONTACT */

    .contact {

        padding:
            55px 0;
    }

    .contact-inner {

        width:
            92%;
    }


    /* FOOTER */

    footer {

        padding:
            30px 0 15px;
    }

    .footer-inner {

        width:
            92%;

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;

        gap:
            10px;
    }

    .copyright {

        font-size:
            9px;
    }


    /* DETAIL */

    .detail-page {

        width:
            92%;

        padding:
            30px 0 55px;
    }

    .detail-hero {

        grid-template-columns:
            1fr;

        gap:
            28px;
    }

    .detail-cover {

        min-height:
            330px;
    }

    .detail-cover img {

        min-height:
            330px;
    }

    .detail-main h1 {

        font-size:
            27px;
    }

    .detail-lead {

        font-size:
            11px;
    }

    .detail-buttons {

        gap:
            8px;
    }

    .primary-btn,
    .secondary-btn {

        flex:
            1;

        min-width:
            140px;

        font-size:
            9px;
    }

    .detail-info {

        margin-top:
            35px;
    }

    .info-panel,
    .scope-panel,
    .index-panel {

        padding:
            22px;
    }

    .info-grid {

        grid-template-columns:
            1fr;
    }


    /* MODAL */

    .modal {

        padding:
            12px;
    }

    .modal-card {

        width:
            96vw;

        max-height:
            94vh;

        grid-template-columns:
            1fr;
    }

    .modal-cover {

        min-height:
            260px;
    }

    .modal-cover .cover-placeholder {

        width:
            150px;

        height:
            215px;
    }

    .modal-content {

        padding:
            25px;
    }

    .modal-content h2 {

        font-size:
            22px;
    }

    .detail-grid {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .brand-text small {

        display:
            none;
    }

    .main-nav,
    .site-header nav {

        gap:
            9px;
    }

    .main-nav a,
    .site-header nav a {

        font-size:
            7px;
    }

    .hero-heading h1 {

        font-size:
            37px;
    }

    .stat {

        flex-basis:
            96px;

        width:
            96px;

        min-width:
            96px;
    }

    .journal-body {

        padding:
            19px;
    }

    .actions {

        flex-direction:
            column;
    }

}