:root {
  --border-content: #c7c7c7;
  --ink-content: #2b2b2b;
  --bg-content: #f6f7fb;
  --active-content: #d8e6ff;
  --accent-content: #3b82f6;
}
* { box-sizing: border-box; }

/* Tabs */
.tabs { display: flex; gap: 12px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--border-content); border-radius: 8px; background: #fff; cursor: pointer; user-select: none; transition: 120ms ease;
}
.tab:hover { transform: translateY(-1px); }
.tab.active {
  border-color: var(--accent-content); background: var(--active-content); box-shadow: inset 0 0 0 1px var(--accent-content);
}

/* Viewport */
/*    .viewport { margin-top: 14px; border-radius: 6px; background: #fff; height: clamp(320px, 55vh, 560px); overflow: hidden; position: relative; touch-action: pan-y; }*/

/* Track with pages */
/*    .track { display: flex; width: 100%; height: 100%; transition: transform 320ms ease; will-change: transform; }*/

/*    .page { min-width: 100%; height: 100%; display: grid; place-items: center; font-size: 22px; }*/
.viewport {
margin-top: 14px;
border: 1px solid var(--ink);
border-radius: 6px;
background: #fff;
/* Hapus height fixed */
min-height: 320px; /* biar ada tinggi minimal */
overflow: hidden; /* tetap untuk swipe */
position: relative;
touch-action: pan-y;
}

.track {
display: flex;
width: 100%;
/* biarkan tinggi mengikuti konten */
transition: transform 320ms ease;
}

.page {
min-width: 100%;
/* jangan pakai grid-center, biar konten panjang bisa tampil semua */
display: block;
text-align: center;
}

.page img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

/* Optional page number badge */
.badge { position: absolute; top: 10px; right: 12px; background: rgba(0,0,0,.06); padding: 6px 10px; border-radius: 999px; font-size: 12px; }

/* Helper buttons for desktop (hidden on small) */
.arrows { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.arrows button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-content); background: #fff; cursor: pointer; }

@media (hover:hover) {
  .arrows { display: flex; }
}