@charset "UTF-8";

/* =====================================================
   GOOGLE FONTS
===================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap");

/* =====================================================
   DESIGN SYSTEM
===================================================== */
:root {
  --primary: #0B3C5D;
  --secondary: #1F6AE1;
  --accent: #38BDF8;
  --bg: #F8FAFC;
  --card: #ffffff;
  --text: #1E293B;
  --muted: #64748B;
  --border: #E2E8F0;
  --radius: 14px;
  --shadow-soft: 0 8px 24px rgba(0,0,0,.06);
  --shadow-hover: 0 14px 34px rgba(0,0,0,.1);
}

/* =====================================================
   TOTAL DISABLE DEFAULT OJS HEADER
===================================================== */
.pkp_site_name,
.pkp_site_name_wrapper,
.pkp_site_name img,
.pkp_page_header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_structure_head {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* =====================================================
   BODY & MAIN CONTAINER
===================================================== */
body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
}

.pkp_structure_page {
  max-width: 1200px;
  margin: 24px auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* =====================================================
   MAIN CONTENT
===================================================== */
.pkp_structure_content {
  padding: 24px;
}

/* =====================================================
   PRIMARY NAVIGATION
===================================================== */
.pkp_navigation_primary {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.pkp_navigation_primary a {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  padding: 14px 18px;
}

.pkp_navigation_primary a:hover {
  background: #E0F2FE;
  color: var(--secondary);
}

/* =====================================================
   BREADCRUMB
===================================================== */
.cmp_breadcrumbs {
  font-size: 13px;
  color: var(--muted);
}

/* =====================================================
   SIDEBAR
===================================================== */
.pkp_structure_sidebar {
  background: #F1F5F9;
  padding: 20px;
  border-radius: 12px;
}

.pkp_block {
  background: var(--card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
}

.pkp_block h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

/* =====================================================
   HOMEPAGE
===================================================== */
.pkp_page_index .homepage_image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius) var(--radius) 0 0;
}

.pkp_page_index .additional_content {
  padding: 20px;
  background: #F1F5F9;
  border-radius: var(--radius);
  text-align: justify;
}

/* =====================================================
   ARTICLE CARD
===================================================== */
.obj_article_summary {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
  transition: all .3s ease;
}

.obj_article_summary:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.obj_article_summary .title a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.obj_article_summary .authors {
  font-size: 14px;
  color: var(--muted);
}

.obj_article_summary .cover {
  width: 70px;
  margin-right: 15px;
}

/* =====================================================
   DOI & GALLEY
===================================================== */
.doi_summary {
  background: #F1F5F9;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  margin-top: 6px;
}

.obj_galley_link {
  background: var(--secondary);
  color: #ffffff !important;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
}

/* =====================================================
   ISSUE & ARCHIVE
===================================================== */
.obj_issue_summary,
.page_issue_archive .issues_archive > li {
  padding: 20px;
}

/* =====================================================
   EDITORIAL BOARD
===================================================== */
.editorial-list li {
  background: var(--card);
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
  list-style: none;
}

/* =====================================================
   FOOTER
===================================================== */
.pkp_footer_content {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #ffffff;
  padding: 48px 24px;
  font-size: 14px;
}

.pkp_footer_content a {
  color: var(--accent);
}

.pkp_brand_footer {
  display: none !important;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 768px) {
  .pkp_structure_page {
    margin: 12px;
  }

  .pkp_structure_content {
    padding: 16px;
  }

  .pkp_structure_sidebar {
    margin-top: 20px;
  }
}
/* =====================================================
   HILANGKAN JUDUL HALAMAN (BANNER ABU-ABU)
   TANPA MERUSAK MENU & SEARCH
===================================================== */

/* Judul halaman / journal title abu-abu */
.pkp_page_title,
.pkp_page_header .page_title,
.pkp_page_header h1,
.pkp_page_header h2 {
  display: none !important;
}

/* Hilangkan container judul saja */
.pkp_page_header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Rapikan jarak menu ke header hero */
.pkp_navigation_primary {
  margin-top: 0 !important;
}
/* =====================================================
   MATIKAN FOOTER DEFAULT OJS / BOOTSTRAP
===================================================== */

.pkp_footer,
.pkp_footer_content,
.pkp_brand_footer {
  display: none !important;
}
/* =====================================================
   FORCE REMOVE BOOTSTRAP OJS DEFAULT FOOTER & HEADER BRAND
   (FINAL FIX – BOOTSTRAP THEME)
===================================================== */

/* Footer default OJS */
footer,
.pkp_footer,
.pkp_footer_wrapper,
.pkp_footer_content,
.pkp_brand_footer,
.pkp_brand_footer_wrapper {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tulisan "Platform & workflow by OJS / PKP" */
[role="contentinfo"],
.pkp_brand_footer a,
.pkp_brand_footer p {
  display: none !important;
}
/* =====================================================
   REMOVE BOOTSTRAP PAGE HEADER TITLE
===================================================== */

.pkp_page_header,
.pkp_page_header h1,
.pkp_page_header h2,
.pkp_page_title {
  display: none !important;
}
/* =====================================================
   GANTI MENU JUDUL JURNAL MENJADI "HOME"
   (BOOTSTRAP THEME FIX)
===================================================== */

/* Sembunyikan teks lama */
.pkp_navigation_primary li:first-child a {
    font-size: 0 !important;
  }
  
  /* Tampilkan teks Home */
  .pkp_navigation_primary li:first-child a::after {
    content: "Home";
    font-size: 14px;
    font-weight: 500;
    color: #0B3C5D;
  }
/* =====================================================
   REMOVE JOURNAL TITLE FROM BOOTSTRAP NAVBAR
===================================================== */

/* Hilangkan brand/title di menu */
.navbar-brand,
.pkp_site_name,
.pkp_site_name_wrapper {
  display: none !important;
}

/* Rapikan menu agar tidak geser */
.navbar-nav {
  margin-left: 0 !important;
}
/* ================= MENU UNDER HEADER ================= */

.pkp_navigation_primary {
    background: #ffffff;
    min-height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E2E8F0;
  }
  
  .pkp_navigation_primary a {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    padding: 10px 14px;
    color: #0B3C5D;
    transition: .3s;
  }
  
  .pkp_navigation_primary a:hover {
    background: #E0F2FE;
    border-radius: 6px;
  }
  
  /* mobile */
  @media (max-width: 768px) {
    .pkp_navigation_primary {
      min-height: auto;
      padding: 8px;
    }
  }
/* =====================================================
   HEADER LOGIN LOGIC (OJS SMART)
===================================================== */

/* default */
.vt-auth-user { display: none; }

/* BELUM login */
body:not(.loggedIn) .vt-auth-guest { display: block; }
body:not(.loggedIn) .vt-auth-user { display: none; }

/* SUDAH login */
body.loggedIn .vt-auth-guest { display: none !important; }
body.loggedIn .vt-auth-user { display: block; }

/* user dropdown */
.vt-auth-user {
  position: relative;
}

.vt-user-name {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.vt-user-menu {
  position: absolute;
  right: 0;
  top: 120%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  display: none;
  min-width: 160px;
  z-index: 999;
}

.vt-user-menu a {
  display: block;
  padding: 10px 14px;
  color: #0B3C5D;
  font-size: 13px;
  text-decoration: none;
}

.vt-user-menu a:hover {
  background: #F1F5F9;
}

/* show dropdown */
.vt-auth-user:hover .vt-user-menu {
  display: block;
}
/* =====================================================
   MOVE OJS USER MENU INTO HERO HEADER (FINAL)
===================================================== */

/* pastikan header relative */
.vt-header {
    position: relative;
  }
  
  /* user menu wrapper bawaan OJS */
  .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 28px;
    right: 48px;
    z-index: 999;
  }
  
  /* sembunyikan label "User" default */
  .pkp_navigation_user_wrapper .label {
    display: none;
  }
  
  /* styling link user */
  .pkp_navigation_user a {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 20px;
    text-decoration: none;
  }
  
  /* LOGIN (guest) */
  body:not(.loggedIn) .pkp_navigation_user .login a {
    background: #ffffff;
    color: #0B3C5D;
    margin-left: 6px;
  }
  
  /* REGISTER (guest) */
  body:not(.loggedIn) .pkp_navigation_user .register a {
    background: #FFD966;
    color: #0B3C5D;
    margin-left: 6px;
  }
  
  /* USER NAME (logged in) */
  body.loggedIn .pkp_navigation_user .profile a {
    background: rgba(255,255,255,.15);
    color: #ffffff;
  }
  
  /* dropdown */
  .pkp_navigation_user ul {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }
  
  /* mobile fix */
  @media (max-width: 768px) {
    .pkp_navigation_user_wrapper {
      position: static !important;
      margin-top: 10px;
      text-align: center;
    }
  }
/* =====================================================
   COMPACT MAIN MENU
===================================================== */

.pkp_navigation_primary {
    min-height: 40px;
    padding: 0 14px;
  }
  
  .pkp_navigation_primary a {
    padding: 7px 12px;
    font-size: 13.5px;
    line-height: 1.4;
  }
  
  .pkp_navigation_primary ul {
    gap: 2px;
  }
/* hide user menu from navbar */
.pkp_navigation_primary .pkp_navigation_user_wrapper {
    display: none !important;
  }
/* =====================================================
   MOVE OJS USER MENU TO HERO HEADER (FINAL & STABLE)
===================================================== */

/* pastikan header relative */
.vt-header {
    position: relative;
  }
  
  /* pindahkan user menu */
  .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 32px;
    right: 48px;
    z-index: 999;
  }
  
  /* sembunyikan label default */
  .pkp_navigation_user_wrapper .label {
    display: none !important;
  }
  
  /* style semua link user */
  .pkp_navigation_user a {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 20px;
    text-decoration: none;
    margin-left: 6px;
  }
  
  /* guest: login */
  body:not(.loggedIn) .pkp_navigation_user .login a {
    background: #ffffff;
    color: #0B3C5D;
  }
  
  /* guest: register */
  body:not(.loggedIn) .pkp_navigation_user .register a {
    background: #FFD966;
    color: #0B3C5D;
  }
  
  /* logged in: username */
  body.loggedIn .pkp_navigation_user .profile a {
    background: rgba(255,255,255,.15);
    color: #ffffff;
  }
  
  /* dropdown user */
  .pkp_navigation_user ul {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
  }
  
  /* sembunyikan user menu dari navbar lama */
  .pkp_navigation_primary .pkp_navigation_user_wrapper {
    display: none !important;
  }
  
  /* mobile */
  @media (max-width: 768px) {
    .pkp_navigation_user_wrapper {
      position: static !important;
      margin-top: 12px;
      text-align: center;
    }
  }
/* =====================================================
   HIDE LOGIN & REGISTER FROM NAVBAR (BOOTSTRAP THEME)
===================================================== */

/* sembunyikan login & register di menu utama */
.pkp_navigation_primary .login,
.pkp_navigation_primary .register {
  display: none !important;
}

/* sembunyikan wrapper user menu di navbar */
.pkp_navigation_primary .pkp_navigation_user_wrapper {
  display: none !important;
}
.home-hero {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}

.home-hero img {
  width: 220px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.home-text h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  margin-bottom: 8px;
}

.home-text p {
  text-align: justify;
  color: #475569;
}

/* mobile */
@media (max-width: 768px) {
  .home-hero {
    flex-direction: column;
    text-align: center;
  }

  .home-hero img {
    width: 100%;
    max-width: 280px;
  }
}
.about-journal {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  line-height: 1.8;
}

.about-journal h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 16px;
}

