/* =========================================================
   Portal Jurnal Desa Bedana — Template "Cetak Klasik"
   Gaya masthead surat kabar akademik lama: hitam-krem-marun,
   drop-cap, garis tipis, tanpa foto besar di hero.
   Beda dari template OJS-nav-biru dan Majalah-Tenun-terakota.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400&family=Space+Mono:wght@400;700&display=swap');

:root{
  --marun:      #7A2431;
  --marun-tua:  #4F1620;
  --tinta:      #1B1814;
  --tinta-muda: #55503F;
  --kertas:     #F7F3E9;
  --kertas-tua: #ECE4CF;
  --garis:      #C9BFA0;
  --putih:      #FFFFFF;

  --font-masthead: 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-label: 'Space Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--tinta);
  background:var(--kertas);
  line-height:1.7;
}
img{ max-width:100%; display:block; filter:grayscale(.15) sepia(.06); }
a{ color:var(--marun); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul{ list-style:none; }
.bungkus{ max-width:960px; margin:0 auto; padding:0 24px; }

/* ---------- pita atas ---------- */
.pita-atas{ background:var(--tinta); color:#C9BFA0; font-family:var(--font-label); font-size:.68rem; }
.pita-atas .bungkus{ display:flex; justify-content:space-between; padding:7px 24px; }
.pita-atas a{ color:#C9BFA0; }
.pita-atas a:hover{ color:#fff; }

/* ---------- masthead (ala koran) ---------- */
.masthead{ background:var(--kertas); border-bottom:4px double var(--tinta); padding:28px 0 18px; text-align:center; }
.masthead .label-kecil{
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marun); margin-bottom:10px;
}
.masthead h1{
  font-family:var(--font-masthead); font-weight:700; font-size:clamp(1.7rem,4.2vw,2.7rem);
  letter-spacing:.01em; color:var(--tinta);
}
.masthead .tagline{ font-style:italic; color:var(--tinta-muda); margin-top:8px; font-size:.92rem; }
.masthead .meta-row{
  display:flex; justify-content:center; gap:18px; margin-top:14px;
  font-family:var(--font-label); font-size:.66rem; color:var(--tinta-muda); flex-wrap:wrap;
}

/* ---------- nav tab garis bawah ---------- */
.nav-tab{ background:var(--kertas-tua); border-bottom:1px solid var(--tinta); }
.nav-tab .bungkus{ display:flex; justify-content:center; gap:2px; flex-wrap:wrap; }
.nav-tab a{
  font-family:var(--font-label); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  padding:12px 18px; color:var(--tinta); border-bottom:3px solid transparent;
}
.nav-tab a:hover, .nav-tab a.aktif{ border-bottom-color:var(--marun); color:var(--marun); text-decoration:none; }

/* ---------- lead / kop artikel jurnal ---------- */
.lead{ padding:40px 0 10px; border-bottom:1px solid var(--garis); }
.lead .bungkus{ max-width:760px; }
.lead .kicker{ font-family:var(--font-label); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--marun); margin-bottom:10px; }
.lead h2{ font-family:var(--font-masthead); font-size:1.7rem; line-height:1.3; margin-bottom:14px; }
.lead p{ font-size:1.02rem; color:var(--tinta-muda); }
.lead .issn-list{ margin-top:18px; font-family:var(--font-label); font-size:.68rem; color:var(--tinta-muda); display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- konten utama satu kolom lebar ---------- */
.konten{ max-width:760px; margin:0 auto; padding:36px 24px 70px; }
.drop::first-letter{
  font-family:var(--font-masthead); font-size:3.6rem; float:left; line-height:.82; padding:6px 8px 0 0; color:var(--marun);
}
.judul-bagian{
  font-family:var(--font-masthead); font-size:1.32rem; margin:32px 0 18px; padding-bottom:8px;
  border-bottom:2px solid var(--tinta);
}

.entri{ padding:20px 0; border-bottom:1px dotted var(--garis); }
.entri .no-entri{ font-family:var(--font-label); font-size:.68rem; color:var(--marun); margin-bottom:6px; }
.entri h3{ font-family:var(--font-masthead); font-size:1.1rem; line-height:1.4; margin-bottom:6px; }
.entri h3 a{ color:var(--tinta); }
.entri .penulis{ font-style:italic; color:var(--tinta-muda); font-size:.88rem; margin-bottom:8px; }
.entri .abstrak{ font-size:.94rem; margin-bottom:8px; }
.entri .baris-aksi{ font-family:var(--font-label); font-size:.68rem; display:flex; gap:16px; color:var(--tinta-muda); }
.entri .baris-aksi a{ color:var(--marun); }

.kotak-info{ background:var(--putih); border:1px solid var(--tinta); padding:20px 22px; margin:26px 0; }
.kotak-info h4{ font-family:var(--font-masthead); font-size:1.05rem; margin-bottom:12px; border-bottom:1px solid var(--garis); padding-bottom:8px; }
.kotak-info p{ margin-bottom:10px; font-size:.92rem; }
.kotak-info ul li{ padding-left:16px; position:relative; margin-bottom:8px; font-size:.92rem; }
.kotak-info ul li::before{ content:"\2014"; position:absolute; left:0; color:var(--marun); }

.grid-dua{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }

.tombol{
  display:inline-block; font-family:var(--font-label); font-size:.72rem; text-transform:uppercase;
  padding:10px 20px; border:1.5px solid var(--tinta); color:var(--tinta);
}
.tombol:hover{ background:var(--tinta); color:var(--kertas); text-decoration:none; }
.tombol-isi{ background:var(--marun); border-color:var(--marun); color:#fff; }
.tombol-isi:hover{ background:var(--marun-tua); border-color:var(--marun-tua); color:#fff; }

/* ---------- grid portal (masthead list) ---------- */
.daftar-jurnal{ max-width:960px; margin:0 auto; padding:44px 24px 70px; }
.entri-portal{
  display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:start;
  padding:26px 0; border-bottom:1px solid var(--garis);
}
.entri-portal .lambang{
  width:100%; aspect-ratio:1; border:2px solid var(--tinta); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-masthead); font-size:2.2rem; font-weight:700; color:var(--k-aksen,var(--marun));
}
.entri-portal .kode-label{ font-family:var(--font-label); font-size:.66rem; letter-spacing:.06em; color:var(--k-aksen,var(--marun)); margin-bottom:6px; }
.entri-portal h3{ font-family:var(--font-masthead); font-size:1.28rem; margin-bottom:8px; }
.entri-portal h3 a{ color:var(--tinta); }
.entri-portal p{ font-size:.92rem; color:var(--tinta-muda); margin-bottom:8px; }
.entri-portal .issn-mini{ font-family:var(--font-label); font-size:.66rem; color:var(--tinta-muda); }

/* ---------- statistik masthead ---------- */
.strip-statistik{ border-top:1px solid var(--tinta); border-bottom:1px solid var(--tinta); background:var(--kertas-tua); }
.strip-statistik .bungkus{ display:grid; grid-template-columns:repeat(4,1fr); text-align:center; padding:20px 24px; }
.strip-statistik .n{ font-family:var(--font-masthead); font-size:1.5rem; color:var(--marun); }
.strip-statistik .l{ font-family:var(--font-label); font-size:.6rem; text-transform:uppercase; color:var(--tinta-muda); margin-top:2px; }

/* ---------- footer ---------- */
.kaki-cetak{ background:var(--tinta); color:#C9BFA0; padding:40px 0 18px; }
.kaki-cetak .bungkus{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px; }
.kaki-cetak h4{ font-family:var(--font-label); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:#D8A8AC; margin-bottom:12px; }
.kaki-cetak p, .kaki-cetak li{ font-size:.82rem; color:#B8AF97; margin-bottom:8px; }
.kaki-cetak a{ color:#B8AF97; }
.kaki-cetak a:hover{ color:#fff; }
.kaki-bawah-cetak{ text-align:center; margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); font-family:var(--font-label); font-size:.66rem; color:#8B8371; }

@media (max-width:820px){
  .grid-dua{ grid-template-columns:1fr; }
  .entri-portal{ grid-template-columns:70px 1fr; }
  .entri-portal .lambang{ font-size:1.4rem; }
  .strip-statistik .bungkus{ grid-template-columns:repeat(2,1fr); }
  .kaki-cetak .bungkus{ grid-template-columns:1fr; }
}