/* =========================================
   1. CONTAINER & TYPOGRAPHY UTAMA
   ========================================= */

.asm-song-container, 
.asm-search-wrapper {
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}

/* Judul Lagu */
.asm-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: #222;
    border-bottom: 2px solid #444;
    padding-bottom: 10px;
    line-height: 1.2;
}

/* Kotak Metadata (Versi, Pengarang, dll) */
.asm-meta-box {
    background: #f0f2f5;
    border-left: 4px solid #0073aa;
    padding: 12px 15px;
    margin-bottom: 20px;
    color: #555;
    font-size: 0.95rem;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}

/* =========================================
   2. FILTER PENCARIAN (LAYOUT 1 BARIS)
   ========================================= */

.asm-filter-grid {
    display: flex;             /* Flexbox agar sejajar 1 baris */
    flex-wrap: nowrap;         /* Mencegah turun baris di desktop */
    align-items: flex-end;     /* Sejajarkan elemen di bagian bawah */
    gap: 10px;                 /* Jarak antar elemen */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e2e4e7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.asm-field {
    flex: 1;                   /* Membagi rata lebar kolom input */
    min-width: 0;              /* Mencegah overflow layout flex */
}

.asm-field label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.85em;
    display: block;
    color: #444;
    white-space: nowrap;       /* Label tidak boleh turun baris */
}

.asm-field input[type="text"], 
.asm-field select {
    width: 100%;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 40px;              /* Tinggi fix agar sejajar tombol */
    line-height: normal;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #fff;
}

/* Kolom Tombol (Lebar menyesuaikan isi) */
.asm-field.asm-action {
    flex: 0 0 auto;            
}

.asm-action button {
    height: 40px;
    padding: 0 25px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    transition: background 0.3s;
}

.asm-action button:hover {
    background: #005177;
}
.asm-action button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* RESPONSIVE: Tampilan Mobile (Stack ke bawah) */
@media (max-width: 768px) {
    .asm-filter-grid {
        flex-direction: column; /* Ubah jadi kolom */
        align-items: stretch;   /* Lebar penuh */
        gap: 15px;
    }
    
    .asm-field.asm-action {
        margin-top: 5px;
    }
    
    .asm-action button {
        width: 100%;
    }
}

/* =========================================
   3. HASIL PENCARIAN (AJAX LIST)
   ========================================= */

.asm-song-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    overflow: hidden;
}

.asm-result-item {
    border-bottom: 1px solid #eee;
    background: #fff;
    transition: background 0.2s;
}

.asm-result-item:last-child {
    border-bottom: none;
}

.asm-result-item:hover {
    background: #f0f8ff; /* Biru sangat muda saat hover */
}

.asm-result-link {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: inherit;
}

.asm-result-link:hover {
    text-decoration: none;
}

.asm-res-title {
    display: block;
    font-weight: 700;
    font-size: 1.1em;
    color: #0073aa;
    margin-bottom: 4px;
}

.asm-res-meta {
    font-size: 0.85em;
    color: #777;
    display: block;
}

/* Indikator Loading */
#asm-loading {
    color: #666;
    font-style: italic;
}

/* =========================================
   4. LYRICS & CHORD (TRANSPOSER)
   ========================================= */

.simple-chord-transposer-wrapper {
    margin: 20px 0;
}

.simple-chord-lyrics {
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace; /* WAJIB Monospace untuk chord */
    font-size: 15px;
    line-height: 1.6;
    overflow-x: auto;      /* Scroll jika terlalu lebar di HP */
    white-space: pre-wrap; /* Mempertahankan spasi & enter */
    color: #333;
}

/* =========================================
   5. MEDIA GRID (VIDEO)
   ========================================= */

.asm-media-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ccc;
}

.asm-media-section h3 {
    font-size: 1.2em;
    margin-bottom: 15px;
}

.asm-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive Grid */
    gap: 20px;
}

.asm-media-item iframe {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.asm-media-item .button {
    display: block;
    text-align: center;
    background: #e1306c; /* Warna khas Instagram/Media */
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 5px;
    font-weight: bold;
}

.asm-media-item .button:hover {
    background: #c12055;
}

/* =========================================
   6. FORM USULAN (SUGGESTION BOX)
   ========================================= */

.asm-suggestion-box {
    margin-top: 50px;
    background: #fff9c4; /* Kuning lembut */
    padding: 25px;
    border: 1px solid #fbc02d;
    border-radius: 8px;
    position: relative;
}

.asm-suggestion-box h3 {
    margin-top: 0;
    color: #d4a017; /* Warna teks emas gelap */
    font-size: 1.2em;
}

.asm-suggestion-box input[type="text"],
.asm-suggestion-box textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box;
}

