/* ==========================================================================
   SyariahConsult — landing page styles
   Palette: deep emerald + gold. No external image or font assets.
   ========================================================================== */

:root {
    --gold: #d4af37;
    --gold-soft: #e8c96a;
    --gold-deep: #a8842a;
    --ink: #04100b;
    --green-900: #06170f;
    --green-800: #0b2e22;
    --green-700: #10412f;
    --green-600: #14513c;
    --cream: #f6f2e8;
    --cream-dim: #e6dfcd;
    --text-on-dark: #f3efe4;
    --muted-on-dark: rgba(243, 239, 228, 0.68);
    --muted-on-light: rgba(6, 23, 15, 0.68);
    --radius: 18px;
    --shell: 1400px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Kepitan mendatar mesti ada pada KEDUA-DUA html dan body.
   Marquee testimoni lebarnya lebih 3400px. Dengan overflow-x: hidden pada body
   sahaja, pelayar telefon masih membenarkan halaman dileret ke kiri dan kanan —
   tingkah laku yang terkenal tidak boleh dipercayai. overscroll-behavior-x
   menghentikan lantunan mendatar pula. */
html,
body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--green-900);
    color: var(--text-on-dark);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

/* Shared Islamic geometric tile, used as a faint overlay on dark sections */
.hero::before,
.pokok-section::before,
.cta-banner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Crect x='16' y='16' width='48' height='48'/%3E%3Crect x='16' y='16' width='48' height='48' transform='rotate(45 40 40)'/%3E%3Cpath d='M40 0v16M40 64v16M0 40h16M64 40h16'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   ANIMASI BUTANG

   Setiap butang berkongsi tiga tingkah laku:
     1. kilauan yang meluncur merentasi permukaan semasa tuding
     2. sedikit terangkat, kemudian ditekan ke bawah semasa diklik
     3. denyutan halus pada butang utama supaya mata tertarik kepadanya

   Semuanya dimatikan di bawah prefers-reduced-motion.
   ========================================================================== */

.cta-btn,
.nav-btn,
.showcase-btn,
.btn-cetak,
.cta-banner-btn,
.privacy-save-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Kilauan yang meluncur — dilukis dengan pseudo-elemen, bukan imej */
.cta-btn::after,
.nav-btn::after,
.showcase-btn::after,
.btn-cetak::after,
.cta-banner-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    z-index: -1;
    width: 50%;
    height: 100%;
    transform: skewX(-22deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.32),
        transparent
    );
    transition: left 0.55s cubic-bezier(0.3, 0.7, 0.4, 1);
}

.cta-btn:hover::after,
.nav-btn:hover::after,
.showcase-btn:hover::after,
.btn-cetak:hover::after,
.cta-banner-btn:hover::after {
    left: 125%;
}

/* Ditekan ke bawah semasa diklik — maklum balas sentuhan */
.cta-btn:active,
.nav-btn:active,
.showcase-btn:active,
.btn-cetak:active,
.cta-banner-btn:active,
.privacy-save-btn:active {
    transform: translateY(1px) scale(0.985);
    transition-duration: 0.08s;
}

/* ---------------------------------------------------------------------------
   SHIMMER TEPI — satu titik cahaya mengelilingi bentuk butang.

   Bayang yang berdenyut terlalu halus di atas latar gelap; ia hilang begitu
   sahaja. Cahaya yang BERGERAK di tepi pula mudah ditangkap mata walaupun
   kecil, kerana mata manusia sangat peka kepada gerakan.

   Cara ia dibuat: kecerunan konik berputar di belakang butang, kemudian
   ditutup topeng supaya hanya jalur tepi selebar 2px yang kelihatan.
   --------------------------------------------------------------------------- */

@property --sudut-shimmer {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes pusingShimmer {
    to { --sudut-shimmer: 360deg; }
}

/* Warna shimmer ialah lawan kepada warna butang — emas berlari di tepi butang
   hijau, hijau berlari di tepi butang emas. Cahaya sewarna dengan butang akan
   hilang; yang berlawanan itu yang menonjol.

   Nilai lalai di sini emas, kerana kebanyakan butang berlatar hijau atau
   gelap. Butang emas membatalkannya di bawah. */
:root {
    --shimmer-terang: rgba(255, 228, 150, 0.98);
    --shimmer-lembut: rgba(212, 175, 55, 0.30);
}

/* Butang berlatar EMAS dapat cahaya PUTIH TULEN.

   Putih penuh tanpa lut sinar, dengan ekor yang lebih terang daripada versi
   asal — di atas emas, putih perlu tepu sepenuhnya barulah ia terbaca sebagai
   kilauan logam dan bukan sekadar kabus. */
.cta-btn {
    --shimmer-terang: rgb(255, 255, 255);
    --shimmer-lembut: rgba(255, 255, 255, 0.5);
}

/* Jalur sedikit lebih tebal pada butang emas — warna perlu ruang untuk
   terbaca di atas latar yang terang */
.cta-btn::before {
    padding: 3px;
}

.cta-btn::before,
.nav-btn::before,
.showcase-btn::before,
.btn-cetak::before,
.cta-banner-btn::before {    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;

    /* Satu lengkok terang sahaja; selebihnya lutsinar. Itu yang menjadikannya
       satu titik cahaya yang beredar, bukan cincin penuh yang berpusing. */
    background: conic-gradient(
        from var(--sudut-shimmer),
        transparent 0deg,
        transparent 232deg,
        var(--shimmer-lembut) 288deg,
        var(--shimmer-terang) 320deg,
        var(--shimmer-lembut) 348deg,
        transparent 360deg
    );

    /* Topeng dua lapis: satu pada content-box, satu pada border-box, kemudian
       ditolak antara satu sama lain. Yang tinggal hanyalah jalur padding —
       iaitu tepi butang. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;

    animation: pusingShimmer 3s linear infinite;
}

/* Selang masa berbeza supaya butang tidak berkelip serentak */
.cta-banner-btn::before     { animation-delay: 0.6s; }
.btn-cetak::before          { animation-delay: 1.2s; }
.pokok-cta .cta-btn::before { animation-delay: 1.8s; }
.showcase-btn::before       { animation-delay: 1.0s; }
.nav-btn::before            { animation-delay: 2.1s; }

/* Berhenti semasa tuding — kilauan yang meluncur itu ambil alih di situ */
.cta-btn:hover::before,
.nav-btn:hover::before,
.showcase-btn:hover::before,
.btn-cetak:hover::before,
.cta-banner-btn:hover::before {
    animation-play-state: paused;
    opacity: 0;
}

/* Ikon pencetak bergoyang sedikit semasa tuding */
@keyframes goyangIkon {
    0%, 100% { transform: rotate(0); }
    30%      { transform: rotate(-9deg); }
    60%      { transform: rotate(6deg); }
}

.btn-cetak:hover .ikon-cetak {
    animation: goyangIkon 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .cta-btn::before,
    .nav-btn::before,
    .showcase-btn::before,
    .btn-cetak::before,
    .cta-banner-btn::before,
    .cta-btn::after,
    .nav-btn::after,
    .showcase-btn::after,
    .btn-cetak::after,
    .cta-banner-btn::after {
        display: none;
    }
}

/* ==========================================================================
   BUTANG NAIK KE ATAS
   ========================================================================== */

/* Bentuk gerbang masjid dilukis sebagai SVG, bukan border-radius — puncak
   tirus dan lengkung S di sisi tidak boleh dibuat dengan jejari sempadan.

   Butang itu sendiri lutsinar; yang kelihatan hanyalah laluan SVG. Kawasan
   boleh tekan tetap seluruh kotak butang, jadi ia mudah dicapai walaupun
   bentuknya berlubang. */
.btn-atas {
    position: fixed;
    right: 26px;
    bottom: 24px;
    z-index: 1500;
    width: 56px;
    height: 66px;
    display: block;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink);
    cursor: pointer;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));

    /* Tersembunyi sehingga pengguna skrol jauh. visibility disertakan supaya
       ia tidak boleh ditekan atau dicapai dengan Tab semasa tidak kelihatan. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.9);
    transition: opacity 0.3s ease, visibility 0.3s ease,
                transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), background 0.25s ease;
}

.btn-atas.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Bentuk gerbang mengisi seluruh butang */
.kubah {
    display: block;
    width: 100%;
    height: 100%;
}

