/* ============================================================================
   assets/css/price-card.css — Kartu Harga (paket layanan) + CTA Jadwalkan Diskusi
   ----------------------------------------------------------------------------
   Struktur kelas (.pricing-table / .ptable-*) mengikuti template kartu harga
   yang diminta. Yang diganti hanya LAPISAN WARNA-nya: seluruh nilai diambil
   dari variabel di neumorphism.css (--np-*, --ios-*-tegas, --gradient-*,
   --radius-*, --teks-*), bukan hex bawaan template (#2A293E / #FF6F61).

   Dibuang dari template aslinya:
   - reset global `*`, `*::before`, `*::after { box-sizing }`  -> sudah dari Bootstrap
   - `body { margin/font-family: Arial; background:#fff }`     -> menimpa latar situs
   - `h1.demo-title`                                           -> milik halaman demo
   Ketiganya bocor ke seluruh halaman kalau dibiarkan, karena file ini dimuat
   lewat @push('gaya') di layout yang sama dengan neumorphism.css.

   Dipakai di: resources/views/landing/home.blade.php (section #harga)
   ========================================================================== */

/* ------------------------------------------------------------ Tabel harga --- */

.pricing-table {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;

    /* Tinggi & lebar takik segitiga di bawah header. Dijadikan variabel supaya
       bisa dikecilkan di layar sempit lewat satu tempat, bukan menulis ulang
       keempat aturan border-*. */
    --notch-tinggi: 84px;
    --notch-lebar: 260px;

    /* Tinggi badge "Terpopuler" + jaraknya. Hanya kartu unggulan yang punya
       badge, jadi kartu lain harus MENYEDIAKAN ruang setinggi ini di padding
       atas header — kalau tidak, judul ketiga kartu tidak sejajar. */
    --sisip-badge: 36px;

    /* Padding atas header sebelum sisipan badge — dipakai dua aturan sekaligus,
       jadi cukup ditimpa sekali saja di media query. */
    --pad-header-atas: 22px;
}

.pricing-table .ptable-item {
    display: flex;
    width: 33.333%;
    padding: 0 12px;
    margin-bottom: 24px;

    /* Warna kartu dipusatkan di satu variabel, lalu dibaca header DAN tombol
       supaya keduanya tidak pernah berbeda warna. Nilainya boleh gradien
       maupun warna tunggal — `background` menerima keduanya. */
    --warna-paket: var(--secondary-color);

    /*
     * Variabel KEDUA, khusus untuk warna dasar garis aksen top-border (lihat
     * .ptable-single::before). Sengaja memakai token BASE/lembut
     * (--ios-blue, --ios-purple, dst — bukan varian -tegas yang keras),
     * karena di root neumorphism.css token base ini memang didokumentasikan
     * untuk "latar tint, badge, ikon dekoratif besar, dan gradasi luas" —
     * persis kebutuhan garis dekoratif ini, bukan teks yang butuh kontras
     * tegas.
     */
    --warna-garis: rgba(10, 22, 94, .55);
}

/*
   Kelas warna sengaja diberi awalan `ptable-`: nama `.warna-biru` dan
   kawan-kawannya sudah dipakai neumorphism.css sebagai warna TEKS, jadi
   memakai nama yang sama di sini akan saling menimpa.

   Semua nilai memakai token yang titik terangnya sudah diuji KontrasWarnaTest
   terhadap teks putih (4.72:1 - 16.29:1). Jangan menaruh hex baru di sini.
*/
.pricing-table .ptable-item.ptable-warna-biru   { --warna-paket: var(--gradient-primary); --warna-garis: var(--ios-blue); }
.pricing-table .ptable-item.ptable-warna-ungu   { --warna-paket: var(--gradient-accent);  --warna-garis: var(--ios-purple); }
.pricing-table .ptable-item.ptable-warna-hijau  { --warna-paket: var(--gradient-success); --warna-garis: var(--ios-green); }
.pricing-table .ptable-item.ptable-warna-merah  { --warna-paket: var(--gradient-danger);  --warna-garis: var(--ios-red); }
.pricing-table .ptable-item.ptable-warna-oranye { --warna-paket: var(--ios-orange-tegas); --warna-garis: var(--ios-orange); }

