/* =========================================================
   ULTRA PREMIUM PRODUCTS HERO
========================================================= */

.products-hero-ultra {
  position: relative;
  min-height: 78vh;
  background: linear-gradient(
      180deg,
      rgba(8, 12, 18, 0.95) 0%,
      rgba(8, 12, 18, 0.88) 50%,
      rgba(8, 12, 18, 0.82) 100%
    ),
    url("../images/hero/industrial-bg.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
  padding-top: 120px;
}

.products-hero-content {
  max-width: 960px;
  padding: 0 24px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.products-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: #d4af37;
  margin-bottom: 16px;
}

.products-title-ultra {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 24px;
}

.products-subtitle-ultra {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  max-width: 760px;
  margin: 0 auto;
}

/* =========================================================
   BREADCRUMB
========================================================= */

.products-breadcrumb-ultra {
  background: #ffffff;
  border-bottom: 1px solid #eee;
  padding: 16px 0;
}

.products-breadcrumb-ultra .breadcrumb {
  font-size: 14px;
}

.products-breadcrumb-ultra a {
  color: #0d6efd;
  text-decoration: none;
}

/* =========================================================
   INTRO & CONTEXT
========================================================= */

.products-intro,
.products-context {
  padding: 48px 0;
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}

.products-context {
  padding-top: 0;
}

/* =========================================================
   PRODUCT GRID
========================================================= */

.products-grid {
  padding: 64px 0;
}

.product-card {
  border-radius: 18px;
  border: 1px solid #eee;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.product-img {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.product-badge {
  font-size: 11px;
  margin-bottom: 8px;
}

.rodcraft-badge {
  background: #111;
  color: #fff;
}

.product-name {
  font-weight: 600;
  margin-bottom: 8px;
}

.product-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 16px;
}

.product-btn {
  font-size: 13px;
}
.products-context {
  padding-bottom: 24px; /* sebelumnya terlalu lega */
}
.products-hero-proof {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .3px;
  opacity: .65;
}
/* =====================================================
   ULTRA PREMIUM PRODUCTS PAGE
===================================================== */

/* ===== HERO ===== */
.products-hero-ultra {
  min-height: 78vh;
  background: linear-gradient(
    180deg,
    rgba(12,16,22,.95),
    rgba(12,16,22,.88)
  );
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
  padding-top: 120px;
}

.products-hero-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

.products-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  color: #d4af37;
  margin-bottom: 18px;
}

.products-title-ultra {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 22px;
}

.products-subtitle-ultra {
  font-size: 18px;
  line-height: 1.85;
  color: rgba(255,255,255,.75);
}

/* ===== BREADCRUMB ===== */
.products-breadcrumb-ultra {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 16px 0;
}

.products-breadcrumb-ultra .breadcrumb {
  font-size: 14px;
}

/* ===== CONTEXT ===== */
.products-intro,
.products-context {
  padding: 42px 0;
  font-size: 16px;
  line-height: 1.85;
  color: #444;
}

.products-context {
  padding-top: 0;
}

/* ===== GRID ===== */
.products-grid {
  padding: 64px 0;
}

.product-card {
  border-radius: 18px;
  border: 1px solid #eee;
  transition: transform .35s ease, box-shadow .35s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

.product-img {
  border-radius: 18px 18px 0 0;
}

.product-badge {
  font-size: 11px;
  margin-bottom: 8px;
}

.rodcraft-badge {
  background: #111;
  color: #fff;
}

.product-name {
  font-weight: 600;
  margin-bottom: 8px;
}

.product-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 16px;
}

.product-btn {
  font-size: 13px;
}
.products-context { padding-bottom: 24px; }
.products-hero-proof{
  margin-top: 16px;
  font-size: 13px;
  opacity: .65;
  letter-spacing: .3px;
}


