/* BERLIN POOLS — grid Bauhaus */
.bl-page { --color-primary:#dc2626; --color-accent:#eab308; --color-bg:#f4f4f5; --bl-hitam:#111111; --bl-muted:#6b6b70;
  background:var(--color-bg); color:var(--bl-hitam); font-family:'Jost',system-ui,sans-serif; margin:-1.5rem -12px 0; padding-bottom:52px; }
.bl-container { width:100%; max-width:1040px; margin:0 auto; padding:0 16px; }
.bl-breadcrumb { max-width:1040px; margin:0 auto; padding:14px 16px 0; font-size:12px; letter-spacing:.06em; color:var(--bl-muted); }
.bl-breadcrumb a { color:var(--bl-hitam); }
.bl-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(64px,auto); gap:8px; max-width:1040px; margin:14px auto 8px; padding:0 16px; }
.bl-block { display:flex; align-items:center; padding:16px; }
.bl-block-title { grid-column:span 4; grid-row:span 2; background:var(--bl-hitam); color:#fff; }
.bl-block-code { grid-column:span 2; background:var(--color-primary); color:#fff; font-size:22px; font-weight:700; letter-spacing:.2em; justify-content:center; }
.bl-block-date { grid-column:span 2; background:var(--color-accent); color:var(--bl-hitam); font-size:14px; font-weight:700; justify-content:center; }
.bl-block-line { grid-column:span 4; min-height:12px; padding:0; background:repeating-linear-gradient(90deg,var(--bl-hitam) 0 28px,transparent 28px 40px); }
.bl-h1 { font-size:clamp(26px,7vw,52px); font-weight:700; line-height:1.02; letter-spacing:-.02em; margin:0; text-transform:uppercase; }
.bl-h1 span { display:block; }
.bl-digits { display:flex; flex-wrap:wrap; gap:8px; max-width:1040px; margin:0 auto; padding:0 16px; }
.bl-cell { display:inline-flex; align-items:center; justify-content:center; font-size:clamp(40px,11vw,74px); font-weight:700; line-height:1;
  opacity:0; transform:translateY(12px); animation:bl-in .4s ease forwards; }
.bl-size-1 { width:clamp(84px,24vw,132px); height:clamp(84px,24vw,132px); }
.bl-size-2 { width:clamp(74px,21vw,116px); height:clamp(84px,24vw,132px); }
.bl-size-3 { width:clamp(94px,26vw,148px); height:clamp(84px,24vw,132px); }
.bl-cell-hitam { background:var(--bl-hitam); color:#fff; }
.bl-cell-merah { background:var(--color-primary); color:#fff; }
.bl-cell-emas { background:var(--color-accent); color:var(--bl-hitam); }
.bl-cell-abu { background:#e4e4e7; color:var(--bl-hitam); }
@keyframes bl-in { to{opacity:1;transform:translateY(0);} }
.bl-meta { margin:16px 0 0; font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--bl-muted); }
.bl-desc { margin:14px 0 0; font-size:14px; color:var(--bl-muted); }
.bl-section { margin-top:42px; }
.bl-h2 { font-size:clamp(19px,4.4vw,26px); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px;
  padding-bottom:8px; border-bottom:6px solid var(--bl-hitam); }
.bl-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.bl-filter select { height:40px; padding:0 12px; border:2px solid var(--bl-hitam); border-radius:0; background:#fff; font-family:inherit; font-size:13px; font-weight:500; }
.bl-btn { display:inline-flex; align-items:center; height:40px; padding:0 18px; border:2px solid var(--bl-hitam); border-radius:0;
  background:var(--bl-hitam); color:#fff; font-size:12px; font-weight:700; letter-spacing:.14em; cursor:pointer; }
.bl-btn:hover { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.bl-btn-ghost { background:var(--color-accent); color:var(--bl-hitam); }
.bl-table { width:100%; border-collapse:collapse; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; background:#fff; border:2px solid var(--bl-hitam); }
.bl-table thead th { background:var(--bl-hitam); color:#fff; font-size:10.5px; letter-spacing:.2em; padding:11px 14px; text-align:left; white-space:nowrap; }
.bl-table tbody td { padding:12px 14px; border-bottom:2px solid var(--bl-hitam); letter-spacing:.08em; }
.bl-table tbody tr:last-child td { border-bottom:0; }
.bl-right { text-align:right; }
.bl-result { font-weight:700; font-size:16px; letter-spacing:.24em; color:var(--color-primary); }
.bl-muted { color:var(--bl-muted); } .bl-nowrap { white-space:nowrap; }
.bl-empty { border:2px solid var(--bl-hitam); background:#fff; padding:40px 20px; text-align:center; }
.bl-empty-mark { display:inline-block; width:46px; height:46px; background:var(--color-primary); margin-bottom:14px; }
.bl-empty h3 { font-size:17px; font-weight:700; letter-spacing:.1em; margin:0 0 6px; }
.bl-empty p { margin:0; font-size:13px; color:var(--bl-muted); }
.bl-pagination { margin-top:14px; font-size:12.5px; color:var(--bl-muted); }
.bl-pagination .page-link { border-radius:0; border:2px solid var(--bl-hitam); color:var(--bl-hitam); font-weight:700; }
.bl-pagination .page-item.active .page-link { background:var(--bl-hitam); border-color:var(--bl-hitam); color:#fff; }
.bl-boxes { display:grid; gap:8px; }
.bl-box { padding:20px 18px; }
.bl-box-hitam { background:var(--bl-hitam); color:#fff; }
.bl-box-merah { background:var(--color-primary); color:#fff; }
.bl-box-emas { background:var(--color-accent); color:var(--bl-hitam); }
.bl-box-label { display:block; font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; opacity:.75; }
.bl-box-value { display:block; margin:8px 0 4px; font-size:21px; font-weight:700; }
.bl-box-note { display:block; font-size:11.5px; opacity:.75; }
.bl-note { margin:18px 0 0; font-size:12.5px; color:var(--bl-muted); }
.bl-note a { color:var(--color-primary); font-weight:700; }
@media (min-width:768px) { .bl-boxes { grid-template-columns:repeat(3,1fr); } .bl-block-title { grid-column:span 2; } .bl-block-code { grid-column:span 1; } .bl-block-date { grid-column:span 1; } }
@media (min-width:992px) { .bl-page { margin-left:-24px; margin-right:-24px; } }
@media (max-width:575.98px) { .bl-hide-sm { display:none; } .bl-cell { font-size:clamp(34px,13vw,54px); } .bl-section { margin-top:30px; } }
@media (prefers-reduced-motion:reduce) { .bl-cell { animation:none; opacity:1; transform:none; } }