.kubah-garis {
    fill: none;
    stroke: var(--gold);
    stroke-width: 7;
    stroke-linecap: round;
    /* miter, bukan round — linejoin bulat akan membulatkan puncak gerbang
       dan menghilangkan tirus ogee yang menjadikannya bentuk masjid */
    stroke-linejoin: miter;
    stroke-miterlimit: 8;
}

.kubah-sabit {
    fill: var(--gold);
}

/* Bulu pena dilukis SELEPAS gerbang supaya ia menutup kaki kanan,
   sama seperti logo asal */
.kubah-bulu {
    fill: #fff;
}

/* Nyalaan lembut menggantikan kilauan yang beredar. Kilauan putih akan
   bersaing dengan bulu pena yang juga putih, dan kedua-duanya bercampur. */
@keyframes nyalaGerbang {
    0%, 100% { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
    50%      { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))
                       drop-shadow(0 0 10px rgba(212, 175, 55, 0.65)); }
}

.btn-atas.show {
    animation: nyalaGerbang 3.2s ease-in-out infinite;
}

.btn-atas:hover .kubah-garis,
.btn-atas:hover .kubah-sabit {
    stroke: var(--gold-soft);
    fill: var(--kubah-isi-hover, var(--gold-soft));
}

.btn-atas:hover .kubah-garis { fill: none; }

.btn-atas:hover {
    transform: translateY(-3px) scale(1.06);
    animation-play-state: paused;
}

.btn-atas:active {
    transform: translateY(0) scale(0.94);
    transition-duration: 0.08s;
}

@media (max-width: 700px) {
    .btn-atas {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 67px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-atas,
    .btn-atas:hover,
    .btn-atas:active {
        transform: none;
    }
}

/* ==========================================================================
   HERO
   ========================================================================== */

/* Lapisan latar hero, dari atas ke bawah:
     1-2. cahaya hijau & emas
     3.   lapisan gelap — inilah yang menjadikan teks putih terbaca di atas
          sebarang gambar, sama seperti lawyerjtk.com
     4.   gambar latar (img/hero.jpg)
     5.   gradien asas — kekal kelihatan jika gambar belum dimasukkan lagi,
          jadi laman ini tetap elok tanpa fail itu */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    background:
        /* pancaran emas halus di kanan atas */
        radial-gradient(ellipse at 84% 6%, rgba(212, 175, 55, 0.10), transparent 55%),
        /* MENDATAR, bukan menegak: pekat di kiri tempat teks berada, nipis di
           kanan supaya peguam dan pasangan itu kekal kelihatan. Gradien menegak
           akan menenggelamkan seluruh gambar. */
        linear-gradient(90deg,
            rgba(4, 16, 11, 0.94) 0%,
            rgba(4, 16, 11, 0.88) 32%,
            rgba(6, 23, 15, 0.58) 62%,
            rgba(6, 23, 15, 0.42) 100%),
        /* melembutkan bahagian atas dan bawah supaya menyatu dengan navbar
           dan seksyen seterusnya */
        linear-gradient(180deg, rgba(4, 16, 11, 0.30) 0%, transparent 28%, rgba(4, 16, 11, 0.60) 100%),
        /* Warna hijau nipis. Gambar itu perang suam; tanpa lapisan ini hero
           bertentangan dengan seksyen hijau zamrud di bawahnya. */
        linear-gradient(rgba(8, 46, 33, 0.34), rgba(8, 46, 33, 0.34)),
        url('img/hero.jpg') center center / cover no-repeat,
        linear-gradient(160deg, #06170f 0%, #0b2e22 45%, #04100b 100%);
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 80px;
    z-index: 1000;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    background-color: transparent;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: background-color, backdrop-filter;
}

.navbar.scrolled {
    padding: 18px 80px;
    background-color: rgba(4, 16, 11, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 30px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: -0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.logo:hover {
    opacity: 0.8;
}

/* Bulan sabit di atas neraca keadilan — isyarat Syariah dan guaman */
.logo-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--gold);
}

.logo-text {
    line-height: 1;
}

.nav-btn {
    display: inline-block;
    padding: 12px 35px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.nav-btn:hover {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
}

.content {
    position: relative;
    z-index: 10;
    padding: 140px 80px 80px;
    max-width: var(--shell);
    width: 100%;
    margin: 0 auto;
}

.fade-content {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.content h1 {
    color: #fff;
    font-size: clamp(38px, 5.6vw, 88px);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -2px;
    /* Tiada had lebar — biar tajuk merentang penuh lebar kandungan seperti
       lawyerjtk.com. Menghadkannya memaksa banyak baris pendek dan itulah yang
       membuatkan ragnya nampak bercelaru. */
    text-wrap: balance;
}

.subtitle {
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(16px, 1.5vw, 23px);
    line-height: 1.55;
    margin-bottom: 50px;
    font-weight: 300;
    max-width: 900px;
    /* Elak satu perkataan tersendiri pada baris terakhir */
    text-wrap: pretty;
}

.subtitle strong {
    font-weight: 700;
    color: var(--text-on-dark);
}

.cta-section {
    margin-bottom: 20px;
}

.cta-btn {
    display: inline-block;
    padding: 18px 46px;
    background: var(--gold);
    color: var(--ink);
    border: 2px solid var(--gold);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.22);
}

.cta-btn:hover {
    background: transparent;
    color: var(--gold);
    transform: translateY(-2px);
}

/* --- Feature pills --------------------------------------------------------- */

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 70px;
}

.feature-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 1px solid rgba(243, 239, 228, 0.2);
    border-radius: 50px;
    background: rgba(243, 239, 228, 0.04);
    color: var(--muted-on-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    user-select: none;
}

.feature-pill:hover {
    color: var(--text-on-dark);
    border-color: rgba(212, 175, 55, 0.5);
}

.feature-pill.active {
    color: var(--ink);
    background: var(--gold);
    border-color: var(--gold);
}

.feature-icon {
    font-size: 16px;
    line-height: 1;
}

.pill-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--ink);
    opacity: 0.5;
}

