/* ==========================================================================
   Agenda Event - slider banner di home, halaman daftar, dan halaman detail.
   Hero halaman daftar TIDAK di sini: memakai .speakers-hero dari
   speakers-index.css agar seragam dengan Speakers dan Package Program.
   Style popup ada di event-popup.css karena dimuat global.

   Palet mengikuti DESIGN.md: primary #CC0000, primary-strong #A30000,
   teks #171822, border #D3D7D8, muted #9D9D9D.
   ========================================================================== */

:root {
    --ev-primary: #CC0000;
    --ev-primary-strong: #A30000;
    --ev-ink: #171822;
    --ev-muted: #9D9D9D;
    --ev-border: #D3D7D8;
    --ev-surface: #FFFFFF;
    --ev-surface-alt: #FAFAFA;
}

/* ==========================================================================
   1. Kartu tiket agenda event di perbatasan hero halaman utama
   ========================================================================== */

/* Bentuknya kartu tiket putih yang menumpang di garis batas hero: separuh atas
   di atas foto hero, separuh bawah di atas bidang putih setinggi
   --ev-hero-overlap yang digambar home.css (.hero-home--with-events::after).
   Satu angka itu yang mengatur seberapa dalam kartu turun; home.css membaca
   variabel yang sama, jadi bidang putih dan kartunya tidak pernah meleset.

   Kartunya putih, bukan kaca gelap seperti sebelumnya: di atas foto hero yang
   gelap itu kontrasnya jauh lebih tinggi, dan putihnya menyambung ke section
   pencarian di bawahnya. */
:root {
    --ev-hero-overlap: 92px;
}

.ev-hero-wrap {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
}

/* Tepi kiri-kanan kartu, dihitung dari container yang sudah terpusat - jadi
   margin kanan dan kirinya selalu sama besar.

   10px menyamai padding .hero-section .hero-text, jadi di layar kecil tepi kiri
   kartu sejajar dengan judul hero. Di desktop kartu ditarik lebih ke dalam:
   hasil review, kartu tidak perlu membentang penuh dari kiri ke kanan. Di
   992-1199px tarikannya dikurangi; container di lebar itu cuma 960px, kalau
   ditarik 48px juga kartunya jadi terlalu sempit untuk poster, teks, dan
   tombol sekaligus. */
