/* =========================================================
   Tema MTAQ Pulai Chondong
   Warna diambil dari palet tema (Penampilan → Editor → Gaya → Warna).
   Tukar palet di sana dan seluruh laman ikut berubah.
   ========================================================= */
:root {
  --hijau-gelap: var(--wp--preset--color--hijau-gelap, #14301f);
  --hijau: var(--wp--preset--color--hijau, #1f4d33);
  --hijau-muda: var(--wp--preset--color--hijau-muda, #e8f0ea);
  --emas: var(--wp--preset--color--emas, #c9a227);
  --emas-muda: var(--wp--preset--color--emas-muda, #f6efd8);
  --putih: var(--wp--preset--color--putih, #fff);
  --latar: var(--wp--preset--color--latar, #fafaf7);
  --teks: var(--wp--preset--color--teks, #1d2420);
  --teks-lembut: var(--wp--preset--color--teks-lembut, #5b6660);
  --garis: var(--wp--preset--color--garis, #e3e6e1);
  --footer: color-mix(in srgb, var(--hijau-gelap) 70%, black);
  --bayang: 0 10px 30px rgba(20, 48, 31, .10);
  --radius: 14px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --fon-arab: var(--wp--preset--font-family--amiri, Amiri, serif);
  --i-buku: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2314301f%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 19.5V5a2 2 0 0 1 2-2h14v16H6.5a2.5 2.5 0 0 0 0 5H20%22/%3E%3C/svg%3E");
  --i-topi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2314301f%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 10 12 5 2 10l10 5 10-5z%22/%3E%3Cpath d=%22M6 12v5c3 2 9 2 12 0v-5%22/%3E%3C/svg%3E");
  --i-waris: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2314301f%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22/%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22/%3E%3C/svg%3E");
  --i-skrin: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2314301f%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%223%22 width=%2220%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M8 21h8M12 17v4%22/%3E%3C/svg%3E");
  --i-lokasi: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2314301f%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.5%22/%3E%3C/svg%3E");
  --i-telefon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2314301f%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z%22/%3E%3C/svg%3E");
}

/* ===== Asas: buang jarak automatik antara bahagian besar ===== */
.wp-site-blocks > *, .mtaq-main > * { margin-block: 0; }
.wp-site-blocks { padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.topbar, .site-header, .hero, .section, .quick, .page-hero, .reading, .site-footer {
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}

/* ===== Bar atas ===== */
.topbar { background: var(--hijau-gelap); color: #cfd9d2; font-size: .8rem; }
.topbar-inner { padding-block: 8px; gap: 8px 16px; }
.topbar p { margin: 0; line-height: 1.5; }
.topbar a { color: inherit; text-decoration: none; margin-left: 16px; }
.topbar a:first-child { margin-left: 0; }
.topbar a:hover { color: var(--emas); }
.topbar-alamat::before, .topbar-hubungi a[href^="tel"]::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px;
  background: var(--emas); -webkit-mask: var(--i-lokasi) center/contain no-repeat; mask: var(--i-lokasi) center/contain no-repeat;
}
.topbar-hubungi a[href^="tel"]::before { -webkit-mask-image: var(--i-telefon); mask-image: var(--i-telefon); }

/* ===== Header ===== */
.site-top { position: sticky; top: 0; z-index: 50; background: var(--putih); border-bottom: 1px solid var(--garis); }
.admin-bar .site-top { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-top { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-top { top: 0; } }
.header-inner { min-height: 72px; gap: 12px; }
.brand { gap: 10px; align-items: center; }
.brand .wp-block-image { margin: 0; }
.brand-logo img { height: 52px; width: auto; display: block; }
.brand-khat img { height: 40px; width: auto; display: block; }

/* Menu */
.mtaq-nav { font-weight: 600; font-size: .92rem; gap: 2px; }
.mtaq-nav .wp-block-navigation-item__content { padding: 10px 12px; border-radius: 8px; color: var(--teks); text-decoration: none; }
.mtaq-nav .wp-block-navigation-item__content:hover { background: var(--hijau-muda); color: var(--hijau); }
.mtaq-nav .wp-block-navigation__submenu-icon { margin-left: 2px; }
.mtaq-nav .wp-block-navigation__submenu-container {
  border: 0 !important; border-radius: 12px; box-shadow: var(--bayang); padding: 8px; min-width: 230px !important; background: var(--putih);
}
.mtaq-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 12px; font-weight: 500; }
.mtaq-nav .nav-cta > .wp-block-navigation-item__content { background: var(--hijau-gelap); color: var(--putih); margin-left: 6px; }
.mtaq-nav .nav-cta > .wp-block-navigation-item__content:hover { background: var(--hijau); color: var(--putih); }
.mtaq-nav .wp-block-navigation__responsive-container-open, .mtaq-nav .wp-block-navigation__responsive-container-close { color: var(--hijau-gelap); }
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--gutter-r) 24px var(--gutter-l); background: var(--putih); }
.mtaq-nav .is-menu-open .wp-block-navigation__responsive-container-content { gap: 0 !important; width: 100%; align-items: stretch !important; padding-top: 32px; }
.mtaq-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0 !important; align-items: stretch !important; }
.mtaq-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--garis); flex-direction: column; align-items: stretch !important; }
.mtaq-nav .is-menu-open .wp-block-navigation-item__content { padding: 13px 8px; font-size: 1rem; border-radius: 0; }
.mtaq-nav .is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; padding: 0 0 8px 12px !important; }
.mtaq-nav .is-menu-open .nav-cta { border: 0; margin-top: 14px; }
.mtaq-nav .is-menu-open .nav-cta > .wp-block-navigation-item__content { margin: 0; text-align: center; border-radius: 999px; justify-content: center; }

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden; text-align: center; color: var(--putih);
  background: linear-gradient(160deg, var(--hijau-gelap), var(--hijau));
  padding-block: 72px 56px;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: radial-gradient(var(--emas) 1px, transparent 1px); background-size: 22px 22px;
}
.hero > * { position: relative; z-index: 1; }
.hero .badge {
  width: fit-content; margin-inline: auto !important; padding: 6px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--emas) 60%, transparent); color: var(--emas);
  font-size: .78rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
}
.hero-khat { margin-block: 22px 10px !important; }
.hero-khat img { width: min(520px, 88%); height: auto; margin-inline: auto; display: block; }
.hero .hero-title { color: var(--putih); line-height: 1.15; text-wrap: balance; margin-top: 0; }
.hero .hero-lead { color: #d6e2da; max-width: 640px; margin-inline: auto !important; }
.hero-btns { gap: 12px; margin-top: 28px !important; }
.wp-block-button.is-style-garis-putih .wp-block-button__link { background: transparent; color: var(--putih); border: 1.5px solid rgba(255,255,255,.6); }
.wp-block-button.is-style-garis-putih .wp-block-button__link:hover { background: rgba(255,255,255,.1); }
.wp-block-button.is-style-hijau .wp-block-button__link { background: var(--hijau-gelap); color: var(--putih); }
.wp-block-button.is-style-garis-hijau .wp-block-button__link { background: transparent; color: var(--hijau-gelap); border: 1.5px solid var(--hijau-gelap); }
.wp-block-button__link { transition: transform .2s, background .2s; }
.wp-block-button__link:hover { transform: translateY(-2px); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 720px; margin: 44px auto 0 !important; }
.stats > * { margin: 0 !important; }
.stat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 18px 10px; font-size: .8rem; color: #c6d4ca; line-height: 1.4; }
.stat strong { display: block; font-size: clamp(1.25rem, 4vw, 1.9rem); color: var(--emas); font-weight: 800; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* ===== Seksyen ===== */
.section { padding-block: 72px; }
.section-alt { background: var(--putih); }
.section-head { margin-bottom: 32px !important; gap: 12px; align-items: flex-end; }
.section-head > *, .section-head-text > * { margin: 0 !important; }
.eyebrow { color: var(--emas); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: 1.2px; }
.link-all a { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Kad bidang */
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cards-3 > * { margin: 0 !important; }
.card {
  position: relative; background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius); padding: 28px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--bayang); border-color: var(--emas); }
.card::before {
  content: ""; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; margin-bottom: 16px;
  background: var(--emas-muda) center/28px no-repeat; color: var(--hijau-gelap);
}
.card.ikon-buku::before { background-image: var(--i-buku); }
.card.ikon-topi::before { background-image: var(--i-topi); }
.card.ikon-arab::before { content: "ع"; font-family: var(--fon-arab); font-size: 1.7rem; line-height: 1; }
.card > * { margin-block: 0 !important; }
.card h3 { font-size: 1.2rem; margin-bottom: 6px !important; }
.card h3 a { color: var(--hijau-gelap); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card h3 a:focus-visible { outline: none; }
.card:has(a:focus-visible) { outline: 3px solid var(--emas); outline-offset: 2px; }
.card p { color: var(--teks-lembut); font-size: .93rem; }
.card .more { color: var(--emas); font-weight: 700; font-size: .9rem; margin-top: 14px !important; }

/* Pautan pantas */
.quick { background: var(--hijau-muda); padding-block: 28px; }
.quick-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.quick-inner > * { margin: 0 !important; }
.quick-item {
  position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center;
  background: var(--putih); border-radius: var(--radius); padding: 16px 18px; transition: .2s;
}
.quick-item:hover { box-shadow: var(--bayang); transform: translateY(-3px); }
.quick-item::before {
  content: ""; grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--hijau);
  -webkit-mask: none; mask: none;
}
.quick-item::after {
  content: ""; position: absolute; left: 18px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%);
  background: var(--putih) center/22px no-repeat;
}
.quick-item::before { background: var(--hijau-muda); }
.quick-item::after { background-color: transparent; }
.quick-item.ikon-waris::after { background-image: var(--i-waris); }
.quick-item.ikon-skrin::after { background-image: var(--i-skrin); }
.quick-item > * { margin: 0 !important; grid-column: 2; }
.quick-title { font-weight: 700; line-height: 1.3; }
.quick-title a { color: var(--hijau-gelap); text-decoration: none; }
.quick-title a::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 1; }
.quick-desc { color: var(--teks-lembut); font-size: .85rem; line-height: 1.3; }

/* ===== Berita ===== */
.news-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.news-grid > li { margin: 0 !important; display: flex; }
.news {
  position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius); transition: .2s;
}
.news:hover { box-shadow: var(--bayang); transform: translateY(-4px); }
.news > * { margin: 0 !important; }
.news-img { margin: 0; }
.news-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/10; }
.news:not(:has(.news-img img))::before {
  content: "م"; display: grid; place-items: center; aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--hijau-gelap), var(--hijau));
  font-family: var(--fon-arab); font-size: 3rem; color: color-mix(in srgb, var(--emas) 45%, transparent);
}
.news-body { padding: 16px 18px 20px; }
.news-body > * { margin: 0 !important; }
.news-date { font-size: .78rem; color: var(--emas); font-weight: 700; }
.news-title { font-size: 1rem !important; line-height: 1.4; margin-top: 4px !important; }
.news-title a { color: var(--hijau-gelap); text-decoration: none; }
.news-title a::after { content: ""; position: absolute; inset: 0; }
.pagination { margin-top: 36px !important; gap: 8px; font-weight: 600; }
.pagination a, .pagination .page-numbers { padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.pagination .current { background: var(--hijau-gelap); color: var(--putih); }

/* ===== Tajuk halaman dalam ===== */
.page-hero {
  position: relative; overflow: hidden; color: var(--putih);
  background: linear-gradient(160deg, var(--hijau-gelap), var(--hijau)); padding-block: 48px 40px;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: radial-gradient(var(--emas) 1px, transparent 1px); background-size: 22px 22px;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .breadcrumb { font-size: .82rem; color: #b9c7bd; margin: 0 0 12px !important; }
.page-hero .breadcrumb a { color: var(--emas); text-decoration: none; }
.page-hero h1 { color: var(--putih); font-size: clamp(1.7rem, 5.5vw, 2.8rem); margin: 0 !important; text-wrap: balance; }
.page-hero .post-meta { color: #b9c7bd; font-size: .9rem; margin-top: 10px !important; }

/* ===== Gaya bacaan (kandungan halaman & post) ===== */
.reading { padding-block: 48px 64px; font-size: 1.04rem; }
.wp-block-post-content > h1:first-child { display: none; }
.reading p { color: #2d3631; }
.reading :is(h2, h3, h4).wp-block-heading, .reading .wp-block-post-content > :is(h2, h3, h4) {
  display: flex; align-items: center; gap: 12px; margin-top: 2.4em; color: var(--hijau-gelap);
}
.reading :is(h2, h3, h4).wp-block-heading::before, .reading .wp-block-post-content > :is(h2, h3, h4)::before {
  content: ""; width: 28px; height: 3px; background: var(--emas); border-radius: 2px; flex-shrink: 0;
}
.reading h3 { font-size: clamp(1.2rem, 3.5vw, 1.45rem); }
.reading h4 { font-size: 1.1rem; text-transform: none; }

/* Senarai bernombor jadi kad 01, 02 ... */
.reading ol { list-style: none; counter-reset: n; padding: 0; display: grid; gap: 12px; }
.reading ol > li {
  counter-increment: n; position: relative;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px 18px 16px 62px;
}
.reading ol > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 18px; top: 16px; font-weight: 800; color: var(--emas); }
.reading ul { padding-left: 0; list-style: none; }
.reading ul > li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.reading ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--emas); }

/* Gambar */
.reading img, .post-cover img { max-width: 100% !important; height: auto !important; }
.reading figure { max-width: 100%; }
.reading .wp-block-image.aligncenter, .reading .wp-block-image .aligncenter { display: block; margin-inline: auto; text-align: center; }
.reading .wp-block-image.aligncenter img { margin-inline: auto; }
.reading .wp-block-image img, .reading figure img, .post-cover img { border-radius: var(--radius); box-shadow: var(--bayang); height: auto; }
.reading figcaption, .reading .wp-element-caption { font-size: .85rem; color: var(--teks-lembut); text-align: center; font-style: italic; }
.post-cover { margin-bottom: 28px !important; }

/* Jadual */
.reading .wp-block-table, .reading figure.wp-block-table { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--putih); }
.reading table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.reading table :is(td, th) { border: 0; border-top: 1px solid var(--garis); padding: 12px 14px; vertical-align: top; text-align: left; }
.reading table thead :is(td, th), .reading table tr:first-child :is(td, th) { background: var(--hijau-gelap); color: var(--putih); font-weight: 700; border-top: 0; }
.reading table tr:nth-child(even) td { background: var(--latar); }
.reading iframe { max-width: 100%; border-radius: var(--radius); }

/* Kotak Visi & Misi */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.duo > * { margin: 0 !important; }
.box { background: var(--hijau-muda); border-radius: var(--radius); padding: 24px; }
.box > * { margin: 0 !important; }
.box p { color: var(--hijau-gelap) !important; font-weight: 600; font-size: 1.08rem; margin-top: 8px !important; }
.label { font-size: .78rem !important; font-weight: 700 !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--emas) !important; }
.box .label { margin-top: 0 !important; }

