/* css/katalog.css */
.katalog-wrapper {
  padding: 40px 20px;
  background-color: #0b0b0b;
  /* Very dark background */
  color: #fff;
  min-height: calc(100vh - 100px);
  font-family: 'Montserrat', sans-serif;
  background-image: radial-gradient(#E67835 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  /* Delicate halftone-like effect */
  background-position: 0 0;
  position: relative;
}

/* Dark overlay to make text readable over the background pattern */
.katalog-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 11, 11, 0.92);
  /* 92% dark overlay */
  z-index: 0;
  pointer-events: none;
}

.katalog-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.katalog-item {
  display: flex;
  flex-direction: column;
  background: #111;
  /* Very dark grayish black */
  border: 1px solid #333;
  border-left: 6px solid var(--orangetambang);
  /* Sharp orange accent */
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.8);
  /* Hard shadow for a strong/galak look */
  padding: 40px;
  gap: 30px;
}

@media (min-width: 992px) {
  .katalog-item {
    flex-direction: row;
    align-items: stretch;
    /* Stretch to make visuals and details match height */
  }
}

.katalog-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.katalog-title {
  color: var(--orangetambang);
  font-size: 42px;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 0 15px 0;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  .katalog-title {
    font-size: 54px;
  }
}

.katalog-title span {
  color: #FFC107;
  /* Yellow accent */
  display: block;
}

.katalog-visuals {
  flex: 1.8;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1a1a;
  min-height: 300px;
  border: 1px solid #333;
  position: relative;
  overflow: hidden;
}

.katalog-visuals::before {
  content: 'IMAGE PLACEHOLDER';
  position: absolute;
  font-size: 60px;
  color: rgba(255, 255, 255, 0.02);
  font-weight: 900;
  white-space: nowrap;
  transform: rotate(-15deg);
  pointer-events: none;
}

.katalog-visuals img {
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
}

.katalog-details {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: center;
}

/* Sizing Table */
.katalog-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.katalog-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 15px;
  border: 1px solid var(--orangetambang);
}

.katalog-table th {
  background-color: #fff;
  color: #000;
  padding: 12px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}

.katalog-table td {
  background-color: var(--orangetambang);
  color: #fff;
  padding: 10px;
  border-bottom: 1px solid #b85a21;
  font-weight: 700;
}

.katalog-table tr:nth-child(even) td {
  background-color: #c9652a;
  /* Slightly darker orange */
}

.katalog-table tr:last-child td {
  border-bottom: none;
}

/* Actions: Button & Contact */
.katalog-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
}

.katalog-actions p {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

.btn-pemesanan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #1a1a1a;
  color: #fff;
  text-decoration: none;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border: 2px solid #555;
  border-radius: 2px;
  /* Sharp edge */
  transition: all 0.3s ease;
  cursor: pointer;
  letter-spacing: 1px;
}

.btn-pemesanan:hover {
  background-color: var(--orangetambang);
  border-color: var(--orangetambang);
  color: #000;
}

.contact-person-card {
  display: flex;
  align-items: stretch;
  background-color: #1a1a1a;
  border: 1px solid #333;
  width: 100%;
  margin-top: 5px;
}

.cp-icon {
  background-color: var(--orangetambang);
  /* Orange icon bg instead of yellow to match serious tone */
  color: #000;
  width: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.cp-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 15px;
}

.cp-title {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  font-weight: 700;
  letter-spacing: 1px;
}

.cp-number {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

/* ==========================================================================
   [EXPERIMENTAL] LIGHT MODE VARIANT (Katalog Section)
   
   Karena kamu minta versi terang buat referensi atau kalau nanti pengen 
   dicampur (misal cuma bagian section ini aja yang terang), kode di bawah 
   ini adalah gaya buat Light Mode. 
   
   Untuk mengaktifkannya tanpa merusak Dark Mode utama:
   1. Hapus tanda komentar pembuka dan penutup di bawah ini.
   2. Penggunaan idealnya ditambahkan prefix class (contoh: .theme-light)
      seperti `.theme-light .katalog-wrapper { ... }`, lalu pastikan juga di `katalog.php` 
      nanti kamu panggil div bungkusnya dengan `<div class="katalog-wrapper theme-light">`.
   ========================================================================== */


.katalog-wrapper {
  background-color: #f8f9fa;
  color: #1a1a1a;
  background-image: radial-gradient(#E67835 0.7px, transparent 0.7px);
}

.katalog-wrapper::before {
  background: rgba(255, 255, 255, 0.95);
}

.katalog-item {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.1);
  border-left: 6px solid var(--orangetambang);
}

.katalog-title {
  color: var(--orangetambang);
}

.katalog-title span {
  color: #0b0b0b;
}

.katalog-visuals {
  background: #f4f4f4;
  border: 1px solid #ececec;
}

.katalog-table th {
  background-color: #1a1a1a;
  color: #fff;
}

.katalog-table td {
  background-color: #fff;
  color: #1a1a1a;
  border-bottom: 1px solid #ddd;
}

.katalog-table tr:nth-child(even) td {
  background-color: #f9f9f9;
}

.katalog-actions p {
  color: #555;
}

.btn-pemesanan {
  background-color: #fff;
  color: #111;
  border: 2px solid #ccc;
}

.btn-pemesanan:hover {
  background-color: var(--orangetambang);
  border-color: var(--orangetambang);
  color: #fff;
}

.contact-person-card {
  background-color: #fff;
  border: 1px solid #ddd;
}

.cp-icon {
  background-color: var(--orangetambang);
  color: #fff;
}

.cp-title {
  color: #888;
}

.cp-number {
  color: #111;
}

p[style*="color: #aaa"],
p[style*="color: #888"] {
  color: #666 !important;
}