.ev-hero-inner {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 992px) {
    .ev-hero-inner {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1200px) {
    .ev-hero-inner {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* Baris judul di atas kartu, masih di atas foto hero - teksnya putih. */
.ev-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ev-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.ev-hero-eyebrow i {
    font-size: 13px;
    color: #FF5A5A;
}

.ev-hero-head-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ev-hero-see-all {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    transition: opacity .2s ease;
}

.ev-hero-see-all i {
    margin-left: 7px;
    font-size: 12px;
}

.ev-hero-see-all:hover {
    color: #fff;
    opacity: .8;
    text-decoration: none;
}

/* Titik indikator dirender Owl ke dalam wadah ini (opsi dotsContainer di
   home.js). Wadahnya tetap dirender walau cuma ada satu event - saat itu Owl
   tidak mengisinya dan gap flex tidak menyisakan lebar apa pun. */
.ev-hero-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Owl memasang kelas ini pada wadahnya selama titiknya mati (satu event saja). */
.ev-hero-dots.disabled { display: none; }

.ev-hero-dots button.owl-dot {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.ev-hero-dots button.owl-dot span {
    display: block;
    width: 8px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    transition: width .25s ease, background .25s ease;
}

.ev-hero-dots button.owl-dot.active span {
    width: 24px;
    background: #fff;
}

/* Satu slide = satu event. Tingginya dipatok (bukan min-height) supaya semua
   slide sama persis: kalau tidak, tinggi kartu berubah tiap geser, dan karena
   kartunya menempel di garis batas hero, garis batas itu ikut bergoyang.

   Angka tingginya dihitung dari isi terburuk: dua badge, judul dua baris, dan
   meta dua baris. */
/* Bayangan kartu digambar DI BELAKANG carousel, bukan menempel di kartunya.

   Owl memasang overflow: hidden pada .owl-stage-outer, sementara satu slide
   berukuran persis sekotak itu. Bayangan yang menempel di kartu karena itu
   selalu terpotong rata di keempat sisinya - terbaca sebagai kotak, bukan
   sebagai bayangan, berapa pun nilainya. Memberi padding pada kotak potongnya
   hanya menolong ke bawah: padding kiri-kanan membuka tepi slide sebelahnya.

   Lapisan ini duduk di luar kotak potong itu dan ukurannya mengikuti kartu
   (inset 0 pada .ev-hero-slider, yang tingginya persis setinggi satu slide),
   jadi bayangannya menyebar utuh ke empat sisi. Kartunya sendiri tidak
   berbayang: ia menutupi lapisan ini. */
.ev-hero-slider {
    position: relative;
}

.ev-hero-slider::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 18px;
    /* Nilainya disalin dari .home-search-card:hover di home.css - kartu
       "Jelajahi Kategori Pembicara" tepat di bawahnya - supaya dua kartu yang
       bersebelahan itu punya ketebalan bayangan yang sama. Garis 1px-nya ikut
       dibawa: dengan bayangan seringan ini, tepi bawah kartu putih di atas
       bidang putih nyaris tidak terlihat tanpa garis itu. */
    box-shadow: 0 8px 32px rgba(0, 0, 0, .08), 0 0 0 1px #e2e8f0;
    pointer-events: none;
}

.ev-hero-slide {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 188px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 16px;
    border-radius: 18px;
    background: var(--ev-surface);
    color: var(--ev-ink);
    text-decoration: none;
}

/* Kartu sengaja diam saat hover. Tandanya cukup tombol "Lihat Detail" yang
   menggelap di aturan di bawah - kartu ini duduk di garis batas hero, dan kalau
   ia naik-turun, jaraknya ke bidang putih di bawahnya ikut berubah. */
.ev-hero-slide:hover {
    color: var(--ev-ink);
    text-decoration: none;
}

/* Poster A5 - gambar yang sama dengan popup dan halaman detail. Tingginya
   ditetapkan supaya height: 100% pada gambarnya punya acuan yang pasti; tanpa
   itu img jatuh ke tinggi aslinya dan justru dia yang menentukan tinggi kartu. */
.ev-hero-slide-media {
    position: relative;
    align-self: stretch;
    flex: 0 0 120px;
    width: 120px;
    border-radius: 12px;
    overflow: hidden;
    background: #F1F3F4;
}

.ev-hero-slide-media img,
.ev-hero-slide-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ev-hero-slide-media img {
    display: block;
    object-fit: cover;
}

.ev-hero-slide-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ev-muted);
}

.ev-hero-slide-placeholder i { font-size: 24px; }

.ev-hero-slide-placeholder span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}

/* min-width: 0 wajib: tanpa itu flex item tidak mau menyusut dan judul panjang
   mendorong kolom biaya keluar dari kartu. */
.ev-hero-slide-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Isinya tidak boleh diperas tinggi kartu: tanpa ini, isi yang kepanjangan
   membuat judul menyusut jadi satu baris yang terpotong di tengah huruf. */
.ev-hero-slide-body > * {
    flex: 0 0 auto;
}

.ev-hero-slide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ev-hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ev-primary);
}

.ev-hero-tag--live {
    background: transparent;
    border: 1px solid var(--ev-border);
    color: #5A6166;
}

.ev-hero-slide-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.26;
    color: var(--ev-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ev-hero-slide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 13px;
    color: #4A5157;
}

.ev-hero-meta-item {
    display: inline-flex;
    align-items: center;
}

.ev-hero-meta-item i {
    margin-right: 7px;
    font-size: 13px;
    color: var(--ev-primary);
}

/* Kolom kanan: biaya dan tombol, dipisah garis putus-putus seperti sobekan
   tiket. */
.ev-hero-slide-aside {
    flex: 0 0 248px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 26px;
    border-left: 2px dashed #DFE3E6;
}

