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

:root{
  --navy: #141414;
  --navy-dark:#000000;
  --gold:#c81616;
  --gold-light:#e2685f;
  --brand-yellow:#fdf3d8;
  --brand-yellow-deep:#f7e3ad;
  --ink:#1c2733;
  --muted:#6b7785;
  --bg-soft:#f7f7f5;
}

body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
}
h1,h2,h3,h4,h5,.brand-badge{
  font-family:'Poppins', sans-serif;
}

/* ---------- Public site ---------- */
.site-navbar{
  background:var(--navy);
}
.site-navbar .nav-link{
  color:rgba(255,255,255,.85);
  font-weight:500;
}
.site-navbar .nav-link:hover{ color:var(--gold-light); }

.hero{
  min-height:60vh;
  background: var(--brand-yellow);
  border-bottom:1px solid var(--brand-yellow-deep);
}
.hero h1{ letter-spacing:-.02em; color:var(--gold); }
.hero p{ color:#3a3a3a; }
.btn-brand{
  background:var(--gold); color:#fff; border:none;
}
.btn-brand:hover{ background:#a81212; color:#fff; }

.section-title{
  font-weight:700;
  position:relative;
  display:inline-block;
}
.section-title::after{
  content:"";
  display:block;
  width:56px;
  height:4px;
  background:var(--gold);
  margin-top:10px;
  border-radius:2px;
}
#about .section-title::after, #services .section-title::after,
#gallery .section-title::after, #contact .section-title::after{
  margin-left:auto; margin-right:auto;
}
#about .section-title, #services .section-title, #contact .section-title{ display:block; text-align:center; }

.bg-light-subtle{ background:var(--bg-soft); }

.service-card{ border-radius:16px; transition:transform .15s ease, box-shadow .15s ease; }
.service-card:hover{ transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(14,42,74,.12) !important; }
.service-icon{
  width:52px;height:52px;border-radius:12px;
  background:var(--brand-yellow);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
}

.gallery-thumb{ aspect-ratio:1/1; }
.gallery-thumb img{ transition:transform .2s ease; }
.gallery-thumb:hover img{ transform:scale(1.06); }
.object-fit-cover{ object-fit:cover; }

/* ---------- Login ---------- */
.login-body{
  min-height:100vh;
  background:linear-gradient(160deg, var(--navy-dark), var(--navy) 60%, #14395f);
}
.login-card{ border-radius:20px; }
.brand-badge{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg, var(--navy), var(--gold));
  color:#fff;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;
}
.btn-primary{
  background:var(--navy); border-color:var(--navy);
}
.btn-primary:hover{ background:var(--navy-dark); border-color:var(--navy-dark); }

/* ---------- Admin / dashboard shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width:250px; flex-shrink:0;
  background:var(--navy-dark);
  color:#dbe4ee;
}
.app-sidebar .brand{
  padding:1.2rem 1.2rem; font-weight:700; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.app-sidebar a{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1.2rem; color:#c3cfdc; text-decoration:none; font-size:.92rem;
}
.app-sidebar a:hover, .app-sidebar a.active{
  background:rgba(255,255,255,.06); color:#fff; border-right:3px solid var(--gold);
}
.app-main{ flex:1; background:var(--bg-soft); min-width:0; }
.app-topbar{
  background:#fff; border-bottom:1px solid #e6e9ee;
  padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
}
.stat-card{
  border-radius:16px; border:0; background:#fff;
  box-shadow:0 .25rem .75rem rgba(14,42,74,.06);
}
.stat-card .stat-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;
}
.stat-value{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.6rem; }
.chart-card{ border-radius:16px; border:0; background:#fff; box-shadow:0 .25rem .75rem rgba(14,42,74,.06); }
.table thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); border-bottom-width:1px; }

@media (max-width: 900px){
  .app-sidebar{ position:fixed; z-index:1040; left:-260px; top:0; bottom:0; transition:left .2s ease; }
  .app-sidebar.open{ left:0; }
  .app-main{ width:100%; }
}