:root{
  --marun: #6E1423;
  --marun-deep: #4A0D18;
  --emas: #C6972F;
  --emas-terang: #E3B45B;
  --hitam: #1C1712;
  --krem: #F6EFDF;
  --krem-kartu: #FBF7EC;
  --hijau: #33473A;
  --teks: #2B231C;
  --teks-mute: #6B5F51;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{ scroll-behavior: smooth; }

body{
  background: var(--krem);
  color: var(--teks);
  font-family: 'Source Sans 3', sans-serif;
  line-height: 1.6;
}

h1, h2, h3, .brand{
  font-family: 'Fraunces', serif;
}

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

::selection{ background: var(--emas); color: var(--hitam); }

.reveal{
  opacity: 0;
  transform: translateY(18px);
  animation: naik .8s ease forwards;
}
.reveal.r2{ animation-delay: .12s; }
.reveal.r3{ animation-delay: .24s; }
@keyframes naik{
  to{ opacity:1; transform: translateY(0); }
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 2px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid var(--emas);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
}
.btn-emas{
  background: var(--emas);
  color: var(--marun-deep);
}
.btn-emas:hover{
  background: var(--emas-terang);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(198,151,47,.35);
}
.btn-garis{
  background: transparent;
  color: var(--emas-terang);
}
.btn-garis:hover{
  background: rgba(230,200,150,.12);
  transform: translateY(-2px);
}

/* ---------- Motif anyaman (signature background pattern) ---------- */
.anyaman{
  height: 10px;
  width: 100%;
  background-image: repeating-linear-gradient(135deg, var(--emas) 0 6px, var(--marun) 6px 12px);
}
.anyaman.tipis{ height:6px; opacity:.85; }

/* ---------- Nav ---------- */
header.nav{
  background: var(--hitam);
  color: var(--krem);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.nav-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.brand{
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--emas-terang);
}
.brand span{ color: var(--krem); font-weight: 300; }
nav.links{ display:flex; gap: 28px; }
nav.links a{
  font-size: .92rem;
  color: var(--krem);
  opacity: .85;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: opacity .2s, border-color .2s;
}
nav.links a:hover{ opacity: 1; border-color: var(--emas); }
nav.links a.aktif{ opacity: 1; border-color: var(--emas); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background:
    radial-gradient(ellipse 700px 420px at 50% -10%, rgba(230,180,91,.16), transparent 65%),
    radial-gradient(circle, rgba(230,200,150,.12) 1.4px, transparent 1.4px) 0 0/28px 28px,
    linear-gradient(180deg, var(--marun-deep) 0%, var(--marun) 55%, var(--marun) 100%);
  color: var(--krem);
  text-align:center;
  padding: 76px 24px 0;
  overflow: hidden;
}
.hero::before, .hero::after{
  content:"";
  position:absolute;
  top: 26px;
  width: 92px; height: 92px;
  border-top: 1.5px solid rgba(230,200,150,.35);
  opacity: .8;
}
.hero::before{ left: 26px; border-left: 1.5px solid rgba(230,200,150,.35); }
.hero::after{ right: 26px; border-right: 1.5px solid rgba(230,200,150,.35); }
.hero-eyebrow{
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--emas-terang);
  margin-bottom: 18px;
}
.hero h1{
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 600;
  max-width: 780px;
  margin: 0 auto 20px;
  line-height: 1.18;
}
.hero p.lead{
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  color: #F0DFC9;
}

.stat-row{
  max-width: 780px;
  margin: 0 auto;
  display:flex;
  justify-content:center;
  gap: 0;
  border-top: 1px solid rgba(230,200,150,.25);
}
.stat{
  flex:1;
  padding: 26px 12px 34px;
  border-left: 1px solid rgba(230,200,150,.25);
}
.stat:first-child{ border-left: none; }
.stat .num{
  font-family:'Fraunces', serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--emas-terang);
  display:block;
}
.stat .label{
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D8C2A5;
  margin-top: 6px;
  display:block;
}

.gonjong-wrap{
  margin-top: 46px;
  line-height: 0;
}

/* ---------- Section shell ---------- */
section{
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 24px;
}
.section-head{
  text-align:center;
  max-width: 620px;
  margin: 0 auto 46px;
}
.section-head .kicker{
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marun);
  font-weight: 600;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-head .kicker::before,
.section-head .kicker::after{
  content:"";
  width: 22px;
  height: 1px;
  background: var(--emas);
}
.section-head{ display:flex; flex-direction:column; align-items:center; }
.section-head h2{
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--hitam);
}
.section-head p{
  color: var(--teks-mute);
  margin-top: 12px;
  font-size: .98rem;
}

/* ---------- Kartu acara (mirrors HTML/CSS/Bootstrap cards) ---------- */
.kartu-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.kartu{
  background: var(--krem-kartu);
  border: 1px solid #E7DBBF;
  border-top: 4px solid var(--emas);
  padding: 30px 26px 28px;
  border-radius: 4px;
  transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
  display: block;
  height: 100%;
}
.kartu:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(74,13,24,.1);
  border-top-color: var(--marun);
}
.kartu .jam{
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marun);
  font-weight: 600;
}
.kartu h3{
  font-size: 1.2rem;
  margin: 10px 0 12px;
  color: var(--hitam);
  font-weight: 600;
}
.kartu p{
  font-size: .93rem;
  color: var(--teks-mute);
}

/* ---------- Kartu bisa diklik / tautan ke halaman detail ---------- */
.kartu.klikabel{ cursor: pointer; position: relative; }
.kartu.klikabel .baca-selengkapnya{
  display:block;
  margin-top: 16px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--marun);
}

