.dok-wrapper{padding:1px 16px;background:radial-gradient(circle at top left, rgba(125,179,154,.25), transparent 40%),radial-gradient(circle at bottom right, rgba(16,185,129,.18), transparent 45%),linear-gradient(180deg, #f6f8fb, #eef2f7);}
.dok-container{max-width:1200px;margin:auto}
.dok-header{text-align:center;margin-bottom:36px}
.filter-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:40px;background:#fff;padding:18px;border-radius:40px;box-shadow:0 15px 35px rgba(0,0,0,.12)}
.filter-bar input,.filter-bar select{padding:10px 18px;font-size:16px;border-radius:30px;border:1px solid #ccc}
.filter-bar button{padding:10px 22px;border-radius:30px;border:none;background:#7db39a;color:#fff;cursor:pointer}
.dok-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px}
.dok-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.12);cursor:pointer;transition:.3s}
.dok-card:hover{transform:translateY(-8px)}
.dok-thumb img{width:100%;height:190px;object-fit:cover}
.dok-body{padding:18px}
.dok-time{font-size:13px;opacity:.7;margin-bottom:10px}

.dok-detail {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.dok-detail.show {
  opacity: 1;
  pointer-events: auto;
}
.detail-card {
  background:#fff;
  max-width:760px;
  width:90%;
  border-radius:24px;
  padding:24px;
  max-height:90vh;
  overflow:auto;
  position:relative;

  transform: translateY(40px);
  transition: transform 0.3s ease;
}
.dok-detail.show .detail-card {
  transform: translateY(0);
}
.detail-card img{width:100%;border-radius:18px;margin-bottom:16px}
.detail-card .close{position:absolute;top:14px;right:18px;font-size:22px;text-decoration:none;color:#777}
.detail-card .btn{display:inline-block;padding:10px 20px;background:#7db39a;color:#fff;border-radius:30px;text-decoration:none}


.pagination{text-align:center;margin:30px 0}
.pagination a,.pagination span{margin:0 4px;padding:6px 12px;background:#7db39a;color:#fff;border-radius:6px;text-decoration:none}
.pagination .current{font-weight:bold;text-decoration:underline}

body.dark .dok-wrapper{
  background: transparent;
}

body.dark .dok-card,
body.dark .filter-bar,
body.dark .detail-card{
  background:#020617;
  color:#e5e7eb;
}

body.dark .dok-time{
  opacity:.6;
}

body.dark .filter-bar input,
body.dark .filter-bar select{
  background:#020617;
  color:#e5e7eb;
  border:1px solid #334155;
}

body.dark .pagination a,
body.dark .pagination span{
  background:#334155;
}

h1{
  font-size:clamp(32px,5vw,48px);
  font-weight:800;
  margin-bottom:0px;
}


.dok-nav{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid #eee;
}

.dok-nav a{
  display:block;
  padding:14px 18px;
  background:#f1f5f9;
  border-radius:16px;
  text-decoration:none;
  color:#111;
  font-weight:600;
  transition:.3s;

  white-space:normal;
  word-break:break-word;
}

.dok-nav a:hover{
  background:#7db39a;
  color:#fff;
}

.nav-prev{
  text-align:left;
}

.nav-next{
  text-align:right;
}

.dok-detail{
  padding: 60px 20px;
  align-items: flex-start;
}

.detail-card{
  margin-top: 0;
}
.nav-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4em;
  max-height: 2.8em;
}

body.dark .dok-nav{
  border-color:#334155;
}

body.dark .dok-nav a{
  background:#0f172a;
  color:#e5e7eb;
}

body.dark .dok-nav a:hover{
  background:#334155;
}

@media(max-width:768px){
  .dok-nav{
    grid-template-columns: 1fr;
  }

  .nav-next{
    text-align:left;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 25px;
  padding: 0 10px;
}

.pagination a,
.pagination span {
  padding: 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s ease;
  min-width: 34px;
  text-align: center;
}

.pagination a {
  background: #f1f1f1;
  color: #333;
}

.pagination a:hover {
  background: #111;
  color: #fff;
  transform: translateY(-2px);
}

.pagination .current {
  background: #111;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.pagination .nav-btn {
  font-weight: bold;
  background: #ddd;
}

.pagination .dots {
  padding: 7px 4px;
  color: #999;
}

/* =========================
   📱 MOBILE (<= 480px)
========================= */
@media (max-width: 480px) {
  .pagination {
    gap: 4px;
  }

  .pagination a,
  .pagination span {
    padding: 6px 8px;
    font-size: 12px;
    min-width: 28px;
    border-radius: 6px;
  }

  .pagination .dots {
    padding: 6px 2px;
  }
}

/* =========================
   📲 TABLET (481px - 768px)
========================= */
@media (min-width: 481px) and (max-width: 768px) {
  .pagination a,
  .pagination span {
    padding: 7px 10px;
    font-size: 13px;
  }
}

/* =========================
   💻 DESKTOP (> 1024px)
========================= */
@media (min-width: 1024px) {
  .pagination {
    gap: 10px;
  }

  .pagination a,
  .pagination span {
    padding: 9px 16px;
    font-size: 14px;
  }
}