/*
Theme Name: Nusantara Bakeware B2B
Theme URI: https://nusantarabakeware.com
Author: Professional B2B Developer
Description: Custom WordPress Theme untuk Nusantara Bakeware Co. (B2B Export Oriented)
Version: 1.0.0
Text Domain: nusantara-bakeware
*/

:root {
  --navy-dark: #0f1c2e;
  --gold-primary: #c69214;
  --gold-hover: #a3760d;
  --bg-light: #f8fafc;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, sans-serif; color: var(--text-dark); background-color: #ffffff; line-height: 1.6; }

/* Global Components */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.btn-gold { background: var(--gold-primary); color: #fff; padding: 12px 24px; border-radius: 4px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; transition: 0.3s; }
.btn-gold:hover { background: var(--gold-hover); }
.btn-navy { background: var(--navy-dark); color: #fff; padding: 12px 24px; border-radius: 4px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; transition: 0.3s; }
.btn-navy:hover { opacity: 0.9; }
.btn-outline { border: 1px solid var(--navy-dark); color: var(--navy-dark); padding: 12px 24px; border-radius: 4px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

/* Navbar */
.site-header { background: #fff; padding: 15px 0; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
.header-wrapper { display: flex; justify-content: space-between; align-items: center; }
.logo-area { font-weight: 800; font-size: 20px; color: var(--navy-dark); letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.main-nav ul { display: flex; list-style: none; gap: 20px; align-items: center; }
.main-nav a { text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 13px; text-transform: uppercase; }

/* Hero Section */
.hero { padding: 60px 0; background: #fff; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-content h1 { font-size: 42px; color: var(--navy-dark); font-weight: 900; line-height: 1.2; }
.hero-content h1 span { color: var(--gold-primary); }
.hero-content p { margin: 20px 0; color: var(--text-muted); font-size: 16px; }
.hero-buttons { display: flex; gap: 15px; margin-bottom: 40px; }
.export-flags { display: flex; gap: 15px; align-items: center; font-size: 12px; font-weight: 700; color: var(--navy-dark); flex-wrap: wrap; }

/* Features & Cards */
.section-title { text-align: center; font-size: 24px; font-weight: 800; color: var(--navy-dark); margin-bottom: 40px; text-transform: uppercase; }
.features-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; text-align: center; }
.feature-item { padding: 15px; }
.feature-item h4 { font-size: 13px; margin: 10px 0 5px; color: var(--navy-dark); text-transform: uppercase; }
.feature-item p { font-size: 12px; color: var(--text-muted); }

/* Categories */
.categories-section { background: var(--bg-light); padding: 60px 0; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.cat-card { background: #fff; border-radius: 8px; padding: 20px; text-align: center; border: 1px solid var(--border-color); }
.cat-card img { width: 100%; height: 140px; object-fit: contain; margin-bottom: 15px; }
.cat-card h3 { font-size: 14px; font-weight: 800; color: var(--navy-dark); margin-bottom: 8px; }
.cat-card p { font-size: 12px; color: var(--text-muted); }

/* Manufacturing Capability Section */
.capability-section { background: var(--navy-dark); color: #fff; padding: 60px 0; }
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cap-text h2 { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 15px; }
.cap-text h2 span { color: var(--gold-primary); display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.cap-text p { color: #cbd5e1; font-size: 14px; margin-bottom: 20px; }
.cap-checklist { list-style: none; margin-bottom: 30px; }
.cap-checklist li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.gallery-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.gallery-mosaic img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; }
.badge-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: var(--navy-dark); width: 110px; height: 110px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 11px; font-weight: 800; border: 4px solid var(--gold-primary); }

/* Form & Footer */
.quotation-section { padding: 60px 0; background: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.b2b-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.b2b-form input, .b2b-form select, .b2b-form textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; }
.b2b-form textarea { grid-column: span 2; height: 100px; }
.b2b-form button { grid-column: span 2; }

.site-footer { background: var(--navy-dark); color: #fff; padding: 40px 0 20px; font-size: 13px; border-top: 1px solid #1e293b; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.footer-grid h4 { color: #fff; margin-bottom: 15px; font-size: 14px; }
.footer-bottom { border-top: 1px solid #1e293b; padding-top: 20px; display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; }

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero-grid, .cap-grid, .form-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .header-wrapper {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  .main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .export-flags {
    justify-content: center;
  }
  .hero-buttons {
    flex-direction: column;
  }
  .btn-gold, .btn-navy, .btn-outline {
    width: 100%;
    justify-content: center;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-grid {
    grid-template-columns: 1fr;
  }
  .b2b-form {
    grid-template-columns: 1fr;
  }
  .b2b-form textarea, .b2b-form button {
    grid-column: span 1;
  }
}