/*
Theme Name: OPAM (Blankslate Child)
Theme URI: https://example.com
Description: Child theme dari Blankslate untuk OPAM - Website Unduh Aplikasi Resmi dan Update Terbaru. Dibangun khusus untuk situs direktori & unduhan aplikasi (APK/software) dengan fokus pada kepercayaan, kecepatan, dan kemudahan mencari aplikasi.
Author: OPAM Team
Template: blankslate
Version: 1.0.0
Text Domain: opam
*/

/* =========================================================
   OPAM DESIGN SYSTEM
   Tema visual: "Segel Resmi" (Official Seal) — setiap elemen
   kepercayaan (versi, rating, badge resmi) ditampilkan seperti
   cap/stempel verifikasi, karena identitas inti OPAM adalah
   "resmi & aman", bukan sekadar direktori unduhan biasa.
   ========================================================= */

:root{
  /* Warna */
  --opam-navy: #10203A;        /* header, teks judul utama */
  --opam-navy-soft: #1B3358;   /* gradasi/hover navy */
  --opam-bg: #F7F8F5;          /* latar halaman, bukan cream/terracotta klise */
  --opam-surface: #FFFFFF;     /* kartu */
  --opam-line: #E4E7E0;        /* garis/border tipis */
  --opam-text: #1E2430;        /* teks utama */
  --opam-muted: #667085;       /* teks sekunder */
  --opam-verified: #157F6E;    /* hijau "resmi/terverifikasi" — aksen utama */
  --opam-verified-dark: #0F5E51;
  --opam-badge: #E8871E;       /* oranye lencana rating/populer */
  --opam-danger: #C1432B;

  /* Tipografi */
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Bentuk */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-card: 0 1px 2px rgba(16,32,58,.04), 0 6px 20px rgba(16,32,58,.06);
  --shadow-card-hover: 0 10px 30px rgba(16,32,58,.12);
  --container: 1180px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--opam-bg);
  color: var(--opam-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
/* Reset list HANYA untuk elemen navigasi/UI (menu, sidebar, footer) —
   isi artikel (.opam-content-body) sengaja TIDAK di-reset supaya bullet/nomor
   dari editor WordPress tetap tampil normal di frontend. */
.opam-primary-nav ul,
.opam-footer ul,
.opam-widget ul{ margin: 0; padding: 0; list-style: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--opam-navy);
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(28px, 4vw, 44px); }
h2{ font-size: clamp(22px, 3vw, 30px); }
h3{ font-size: 18px; }

.opam-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.opam-section{ padding: 56px 0; }
.opam-section--tight{ padding: 32px 0; }

.opam-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.opam-section-head p{ color: var(--opam-muted); margin:4px 0 0; }
.opam-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--opam-verified);
  display:block;
  margin-bottom: 6px;
}
.opam-link-more{
  font-weight: 600;
  color: var(--opam-verified-dark);
  white-space: nowrap;
}
.opam-link-more:hover{ text-decoration: underline; }

/* Visually hidden (accessibility) */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
a.skip-link{
  position:absolute; left:-999px; top:0; z-index:9999;
  background: var(--opam-navy); color:#fff; padding: 10px 16px;
  border-radius: 0 0 8px 0;
}
a.skip-link:focus{ left:0; }

:focus-visible{
  outline: 3px solid var(--opam-badge);
  outline-offset: 2px;
}

/* =========================
   HEADER
   ========================= */