.about-journal p {
  margin-bottom: 14px;
  text-align: justify;
  color: #334155;
}

.about-journal ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.about-journal ul li {
  margin-bottom: 6px;
}
.editorial-team {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.editorial-team h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 18px;
}

.editorial-team h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  color: #1F6AE1;
  margin-top: 20px;
  margin-bottom: 10px;
}

.editorial-list {
  list-style: none;
  padding-left: 0;
}

.editorial-list li {
  padding: 12px 16px;
  border-radius: 10px;
  background: #F8FAFC;
  margin-bottom: 10px;
  line-height: 1.6;
  border-left: 4px solid #38BDF8;
}
/* Show journal thumbnail on homepage */
.journal-thumbnail {
  display: block !important;
  text-align: center;
  margin-bottom: 24px;
}

.journal-thumbnail img {
  max-width: 220px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.obj_issue_summary .cover img {
  width: 120px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
/* About Journal layout */
.about-journal-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* thumbnail */
.about-journal-thumb {
  width: 180px;        /* ukuran ideal */
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  flex-shrink: 0;
}

/* text */
.about-journal-text {
  text-align: justify;
}

/* responsive */
@media (max-width: 768px) {
  .about-journal-body {
    flex-direction: column;
    align-items: center;
  }

  .about-journal-thumb {
    width: 220px;
    margin-bottom: 16px;
  }

  .about-journal-text {
    text-align: left;
  }
}
/* ===== SIDEBAR CONTAINER (COMPACT) ===== */
.pkp_structure_sidebar {
  background: #F8FAFC;
  padding: 14px;              /* diperkecil */
  border-radius: 12px;
}
/* ===== SIDEBAR BLOCK ===== */
.pkp_block {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;         /* diperkecil */
  margin-bottom: 12px;        /* jarak antar block dipersempit */
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
/* ===== SIDEBAR BLOCK TITLE ===== */
.pkp_block h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;            /* sedikit lebih kecil */
  font-weight: 600;
  color: #0B3C5D;
  margin: 0 0 8px;            /* jarak bawah dipersempit */
  padding-bottom: 4px;
  border-bottom: 1px solid #E2E8F0;
}
/* ===== SIDEBAR MENU LIST ===== */
.pkp_block ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.pkp_block ul li {
  margin-bottom: 2px;         /* jarak antar item sangat rapat */
}

/* link */
.pkp_block ul li a {
  display: block;
  padding: 6px 10px;          /* lebih ringkas */
  font-size: 13.5px;
  color: #334155;
  text-decoration: none;
  border-radius: 6px;
  transition: all .2s ease;
}

/* hover dinamis */
.pkp_block ul li a:hover {
  background: #E0F2FE;
  color: #0B3C5D;
  padding-left: 14px;         /* efek geser halus */
}
/* ===== SIDEBAR BUTTONS (COMPACT) ===== */
.pkp_block a.btn,
.pkp_block button,
.pkp_block input[type="submit"] {
  width: 100%;
  padding: 8px 14px;          /* diperkecil */
  margin-top: 8px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  background: linear-gradient(90deg, #0B3C5D, #1F6AE1);
  color: #ffffff !important;
  border: none;
  text-align: center;
  cursor: pointer;
  transition: all .25s ease;
}

.pkp_block a.btn:hover,
.pkp_block button:hover,
.pkp_block input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31,106,225,.25);
}
/* ===== SIDEBAR FORM INPUT ===== */
.pkp_block input[type="text"],
.pkp_block input[type="password"],
.pkp_block select {
  width: 100%;
  padding: 7px 10px;          /* dipersempit */
  font-size: 13.5px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .pkp_structure_sidebar {
    margin-top: 18px;
    padding: 12px;
  }
}

/* ================= FOR READERS ================= */

.info-readers {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.info-readers h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 14px;
}

.info-intro {
  color: #334155;
  margin-bottom: 20px;
  text-align: justify;
}

/* card layout */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.info-card {
  background: #F8FAFC;
  padding: 16px 18px;
  border-radius: 12px;
  border-left: 4px solid #38BDF8;
  transition: all .25s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.info-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #1F6AE1;
  margin-bottom: 8px;
}

.info-card p {
  font-size: 14px;
  color: #334155;
  text-align: justify;
}

/* mobile */
@media (max-width: 768px) {
  .info-readers {
    padding: 18px;
  }
}
/* ================= FOR AUTHORS & READERS ================= */

.info-authors,
.info-readers {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.info-authors h2,
.info-readers h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 14px;
}

.info-intro {
  color: #334155;
  margin-bottom: 20px;
  text-align: justify;
}

/* card layout */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.info-card {
  background: #F8FAFC;
  padding: 16px 18px;
  border-radius: 12px;
  border-left: 4px solid #38BDF8;
  transition: all .25s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.info-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #1F6AE1;
  margin-bottom: 8px;
}

.info-card p {
  font-size: 14px;
  color: #334155;
  text-align: justify;
}

/* mobile */
@media (max-width: 768px) {
  .info-authors,
  .info-readers {
    padding: 18px;
  }
}
/* ================= FOR LIBRARIANS ================= */

.info-librarians {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
/* ================= PRIVACY STATEMENT ================= */

.privacy-statement {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.privacy-statement h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 14px;
}

.privacy-intro {
  color: #334155;
  margin-bottom: 20px;
  text-align: justify;
}

/* card layout */
.privacy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.privacy-card {
  background: #F8FAFC;
  padding: 16px 18px;
  border-radius: 12px;
  border-left: 4px solid #38BDF8;
  transition: all .25s ease;
}

.privacy-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.privacy-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #1F6AE1;
  margin-bottom: 8px;
}

.privacy-card p {
  font-size: 14px;
  color: #334155;
  text-align: justify;
}

/* mobile */
@media (max-width: 768px) {
  .privacy-statement {
    padding: 18px;
  }
}
/* ================= JOURNAL STATISTICS ================= */

.journal-statistics {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.journal-statistics h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 12px;
}

.stats-intro {
  color: #334155;
  margin-bottom: 24px;
  text-align: justify;
}

/* cards */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stats-card {
  background: #F8FAFC;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  border-left: 4px solid #38BDF8;
  transition: all .25s ease;
}

.stats-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.stats-number {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1F6AE1;
  margin-bottom: 6px;
}

.stats-label {
  font-size: 14px;
  color: #334155;
}

/* details */
.stats-details h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  color: #0B3C5D;
  margin-top: 22px;
  margin-bottom: 10px;
}

