/* MINCAT — paritas tampilan untuk tautan <a> pengganti <button>.
 *
 * KENAPA FILE INI ADA
 * Prototype memakai <button onclick="go('...')"> untuk navigasi. Sesuai aturan, tombol
 * navigasi diganti tautan <a href>. Tapi mincat.css (disalin TANPA perubahan) banyak
 * menarget elemen <button> (".nav button", ".mobile button", ".footer-links button", dst)
 * dan memanfaatkan default bawaan browser untuk <button>. Tanpa file ini, <a> akan
 * tampil berbeda (garis bawah, tanpa padding, inline, dst).
 *
 * ISI
 *  1) Bagian "KEMBAR": setiap aturan di mincat.css yang selektornya memuat tipe `button`
 *     diduplikasi dengan `a`. Dihasilkan otomatis, isinya sama persis.
 *  2) Bagian "DEFAULT BROWSER": meniru default <button> (inline-block, padding 1px 6px,
 *     teks rata tengah, tanpa garis bawah). Memakai :where() agar spesifisitasnya 0 dan
 *     tidak pernah mengalahkan aturan di mincat.css.
 *
 * mincat.css TIDAK diubah. Menghapus file ini (dan satu baris wp_enqueue_style di
 * functions.php) langsung mengembalikan keadaan ke "tanpa paritas".
 */

/* ===== 1) KEMBAR: button -> a ===== */
.nav a { border:0;background:none;color:var(--m);font-weight:700 }
.nav a.active { color:var(--b);border-bottom:2px solid var(--b);padding-bottom:9px }
.side a { border:0;text-align:left;padding:11px 9px;border-radius:8px;background:white;color:var(--m);font-size:11px;font-weight:700 }
.side a.active { background:var(--b);color:white }
.queue a { display:flex;gap:9px;align-items:center;text-align:left;border:1px solid var(--l);border-radius:10px;background:white;padding:11px }
.queue a.sel { background:#f4f9ff;border-color:#82b3e8 }
@media(max-width:620px) {
  .mobile a { border:0;background:none;color:#8190a7;font-size:9px;display:flex;flex-direction:column;align-items:center;gap:3px }
  .mobile a span { font-size:17px }
  .mobile a.active { color:var(--b);font-weight:800 }
}
.footer-links a { border:0;background:none;color:var(--m);font-size:10px;font-weight:700 }
.side a { display:flex;align-items:center;gap:9px }
.mobile a { display:flex;flex-direction:column;align-items:center;gap:3px }
@media (max-width:620px) {
  .side a { flex:0 0 auto;white-space:nowrap;padding:8px 12px }
}
.ak-side a { display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:11px 12px;border-radius:12px;color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;text-align:left;font-family:inherit }
.ak-side a:hover { background:var(--bg);color:var(--ink) }
.ak-side a.on { background:var(--blue-50);color:var(--ink) }
@media (max-width:800px) {
  .mobile a.bot-center { background:#2f5fd6;color:#fff;border:4px solid #fff;width:58px;height:58px;margin-top:-30px;font-size:0;box-shadow:0 8px 18px rgba(47,95,214,.35);display:grid;place-items:center;padding:0;flex:0 0 auto }
  .mobile a.bot-center svg { width:24px;height:24px;stroke:#fff;fill:none }
}
.bot-form a:disabled { opacity:.55;background:var(--ink);color:#fff;cursor:not-allowed }
.nav a { background:none;border:0;padding:8px 12px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;border-radius:8px }
.nav a.active { color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue);border-radius:0 }

/* ===== 2) DEFAULT BROWSER <button> untuk <a> yang menggantikan tombol ===== */
/* <button> tidak mewarisi letter-spacing/word-spacing/text-transform/text-indent/
   text-shadow dari induknya; <a> mewarisinya. Disamakan di sini. */
:where(a.btn, a.link, a.text-cta, a.acct-btn, .nav a, .mobile a, .footer-links a) {
  display: inline-block;
  box-sizing: border-box;
  padding: 1px 6px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

/* Tautan bergaya tombol: warna teks mengikuti jenis tombol (tidak ikut warna tautan biasa). */
a.btn.primary { color: #fff; }
a.btn.secondary { color: inherit; }


/* Banner portofolio */
.karya-banner { height: 120px; border-radius: 12px; background-size: cover; background-position: center; margin-bottom: 12px; }

/* Popup detail portofolio */
.mc-modal-overlay { position: fixed; inset: 0; background: rgba(11, 23, 52, .45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.mc-modal { background: #fff; color: #0b1734; width: 100%; max-width: 560px; max-height: 85vh; border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.mc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e2e9f2; }
.mc-modal-x { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: #0b1734; padding: 0 4px; }
.mc-modal-body { padding: 16px 20px 20px; overflow: auto; }

/* Bilah bawah HP: setiap item (termasuk tombol chat) mendapat kolom yang sama lebar, sehingga tombol chat tepat di tengah. */
@media (max-width:800px){
  .mobile{display:grid !important;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;justify-items:center;justify-content:stretch}
  .mobile > *{justify-self:center;min-width:0}
  .mobile button.bot-center{justify-self:center}
}

/* Pengaman lebar: teks panjang tidak boleh melebarkan halaman di HP (yang membuat tampilan jadi seperti desktop). */
html,body{max-width:100%;overflow-x:hidden}
.job > *{min-width:0}
.job h3,.job p,.job div{overflow-wrap:anywhere;word-break:break-word}
.joblist,.main,.shell{min-width:0;max-width:100%}
img,svg,video{max-width:100%}

/* Footer beranda: beri ruang supaya tidak tertutup bilah navigasi bawah di HP. */
@media (max-width:800px){ .editorial-footer{padding-bottom:96px} }