/* ============================================================
   SUPPORT.CSS — Halaman 404, Hasil Pencarian, Privacy Policy
   Memakai base.css, layout.css, desktop.css.
   ============================================================ */

/* ---------- 404 ---------- */
.nf-wrap { background:var(--offwhite); min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem var(--pad) 5rem; }
.nf-code { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:8rem; line-height:1; color:#7c7c7c; }
.nf-text { color:#7c7c7c; font-size:1.2rem; margin-top:1rem; line-height:1.5; }
.nf-text span { display:block; }
.nf-btn { margin-top:2rem; display:inline-block; background:var(--orange); color:var(--black); text-decoration:none; font-weight:700; border-radius:999px; padding:.85rem 2.25rem; }
.nf-btn:hover { filter:brightness(.97); }
@media (min-width:1024px){ .nf-code { font-size:12rem; } .nf-text { font-size:1.5rem; } }

/* ---------- HASIL PENCARIAN ---------- */
.sr { background:var(--offwhite); padding:2.5rem var(--pad) 3rem; min-height:50vh; }
.sr-inner { max-width:1100px; margin:0 auto; }
.sr-head { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.5rem; color:var(--gray); margin-bottom:1.5rem; line-height:1.2; }
.sr-head .q { color:var(--tosca); }
.sr-form { display:flex; gap:.6rem; margin-bottom:1.5rem; max-width:520px; }
.sr-input { flex:1; border:1.5px solid var(--border); border-radius:999px; padding:.7rem 1.1rem; font-size:.95rem; outline:none; }
.sr-input:focus { border-color:var(--tosca); }
.sr-go { background:var(--tosca); color:#fff; border:none; border-radius:999px; padding:.7rem 1.5rem; font-weight:700; cursor:pointer; }

.sr-tabs { display:flex; gap:1.75rem; border-bottom:2px solid #ddd6c8; overflow-x:auto; margin-bottom:2rem; }
.sr-tab { background:none; border:none; cursor:pointer; white-space:nowrap; font-family:Arial,sans-serif; font-weight:700; font-size:1.05rem; color:var(--gray); padding:0 0 .85rem; position:relative; }
.sr-tab.active { color:var(--tosca); }
.sr-tab.active::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--tosca); }

.sr-item { display:flex; flex-direction:column-reverse; gap:1rem; padding:1.5rem 0; border-bottom:1px solid #e6e0d3; }
.sr-body { flex:1; }
.sr-kicker { font-size:.72rem; font-weight:700; letter-spacing:.05em; color:var(--gray); margin-bottom:.4rem; }
.sr-title { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.3rem; line-height:1.2; text-transform:uppercase; margin-bottom:.6rem; }
.sr-title a { color:inherit; text-decoration:none; }
.sr-desc { font-size:.88rem; line-height:1.6; color:#444; }
.sr-thumb { flex-shrink:0; border-radius:10px; overflow:hidden; background:#cfd8d6; width:100%; max-width:230px; aspect-ratio:4/3; }
.sr-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sr-thumb-ph { width:100%; height:100%; min-height:150px; display:flex; align-items:center; justify-content:center; color:var(--gray); font-size:.8rem; }
.sr-empty { color:var(--gray); font-size:.95rem; padding:2rem 0; }
mark { background:#fff34d; color:inherit; padding:0 .1em; border-radius:2px; }

@media (min-width:768px){
  .sr-item { flex-direction:row; align-items:flex-start; gap:2rem; }
  .sr-thumb { width:230px; }
}
@media (min-width:1024px){
  .sr { padding:3rem 0 4rem; }
  .sr-head { font-size:2rem; }
  .sr-tabs { gap:2.5rem; }
  .sr-title { font-size:1.6rem; }
}

/* ---------- PRIVACY POLICY ---------- */
.pp { background:var(--offwhite); padding:2.5rem var(--pad) 3.5rem; }
.pp-inner { max-width:1000px; margin:0 auto; }
.pp-title { text-align:center; font-weight:900; font-size:2rem; color:var(--black); margin-bottom:2rem; }
.pp h2 { font-size:1.15rem; font-weight:700; color:var(--black); margin:1.75rem 0 .6rem; }
.pp h3 { font-size:1rem; font-weight:700; color:var(--black); margin:1.25rem 0 .35rem; }
.pp p { font-size:.9rem; line-height:1.7; color:#333; margin-bottom:1rem; }
.pp .pp-contact { font-size:.9rem; line-height:1.7; color:#333; margin-bottom:1rem; }
.pp .pp-updated { font-size:.85rem; color:var(--gray); margin-top:1.5rem; }
@media (min-width:1024px){
  .pp { padding:3.5rem 0 4.5rem; }
  .pp-inner { padding:0 40px; }
  .pp-title { font-size:2.6rem; }
}