.stats-details ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.stats-details ul li {
  margin-bottom: 6px;
  color: #334155;
}

.stats-details p {
  color: #334155;
  text-align: justify;
}

/* mobile */
@media (max-width: 768px) {
  .journal-statistics {
    padding: 18px;
  }
}
/* ================= SIDEBAR EDITORIAL TEAM ================= */

.sidebar-editorial {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* card */
.editorial-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  padding: 10px;
  border-radius: 12px;
  border-left: 3px solid #38BDF8;
}

/* photo */
.editorial-photo img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* info */
.editorial-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.editorial-role {
  font-size: 12px;
  font-weight: 600;
  color: #1F6AE1;
}

.editorial-name {
  font-size: 13.5px;
  color: #334155;
  font-weight: 500;
}
/* ================= SIDEBAR SUBMIT YOUR PAPER ================= */

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

/* main button */
.submit-paper-btn {
  display: block;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0B3C5D, #1F6AE1);
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(31,106,225,.35);
  transition: all .3s ease;
}

/* hover effect */
.submit-paper-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(31,106,225,.45);
}

/* text */
.submit-title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.submit-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  opacity: .9;
}
/* ================= SIDEBAR MANUSCRIPT TEMPLATE (FONT AWESOME) ================= */

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

/* card */
.template-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F8FAFC;
  border-radius: 14px;
  text-decoration: none;
  color: #0B3C5D;
  border: 1px solid #E2E8F0;
  transition: all .25s ease;
}