.opam-header{
  background: var(--opam-navy);
  color: #fff;
  position: sticky;
  top:0;
  z-index: 100;
}
.opam-header-inner{
  display:flex;
  align-items:center;
  gap: 24px;
  padding: 14px 0;
}
.opam-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  flex-shrink:0;
}
.opam-logo img{
  max-height: 40px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px){
  .opam-logo img{ max-height: 32px; max-width: 130px; }
}
.opam-logo .seal{
  width: 30px; height:30px;
  border-radius: 50%;
  background: var(--opam-verified);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.opam-logo .seal svg{ width:16px; height:16px; }

.opam-primary-nav{ margin-left: auto; }
.opam-primary-nav ul{ display:flex; gap: 22px; }
.opam-primary-nav a{
  font-weight: 500;
  font-size: 14.5px;
  color: #D9E0EA;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.opam-primary-nav a:hover,
.opam-primary-nav .current-menu-item > a{
  color:#fff;
  border-bottom-color: var(--opam-verified);
}

.opam-menu-toggle{
  display:none;
  background:none; border:0; color:#fff; cursor:pointer;
  padding: 6px;
}

@media (max-width: 860px){
  .opam-menu-toggle{ display:block; margin-left:auto; }
  .opam-primary-nav{
    display:none;
    width:100%;
    order:3;
    margin-left:0;
    background: var(--opam-navy-soft);
    margin: 0 -20px;
    width: calc(100% + 40px);
  }
  .opam-primary-nav.is-open{ display:block; }
  .opam-primary-nav ul{ flex-direction:column; gap:0; padding: 4px 20px 12px; }
  .opam-primary-nav a{ display:block; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .opam-primary-nav li:last-child a{ border-bottom: none; }
  .opam-header-inner{ flex-wrap: wrap; }
}

/* =========================
   HERO / SEARCH
   ========================= */
.opam-hero{
  background:
    radial-gradient(600px 260px at 85% -40px, rgba(21,127,110,.35), transparent 60%),
    linear-gradient(180deg, var(--opam-navy) 0%, var(--opam-navy-soft) 100%);
  color: #fff;
  padding: 64px 0 48px;
}
.opam-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--font-mono);
  color: #BFEFE5;
  margin-bottom: 18px;
}
.opam-hero h1{ color:#fff; max-width: 720px; }
.opam-hero-sub{ color:#B9C3D4; max-width: 620px; margin: 0 0 28px; font-size: 17px;}

.opam-search-form{
  display:flex;
  gap:10px;
  background:#fff;
  padding: 8px;
  border-radius: var(--radius-m);
  max-width: 640px;
  box-shadow: var(--shadow-card-hover);
}
.opam-search-form input[type="search"]{
  flex:1;
  border:0;
  outline:0;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--opam-text);
  background: transparent;
}
.opam-search-form button{
  background: var(--opam-verified);
  color:#fff;
  border:0;
  border-radius: var(--radius-s);
  padding: 0 22px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor:pointer;
  transition: background .15s ease;
}
.opam-search-form button:hover{ background: var(--opam-verified-dark); }

.opam-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 20px;
}
.opam-chip{
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #E4E9F2;
}
.opam-chip:hover{ background: rgba(255,255,255,.16); }

/* =========================
   TRUST STRIP
   ========================= */
.opam-trust-strip{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-top: 40px;
}
.opam-trust-item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.opam-trust-item .ico{
  width:36px;height:36px;border-radius:50%;
  background: rgba(21,127,110,.25);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.opam-trust-item h4{ color:#fff; margin:0 0 3px; font-size:14.5px; }
.opam-trust-item p{ color:#AEB9CB; margin:0; font-size:13px; }
@media (max-width: 760px){ .opam-trust-strip{ grid-template-columns:1fr; } }

/* =========================
   KATEGORI TILES
   ========================= */
.opam-category-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 960px){ .opam-category-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .opam-category-grid{ grid-template-columns: repeat(2,1fr); } }

.opam-category-tile{
  background: var(--opam-surface);
  border: 1px solid var(--opam-line);
  border-radius: var(--radius-m);
  padding: 18px 14px;
  text-align:center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.opam-category-tile:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--opam-verified);
}
.opam-category-tile .ico{
  width:44px;height:44px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: #EAF4F1;
  display:flex;align-items:center;justify-content:center;
  color: var(--opam-verified-dark);
}
.opam-category-tile .name{ font-weight:600; font-size:14px; color:var(--opam-navy); }
.opam-category-tile .count{ font-size:12px; color:var(--opam-muted); font-family: var(--font-mono); }

/* =========================
   APP CARD (grid item)
   ========================= */
.opam-app-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px){ .opam-app-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px){ .opam-app-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .opam-app-grid{ grid-template-columns: 1fr; } }

.opam-app-card{
  background: var(--opam-surface);
  border: 1px solid var(--opam-line);
  border-radius: var(--radius-m);
  padding: 16px;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.opam-app-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.opam-app-card .thumb{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-s);
  overflow:hidden;
  background: #EEF1EC;
  margin-bottom: 12px;
}
.opam-app-card .thumb img{ width:100%; height:100%; object-fit:cover; }

.opam-seal{
  position:absolute;
  top: 10px; right: 10px;
  background: var(--opam-verified);
  color:#fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing:.04em;
  padding: 3px 8px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  box-shadow: 0 2px 6px rgba(21,127,110,.4);
}
.opam-seal svg{ width:10px; height:10px; }

.opam-app-card h3{
  font-size: 15px;
  margin: 0 0 4px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}
.opam-app-card .dev{ font-size:12.5px; color:var(--opam-muted); margin-bottom:8px; }
.opam-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--opam-muted);
  margin-bottom: 12px;
}
.opam-rating{ display:flex; align-items:center; gap:4px; color: var(--opam-badge); font-family: var(--font-body); font-weight:600; }
.opam-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  background: var(--opam-navy);
  color:#fff;
  border:0;
  border-radius: var(--radius-s);
  padding: 10px 14px;
  font-weight:600;
  font-size: 13.5px;
  cursor:pointer;
}
.opam-btn:hover{ background: var(--opam-navy-soft); }
.opam-btn--primary{ background: var(--opam-verified); }
.opam-btn--primary:hover{ background: var(--opam-verified-dark); }
.opam-btn--lg{ padding: 14px 26px; font-size:15px; width:auto; }