.feature-pill.active .pill-progress {
    animation: pillFill 8s linear forwards;
}

@keyframes pillFill {
    from { width: 0; }
    to   { width: 100%; }
}

/* --- Showcase -------------------------------------------------------------- */

/* Semua panel diletak dalam SEL GRID YANG SAMA supaya ia bertindih tanpa
   dikeluarkan dari aliran. Kesannya bekas ini mengambil ketinggian panel
   tertinggi secara automatik pada setiap lebar skrin.

   Sebelum ini setiap panel position:absolute dan bekas ini bergantung pada
   min-height yang ditetapkan manual untuk setiap breakpoint — nombor tekaan
   itu sentiasa tersasar dan panel terpotong pada telefon. */
.content-showcase {
    position: relative;
    display: grid;
    margin-top: 60px;
    width: 100%;
}

.showcase-item {
    grid-column: 1;
    grid-row: 1;
    /* Jangan regang mengikut tinggi sel. Item grid meregang secara lalai, dan
       kerana sel ini setinggi panel TERTINGGI, panel pendek akan diregangkan.
       Blok teks di dalamnya ada flex-grow, jadi ia yang menyerap regangan itu
       dan membengkak — menolak visual jauh ke bawah dan meninggalkan lubang
       besar di tengah. align-self: start membuatkan setiap panel kekal pada
       tinggi semula jadinya. */
    align-self: start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    width: 100%;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.showcase-item.active {
    opacity: 1;
    visibility: visible;
}

.showcase-text {
    flex: 0 0 34%;
    max-width: 420px;
}

.showcase-text h2 {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: -1px;
}

.showcase-text p {
    color: var(--muted-on-dark);
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 28px;
}

.showcase-btn {
    padding: 14px 34px;
    background: transparent;
    border: 2px solid var(--gold);
    border-radius: 50px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-btn:hover {
    background: var(--gold);
    color: var(--ink);
}

.showcase-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* Senarai harga ringkas — telefon sahaja. Lihat blok @media 700px. */
.harga-ringkas {
    display: none;
    list-style: none;
    margin: 0 0 28px;
}

.harga-ringkas li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(243, 239, 228, 0.14);
    font-size: 15px;
    color: var(--muted-on-dark);
}

.harga-ringkas li:first-child {
    border-top: 1px solid rgba(243, 239, 228, 0.14);
}

.harga-ringkas b {
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--gold);
}

/* Pricing cards inside the showcase */

.pricing-cards {
    display: flex;
    gap: 22px;
    width: 100%;
}

.pricing-card {
    flex: 1;
    padding: 32px 26px;
    border-radius: var(--radius);
    background: rgba(243, 239, 228, 0.05);
    border: 1px solid rgba(243, 239, 228, 0.12);
    backdrop-filter: blur(6px);
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(212, 175, 55, 0.08);
}

.pricing-card.center {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}

.card-icon {
    font-size: 34px;
    margin-bottom: 16px;
}

.pricing-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 13px;
    color: var(--gold-soft);
    font-weight: 600;
    margin-bottom: 6px;
}

.card-description {
    font-size: 13px;
    color: var(--muted-on-dark);
    margin-bottom: 22px;
    line-height: 1.5;
}

.card-price {
    font-size: 30px;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: -1px;
}

/* Phone mockup */

.phone-mockup {
    display: flex;
    justify-content: center;
}

.phone-frame {
    position: relative;
    width: 300px;
    height: 600px;
    border-radius: 42px;
    background: #0a0a0a;
    border: 10px solid #1a1a1a;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 0 0 16px 16px;
    z-index: 5;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #fdfcf8;
    color: #14201a;
    overflow: hidden;
    padding: 34px 16px 16px;
}

/* Form preview */

.form-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eae5d8;
    margin-bottom: 16px;
}

.preview-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--green-700);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.form-preview-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--green-800);
}

.form-preview-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.preview-nav-item {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    padding: 7px 4px;
    border-radius: 20px;
    background: #f0ece0;
    color: #8a8375;
}

.preview-nav-item.active {
    background: var(--green-700);
    color: var(--gold-soft);
}

.preview-field {
    margin-bottom: 16px;
}

.preview-label {
    font-size: 11px;
    font-weight: 600;
    color: #5d6b63;
    margin-bottom: 6px;
}

.preview-input {
    height: 36px;
    border-radius: 8px;
    background: #f2efe6;
    border: 1px solid #e3ddcd;
}

/* Chat preview */

.chat-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: -34px -16px -16px;
    padding-top: 34px;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--green-700);
    color: #fff;
}

.chat-back {
    font-size: 18px;
    opacity: 0.8;
}

.chat-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.chat-name {
    font-size: 13px;
    font-weight: 700;
}

.chat-status {
    font-size: 10px;
    opacity: 0.75;
}

.chat-messages {
    flex: 1;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f4f1e8;
    overflow: hidden;
}

.chat-message {
    max-width: 82%;
    display: flex;
    flex-direction: column;
}