.pricing-table .ptable-single {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--np-bg-elevated);
    border-radius: var(--radius-lg);

    /* Neumorphism dua sisi (terang + gelap) sebagai pengganti border keras —
       template aslinya memakai `box-shadow: 0 0 10px #999` yang datar. */
    box-shadow: var(--shadow-neu-raised);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pricing-table .ptable-single:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 18px var(--np-shadow-dark), -8px -8px 18px var(--np-shadow-light);
}

/*
 * Garis aksen tipis mengikuti lengkungan sudut atas kartu, memudar jadi
 * transparan ke arah bawah (efek "makin tipis/lancip"). Dibuat lewat
 * `background` gradien + `mask` cincin (BUKAN `border`) karena `border-color`
 * tidak bisa menerima linear-gradient() sama sekali — cuma `background` yang
 * bisa, jadi mask dipakai untuk "melubangi" bagian tengahnya supaya isi
 * header di baliknya tetap terlihat, sisakan cincin tipis di tepinya.
 *
 *   - padding: 2px 2px 0 2px -> tebal cincin 2px di atas & kedua sisi,
 *     0 di bawah (tanpa cincin di situ, sama seperti border-bottom:none
 *     sebelumnya). box-sizing:border-box sudah berlaku global dari
 *     Bootstrap Reboot.
 *   - mask dua lapis + mask-composite -> melubangi area content-box
 *     (bagian dalam padding), menyisakan cuma cincinnya.
 *   - border-top-*-radius: inherit, border-bottom-*-radius: 0 -> hanya
 *     sudut atas ikut lengkungan kartu (termasuk otomatis mengecil di
 *     mobile); sudut bawah dipaksa persegi supaya cincin tidak ikut
 *     membelok ke dalam sebelum berhenti.
 *   - background gradien dari var(--warna-garis) ke transparent -> warna
 *     lembut (token base, bukan -tegas) yang meluruh habis persis di tepi
 *     bawah kotak 60px ini, bukan berhenti tegas seperti sebelumnya.
 */
.pricing-table .ptable-single::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60px;
    padding: 2px 2px 0 2px;
    background: linear-gradient(to bottom, var(--warna-garis) 0%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 2;
    pointer-events: none;
}

/* Kartu unggulan sedikit lebih menonjol, tanpa mengubah lebar kolomnya. */
.pricing-table .featured-item .ptable-single {
    box-shadow: 8px 8px 18px var(--np-shadow-dark), -8px -8px 18px var(--np-shadow-light);
}

.pricing-table .ptable-header,
.pricing-table .ptable-body,
.pricing-table .ptable-footer {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.pricing-table .ptable-status,
.pricing-table .ptable-title,
.pricing-table .ptable-price,
.pricing-table .ptable-description,
.pricing-table .ptable-action {
    position: relative;
    width: 100%;
    text-align: center;
}

/* ----------------------------------------------------------------- Header --- */

.pricing-table .ptable-header {
    margin: 0 24px;
    padding: var(--pad-header-atas) 0 calc(var(--notch-tinggi) * .52) 0;
    width: auto;
    background: var(--warna-paket);
}

/* Kartu tanpa badge menambah padding setinggi badge supaya judul & harga
   ketiga kartu berdiri di garis yang sama. */
.pricing-table .ptable-item:not(.featured-item) .ptable-header {
    padding-top: calc(var(--pad-header-atas) + var(--sisip-badge));
}

/* Takik segitiga: dua segitiga sewarna badan kartu yang "menggigit" sisi bawah
   header. Warnanya WAJIB sama dengan --np-bg-elevated (latar .ptable-single),
   kalau beda akan terlihat sebagai garis asing. */
.pricing-table .ptable-header::before,
.pricing-table .ptable-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: var(--notch-tinggi) solid var(--np-bg-elevated);
}

.pricing-table .ptable-header::before {
    right: 50%;
    border-right: var(--notch-lebar) solid transparent;
}

