/* ===== Base / Reset ===== */
:root{
  --bg:#f5f5f5;
  --text:#111;
  --muted:#dedede;
  --primary:#87D1D8;
  --link:#333;
  --link-hover:#666;
  --container:#fff;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ font-size:15px; }

body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}

a{ text-decoration:none; color:var(--link); }
a:hover{ color:var(--link-hover); }

p{ margin:0 0 1rem; }

/* Headings */
h1,h2,h3{
  margin:0 0 .75rem;
  border-bottom:1px solid #aaa;
  font-weight:700;
}

/* Title block */
.judul{
  background:var(--primary);
  padding:.75rem;
  text-align:center;
}
.judul h1,.judul h2,.judul h3{
  border:0;
  margin:0;
  line-height:1.2;
}

/* Tables */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{
  padding:10px 16px;
  border:1px solid var(--muted);
  text-align:left;
}

/* ===== Layout ===== */
.container{
  max-width:1080px;
  margin:20px auto;
  background:var(--container);
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.header, .footer{
  width:100%;
  border:1px solid var(--muted);
  padding:10px;
}

.left, .middle, .right{
  border:1px solid var(--muted);
  background:#fff;
  padding:10px;
}

/* Column sizing */
.left  { flex:1 1 250px; max-width:250px; }
.middle{ flex:1 1 500px; min-width:300px; }
.right { flex:1 1 250px; max-width:250px; }

/* Content helpers */
.middle img{ max-width:100%; height:auto; }
.middle a{ font-weight:600; }

.right ul{ list-style:none; padding:0; margin:0; }
.right li + li a{ border-top:1px solid var(--muted); }
.right ul li a{
  display:block;
  padding:10px 5px;
}

/* ===== Footer ===== */
.footer{ clear:both; }

/* ===== Responsive ===== */
@media (max-width:1080px){
  /* Keep proportions but allow wrap; no garish yellow background anymore */
}

@media (max-width:780px){
  .header, .footer{ text-align:center; }
  .left, .middle, .right{
    flex:1 0 100%;
    max-width:none;
  }
}