/* hover */
.template-btn:hover {
  background: #E0F2FE;
  border-color: #38BDF8;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* icon */
.template-icon {
  font-size: 28px;
  color: #1F6AE1;
  width: 40px;
  text-align: center;
}

/* text */
.template-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.template-title {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
}

.template-subtitle {
  font-size: 12.5px;
  color: #475569;
}

.template-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: #ffffff;
  padding: 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
/* ================= PAGE PANDUAN ================= */

.panduan-page {
  background: #ffffff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.panduan-page h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 14px;
}

.panduan-intro {
  color: #334155;
  margin-bottom: 24px;
  text-align: justify;
}

/* cards */
.panduan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.panduan-card {
  background: #F8FAFC;
  padding: 18px;
  border-radius: 14px;
  border-left: 4px solid #38BDF8;
  transition: all .25s ease;
}

.panduan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.panduan-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #1F6AE1;
  margin-bottom: 8px;
}

.panduan-card p {
  font-size: 14px;
  color: #334155;
  margin-bottom: 10px;
  text-align: justify;
}

.panduan-link {
  font-size: 13.5px;
  color: #0B3C5D;
  font-weight: 500;
  text-decoration: none;
}

.panduan-link:hover {
  text-decoration: underline;
}

/* responsive */
@media (max-width: 768px) {
  .panduan-page {
    padding: 18px;
  }
}
/* =========================================
   MODERN SIDEBAR BUTTON (CTA)
========================================= */