/* ===== HERO ===== */
.product-hero{
  background:radial-gradient(circle at top,#2b2b2b,#0b0f14);
  color:#fff;
  padding:120px 0 100px;
}

.breadcrumb-clean{
  font-size:13px;
  margin-bottom:24px;
}
.breadcrumb-clean a{color:#bbb;text-decoration:none}
.breadcrumb-clean span{margin:0 6px;color:#555}

.brand-logo{height:42px;margin-bottom:20px}

.product-hero h1{
  font-size:44px;
  font-weight:700;
}
.hero-subtitle{
  max-width:720px;
  opacity:.85;
  margin-top:14px;
}

.hero-cta{margin-top:28px}
.btn-primary{
  background:#d32f2f;
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
}
.btn-outline{
  border:1px solid #fff;
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
  margin-left:10px;
}

/* ===== DETAIL ===== */
.product-detail{
  background:#f6f7f9;
  padding:100px 0;
}

.detail-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
}

.gallery,.info{
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 30px 60px rgba(0,0,0,.1);
}

.main-img{position:relative}
.main-img img{width:100%;border-radius:12px}
.main-img span{
  position:absolute;
  bottom:12px;left:12px;
  background:#000;color:#fff;
  padding:6px 10px;
  border-radius:8px;
}

.thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;margin-top:14px;
}
.thumb{
  border:1px solid #ddd;
  border-radius:10px;
  padding:6px;
  cursor:pointer;
}
.thumb.active{border-color:#d32f2f}

.spec-list li,
.feature-list li{margin-bottom:8px}

.spec-table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
}
.spec-table th,
.spec-table td{
  border:1px solid #e5e7eb;
  padding:10px;
  font-size:14px;
}

@media(max-width:900px){
  .detail-grid{grid-template-columns:1fr}
}
/* =========================================================
   ULTRA PRODUCT DETAIL (KENNEDY / PREMIUM)
========================================================= */

.u-prod-hero {
  background: linear-gradient(180deg,#0f172a,#020617);
  color:#fff;
  padding:120px 0 100px;
  position:relative;
}

.u-breadcrumb {
  font-size:13px;
  opacity:.8;
  margin-bottom:28px;
}
.u-breadcrumb a {color:#cbd5f5;text-decoration:none}
.u-breadcrumb .sep {margin:0 6px}

.u-hero-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:center;
}

.u-brand {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.u-brand-logo {height:34px}
.u-brand-pill {
  background:rgba(255,255,255,.1);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
}
.u-dot {
  width:6px;height:6px;
  background:var(--accent);
  border-radius:50%;
}

.u-eyebrow {
  letter-spacing:.12em;
  font-size:12px;
  opacity:.7;
}

.u-title {
  font-size:46px;
  line-height:1.15;
  margin:14px 0;
  font-weight:700;
}

.u-subtitle {
  max-width:640px;
  font-size:16px;
  line-height:1.7;
  color:#cbd5e1;
}

.u-trust {
  margin:32px 0;
  display:grid;
  gap:14px;
}
.u-trust-item {
  display:flex;
  gap:14px;
  font-size:14px;
}
.u-trust-item .k {
  width:110px;
  opacity:.6;
}

.u-hero-actions {
  display:flex;
  gap:14px;
  margin-top:32px;
}

.btn-primary {
  background:var(--accent);
  color:#fff;
  padding:14px 26px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
}
.btn-secondary {
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:14px 26px;
  border-radius:12px;
  text-decoration:none;
}

.u-note {
  margin-top:24px;
  font-size:13px;
  opacity:.75;
}
.badge-accent {
  background:var(--accent);
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  margin-right:8px;
}

.u-hero-card {
  background:linear-gradient(180deg,#111827,#020617);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.u-hero-preview img {
  width:100%;
  display:block;
}
.u-hero-card-bottom {
  padding:14px 18px;
  font-size:13px;
  background:#020617;
}

/* ================= INTRO ================= */

.u-prod-intro {
  padding:90px 0;
  background:#f8fafc;
}
.u-intro-box {
  max-width:880px;
  margin:auto;
  text-align:center;
}
.u-intro-box h2 {
  font-size:32px;
  margin-bottom:12px;
}
.u-apps {
  margin-top:24px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.chip {
  background:#e5e7eb;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
}

/* ================= MODELS ================= */

.u-models {
  padding:100px 0;
  background:#fff;
}
.u-section-head {
  text-align:center;
  margin-bottom:60px;
}
.u-model-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}
.u-model-card {
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  transition:.35s ease;
}
.u-model-card:hover {
  transform:translateY(-6px);
}
.u-model-thumb img {
  width:100%;
  display:block;
}
.u-model-body {
  padding:22px;
}
.u-model-top {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:6px;
}
.u-pill {
  background:rgba(0,0,0,.05);
  padding:4px 10px;
  border-radius:999px;
}
.u-cta-mini {
  margin-top:14px;
  display:inline-block;
  font-size:13px;
  color:var(--accent);
  font-weight:600;
}

/* ================= CTA ================= */

.u-spec {
  background:#020617;
  color:#fff;
  padding:80px 0;
}
.u-spec-cta {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:center;
}
.u-spec-cta h3 {
  font-size:28px;
}
/* ================= KOBE THEME ================= */
.kobe-hero {
  background: linear-gradient(135deg, #0b1f3a, #0e3b7c);
  color: #fff;
  padding: 100px 0;
}

.kobe-badge {
  background: #ffffff;
  color: #0b3c8a;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 20px;
}

.feature-card,
.range-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.range-card img {
  max-height: 160px;
  margin-bottom: 20px;
}

.tech-list li {
  margin-bottom: 12px;
  font-weight: 500;
}

.enterprise-cta {
  background: #0b1f3a;
  color: #ffffff;
  padding: 80px 0;
}