.pricing-table .ptable-header::after {
    left: 50%;
    border-left: var(--notch-lebar) solid transparent;
}

/* Kartu unggulan TIDAK lagi memaksakan warnanya sendiri — kalau iya, warna
   yang dipilih admin akan tertimpa dan pilihannya kembali tidak berfungsi.
   Penonjolannya murni lewat bayangan & urutan di ponsel. */

/* ------------------------------------------------------------ Badge status --- */

/* Tinggi dikunci (28px + margin 8px = --sisip-badge) supaya kompensasi padding
   pada kartu tanpa badge selalu tepat. */
.pricing-table .ptable-status {
    height: 28px;
    margin-bottom: 8px;
}

.pricing-table .ptable-status span {
    position: relative;
    display: inline-block;
    min-width: 104px;
    padding: 0 16px;
    text-align: center;
    /*
     * Chip putih dengan teks navy, bukan sebaliknya. Header kini bisa berwarna
     * apa saja termasuk navy bawaan — chip navy di atas header navy praktis
     * tidak terlihat. Putih terbaca di keenam pilihan warna (kontras teks
     * navy di atas putih 16.29:1).
     */
    color: var(--secondary-color);
    font-size: .72rem;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--np-bg-elevated);
    border-radius: 999px;
}

/* ------------------------------------------------------------ Judul & harga --- */

.pricing-table .ptable-title h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pricing-table .ptable-ringkas {
    display: block;
    margin: 6px auto 0;
    max-width: 88%;
    color: rgba(255, 255, 255, .82);
    font-size: .74rem;
    line-height: 1.45;
}

