/* =========================================================
   ARC - Lapis Tampilan
   Penyegaran global untuk alvariderscommunity.web.id
   Arah: bersih & terang. Tidak mengubah isi/struktur halaman,
   hanya gaya. Hapus mu-plugin-nya untuk kembali ke bawaan Divi.
   ========================================================= */

:root {
  --arc-oranye:      #ff4d00;  /* warna merek: untuk bidang besar & isian */
  --arc-oranye-tua:  #d93f00;  /* isian saat hover */
  --arc-oranye-teks: #b83500;  /* KHUSUS teks kecil di atas latar terang.
                                  #ff4d00 di atas putih cuma 3,5:1, di bawah
                                  ambang WCAG AA 4,5:1 - jangan dipakai
                                  untuk label/meta berukuran kecil. */
  --arc-oranye-muda: #fff1ec;
  --arc-hijau:       #7cda24;

  --arc-tinta:       #1c1f23;  /* judul */
  --arc-teks:        #454b52;  /* isi */
  --arc-redup:       #79818a;  /* meta */
  --arc-garis:       #e7e9ec;
  --arc-latar:       #f6f7f9;  /* latar lembut di balik kartu */

  --arc-radius:      14px;
  --arc-radius-kecil: 10px;
  --arc-bayang:      0 1px 2px rgba(16,20,26,.04), 0 6px 20px rgba(16,20,26,.06);
  --arc-bayang-naik: 0 2px 4px rgba(16,20,26,.05), 0 14px 34px rgba(16,20,26,.11);
  --arc-transisi:    180ms cubic-bezier(.2,.6,.3,1);
}

/* ---------- 1. Dasar tipografi ---------------------------------- */

body,
body.et_divi_theme {
  color: var(--arc-teks);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#main-content p,
.et_pb_text p,
.entry-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--arc-teks);
  margin-bottom: 1.1em;
}

/* Rata kiri, bukan rata kanan-kiri.
   Justify bikin celah antar kata melebar tak beraturan dan
   itu salah satu hal yang paling bikin halaman terasa jadul. */
.et_pb_text p[style*="justify"],
.et_pb_text p[style*="text-align: justify"],
.et_pb_text_align_justified,
.et_pb_text_align_justified p,
.entry-content p[style*="justify"] {
  text-align: left !important;
}

#main-content h1, #main-content h2, #main-content h3,
#main-content h4, #main-content h5, #main-content h6 {
  color: var(--arc-tinta);
  letter-spacing: -.012em;
  line-height: 1.22;
}

#main-content h3 {
  font-size: 21px;
  margin-top: 1.9em;
  margin-bottom: .55em;
  padding-bottom: .38em;
  border-bottom: 2px solid var(--arc-garis);
}

/* Judul besar halaman (modul Heading Divi) */
.et_pb_heading .et_pb_module_header,
h1.et_pb_module_header {
  letter-spacing: -.022em;
  line-height: 1.06;
}

/* ---------- 2. Latar lembut di seksi berisi daftar artikel ------- */

.et_pb_section:has(.et_pb_blog) {
  background-color: var(--arc-latar) !important;
}

/* ---------- 3. Kartu artikel ------------------------------------ */

.et_pb_blog_posts.et_grid_module {
  align-items: stretch !important;
  gap: 26px !important;
}

.et_pb_blog_posts .et_pb_post,
.et_pb_blog .et_pb_post {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid var(--arc-garis) !important;
  border-radius: var(--arc-radius) !important;
  box-shadow: var(--arc-bayang) !important;
  padding: 26px 26px 24px !important;
  margin: 0 !important;
  overflow: hidden;
  transition: transform var(--arc-transisi),
              box-shadow var(--arc-transisi),
              border-color var(--arc-transisi);
}

.et_pb_blog_posts .et_pb_post:hover,
.et_pb_blog .et_pb_post:hover {
  transform: translateY(-3px);
  box-shadow: var(--arc-bayang-naik) !important;
  border-color: #d8dbe0 !important;
}

