/*
Theme Name: Pompa Air
Theme URI: https://jasatukangservicepompaair.com
Author: Baturetno Studio
Author URI: https://baturetnostudio.com
Description: Theme WordPress untuk jasa service pompa air, responsif dan ringan.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pompa-air
Tags: service, business, responsive, custom-theme
*/

/* ===== CSS RESET MODERN ===== */

/* Box sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
	font-family: "Roboto", sans-serif;
}

/* Smooth text rendering */
html:focus-within {
  scroll-behavior: smooth;
}

/* Body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
	font-family: "Roboto", sans-serif;
}

/* Remove list styles */
ul, ol {
  list-style: none;
	font-family: "Roboto", sans-serif;
}

/* Remove default link styles */
a {
  text-decoration: none;
  color: inherit;
	font-family: "Roboto", sans-serif;
}

/* Media responsive */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Form elements inherit font */
input, button, textarea, select {
  font: inherit;
	font-family: "Roboto", sans-serif;
}

/* Remove button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
	font-family: "Roboto", sans-serif;
}

/* Heading reset */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
font-family: "Exo", sans-serif;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Paragraph spacing control */
p {
  margin: 0;
	font-family: "Roboto", sans-serif;
	margin-bottom: 10px;
}


/* CSS */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

.container{
  width:90%;
  max-width:1100px;
  margin:auto;
}

/* NAVBAR */
.navbar{
  background:white;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:1000;
}

.nav-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
}

.logo{
  font-weight:bold;
  color:#0a7db8;
  font-size:20px;
}

nav{
  display:flex;
  gap:25px;
}

nav a{
  text-decoration:none;
  color:#333;
	font-family: "Exo", sans-serif;
	font-weight: bold;
}

.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
}

/* SLIDER */
.slider{
  position:relative;
  overflow:hidden;
}

.slide{
  display:none;
  background:#2ea3db;
  color:white;
  padding:70px 0;
  animation:fade 0.8s ease;
}

.slide.active{
  display:block;
}

@keyframes fade{
  from{opacity:0}
  to{opacity:1}
}

.prev, .next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.3);
  color:white;
  border:none;
  font-size:28px;
  padding:8px 14px;
  cursor:pointer;
  border-radius:5px;
}

.prev{ left:15px; }
.next{ right:15px; }

/* HERO */
.hero-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.hero img{
  width:220px;
}

.phone{
  margin-top:20px;
  font-size:20px;
}

.phone-hero {
	display: block;
	padding: 5px;
	background: #fff;
	border-radius: 10px;
	color: #0a3d79;
	margin-top: 15px;
	width: 200px;
	text-align: center;
}

.phone-hero > img {
	display: inline;
	margin-right: 8px;
	vertical-align: middle;
	width: 100%;
	max-width: 38px;
}

/* SECTION */
.section{
  padding:60px 0;
  text-align:center;
}

.gray{
  background:#f5f5f5;
}

.feature-grid{
  display:flex;
  gap:20px;
  margin-top:30px;
}

.feature{
  flex:1;
  padding:25px;
  border:1px solid #eee;
  border-radius:8px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  margin-top:30px;
}

.card{
  background:#fae7e7;
  padding:25px;
  border-radius:8px;
  border:1px solid #eee;
}

.feature {
	background: #e7f0fa;
}

.feature-grid img {
	width: 100% !important;
	max-width: 50px !important;
	height: auto !important;
	margin-bottom: 10px;
}

/* CTA */
.cta{
  padding:50px 0;
}

.cta-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.whatsapp{
  background:#25d366;
  color:white;
  padding:15px 25px;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
}

/* FOOTER */
footer{
  background:#111;
  color:white;
  padding:40px 0;
}

.footer-flex{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.copyright{
  text-align:center;
  margin-top:20px;
  color:#bbb;
}

/* MOBILE */
@media(max-width:768px){

  nav{
    position:absolute;
    top:60px;
    right:0;
    background:white;
    width:220px;
    flex-direction:column;
    padding:20px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    display:none;
  }

  nav.active{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }

  .hero-flex,
  .feature-grid,
  .cta-flex,
  .footer-flex{
    flex-direction:column;
    text-align:center;
  }

  .hero img{
    width:150px;
  }
	
	.icon-putra-teknik {
		display: block;
		margin: 0 auto;
	}
	
	.phone-hero {
		margin-left: auto;
		margin-right: auto;
	}
}