.pricing-table .ptable-price h2 {
    margin: 14px 0 0;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.pricing-table .ptable-price h2 small {
    margin-right: 4px;
    font-size: 1rem;
    font-weight: 500;
    vertical-align: super;
}

.pricing-table .ptable-price h2 span {
    margin-left: 4px;
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
}

/* -------------------------------------------------------------- Isi & fitur --- */

.pricing-table .ptable-body {
    flex: 1 1 auto;
    padding: 18px 0 8px;
}

.pricing-table .ptable-description ul {
    margin: 0;
    padding: 0 22px;
    list-style: none;
    text-align: left;
}

.pricing-table .ptable-description ul li {
    position: relative;
    padding: 9px 0 9px 26px;
    color: var(--teks-lembut);
    font-size: .82rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(209, 213, 219, .5);
}

.pricing-table .ptable-description ul li:last-child {
    border-bottom: none;
}

/* Centang digambar dari CSS (border dua sisi diputar 45°) supaya tidak perlu
   menambah markup <ion-icon> di setiap <li>. */
.pricing-table .ptable-description ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 15px;
    width: 6px;
    height: 11px;
    border: solid var(--ios-green-tegas);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ----------------------------------------------------------------- Tombol --- */

.pricing-table .ptable-footer {
    padding: 6px 22px 26px;
}

.pricing-table .ptable-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 11px 22px;
    color: #ffffff;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    background: var(--warna-paket);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-neu-raised-sm);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Hover cukup mengangkat & menebalkan bayangan. Mengganti warnanya di sini
   (dulu selalu biru) membuat tombol kartu oranye/hijau berkedip jadi biru. */
.pricing-table .ptable-action a:hover {
    transform: translateY(-1px);
    color: #ffffff;
    box-shadow: var(--shadow-neu-raised);
    filter: brightness(1.08);
}

.pricing-table .ptable-action a:active {
    transform: none;
    box-shadow: var(--shadow-turun-halus);
}


.pricing-table .ptable-action ion-icon {
    font-size: 1.05rem;
}

/* Catatan kaki tabel harga — satu kali di bawah seluruh kartu, bukan diulang
   di tiap kartu (teksnya sama untuk semua paket). Isinya dari kolom `catatan`
   milik seksi "harga" di Admin › Beranda. */
.pricing-catatan {
    margin: 4px 0 0;
    text-align: center;
    color: var(--teks-samar);
    font-size: .74rem;
    line-height: 1.5;
}

/* ============================================================================
   CTA — .card-hero .jadwalkan-diskusi
   Kartu lebar penutup section harga: ajakan diskusi + Hubungi Developer.
   ========================================================================== */

.card-hero {
    position: relative;
    overflow: hidden;
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    background: var(--np-bg-elevated);
    box-shadow: var(--shadow-neu-raised);
}

/*
 * Disamakan dengan keluarga .hero-neuro (juga dipakai .footer-neuro &
 * .panel-pwa): gradien navy + dua bola cahaya blur di sudut berlawanan.
 * Sebelumnya kartu ini sendirian memakai --gradient-accent (ungu) dengan
 * satu lingkaran tipis tanpa blur — beda gaya dari panel gelap lain di
 * halaman yang sama.
 */
.card-hero.jadwalkan-diskusi {
    background: linear-gradient(135deg, #0A165E 0%, #12206e 50%, #1a3ad4 100%);
    box-shadow: var(--shadow-naik);
}
.card-hero.jadwalkan-diskusi::before,
.card-hero.jadwalkan-diskusi::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .15;
    pointer-events: none;
}
.card-hero.jadwalkan-diskusi::before {
    width: 260px; height: 260px;
    right: -70px; top: -90px;
    background: radial-gradient(circle, #2B4DFF 0%, transparent 70%);
}
.card-hero.jadwalkan-diskusi::after {
    width: 220px; height: 220px;
    left: -70px; bottom: -90px;
    background: radial-gradient(circle, #6a5cc3 0%, transparent 70%);
}
/* ::after ikut merender SETELAH konten asli (bisa menimpa teks di sudut
   kanan-bawah kalau tidak dinaikkan) — konten dinaikkan di atas kedua blob. */
.card-hero.jadwalkan-diskusi > .row { position: relative; z-index: 1; }

.card-hero.jadwalkan-diskusi .judul-diskusi {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.card-hero.jadwalkan-diskusi .teks-diskusi {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: .9rem;
    line-height: 1.6;
}

.card-hero.jadwalkan-diskusi .aksi-diskusi {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.card-hero .btn-diskusi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 22px;
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Putih pekat + teks biru-tegas: kebalikan kontras dari latar navy gradien
   (disamakan dengan keluarga .hero-neuro — dulu ungu, mengikuti gradien
   accent lama yang sekarang sudah diganti navy). */
.card-hero .btn-diskusi-utama {
    color: var(--ios-blue-tegas);
    background: var(--np-bg-elevated);
    box-shadow: 0 6px 16px rgba(10, 22, 94, .22);
}

.card-hero .btn-diskusi-utama:hover {
    transform: translateY(-1px);
    color: var(--ios-blue-tegas);
    box-shadow: 0 8px 20px rgba(10, 22, 94, .3);
}

.card-hero .btn-diskusi-ghost {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .32);
}

.card-hero .btn-diskusi-ghost:hover {
    transform: translateY(-1px);
    color: #ffffff;
    background: rgba(255, 255, 255, .2);
}

.card-hero .btn-diskusi:active {
    transform: none;
}

.card-hero .btn-diskusi ion-icon {
    font-size: 1.1rem;
}

/* ============================================================================
   Responsif
   Aturan proyek: JANGAN menciutkan grid kartu jadi satu kolom penuh bertumpuk.
   Di bawah 768px polanya jadi "satu kartu fokus di atas, dua kartu padat di
   bawahnya" — kartu unggulan naik ke baris pertama (order:-1) selebar penuh,
   sisanya tetap 2 per baris.
   ========================================================================== */

@media (max-width: 991.98px) {
    .pricing-table {
        --notch-tinggi: 72px;
        --notch-lebar: 220px;
    }

    .pricing-table .ptable-item { padding: 0 8px; }
    .pricing-table .ptable-price h2 { font-size: 2.1rem; }
    .pricing-table .ptable-description ul { padding: 0 16px; }
}

@media (max-width: 767.98px) {
    .pricing-table .ptable-item {
        width: 50%;
        margin-bottom: 16px;
    }

    /* Kartu unggulan jadi fokus baris pertama, selebar penuh. */
    .pricing-table .ptable-item.featured-item {
        order: -1;
        width: 100%;
    }

    .pricing-table .featured-item .ptable-header { margin: 0 32px; }
}

@media (max-width: 575.98px) {
    .pricing-table {
        --notch-tinggi: 52px;
        --notch-lebar: 170px;
        --sisip-badge: 26px;      /* 20px tinggi badge + 6px margin */
        --pad-header-atas: 14px;
    }

    .pricing-table .ptable-item {
        padding: 0 5px;
        margin-bottom: 10px;
    }

    /* Shadow dikecilkan, bukan dihilangkan — blur besar di kartu sempit
       membuat neumorphism terlihat kotor dan berat saat di-scroll. */
    .pricing-table .ptable-single,
    .pricing-table .featured-item .ptable-single {
        border-radius: var(--radius-md);
        box-shadow: 4px 4px 10px var(--np-shadow-dark), -4px -4px 10px var(--np-shadow-light);
    }

    .pricing-table .ptable-single:hover { transform: none; }

    /* Kartu & sudutnya mengecil di ponsel — garis aksen ikut dipendekkan
       supaya proporsinya (panjang garis vs tinggi kartu) tetap serasi,
       bukan malah menutup separuh kartu kecil. */
    .pricing-table .ptable-single::before { height: 40px; }

    .pricing-table .ptable-header { margin: 0 10px; }

    .pricing-table .featured-item .ptable-header { margin: 0 22px; }

    .pricing-table .ptable-title h2 { font-size: .92rem; letter-spacing: .04em; }
    .pricing-table .ptable-ringkas { font-size: .66rem; max-width: 96%; }
    .pricing-table .ptable-price h2 { margin-top: 8px; font-size: 1.55rem; }
    .pricing-table .ptable-price h2 small { font-size: .78rem; }
    .pricing-table .ptable-price h2 span { font-size: .66rem; }

    .pricing-table .ptable-status { height: 20px; margin-bottom: 6px; }
    .pricing-table .ptable-status span {
        min-width: 82px;
        padding: 0 10px;
        font-size: .58rem;
        line-height: 20px;
    }

    .pricing-table .ptable-body { padding: 10px 0 4px; }
    .pricing-table .ptable-description ul { padding: 0 10px; }
    .pricing-table .ptable-description ul li {
        padding: 6px 0 6px 19px;
        font-size: .7rem;
        line-height: 1.4;
    }
    .pricing-table .ptable-description ul li::before {
        left: 2px;
        top: 11px;
        width: 5px;
        height: 9px;
    }

    .pricing-table .ptable-footer { padding: 4px 10px 14px; }
    .pricing-table .ptable-action a {
        min-height: 44px;   /* batas target sentuh iOS — jangan diturunkan lagi */
        padding: 9px 10px;
        font-size: .72rem;
        gap: 5px;
    }
    .pricing-table .ptable-action ion-icon { font-size: .9rem; }
    .pricing-catatan { font-size: .66rem; }

    .card-hero { padding: 20px 16px; border-radius: var(--radius-md); }
    /* Blur besar berat & memenuhi kartu kecil di HP — matikan saja, sama
       seperti perlakuan .panel-pwa di layar sempit. */
    .card-hero.jadwalkan-diskusi::before,
    .card-hero.jadwalkan-diskusi::after { display: none; }
    .card-hero.jadwalkan-diskusi .judul-diskusi { font-size: 1.05rem; }
    .card-hero.jadwalkan-diskusi .teks-diskusi { font-size: .78rem; }
    .card-hero.jadwalkan-diskusi .aksi-diskusi { justify-content: stretch; }
    .card-hero .btn-diskusi {
        flex: 1 1 0;
        min-height: 44px;
        padding: 10px 8px;
        font-size: .76rem;
        gap: 5px;
    }
    .card-hero .btn-diskusi ion-icon { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-table .ptable-single,
    .pricing-table .ptable-action a,
    .card-hero .btn-diskusi {
        transition: none;
    }
    .pricing-table .ptable-single:hover { transform: none; }
}