.chat-message.client {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-message.lawyer {
    align-self: flex-start;
}

.message-bubble {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.45;
}

.chat-message.client .message-bubble {
    background: var(--green-700);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-message.lawyer .message-bubble {
    background: #fff;
    color: #223028;
    border: 1px solid #e6e0d0;
    border-bottom-left-radius: 4px;
}

.message-time {
    font-size: 9px;
    color: #9a9484;
    margin-top: 4px;
}

.typing-indicator {
    display: inline-flex;
    gap: 4px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e6e0d0;
    border-radius: 14px;
    width: fit-content;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b3ac9a;
    animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Calendar preview */

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.calendar-month {
    font-size: 14px;
    font-weight: 700;
    color: var(--green-800);
}

.calendar-navigation {
    display: flex;
    gap: 12px;
    color: #8a8375;
    font-size: 16px;
}

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}

.calendar-weekdays div {
    font-size: 9px;
    font-weight: 700;
    color: #9a9484;
    padding-bottom: 6px;
}

.calendar-day {
    position: relative;
    font-size: 11px;
    color: #46524b;
    padding: 6px 0;
    border-radius: 7px;
}

.calendar-day.empty {
    visibility: hidden;
}

.calendar-day.has-event {
    font-weight: 700;
    color: var(--green-700);
}

.calendar-day.today {
    background: var(--green-700);
    color: #fff;
}

.event-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

.calendar-events {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eae5d8;
}

.calendar-event-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9a9484;
    margin-bottom: 10px;
}

.calendar-event-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f4f1e8;
    padding: 10px;
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}

.calendar-event-date {
    font-size: 10px;
    font-weight: 700;
    color: var(--green-700);
    white-space: nowrap;
}

.calendar-event-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--green-800);
}

.calendar-event-time {
    font-size: 10px;
    color: #7d7768;
    margin-top: 2px;
}

/* Analytics dashboard */

.analytics-dashboard {
    width: 100%;
    max-width: 620px;
    padding: 28px;
    border-radius: var(--radius);
    background: rgba(243, 239, 228, 0.05);
    border: 1px solid rgba(243, 239, 228, 0.12);
    backdrop-filter: blur(6px);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.dashboard-header h3 {
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}

.dashboard-period {
    font-size: 12px;
    color: var(--gold-soft);
    padding: 5px 14px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    padding: 18px 14px;
    border-radius: 14px;
    background: rgba(4, 16, 11, 0.4);
    border: 1px solid rgba(243, 239, 228, 0.1);
    text-align: center;
}

.stat-icon {
    font-size: 20px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 30px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}

.stat-label {
    font-size: 11px;
    color: var(--muted-on-dark);
    margin-top: 6px;
    letter-spacing: 0.4px;
}

.chart-container {
    padding: 20px;
    border-radius: 14px;
    background: rgba(4, 16, 11, 0.4);
    border: 1px solid rgba(243, 239, 228, 0.1);
}

.chart-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted-on-dark);
    margin-bottom: 18px;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    height: 130px;
}

.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.bar {
    width: 100%;
    max-width: 70px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
}

.bar-label {
    font-size: 11px;
    color: var(--muted-on-dark);
    margin-top: 10px;
}

/* ==========================================================================
   SHARED SECTION FURNITURE
   ========================================================================== */

section {
    position: relative;
    padding: 110px 80px;
}

.section-title {
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: -2px;
    text-align: center;
    margin-bottom: 60px;
    color: #fff;
}

.word-drop,
.word-rise {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.word-drop  { transform: translateY(-50px); }
.word-rise  { transform: translateY(50px); color: var(--gold); }

.word-drop.animate,
.word-rise.animate {
    opacity: 1;
    transform: translateY(0);
}

.word-rise.animate { transition-delay: 0.12s; }

/* ==========================================================================
   WHO WE HELP
   ========================================================================== */

.benefits-section {
    background: var(--green-900);
}

.benefits-container {
    max-width: var(--shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
}

.benefit-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(243, 239, 228, 0.05);
    border: 1px solid rgba(243, 239, 228, 0.1);
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.35s ease;
}

.benefit-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.benefit-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
}

.benefit-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--green-700), var(--green-900));
}

.benefit-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Gambar datang dari sumber berbeza dengan suhu warna berbeza. Tepu
       diturunkan sedikit supaya kelima-limanya duduk sebagai satu set dan
       tidak berlanggar dengan palet hijau-emas. */
    filter: saturate(0.88) brightness(0.96);
    transition: transform 0.7s ease;
}

.benefit-card:hover .benefit-image img {
    transform: scale(1.06);
}

/* Gelap ke arah bawah supaya gambar menyatu dengan kawasan teks di bawahnya,
   bukan berhenti mendadak */
.benefit-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(6, 23, 15, 0.10) 0%,
        rgba(6, 23, 15, 0.18) 55%,
        rgba(6, 23, 15, 0.62) 100%
    );
}

.benefit-text {
    padding: 22px 20px 26px;
}

.benefit-text h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-on-dark);
}

/* ==========================================================================
   COMMON CASES
   ========================================================================== */

.cases-section {
    background: var(--green-800);
}

.cases-nota {
    max-width: 640px;
    margin: -34px auto 50px;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted-on-dark);
}

/* Senarai bernombor dua lajur. Nombor besar separa lut sinar memberi rentak
   visual tanpa perlu ikon — senarai kekal ringkas dan mudah diimbas.

   Lebar dikecilkan supaya blok itu duduk sebagai satu kumpulan yang jelas di
   tengah halaman. Pada 1050px ia terlalu melebar dan nampak seperti dua
   senarai berasingan di tepi kiri dan kanan. */
.cases-list {
    max-width: 820px;
    margin: 0 auto;
    list-style: none;
    columns: 2;
    column-gap: 54px;
}

.cases-list li {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(243, 239, 228, 0.12);
    break-inside: avoid;
    transition: border-color 0.3s ease;
}

.cases-list li:hover {
    border-color: rgba(212, 175, 55, 0.5);
}

.cases-no {
    flex: 0 0 auto;
    min-width: 34px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--gold);
    opacity: 0.65;
}

.cases-nama {
    font-size: 17px;
    line-height: 1.4;
    color: var(--text-on-dark);
}

/* ==========================================================================
   WHICH FORUM APPLIES
   ========================================================================== */

.forum-section {
    background: var(--cream);
    color: var(--green-900);
}

.forum-section .section-title {
    color: var(--green-900);
}

.forum-container {
    max-width: 1000px;
    margin: 0 auto;
}

.forum-note {
    text-align: center;
    max-width: 720px;
    margin: -36px auto 44px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted-on-light);
}

.forum-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--cream-dim);
    background: #fff;
    box-shadow: 0 18px 44px rgba(6, 23, 15, 0.08);
}

