/* --- GLOBAL CARD STYLES --- */

:root {
    --aesir-accent: var(--madara-main-color, #e91e63); 
    --aesir-bg: #000;
    --aesir-pill-bg: #2a2a2a;
    --aesir-text: #fff;
}

/* CARD BASE */
.aesir-card { 
    position: relative; 
    display: block; 
    width: 100%; 
    /* RATIO 9:16 (16 dibagi 9 = 1.7778) */
    padding-top: 177.78%; 
    background: transparent; 
    border: none !important; 
    box-shadow: none !important;
}

.aesir-inner {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
}

/* COVER IMAGE */
.aesir-cover-box {
    flex: 1; 
    position: relative !important; width: 100%; min-height: 0 !important; 
    border-radius: 8px; overflow: hidden;
    background: #000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: block !important;
}

.aesir-cover-box img {
    width: 100% !important; height: 100% !important; 
    object-fit: cover !important; object-position: top center !important;
    transition: transform 0.4s ease;
    margin: 0 !important;
}
.aesir-cover-box:hover img { transform: scale(1.05); }

/* TITLE OVERLAY */
.aesir-ovl {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 10%, transparent 100%);
    padding: 40px 6px 10px; pointer-events: none; z-index: 5;
}
.aesir-ovl-tit { 
    color: #fff !important; font-size: 13px; font-weight: 700; line-height: 1.3; margin: 0;
    text-align: center; text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- BADGES --- */

/* 1. Time Badge (Top Left) */
.aesir-time-badge {
    position: absolute; top: 6px; left: 6px; z-index: 20; 
    background: var(--aesir-accent); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 5px 6px; border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    display: flex; align-items: center; line-height: 1;
}
.aesir-time-badge i { margin-right: 3px; font-size: 0.9em; }
.aesir-time-badge.icon-only { padding: 5px 6px; }
.aesir-time-badge.icon-only i { margin-right: 0; }

/* 2. Status Badge (Under Time) */
.aesir-status-badge {
    position: absolute !important; top: 30px !important; left: 6px !important; z-index: 20 !important;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    width: auto; pointer-events: none; 
}
.aesir-badge-item {
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    padding: 5px 6px; border-radius: 4px; color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); letter-spacing: 0.5px;
    display: inline-flex; align-items: center; line-height: 1;
}
.aesir-badge-item i { margin-right: 4px; font-size: 0.9em; }
.aesir-badge-up { background: #ff5722; animation: aesirPulse 1.5s infinite; }
.aesir-badge-mass { background: #7b1fa2; }
@keyframes aesirPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* 3. Custom Right Badge (Top Right) */
.aesir-badge-wrap {
    position: absolute !important;
    top: 5px;
    right: 5px;
    z-index: 5;
    display: flex;
    flex-direction: column; /* Menyusun ke bawah */
    align-items: flex-end;  /* Rata kanan */
    gap: 4px;               /* Jarak antar badge */
}

.aesir-badge {
    padding: 5px 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
    backdrop-filter: blur(2px);
    line-height: 1;
}

/* Warna Badge */
.badge-adult { background: #ab0000; } /* Merah Gelap */
.badge-end   { background: #bf9000; } /* Kuning Gelap */
.badge-custom { background: #444; }   /* Default Custom */

/* =========================================
   HEADER SECTION (NEW)
   ========================================= */
.aesir-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Judul Kiri, Tombol Kanan */
    width: 100%;
    padding: 15px 0 6px;
}

/* Judul Kiri */
.aesir-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--aesir-text, #fff);
    margin: 0;
    line-height: 1.2;
}

/* Tombol Kanan Atas (Minimalis) */
.aesir-header-link {
    font-size: 12px;
    font-weight: 600;
    color: #888; /* Warna abu-abu agar tidak mencolok */
    text-decoration: none !important;
    transition: 0.3s;
    display: flex; 
    align-items: center; 
    gap: 6px;
}

.aesir-header-link:hover {
    color: var(--aesir-accent, #e91e63); /* Berubah warna saat hover */
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .aesir-ovl-tit { font-size: 11px; }
    .aesir-time-badge { font-size: 9px; padding: 4px 5px; top: 5px; left: 5px; }
    .aesir-status-badge { top: 26px !important; left: 5px !important; }
    .aesir-badge-item { font-size: 8px; padding: 2px 4px; }
    .aesir-badge { top: 5px !important; right: 5px !important; padding: 4px 5px; font-size: 8px; font-weight: 600;}
	
	.aesir-header-row {
		padding-bottom: 0.5em;
	}
	.aesir-header-title { font-size: 16px; }
    .aesir-header-link { font-size: 11px; }
}