.sidebar-btn-wrap {
  margin: 6px 0;
}

.sidebar-btn {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0B3C5D, #1F6AE1);
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 10px 26px rgba(31,106,225,.35);
  transition: all .3s ease;
}

/* hover effect */
.sidebar-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(31,106,225,.45);
}

/* title */
.sidebar-btn-title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* subtitle */
.sidebar-btn-sub {
  display: block;
  font-size: 12.5px;
  opacity: .9;
  margin-top: 3px;
}
/* ================= PANDUAN REVIEWER PAGE ================= */

.reviewer-guide {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.reviewer-guide h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
  margin-bottom: 14px;
}

.reviewer-intro {
  font-size: 15px;
  color: #334155;
  margin-bottom: 26px;
  text-align: justify;
}

/* section */
.reviewer-section {
  margin-bottom: 22px;
}

.reviewer-section h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #1F6AE1;
  margin-bottom: 8px;
}

.reviewer-section p,
.reviewer-section li {
  font-size: 14.5px;
  color: #334155;
  line-height: 1.7;
}

.reviewer-section ul,
.reviewer-section ol {
  padding-left: 20px;
}

/* note */
.reviewer-note {
  background: #F8FAFC;
  border-left: 4px solid #38BDF8;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
}

/* responsive */
@media (max-width: 768px) {
  .reviewer-guide {
    padding: 20px;
  }
}
/* ================= SIDEBAR ANNOUNCEMENT BUTTON ================= */

.sidebar-btn-announcement {
  background: linear-gradient(135deg, #7C2D12, #EA580C);
  box-shadow: 0 10px 26px rgba(234,88,12,.35);
}

.sidebar-btn-announcement:hover {
  box-shadow: 0 16px 34px rgba(234,88,12,.45);
}
/* ================= ANNOUNCEMENT PAGE ================= */

.announcement-page {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.announcement-page h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #7C2D12;
  margin-bottom: 14px;
}

.announcement-intro {
  font-size: 15px;
  color: #334155;
  margin-bottom: 26px;
  text-align: justify;
}

/* item */
.announcement-item {
  padding: 18px 20px;
  border-left: 4px solid #EA580C;
  background: #FFF7ED;
  border-radius: 12px;
  margin-bottom: 18px;
  transition: all .25s ease;
}

.announcement-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* date */
.announcement-date {
  font-size: 12.5px;
  font-weight: 500;
  color: #9A3412;
  margin-bottom: 6px;
}

/* title */
.announcement-item h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #9A3412;
  margin-bottom: 6px;
}

