/* OTWIT.ID UI polish patch
   Letakkan setelah style.css dan ecommerce.css:
   <link rel="stylesheet" href="style-fix.css?v=1">
*/
:root{
  --otw-bg:#050816;
  --otw-surface:#0f172a;
  --otw-surface-soft:rgba(255,255,255,.045);
  --otw-border:rgba(147,197,253,.18);
  --otw-text:#f8fafc;
  --otw-muted:#94a3b8;
  --otw-primary:#3b82f6;
  --otw-primary-dark:#2563eb;
  --otw-primary-soft:rgba(59,130,246,.14);
  --otw-accent:#facc15;
}

body{background:var(--otw-bg);color:var(--otw-text);}

.navbar{
  background:rgba(5,8,22,.86);
  border-bottom:1px solid rgba(147,197,253,.12);
}
.nav-links{gap:18px;align-items:center;}
.nav-links a{color:#cbd5e1;font-weight:600;}
.nav-links a:hover{color:#bfdbfe;}
.nav-links .nav-cta,
.nav-cta{
  background:linear-gradient(135deg,var(--otw-primary),var(--otw-primary-dark));
  color:#fff!important;
  border:1px solid rgba(191,219,254,.28);
  box-shadow:0 12px 32px rgba(37,99,235,.28);
}

.btn-primary,
.product-actions .btn-primary,
.detail-actions .btn-primary{
  background:linear-gradient(135deg,var(--otw-primary),var(--otw-primary-dark));
  color:#fff!important;
  border:1px solid rgba(191,219,254,.22);
  box-shadow:0 16px 40px rgba(37,99,235,.26);
}
.btn-primary:hover,
.product-actions .btn-primary:hover,
.detail-actions .btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
}

.btn-secondary,
.product-actions .btn-secondary,
.detail-actions .btn-secondary{
  color:#dbeafe!important;
  background:rgba(15,23,42,.58);
  border:1px solid rgba(147,197,253,.24);
  box-shadow:none;
}
.btn-secondary:hover,
.product-actions .btn-secondary:hover,
.detail-actions .btn-secondary:hover{
  background:rgba(59,130,246,.12);
  border-color:rgba(147,197,253,.42);
}

.btn-google-review,
.btn-copy{
  background:var(--otw-accent);
  color:#0f172a!important;
  border:0;
}

.card,
.about-card,
.faq-card,
.article-card,
.product-card,
.checkout-card,
.status-card,
.shop-note-card,
.payment-gateway-note,
.article-content,
.order-form{
  background:var(--otw-surface-soft);
  border-color:rgba(147,197,253,.14);
}
.card:hover,
.article-card:hover,
.product-card:hover{
  border-color:rgba(147,197,253,.42);
  background:rgba(59,130,246,.075);
}

.hero-desc,
.section-title p,
.card p,
.article-card p,
.product-card p,
.article-content p,
.order-form label,
.input-hint,
.optional-label,
footer p{color:var(--otw-muted);}

.product-price{color:#bfdbfe;letter-spacing:-.3px;}
.product-badge,
.product-category-pill,
.blog-category,
.keyword-pills span{
  color:#dbeafe;
  background:rgba(59,130,246,.14);
  border:1px solid rgba(147,197,253,.18);
}

input,select,textarea{
  background:#08111f!important;
  color:#f8fafc!important;
  border-color:rgba(147,197,253,.18)!important;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(59,130,246,.32);
  border-color:rgba(147,197,253,.42)!important;
}

footer a{color:#bfdbfe;}
footer a:hover{color:#fff;}

@media(max-width:720px){
  .nav-links{
    background:#0b1227;
    border:1px solid rgba(147,197,253,.16);
    box-shadow:0 20px 60px rgba(0,0,0,.35);
  }
  .nav-links a,
  .nav-links .nav-cta{
    justify-content:center;
    text-align:center;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .product-actions .btn-primary,
  .product-actions .btn-secondary,
  .detail-actions .btn-primary,
  .detail-actions .btn-secondary{
    width:100%;
    text-align:center;
  }
}