/* Moto / petikan */
.quote { background: var(--hijau-gelap); border-radius: var(--radius); padding: 32px 24px; text-align: center; }
.quote > * { margin: 0 !important; }
.quote .quote-text { color: var(--putih) !important; font-size: clamp(1.15rem, 4vw, 1.6rem); font-weight: 800; margin-top: 8px !important; line-height: 1.4; }

/* Garis masa */
.tl { display: grid; grid-template-columns: 56px 1fr; gap: 18px; position: relative; }
.tl::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: -24px; width: 2px; background: var(--garis); }
.tl > * { margin: 0 !important; }
.tl .year {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hijau-gelap); color: var(--emas) !important; font-weight: 800; font-size: .85rem; position: relative; z-index: 1;
}
.tl-body { min-width: 0; }
.tl-body > :first-child { margin-top: 0; }

/* Gaya kumpulan "Kad" */
.wp-block-group.is-style-kad { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius); padding: 24px; }

/* ===== Footer ===== */
.site-footer { background: var(--footer); color: #b9c7bd; padding-top: 56px; font-size: .92rem; }
.site-footer > * { margin-block: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.footer-grid > * { margin: 0 !important; }
.footer-grid h4 { color: var(--putih); font-size: 1rem; margin: 0 0 14px; }
.footer-grid p { margin: 0 0 10px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--emas); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.brand-light { margin-bottom: 14px !important; }
.brand-light .brand-logo img { background: var(--putih); border-radius: 12px; padding: 6px; height: 64px; }
.brand-light .brand-khat img { height: 44px; }
.site-footer .btn-sm .wp-block-button__link { padding: 9px 18px; font-size: .85rem; color: var(--hijau-gelap); }
.footer-rasmi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-block: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; margin: 0 !important; }
.footer-rasmi strong { color: var(--putih); }
/* Logo kecil di depan nama jabatan (latar putih supaya logo berlatar putih pun kemas) */
.footer-rasmi a { display: inline-flex; align-items: center; gap: 8px; }
.footer-rasmi img { width: 28px !important; height: 28px !important; object-fit: contain; background: var(--putih); border-radius: 6px; padding: 2px; flex: none; }
.copyright { border-top: 1px solid rgba(255,255,255,.08); padding-block: 18px; font-size: .8rem; text-align: center; margin: 0 !important; }

/* ===== Animasi ringan =====
   Hero & tajuk halaman: muncul sekali bila laman dibuka.
   Kad, berita, gambar: muncul bila diskrol (kelas ditambah oleh assets/js/animasi.js).
   Tanpa JavaScript atau jika pelawat pilih "kurangkan gerakan", semua terus kelihatan. */
@keyframes naik-masuk { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-khat, .hero .hero-title, .hero .hero-lead, .hero-btns, .page-hero > * { animation: naik-masuk .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero .hero-title, .page-hero > :nth-child(2) { animation-delay: .12s; }
  .hero .hero-lead { animation-delay: .24s; }
  .hero-btns { animation-delay: .36s; }

  .animasi-on .muncul { opacity: 0; transform: translateY(24px); }
  .animasi-on .muncul.nampak { opacity: 1; transform: none; transition: opacity .6s ease var(--tunda, 0s), transform .6s cubic-bezier(.2,.7,.2,1) var(--tunda, 0s); }
}

/* ===== Tablet & telefon ===== */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .topbar-alamat { display: none; }
  .topbar-inner { justify-content: center !important; }
  .brand-logo img { height: 44px; }
  .brand-khat img { height: 30px; }
  .section { padding-block: 56px; }
  .stats { gap: 8px; }
  .stat { font-size: .7rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .news-grid { gap: 12px; }
  .news { flex-direction: row; }
  .news-img, .news:not(:has(.news-img img))::before { width: 110px; flex-shrink: 0; aspect-ratio: auto; min-height: 96px; }
  .news-img img { aspect-ratio: auto; height: 100%; }
  .news:not(:has(.news-img img))::before { font-size: 2rem; }
  .news-body { padding: 12px 14px; }
  .news-title { font-size: .93rem !important; }
  .reading table { font-size: .86rem; }
  .reading table :is(td, th) { padding: 10px; }
  .tl { grid-template-columns: 44px 1fr; gap: 12px; }
  .tl .year { width: 44px; height: 44px; font-size: .72rem; }
  .tl::before { left: 21px; top: 44px; }
}

/* Menu telefon: rata kiri, ruang sentuh selesa */
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: stretch !important; justify-content: flex-start !important; text-align: left !important;
}
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding: 13px 8px !important; font-size: 1rem; width: 100%;
}
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { font-weight: 700; }
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 8px !important; color: var(--teks-lembut); font-weight: 500; }
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta > .wp-block-navigation-item__content { padding: 14px !important; justify-content: center; text-align: center; }
.mtaq-nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta > .wp-block-navigation-item__content { margin: 0 !important; box-sizing: border-box; }