.forum-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.forum-table th {
    text-align: left;
    padding: 20px 26px;
    background: var(--green-800);
    color: var(--gold-soft);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.forum-table td {
    padding: 20px 26px;
    border-top: 1px solid var(--cream-dim);
    font-size: 15px;
    line-height: 1.55;
    color: #22322a;
}

.forum-table td:first-child {
    font-weight: 700;
    color: var(--green-800);
    width: 42%;
}

.forum-table tbody tr:hover td {
    background: #faf8f1;
}

/* Liputan daerah Selangor */

.coverage {
    margin-top: 44px;
    padding: 32px 34px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--cream-dim);
    box-shadow: 0 18px 44px rgba(6, 23, 15, 0.08);
}

.coverage-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 20px;
}

.coverage-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coverage-list li {
    padding: 9px 18px;
    border-radius: 50px;
    background: var(--green-800);
    color: var(--cream);
    font-size: 14px;
    font-weight: 600;
}

.coverage-note {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-on-light);
}

/* ==========================================================================
   PROCESS
   ========================================================================== */

.process-section {
    background: var(--green-800);
}

.process-timeline {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 31px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold), rgba(212, 175, 55, 0.05));
}

.process-step {
    position: relative;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding-bottom: 44px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.process-step.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.process-step:last-child { padding-bottom: 0; }

.process-number {
    position: relative;
    z-index: 2;
    flex: 0 0 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0 0 0 8px var(--green-800);
}

.process-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 14px 0 8px;
}

.process-content p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted-on-dark);
    max-width: 640px;
}

/* ==========================================================================
   DOCUMENT CHECKLIST
   ========================================================================== */

.evidence-section {
    background: var(--cream);
    color: var(--green-900);
}

.evidence-section .section-title {
    color: var(--green-900);
    margin-bottom: 18px;
}

.evidence-container {
    max-width: 1000px;
    margin: 0 auto;
}

.evidence-subtitle {
    text-align: center;
    font-size: 17px;
    color: var(--muted-on-light);
    margin-bottom: 50px;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.evidence-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--cream-dim);
    font-size: 16px;
    font-weight: 500;
    color: #22322a;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}

.evidence-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.evidence-item:hover {
    box-shadow: 0 12px 28px rgba(6, 23, 15, 0.1);
}

.evidence-check {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--green-700);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

/* --- Cetak senarai semak ---------------------------------------------------- */

/* Kepala dan kaki ini wujud hanya untuk cetakan */
.cetak-kepala,
.cetak-kaki {
    display: none;
}

.cetak-tindakan {
    margin-top: 40px;
    text-align: center;
}

.btn-cetak {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border: 2px solid var(--green-700);
    border-radius: 50px;
    background: var(--green-700);
    color: var(--cream);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-cetak:hover {
    transform: translateY(-2px);
    background: var(--green-800);
}

.ikon-cetak {
    font-size: 18px;
    line-height: 1;
}

.cetak-nota {
    margin-top: 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted-on-light);
}

/* ==========================================================================
   PETA POKOK — jenis tuntutan

   Garisan penyambung dilukis dengan pseudo-elemen, bukan imej atau SVG:
     .pokok-akar::after   batang menegak dari kotak akar ke bawah
     .pokok-cabang::before  palang mendatar yang merentang antara pusat
                            cabang pertama dan cabang terakhir
     .cabang::before      batang menegak dari palang turun ke setiap cabang
   ========================================================================== */

.pokok-section {
    overflow: hidden;
    background:
        radial-gradient(ellipse at 80% 12%, rgba(212, 175, 55, 0.16), transparent 55%),
        linear-gradient(140deg, var(--green-700), var(--green-900) 68%);
}

.pokok-nota {
    max-width: 720px;
    margin: -34px auto 60px;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted-on-dark);
}

.pokok {
    --jurang: 28px;
    --batang: 34px;
    --garis: rgba(212, 175, 55, 0.45);
    max-width: 1150px;
    margin: 0 auto;
}

/* --- Akar ------------------------------------------------------------------ */

.pokok-akar {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--batang);
    padding: 18px 40px;
    border-radius: 50px;
    background: var(--gold);
    color: var(--ink);
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 800;
    letter-spacing: -0.3px;
    text-align: center;
}

.pokok-akar::after {
    content: '';
    position: absolute;
    bottom: calc(var(--batang) * -1);
    left: 50%;
    width: 2px;
    height: var(--batang);
    background: var(--garis);
}

/* --- Cabang ---------------------------------------------------------------- */

.pokok-cabang {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--jurang);
    padding-top: var(--batang);
}

/* Palang mendatar. Dengan tiga lajur sama lebar dan jurang G, pusat lajur
   pertama berada pada (100% - 2G)/6 dari tepi — begitu juga dari kanan. */
.pokok-cabang::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc((100% - var(--jurang) * 2) / 6);
    right: calc((100% - var(--jurang) * 2) / 6);
    height: 2px;
    background: var(--garis);
}

.cabang {
    position: relative;
    border-radius: var(--radius);
    background: rgba(4, 16, 11, 0.42);
    border: 1px solid rgba(212, 175, 55, 0.28);
    /* Sengaja TIADA overflow: hidden — ia akan mengerat batang penyambung
       yang dilukis di luar kotak ini. Sudut kepala dibulatkan sendiri. */
}

.cabang::before {
    content: '';
    position: absolute;
    top: calc(var(--batang) * -1);
    left: 50%;
    width: 2px;
    height: var(--batang);
    background: var(--garis);
}

.cabang-kepala {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 20px;
    background: rgba(212, 175, 55, 0.14);
    border-bottom: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    color: var(--gold-soft);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    text-align: center;
}

.cabang-ikon {
    font-size: 20px;
    line-height: 1;
}

.cabang-daun {
    list-style: none;
    padding: 10px 22px 20px;
}

.cabang-daun li {
    border-bottom: 1px solid rgba(243, 239, 228, 0.09);
}

.cabang-daun li:last-child {
    border-bottom: none;
}

/* Setiap daun ialah butang sebenar, bukan sekadar teks — supaya ia boleh
   dicapai dengan papan kekunci dan diumumkan sebagai boleh ditekan */
.daun {
    position: relative;
    display: block;
    width: 100%;
    padding: 12px 26px 12px 22px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15.5px;
    line-height: 1.45;
    text-align: left;
    color: var(--text-on-dark);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
}

.daun::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 20px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.75;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Tanda tambah kecil di hujung — isyarat "ada lagi di sebalik ini" */
.daun::after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    font-weight: 700;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.daun:hover,
.daun:focus-visible {
    background: rgba(212, 175, 55, 0.12);
    color: #fff;
    padding-left: 26px;
}

.daun:hover::before,
.daun:focus-visible::before {
    transform: scale(1.4);
    opacity: 1;
}

.daun:hover::after,
.daun:focus-visible::after {
    opacity: 1;
}

/* --- Kad penerangan --------------------------------------------------------- */

