/**
 * Custom CSS - Halaman Beranda OJS 3.5
 * Tema    : Formal & Akademik
 * Warna   : #F26768 (primary), #000000 (text)
 * Jurnal  : HANDARU Journal of Social Culture and Humanities
 * ================================================
 */

/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --color-primary:      #F26768;
  --color-primary-dark: #c94d4e;
  --color-primary-light:#fce8e8;
  --color-text:         #111111;
  --color-text-muted:   #4a4a4a;
  --color-text-light:   #888888;
  --color-bg:           #ffffff;
  --color-bg-alt:       #f8f6f4;
  --color-border:       #e2ddd8;
  --color-nav-bg:       #1c2b3a;
  --color-footer-bg:    #161210;
  --font-display:       'Playfair Display', Georgia, serif;
  --font-body:          'Source Serif 4', Georgia, serif;
  --font-ui:            'DM Sans', sans-serif;
  --transition:         0.22s ease;
  --radius:             6px;
}

/* ===== BASE ===== */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   HEADER — nama jurnal di atas navbar
   ============================================================ */

.navbar-nav.pull-right > li > a,
.navbar-default .navbar-nav.pull-right > li > a {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.navbar-nav.pull-right > li > a:hover {
  color: var(--color-primary);
}

.pkp_head_wrapper {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 0;
}

.pkp_site_name a,
.navbar-brand,
.pkp_head_wrapper h1 a,
.pkp_head_wrapper .site-name a {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-text) !important;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color var(--transition);
}

.pkp_site_name a:hover,
.navbar-brand:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* ============================================================
   NAVIGASI UTAMA
   ============================================================ */

.navbar.navbar-default,
.pkp_navigation_primary,
nav.navbar {
  background-color: var(--color-nav-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 3px solid var(--color-primary) !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  min-height: auto;
}

.navbar-default .navbar-nav > li > a,
.pkp_navigation_primary .navbar-nav > li > a {
  font-family: var(--font-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #c8d0d8 !important;
  padding: 14px 18px !important;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  color: #ffffff !important;
  background-color: rgba(242, 103, 104, 0.15) !important;
  border-bottom-color: var(--color-primary) !important;
  text-decoration: none !important;
}

.navbar-default .navbar-nav > li.nav_search > a,
.navbar-default .navbar-nav > li > a.nav-search-toggle {
  color: #c8d0d8 !important;
}

.navbar-default .navbar-nav > li.nav_search > a:hover {
  color: var(--color-primary) !important;
  background: transparent !important;
}

.navbar-default .navbar-nav .dropdown-menu {
  background-color: var(--color-nav-bg) !important;
  border: none !important;
  border-top: 2px solid var(--color-primary) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
  padding: 6px 0 !important;
  min-width: 190px !important;
}

.navbar-default .navbar-nav .dropdown-menu > li > a {
  font-family: var(--font-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: #b0bbc6 !important;
  padding: 8px 18px !important;
  border-left: 3px solid transparent;
  transition: all var(--transition) !important;
}

.navbar-default .navbar-nav .dropdown-menu > li > a:hover {
  color: #ffffff !important;
  background-color: rgba(242, 103, 104, 0.12) !important;
  border-left-color: var(--color-primary) !important;
}

/* ============================================================
   HERO / BANNER BERANDA
   ============================================================ */

.pkp_structure_main .homepageImage,
.pkp_structure_main .homepageDescription,
.pkp_block.block_information,
#homepageImage,
.homepage-header,
.homepage_image {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1c1008 0%, #2d1a10 40%, #3d1212 70%, #5a1a1a 100%) !important;
  border-radius: 0 !important;
  padding: 5rem 3rem 4.5rem !important;
  text-align: center;
}

.pkp_structure_main .homepageImage::after,
.homepage-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(242, 103, 104, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(242, 103, 104, 0.08) 0%, transparent 45%);
  pointer-events: none;
}

.pkp_structure_main .homepageImage::before,
.homepage-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 30%, #f9a8a9 70%, transparent 100%);
}

.homepage-header h1,
.pkp_structure_main .homepageImage h1,
.pkp_structure_main .homepageDescription h1,
.pkp_page_index h1,
#homepageImage h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  position: relative;
  z-index: 1;
}