.asm-suggestion-box input[type="submit"] {
    background: #fbc02d;
    color: #333;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

.asm-suggestion-box input[type="submit"]:hover {
    background: #f9a825;
}

/* Notifikasi Alert */
.asm-alert {
    padding: 12px;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 0.95em;
}
.asm-alert.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.asm-alert.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* =========================================
   7. APP LAYOUT (GABUNGAN)
   ========================================= */

.asm-app-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.asm-section-search {
    margin-bottom: 30px; /* Jarak antara search bar dan konten lagu */
    position: sticky;    /* (Opsional) Agar search bar nempel di atas saat scroll */
    top: 20px;
    z-index: 100;
}

/* Agar sticky berfungsi lancar, pastikan background putih dan ada shadow */
.asm-filter-grid {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
    background: #fff; 
}

.asm-section-content {
    min-height: 300px; /* Agar footer tidak naik ke atas saat kosong */
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- CONTROLS BAR --- */
.asm-controls-bar {
    background: #eee;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asm-btn-chord {
    font-size: 12px !important;
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

/* --- LYRICS & CHORD STYLING --- */
.simple-chord-transposer-wrapper {
    border: 1px solid #ddd;
    border-radius: 0 0 5px 5px; /* Rounded bawah */
    overflow: hidden;
}

.simple-chord-lyrics {
    margin: 0;
    background: #fff;
    padding: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    line-height: 1.8; /* Jarak antar baris agar chord tidak tabrakan */
    white-space: pre-wrap;
    color: #333;
}

/* --- LOGIKA HIDE CHORDS --- */
/* Asumsi plugin transposer membungkus chord dengan tag <span> atau sejenisnya.
   Jika plugin belum jalan, kita sembunyikan baris yang isinya hanya chord (deteksi manual via JS sulit di CSS).
   
   Tapi jika Anda menggunakan plugin "Simple Chord Transposer" standard,
   biasanya chord dibungkus class .c atau .chord
*/

/* Sembunyikan elemen chord jika wrapper punya class hide-chords */
.hide-chords .c, 
.hide-chords .chord, 
.hide-chords span[data-chord] {
    display: none !important;
    visibility: hidden;
}

/* Opsi tambahan: Jika chord ada di baris sendiri (baris ganjil), kita rapatkan line-height */
.hide-chords pre {
    line-height: 1.4;
}

/* =========================================
   VIDEO RESPONSIVE WRAPPER (Fix Youtube)
   ========================================= */
.asm-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Rasio 16:9 */
    padding-top: 25px;
    height: 0;
    margin: 20px 0;
    background: #000;
    border-radius: 8px; /* Estetika: sudut tumpul */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.asm-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================
   CONTROLS & LAYOUT (Optional Basic Style)
   ========================================= */
.asm-controls-area {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.asm-btn {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.asm-btn:hover {
    background: #eee;
}

/* Area Lirik agar font monospace dan chord sejajar */
#asm-lyrics-content {
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap; /* Menjaga spasi & enter dari DB */
    line-height: 1.6;
    font-size: 16px;
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
}

/* =========================================
   MOBILE SEARCH TOGGLE (Minimize/Maximize)
   ========================================= */

/* Style Default (Desktop) - Form selalu terbuka */
.asm-search-header {
    display: none; /* Sembunyikan header toggle di desktop */
}
.asm-search-body {
    display: block; /* Selalu tampil di desktop */
}

/* Style Mobile (Layar max 768px) */
@media only screen and (max-width: 768px) {
    
    .asm-search-container {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        background: #fff;
        overflow: hidden;
    }

    /* Header Toggle */
    .asm-search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        background-color: #f8f9fa;
        cursor: pointer;
        border-bottom: 1px solid #eee;
        user-select: none; /* Agar teks tidak terblok saat klik */
    }

    .asm-search-header:hover {
        background-color: #f0f0f0;
    }

    /* Ikon Panah */
    .asm-toggle-icon {
        font-weight: bold;
        transition: transform 0.3s ease;
    }

    /* Saat diminimize, panah berputar */
    .asm-search-header.minimized .asm-toggle-icon {
        transform: rotate(-90deg);
    }

    /* Body Form */
    .asm-search-body {
        padding: 15px;
        /* Animasi halus saat buka tutup */
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        max-height: 1000px; /* Angka besar agar cukup menampung form */
        opacity: 1;
    }

    /* Class untuk menyembunyikan form */
    .asm-search-body.is-hidden {
        display: none; /* Cara simpel sembunyikan total */
        
        /* Opsi animasi (pilih salah satu, display:none lebih performant) */
        /* max-height: 0; opacity: 0; overflow: hidden; */ 
    }
    
    /* Menghilangkan border bottom header saat tertutup agar rapi */
    .asm-search-header.minimized {
        border-bottom: none;
    }
}

/* --- CSS PENCARIAN & FILTER --- */

/* Pastikan header bisa diklik */
#asm-search-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f9f9f9; /* Opsional: memberi warna latar header */
    border: 1px solid #eee;
    border-radius: 5px 5px 0 0; /* Membulatkan sudut atas */
    user-select: none; /* Mencegah teks terpilih saat diklik cepat */
}

/* Jika body tertutup, beri border radius penuh di header */
#asm-search-toggle.minimized {
    border-radius: 5px; 
    border-bottom: 1px solid #eee;
}

/* Animasi Ikon Panah */
.asm-toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease; /* Animasi putar halus */
    font-size: 12px;
}

/* Keadaan Normal (Terbuka): Panah menghadap ke bawah (▼) */
/* Keadaan Minimized (Tertutup): Putar panah ke samping (-90 derajat) */
#asm-search-toggle.minimized .asm-toggle-icon {
    transform: rotate(-90deg);
}

/* Container Body */
.asm-search-body {
    border: 1px solid #eee;
    border-top: none; /* Agar menyatu dengan header */
    padding: 15px;
    border-radius: 0 0 5px 5px;
}