.ev-hero-price-label {
    font-size: 11.5px;
    color: #6B7278;
    margin-bottom: 2px;
}

.ev-hero-price-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ev-ink);
    margin-bottom: 12px;
}

.ev-hero-slide-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: var(--ev-primary);
    transition: background .2s ease;
}

.ev-hero-slide-cta i { font-size: 12px; }

.ev-hero-slide:hover .ev-hero-slide-cta {
    background: var(--ev-primary-strong);
}

/* Biaya muncul dua tempat, tapi tidak pernah berbarengan: kolom kanan di
   desktop, baris meta di bawah 992px (kolom kanannya disembunyikan). */
@media (min-width: 992px) {
    .ev-hero-meta-item--price { display: none; }
}

/* Layar pendek: hero setinggi layar harus memuat teks hero DAN kartu ini, jadi
   kartunya dirampingkan. */
@media (max-height: 700px) and (min-width: 992px) {
    :root { --ev-hero-overlap: 80px; }

    .ev-hero-slide { height: 164px; gap: 18px; }
    .ev-hero-slide-media { flex-basis: 104px; width: 104px; }
    .ev-hero-slide-title { font-size: 20px; }
    .ev-hero-slide-aside { flex-basis: 220px; padding-left: 20px; }
    .ev-hero-price-value { font-size: 21px; margin-bottom: 9px; }
    .ev-hero-slide-cta { padding: 11px 16px; font-size: 13.5px; }
}

/* Tablet ke bawah: kolom biaya + tombol dilepas - seluruh kartu sudah jadi
   tautan ke halaman detail, dan biayanya pindah ke baris meta. */
@media (max-width: 991px) {
    :root { --ev-hero-overlap: 90px; }

    .ev-hero-slide { height: 184px; }
    .ev-hero-slide-media { flex-basis: 112px; width: 112px; }
    .ev-hero-slide-title { font-size: 20px; }
    .ev-hero-slide-aside { display: none; }
}

@media (max-width: 575px) {
    :root { --ev-hero-overlap: 76px; }

    .ev-hero-head { margin-bottom: 10px; gap: 8px; }

    /* Label dan "lihat semua" harus muat satu baris di layar 360px. */
    .ev-hero-eyebrow {
        font-size: 10.5px;
        letter-spacing: .06em;
        white-space: nowrap;
    }

    .ev-hero-see-all { font-size: 11.5px; }
    .ev-hero-head-actions { gap: 10px; }

    .ev-hero-slider::before { border-radius: 14px; }

    .ev-hero-slide { height: 168px; gap: 12px; padding: 12px; border-radius: 14px; }
    .ev-hero-slide-media { flex-basis: 84px; width: 84px; border-radius: 10px; }
    .ev-hero-slide-body { gap: 6px; }
    .ev-hero-slide-title { font-size: 15px; line-height: 1.3; }

    /* 11px supaya tanggal terpanjang ("30 September - 2 Oktober 2026") dan nama
       lokasi - sudah dipotong 28 karakter di partial - masing-masing muat satu
       baris di sisa lebar kartu. */
    .ev-hero-slide-meta { gap: 4px 10px; font-size: 11px; }
    .ev-hero-meta-item i { margin-right: 5px; font-size: 11px; }

    .ev-hero-tag { font-size: 9.5px; padding: 3px 8px; }

    /* Jam dilepas di layar sempit: empat item meta jadi empat baris dan tidak
       muat di kartu yang tingginya dipatok. Tanggal, lokasi, dan biaya yang
       paling menentukan orang mau klik atau tidak. */
    .ev-hero-meta-item--time { display: none; }

    /* Badge "sedang berlangsung" ikut dilepas: berdua dengan badge kategori
       selalu pecah jadi dua baris di lebar ini. */
    .ev-hero-tag--live { display: none; }
}

/* ==========================================================================
   2. Halaman daftar event
   ========================================================================== */

.ev-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.ev-section { padding: 56px 0; }

.ev-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.ev-search {
    display: flex;
    flex: 1 1 320px;
    margin-right: 14px;
}