.homepage-header p,
.pkp_structure_main .homepageImage p,
.pkp_structure_main .homepageDescription p,
#homepageImage p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-style: italic !important;
  max-width: 540px;
  margin: 0 auto 2rem !important;
  line-height: 1.8 !important;
  position: relative;
  z-index: 1;
}

.homepage-header .btn,
.pkp_structure_main .homepageImage .btn,
.pkp_structure_main .homepageDescription .btn,
#homepageImage .btn,
.pkp_page_index .btn {
  display: inline-block !important;
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background-color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: var(--radius) !important;
  padding: 0.75rem 2rem !important;
  text-decoration: none !important;
  transition: all var(--transition) !important;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(242, 103, 104, 0.35);
}

.homepage-header .btn:hover,
.pkp_structure_main .homepageImage .btn:hover,
.pkp_structure_main .homepageDescription .btn:hover,
#homepageImage .btn:hover,
.pkp_page_index .btn:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(242, 103, 104, 0.45) !important;
  text-decoration: none !important;
}

/* ============================================================
   SECTION TENTANG JURNAL & KONTEN
   ============================================================ */

.pkp_block h2,
.pkp_block .pkp_block_title,
h2.pkp_block_title {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.55rem !important;
  border-bottom: 2px solid var(--color-primary) !important;
  display: inline-block !important;
}

.pkp_block p,
.pkp_structure_main p {
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.obj_article_summary {
  border-bottom: 1px solid var(--color-border);
  padding: 1.2rem 0;
}

.obj_article_summary:last-child {
  border-bottom: none;
}

.obj_article_summary .title a {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
}

.obj_article_summary .title a:hover {
  color: var(--color-primary) !important;
}

.obj_article_summary .authors {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-top: 0.2rem;
}

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

footer.pkp_structure_footer,
.pkp_structure_footer {
  background-color: var(--color-footer-bg) !important;
  padding: 3rem 0 0 !important;
  margin-top: 3rem !important;
  border-top: 3px solid var(--color-primary) !important;
}

footer.pkp_structure_footer .pkp_block h2,
.pkp_structure_footer .pkp_block h2 {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(242, 103, 104, 0.35) !important;
  padding-bottom: 0.45rem !important;
  margin-bottom: 0.9rem !important;
  display: block !important;
  letter-spacing: 0.02em !important;
}

footer.pkp_structure_footer a,
.pkp_structure_footer a {
  color: #8a9aaa !important;
  font-size: 0.84rem !important;
  text-decoration: none !important;
  line-height: 2.1 !important;
  transition: color var(--transition) !important;
}

footer.pkp_structure_footer a:hover,
.pkp_structure_footer a:hover {
  color: var(--color-primary) !important;
}

footer.pkp_structure_footer p,
.pkp_structure_footer p {
  color: #8a9aaa;
  font-size: 0.84rem;
  line-height: 1.7;
}

.pkp_brand_footer,
footer .pkp_brand_footer {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 1.25rem 0 !important;
  margin-top: 2rem !important;
  text-align: right;
  opacity: 0.5;
  transition: opacity var(--transition);
}

.pkp_brand_footer:hover {
  opacity: 0.8;
}

.pkp_brand_footer img {
  filter: brightness(0) invert(1);
  max-height: 36px;
}

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

@media (max-width: 992px) {
  .navbar-default .navbar-toggle {
    border-color: var(--color-primary) !important;
  }

  .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--color-primary) !important;
  }

  .navbar-default .navbar-collapse {
    background-color: var(--color-nav-bg) !important;
    border-top: 1px solid rgba(242, 103, 104, 0.3) !important;
  }

  .navbar-default .navbar-nav > li > a {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    border-left: 3px solid transparent !important;
  }

  .navbar-default .navbar-nav > li > a:hover {
    border-left-color: var(--color-primary) !important;
  }
}

@media (max-width: 768px) {
  .pkp_structure_main .homepageImage,
  .pkp_structure_main .homepageDescription,
  .homepage-header {
    padding: 3.5rem 1.5rem 3rem !important;
  }

  .pkp_page_index h1 {
    font-size: 1.7rem !important;
  }
}

/* ============================================================
   AKSESIBILITAS
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

html { scroll-behavior: smooth; }