/* ==========================================================================
   Situs publik TSN & MMK — satu berkas CSS untuk dua merek.
   --------------------------------------------------------------------------
   Warna merek datang dari companies.primary_color lewat custom property yang
   dicetak layouts/situs.blade.php. Tidak ada kelas yang digandakan per
   perusahaan, dan tidak ada satu pun warna merek yang dituliskan di sini.

   Sengaja TIDAK memakai cdn.tailwindcss.com: ±90 KB JavaScript yang
   menghalangi render, mengompilasi CSS di peramban, dan menjadikan halaman
   yang diukur Google bergantung pada host pihak ketiga. Panel admin tetap
   memakai CDN-nya sendiri — berkas ini tidak menyentuh panel admin.

   Ditulis PONSEL LEBIH DULU: aturan dasar untuk 360 px, media query hanya
   menambah untuk layar lebih besar.
   ========================================================================== */

/* ------------------------------------------------------------------ dasar */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --teks: #1f2937;
    --teks-lembut: #64748b;
    --garis: #e2e8f0;
    --latar: #ffffff;
    --latar-lembut: #f8fafc;
    --wa: #16a34a;
    --wa-gelap: #15803d;
    --radius: 14px;
    /* Tinggi bilah aksi bawah di ponsel.
       Nilai di sini hanya nilai AWAL sebelum halaman selesai dirender; angka
       sesungguhnya ditulis ulang layouts/situs.blade.php lewat ResizeObserver
       yang mengukur bilahnya langsung. Dulu angka ini dipaku 60px sementara
       bilahnya 88px karena tombol "Chat WhatsApp" pecah dua baris di lebar
       360 px, sehingga 28 px kaki halaman (termasuk baris hak cipta) tertutup
       bilah dan tidak bisa dibaca sama sekali. */
    --bilah: 64px;
    --sela: 3rem;           /* jarak antar-seksi */
}

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--latar);
    color: var(--teks);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    /* Nol gulir mendatar, apa pun isinya. */
    overflow-x: hidden;
    overflow-wrap: anywhere;
    /* Ruang untuk bilah aksi bawah agar kaki halaman tidak tertutup. */
    padding-bottom: calc(var(--bilah) + env(safe-area-inset-bottom, 0px));
}

img, svg, video { max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6rem; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }

.lembut { color: var(--teks-lembut); }
.kecil  { font-size: .875rem; }
.tengah { text-align: center; }