.kad-tuntutan {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2500;
    padding: 30px 20px;
    overflow-y: auto;
    background: rgba(4, 16, 11, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.kad-tuntutan.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kad-isi {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: auto;
    padding: 36px 34px 30px;
    border-radius: 20px;
    background: var(--cream);
    color: var(--green-900);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    animation: kadMasuk 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes kadMasuk {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kad-tutup {
    position: absolute;
    top: 12px;
    right: 20px;
    border: none;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: #9a9484;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.kad-tutup:hover {
    color: var(--green-900);
    transform: rotate(90deg);
}

.kad-kumpulan {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 50px;
    background: rgba(16, 65, 47, 0.1);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--green-700);
}

.kad-isi h3 {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.6px;
    margin-bottom: 14px;
    color: var(--green-900);
}

.kad-huraian {
    font-size: 15.5px;
    line-height: 1.7;
    color: #2b3a32;
    margin-bottom: 18px;
}

.kad-forum {
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 3px solid var(--gold);
    background: #faf8f1;
    font-size: 14px;
    line-height: 1.6;
    color: #3a4a41;
}

.kad-label {
    font-weight: 800;
    color: var(--green-800);
}



/* --- Ajakan bertindak ------------------------------------------------------ */

.pokok-cta {
    max-width: 720px;
    margin: 60px auto 0;
    text-align: center;
}

.pokok-cta p {
    margin-bottom: 26px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted-on-dark);
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.testimonial-section {
    background: var(--green-900);
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}

.testimonial-title {
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 900;
    letter-spacing: -1.5px;
    text-align: center;
    color: #fff;
    margin-bottom: 56px;
}

.testimonial-track {
    display: flex;
    gap: 24px;
    width: max-content;
    margin-bottom: 24px;
}

.testimonial-track-left {
    animation: marqueeLeft 55s linear infinite;
}

.testimonial-track-right {
    animation: marqueeRight 55s linear infinite;
}

.testimonial-section:hover .testimonial-track {
    animation-play-state: paused;
}

/* The track holds two identical card sets. One set is 50% of the track minus
   half a gap, so the offset is corrected by half the 24px gap — otherwise the
   loop visibly jumps on every repeat. */
@keyframes marqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 12px)); }
}

@keyframes marqueeRight {
    from { transform: translateX(calc(-50% - 12px)); }
    to   { transform: translateX(0); }
}

.testimonial-card {
    flex: 0 0 400px;
    padding: 30px;
    border-radius: var(--radius);
    background: rgba(243, 239, 228, 0.05);
    border: 1px solid rgba(243, 239, 228, 0.1);
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-on-dark);
    margin-bottom: 24px;
    min-height: 108px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-avatar {
    flex: 0 0 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--gold), var(--gold-deep));
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.author-nama {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-section {
    background: var(--green-800);
    text-align: center;
}

.faq-icon {
    color: var(--gold);
    margin-bottom: 22px;
    opacity: 0.9;
}

.faq-title {
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 900;
    letter-spacing: -1.5px;
    color: #fff;
    margin-bottom: 54px;
}

.faq-container {
    max-width: 880px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    border-bottom: 1px solid rgba(243, 239, 228, 0.12);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px 4px;
    background: none;
    border: none;
    color: var(--text-on-dark);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--gold);
}

.faq-toggle {
    flex: 0 0 auto;
    font-size: 22px;
    color: var(--gold);
    transition: transform 0.35s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-item.active .faq-question {
    color: var(--gold);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 420px;
    padding-bottom: 26px;
}

.faq-answer p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted-on-dark);
    max-width: 780px;
}

.faq-footer-text {
    margin-top: 60px;
    font-size: 19px;
    font-style: italic;
    color: var(--muted-on-dark);
}

/* ==========================================================================
   CTA BANNER
   ========================================================================== */

.cta-banner-section {
    overflow: hidden;
    background: linear-gradient(120deg, var(--gold-deep), var(--gold) 55%, var(--gold-soft));
}

.cta-banner-section::before {
    opacity: 0.14;
}

.cta-banner-container {
    position: relative;
    z-index: 2;
    max-width: var(--shell);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-banner-title {
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 900;
    letter-spacing: -1.5px;
    color: var(--ink);
    max-width: 16ch;
}

.cta-banner-btn {
    display: inline-block;
    padding: 20px 52px;
    background: var(--ink);
    color: var(--gold);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.cta-banner-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(4, 16, 11, 0.35);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-section {
    background: var(--ink);
    padding: 60px 80px;
}

.footer-container {
    max-width: var(--shell);
    margin: 0 auto;
    text-align: center;
}

.footer-disclaimer {
    max-width: 820px;
    margin: 0 auto 32px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(243, 239, 228, 0.45);
}

.footer-copyright {
    font-size: 13px;
    letter-spacing: 1.6px;
    color: var(--muted-on-dark);
    margin-bottom: 18px;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
}

.footer-link {
    font-size: 12px;
    letter-spacing: 1.2px;
    color: rgba(243, 239, 228, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--gold);
}

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 16, 11, 0.82);
    backdrop-filter: blur(4px);
    padding: 40px 20px;
    overflow-y: auto;
}

.modal.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: auto;
    padding: 48px 48px 40px;
    border-radius: var(--radius);
    background: var(--cream);
    color: var(--green-900);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 26px;
    font-size: 34px;
    line-height: 1;
    color: #8a8375;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--green-900);
}

.modal-content h2 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 24px;
    color: var(--green-800);
}

.modal-body h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 26px 0 8px;
    color: var(--green-800);
}

.modal-body p,
.modal-body li {
    font-size: 15px;
    line-height: 1.7;
    color: #2b3a32;
}

.modal-body ul {
    padding-left: 22px;
    margin: 8px 0;
}

.modal-body li {
    margin-bottom: 5px;
}

.privacy-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--cream-dim);
}

.privacy-option-text h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.privacy-option-text p {
    font-size: 13px;
    color: var(--muted-on-light);
}

.privacy-toggle {
    flex: 0 0 52px;
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
}

.privacy-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.privacy-slider {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: #cfc8b6;
    transition: background 0.3s ease;
}

.privacy-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.3s ease;
}

.privacy-toggle input:checked + .privacy-slider {
    background: var(--green-700);
}

.privacy-toggle input:checked + .privacy-slider::before {
    transform: translateX(24px);
}

.privacy-toggle input:focus-visible + .privacy-slider {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
}

