/*
Theme Name: MBL Trading
Author: Creatif Desain
Author URI: https://creatif.biz.id
Description: Custom theme for mbltrading.id
Version: 1.0
*/

/* =========================
   GLOBAL RESET & BASE STYLE
========================= */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;

  color: #444;
  font-size: 18px;
  line-height: 1.7;
  background: #fff;
}
p, a {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;}
a {
  color: #002F5F;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: #002F5F;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }

p {
  margin-top: 0;
  margin-bottom: 1.2em;
  color: #333;
}

/* =========================
   LIST
========================= */
ul, ol {
  margin: 1em 0 1.2em 2em;
  padding: 0;
}
ul li, ol li {
  margin-bottom: 0.4em;
}
li > ul, li > ol {
  margin-top: 0.4em;
}

/* =========================
   IMAGES & MEDIA
========================= */
img {
  max-width: 100%;
  height: auto;
  
}
figure {
  margin: 1.5em 0;
}
figcaption {
  font-size: 0.9em;
  color: #666;
  text-align: center;
  margin-top: 0.3em;
}

/* =========================
   TABLES
========================= */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: left;
}
th {
  background-color: #002F5F;
  color: #fff;
}
tr:nth-child(even) {
  background: #f8f8f8;
}

/* =========================
   BLOCKQUOTE
========================= */
blockquote {
  border-left: 4px solid #D4AF37;
  margin: 1.5em 0;
  padding: 1em 1.5em;
  background: #f9f9f9;
  font-style: italic;
  color: #555;
}
blockquote p:last-child {
  margin-bottom: 0;
}

/* =========================
   BUTTONS
========================= */
button,
input[type="submit"],
input[type="button"],
a.button {
  display: inline-block;
  background: #D4AF37;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 22px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

button:hover,
input[type="submit"]:hover,
a.button:hover {
  background: #c29b2f;
}

/* =========================
   FORMS
========================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  margin-bottom: 1em;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* =========================
   ALIGNMENT CLASSES (WP default)
========================= */
.alignleft {
  float: left;
  margin: 0 20px 10px 0;
}
.alignright {
  float: right;
  margin: 0 0 10px 20px;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   CAPTIONS & GALLERIES
========================= */
.wp-caption {
  text-align: center;
  margin: 1em auto;
  max-width: 100%;
}
.wp-caption-text {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gallery-item {
  flex: 1 0 calc(33.333% - 10px);
  text-align: center;
}
.gallery-item img {
  border-radius: 6px;
}

/* =========================
   CODE & PRE
========================= */
pre, code {
  background: #f4f4f4;
  padding: 5px 8px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 0.95em;
  color: #222;
}
pre {
  overflow-x: auto;
  padding: 10px;
}

/* =========================
   PAGINATION
========================= */
.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 40px 0;
}
.pagination a,
.pagination span {
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #002F5F;
}
.pagination a:hover {
  background: #002F5F;
  color: #fff;
}

/* =========================
   FOOTER
========================= */
footer {
  background: #002F5F;
  color: #fff;
  text-align: center;
  padding: 30px 20px;
  font-size: 0.9em;
}



/* ========== MENU WORDPRESS CUSTOM ========== */

/* Hilangkan bullet & padding bawaan ul */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;              /* sejajarkan horizontal */
  justify-content: right;    /* posisikan di tengah */
  align-items: center;        /* sejajarkan vertikal */
  gap: 30px;   
padding:0;  /* jarak antar menu */
}

/* Buat li inline (sebenarnya flex sudah cukup, ini tambahan aman) */
.nav-menu li {
  display: inline-block;
}

/* Style link menu */
.nav-menu a {
	font-size:15px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
  padding: 5px 0;
  text-transform:uppercase
}

.nav-menu a:hover {
 
}

/* Jika kamu ingin menu rata kanan */
.menu {
  flex: 2;
  text-align: right;
}

/* Jika ingin di tengah (seperti sebelumnya) */
.menu.center {
  flex: 2;
  text-align: center;
}


.nav-menu a {
  position: relative;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  
  transition: width 0.3s;
}
.nav-menu a:hover::after {
  width: 100%;
}



/* Background bagian bawah section */
.section.service {
  position: relative;
  padding-bottom: 120px;
}

.section.service::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;  /* area bg navy dari tengah ke bawah */
 
  z-index: -1;
}

.card2 {
      background:#fff;
      border:1px solid #eee;
      border-radius:10px;
      
      box-shadow:0 2px 5px rgba(0,0,0,0.05);
     
    }
   


/* Card base */
.card {
  background: #fff;

  border-radius: 5px;
  overflow: hidden; /* ✅ supaya gambar full bleed */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: 0.3s ease;
   text-align:center;
}

 .card h3 {color:#002F5F;margin-bottom:10px;}
 .card p {font-size:0.95em;line-height:1.6;}

/* Image container */
.card-img {
  width: 100%;
  height: 230px; /* Sesuaikan tinggi gambarnya */
  overflow: hidden;
}

/* Gambar */
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

/* Hover effect */
.card:hover .card-img img {
  transform: scale(1.12);
}

/* Content inside card */
.card-content {
  padding: 0 20px 20px 20px; /* ✅ padding hanya untuk teks */
}


  
  .hero {height:550px !important;padding-top:180px !important }
  .hero h1 {font-size:2.5em !important;}
  .about {
 

padding:140px 0 20px 0 !important;

}

.post {
	
	

padding:140px 0 20px 0 !important;


}


}

 
    * {box-sizing:border-box;}

    /* HEADER */
    header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 20;
  
  
   
