@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Customer storefront theme — load after style.css */
:root {
   --brown: #0a7ea4;
   --red: #086280;
   --orange: #e8a317;
   --black: #12263a;
   --white: #fff;
   --light-color: #5b6b7c;
   --light-white: #b7c4d0;
   --light-bg: #eef3f7;
   --border: 1px solid #d7e2ec;
   --box-shadow: 0 10px 28px rgba(18, 38, 58, 0.08);
   --store-primary: #0a7ea4;
   --store-primary-dark: #086280;
   --store-accent: #e8a317;
   --store-ink: #12263a;
   --store-muted: #5b6b7c;
   --store-line: #d7e2ec;
   --store-radius: 1.1rem;
}

body {
   font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
   background:
      radial-gradient(900px 400px at 0% -5%, rgba(10, 126, 164, 0.1), transparent 55%),
      linear-gradient(180deg, #eef3f7 0%, #e8eef4 100%);
   color: var(--store-ink);
}

/* ========== Header ========== */
.header {
   background: rgba(255, 255, 255, 0.9) !important;
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom: 1px solid rgba(215, 226, 236, 0.95);
   box-shadow: 0 8px 24px rgba(18, 38, 58, 0.04) !important;
}

.header .flex {
   max-width: 1240px;
   padding: 1.1rem 2rem;
}

.header .flex .logo {
   font-size: 1.85rem !important;
   font-weight: 800 !important;
   letter-spacing: -0.03em;
   color: var(--store-ink) !important;
}

.header .flex .logo span {
   color: var(--store-primary);
}

.header .flex .navbar ul {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   float: none;
   margin: 0;
   padding: 0;
}

.header .flex .navbar ul li {
   float: none;
}

.header .flex .navbar ul li a {
   font-size: 1.4rem !important;
   font-weight: 600;
   padding: 0.7rem 1.1rem !important;
   border-radius: 999px !important;
   color: var(--store-muted) !important;
   text-transform: none !important;
}

.header .flex .navbar ul li a:hover,
.header .flex .navbar ul li a.nav-active {
   background: var(--store-primary) !important;
   color: #fff !important;
}

.header .flex .icons > * {
   font-size: 1.7rem !important;
   width: 3.8rem;
   height: 3.8rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: #f5f8fb;
   border: 1px solid var(--store-line);
   margin-left: 0.45rem !important;
   color: var(--store-ink) !important;
   text-decoration: none;
}

.header .flex .icons > *:hover {
   color: var(--store-primary) !important;
   background: rgba(10, 126, 164, 0.1);
   border-color: transparent;
}

.header .flex .icons a span {
   font-size: 1.2rem !important;
   font-weight: 700;
}

.header .flex .account-box {
   border: 1px solid var(--store-line) !important;
   border-radius: 1rem !important;
   box-shadow: 0 18px 40px rgba(18, 38, 58, 0.12) !important;
   width: 28rem !important;
}

.btn,
.delete-btn,
.option-btn {
   border-radius: 999px !important;
   font-weight: 700;
   text-transform: none !important;
}

.btn {
   background: linear-gradient(135deg, var(--store-primary), var(--store-primary-dark)) !important;
}

.option-btn {
   background: linear-gradient(135deg, #f0b33a, #d99212) !important;
}

/* ========== Hero ========== */
.home {
   position: relative;
   min-height: min(88vh, 720px);
   background:
      linear-gradient(120deg, rgba(8, 40, 58, 0.78) 0%, rgba(10, 98, 128, 0.55) 45%, rgba(8, 40, 58, 0.45) 100%),
      url(../images/background-bateryaki.jpeg) center / cover no-repeat;
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
   opacity: 1 !important;
   overflow: hidden;
   padding: 0 !important;
}

.home::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
      radial-gradient(600px 280px at 85% 20%, rgba(232, 163, 23, 0.22), transparent 60%),
      radial-gradient(500px 260px at 10% 80%, rgba(10, 126, 164, 0.25), transparent 55%);
   pointer-events: none;
   animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
   from { opacity: 0.75; }
   to { opacity: 1; }
}

.home .content {
   position: relative;
   z-index: 1;
   text-align: left !important;
   max-width: 1240px;
   width: 100%;
   margin: 0 auto;
   padding: 6rem 2.4rem 5rem;
   animation: heroRise 0.7s ease both;
}

@keyframes heroRise {
   from { opacity: 0; transform: translateY(24px); }
   to { opacity: 1; transform: translateY(0); }
}

.home .content .brand-mark {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.92);
   margin-bottom: 1.2rem;
}

