:root {
    --first-color: #111111;
    --second-color: #fff;
    --third-color: #2c91d3;
    --fourth-color: #2692d5;
    --light-color: #65c2fd;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--first-color);color:var(--second-color);font-family:Arial,Helvetica,sans-serif;font-size:16px}
a{text-decoration:none;color:inherit}img{max-width:100%;height:auto}
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 12px}
.topbar{display:flex;align-items:center;justify-content:space-around;margin:16px 0 22px;gap:24px}
.logo img,.logo{width:230px;max-width:100%;display:block}
.search-bar{width:285px;max-width:100%}.search-form{display:flex;width:100%}.search-form input{width:100%;height:33px;padding:6px 10px;border:1px solid #ced4da;border-radius:4px 0 0 4px;background:#fff;color:#212529;outline:0}.search-form button{width:42px;height:33px;border:1px solid var(--third-color);border-radius:0 4px 4px 0;background:var(--third-color);color:var(--first-color);cursor:pointer;font-size:17px}.search-form button:hover{background:var(--fourth-color)}
.title-home{text-align:center;text-transform:uppercase;margin:16px 0;font-size:1.5rem;font-weight:700}.title-home .coin{font-size:1.1em}
.teks-berjaalan{display:block;border-bottom:1px dashed var(--third-color);padding:.3rem;margin-bottom:.9rem;font-size:.9rem;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;align-items:stretch}
.card-post{background:var(--third-color);color:var(--first-color);border-radius:5px;overflow:hidden;margin-bottom:8px;display:flex;flex-direction:column;height:calc(100% - 8px)}
.img-post{width:30rem;max-width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:#000}.card-body{padding:1rem;display:flex;flex-direction:column;flex:1}.card-body h5,.card-body h3{font-size:1.25rem;line-height:1.2;margin:0 0 .5rem;font-weight:500}.card-body p{margin:.35rem 0}.time-post{font-size:.7rem;padding:0;margin:0;font-weight:700;text-transform:uppercase}.excerpt{margin:.4rem 0 1rem}.d-grid{display:grid;margin-top:auto}.btn-primary,.btn-info,.back-btn{display:inline-block;border:1px solid transparent;border-radius:.25rem;padding:.32rem .55rem;font-size:.875rem;font-weight:700;text-align:center;cursor:pointer}.btn-primary{background:#0d6efd;color:#fff}.btn-primary:hover{background:#0b5ed7}.btn-info,.back-btn{background:var(--third-color);border-color:var(--third-color)!important;color:var(--first-color)}.btn-info:hover,.back-btn:hover{background:var(--fourth-color)}
.pagination{display:flex;gap:4px;justify-content:center;margin:22px 0}.pagination a,.pagination span{padding:.35rem .65rem;border-radius:.25rem;background:#fff;color:#111}.pagination .active{color:var(--second-color)!important;background:var(--third-color)}
.copyright{text-transform:uppercase;font-size:.7rem;text-align:center;margin:18px 0 28px}
.empty{text-align:center;padding:35px 0}

/* Detail page: mirrors the reference source structure */
.detail-top{display:flex;align-items:center;justify-content:space-around;margin:16px 0 22px;gap:24px}.detail-heading h1{font-size:2.3rem;line-height:1.1;font-weight:500;margin:8px 0 10px;text-transform:uppercase}.detail-date{font-size:.8rem;margin:0 0 14px;font-weight:700;color:#6c757d}.main-card{background:#fff;color:#212529;border-radius:5px;overflow:hidden}.main-card .detail-hero{display:block;width:100%;background:#000}.article-body{padding:1rem;line-height:1.55;overflow-wrap:anywhere}.article-body p{margin-top:0;margin-bottom:1rem}.article-body img{max-width:100%;height:auto}.article-body table{max-width:100%;border-collapse:collapse}.article-body td,.article-body th{border:1px solid #bbb;padding:6px}.article-body a{color:#0d6efd;text-decoration:underline}.article-body iframe,.article-body video{max-width:100%}
.detail-main-only{width:100%;}.import-warning{background:#fff3cd;color:#664d03;padding:12px;border:1px solid #ffecb5}

@media(max-width:991px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}}
@media screen and (max-device-width:480px) and (orientation:portrait){.title-home{font-size:1rem}.logo img,.logo{width:9rem;max-width:100%}.search-bar{width:10rem;max-width:100%}.grid{grid-template-columns:1fr}.detail-heading h1{font-size:1.75rem}.container{padding:0 10px}}