/* text */
.announcement-item p {
  font-size: 14.5px;
  color: #334155;
  line-height: 1.7;
}

/* responsive */
@media (max-width: 768px) {
  .announcement-page {
    padding: 20px;
  }
}
/* ================= ANNOUNCEMENT DETAIL ================= */

.announcement-detail {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.announcement-detail h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #9A3412;
  margin-bottom: 6px;
}

.announcement-detail .announcement-date {
  font-size: 13px;
  color: #9A3412;
  opacity: .85;
  margin-bottom: 16px;
}

.announcement-detail p,
.announcement-detail li {
  font-size: 14.5px;
  color: #334155;
  line-height: 1.75;
}

.announcement-back {
  display: inline-block;
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: #0B3C5D;
  text-decoration: none;
}

.announcement-back:hover {
  text-decoration: underline;
}
/* ================= SUBMISSION FLOW PAGE ================= */

.submission-flow-page {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.flow-intro {
  font-size: 15px;
  color: #334155;
  margin-bottom: 24px;
  text-align: justify;
}

.flow-image {
  text-align: center;
  margin-bottom: 24px;
}

.flow-image img {
  max-width: 100%;
  border-radius: 14px;
}

.flow-steps li {
  font-size: 14.5px;
  margin-bottom: 10px;
  color: #334155;
}
/* ================= ANNOUNCEMENT TIMELINE ================= */

.announcement-page {
  background: #ffffff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}

.announcement-header h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  color: #0B3C5D;
}

.announcement-header p {
  font-size: 15px;
  color: #475569;
  margin-bottom: 30px;
  text-align: justify;
}

/* timeline wrapper */
.announcement-timeline {
  position: relative;
}

/* item */
.announcement-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  margin-bottom: 10px;
}

