/* ===== Variables: dark + grey accents (tanpa merah) */
:root{
  --bg-1:#0f1013;          /* hitam keabu */
  --bg-2:#14161a;
  --panel-1:rgba(23,25,30,0.88);
  --panel-2:rgba(16,18,22,0.88);
  --text:#eef0f5;          /* abu terang untuk teks utama */
  --muted:#a7aebb;         /* abu muda */
  --border:#2a2e36;        /* garis lembut */
  --accent:#b8bec8;        /* aksen abu muda */
  --accent-2:#c9ced6;
  --link:#9bb6ff;          /* warna link hasil (tetap kebiruan agar nampak) */
}

/* ===== Base */
*{box-sizing:border-box}
html,body{height:100%}
body.us-bg{
  margin:0; color:var(--text);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:
    radial-gradient(60% 100% at 50% -20%, rgba(184,190,200,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
}

/* ===== Layout */
.us-container{max-width:900px; margin:0 auto; padding:56px 16px}
.us-header{text-align:center}
.us-brand{display:inline-flex; align-items:center; gap:12px; user-select:none}
.us-brand h1{margin:0; font-weight:800; font-size:38px; letter-spacing:-0.02em}
.us-subtitle{margin:10px 0 0; color:var(--muted); font-size:14px}

/* Kartu pusat lebih rapi */
.us-card{
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-1), var(--panel-2));
  backdrop-filter: blur(10px);
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.us-card--pad{padding:16px}
.us-card--center{max-width:820px; margin:20px auto 0}

.us-row{display:flex; gap:12px; align-items:center}
.us-input-wrap{position:relative; flex:1}
.us-icon-search{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:#7f8694;
}
.us-kbd-group{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:flex; gap:6px; font-size:11px; color:#c7cbd3
}
.us-kbd-group kbd{
  min-width:22px; height:22px; padding:0 6px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#17191d; border:1px solid var(--border);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05);
}

/* Inputs & Button (aksen abu) */
.us-input{
  width:100%; height:46px; padding:0 14px 0 36px; color:var(--text);
  background:rgba(18,20,24,0.95); border:1px solid var(--border); border-radius:14px;
  outline:none; transition:box-shadow .2s,border-color .2s,background .2s;
}
.us-input::placeholder{color:#8e95a3}
.us-input:focus{
  border-color: rgba(184,190,200,0.55);
  box-shadow: 0 0 0 3px rgba(184,190,200,0.18);
  background: rgba(24,26,31,0.98);
}
.us-input--grow{flex:1; padding-left:14px}

.us-btn{
  height:46px; padding:0 18px; border-radius:14px; border:1px solid rgba(255,255,255,0.06);
  color:#0f1115; font-weight:700; cursor:pointer;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 20px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform .06s ease, filter .2s ease;
}
.us-btn:hover{filter:brightness(1.03)}
.us-btn:active{transform:translateY(1px)}

/* Footer */
.us-footer{margin-top:22px; text-align:center; color:#9aa2b0; font-size:12px}

/* Brand mark */
.us-logo{width:44px; height:44px; border-radius:14px; display:inline-block;
  background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,0.10), transparent 60%),
              linear-gradient(135deg, #1b1c1e, #23252a 60%, #17191c);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 6px 28px rgba(0,0,0,0.35);
}
.us-logo--sm{width:32px; height:32px; border-radius:10px}

/* ===== Results page */
.us-topbar{display:flex; gap:12px; align-items:center}
.us-brand-mini{display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.us-brand-mini span:last-child{font-weight:600}

.us-tabs{display:flex; gap:16px; margin-top:16px; border-bottom:1px solid var(--border)}
.us-tab{
  display:inline-flex; align-items:center; padding:10px 2px; margin-bottom:-1px;
  color:#bfc5cf; border-bottom:2px solid transparent; text-decoration:none;
  transition:color .15s,border-color .15s;
}
.us-tab:hover{color:#eef0f5}
.us-tab--active{color:#fff; border-color:var(--accent); text-shadow:0 0 10px rgba(184,190,200,0.15)}

.us-info{margin-top:10px; display:flex; align-items:center; justify-content:space-between; color:#aab1bd; font-size:12px}

.us-results{margin-top:16px; display:flex; flex-direction:column; gap:12px}
.us-result{
  border:1px solid var(--border); border-radius:16px; padding:14px;
  background: linear-gradient(180deg, rgba(28,30,36,0.68), rgba(20,22,27,0.68));
  transition:background .15s, border-color .15s;
}
.us-result:hover{background: linear-gradient(180deg, rgba(32,35,41,0.72), rgba(23,25,31,0.72))}
.us-result .us-meta{display:flex; align-items:center; gap:8px; color:#a5adba; font-size:12px; margin-bottom:4px}
.us-result .us-title{margin:0; font-size:18px}
.us-result .us-title a{color:var(--link); text-decoration:none}
.us-result .us-title a:hover{text-decoration:underline}
.us-result .us-snippet{margin:6px 0 0; color:#dde1e9; font-size:14px}

/* === Modern pager (baru) === */
.us-pager{
  margin:26px 0; display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
}
.us-pagebtn{
  min-width:38px; height:38px; padding:0 12px;
  border-radius:999px; cursor:pointer;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(26,28,33,.92), rgba(20,22,27,.92));
  color:var(--text); font-weight:600; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .05s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.us-pagebtn:hover{
  border-color: rgba(184,190,200,.45);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.us-pagebtn--active{
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color:#0f1115;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(184,190,200,.22), 0 8px 26px rgba(0,0,0,.35);
  pointer-events:none;
}
.us-pagebtn--ghost{   /* untuk “…” */
  background:transparent; border-color:transparent; color:#9aa3af;
  pointer-events:none;
}
.us-pagebtn[disabled]{
  opacity:.55; cursor:not-allowed; filter:saturate(.8);
}

/* ====== GRID untuk tab Gambar ====== */
.us-results.us-images{              /* aktif saat type=image */
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:14px;
}
.us-image{ color:inherit; text-decoration:none }
.us-image-thumb{
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  background:#0f1216;
  border:1px solid var(--border);
}
.us-image-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .25s ease;
}
.us-image:hover .us-image-thumb img{ transform:scale(1.03) }
.us-image-meta{
  margin-top:6px; display:flex; flex-direction:column; gap:2px;
  font-size:12px;
}
.us-image-title{ color:#cfd6df; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.us-image-src{ color:#9aa3af; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* === Fix URL panjang melewati card === */
.us-result .us-url {
  display: inline-block;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
}