:root{
  --green: #3fae29;
  --green-dark: #2d8a1c;
  --green-light: #eaf7e6;
  --text-dark: #26302a;
  --text-gray: #6b7873;
  --radius: 6px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',Arial,Helvetica,sans-serif;color:var(--text-dark);background:#fff;line-height:1.5;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* HEADER */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 6%;border-bottom:1px solid #eee;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo img{width:42px;height:42px;object-fit:contain;}
.logo-text .main{font-weight:700;color:var(--green);font-size:17px;}
.logo-text .sub{font-size:10px;color:var(--text-gray);letter-spacing:.5px;}
.site-header nav ul{display:flex;gap:26px;}
.site-header nav a{font-size:13px;font-weight:600;transition:.2s;}
.site-header nav a:hover{color:var(--green);}

/* HERO / SLIDER */
.hero{
  .hero{
  position:relative;min-height:420px;display:flex;align-items:center;padding:0 6%;
  overflow:hidden;
  }
}

.hero-slider{
  position:absolute;inset:0;z-index:0;
}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s ease-in-out;
}
.hero-slide.active{opacity:1;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(15,20,15,.82) 0%, rgba(15,20,15,.4) 80%);
  z-index:1;
}

.hero-content{max-width:520px;color:#fff;padding:60px 0;position:relative;z-index:2;}
.hero-content h1{font-size:32px;font-weight:700;margin-bottom:14px;}
.hero-content p{font-size:15px;color:#e6e6e6;margin-bottom:20px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;
  padding:12px 22px;border-radius:30px;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:.2s;
}
.btn:hover{background:var(--green-dark);}
.btn-outline{background:transparent;border:1.5px solid var(--green);color:var(--green);}

/* SECTION TITLE */
.section{padding:50px 6%;max-width:1180px;margin:0 auto;}
.section h2{color:var(--green);font-size:22px;font-weight:700;text-align:center;margin-bottom:28px;letter-spacing:.5px;}

/* GRID CARD (rumah / promo / galeri) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.card{border:1px solid #eee;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);display:flex;flex-direction:column;transition:.25s;}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.09);}
.card-title{background:var(--green);color:#fff;font-size:12.5px;font-weight:700;text-align:center;padding:8px;}
.card-img{position:relative;height:150px;overflow:hidden;background:#eee;}
.card-img img{width:100%;height:100%;object-fit:cover;}
.ribbon{position:absolute;top:0;left:0;background:var(--text-dark);color:#fff;font-size:9px;font-weight:700;padding:4px 10px;border-bottom-right-radius:8px;}
.ribbon.sold{background:#c0392b;}
.card-body{padding:14px 16px 18px;flex:1;display:flex;flex-direction:column;}
.card-body .spec{font-size:12px;color:var(--text-gray);margin-bottom:4px;}
.card-body .harga{font-size:14px;font-weight:700;color:var(--green-dark);margin:6px 0;}
.card-body .more{margin-top:auto;font-size:12px;font-weight:700;color:var(--green);}

/* ABOUT */
.about-text{max-width:800px;margin:0 auto;text-align:left;color:var(--text-gray);font-size:13.5px;}
.about-text p{margin-bottom:14px;}

/* CONTACT FORM */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.form-group input, .form-group textarea{
  width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:13px;font-family:inherit;
}
.alert{padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:16px;}
.alert-success{background:var(--green-light);color:var(--green-dark);}
.alert-error{background:#fdeaea;color:#c0392b;}

/* CTA */
.cta{background:var(--green-light);text-align:center;padding:44px 6%;}
.cta h3{font-size:20px;font-weight:700;margin-bottom:14px;}

/* FOOTER */
.site-footer{text-align:center;padding:18px 6%;font-size:12px;color:var(--text-gray);border-top:1px solid #eee;}

@media(max-width:900px){
  .site-header nav ul{display:none;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .contact-wrap{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr;}
}

/* ============ ADMIN PANEL (light theme, matching login page) ============ */
.admin-body{background:#f4f8f4;min-height:100vh;font-family:'Segoe UI',Arial,sans-serif;}
.admin-wrap{display:flex;min-height:100vh;}

.admin-sidebar{
  width:230px;background:#fff;color:var(--text-dark);padding:22px 0;
  box-shadow:2px 0 12px rgba(0,0,0,.05);
}
.admin-sidebar .brand{
  padding:0 22px 18px;font-weight:800;font-size:17px;color:var(--green-dark);
  border-bottom:1px solid #eee;margin-bottom:14px;
}
.admin-sidebar .brand small{color:var(--text-gray);}
.admin-sidebar a{
  display:flex;align-items:center;gap:10px;
  margin:2px 12px;padding:11px 14px;border-radius:8px;
  color:var(--text-gray);font-size:13px;font-weight:600;
  transition:.2s;
}
.admin-sidebar a svg{width:17px;height:17px;flex-shrink:0;stroke:var(--text-gray);transition:.2s;}
.admin-sidebar a:hover{background:var(--green-light);color:var(--green-dark);}
.admin-sidebar a:hover svg{stroke:var(--green-dark);}
.admin-sidebar a.active{background:var(--green);color:#fff;box-shadow:0 4px 10px rgba(63,174,41,.25);}
.admin-sidebar a.active svg{stroke:#fff;}

.admin-content{flex:1;padding:28px 32px;}
.admin-topbar{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;
  background:#fff;padding:16px 22px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.admin-topbar h1{font-size:19px;color:var(--text-dark);}
.admin-topbar span{font-size:13px;color:var(--text-gray);}
.admin-card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin-bottom:20px;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;}
.stat-box{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05);border-left:4px solid var(--green);}
.stat-box .num{font-size:28px;font-weight:800;color:var(--green-dark);}
.stat-box .label{font-size:12px;color:var(--text-gray);margin-top:2px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
table th, table td{padding:12px 14px;border-bottom:1px solid #f0f0f0;text-align:left;}
table th{background:var(--green-light);color:var(--green-dark);font-weight:700;}
table tr:hover td{background:#fafcfa;}
.btn-sm{padding:7px 14px;font-size:11px;border-radius:6px;display:inline-block;font-weight:700;transition:.2s;}
.btn-edit{background:#e0a800;color:#fff;}
.btn-edit:hover{background:#c49200;}
.btn-delete{background:#c0392b;color:#fff;border:none;cursor:pointer;}
.btn-delete:hover{background:#a53125;}
.btn-add{background:var(--green);color:#fff;padding:10px 18px;border-radius:8px;}
.btn-add:hover{background:var(--green-dark);}
.login-box{max-width:360px;margin:80px auto;background:#fff;padding:30px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);}
.login-box h2{text-align:center;margin-bottom:20px;color:var(--green-dark);}
.mySwiper {
  width: 100%;
  height: 500px;
}
.mySwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-button{
    display:flex;
    gap:10px;
    margin-top:20px;
}

.btn-detail{
    flex:1;
    background:#28a745;
    color:#fff;
    text-align:center;
    padding:12px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn-detail:hover{
    background:#1e7e34;
}

.btn-wa{
    flex:1;
    background:#25D366;
    color:#fff;
    text-align:center;
    padding:12px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn-wa:hover{
    background:#128C7E;
}