/* Gambar unggulan bila suatu saat dipakai */
.et_pb_blog_posts .et_pb_post .entry-featured-image-url {
  border-radius: var(--arc-radius-kecil);
  overflow: hidden;
  margin-bottom: 18px;
}
.et_pb_blog_posts .et_pb_post .entry-featured-image-url img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 320ms cubic-bezier(.2,.6,.3,1);
}
.et_pb_blog_posts .et_pb_post:hover .entry-featured-image-url img {
  transform: scale(1.035);
}

/* Judul kartu */
.et_pb_blog_posts .et_pb_post .entry-title,
.et_pb_blog .et_pb_post .entry-title {
  font-family: "Encode Sans Condensed", Helvetica, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.012em;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.et_pb_blog_posts .et_pb_post .entry-title a {
  color: var(--arc-tinta) !important;
  transition: color var(--arc-transisi);
}
.et_pb_blog_posts .et_pb_post:hover .entry-title a {
  color: var(--arc-oranye) !important;
}

/* Baris meta: tanggal | kategori */
.et_pb_blog_posts .et_pb_post .post-meta,
.et_pb_blog .et_pb_post .post-meta {
  font-size: 12.5px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--arc-redup) !important;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--arc-garis);
}
/* Divi menulis CSS preset modul secara inline di dalam halaman, sehingga
   selalu berada SETELAH berkas ini. Kalau spesifisitasnya seri, preset
   yang menang. Karena itu selektor meta di bawah ikut dinaikkan. */
html body .et_pb_blog_posts .et_pb_post .post-meta a,
html body .et_pb_blog .et_pb_post .post-meta a,
html body .et_pb_post .post-meta a {
  color: var(--arc-oranye-teks) !important;
  text-decoration: none;
  font-weight: 600;
}
html body .et_pb_blog_posts .et_pb_post .post-meta a:hover,
html body .et_pb_post .post-meta a:hover {
  color: var(--arc-oranye-tua) !important;
  text-decoration: underline;
}
.et_pb_blog_posts .et_pb_post .post-meta a:hover {
  text-decoration: underline;
}

/* Isi ringkas + dorong tombol ke dasar kartu agar rata */
.et_pb_blog_posts .et_pb_post .post-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.et_pb_blog_posts .et_pb_post .post-content p,
.et_pb_blog_posts .et_pb_post .post-content-inner p {
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: var(--arc-teks) !important;
  text-align: left !important;
  margin-bottom: 14px;
}

/* Tautan "read more" jadi tombol teks berpanah */
.et_pb_blog_posts .et_pb_post .more-link,
.et_pb_post a.more-link {
  margin-top: auto !important;
  align-self: flex-start;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: "Josefin Sans", Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 9px 16px !important;
  border: 1px solid rgba(255, 77, 0, .38) !important;
  border-radius: 999px !important;
  background: var(--arc-oranye-muda);
  transition: background var(--arc-transisi), color var(--arc-transisi),
              border-color var(--arc-transisi);
}
.et_pb_blog_posts .et_pb_post .more-link::after,
.et_pb_post a.more-link::after {
  content: "\2192";
  font-family: inherit;
  transition: transform var(--arc-transisi);
}
/* Warna teks tombol saat normal. Butuh spesifisitas tinggi juga karena
   Divi mengunci warnanya lewat preset modul. */
html body .et_pb_blog .et_pb_post div.post-content a.more-link,
html body .et_pb_blog_posts .et_pb_post div.post-content a.more-link,
html body .et_pb_post div.post-content a.more-link,
html body .et_pb_post a.more-link {
  color: var(--arc-oranye-teks) !important;
}

/* PENTING soal spesifisitas:
   Divi menulis `.et_pb_blog_0 .et_pb_post div.post-content a.more-link
   { color: ... !important }` dengan spesifisitas (0,4,2). Aturan hover
   yang lebih pendek akan KALAH walaupun ikut memakai !important, dan
   akibatnya teks tetap oranye di atas latar oranye alias tak terbaca.
   Karena itu selektor di bawah sengaja dibuat lebih spesifik. */
