:root {
  --bg: #f2f2f2;
  --card: #ffffff;
  --ink: #2a2a2a;
  --muted: #8a8a8a;
  --line: #ececec;
  --header: #000000;
  --nav: #202020;
  --blue: #1565c0;
  --blue-deep: #0d47a1;
  --orange: #f08a24;
  --red: #e10600;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --phone: 430px;
  --safe-top: env(safe-area-inset-top);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  background: #cfcfcf;
  color: var(--ink);
  min-height: 100vh;
}
button, input { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.stage {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}
.phone {
  width: 100%;
  max-width: var(--phone);
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow: clip;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 50px rgba(0,0,0,.18);
}

.topbar {
  height: 54px;
  background: var(--header);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  color: #fff;
  padding: 0;
  text-align: left;
}
.logo-img { height: 40px; width: auto; }
.tools { display: flex; align-items: center; gap: 0; }
.icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  position: relative;
}
.icon-btn:active { background: rgba(255,255,255,.08); }
.k-icon {
  width: 24px;
  height: 24px;
  display: block;
  background: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.k-store {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.656 6.75H4.343a.756.756 0 0 0-.75.663l-1.336 11.25a.75.75 0 0 0 .75.837h17.985a.75.75 0 0 0 .75-.837l-1.336-11.25a.756.756 0 0 0-.75-.663'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.25 9.75V6a3.75 3.75 0 0 1 7.5 0v3.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.656 6.75H4.343a.756.756 0 0 0-.75.663l-1.336 11.25a.75.75 0 0 0 .75.837h17.985a.75.75 0 0 0 .75-.837l-1.336-11.25a.756.756 0 0 0-.75-.663'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8.25 9.75V6a3.75 3.75 0 0 1 7.5 0v3.75'/%3E%3C/svg%3E");
}
.k-head {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88,88,0,0,1,128,40h.67a87.71,87.71,0,0,1,87,80H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h16a24,24,0,0,0,24-24V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm152,48a8,8,0,0,1-8,8H192a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24Z'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88,88,0,0,1,128,40h.67a87.71,87.71,0,0,1,87,80H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h16a24,24,0,0,0,24-24V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm152,48a8,8,0,0,1-8,8H192a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24Z'%3E%3C/path%3E%3C/svg%3E");
}
.k-search {
  width: 20px;
  height: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5298 18.4697L15.4778 14.4176C16.9087 12.7134 17.6266 10.5226 17.4817 8.30204C17.3367 6.08148 16.3402 4.00258 14.6998 2.49888C13.0594 0.99518 10.9019 0.18276 8.67715 0.231039C6.45239 0.279318 4.33214 1.18457 2.75856 2.75802C1.18497 4.33146 0.279531 6.45163 0.231055 8.67639C0.18258 10.9011 0.994809 13.0587 2.49837 14.6992C4.00192 16.3397 6.08073 17.3365 8.30128 17.4816C10.5218 17.6268 12.7127 16.9091 14.417 15.4783L18.4691 19.5304C18.6098 19.6711 18.8006 19.7501 18.9995 19.7501C19.1984 19.7501 19.3892 19.6711 19.5298 19.5304C19.6705 19.3898 19.7495 19.199 19.7495 19.0001C19.7495 18.8012 19.6705 18.6104 19.5298 18.4697ZM1.75005 8.87498C1.75005 7.46579 2.16793 6.08824 2.95083 4.91654C3.73374 3.74484 4.84651 2.83161 6.14843 2.29234C7.45036 1.75307 8.88296 1.61197 10.2651 1.88689C11.6472 2.16181 12.9167 2.8404 13.9132 3.83685C14.9096 4.83329 15.5882 6.10285 15.8631 7.48496C16.1381 8.86708 15.997 10.2997 15.4577 11.6016C14.9184 12.9035 14.0052 14.0163 12.8335 14.7992C11.6618 15.5821 10.2842 16 8.87505 16C6.98604 15.9978 5.17501 15.2465 3.83927 13.9108C2.50354 12.575 1.75219 10.764 1.75005 8.87498Z' fill='%23C1C1C1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5298 18.4697L15.4778 14.4176C16.9087 12.7134 17.6266 10.5226 17.4817 8.30204C17.3367 6.08148 16.3402 4.00258 14.6998 2.49888C13.0594 0.99518 10.9019 0.18276 8.67715 0.231039C6.45239 0.279318 4.33214 1.18457 2.75856 2.75802C1.18497 4.33146 0.279531 6.45163 0.231055 8.67639C0.18258 10.9011 0.994809 13.0587 2.49837 14.6992C4.00192 16.3397 6.08073 17.3365 8.30128 17.4816C10.5218 17.6268 12.7127 16.9091 14.417 15.4783L18.4691 19.5304C18.6098 19.6711 18.8006 19.7501 18.9995 19.7501C19.1984 19.7501 19.3892 19.6711 19.5298 19.5304C19.6705 19.3898 19.7495 19.199 19.7495 19.0001C19.7495 18.8012 19.6705 18.6104 19.5298 18.4697ZM1.75005 8.87498C1.75005 7.46579 2.16793 6.08824 2.95083 4.91654C3.73374 3.74484 4.84651 2.83161 6.14843 2.29234C7.45036 1.75307 8.88296 1.61197 10.2651 1.88689C11.6472 2.16181 12.9167 2.8404 13.9132 3.83685C14.9096 4.83329 15.5882 6.10285 15.8631 7.48496C16.1381 8.86708 15.997 10.2997 15.4577 11.6016C14.9184 12.9035 14.0052 14.0163 12.8335 14.7992C11.6618 15.5821 10.2842 16 8.87505 16C6.98604 15.9978 5.17501 15.2465 3.83927 13.9108C2.50354 12.575 1.75219 10.764 1.75005 8.87498Z' fill='%23C1C1C1'/%3E%3C/svg%3E");
}
.k-plus { height: 24px; width: 24px; object-fit: contain; }
.dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #dc3f3f;
}
.icon-bar {
  width: 22px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.icon-bar i, .icon-bar::before, .icon-bar::after {
  content: "";
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.channels {
  background: var(--nav);
  display: flex;
  align-items: stretch;
  position: sticky;
  top: 54px;
  z-index: 29;
}
.channel-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  padding: 0 4px;
}
.channel-scroll::-webkit-scrollbar { display: none; }
.channel {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  padding: 11px 10px 10px;
  position: relative;
}
.channel.active { font-weight: 700; }
.channel.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.badge-new {
  position: absolute;
  top: 3px;
  right: 0;
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1.2;
}
.menu-btn {
  width: 42px;
  border: 0;
  background: var(--nav);
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.08);
  display: grid;
  place-items: center;
}