.privacy-save-btn {
    margin-top: 30px;
    padding: 15px 40px;
    background: var(--gold);
    color: var(--ink);
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.privacy-save-btn:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .word-drop,
    .word-rise,
    .benefit-card,
    .process-step,
    .evidence-item {
        opacity: 1;
        transform: none;
    }

    /* Stop the marquee outright and let the reader scroll it by hand */
    .testimonial-track { animation: none; }
    .testimonial-section { overflow-x: auto; }
}

/* ==========================================================================
   CETAK — hanya senarai semak dokumen yang keluar di atas kertas.

   Dialog cetak setiap pelayar moden sudah ada pilihan "Save as PDF", jadi
   satu helaian gaya ini memberi cetakan DAN muat turun PDF sekali gus,
   tanpa perlu pustaka penjana PDF.
   ========================================================================== */

@media print {
    /* Segala-galanya kecuali senarai semak disembunyikan */
    .hero,
    .benefits-section,
    .cases-section,
    .forum-section,
    .services-section,
    .process-section,
    .pokok-section,
    .testimonial-section,
    .faq-section,
    .cta-banner-section,
    .footer-section,
    .modal,
    .cetak-tindakan {
        display: none !important;
    }

    html, body {
        background: #fff !important;
        color: #000 !important;
    }

    .evidence-section {
        padding: 0 !important;
        background: #fff !important;
    }

    .evidence-container {
        max-width: 100%;
    }

    /* Tajuk skrin diganti dengan kepala cetakan yang lebih sesuai untuk kertas */
    .evidence-section .section-title,
    .evidence-subtitle {
        display: none !important;
    }

    .cetak-kepala {
        display: block;
        margin-bottom: 26px;
        padding-bottom: 18px;
        border-bottom: 2px solid #111;
    }

    .cetak-jenama {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12pt;
        font-weight: 700;
        color: #6b5a1e;
        margin-bottom: 10px;
    }

    .cetak-logo {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        /* Warna diwarisi melalui currentColor, jadi logo sepadan dengan
           wordmark di sebelahnya tanpa nilai warna kedua untuk diselaraskan. */
        color: #6b5a1e;
    }

    .cetak-tajuk {
        font-size: 22pt;
        font-weight: 900;
        letter-spacing: -0.5px;
        color: #000;
        margin-bottom: 4px;
    }

    .cetak-sub {
        font-size: 11pt;
        color: #333;
        margin-bottom: 20px;
    }

    .cetak-medan {
        font-size: 11pt;
        color: #000;
    }

    /* Dua lajur pada kertas supaya muat satu muka surat */
    .evidence-grid {
        display: block;
        column-count: 2;
        column-gap: 26px;
    }

    .evidence-item {
        display: flex !important;
        break-inside: avoid;
        opacity: 1 !important;
        transform: none !important;
        padding: 9px 0;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        font-size: 11pt;
        color: #000;
    }

    /* Bulatan hijau bertanda ✓ ditukar kepada petak kosong — supaya ia
       boleh ditandakan dengan tangan selepas dicetak */
    .evidence-check {
        flex: 0 0 15px !important;
        width: 15px;
        height: 15px;
        margin-top: 2px;
        border: 1.5pt solid #000;
        border-radius: 2px;
        background: none !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    .cetak-kaki {
        display: block;
        margin-top: 30px;
        padding-top: 14px;
        border-top: 1px solid #999;
        font-size: 9pt;
        line-height: 1.6;
        color: #444;
    }

    @page {
        margin: 16mm;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1400px) {
    .benefits-container { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1200px) {
    .navbar,
    .navbar.scrolled { padding: 20px 40px; }

    .content  { padding: 130px 40px 70px; }
    section   { padding: 90px 40px; }
    .footer-section { padding: 50px 40px; }

    .showcase-item      { flex-direction: column; gap: 48px; }
    .showcase-text      { flex: 1 1 auto; max-width: 100%; }
    .pricing-cards      { flex-direction: column; }
}

@media (max-width: 1024px) {
}

/* ---------------------------------------------------------------------------
   Telefon: mengikut pendekatan lawyerjtk.com — visual showcase disembunyikan
   sepenuhnya. Mockup telefon dan papan pemuka itu hiasan semata; pada skrin
   telefon ia memakan hampir seluruh skrin dan mencipta perbezaan tinggi yang
   besar antara panel (semua panel berkongsi satu sel grid).

   Bezanya: JTK boleh sembunyikan kad harga mereka kerana ada seksyen pakej
   berasingan di bawah. Kita tiada, jadi harga dipindahkan ke .harga-ringkas
   dalam blok teks supaya pengguna telefon tetap nampak.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .showcase-visual { display: none; }

    .harga-ringkas { display: block; }

    /* Pil disusun menegak dan rapat, bukan berbalut mendatar.

       align-items: stretch, bukan flex-start. Dengan flex-start setiap pil
       mengecut mengikut panjang teksnya sendiri, menghasilkan tepi kanan
       bergerigi seperti tangga — "Analitik kes" separuh lebar "Peringatan
       automatik". Lebar seragam menjadikannya senarai yang kemas, dan ikon
       pula berbaris menegak. */
    .features {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 50px;
    }

    .content-showcase { margin-top: 46px; }
    .showcase-item    { gap: 0; }
    .showcase-text h2 { font-size: 30px; }
}

@media (max-width: 900px) {
    .hero { min-height: auto; }

    .content { padding: 120px 24px 60px; }
    section  { padding: 70px 24px; }
    .footer-section { padding: 44px 24px; }

    .logo    { font-size: 24px; }
    .nav-btn { padding: 10px 22px; font-size: 12px; }

    .benefits-container { grid-template-columns: repeat(2, 1fr); }
    .evidence-grid      { grid-template-columns: 1fr; }
    .stats-grid         { grid-template-columns: 1fr; }

    /* Satu lajur. Dengan dua lajur pada lebar ini setiap entri berbalut tiga
       hingga empat baris dan nama yang panjang terpotong di tepi. */
    .cases-list { columns: 1; }

    /* Peta pokok bertindan menegak. Palang mendatar dibuang dan setiap cabang
       disambung ke batang tunggal di kiri — pokok yang tumbuh ke bawah, bukan
       melebar, kerana tiga lajur tidak muat pada skrin ini. */
    .pokok-cabang {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 0;
    }

    .pokok-cabang::before {
        display: none;
    }

    .cabang::before {
        top: -22px;
        height: 22px;
    }

    .cabang:first-child::before {
        top: calc(var(--batang) * -1);
        height: var(--batang);
    }

    .pokok-cabang {
        padding-top: var(--batang);
    }

    .process-timeline::before { left: 25px; }
    .process-number { flex-basis: 52px; height: 52px; font-size: 20px; }
    .process-step   { gap: 20px; }

    .testimonial-card { flex-basis: 320px; }
    .testimonial-text { min-height: 0; }

    .cta-banner-container { flex-direction: column; text-align: center; }
    .cta-banner-title     { max-width: 100%; }

    .modal-content { padding: 40px 26px 32px; }
}

@media (max-width: 560px) {
    /* Gambar hero terpotong ke tengah pada telefon, jadi peguam terkeluar
       bingkai. Alihkan pandangan ke kanan supaya sekurang-kurangnya adegan itu
       terbayang di belakang teks. */
    .hero { background-position: center, center, center, center, 68% center, center; }

    /* Logo penuh + butang tidak muat pada lebar telefon, jadi kedua-duanya
       dikecilkan. Tanpa ini butang terkeluar dari skrin pada 375px. */
    .navbar,
    .navbar.scrolled { padding: 16px 16px; }

    .logo      { font-size: 19px; gap: 8px; }
    .logo-mark { width: 26px; height: 26px; }

    .nav-btn {
        padding: 9px 16px;
        font-size: 11px;
        letter-spacing: 0.5px;
        border-width: 1.5px;
    }

    .content { padding: 96px 20px 50px; }

    .content h1 { letter-spacing: -1px; }
    .features   { gap: 10px; }
    .feature-pill { padding: 10px 16px; font-size: 13px; }

    .benefits-container { grid-template-columns: 1fr; }

    .phone-frame { width: 260px; height: 540px; }

    /* Tiga kad ini bertindan pada telefon dan merekalah yang menetapkan tinggi
       keseluruhan bekas showcase. Merapatkannya mengurangkan ruang kosong pada
       panel-panel lain yang lebih pendek. */
    .pricing-card      { padding: 22px 20px; }
    .card-icon         { font-size: 30px; margin-bottom: 10px; }
    .card-description  { margin-bottom: 14px; }
    .card-price        { font-size: 27px; }

    .privacy-option { flex-direction: row; align-items: flex-start; }

    /* Jadual mahkamah ditukar kepada senarai bertindan. Sebelum ini ia
       diskrol mendatar, jadi lajur jawapan — bahagian yang paling penting —
       langsung tidak kelihatan pada telefon. */
    .forum-table { min-width: 0; }

    .forum-table thead { display: none; }

    .forum-table tr {
        display: block;
        padding: 16px 20px;
        border-top: 1px solid var(--cream-dim);
    }

    .forum-table tbody tr:first-child { border-top: none; }

    .forum-table td {
        display: block;
        width: auto;
        padding: 0;
        border: none;
    }

    .forum-table td:first-child {
        width: auto;
        margin-bottom: 5px;
        font-size: 15px;
    }

    .forum-table td:last-child {
        position: relative;
        padding-left: 18px;
        font-size: 14px;
        color: var(--muted-on-light);
    }

    .forum-table td:last-child::before {
        content: '→';
        position: absolute;
        left: 0;
        color: var(--gold-deep);
    }

    .forum-table tbody tr:hover td { background: transparent; }
}


/* ==========================================================================
   KANDUNGAN YANG MUNCUL SEMASA SKROL

   Sebelum ini hanya tajuk bahagian yang beranimasi masuk. Kandungan di
   bawahnya terpapar sekali gus, jadi tajuk kelihatan hidup sementara isinya
   statik.

   Elemen di sini hanya disembunyikan apabila html.js-tayang wujud, iaitu
   apabila JavaScript berjalan dan IntersectionObserver disokong. Tanpa
   JavaScript, tiada satu pun peraturan di bawah terpakai dan seluruh halaman
   kekal kelihatan. Ini penting: animasi tidak boleh menjadi sebab kandungan
   hilang daripada pengguna atau daripada perangkak carian.
   ========================================================================== */

.js-tayang .cases-nota,
.js-tayang .cases-list li,
.js-tayang .forum-note,
.js-tayang .forum-table-wrapper,
.js-tayang .cabang,
.js-tayang .evidence-subtitle,
.js-tayang .faq-item,
.js-tayang .cta-banner-container {
    opacity: 0;
    /* Padanan tepat dengan .process-step, rujukan yang diminta. Jarak yang
       sama digunakan pada semua lebar — bahagian Proses kami dan Senarai
       semak juga tidak mengecilkannya pada telefon, dan itulah sebabnya
       geraknya terasa lebih tegas di sana. */
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Kekhususan lebih tinggi daripada peraturan di atas (0,3,0 lawan 0,2,0),
   jadi tiada !important diperlukan. */
.js-tayang .cases-nota.nampak,
.js-tayang .cases-list li.nampak,
.js-tayang .forum-note.nampak,
.js-tayang .forum-table-wrapper.nampak,
.js-tayang .cabang.nampak,
.js-tayang .evidence-subtitle.nampak,
.js-tayang .faq-item.nampak,
.js-tayang .cta-banner-container.nampak {
    opacity: 1;
    transform: none;
}

/* Jadual mahkamah dalam mod kad: setiap baris masuk berselang-seli dari kiri
   dan kanan. Hanya pada ≤560px, kerana di atas itu ia masih jadual sebenar
   dan menggelongsorkan baris secara mendatar di dalamnya kelihatan pelik. */
@media (max-width: 560px) {
    /* Bekasnya tidak lagi pudar masuk — dua animasi bertindih pada elemen yang
       sama dan anaknya menjadikan bahagian ini terasa berat berbanding yang lain. */
    .js-tayang .forum-table-wrapper {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Baris yang menggelongsor ke kanan menolak lebar kandungan dan boleh
       memunculkan bar skrol mendatar pada bekas ini semasa animasi. Dalam mod
       kad tiada apa yang perlu diskrol mendatar, jadi ia dimatikan. */
    .forum-table-wrapper { overflow-x: hidden; }

    .js-tayang .forum-table tbody tr {
        opacity: 0;
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    .js-tayang .forum-table tbody tr:nth-child(odd)  { transform: translateX(-38px); }
    .js-tayang .forum-table tbody tr:nth-child(even) { transform: translateX(38px); }

    .js-tayang .forum-table tbody tr.nampak {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-tayang .forum-table tbody tr,
    .js-tayang .forum-table tbody tr:nth-child(odd),
    .js-tayang .forum-table tbody tr:nth-child(even) {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-tayang .cases-nota,
    .js-tayang .cases-list li,
    .js-tayang .forum-note,
    .js-tayang .forum-table-wrapper,
    .js-tayang .cabang,
    .js-tayang .evidence-subtitle,
    .js-tayang .faq-item,
    .js-tayang .cta-banner-container {
        opacity: 1;
        transform: none;
        transition: none;
    }
}