/* date */
.timeline-date {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.date-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.date-badge.blue { background: #2563EB; }
.date-badge.green { background: #16A34A; }
.date-badge.orange { background: #F97316; }

/* card */
.announcement-card {
  background: #F8FAFC;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  transition: all .3s ease;
}

.announcement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* divider */
.timeline-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #CBD5E1, transparent);
  margin: 18px 0 26px;
}

/* tags */
.announcement-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  color: #fff;
}

.announcement-tag.call { background: #1F6AE1; }
.announcement-tag.reviewer { background: #0B3C5D; }
.announcement-tag.schedule { background: #EA580C; }

/* text */
.announcement-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #0B3C5D;
  margin-bottom: 6px;
}

.announcement-card p {
  font-size: 14.5px;
  color: #334155;
  line-height: 1.6;
}

.announcement-flow {
  font-size: 13.5px;
  background: #E0F2FE;
  padding: 8px 10px;
  border-radius: 10px;
  margin: 10px 0 14px;
}

/* button */
.announcement-btn {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1F6AE1, #0B3C5D);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all .25s ease;
}

.announcement-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(31,106,225,.45);
}

/* responsive */
@media (max-width: 768px) {
  .announcement-item {
    grid-template-columns: 1fr;
  }

  .timeline-date {
    justify-content: flex-start;
    margin-bottom: 6px;
  }
}
/* ================= ANNOUNCEMENT PAGINATION ================= */

.announcement-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}

.page-btn {
  padding: 8px 16px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #0B3C5D;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all .25s ease;
}

.page-btn:hover {
  background: #1F6AE1;
  color: #ffffff;
}

.page-btn.active {
  background: linear-gradient(135deg, #1F6AE1, #0B3C5D);
  color: #ffffff;
}

.page-btn.disabled {
  opacity: .4;
  pointer-events: none;
}

/* ================= TAG TAMBAHAN ================= */

.announcement-tag.flow {
  background: #16A34A;
}
/* extra badge color */
.date-badge.red { background: #DC2626; }

.announcement-tag.info { background: #64748B; }
.announcement-tag.editorial { background: #4F46E5; }
/* ===============================
   VISITOR COUNTER – MODERN UI
================================ */

.vt-sidebar-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.vt-sidebar-title {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0B3C5D;
  margin-bottom: 14px;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 6px;
}

.vt-visitor-modern {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vt-visitor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F8FAFC;
  padding: 12px 14px;
  border-radius: 10px;
}

.vt-visitor-label {
  font-size: 13px;
  color: #64748B;
}

.vt-visitor-counter {
  font-size: 14px;
  font-weight: 600;
  color: #0B3C5D;
}

/* responsive */
@media (max-width: 768px) {
  .vt-visitor-row {
    flex-direction: column;
    gap: 6px;
  }
}

.vt-visitor-counter span {
  background: linear-gradient(135deg, #0B3C5D, #1F6AE1);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  min-width: 60px;
  text-align: center;
  display: inline-block;
}
/* ===============================
   VISITOR COUNTER – COMPACT & MODERN
================================ */

/* card lebih ringkas */
.vt-sidebar-card {
  padding: 14px;
}

/* judul lebih padat */
.vt-sidebar-title {
  font-size: 14px;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

/* jarak antar bar dipersempit */
.vt-visitor-modern {
  gap: 8px;
}

/* bar visitor diperkecil */
.vt-visitor-row {
  padding: 8px 12px;
  border-radius: 10px;
}

/* label */
.vt-visitor-label {
  font-size: 12.5px;
}

/* badge angka – kecil & modern */
.vt-visitor-counter span {
  background: linear-gradient(135deg, #0B3C5D, #1F6AE1);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  min-width: 44px;
  text-align: center;
}

/* ===============================
   RESPONSIVE FIX
================================ */
@media (max-width: 768px) {
  .vt-visitor-row {
    flex-direction: row; /* tetap sejajar */
    padding: 8px 10px;
  }

  .vt-visitor-counter span {
    font-size: 12px;
    padding: 4px 10px;
  }
}
/* =====================================
   SIDEBAR DROPDOWN MENU – VIDYATECH
===================================== */

.vt-sidebar-menu {
  background: #0B5C8E;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* toggle button */
.vt-menu-toggle {
  width: 100%;
  background: #0B5C8E;
  color: #ffffff;
  border: none;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background .3s;
}

.vt-menu-toggle:hover {
  background: #0A4E78;
}

/* arrow */
.vt-arrow {
  font-size: 12px;
  transition: transform .3s;
}

/* dropdown content */
.vt-menu-dropdown {
  background: #F1F5F9;
  display: none;
  flex-direction: column;
}

.vt-menu-dropdown a {
  padding: 12px 18px;
  font-size: 13.5px;
  color: #1E293B;
  text-decoration: none;
  border-bottom: 1px solid #E2E8F0;
  transition: background .25s;
}

.vt-menu-dropdown a:hover {
  background: #E0F2FE;
}

/* single menu (no dropdown) */
.vt-menu-single {
  display: block;
  padding: 14px 16px;
  background: #0B5C8E;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.15);
  transition: background .3s;
}

.vt-menu-single:hover {
  background: #0A4E78;
}

/* active dropdown */
.vt-menu-group.active .vt-menu-dropdown {
  display: flex;
}

.vt-menu-group.active .vt-arrow {
  transform: rotate(180deg);
}

/* responsive */
@media (max-width: 768px) {
  .vt-menu-toggle,
  .vt-menu-single {
    font-size: 13px;
    padding: 12px 14px;
  }
}
.vt-menu-toggle i:first-child,
.vt-menu-link i {
  width: 20px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
}

.vt-menu-content a i {
  width: 18px;
  margin-right: 8px;
  color: #1F6AE1;
}

.vt-menu-toggle {
  display: flex;
  align-items: center;
}

.vt-menu-toggle .vt-arrow {
  margin-left: auto;
  transition: transform .3s ease;
}

.vt-menu-group.active .vt-arrow {
  transform: rotate(180deg);
}
.vt-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* tombol utama */
.vt-menu-toggle {
  width: 100%;
  background: linear-gradient(135deg, #0B3C5D, #1F6AE1);
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* isi dropdown */
.vt-menu-content {
  display: none;
  margin-top: 8px;
  background: #F8FAFC;
  border-radius: 12px;
  overflow: hidden;
}

.vt-menu-content a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: #0B3C5D;
  text-decoration: none;
  border-bottom: 1px solid #E2E8F0;
}

.vt-menu-content a:last-child {
  border-bottom: none;
}

.vt-menu-content a:hover {
  background: #E0F2FE;
}

/* link langsung */
.vt-menu-link {
  display: block;
  padding: 12px 16px;
  background: #0B5C88;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.vt-menu-link:hover {
  background: #094A6D;
}
/* ================= SIDEBAR DROPDOWN – VIDYATECH ================= */

.vt-sidebar-menu {
  background: #0B5F8A;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.vt-menu-group,
.vt-menu-single {
  margin-bottom: 8px;
}

/* Toggle button */
.vt-menu-toggle {
  width: 100%;
  background: linear-gradient(135deg, #0B3C5D, #1F6AE1);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* Arrow */
.vt-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: .3s;
}

.vt-menu-group.open .vt-arrow {
  transform: rotate(-135deg);
}

/* Dropdown content */
.vt-menu-content {
  background: #F8FAFC;
  border-radius: 10px;
  margin-top: 6px;
  padding: 6px;
  display: none;
}

.vt-menu-group.open .vt-menu-content {
  display: block;
}

.vt-menu-content a {
  display: block;
  padding: 10px 12px;
  font-size: 13.5px;
  color: #0B3C5D;
  text-decoration: none;
  border-radius: 8px;
}

.vt-menu-content a:hover {
  background: #E0F2FE;
}

/* Single menu */
.vt-menu-single {
  display: block;
  background: #0B5F8A;
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.vt-menu-single:hover {
  background: #0A4A6E;
}

/* Responsive */
@media (max-width: 768px) {
  .vt-sidebar-menu {
    padding: 8px;
  }
}
/* ===============================
   SIDEBAR – PENGINDEKS JURNAL
================================ */

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

.vt-indexing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.vt-index-item {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.vt-index-item img {
  max-width: 90px;
  max-height: 36px;
  object-fit: contain;
  filter: grayscale(20%);
}

.vt-index-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.vt-index-item:hover img {
  filter: grayscale(0%);
}

/* mobile */
@media (max-width: 768px) {
  .vt-indexing-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .vt-index-item img {
    max-width: 70px;
  }
}
/* =====================================================
   PRIVACY & POLICY PAGE – MODERN UI
===================================================== */

.vt-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px;
}

.vt-page-title {
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #0B3C5D;
  margin-bottom: 6px;
}

.vt-page-subtitle {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 28px;
}

/* card */
.vt-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: all .25s ease;
}

.vt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.vt-card h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1F6AE1;
  margin-bottom: 10px;
  position: relative;
  padding-left: 12px;
}

.vt-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #1F6AE1, #38BDF8);
  border-radius: 4px;
}

.vt-card p {
  font-size: 15px;
  line-height: 1.8;
  color: #1E293B;
  margin-bottom: 10px;
}

.vt-card ul {
  padding-left: 18px;
  margin-top: 8px;
}

.vt-card ul li {
  font-size: 14.5px;
  color: #334155;
  margin-bottom: 6px;
}

/* highlight card (contact) */
.vt-card.vt-highlight {
  background: linear-gradient(135deg, #0B3C5D, #1F6AE1);
  color: #ffffff;
}

.vt-card.vt-highlight h2 {
  color: #ffffff;
}

.vt-card.vt-highlight h2::before {
  background: #FFD966;
}

.vt-card.vt-highlight p,
.vt-card.vt-highlight a {
  color: #E0F2FE;
}

.vt-card.vt-highlight a {
  font-weight: 500;
  text-decoration: underline;
}

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

@media (max-width: 768px) {
  .vt-page-title {
    font-size: 24px;
  }

  .vt-card {
    padding: 18px 18px;
  }

  .vt-card h2 {
    font-size: 16px;
  }

  .vt-card p,
  .vt-card ul li {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .vt-page {
    padding: 18px 12px;
  }

  .vt-page-title {
    font-size: 22px;
  }
}
/* ===============================
   INDEXING JOURNAL – RESPONSIVE FIX
================================ */

.vt-indexing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  align-items: center;
}

.vt-index-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: all .25s ease;
}

.vt-index-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.vt-index-item img {
  max-width: 100%;
  max-height: 42px;   /* kunci supaya tidak kebesaran */
  height: auto;
  object-fit: contain;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 480px) {
  .vt-indexing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vt-index-item img {
    max-height: 34px;
  }
}
/* ===============================
   CONTACT PAGE – PREMIUM SECTION
================================ */

.vt-contact-section {
  background: #F8FAFC;
  border-left: 5px solid #1F6AE1;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.vt-contact-title {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #0B3C5D;
  margin-bottom: 10px;
}

.vt-contact-item {
  margin-bottom: 10px;
  font-size: 15px;
  color: #1E293B;
  line-height: 1.7;
}

.vt-contact-label {
  display: inline-block;
  background: #E0F2FE;
  color: #0369A1;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.vt-contact-link a {
  color: #1F6AE1;
  font-weight: 500;
  text-decoration: none;
}

.vt-contact-link a:hover {
  text-decoration: underline;
}

/* responsive */
@media (max-width: 768px) {
  .vt-contact-section {
    padding: 16px;
  }
}