/* Brand Center (/brand) — native page content styles.
   Scoped under .tbrand; breadcrumb/hero/.container come from assets/kelas/kelas.css (.tkls-*).
   Palette = Taalenta blue (#004aad). Intro row (paragraphs + Pusat Informasi box) preserved 1:1;
   asset galleries tidied into responsive grids with an "Unduh" affordance. */

.tbrand { color: #2a3141; }

/* Full-width bands */
.tbrand-band { padding: 44px 0; }
.tbrand-band--tint { background: #f4f7fc; }

/* Intro row: profile/trademark (left) + Pusat Informasi box (right) — PRESERVED */
.tbrand-hero-row { display: grid; grid-template-columns: 1fr 230px; gap: 40px; align-items: start; }
.tbrand-intro-main p { margin: 0 0 16px; font-size: 1.06rem; line-height: 1.78; color: #3d475c; }
.tbrand-intro-main p:last-child { margin-bottom: 0; }
.tbrand-trademark { font-size: .9rem !important; line-height: 1.6 !important; color: #667287 !important; }
.tbrand-intro-main strong { color: inherit; }

.tbrand-infobox { border: 1px solid #004aad; border-radius: 12px; padding: 14px 14px 16px; }
.tbrand-infobox__title { text-align: center; color: #004aad; margin: 0; padding: .2rem; font-size: 1.05rem; }
.tbrand-infobox__sep { border: 0; height: 2px; background: #004aad; margin: 0 0 4px; }
.tbrand-infobox__list { margin: 14px 0; padding-left: 20px; font-size: .88rem; line-height: 1.5; }
.tbrand-infobox__list li { margin: 0 0 4px; }
.tbrand-infobox__list a { color: #004aad; text-decoration: none; }
.tbrand-infobox__list a:hover { text-decoration: underline; }
.tbrand-infobox__list a[aria-current="page"] { font-weight: 700; }

/* Section head — centered heading + wide blue rule */
.tbrand-sechead { text-align: center; margin-bottom: 26px; }
.tbrand-h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: #004aad; line-height: 1.25; }
.tbrand-rule { border: 0; height: 3px; background: #004aad; max-width: 1320px; margin: 14px auto 0; }
.tbrand-lead { margin: 14px auto 0; max-width: 680px; color: #667287; font-size: .96rem; line-height: 1.5; }
.tbrand-subhead { margin: 26px 0 14px; font-size: 1.05rem; font-weight: 700; color: #1a2b4a; }

/* Identitas Warna */
.tbrand-color { display: grid; grid-template-columns: 320px 1fr; gap: 30px; align-items: center; }
.tbrand-swatch {
    border-radius: 14px; min-height: 150px; padding: 22px 24px; color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
    box-shadow: 0 6px 18px rgba(0, 74, 173, .18);
}
.tbrand-swatch__hex { font-size: 1.25rem; }
.tbrand-swatch__rgb { font-size: 1rem; opacity: .92; }
.tbrand-color__desc h3 { margin: 0 0 8px; color: #1a2b4a; font-size: 1.15rem; }
.tbrand-color__desc p { margin: 0; color: #55617a; line-height: 1.7; }

/* Asset grids */
.tbrand-grid { display: grid; gap: 18px; }
.tbrand-grid--logo  { grid-template-columns: repeat(3, 1fr); }
.tbrand-grid--bg    { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tbrand-grid--robot { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.tbrand-asset { margin: 0; }
.tbrand-asset__thumb {
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1px solid #e6eaf2; border-radius: 12px; background: #fff; padding: 16px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tbrand-asset__thumb:hover { border-color: #b9d0ef; box-shadow: 0 8px 20px rgba(15, 23, 42, .10); transform: translateY(-2px); }
.tbrand-asset__thumb img { max-width: 100%; height: auto; display: block; }

/* logo tiles: fixed banner height, contain */
.tbrand-grid--logo .tbrand-asset__thumb { min-height: 110px; }
.tbrand-grid--logo .tbrand-asset__thumb img { max-height: 90px; object-fit: contain; }
.tbrand-grid--dark .tbrand-asset__thumb { background: #004aad; border-color: #004aad; }

/* background tiles: 16:9 cover */
.tbrand-grid--bg .tbrand-asset__thumb { padding: 0; aspect-ratio: 16 / 9; }
.tbrand-grid--bg .tbrand-asset__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* robot tiles: square contain */
.tbrand-grid--robot .tbrand-asset__thumb { aspect-ratio: 1 / 1; padding: 10px; background: #f4f7fc; }
.tbrand-grid--robot .tbrand-asset__thumb img { max-height: 100%; object-fit: contain; }

/* download affordance */
.tbrand-asset__dl {
    position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px; font-size: .82rem; font-weight: 700; color: #fff; background: rgba(0, 74, 173, .92);
    transform: translateY(100%); transition: transform .18s ease;
}
.tbrand-asset__thumb:hover .tbrand-asset__dl,
.tbrand-asset__thumb:focus-visible .tbrand-asset__dl { transform: translateY(0); }
.tbrand-asset figcaption { margin-top: 8px; text-align: center; font-size: .85rem; color: #55617a; }

/* Responsive */
@media (max-width: 900px) {
    .tbrand-hero-row { grid-template-columns: 1fr; gap: 24px; }
    .tbrand-infobox { max-width: 320px; }
    .tbrand-color { grid-template-columns: 1fr; gap: 18px; }
    .tbrand-grid--logo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .tbrand-grid--bg { grid-template-columns: repeat(2, 1fr); }
    .tbrand-grid--robot { grid-template-columns: repeat(3, 1fr); }
}