html body .et_pb_blog .et_pb_post div.post-content a.more-link:hover,
html body .et_pb_blog .et_pb_post div.post-content a.more-link:focus-visible,
html body .et_pb_blog_posts .et_pb_post div.post-content a.more-link:hover,
html body .et_pb_blog_posts .et_pb_post div.post-content a.more-link:focus-visible,
html body .et_pb_post div.post-content a.more-link:hover,
html body .et_pb_post div.post-content a.more-link:focus-visible,
html body .et_pb_post a.more-link:hover,
html body .et_pb_post a.more-link:focus-visible {
  background: var(--arc-oranye-tua) !important;
  border-color: var(--arc-oranye-tua) !important;
  color: #fff !important;
}

/* Panah ikut memutih; tanpa ini panah bisa tertinggal oranye. */
html body .et_pb_post div.post-content a.more-link:hover::after,
html body .et_pb_post div.post-content a.more-link:focus-visible::after,
html body .et_pb_post a.more-link:hover::after,
html body .et_pb_post a.more-link:focus-visible::after {
  color: #fff !important;
  transform: translateX(3px);
}

/* Paginasi */
.pagination .alignleft a,
.pagination .alignright a {
  color: var(--arc-oranye) !important;
  font-weight: 600;
}

/* ---------- 4. Tombol Divi -------------------------------------- */

.et_pb_button {
  font-family: "Josefin Sans", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border-radius: 999px !important;
  border-width: 2px !important;
  border-color: var(--arc-oranye) !important;
  color: var(--arc-oranye) !important;
  padding: 11px 30px !important;
  transition: background var(--arc-transisi), color var(--arc-transisi),
              border-color var(--arc-transisi), box-shadow var(--arc-transisi);
}
/* Sama seperti .more-link: dinaikkan spesifisitasnya supaya teks tidak
   pernah tenggelam ke dalam latar saat tombol terisi warna. */
html body .et_pb_button:hover,
html body .et_pb_button:focus-visible,
html body .et_pb_module.et_pb_button:hover,
html body .et_pb_module.et_pb_button:focus-visible,
html body .et_pb_bg_layout_light.et_pb_module.et_pb_button:hover,
html body .et_pb_bg_layout_light.et_pb_module.et_pb_button:focus-visible {
  background-color: var(--arc-oranye) !important;
  border-color: var(--arc-oranye) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(255, 77, 0, .26) !important;
  padding: 11px 30px !important;
}
/* Divi menyisipkan panah lewat ::after; matikan agar bentuk pil tetap rapi */
.et_pb_button::after {
  display: none !important;
}

/* ---------- 5. Tabel spesifikasi -------------------------------- */

.et_pb_text table,
.entry-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--arc-garis) !important;
  border-radius: var(--arc-radius-kecil) !important;
  overflow: hidden;
  margin: 18px 0 26px !important;
  font-size: 15px;
  background: #fff;
}
.et_pb_text table td,
.et_pb_text table th,
.entry-content table td,
.entry-content table th {
  border: 0 !important;
  border-bottom: 1px solid var(--arc-garis) !important;
  padding: 13px 16px !important;
  vertical-align: top;
  line-height: 1.55;
}
.et_pb_text table tr:last-child td,
.entry-content table tr:last-child td {
  border-bottom: 0 !important;
}
.et_pb_text table tr:nth-child(odd) td:first-child,
.entry-content table tr:nth-child(odd) td:first-child {
  background: #fafbfc;
}
.et_pb_text table td:first-child,
.entry-content table td:first-child {
  color: var(--arc-tinta);
  font-weight: 600;
  width: 44%;
  border-right: 1px solid var(--arc-garis) !important;
}

/* Tabel lebar tetap bisa digeser di HP tanpa merusak lebar halaman */
@media (max-width: 600px) {
  .et_pb_text table,
  .entry-content table { font-size: 14px; }
  .et_pb_text table td,
  .entry-content table td { padding: 10px 12px !important; }
}

/* ---------- 6. Daftar berpoin ----------------------------------- */

.et_pb_text ul,
.entry-content ul {
  padding-left: 0;
  list-style: none;
}
.et_pb_text ul li,
.entry-content ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  line-height: 1.68;
}
.et_pb_text ul li::before,
.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--arc-oranye);
  transform: rotate(45deg);
}

/* ---------- 6b. Meta artikel tunggal ---------------------------- */