/* Bingkai pencarian dibuat flex dan ikon menjadi elemen sejajar, BUKAN elemen
   absolut di atas input. Alasannya: custom-global.css memasang
   `input:not([type="file"]) { padding: 8px 15px !important }`, sehingga padding
   kiri input tidak bisa ditimpa lewat spesifisitas apa pun dan ikon kaca
   pembesar akan selalu tertimpa teks placeholder. Dengan ikon sebagai elemen
   flex, padding bawaan itu justru berguna sebagai jarak antara ikon dan teks -
   tidak perlu !important balasan.

   Border dan latar dipindah ke bingkai ini supaya input bisa transparan. */
.ev-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    margin-right: 10px;
    padding-left: 14px;
    border: 1px solid var(--ev-border);
    border-radius: 8px;
    background: var(--ev-surface);
}

.ev-search-field:focus-within { border-color: var(--ev-primary); }

.ev-search-icon {
    flex-shrink: 0;
    color: var(--ev-muted);
    font-size: 14px;
}

/* Selector induk dipakai agar border dan latar bawaan custom-global.css
   (keduanya tanpa !important) kalah dari aturan ini. */
.ev-search .ev-search-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ev-ink);
}

.ev-search .ev-search-input:focus {
    outline: none;
}

.ev-search-clear {
    flex-shrink: 0;
    padding: 0 12px;
    color: var(--ev-muted);
    font-size: 13px;
}

.ev-search-submit {
    height: 46px;
    padding: 0 22px;
    border: none;
    border-radius: 8px;
    background: var(--ev-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.ev-search-submit:hover { background: var(--ev-primary-strong); }

.ev-scope-toggle {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--ev-border);
    border-radius: 9px;
    background: var(--ev-surface-alt);
}

.ev-scope-btn {
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5F6068;
    transition: background .2s ease, color .2s ease;
}

.ev-scope-btn:hover { color: var(--ev-primary); text-decoration: none; }

.ev-scope-btn.is-active {
    background: var(--ev-primary);
    color: #fff;
}

.ev-scope-btn.is-active:hover { color: #fff; }

.ev-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.ev-tab {
    padding: 9px 18px;
    margin: 0 9px 9px 0;
    border: 1px solid var(--ev-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #5F6068;
    background: var(--ev-surface);
    transition: all .2s ease;
}

.ev-tab:hover {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
    text-decoration: none;
}

.ev-tab.is-active {
    background: var(--ev-primary);
    border-color: var(--ev-primary);
    color: #fff;
}

/* Kartu event */
/* 240px dipilih supaya container 1140px memuat 4 kolom (4x240 + 3x24 = 1032),
   ritme yang sama dengan carousel di halaman utama. Pada 280px hanya muat 3
   kolom dan kartu A5 menjadi terlalu jangkung. */
.ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: 24px 24px;
}

/* Bentuknya mengikuti .doc-card: gambar membulat lalu teks di bawahnya, tanpa
   kotak kartu - sama seperti grid halaman dokumentasi. Warnanya tetap dari
   DESIGN.md. Rasio gambarnya A5 (148:210), sama dengan popup dan halaman
   detail, karena kolom yang ditampilkan memang poster. */
.ev-card {
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Kartu sengaja diam saat hover - tanpa terangkat. Di layar sentuh state hover
   nyangkut setelah ketukan, dan di grid dua kolom kartu yang naik-turun bikin
   barisnya terlihat goyang. */
.ev-card:hover {
    text-decoration: none;
}

.ev-card-media {
    position: relative;
    aspect-ratio: 148 / 210;
    border-radius: 14px;
    background: var(--ev-surface-alt);
    overflow: hidden;
}

.ev-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.ev-card:hover .ev-card-media img { transform: scale(1.05); }

.ev-card-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ev-muted);
    font-size: 12px;
}

.ev-card-placeholder i {
    font-size: 30px;
    margin-bottom: 6px;
}

.ev-card-body {
    display: flex;
    flex-direction: column;
    padding: 16px 4px 4px;
    flex: 1;
}

.ev-card-cat {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--ev-primary);
    margin-bottom: 7px;
}

