/* =========================================================
   ASATURA — JASA CAT (cat.css)

   Gaya yang HANYA dipakai halaman /jakarta/cat/.
   Sebelumnya menumpang di layanan.css, sehingga empat halaman
   layanan lain ikut memuat 30 swatch warna yang tidak pernah
   mereka pakai.

   Dimuat setelah style.css dan layanan.css.
   Tidak mengatur navbar maupun footer.
   ========================================================= */

/* ---------- IDENTITAS WARNA HALAMAN ----------
   Komponen .lp- mengambil warna dari --lp-accent-ink.
   Halaman cat memakai terakota supaya punya karakter sendiri,
   sementara lime tetap jadi aksen brand di hero yang gelap. */
.page-cat{
  --lp-accent-ink: #9a5433;
  --lp-accent-soft:#f6e7de;
  --lp-pro:        #6b7f3f;
  --ct-line:       #e7e0d6;
}

/* Kartu pilihan jenis cat diberi garis warna di tepi kiri
   supaya terbaca sebagai "pilihan", bukan kartu informasi biasa. */
.page-cat .lp-choice-card{border-left:3px solid var(--lp-accent-ink);}

/* ------------------------------------------------------------
   PALET WARNA
   ------------------------------------------------------------ */
.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.palette-card{
    background:var(--card);border:1px solid var(--card-border);
    border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  }
.palette-strip{display:flex;height:82px;}
.palette-strip span{flex:1;display:block;}
.palette-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.palette-body h3{font-size:19px;}
.palette-body > p{margin-top:10px;font-size:14px;color:var(--ink-muted);line-height:1.65;}
.palette-hex{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.palette-hex code{
    font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
    font-size:11.5px;color:var(--ink-muted);
    background:var(--bg-alt);border:1px solid var(--card-border);
    border-radius:6px;padding:4px 8px;
  }
.palette-use{
    margin-top:auto;padding-top:16px;
    border-top:1px solid var(--card-border);
    font-size:13.5px;color:var(--ink);line-height:1.6;
  }
.palette-use b{color:var(--lp-accent-ink);font-weight:600;}
  @media(max-width:980px){.palette-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){
  .palette-grid{grid-template-columns:1fr;}
  .palette-body{padding:20px 20px 22px;}
  }

/* Swatch — Netral Hangat */
.sw-cream{background:#F7F2E9;} .sw-pasir{background:#E9DFCE;}
.sw-latte{background:#CFBFA6;} .sw-kayu{background:#9C8A72;}
.sw-kopi{background:#4E463C;}
/* Swatch — Monokrom Modern */
.sw-putih{background:#FFFFFF;} .sw-kabut{background:#EDEDEA;}
.sw-beton{background:#BFC0BC;} .sw-abutua{background:#6E706C;}
.sw-charcoal{background:#262825;}
/* Swatch — Sage & Kayu */
.sw-gading{background:#F4F2EA;} .sw-sagemuda{background:#DCE1D2;}
.sw-sage{background:#A8B79A;} .sw-zaitun{background:#6E7F63;}
.sw-kayugelap{background:#4A4034;}
/* Swatch — Terakota Tropis */
.sw-krem{background:#FBF3EA;} .sw-peach{background:#F0D9C4;}
.sw-terakota{background:#D89C74;} .sw-bata{background:#B5674A;}
.sw-cokelat{background:#6E3B2C;}
/* Swatch — Biru Tenang */
.sw-kabutbiru{background:#F5F8F8;} .sw-birumuda{background:#DCE7E8;}
.sw-birulaut{background:#A9C4C9;} .sw-teal{background:#5F8792;}
.sw-navy{background:#2E4A52;}
/* Swatch — Fasad Tahan Panas */
.sw-tulang{background:#FAF7F0;} .sw-krembatu{background:#E4DED2;}
.sw-abupasir{background:#C2BDB2;} .sw-abuzaitun{background:#8A8578;}
.sw-hitam{background:#2B2B28;}

/* ---------------------------------------------------------
   KARTU LAYANAN — foto besar, teks di bawah
   Sengaja dibuat lain dari .lp-svc di halaman atap bocor:
   di sini gambarnya potret 4:3 dengan judul menumpuk di atas
   sudut bawah foto, bukan blok teks terpisah.
   --------------------------------------------------------- */
.ct-svc-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.ct-svc{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.ct-svc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);}
.ct-svc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.ct-svc:hover .ct-svc-img img{transform:scale(1.04);}
.ct-svc-img::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(180deg,transparent,rgba(23,23,15,.72));
}
.ct-svc-body{padding:16px 18px 20px;position:relative;}
.ct-svc-body h3{
  position:absolute;left:18px;right:18px;top:-38px;
  color:#fff;font-size:17px;line-height:1.25;z-index:1;margin:0;
}
.ct-svc-body p{
  margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-muted);
  padding-top:2px;
}
@media(prefers-reduced-motion:reduce){
  .ct-svc-img img{transition:none;}
  .ct-svc:hover .ct-svc-img img{transform:none;}
}

/* ---------------------------------------------------------
   KARTU MEREK CAT — logo di kepala kartu
   --------------------------------------------------------- */
.ct-brand-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.ct-brand{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.ct-brand-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--card-border);
}
.ct-brand-logo{
  height:32px;width:auto;max-width:150px;object-fit:contain;display:block;
}
.ct-brand-tag{
  flex-shrink:0;
  background:var(--lp-accent-soft);color:var(--lp-accent-ink);
  font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:999px;
  white-space:nowrap;
}
.ct-brand-body{padding:18px;}
.ct-brand-body h3{margin:0 0 8px;font-size:17px;color:var(--ink);}
.ct-brand-body > p{margin:0 0 14px;font-size:13.5px;line-height:1.65;color:var(--ink-muted);}
.ct-brand-lines{list-style:none;margin:0;padding:0;}
.ct-brand-lines li{
  font-size:12.5px;line-height:1.55;color:var(--ink);
  padding:7px 0 7px 14px;position:relative;
  border-top:1px solid var(--ct-line);
}
.ct-brand-lines li::before{
  content:"";position:absolute;left:0;top:14px;
  width:5px;height:5px;border-radius:999px;background:var(--lp-accent-ink);
}
.ct-brand-lines li b{color:var(--ink);font-weight:700;}

/* Catatan jujur soal harga */
.ct-note{
  margin-top:20px;
  background:var(--bg-alt);
  border-left:3px solid var(--lp-accent-ink);
  border-radius:0 10px 10px 0;
  padding:16px 18px;
  font-size:13px;line-height:1.7;color:var(--ink);
}
.ct-note b{color:var(--ink);}

@media(min-width:720px){
  .ct-svc-grid{grid-template-columns:repeat(2,1fr);}
  .ct-brand-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1080px){
  .ct-svc-grid{grid-template-columns:repeat(3,1fr);}
  .ct-brand-grid{grid-template-columns:repeat(3,1fr);}
}