/* =========================
   SINGLE APP PAGE
   ========================= */
.opam-app-header{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  align-items:center;
  background: var(--opam-surface);
  border: 1px solid var(--opam-line);
  border-radius: var(--radius-l);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 720px){
  .opam-app-header{ grid-template-columns: 96px 1fr; }
  .opam-app-header .opam-app-header-cta{ grid-column: 1 / -1; }
}
.opam-app-header .icon{
  width: 140px; height:140px;
  border-radius: 28px;
  overflow:hidden;
  background:#EEF1EC;
  box-shadow: 0 6px 18px rgba(16,32,58,.12);
}
@media (max-width: 720px){ .opam-app-header .icon{ width:96px;height:96px; border-radius:20px; } }
.opam-app-header .icon img{ width:100%;height:100%;object-fit:cover; }

.opam-app-header .cat-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.opam-badge-pill{
  font-size:11.5px;
  font-family: var(--font-mono);
  background:#EAF4F1;
  color:var(--opam-verified-dark);
  padding:3px 10px;
  border-radius:999px;
}
.opam-app-header .dev{ color:var(--opam-muted); margin-bottom:6px; }
.opam-app-header .stat-row{ display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; color:var(--opam-muted); }
.opam-app-header .stat-row strong{ color:var(--opam-text); font-family: var(--font-mono); }

.opam-info-panel{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--opam-line);
  border: 1px solid var(--opam-line);
  border-radius: var(--radius-m);
  overflow:hidden;
  margin: 28px 0;
}
@media (max-width:760px){ .opam-info-panel{ grid-template-columns: repeat(2,1fr); } }
.opam-info-cell{ background:#fff; padding: 16px; }
.opam-info-cell .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--opam-muted); margin-bottom:4px; }
.opam-info-cell .value{ font-family: var(--font-mono); font-weight:600; color:var(--opam-navy); font-size:15px; }

.opam-screenshots{
  display:flex;
  gap: 14px;
  overflow-x:auto;
  padding-bottom: 10px;
  margin: 24px 0;
  scroll-snap-type: x mandatory;
}
.opam-screenshots img{
  height: 380px;
  width:auto;
  border-radius: var(--radius-m);
  border: 1px solid var(--opam-line);
  scroll-snap-align:start;
  flex-shrink:0;
}
@media (max-width:600px){ .opam-screenshots img{ height:260px; } }

.opam-content-body{
  background:#fff;
  border:1px solid var(--opam-line);
  border-radius: var(--radius-m);
  padding: 28px;
  margin-bottom: 28px;
}
.opam-content-body h2{ font-size:20px; }
.opam-content-body h3{ font-size:17px; }
.opam-content-body p{ margin: 0 0 1em; color: var(--opam-text); }

.opam-content-body ul,
.opam-content-body ol{
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  color: var(--opam-text);
}
.opam-content-body ul{ list-style: disc; }
.opam-content-body ol{ list-style: decimal; }
.opam-content-body ul ul{ list-style: circle; margin-bottom:0; }
.opam-content-body ol ol{ margin-bottom:0; }
.opam-content-body li{ margin-bottom: .4em; }
.opam-content-body li > ul,
.opam-content-body li > ol{ margin-top:.4em; }

.opam-content-body blockquote{
  margin: 1.4em 0;
  padding: 4px 20px;
  border-left: 3px solid var(--opam-verified);
  background: #F3F7F5;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--opam-navy);
  font-style: italic;
}
.opam-content-body blockquote p:last-child{ margin-bottom: 0; }
.opam-content-body blockquote cite{
  display:block;
  margin-top: .6em;
  font-style: normal;
  font-size: 13px;
  color: var(--opam-muted);
}