.single .post-meta,
.et_pb_title_meta_container {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--arc-redup) !important;
}
html body .single .post-meta a,
html body .et_pb_title_meta_container a {
  color: var(--arc-oranye-teks) !important;
  font-weight: 600;
}
/* Sembunyikan sisa penulis kosong bila ada */
.post-meta .author.vcard:empty { display: none; }

/* ---------- 7. Gambar dalam artikel ----------------------------- */

/* Gambar pendamping di kolom sempit ikut menggulir agar tetap terlihat
   saat tabel spesifikasi yang panjang dibaca. */
@media (min-width: 981px) {
  .et_pb_row .et_pb_column_2_5 .et_pb_text:has(figure.wp-block-image),
  .et_pb_row .et_pb_column_1_3 .et_pb_text:has(figure.wp-block-image) {
    position: sticky;
    top: 108px;
  }
}


.et_pb_text figure.wp-block-image img,
.entry-content figure.wp-block-image img {
  border-radius: var(--arc-radius-kecil);
  box-shadow: var(--arc-bayang);
}

/* Kartu motor di halaman depan */
.et_pb_image {
  border-radius: var(--arc-radius);
  overflow: hidden;
  transition: transform var(--arc-transisi), box-shadow var(--arc-transisi);
}
.et_pb_image:hover {
  transform: translateY(-4px);
  box-shadow: var(--arc-bayang-naik);
}

/* ---------- 8. Navigasi ----------------------------------------- */

#top-menu li a:hover,
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
  color: var(--arc-oranye) !important;
  opacity: 1;
}
#top-menu li li a:hover {
  background-color: var(--arc-oranye-muda) !important;
  color: var(--arc-oranye) !important;
}
#main-header .sub-menu {
  border-top-color: var(--arc-oranye) !important;
  border-radius: 0 0 var(--arc-radius-kecil) var(--arc-radius-kecil);
  overflow: hidden;
  box-shadow: var(--arc-bayang-naik);
}
#main-header {
  box-shadow: 0 1px 0 var(--arc-garis), 0 6px 22px rgba(16,20,26,.05) !important;
}

/* ---------- 9. Formulir komentar -------------------------------- */

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
  border: 1px solid var(--arc-garis) !important;
  border-radius: var(--arc-radius-kecil) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  font-size: 15px;
  transition: border-color var(--arc-transisi), box-shadow var(--arc-transisi);
}
#commentform input:focus,
#commentform textarea:focus {
  border-color: var(--arc-oranye) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 0, .14) !important;
  outline: none;
}
#commentform .form-submit .et_pb_button,
#commentform #submit {
  background: var(--arc-oranye) !important;
  border-color: var(--arc-oranye) !important;
  color: #fff !important;
}

/* ---------- 10. Aksesibilitas: fokus terlihat ------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible {
  outline: 3px solid rgba(255, 77, 0, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 11. Scrollbar bertema ------------------------------- */
/* Catatan: properti standar sengaja hanya dipasang di peramban yang
   tidak mendukung ::-webkit-scrollbar (Firefox), karena Chromium
   mengabaikan ::-webkit-scrollbar bila scrollbar-width/color di-set. */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #f0f1f4; }
::-webkit-scrollbar-thumb {
  background: #c9ccd2;
  border-radius: 999px;
  border: 3px solid #f0f1f4;
}
::-webkit-scrollbar-thumb:hover { background: var(--arc-oranye); }

@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #c9ccd2 #f0f1f4; }
}

/* ---------- 12. Penyesuaian layar kecil ------------------------- */

@media (max-width: 980px) {
  .et_pb_heading .et_pb_module_header,
  h1.et_pb_module_header { font-size: 46px !important; }
  .et_pb_blog_posts.et_grid_module { gap: 18px !important; }
  .et_pb_blog_posts .et_pb_post { padding: 22px 20px !important; }
}

@media (max-width: 767px) {
  body, #main-content p, .et_pb_text p { font-size: 15.5px; }
  .et_pb_heading .et_pb_module_header,
  h1.et_pb_module_header { font-size: 34px !important; }
  .et_pb_blog_posts .et_pb_post .entry-title { font-size: 19px !important; }
  #main-content h3 { font-size: 18.5px; }
}

/* Hormati preferensi kurangi-gerak */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .et_pb_blog_posts .et_pb_post:hover,
  .et_pb_image:hover { transform: none; }
}