@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
:root {
--primary:   #0A5C9E;
--secondary: #00B4D8;
--accent:    #F4A300;
--bg-light:  #F0F6FF;
--bg-white:  #FFFFFF;
--text-dark: #0D1B2A;
--text-mid:  #3A5068;
--text-light:#6B8AA8;
--s1:#C0392B; --s2:#D35400; --s3:#F39C12;
--s4:#27AE60; --s5:#1ABC9C; --s6:#2980B9;
--scopus:#6B2D8B; --doaj:#E76F51;
--intl:#0B4F6C; --scholar:#1A73E8;
--garuda:#8B1A1A; --dimensions:#00796B;
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family:"Google Sans", sans-serif; background:var(--bg-light); color:var(--text-dark); overflow-x:hidden; }
h1,h2,h3,h4 { font-family:"Google Sans", sans-serif; }

/* ── NAVBAR ── */
.navbar { background:#fff; border-bottom:2px solid rgba(0,180,216,.12); box-shadow:0 2px 20px rgba(10,92,158,.07); padding:12px 0; }
.navbar-brand-wrap { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo { width:42px; height:42px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--primary); display:flex; align-items:center; justify-content:center; }
.brand-logo img { width:100%; height:100%; object-fit:contain; }
.brand-logo-fallback { font-family:"Google Sans", sans-serif; font-size:1.4rem; font-weight:900; color:#fff; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-title { font-family:"Google Sans", sans-serif; font-size:1.1rem; font-weight:900; color:var(--primary); letter-spacing:2px; text-transform:uppercase; }
.brand-sub { font-size:.62rem; color:var(--text-light); font-weight:500; letter-spacing:.6px; text-transform:uppercase; }
.nav-link { font-weight:600; color:var(--text-mid)!important; transition:color .2s; font-size:.92rem; }
.nav-link:hover { color:var(--primary)!important; }
.btn-nav { background:var(--primary); color:#fff!important; border-radius:30px; padding:7px 20px; font-weight:600; font-size:.88rem; transition:background .2s,transform .15s; }
.btn-nav:hover { background:var(--secondary); transform:translateY(-1px); }

.navbar .brand-image{
    height: 65px;
}
/* ── HERO — CARD SHOWCASE ── */
.hero{
    background: linear-gradient(135deg, #2A6BB1 0%, #2169C5 50%, #075FA7 100%);
    background-size: auto;
    background-size: 400% 400%;
    animation: gradShift 8s ease infinite;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}
@keyframes gradShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* dot-grid texture overlay */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 28px 28px;
    pointer-events: none;
}

/* large glow blob */
.hero::after {
    content: '';
    position: absolute; top: -200px; left: -200px;
    width: 700px; height: 700px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,180,216,.22) 0%, transparent 65%);
    pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; width: 100%; padding: 80px 0 60px; }

/* — left text — */
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--secondary);
    background: rgba(0,180,216,.12); border: 1px solid rgba(0,180,216,.3);
    padding: 5px 14px; border-radius: 30px; margin-bottom: 1.2rem;
}
.hero-eyebrow span { width:6px; height:6px; border-radius:50%; background:var(--secondary); display:inline-block; animation: blink 1.6s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero-title {
    font-size: clamp(2.2rem, 4.8vw, 4rem);
    font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 1.2rem;
}
.hero-title em {
    font-style: normal;
    background: linear-gradient(90deg, #F4A300, #FFD166);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.75; max-width: 430px; margin-bottom: 2rem; }

/* CTA buttons */
.btn-hero-primary {
    background: var(--accent); color: #0D1B2A; border: none;
    border-radius: 50px; padding: 13px 30px; font-weight: 800; font-size: .95rem;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 8px 28px rgba(244,163,0,.4);
    transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-hero-primary:hover { background: #FFD166; color: #0D1B2A; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(244,163,0,.5); }
.btn-hero-outline {
    border: 2px solid rgba(255,255,255,.35); color: #fff;
    border-radius: 50px; padding: 11px 26px; font-weight: 700; font-size: .95rem;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.07); backdrop-filter: blur(6px);
    transition: all .2s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); color: #fff; }

/* tag cloud */
.hero-tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.8rem; }
.hero-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 13px; border-radius: 40px; font-size: .75rem;
    font-weight: 600; border: 1.5px solid; background: rgba(255,255,255,.07);
    backdrop-filter: blur(4px);
    animation: floatIn .5s ease both;
}
@keyframes floatIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.htag-s1  { border-color:rgba(192,57,43,.6);   color:#FF8A7A;  animation-delay:.05s }
.htag-s2  { border-color:rgba(211,84,0,.6);    color:#FFB07A;  animation-delay:.1s }
.htag-s3  { border-color:rgba(243,156,18,.6);  color:#FFD166;  animation-delay:.15s }
.htag-sc  { border-color:rgba(107,45,139,.6);  color:#C77DFF;  animation-delay:.2s }
.htag-dj  { border-color:rgba(231,111,81,.6);  color:#FFB299;  animation-delay:.25s }
.htag-in  { border-color:rgba(0,180,216,.6);   color:#67E8F9;  animation-delay:.3s }
.htag-gar { border-color:rgba(200,100,100,.6); color:#FFAAAA;  animation-delay:.35s }
.htag-sch { border-color:rgba(26,115,232,.6);  color:#93C5FD;  animation-delay:.4s }

/* — stat row — */
.hero-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.12); }
.hstat { text-align: center; }
.hstat-num { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 900; color: var(--accent); line-height: 1; }
.hstat-lbl { font-size: .73rem; color: rgba(255,255,255,.55); margin-top: 3px; font-weight: 500; }
.hstat-divider { width: 1px; background: rgba(255,255,255,.15); align-self: stretch; }

/* — showcase cards column — */
.hero-cards-col {
position: relative;
height: 520px;
display: flex; align-items: center; justify-content: center;
}

/* floating mini journal cards */
.hcard {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.2);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
}
.hcard:hover { box-shadow: 0 28px 80px rgba(0,0,0,.45); z-index: 10 !important; }

/* card A — big center */
.hcard-a {
    width: 175px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
    z-index: 4;
    animation: floatA 5s ease-in-out infinite;
}
.hcard-a:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.06) !important; }
@keyframes floatA { 0%,100%{transform:translate(-50%,-50%) rotate(-2deg) translateY(0)} 50%{transform:translate(-50%,-50%) rotate(-2deg) translateY(-10px)} }

/* card B — left, slightly behind */
.hcard-b {
    width: 148px;
    left: 4%; top: 50%;
    transform: translateY(-50%) rotate(-7deg);
    z-index: 3;
    animation: floatB 6s ease-in-out infinite;
}
.hcard-b:hover { transform: translateY(-50%) rotate(0deg) scale(1.06) !important; }
@keyframes floatB { 0%,100%{transform:translateY(-50%) rotate(-7deg) translateY(0)} 50%{transform:translateY(-50%) rotate(-7deg) translateY(-8px)} }

/* card C — right */
.hcard-c {
    width: 148px;
    right: 4%; top: 50%;
    transform: translateY(-50%) rotate(6deg);
    z-index: 3;
    animation: floatC 7s ease-in-out infinite;
}
.hcard-c:hover { transform: translateY(-50%) rotate(0deg) scale(1.06) !important; }
@keyframes floatC { 0%,100%{transform:translateY(-50%) rotate(6deg) translateY(0)} 50%{transform:translateY(-50%) rotate(6deg) translateY(-12px)} }

/* card D — top right small */
.hcard-d {
    width: 130px;
    right: 10%; top: 6%;
    transform: rotate(10deg);
    z-index: 2;
    animation: floatD 8s ease-in-out infinite;
}
@keyframes floatD { 0%,100%{transform:rotate(10deg) translateY(0)} 50%{transform:rotate(10deg) translateY(-6px)} }

/* card E — bottom left small */
.hcard-e {
    width: 125px;
    left: 8%; bottom: 6%;
    transform: rotate(-11deg);
    z-index: 2;
    animation: floatE 9s ease-in-out infinite;
}
@keyframes floatE { 0%,100%{transform:rotate(-11deg) translateY(0)} 50%{transform:rotate(-11deg) translateY(-8px)} }

.hcard-cover { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #daeaf8; }
.hcard-cover-ph { width: 100%; aspect-ratio: 3/4; background: linear-gradient(145deg, #daeaf8, #aacfee); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.hcard-cover-ph i { font-size: 1.8rem; color: rgba(10,92,158,.3); }
.hcard-cover-ph span { font-family: 'Playfair Display', serif; font-size: .85rem; font-weight: 900; color: var(--primary); text-align: center; padding: 0 6px; line-height: 1.2; }
.hcard-foot { padding: 8px 10px; }
.hcard-abbr { font-size: .6rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--secondary); }
.hcard-name { font-family: 'Playfair Display', serif; font-size: .72rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; margin: 1px 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcard-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.hcard-tag { font-size: .58rem; font-weight: 700; padding: 2px 6px; border-radius: 20px; border: 1.5px solid; }

/* badge "LIVE" on center card */
.hcard-badge {
    position: absolute; top: 8px; right: 8px;
    background: var(--accent); color: #fff;
    font-size: .6rem; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
    box-shadow: 0 2px 8px rgba(244,163,0,.5);
}

/* glow rings behind center card */
.hcard-glow {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
}
.hcard-glow-1 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(0,180,216,.18) 0%, transparent 70%); z-index: 1; }
.hcard-glow-2 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(10,92,158,.12) 0%, transparent 70%); z-index: 0; }

/* ── SECTIONS ── */
.section-label { display:inline-block; background:rgba(10,92,158,.08); color:var(--primary); font-size:.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 14px; border-radius:30px; margin-bottom:.6rem; }
.section-title { font-size:clamp(1.5rem,3vw,2.2rem); color:var(--text-dark); font-weight: 600;}
.section-sub   { color:var(--text-light); font-size:.95rem; max-width:520px; }

/* ── SEARCH + FILTER ── */
.search-bar { background:#fff; border-radius:50px; overflow:hidden; box-shadow:0 4px 24px rgba(10,92,158,.1); max-width:600px; margin:0 auto 1.6rem; border:2px solid rgba(10,92,158,.08); display:flex; }
.search-bar input { border:none; outline:none; padding:13px 22px; font-size:.95rem; color:var(--text-dark); flex:1; background:transparent; }
.search-bar .search-btn { background:var(--primary); border:none; padding:12px 26px; font-weight:700; font-size:.88rem; color:#fff; transition:background .2s; white-space:nowrap; cursor:pointer; }
.search-bar .search-btn:hover { background:var(--secondary); }
.search-bar .clear-btn { background:transparent; border:none; padding:12px 14px; color:var(--text-light); cursor:pointer; display:none; }
.search-bar .clear-btn:hover { color:var(--s1); }

.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; }
.filter-btn { border:2px solid #dce8f5; background:#fff; color:var(--text-mid); border-radius:30px; padding:5px 16px; font-size:.82rem; font-weight:500; cursor:pointer; transition:all .2s; }
.filter-btn:hover, .filter-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.result-count { font-size:.82rem; color:var(--text-light); font-weight:500; }
.result-count strong { color:var(--primary); }

/* ── JOURNAL CARD ── */
.journal-card { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 3px 18px rgba(10,92,158,.07); transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; height:100%; border:1px solid rgba(10,92,158,.08); }
.journal-card:hover { transform:translateY(-5px); box-shadow:0 14px 38px rgba(10,92,158,.15); }
.card-cover-wrap { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; background:#e4eef8; flex-shrink:0; }
.card-cover-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.journal-card:hover .card-cover-wrap img { transform:scale(1.04); }
.cover-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(145deg,#daeaf8,#b8d9f0); }
.cover-placeholder .abbr-text { font-family:"Google Sans", sans-serif; font-size:1.5rem; font-weight:900; color:var(--primary); text-align:center; padding:0 10px; line-height:1.2; }
.cover-placeholder i { font-size:2.2rem; color:rgba(10,92,158,.25); }
.card-body { padding:1.1rem 1.15rem; flex:1; display:flex; flex-direction:column; }
.card-abbr { font-size:.7rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--secondary); margin-bottom:.25rem; }
.card-title { font-family:"Google Sans", sans-serif; font-size:.95rem; font-weight:700; color:var(--text-dark); line-height:1.4; margin-bottom:.55rem; }
.card-desc { font-size:.8rem; color:var(--text-light); line-height:1.6; flex:1; margin-bottom:.9rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── ACCREDITATION TAGS ── */
.tags-wrap { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.9rem; }
.acc-tag { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:20px; font-size:.67rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; border:1.5px solid; text-decoration:none; transition:opacity .15s,transform .15s; }
.acc-tag:hover { opacity:.8; transform:scale(1.05); }
.acc-tag.no-link { cursor:default; pointer-events:none; }
.tag-S1          { background:rgba(192,57,43,.1);  color:var(--s1);      border-color:var(--s1); }
.tag-S2          { background:rgba(211,84,0,.1);   color:var(--s2);      border-color:var(--s2); }
.tag-S3          { background:rgba(243,156,18,.1); color:var(--s3);      border-color:var(--s3); }
.tag-S4          { background:rgba(39,174,96,.1);  color:var(--s4);      border-color:var(--s4); }
.tag-S5          { background:rgba(26,188,156,.1); color:var(--s5);      border-color:var(--s5); }
.tag-S6          { background:rgba(41,128,185,.1); color:var(--s6);      border-color:var(--s6); }
.tag-Scopus      { background:rgba(107,45,139,.1); color:var(--scopus);  border-color:var(--scopus); }
.tag-DOAJ        { background:rgba(231,111,81,.1); color:var(--doaj);    border-color:var(--doaj); }
.tag-International{ background:rgba(11,79,108,.1); color:var(--intl);    border-color:var(--intl); }
.tag-Scholar-Google{ background:rgba(26,115,232,.1);color:var(--scholar);border-color:var(--scholar); }
.tag-Garuda      { background:rgba(139,26,26,.1);  color:var(--garuda);  border-color:var(--garuda); }
.tag-Dimensions  { background:rgba(0,121,107,.1);  color:var(--dimensions);border-color:var(--dimensions); }

.btn-visit { display:block; width:100%; background:var(--primary); color:#fff; border:none; border-radius:50px; padding:9px; font-weight:600; font-size:.86rem; text-align:center; text-decoration:none; transition:background .2s,transform .15s; }
.btn-visit:hover { background:var(--secondary); color:#fff; transform:scale(1.015); }

.empty-state { text-align:center; padding:4rem 1rem; color:var(--text-light); }
.empty-state i { font-size:3.5rem; opacity:.25; margin-bottom:1rem; display:block; }

/* ── HIGHLIGHT BAND ── */
.highlight-band { background:linear-gradient(90deg, var(--primary) 0%, #1a7cc1 100%); padding:56px 0; }
.info-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:1.8rem; text-align:center; backdrop-filter:blur(10px); transition:background .2s; }
.info-card:hover { background:rgba(255,255,255,.18); }
.info-card i { font-size:2rem; color:var(--accent); margin-bottom:.85rem; display:block; }
.info-card h5 { color:#fff; font-size:1rem; }
.info-card p  { color:rgba(255,255,255,.7); font-size:.85rem; margin:0; line-height:1.5; }

/* ── LEGEND ── */
.legend-card { background:#fff; border-radius:14px; padding:1rem 1.2rem; border:1px solid rgba(10,92,158,.08); box-shadow:0 2px 12px rgba(10,92,158,.05); display:flex; align-items:center; gap:.9rem; }
.legend-icon { font-size:1.5rem; flex-shrink:0; width:36px; text-align:center; }
.legend-name { font-weight:700; font-size:.9rem; color:var(--text-dark); }
.legend-desc { font-size:.76rem; color:var(--text-light); margin-top:2px; }

/* ── FOOTER ── */
footer { background:var(--text-dark); color:rgba(255,255,255,.6); padding:48px 0 24px; }
footer .foot-title { font-size:1.2rem; color:#fff; font-weight:900; }
footer .foot-sub   { font-size:.78rem; color:rgba(255,255,255,.4); margin-top:2px; }
footer h6 { color:#fff; font-weight:600; margin-bottom:.85rem; font-size:.88rem; }
footer a  { color:rgba(255,255,255,.5); text-decoration:none; display:block; margin-bottom:.35rem; font-size:.84rem; transition:color .2s; }
footer a:hover { color:var(--accent); }
.footer-divider { border-color:rgba(255,255,255,.08); margin:1.4rem 0; }

/* ── SCROLL TOP ── */
#scrollTop { position:fixed; bottom:24px; right:24px; width:42px; height:42px; background:var(--primary); color:#fff; border:none; border-radius:50%; font-size:1.1rem; display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px rgba(10,92,158,.4); z-index:999; transition:background .2s; }
#scrollTop:hover { background:var(--secondary); }

.fade-up { animation:fadeUp .5s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.d1{animation-delay:.05s} .d2{animation-delay:.1s}  .d3{animation-delay:.15s}
.d4{animation-delay:.2s}  .d5{animation-delay:.25s} .d6{animation-delay:.3s}
.d7{animation-delay:.35s} .d8{animation-delay:.4s}  .d9{animation-delay:.45s}
.d10{animation-delay:.5s} .d11{animation-delay:.55s} .d12{animation-delay:.6s}