.opam-content-body a{
  color: var(--opam-verified-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.opam-content-body a:hover{ color: var(--opam-verified); }

.opam-content-body img{
  border-radius: var(--radius-s);
  margin: 1em 0;
}
.opam-content-body figure{ margin: 1.4em 0; }
.opam-content-body figcaption{ font-size:13px; color:var(--opam-muted); text-align:center; margin-top:.5em; }

.opam-content-body table{
  width:100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14.5px;
}
.opam-content-body th,
.opam-content-body td{
  border: 1px solid var(--opam-line);
  padding: 8px 12px;
  text-align: left;
}
.opam-content-body th{ background:#F3F5F1; font-family: var(--font-display); }

.opam-content-body code{
  font-family: var(--font-mono);
  background:#F0F2EE;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .9em;
}
.opam-content-body pre{
  background: var(--opam-navy);
  color: #E5EAF2;
  padding: 16px;
  border-radius: var(--radius-s);
  overflow-x: auto;
  margin: 1.4em 0;
}
.opam-content-body pre code{ background: none; padding: 0; color: inherit; }

.opam-content-body hr{ border: none; border-top: 1px solid var(--opam-line); margin: 2em 0; }

.opam-disclaimer{
  border-left: 3px solid var(--opam-badge);
  background: #FFF8EC;
  padding: 14px 18px;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 13.5px;
  color: #7A5312;
  margin-bottom: 28px;
}

/* =========================
   LAYOUT: content + sidebar
   ========================= */
.opam-layout{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items:start;
}
@media (max-width: 900px){ .opam-layout{ grid-template-columns: 1fr; } }

.opam-widget{
  background:#fff;
  border:1px solid var(--opam-line);
  border-radius: var(--radius-m);
  padding: 18px;
  margin-bottom: 20px;
}
.opam-widget h3{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
.opam-widget ul li{ margin-bottom: 12px; }
.opam-mini-app{ display:flex; gap:10px; align-items:center; }
.opam-mini-app .thumb{ width:44px;height:44px;border-radius:10px;overflow:hidden;background:#EEF1EC;flex-shrink:0; }
.opam-mini-app .thumb img{ width:100%;height:100%;object-fit:cover; }
.opam-mini-app .name{ font-size:13.5px; font-weight:600; color:var(--opam-navy); }
.opam-mini-app .sub{ font-size:11.5px; color:var(--opam-muted); font-family:var(--font-mono); }

/* =========================
   ARCHIVE / TAXONOMY HEADER
   ========================= */
.opam-archive-header{
  background: var(--opam-surface);
  border-bottom: 1px solid var(--opam-line);
  padding: 36px 0 28px;
}
.opam-archive-header .opam-eyebrow{ margin-bottom:6px; }
.opam-archive-header p{ color:var(--opam-muted); max-width:640px; }

.opam-pagination{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top: 36px;
}
.opam-pagination a, .opam-pagination span{
  padding: 8px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--opam-line);
  font-size: 13.5px;
  background:#fff;
}
.opam-pagination .current{ background: var(--opam-navy); color:#fff; border-color: var(--opam-navy); }

/* =========================
   FOOTER
   ========================= */
.opam-footer{
  background: var(--opam-navy);
  color: #C6CEDA;
  margin-top: 60px;
}
.opam-footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 48px 0 28px;
}
.opam-footer-grid--3{
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 760px){
  .opam-footer-grid,
  .opam-footer-grid--3{
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0 8px;
  }
}
.opam-footer h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.opam-footer ul li{ margin-bottom:9px; font-size:14px; }
.opam-footer a:hover{ color:#fff; }
.opam-footer-about p{ font-size:13.5px; color:#9FAAC0; }

/* Social media (gaya kotak membulat berwarna per platform) */
.opam-social-block{
  text-align:center;
  padding: 28px 0 32px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.opam-social-block h4{ margin-bottom: 16px; }
.opam-social{
  display:flex;
  justify-content:center;
  gap: 14px;
}
.opam-social-icon{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, opacity .15s ease;
}
.opam-social-icon:hover{ transform: translateY(-3px); opacity:.92; }
.opam-social-icon--facebook{ background:#3B5998; }
.opam-social-icon--twitter{ background:#1DA1F2; }
.opam-social-icon--youtube{ background:#FF0000; }
.opam-social-icon--instagram{ background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
.opam-social-icon--tiktok{ background:#111; }

.opam-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding: 18px 0;
  font-size: 12.5px;
  color:#8B96AC;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
@media (max-width: 600px){
  .opam-footer-bottom{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
}

/* Empty state */
.opam-empty{
  text-align:center;
  padding: 60px 20px;
  color: var(--opam-muted);
}

/* Utility */
.mt-0{margin-top:0;}