.home .content .brand-mark i {
   width: 2.4rem;
   height: 2.4rem;
   border-radius: 0.7rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.14);
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.home .content h1 {
   font-size: clamp(3.2rem, 6vw, 5.6rem) !important;
   font-weight: 800;
   letter-spacing: -0.04em;
   line-height: 1.05;
   color: #fff !important;
   text-transform: none !important;
   max-width: 14ch;
   margin: 0 0 1rem;
   text-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.home .content .hero-lead {
   font-size: clamp(1.45rem, 2.2vw, 1.85rem);
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.9);
   max-width: 38ch;
   margin: 0 0 2rem;
   font-weight: 500;
}

.home .content .hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 0.9rem;
   align-items: center;
}

.home .content .hero-cta .btn {
   margin-top: 0 !important;
   padding: 1.1rem 2.2rem !important;
   font-size: 1.45rem !important;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.home .content .hero-cta .btn-ghost {
   background: rgba(255, 255, 255, 0.12) !important;
   border: 1px solid rgba(255, 255, 255, 0.28) !important;
   color: #fff !important;
   backdrop-filter: blur(6px);
}

.home .content .hero-cta .btn-ghost:hover {
   background: rgba(255, 255, 255, 0.22) !important;
}

.home .content h2 { display: none; }

/* ========== Promo banner ========== */
.promo-banner {
   max-width: 1240px;
   margin: 2rem auto 0;
   border-radius: var(--store-radius);
   overflow: hidden;
   box-shadow: var(--box-shadow);
}

/* ========== Terlaris ========== */
.reco-section {
   max-width: 1240px;
   margin: 0 auto;
   padding: 3.5rem 2rem !important;
}

.reco-header {
   margin-bottom: 1.5rem;
}

.reco-title {
   font-size: 2.4rem !important;
   letter-spacing: -0.03em;
   color: var(--store-ink) !important;
}

.reco-title i { color: var(--store-accent) !important; }

.reco-link {
   border-radius: 999px !important;
   border-color: var(--store-primary) !important;
   color: var(--store-primary) !important;
}

.reco-link:hover {
   background: var(--store-primary) !important;
}

.reco-nav {
   background: #fff !important;
   border: 1px solid var(--store-line) !important;
   box-shadow: var(--box-shadow);
   color: var(--store-ink) !important;
}

/* ========== Shop ========== */
.shop-section {
   max-width: 1240px !important;
   padding: 2.5rem 2rem 4rem !important;
}

.shop-head { text-align: left !important; }

.shop-title {
   font-size: clamp(2.4rem, 4vw, 3.2rem) !important;
   letter-spacing: -0.03em;
   color: var(--store-ink) !important;
}

.shop-sub { color: var(--store-muted) !important; }

.shop-count {
   background: rgba(10, 126, 164, 0.1);
   color: var(--store-primary) !important;
   padding: 0.45rem 1rem;
   border-radius: 999px;
}

.shop-filter {
   background: linear-gradient(135deg, #0c6f91, #123447) !important;
   border-radius: calc(var(--store-radius) + 0.15rem) !important;
   padding: 1.5rem !important;
   box-shadow: var(--box-shadow);
}

.shop-filter-search input,
.shop-filter-row input,
.shop-filter-row select {
   border-radius: 0.8rem !important;
   font-family: inherit;
}

.shop-filter-btn,
.shop-filter-reset {
   border-radius: 999px !important;
   font-weight: 700;
}

.shop-filter-btn {
   background: linear-gradient(135deg, var(--store-accent), #d99212) !important;
   color: #fff !important;
}

.merk-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 0.55rem;
   margin-top: 1rem;
}

.merk-chip {
   padding: 0.55rem 1.1rem;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.22);
   text-decoration: none;
   color: rgba(255, 255, 255, 0.9);
   background: rgba(255, 255, 255, 0.08);
   font-size: 1.25rem;
   font-weight: 600;
   transition: background 0.2s, color 0.2s, transform 0.2s;
}

.merk-chip:hover {
   background: rgba(255, 255, 255, 0.18);
   color: #fff;
   transform: translateY(-1px);
}

.merk-chip.is-active {
   background: #fff;
   color: var(--store-ink);
   border-color: #fff;
}

.shop-card {
   border: 1px solid var(--store-line) !important;
   border-radius: var(--store-radius) !important;
   box-shadow: 0 2px 10px rgba(18, 38, 58, 0.05) !important;
   overflow: hidden;
   transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.shop-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 16px 36px rgba(18, 38, 58, 0.12) !important;
}

.shop-badge {
   background: linear-gradient(135deg, var(--store-accent), #d99212) !important;
   border-radius: 999px !important;
   font-weight: 700;
}

.shop-img {
   background: linear-gradient(180deg, #f3f8fb, #e8f1f6) !important;
}

.shop-img-brand {
   color: var(--store-primary) !important;
   font-weight: 800;
   letter-spacing: 0.04em;
}

.shop-name {
   color: var(--store-ink) !important;
   font-weight: 700;
}

.shop-name:hover { color: var(--store-primary) !important; }

.shop-price-now {
   color: var(--store-primary) !important;
   font-weight: 800;
}

.shop-cart-btn {
   border-radius: 999px !important;
   background: linear-gradient(135deg, var(--store-primary), var(--store-primary-dark)) !important;
   font-weight: 700;
}

.shop-cart-btn:hover:not(:disabled) {
   background: var(--store-ink) !important;
}

.shop-pagination a {
   border-radius: 999px !important;
   border: 1px solid var(--store-line);
   font-weight: 700;
}

.shop-pagination a.active {
   background: var(--store-primary) !important;
   border-color: var(--store-primary) !important;
}

/* ========== Services ========== */
.services-section {
   background: transparent !important;
   padding: 4rem 2rem !important;
   max-width: 1240px;
   margin: 0 auto;
}

.services-section .title {
   font-size: clamp(2.4rem, 4vw, 3rem) !important;
   letter-spacing: -0.03em;
   color: var(--store-ink) !important;
}

.services-section .title:after {
   background: linear-gradient(90deg, var(--store-primary), var(--store-accent)) !important;
}

.services-grid {
   gap: 1.4rem !important;
}

.service-card {
   background: #fff !important;
   border: 1px solid var(--store-line) !important;
   border-radius: var(--store-radius) !important;
   box-shadow: 0 2px 10px rgba(18, 38, 58, 0.04);
   padding: 2.2rem 1.8rem !important;
}

.service-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--box-shadow) !important;
}

.service-card i {
   color: var(--store-primary) !important;
   width: 4.4rem;
   height: 4.4rem;
   border-radius: 1.1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(10, 126, 164, 0.1);
   font-size: 2rem !important;
   margin-bottom: 1.2rem !important;
}

.service-card h4 {
   font-size: 1.55rem !important;
   letter-spacing: -0.02em;
}

.service-card p {
   font-size: 1.3rem !important;
   color: var(--store-muted) !important;
}

/* ========== About ========== */
.about {
   background: transparent !important;
   padding: 3rem 2rem 4rem !important;
}

.about .content {
   max-width: 900px !important;
   border: 1px solid var(--store-line) !important;
   border-radius: calc(var(--store-radius) + 0.2rem) !important;
   box-shadow: var(--box-shadow) !important;
   padding: 3rem 2.4rem !important;
   text-align: left !important;
}

.about .content h3 {
   font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
   letter-spacing: -0.03em;
   color: var(--store-ink) !important;
   display: block !important;
   text-align: left;
}

.about .content h3:after {
   left: 0 !important;
   transform: none !important;
   background: linear-gradient(90deg, var(--store-primary), var(--store-accent)) !important;
}

.about .content p {
   text-align: left;
   color: var(--store-muted);
   font-size: 1.45rem !important;
}

.about .button-group {
   justify-content: flex-start !important;
}

.whatsapp-btn {
   border-radius: 999px !important;
   font-weight: 700;
}

/* ========== Contact strip ========== */
.home-contact {
   background: linear-gradient(135deg, #0c6f91 0%, #123447 100%) !important;
   padding: 4rem 2rem !important;
   position: relative;
   overflow: hidden;
}

.home-contact::before {
   content: '';
   position: absolute;
   width: 20rem;
   height: 20rem;
   border-radius: 50%;
   right: -6rem;
   top: -8rem;
   background: rgba(255, 255, 255, 0.06);
}

.home-contact .content {
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
   position: relative;
   z-index: 1;
}

.home-contact .content h3 {
   letter-spacing: -0.03em;
}

/* ========== Footer polish ========== */
.footer {
   background: #0f2433 !important;
}

.footer-links h3::after,
.footer-contact h3::after,
.footer-map h3::after {
   background: var(--store-primary) !important;
}

.footer-contact p i,
.footer-links ul li a:hover {
   color: var(--store-primary) !important;
}

.btn-map,
.btn-secondary {
   border-radius: 999px !important;
   background: var(--store-primary) !important;
}

@media (max-width: 768px) {
   .home {
      min-height: 70vh;
      align-items: flex-end;
   }

   .home .content {
      padding: 5rem 1.5rem 3.5rem;
      text-align: left !important;
   }

   .home .content h1 {
      max-width: none;
   }

   .shop-head,
   .about .content,
   .about .content h3,
   .about .content p {
      text-align: left !important;
   }

   .header .flex .logo {
      font-size: 1.5rem !important;
   }
}