body:has(#gate) { overflow: hidden; }
.gate {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(100%, var(--phone));
  z-index: 80;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.gate.is-done {
  opacity: 0;
  transition: opacity .28s ease;
}
.gate-bar {
  height: 54px;
  background: var(--header);
  display: flex;
  align-items: center;
  padding: 0 14px;
  flex: none;
}
.gate-bar img { height: 40px; width: auto; }
.gate-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 18px 16px 28px;
}
.gate-card {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 18px 18px;
}
.gate-kicker {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gate-card h1 {
  margin: 8px 0 0;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.gate-lead {
  margin: 8px 0 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
.gate-count {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 18px;
}
.gate-count strong {
  font-size: 64px;
  line-height: .85;
  letter-spacing: -0.04em;
  color: var(--blue);
}
.gate-count span {
  font-size: 14px;
  font-weight: 700;
  color: #888;
  margin-bottom: 6px;
}
.gate-track {
  margin-top: 16px;
  height: 4px;
  background: #e6e6e6;
  border-radius: 99px;
  overflow: hidden;
}
.gate-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
  transition: width .9s linear;
}
.gate-line {
  margin: 14px 0 0;
  min-height: 2.7em;
  color: #444;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
}
body.dark .gate { background: #121212; }
body.dark .gate-card { background: #1c1c1c; }
body.dark .gate-card h1, body.dark .gate-line { color: #f2f2f2; }
body.dark .gate-lead { color: #aaa; }
body.dark .gate-track { background: #333; }

.view { padding-bottom: 28px; }

.ad-slot {
  margin: 10px 12px 0;
  height: 92px;
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(0,0,0,.45), rgba(0,0,0,.15)),
    url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=900&q=60") center/cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
}
.ad-slot small { opacity: .8; font-size: 10px; letter-spacing: .08em; }
.ad-slot strong { font-size: 16px; margin-top: 2px; }
.ad-slot span { font-size: 12px; opacity: .92; }

.assist {
  margin-top: 12px;
  background: #f4f8fc;
  position: relative;
}
.assist-head {
  background: #1565c0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
}
.assist-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 44px 12px 12px;
  scrollbar-width: none;
}
.assist-row::-webkit-scrollbar { display: none; }
.assist-card {
  flex: 0 0 auto;
  min-width: 148px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 8px 10px 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.assist-card.is-map {
  min-width: 196px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.55)),
    url("https://asset.kompas.com/data/2026/01/08/kompascom/mobile/images/bg-peta-publik.svg") right center / cover no-repeat,
    #f7f4ef;
}
.assist-card .k {
  font-size: 12px;
  color: #6d6d6d;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.assist-card .k span { color: #9a9a9a; font-size: 12px; }
.assist-card .v {
  margin-top: 8px;
  min-height: 28px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #222;
}
.assist-card .v b { font-weight: 700; }
.assist-ico { width: 26px; height: 26px; object-fit: contain; flex: none; }
.assist-pin { width: 14px; height: 16px; object-fit: contain; flex: none; }
.assist-flat { color: #8d8d8d; font-size: 13px; font-weight: 500; }
.aqi {
  min-width: 36px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  background: #e10600;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.assist-next {
  position: absolute;
  right: 8px;
  bottom: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e4e4e4;
  background: #fff;
  color: #444;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
}

.brief {
  margin: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  position: relative;
}
.brief-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.brief-kicker {
  font-size: 14px;
  font-weight: 700;
}
.brief-kicker em { font-style: normal; color: #7c4dff; }
.brief-by { font-size: 12px; color: #888; margin-top: 2px; }
.brief-by b { color: #444; }
.brief h2 {
  font-size: 16px;
  line-height: 1.35;
  margin: 10px 0 6px;
}
.brief p {
  margin: 0;
  color: #555;
  font-size: 13.5px;
  line-height: 1.5;
}
.brief-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.linkish, .listen {
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  color: #333;
}
.listen { display: inline-flex; align-items: center; gap: 6px; }
.x {
  border: 0;
  background: transparent;
  color: #999;
  font-size: 18px;
  line-height: 1;
}
.player {
  margin-top: 10px;
  background: #f6f7fb;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}
.bar {
  flex: 1;
  height: 4px;
  background: #e3e3e3;
  border-radius: 99px;
  overflow: hidden;
}
.bar i {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--blue);
}

.trending {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 8px;
  overflow: hidden;
}
.trending-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--blue);
  flex: none;
}
.trend-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trend-scroll::-webkit-scrollbar { display: none; }
.trend {
  border: 0;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: #333;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.section { padding: 8px 15px 4px; }
.section-title {
  font-size: 22px;
  font-weight: 800;
  margin: 8px 0 12px;
  letter-spacing: -0.03em;
}
.section-title small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  letter-spacing: 0;
  margin-top: 2px;
}

.headline-hero {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #ddd;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.pill {
  position: absolute;
  left: 10px;
  top: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}
.headline-hero h3, .grid-card h3, .row-card h3, .pop-item h3, .kolom-card h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.headline-hero h3 {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 18px;
  line-height: 1.35;
}
.meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  padding: 0 12px 12px;
  margin-top: -4px;
}
.cat { font-weight: 700; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.grid-card {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
}
.grid-card .media { border-radius: 8px; aspect-ratio: 16 / 10; overflow: hidden; }
.grid-card h3 {
  margin: 8px 0 4px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.grid-card .meta, .row-card .meta { padding: 0; }

.card-list { display: flex; flex-direction: column; }
a.pop-item, a.row-card { color: inherit; }
.pop-item, .row-card, .kolom-card {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.pop-item { display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.rank {
  font-size: 18px;
  font-weight: 800;
  color: #222;
  line-height: 1.2;
}
.pop-item h3, .row-card h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.35; }
.row-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 10px;
  align-items: start;
}
.thumb {
  width: 112px;
  height: 76px;
  border-radius: 6px;
  object-fit: cover;
  background: #ddd;
}

.shorts {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.shorts::-webkit-scrollbar { display: none; }
.short {
  flex: 0 0 132px;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  color: inherit;
}
.short .media {
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
}
.short h3 { margin: 8px 0 0; font-size: 13px; line-height: 1.35; font-weight: 600; }
.play-mark {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
}

.kolom-card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.author-line { display: flex; gap: 8px; align-items: center; }
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.author-line b { display: block; font-size: 13px; }
.author-line span { display: block; font-size: 11px; color: #888; }

.more {
  display: block;
  width: calc(100% - 30px);
  margin: 8px 15px 0;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
}

.site-footer {
  margin-top: 22px;
  background: #111;
  color: #ddd;
  padding: 22px 16px 28px;
  font-size: 12px;
}
.site-footer strong { color: #fff; font-size: 16px; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px 0;
}
.foot-links button {
  border: 0;
  background: none;
  color: #ddd;
  padding: 0;
  font-size: 12px;
}
.site-footer p { color: #999; line-height: 1.5; margin: 0; }

.article {
  background: #fff;
  min-height: 70vh;
}
.article-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  position: sticky;
  top: 94px;
  background: #fff;
  z-index: 5;
  border-bottom: 1px solid var(--line);
}
.back, .ghost {
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 18px;
}
.article-kicker {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  padding-right: 8px;
}
.article h1 {
  font-size: 24px;
  line-height: 1.28;
  letter-spacing: -0.03em;
  margin: 14px 16px 8px;
}
.byline {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 16px 12px;
  font-size: 12px;
  color: #777;
}
.byline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.byline b, .byline span { display: block; }
.byline b { color: #222; font-size: 13px; }
.hero-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #ddd; }
.caption { font-size: 11px; color: #888; padding: 6px 16px 0; }
.body { padding: 8px 16px 16px; }
.body p { font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.tags span {
  background: #f3f3f3;
  border-radius: 99px;
  padding: 5px 10px;
  font-size: 12px;
}
.action-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 18px;
}
.action-row button {
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
}
.action-row button.on { background: #e8f1fb; border-color: #c5daf3; color: var(--blue-deep); }

.channel-head {
  padding: 16px 16px 4px;
  background: #fff;
}
.channel-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.channel-head p { margin: 4px 0 0; color: #777; font-size: 13px; }
.list-wrap { background: #fff; padding: 0 15px 12px; }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: #777;
}

.scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 40;
}
.drawer, .sheet {
  position: absolute;
  z-index: 50;
  background: #fff;
}
.drawer {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88%);
  overflow: auto;
  padding: 16px 16px 28px;
  box-shadow: -12px 0 30px rgba(0,0,0,.15);
}
.drawer-head, .sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer h2, .sheet h2 { margin: 0; font-size: 18px; }
.join {
  width: 100%;
  margin: 14px 0;
  border: 0;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  padding: 11px;
  font-weight: 700;
}
.drawer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.drawer-grid button, .setting {
  border: 1px solid #eee;
  background: #fafafa;
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}
.setting { width: 100%; margin-top: 8px; display: flex; justify-content: space-between; }
.sheet {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  padding: 12px 14px 24px;
}
.search-box {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  background: #f3f3f3;
  border-radius: 10px;
  padding: 8px 10px;
}
.search-box input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
}
.search-box button {
  border: 0;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
}
.result {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 12px 0;
}
.result b { display: block; font-size: 15px; line-height: 1.35; }
.result span { color: #888; font-size: 12px; }

body.notes [data-note] { outline: 2px dashed #e39b2b; outline-offset: 2px; }
.legend {
  margin: 12px;
  background: #fffdf8;
  border: 1px dashed #e2c48a;
  border-radius: 12px;
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5c4316;
}
.legend b { color: #8a4b08; }

body.dark {
  background: #1a1a1a;
}
body.dark .phone { background: #121212; color: #eee; }
body.dark .assist, body.dark .brief, body.dark .headline-hero,
body.dark .article, body.dark .list-wrap, body.dark .channel-head,
body.dark .drawer, body.dark .sheet, body.dark .more, body.dark .assist-card,
body.dark .trend, body.dark .action-row button, body.dark .linkish, body.dark .listen {
  background: #1c1c1c;
  color: #eee;
}
body.dark .section-title, body.dark .rank, body.dark h1, body.dark h2, body.dark h3 { color: #f2f2f2; }
body.dark .pop-item, body.dark .row-card, body.dark .kolom-card, body.dark .result { border-color: #2c2c2c; }
body.dark .article-top { background: #1c1c1c; border-color: #2c2c2c; }
body.dark .meta, body.dark .brief-by, body.dark .author-line span, body.dark .caption { color: #aaa; }
body.dark .search-box, body.dark .player, body.dark .tags span, body.dark .drawer-grid button, body.dark .setting {
  background: #262626;
  color: #eee;
  border-color: #333;
}

@media (max-width: 430px) {
  body { background: var(--bg); }
  .phone { box-shadow: none; }
}

html.uu-safari-locked,
html.uu-safari-locked body { overflow: hidden; }
#uu-safari-cover {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #f8f9f5;
}
#uu-safari-gate,
#telegram-browser-gate {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  color: #203b33;
  font-family: Inter, "PingFang SC", system-ui, sans-serif;
}
.uu-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid #dfe5dd;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 18px 45px #283c2510;
  text-align: center;
}
.uu-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 650;
  color: #176b55;
}
.uu-card h1 {
  margin: 0 0 12px;
  font-size: 28px;
  letter-spacing: -0.6px;
}
.uu-card p {
  margin: 0;
  color: #75847c;
  font-size: 14px;
  line-height: 1.7;
}
.uu-open,
.uu-copy {
  width: 100%;
  border-radius: 7px;
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.uu-open {
  margin-top: 22px;
  border: 0;
  background: #176b55;
  color: #fff;
}
.uu-copy {
  margin-top: 10px;
  background: #f4f7ef;
  color: #203b33;
  border: 1px solid #dfe5dd;
}
.uu-scheme {
  margin-top: 14px !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  overflow-wrap: anywhere;
}
.uu-tg-hint {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 110px;
  text-align: right;
  color: #176b55;
  font-size: 12px;
  font-weight: 650;
}
.uu-tg-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 36px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #b7c6b9;
  font-size: 24px;
  letter-spacing: 1px;
  line-height: 1;
}
.copy-fallback {
  position: fixed;
  left: -9999px;
  top: 0;
}