/* ---------- Rundown list (mirrors "List Mata Kuliah") ---------- */
.rundown{
  background: var(--krem-kartu);
  border: 1px solid #E7DBBF;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(28,23,18,.06);
}
.rundown-sesi{
  padding: 22px 30px 6px;
  background: #EFE4C8;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--marun-deep);
  border-top: 1px solid #E0D2AC;
}
.rundown-sesi:first-child{ border-top: none; }
.item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 20px;
  padding: 16px 30px;
  border-top: 1px solid #EFE4C8;
  border-left: 3px solid transparent;
  transition: background .2s ease, border-left-color .2s ease;
}
.item:hover{
  background: #F6EDD3;
  border-left-color: var(--emas);
}
.item .nama{ font-weight: 600; color: var(--teks); font-size: .98rem; }
.item .ket{ font-size: .84rem; color: var(--teks-mute); margin-top: 2px; }
.item .waktu{
  flex-shrink:0;
  font-size: .82rem;
  color: var(--marun);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Tata tertib ---------- */
.tertib{
  background: var(--hijau);
  color: var(--krem);
}
.tertib .section-head h2{ color: var(--krem); }
.tertib .section-head p{ color: #D3DBD4; }
.tertib-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 40px;
  max-width: 760px;
  margin: 0 auto;
}
.tertib-grid div{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  font-size: .93rem;
  padding: 16px 18px;
  border: 1px solid rgba(230,200,150,.2);
  border-radius: 4px;
  transition: background .2s ease, border-color .2s ease;
}
.tertib-grid div:hover{
  background: rgba(230,200,150,.08);
  border-color: rgba(230,200,150,.4);
}
.tertib-grid .bullet{
  color: var(--emas-terang);
  font-family:'Fraunces', serif;
  font-weight: 700;
}

/* ---------- Footer ---------- */
footer{
  background: var(--hitam);
  color: #C9BDA9;
  text-align:center;
  padding: 50px 24px 34px;
  border-top: 1px solid rgba(230,200,150,.15);
}
footer .brand{ display:block; margin-bottom: 10px; font-size: 1.05rem; }
footer .konfirmasi{
  font-size: .9rem;
  margin-bottom: 22px;
  color: #E3D6BC;
}
footer .copy{
  font-size: .78rem;
  color: #7A6E5C;
}

.lokasi-kartu{
  max-width: 640px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap: 22px;
  background: var(--krem-kartu);
  border: 1px solid #E7DBBF;
  border-radius: 6px;
  padding: 26px 30px;
  box-shadow: 0 20px 40px rgba(28,23,18,.06);
}
.lokasi-ikon{
  flex-shrink:0;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--marun);
  display:flex; align-items:center; justify-content:center;
}
.lokasi-teks .nama-tempat{
  font-family:'Fraunces', serif;
  font-weight: 600;
  color: var(--hitam);
  margin-bottom: 4px;
}
.lokasi-teks .alamat{
  font-size: .92rem;
  color: var(--teks-mute);
}

/* ============================================================
   HALAMAN DETAIL (mengikuti pola breadcrumb + detail-main TRR)
   ============================================================ */
.detail-main{
  padding: 56px 24px 0;
  max-width: 820px;
  margin: 0 auto;
}
.breadcrumb-custom{
  font-size: .85rem;
  color: var(--teks-mute);
  display:flex;
  align-items:center;
  gap: 6px;
  margin-bottom: 22px;
}
.breadcrumb-custom a{ color: var(--teks-mute); text-decoration:none; }
.breadcrumb-custom a:hover{ color: var(--marun); }
.breadcrumb-current{ color: var(--marun); font-weight: 600; }

.detail-eyebrow{
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marun);
  font-weight: 600;
  margin-bottom: 12px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.detail-eyebrow::before{ content:""; width:22px; height:1px; background: var(--emas); }

.detail-title{
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 600;
  color: var(--hitam);
  margin-bottom: 34px;
  line-height: 1.2;
}

.detail-card{
  background: var(--krem-kartu);
  border: 1px solid #E7DBBF;
  border-top: 6px solid var(--emas);
  border-radius: 6px;
  padding: 38px 40px 40px;
  box-shadow: 0 20px 40px rgba(28,23,18,.06);
  margin-bottom: 56px;
}
.detail-card .section-title{
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--marun-deep);
  margin-bottom: 16px;
}
.detail-card h4{
  font-family:'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--marun-deep);
  margin: 24px 0 8px;
}
.detail-card h4:first-of-type{ margin-top: 6px; }
.detail-card .section-text,
.detail-card p{
  font-size: .95rem;
  color: var(--teks);
  line-height: 1.8;
  margin-bottom: 12px;
}
.detail-card ul{
  margin: 8px 0 14px 20px;
  font-size: .93rem;
  color: var(--teks);
  line-height: 1.7;
}
.detail-card ul li{ margin-bottom: 6px; }
.detail-card .catatan{
  margin-top: 26px;
  padding: 16px 18px;
  background: #EFE4C8;
  border-left: 3px solid var(--emas);
  font-size: .88rem;
  color: var(--teks-mute);
  border-radius: 2px;
}

.detail-kembali{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--marun);
  margin-bottom: 30px;
}
.detail-kembali:hover{ text-decoration: underline; }

@media (max-width: 780px){
  .lokasi-kartu{ flex-direction:column; text-align:center; }
  nav.links{ gap: 16px; }
  .stat-row{ flex-direction: column; }
  .stat{ border-left:none; border-top: 1px solid rgba(230,200,150,.25); }
  .stat:first-child{ border-top:none; }
  .kartu-grid{ grid-template-columns: 1fr; }
  .tertib-grid{ grid-template-columns: 1fr; }
  .item{ flex-direction: column; gap: 4px; }
  .detail-card{ padding: 28px 22px 30px; }
}