/* Dilihat pembaca layar saja — dipakai tautan "lompat ke isi". */
.khusus-pembaca {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lewati:focus {
    position: fixed; top: .5rem; left: .5rem; z-index: 200;
    width: auto; height: auto; clip: auto; margin: 0;
    padding: .6rem 1rem; background: var(--merek); color: var(--di-atas-merek);
    border-radius: 8px;
}

/* --------------------------------------------------------------- kerangka */

.pembungkus { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

.seksi { padding-block: var(--sela); }
.seksi-lembut { background: var(--latar-lembut); }
.seksi-kepala { margin-bottom: 1.5rem; }
.seksi-kepala p { margin: 0; }

/* --------------------------------------------------------------- kelas merek */

.bg-merek        { background: var(--merek); color: var(--di-atas-merek); }
.bg-merek-lembut { background: var(--merek-lembut); }
.teks-merek      { color: var(--merek-gelap); }
.garis-merek     { border-color: var(--merek-garis); }

/* --------------------------------------------------------------- tombol */

.tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .7rem 1.15rem;
    border: 1px solid transparent; border-radius: 10px;
    font: inherit; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer;
    transition: filter .15s ease, background-color .15s ease;
}
.tombol:hover { filter: brightness(.94); }
.tombol-merek { background: var(--merek); color: var(--di-atas-merek); }
.tombol-wa    { background: var(--wa); color: #fff; }
.tombol-wa:hover { background: var(--wa-gelap); filter: none; }
.tombol-garis {
    background: transparent; color: var(--teks);
    border-color: var(--garis); box-shadow: inset 0 0 0 1px transparent;
}
.tombol-garis:hover { background: var(--latar-lembut); }
.tombol-terang { background: #fff; color: var(--teks); }
.tombol-lebar  { width: 100%; }

/* Tombol di dalam kartu layanan. Padding dan huruf mengecil, tetapi min-height
   TETAP 44px — sasaran ketuk tidak boleh menyusut hanya karena tombolnya ada di
   dalam kartu. Teks panjang ("Tanya Renovasi & Branding Toko") dipatahkan
   supaya tidak pernah menimbulkan gulir mendatar di lebar 360 px.
   Masih dipakai di tempat lain; kartu layanan kini memakai .tombol-tebal. */
.tombol-kecil {
    padding: .55rem .8rem; font-size: .88rem;
    text-align: center; overflow-wrap: anywhere;
}

/* Tombol tebal — dipakai kartu layanan.
   ------------------------------------------------------------------------
   Tombol ramping bergaris tipis terbaca sebagai hiasan, bukan ajakan. Untuk
   usaha yang jualannya lewat WhatsApp, tombol itu SATU-SATUNYA pintu masuk
   order, jadi ia harus terlihat seperti tombol yang memang ditekan orang:
   tinggi, tebal, dan sudutnya tidak terlalu bulat. Sudut 8px terbaca lebih
   kokoh daripada 10-12px yang membuat semuanya tampak seperti kartu aplikasi.

   Huruf 700 (bukan 600) dan ukuran 1rem: masih terbaca nyaman di layar ponsel
   sambil berdiri di depan toko, yang memang keadaan sebagian besar pembacanya. */
.tombol-tebal {
    min-height: 52px;
    padding: .95rem 1.25rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Tombol bergaris versi tebal: 2px, bukan 1px. Garis setipis rambut membuat
   tombol sekunder tampak ragu-ragu di sebelah tombol WhatsApp yang penuh warna,
   dan pada layar ber-DPI tinggi garis 1px nyaris hilang sama sekali. */
.tombol-garis.tombol-tebal {
    border-width: 2px;
    border-color: var(--merek);
    color: var(--merek-gelap);
}
.tombol-garis.tombol-tebal:hover {
    background: var(--merek-lembut);
}

.tombol-baris { display: flex; flex-wrap: wrap; gap: .6rem; }
.tombol-baris > .tombol { flex: 1 1 12rem; }

/* --------------------------------------------------------------- kepala */

.kepala {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.4) blur(6px);
    border-bottom: 1px solid var(--garis);
}
.kepala-isi {
    display: flex; align-items: center; gap: .6rem;
    min-height: 56px;
}
.kepala-merek {
    display: flex; align-items: center; gap: .6rem;
    margin-right: auto; text-decoration: none; min-width: 0;
}
.kepala-nama { display: block; font-weight: 700; line-height: 1.15; font-size: .98rem; }
.kepala-badan { display: block; font-size: .7rem; color: var(--teks-lembut); line-height: 1.2; }

/* Di ponsel tombol WhatsApp header dilewati: bilah aksi bawah sudah memuatnya
   sepanjang halaman, dan header tetap muat di lebar 360 px. */
.hanya-desktop { display: none !important; }

.logo-ubin {
    display: flex; align-items: center; justify-content: center;
    background: var(--merek); color: var(--di-atas-merek);
    border-radius: 10px; font-weight: 800; letter-spacing: .02em;
    flex: none;
}
.logo-sm { width: 36px; height: 36px; font-size: .72rem; }
.logo-md { width: 48px; height: 48px; font-size: .9rem; }
.logo-gambar { display: block; object-fit: contain; }

.menu-utama { display: none; }

.tombol-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: transparent; border: 1px solid var(--garis); border-radius: 10px;
    font-size: 1.1rem; cursor: pointer; color: var(--teks);
}

/* --------------------------------------------------------------- laci ponsel */

.laci {
    position: fixed; inset: 0; z-index: 90;
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
    visibility: hidden;
}
.laci-buka { transform: none; visibility: visible; }
.laci-kepala {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem 1rem; border-bottom: 1px solid var(--garis); min-height: 56px;
}
.laci-kepala .tombol-menu { margin-left: auto; }
.laci-nav { padding: .5rem 1rem 1.25rem; overflow-y: auto; }
.laci-nav a {
    display: block; padding: .95rem .25rem; font-size: 1.05rem; font-weight: 600;
    text-decoration: none; border-bottom: 1px solid var(--garis);
}
.laci-nav a[aria-current="page"] { color: var(--merek-gelap); }
.laci-aksi { padding: 1rem; display: grid; gap: .6rem; margin-top: auto; }
body.laci-terkunci { overflow: hidden; }

/* --------------------------------------------------------------- hero */

.hero {
    background: linear-gradient(160deg, var(--merek) 0%, var(--merek-gelap) 100%);
    color: var(--di-atas-merek);
    padding-block: 2.75rem 3rem;
}
.hero h1 { font-size: 1.75rem; max-width: 20ch; }
.hero-sub { font-size: 1.02rem; opacity: .92; max-width: 46ch; margin-bottom: 1.4rem; }
.hero .tombol-baris { max-width: 34rem; }

/* --------------------------------------------------------------- pita janji */

.pita { background: var(--latar-lembut); border-bottom: 1px solid var(--garis); }
.pita ul { list-style: none; margin: 0; padding: .9rem 0; display: grid; gap: .45rem; }
.pita li { display: flex; gap: .5rem; font-size: .9rem; font-weight: 500; }
.pita li::before { content: "✓"; color: var(--merek-gelap); font-weight: 800; }

/* --------------------------------------------------------------- kisi & kartu */

.kisi { display: grid; gap: 1rem; }

.kartu {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--garis); border-radius: var(--radius);
    overflow: hidden;
}
.kartu-isi { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kartu-isi h3 { margin: 0; }
.kartu-isi p { margin: 0; font-size: .9rem; color: var(--teks-lembut); }
.kartu-kaki { margin-top: auto; padding-top: .35rem; }
/* Tombol WhatsApp + tautan detail selalu rata bawah kartu, sehingga deretan
   kartu yang deskripsinya berbeda panjang tetap sejajar tombolnya. */
/* Dua tombol setara: WhatsApp di atas (jalur order), rincian di bawah.
   Keduanya selebar kartu supaya sasaran ketuknya sebesar mungkin di ponsel —
   tautan teks kecil "Selengkapnya →" yang dulu ada di sini menuntut ketelitian
   jempol yang tidak dimiliki orang yang sedang berdiri di lokasi. */
.kartu-aksi { display: grid; gap: .55rem; }
.kartu-aksi > .tombol { width: 100%; }
.kartu-tautan { font-weight: 600; font-size: .9rem; color: var(--merek-gelap); text-decoration: none; }
.kartu-tautan:hover { text-decoration: underline; }

/* Ubin ikon menggantikan gambar yang belum ada — bukan kotak abu-abu kosong. */
.ubin-ikon {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; width: 64px; border-radius: 12px;
    background: var(--merek-lembut); color: var(--merek-gelap);
    font-size: 1.75rem; line-height: 1; flex: none;
}
.ubin-lebar { width: 100%; aspect-ratio: 4 / 3; font-size: 3rem; }
.ubin-teks {
    display: flex; align-items: center; justify-content: center; text-align: center;
    aspect-ratio: 4 / 3; padding: 1rem;
    background: var(--merek-lembut); color: var(--merek-gelap);
    font-weight: 700; font-size: 1rem;
}

.gambar-4x3 { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--latar-lembut); }

.label {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px;
    background: var(--merek-lembut); color: var(--merek-gelap);
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

/* --------------------------------------------------------------- daftar layanan */

.baris-layanan {
    display: flex; gap: .9rem; padding: 1.1rem 0; border-bottom: 1px solid var(--garis);
}
.baris-layanan:last-child { border-bottom: 0; }
.baris-isi { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.baris-isi h3 { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.baris-isi p { margin: 0; font-size: .92rem; color: var(--teks-lembut); }
.satuan { font-size: .85rem; font-weight: 600; color: var(--merek-gelap); }

/* --------------------------------------------------------------- langkah */

.langkah { counter-reset: langkah; display: grid; gap: 1rem; }
.langkah li { list-style: none; display: flex; gap: .85rem; }
.langkah li::before {
    counter-increment: langkah; content: counter(langkah);
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; border-radius: 999px;
    background: var(--merek); color: var(--di-atas-merek); font-weight: 800; font-size: .95rem;
}
.langkah ol, .langkah ul { margin: 0; padding: 0; }
.langkah h3 { margin: 0 0 .15rem; font-size: 1rem; }
.langkah p { margin: 0; font-size: .9rem; color: var(--teks-lembut); }

/* --------------------------------------------------------------- tanya-jawab */

.faq details {
    border: 1px solid var(--garis); border-radius: 12px;
    padding: .85rem 1rem; margin-bottom: .6rem; background: #fff;
}
.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-weight: 800; color: var(--merek-gelap); }
.faq details[open] summary::after { content: "−"; }
.faq details > p { margin: .7rem 0 0; font-size: .93rem; color: var(--teks-lembut); }

/* --------------------------------------------------------------- chip & remah */

.chip-baris { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.chip {
    display: inline-flex; align-items: center; min-height: 38px;
    padding: .35rem .85rem; border-radius: 999px;
    border: 1px solid var(--garis); background: #fff;
    font-size: .875rem; font-weight: 600; text-decoration: none;
}
.chip[aria-current="true"] { background: var(--merek); color: var(--di-atas-merek); border-color: var(--merek); }

.remah { font-size: .82rem; color: var(--teks-lembut); padding-top: 1.25rem; }
.remah ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.remah li + li::before { content: "›"; margin-right: .35rem; }
.remah a { text-decoration: none; }
.remah a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- ajakan */

.ajakan { background: var(--merek); color: var(--di-atas-merek); }
.ajakan h2 { margin-bottom: .35rem; }
.ajakan p { opacity: .92; }
/* :not(.tombol) WAJIB. Tanpa itu aturan ini juga mengenai TOMBOL di dalam blok
   ajakan — tombol adalah elemen <a> juga — sehingga "Minta Penawaran" yang
   berlatar putih ikut dipaksa berhuruf putih dan tulisannya hilang sama sekali.
   Kekhususan .ajakan a (0-1-1) mengalahkan .tombol-terang (0-1-0), jadi tombolnya
   kalah tanpa perlawanan. Yang dimaksud aturan ini hanyalah tautan biasa
   (alamat, telepon, email) supaya terbaca putih di atas latar merek. */
.ajakan a:not(.tombol) { color: inherit; }
.ajakan-kontak { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem; }
.ajakan-kontak li { display: flex; gap: .55rem; }

/* --------------------------------------------------------------- formulir */

.formulir { display: grid; gap: 1rem; }
.isian { display: grid; gap: .35rem; }
.isian > label { font-weight: 600; font-size: .9rem; }
.isian input, .isian textarea, .isian select {
    width: 100%; padding: .7rem .8rem;
    border: 1px solid var(--garis); border-radius: 10px;
    background: #fff; color: var(--teks);
    font: inherit;
    font-size: 16px;  /* di bawah 16px iOS memperbesar layar sendiri */
    min-height: 46px;
}
.isian textarea { min-height: 8rem; resize: vertical; }
.isian input:focus, .isian textarea:focus {
    outline: 2px solid var(--merek); outline-offset: 1px; border-color: var(--merek);
}
.isian-galat input, .isian-galat textarea { border-color: #dc2626; }
.galat { color: #b91c1c; font-size: .82rem; }
.wajib { color: #dc2626; }
.petunjuk { font-size: .8rem; color: var(--teks-lembut); }

/* Kolom jebakan anti-robot: disembunyikan lewat CSS, bukan type=hidden,
   supaya robot pengisi formulir tetap melihatnya. */
.jebakan {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.kabar { padding: .9rem 1rem; border-radius: 12px; font-size: .92rem; margin-bottom: 1.25rem; }
.kabar-sukses { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.kabar-galat  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* --------------------------------------------------------------- paginasi */

.paginasi { margin-top: 1.75rem; }
.paginasi nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.paginasi a, .paginasi span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 .6rem;
    border: 1px solid var(--garis); border-radius: 10px;
    text-decoration: none; font-size: .9rem;
}
.paginasi [aria-current="page"] span,
.paginasi .aktif { background: var(--merek); color: var(--di-atas-merek); border-color: var(--merek); }
.paginasi svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------- kaki halaman */

.kaki { background: #0f172a; color: #cbd5e1; margin-top: var(--sela); }
.kaki a { color: #cbd5e1; text-decoration: none; }
.kaki a:hover { color: #fff; text-decoration: underline; }
.kaki-kisi { display: grid; gap: 2rem; padding-block: 2.5rem; }
.kaki h2 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .85rem; }
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9rem; }
.kaki-nama { color: #fff; font-weight: 700; font-size: 1.05rem; }
.kaki-hakcipta {
    border-top: 1px solid #1e293b; padding: 1rem 0;
    text-align: center; font-size: .8rem; color: #64748b;
}

/* --------------------------------------------------------------- bilah bawah */

.bilah-bawah {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: #fff; border-top: 1px solid var(--garis);
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    gap: .5rem;
}
/* Label bilah TIDAK BOLEH pecah dua baris: bilahnya membengkak dan menutupi
   isi halaman. Padding mendatar dikecilkan supaya "💬 WhatsApp" + "📞 Telepon"
   muat berdampingan di lebar 320 px sekalipun. Sasaran ketuk tetap 48 px. */
.bilah-bawah .tombol {
    min-height: 48px; font-size: .95rem;
    padding-inline: .5rem;
    white-space: nowrap;
    overflow: hidden;
}

/* --------------------------------------------------------------- halaman galat */

.galat-halaman { padding-block: 4rem; text-align: center; }
.galat-kode { font-size: 3.5rem; font-weight: 800; color: var(--merek-garis); line-height: 1; }

/* ==========================================================================
   Tablet — 640 px ke atas
   ========================================================================== */
@media (min-width: 640px) {
    :root { --sela: 4rem; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    .hero h1 { font-size: 2.35rem; }
    .kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kisi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pita ul { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.25rem; }
    .langkah { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .kaki-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tombol-baris > .tombol { flex: 0 1 auto; }
}

/* ==========================================================================
   Desktop — 768 px ke atas
   Di sini bilah aksi bawah menghilang dan menu utama menggantikan laci.
   ========================================================================== */
@media (min-width: 768px) {
    :root { --bilah: 0px; --sela: 5rem; }
    body { padding-bottom: 0; }
    .bilah-bawah { display: none; }
    .tombol-menu { display: none; }
    .laci { display: none; }
    .hanya-desktop { display: inline-flex !important; }

    .menu-utama {
        display: flex; align-items: center; gap: 1.4rem;
        font-size: .93rem; font-weight: 600;
    }
    .menu-utama a { text-decoration: none; padding: .35rem 0; }
    .menu-utama a:hover { color: var(--merek-gelap); }
    .menu-utama a[aria-current="page"] {
        color: var(--merek-gelap); box-shadow: inset 0 -2px 0 var(--merek);
    }
    .kepala-isi { min-height: 64px; }
    .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .langkah { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero h1 { font-size: 2.75rem; }
    .hero-sub { font-size: 1.1rem; }
    .isi-2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start; }
}

/* ==========================================================================
   Hormati pengaturan pengguna
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .kepala, .bilah-bawah, .laci, .kaki, .tombol { display: none !important; }
    body { padding-bottom: 0; }
}