.ev-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ev-ink);
    margin: 0;
    min-height: 45px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Baris meta mengalir ke samping seperti .doc-card-meta, bukan menumpuk. */
.ev-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
    font-size: 13px;
    color: #5F6068;
}

.ev-card-meta-item {
    display: inline-flex;
    align-items: center;
    margin: 4px 20px 0 0;
}

.ev-card-meta-item i {
    margin-right: 8px;
    font-size: 14px;
    color: var(--ev-muted);
}

.ev-card.is-past { opacity: .72; }

.ev-empty {
    text-align: center;
    padding: 64px 20px;
    border: 1px dashed var(--ev-border);
    border-radius: 12px;
    background: var(--ev-surface-alt);
}

.ev-empty-icon {
    font-size: 38px;
    color: var(--ev-border);
    margin-bottom: 14px;
}

.ev-empty-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--ev-ink);
    margin: 0 0 8px;
}

.ev-empty-desc {
    font-size: 14px;
    color: #5F6068;
    max-width: 440px;
    margin: 0 auto 18px;
    line-height: 1.7;
}

/* Pagination */
.ev-pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.ev-pagination {
    display: flex;
    align-items: center;
}

.ev-page-btn {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    margin: 0 3px;
    border: 1px solid var(--ev-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ev-ink);
    background: var(--ev-surface);
    transition: all .2s ease;
}

.ev-page-btn:hover {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
    text-decoration: none;
}

.ev-page-btn.is-active {
    background: var(--ev-primary);
    border-color: var(--ev-primary);
    color: #fff;
}

.ev-page-btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.ev-page-btn.is-ellipsis {
    border-color: transparent;
    pointer-events: none;
}

@media (max-width: 767px) {
    .ev-section { padding: 40px 0; }
    .ev-toolbar { flex-direction: column; align-items: stretch; }

    /* flex-basis diikat ke sumbu utama, dan di sini sumbu utamanya sudah
       berputar jadi vertikal karena toolbar berubah menjadi kolom. Nilai 320px
       dari aturan desktop (`flex: 1 1 320px`) otomatis terbaca sebagai TINGGI,
       sehingga kotak pencarian memuai setinggi 320px dan tombol "Cari"
       terlempar ke pojok atas. Lebar sudah penuh berkat align-items: stretch,
       jadi di layar ini tingginya cukup mengikuti isi. */
    .ev-search { flex: 0 0 auto; margin: 0 0 14px; }

    .ev-scope-toggle { justify-content: center; }

    /* Dua kolom tetap, bukan auto-fill: pada lebar HP minmax(240px) hanya
       memuat satu kolom sehingga daftar jadi sangat panjang. Dua kolom juga
       menyambung dengan rentang 576-767px yang memang sudah dua kolom. */
    .ev-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 22px 14px;
    }

    /* Kolom menyempit ke ~165px, jadi tipografi kartu ikut diturunkan supaya
       judul tidak terpotong di tengah kata dan meta tidak berdesakan. */
    .ev-card-body { padding: 12px 2px 2px; }
    .ev-card-cat { font-size: 10px; letter-spacing: .6px; margin-bottom: 5px; }
    .ev-card-title { font-size: 14px; min-height: 39px; }
    /* Meta ditumpuk, tidak mengalir ke samping: di kolom selebar ini tanggal +
       lokasi kadang muat satu baris dan kadang pecah dua, membuat tinggi kartu
       bersebelahan tidak sama. Satu item per baris bikin ritmenya rata. */
    .ev-card-meta { display: block; margin-top: 9px; font-size: 12px; }
    .ev-card-meta-item { display: flex; margin: 3px 0 0; }
    .ev-card-meta-item i { margin-right: 6px; font-size: 13px; }
}

/* ==========================================================================
   3. Halaman detail event
   ========================================================================== */

.ev-detail { padding: 46px 0 64px; }

.ev-back {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #5F6068;
    margin-bottom: 22px;
}

.ev-back i { margin-right: 8px; }

