/* AMSTERDAM POOLS — deret rumah kanal */
.am-page { --color-primary:#1d4ed8; --color-accent:#ea580c; --color-bg:#faf7f0; --am-ink:#1b2233; --am-muted:#6d7488;
  background:var(--color-bg); color:var(--am-ink); font-family:'Work Sans',system-ui,sans-serif; margin:-1.5rem -12px 0; padding-bottom:52px; text-align:center; }
.am-container { width:100%; max-width:1000px; margin:0 auto; padding:0 16px; }
.am-breadcrumb { padding:14px 0 0; font-size:12px; color:var(--am-muted); text-align:left; } .am-breadcrumb a { color:var(--color-primary); }
.am-hero { padding:32px 0 6px; }
.am-kicker { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.28em; color:var(--color-accent); }
.am-h1 { font-weight:700; font-size:clamp(24px,5.6vw,38px); line-height:1.12; margin:0 0 8px; }
.am-date { margin:0; font-size:12.5px; color:var(--am-muted); }
.am-street { position:relative; padding:34px 0 0; }
.am-houses { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:8px; }
.am-house { position:relative; display:flex; align-items:flex-end; justify-content:center; width:clamp(58px,15vw,78px);
  border-radius:0 0 3px 3px; opacity:0; transform:translateY(14px); animation:am-in .45s ease forwards; }
.am-house.am-lvl1 { height:clamp(96px,26vw,140px); } .am-house.am-lvl2 { height:clamp(112px,30vw,164px); }
.am-house.am-lvl3 { height:clamp(126px,34vw,182px); } .am-house.am-lvl4 { height:clamp(140px,38vw,200px); }
.am-oranye { background:var(--color-accent); } .am-biru { background:var(--color-primary); } .am-kosong { background:#d9dee8; }
.am-roof { position:absolute; left:-3px; right:-3px; top:-16px; height:18px; }
.am-roof-segitiga { clip-path:polygon(50% 0,100% 100%,0 100%); background:inherit; }
.am-roof-lonceng { border-radius:50% 50% 0 0; background:inherit; }
.am-roof-tangga { clip-path:polygon(20% 100%,20% 55%,38% 55%,38% 20%,62% 20%,62% 55%,80% 55%,80% 100%); background:inherit; }
.am-house .am-roof { background:currentColor; }
.am-oranye .am-roof { color:#c2410c; } .am-biru .am-roof { color:#1e3a8a; } .am-kosong .am-roof { color:#c3cad8; }
.am-door { display:flex; align-items:center; justify-content:center; width:78%; height:52%; margin-bottom:6px; border-radius:6px 6px 0 0;
  background:rgba(255,255,255,.92); color:var(--am-ink); font-weight:700; font-size:clamp(24px,7vw,34px); }
.am-kosong .am-door { color:#9aa3b5; }
@keyframes am-in { to{opacity:1;transform:translateY(0);} }
.am-canal { display:block; height:26px; margin-top:0; border-radius:0 0 8px 8px;
  background:repeating-linear-gradient(90deg,#93c5fd 0 14px,#bfdbfe 14px 28px); opacity:.85; }
.am-meta { margin:18px 0 0; font-size:12.5px; color:var(--am-muted); }
.am-desc { margin:16px auto 0; max-width:600px; font-size:14px; color:var(--am-muted); }
.am-section { margin-top:40px; }
.am-h2 { font-weight:700; font-size:clamp(20px,4.6vw,27px); margin:0 0 16px; }
.am-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:16px; }
.am-filter select { height:40px; padding:0 12px; border:1px solid #ccd3e0; border-radius:6px; background:#fff; font-family:inherit; font-size:13px; }
.am-btn { display:inline-flex; align-items:center; height:40px; padding:0 18px; border:1px solid var(--color-primary); border-radius:6px;
  background:var(--color-primary); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.am-btn:hover { background:#1e40af; color:#fff; } .am-btn-ghost { background:var(--color-accent); border-color:var(--color-accent); }
.am-table-wrap { border:2px solid var(--color-primary); border-radius:6px; overflow:hidden; background:#fff; }
.am-table { width:100%; border-collapse:collapse; font-size:13.5px; text-align:left; }
.am-table thead th { padding:11px 12px; color:#fff; background:var(--color-primary); font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  background-image:radial-gradient(circle at 6px 6px, rgba(255,255,255,.28) 2px, transparent 3px); background-size:14px 14px; }
.am-table tbody td { padding:11px 12px; border-bottom:1px solid #e6ebf3; }
.am-table tbody tr:nth-child(even) { background:#f4f7fc; }
.am-right { text-align:right; }
.am-result { font-weight:700; font-size:17px; letter-spacing:.16em; color:var(--color-accent); }
.am-muted { color:var(--am-muted); } .am-nowrap { white-space:nowrap; }
.am-empty { background:#fff; border:2px dashed var(--color-primary); border-radius:6px; padding:40px 20px; }
.am-empty-mark { display:inline-block; width:42px; height:52px; background:var(--color-accent); margin-bottom:14px; clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%); }
.am-empty h3 { font-weight:700; font-size:18px; margin:0 0 6px; } .am-empty p { margin:0; font-size:13px; color:var(--am-muted); }
.am-pagination { margin-top:14px; font-size:13px; color:var(--am-muted); }
.am-pagination .page-link { border-radius:6px; border:1px solid #ccd3e0; color:var(--am-ink); font-weight:600; }
.am-pagination .page-item.active .page-link { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.am-minihouses { display:grid; gap:22px; padding-top:12px; }
.am-minihouse { position:relative; border-radius:0 0 6px 6px; padding:20px 14px 16px; color:#fff; }
.am-minihouse.am-biru { background:var(--color-primary); } .am-minihouse.am-oranye { background:var(--color-accent); }
.am-mini-roof { position:absolute; left:0; right:0; top:-14px; height:16px; clip-path:polygon(50% 0,100% 100%,0 100%); background:inherit; }
.am-mini-label { display:block; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.8; }
.am-mini-value { display:block; margin:6px 0 3px; font-size:19px; font-weight:700; }
.am-mini-note { display:block; font-size:11.5px; opacity:.8; }
.am-note { margin:20px 0 0; font-size:13px; color:var(--am-muted); } .am-note a { color:var(--color-primary); font-weight:700; }
@media (min-width:768px) { .am-minihouses { grid-template-columns:repeat(3,1fr); } }
@media (min-width:992px) { .am-page { margin-left:-24px; margin-right:-24px; } }
@media (max-width:575.98px) { .am-hide-sm { display:none; } .am-houses { gap:5px; } .am-section { margin-top:30px; } }
@media (prefers-reduced-motion:reduce) { .am-house { animation:none; opacity:1; transform:none; } }