/* ==========================================================
   batch2-style.css  (Batch 2 Turn 1)
   Style tambahan untuk:
   - Logo navbar auto-bulat (override .logo-img)
   - Subtitle di brand name (logo-text 2 baris)
   ========================================================== */

/* ===== LOGO AUTO-BULAT =====
   Bekerja di semua subsite. Logo persegi → bulat sempurna.
   Logo rectangle → object-fit:cover akan center-crop ke persegi
   sebelum dibulatkan, jadi tetap bulat sempurna walau logo rectangle. */
.navbar .logo-img,
.admin-logo-sm {
    border-radius: 50% !important;
    object-fit: cover !important;
    /* Pastikan persegi sempurna (override max-width yang bisa bikin oval) */
    aspect-ratio: 1 / 1;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    background: #fff;
    /* Border halus agar logo putih tidak hilang di background terang */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

@media (max-width: 480px) {
    .navbar .logo-img,
    .admin-logo-sm {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
    }
}

/* ===== SUBTITLE DI BRAND NAME (2 baris) =====
   .logo-text-wrap berisi:
       <span class="logo-text">Title</span>
       <span class="logo-subtitle">Subtitle</span>
*/
.logo {
    align-items: center;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    /* Auto-shrink kalau title sangat panjang */
    overflow: hidden;
}

.logo-text {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-utama);
    /* Truncate jika terlalu panjang */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.logo-subtitle {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-sekunder);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    .logo-text { font-size: 0.95rem; max-width: 160px; }
    .logo-subtitle { font-size: 0.65rem; max-width: 160px; }
}

@media (max-width: 380px) {
    .logo-text { font-size: 0.9rem; max-width: 120px; }
    .logo-subtitle { font-size: 0.6rem; max-width: 120px; }
}