.ev-back:hover { color: var(--ev-primary); text-decoration: none; }

.ev-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-gap: 34px;
    align-items: start;
}

/* Poster ditampilkan pada rasio A5 (148:210) di rail samping, bukan sebagai
   banner lebar di atas konten. Lebar rail 340px menghasilkan tinggi 482px. */
.ev-detail-poster {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
    background: #EDEDED;
    aspect-ratio: 148 / 210;
}

.ev-detail-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-detail-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--ev-primary);
    margin-bottom: 10px;
}

.ev-detail-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ev-ink);
    margin: 0 0 14px;
}

.ev-detail-lead {
    font-size: 16px;
    line-height: 1.8;
    color: #5F6068;
    margin: 0 0 26px;
}

.ev-detail-body {
    font-size: 16px;
    line-height: 1.85;
    color: #3A3B44;
}

.ev-detail-body img { max-width: 100%; height: auto; border-radius: 8px; }
.ev-detail-body h2 { font-size: 24px; font-weight: 700; margin: 30px 0 12px; color: var(--ev-ink); }
.ev-detail-body h3 { font-size: 19px; font-weight: 600; margin: 24px 0 10px; color: var(--ev-ink); }
.ev-detail-body ul, .ev-detail-body ol { padding-left: 22px; margin-bottom: 16px; }
.ev-detail-body li { margin-bottom: 7px; }

/* Sidebar info */
/* Kartu info kini berada di bawah konten, bukan di rail. Sticky dilepas karena
   tidak ada lagi kolom panjang untuk diikuti. */
.ev-info-card {
    border: 1px solid var(--ev-border);
    border-radius: 12px;
    background: var(--ev-surface);
    overflow: hidden;
    margin-top: 34px;
}

.ev-info-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ev-border);
    font-size: 15px;
    font-weight: 600;
    color: var(--ev-ink);
    background: var(--ev-surface-alt);
}

/* Di kolom selebar ini satu baris per data akan melar dan berjarak jauh dari
   nilainya, jadi daftarnya dipecah menjadi beberapa kolom. */
.ev-info-list {
    padding: 14px 20px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    grid-gap: 4px 24px;
}

.ev-info-row {
    display: flex;
    padding: 10px 0;
}

.ev-info-icon {
    width: 18px;
    margin-right: 12px;
    color: var(--ev-primary);
    font-size: 15px;
    flex-shrink: 0;
    padding-top: 2px;
}

.ev-info-label {
    font-size: 12px;
    color: var(--ev-muted);
    margin-bottom: 2px;
}

.ev-info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--ev-ink);
    line-height: 1.5;
}

.ev-info-actions {
    padding: 4px 20px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ev-info-actions .ev-btn { margin-bottom: 0; }

.ev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: all .2s ease;
}

.ev-btn i { margin-right: 9px; }

.ev-btn-primary {
    background: var(--ev-primary);
    color: #fff;
}

.ev-btn-primary:hover { background: var(--ev-primary-strong); color: #fff; text-decoration: none; }

.ev-btn-ghost {
    border: 1px solid var(--ev-border);
    color: var(--ev-ink);
    background: var(--ev-surface);
}

.ev-btn-ghost:hover { border-color: var(--ev-primary); color: var(--ev-primary); text-decoration: none; }

.ev-closed-note {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #FFF4F4;
    border: 1px solid #F7C1C1;
    color: #791F1F;
    font-size: 13px;
    line-height: 1.6;
}

.ev-closed-note strong { display: block; margin-bottom: 3px; }

/* Ditampilkan di halaman detail saat pengunjung yang login sudah mendaftar. */
.ev-registered-note {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #F0FAF4;
    border: 1px solid #BFE6D0;
    color: #12864E;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
}
.ev-registered-note i { font-size: 16px; }

.ev-related { padding: 50px 0 64px; background: var(--ev-surface-alt); }

.ev-related-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ev-ink);
    margin: 0 0 24px;
}

@media (max-width: 991px) {
    .ev-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .ev-detail-title { font-size: 25px; }
    .ev-detail { padding: 30px 0 48px; }
}