background: linear-gradient(135deg, #020a07, #0a302e);
      transition: background 0.3s;
	  border-bottom: 1px solid #dfdbdb99;
    }
    .container {max-width:1200px;margin:auto;padding:20px;}
    nav {display:flex;justify-content:space-between;align-items:center;}
    .logo {flex:1;text-align:left;font-weight:600;color:#fff;}
	.logo img {max-width:250px;height:auto}
	
   

    /* HERO SECTION */
    .hero {
      background:url('img/hero2.jpg') center/cover no-repeat;
      color:#fff;
	 
      text-align:center;
      padding:200px 20px 170px; /* diperbesar agar mentok atas */
      position:relative;
    }
    .hero::before {
      content:"";
      position:absolute;
      top:0;left:0;right:0;bottom:0;
      background:rgba(0,0,0,0.3);
    }
    .hero h1, .hero p {
      position:relative;
      z-index:2; 
    }
    .hero h1 {color:#fff;font-size:2.8em;margin-bottom:15px;}
    .hero p {color:#fff;font-size:1.8em;}

    /* SECTION */
    .section {padding:60px 20px;position:relative;}
    .section h2 {
      text-align:center;
      color:#002F5F;
      margin-bottom:40px;
      position:relative;
  
    }
    .section h2::after {
      content:"";
      width:60px;
      height:3px;
     
      display:block;
      margin:10px auto;
    }

    .services {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:20px;
      max-width:1200px;
      margin:auto;
    }
    

  

    /* FOOTER */
    footer {
      background:#002F5F;
      color:#fff;
      text-align:center;
      padding:30px 20px;
      font-size:0.9em;
    }

    /* NAVBAR SCROLL EFFECT */
    window-scroll header {background:#002F5F;}
	
	
	.btn-gold {margin-top:-10px;
  background: #bda637;            /* emas terang elegan */
  color: #f0f0f0 !important;                 /* navy, biar kontras & mewah */
  padding: 5px 15px;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  transition: 0.3s ease;
  border: none;
}

.btn-gold2:hover {
  background: #e6c64c;            /* gold lebih gelap saat hover */
  color: #002F5F !important; 
 
}




 
    
    .visi-misi {background:#002F5F;color:#fff;padding:60px 20px;}
    .visi-misi h3 {color:#D4AF37;}
    .visi-misi-container {display:flex;flex-wrap:wrap;gap:40px;max-width:1200px;margin:auto;}
    .visi-misi div {flex:1;min-width:300px;}
	.visi-misi p {font-size:16px}
	.visi-misi ul li {font-size:16px} 
	
	
    .team2 {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;text-align:center;}
	
	.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
}

/* Responsive untuk tablet */
@media screen and (max-width: 768px) {
  .team {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive untuk mobile */
@media screen and (max-width: 480px) {
  .team {
    grid-template-columns: 1fr;
  }
}
	
    .team-member {background:#f3f3f3;border-radius:10px;padding:20px;box-shadow:0 2px 5px rgba(0,0,0,0.05);}
    .team-member h4 {color:#002F5F;margin:10px 0 5px;}
	


@media screen and (max-width: 768px) {
 .cta-footer-wrapper {	
   padding: 20px 20px 80px 20px !important; 
  }
  .cta-footer-container {
	padding:20px 20px 40px 20px !important; 
  }
	  
  
}	
	

	
	.cta-footer-wrapper {
  width: 100%;
 
  padding: 20px 0 80px 0;
  color: #fff;
  text-align: center;
}

.cta-footer-container {
  max-width: 1200px;
  margin: 0 auto;
 
   border-radius:25px;
   padding:20px 0 40px 0;
    background: #0A2A66;
  
  border-radius: 10px;
 box-shadow: 0 0 6px rgb(0 0 0 / 25%);
}

.cta-footer-container h2 {
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: 700;
  color:#fff
}

.cta-footer-container p {
  font-size: 18px;
  margin-bottom: 30px;
color:#fff
}

.cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: .3s;
}

.wa-btn {
  background: #25D366;
  color: #fff;
}

.wa-btn:hover {
  background: #1ea955;
  color: #fff;
}

.email-btn {
  background: #0a527c;
    color: #ffffff;
}



.email-btn:hover {
  background: #072b40;
    color: #ffffff;
}


 .body-checkout .ui.text.container {max-width:600px !important}
 
 .produk-dibeli tbody td {padding: 14px 22px !important; }
 
 .produk-dibeli .ui.grid>[class*="four wide"].column
 {
    width: 100% !important;
}
 .produk-dibeli img {width:100% !important}
 
 .sejoli.register img.image.icon {margin:10px auto !important}
 .sejoli.login img.image.icon {margin:10px auto !important}