/* Theme variables */
:root{
  --bg: #0f0b0b;
  --accent: #b71c1c;
  --muted: #f1f1f1;
  --card: #1b1b1b;
  --btn-bg: #931a1a;
  --btn-fg: #fff;
  --radius: 10px;
  --max-width: 1100px;
  --gap: 1.25rem;
}

/* Reset */
*{box-sizing: border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--muted);
  background: #080707;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background: linear-gradient(180deg, rgba(15,11,11,0.95), rgba(15,11,11,0.9));
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0.5rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap);
}
.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.logo-img{
  max-height:56px;
  width:auto;
  display:block;
  border-radius:8px;
  animation:fadeIn 900ms ease both;
}
.site-title{
  font-size:1rem;
  color:var(--muted);
  font-weight:700;
  letter-spacing:0.2px;
  opacity:0;
  transform:translateY(-6px);
  animation:slideIn 900ms 150ms ease forwards;
}

/* nav */
.site-nav{
  display:flex;
  gap:1rem;
  align-items:center;
}
.site-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:0.5rem 0.6rem;
  border-radius:6px;
  font-weight:600;
  transition:all .18s ease;
}
.site-nav a:hover{ background: rgba(255,255,255,0.04); transform:translateY(-2px); }

.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:1.6rem;
}

/* Hero */
.hero{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: linear-gradient(rgba(12,8,8,0.55), rgba(12,8,8,0.55)), url("begron\ obat.jpg") center/cover no-repeat;
  padding:4rem 1rem;
}
.hero-content{ max-width:900px; }
.hero h2{
  font-size: clamp(1.8rem, 5vw, 3.8rem);
  margin-bottom:0.5rem;
  color:var(--muted);
  text-shadow: 0 4px 18px rgba(0,0,0,0.6);
}
.hero-sub{ margin-bottom:1rem; color: #e7dfdf }

/* Buttons */
.btn{
  display:inline-block;
  padding:0.65rem 1.1rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  text-decoration:none;
  border-radius:8px;
  font-weight:700;
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover{ transform:translateY(-3px); filter:brightness(1.05) }

/* Sections common */
main > section{
  max-width:var(--max-width);
  margin:0 auto;
  padding:3rem 1rem;
}

/* About */
.about-inner{
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  flex-wrap:wrap;
}
.about-img{
  width:320px;
  max-width:40%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
  filter:grayscale(100%) contrast(0.95);
  transition:filter .35s ease, transform .25s ease;
}
.about-img:hover{ filter:grayscale(0%); transform:translateY(-6px) }
.columns{ column-gap:1.25rem; column-count:1; color:#f4f0f0; }

/* Services */
.services h2{ color:var(--muted) }
.service-container{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.service-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:1.25rem;
  border-radius:var(--radius);
  min-width:220px;
  flex:1 1 240px;
  text-align:center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.service-box h3{ color:var(--accent) }

/* Organization */
.org-item {
  text-align: center;
  position: relative;
}
.org-name {
  display: block;
  margin-top: .6rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  transition: all .4s ease;
}
.org-item:hover .org-name {
  opacity: 1;
  transform: translateY(0);
}


/* Contact */
.contact-form{ max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:0.8rem; }
.contact-form input, .contact-form textarea{
  padding:0.8rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:var(--muted);
  resize:vertical;
}

/* Footer */
.site-footer{
  padding:2rem 1rem;
  text-align:center;
  background:#0e0b0b;
  color:#dcdcdc;
}

/* Animations */
@keyframes fadeIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes slideIn { to{opacity:1; transform:none} }

/* Responsive */
@media (min-width:900px){
  .columns{ column-count:2 }
}

@media (max-width:800px){
  .header-inner{ padding:0.6rem; }
  .logo-img{ max-height:46px }
  .site-nav{ position:fixed; right:0; top:64px; background: rgba(10,9,9,0.96); height:calc(100vh - 64px); width:260px; flex-direction:column; padding:1rem; transform:translateX(100%); transition:transform .22s ease; border-left:1px solid rgba(255,255,255,0.03) }
  .site-nav.open{ transform:translateX(0) }
  .site-nav a{ padding:0.75rem 0.6rem; display:block; }
  .nav-toggle{ display:block }
  .about-img{ width:100%; max-width:100%; order: -1 }
  .columns{ column-count:1 }
  .hero{ padding:3rem 1rem; min-height:55vh }
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:1rem;
}
.gallery-item{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:10px;
  filter:grayscale(60%) contrast(.95);
  transition:filter .28s ease, transform .22s ease;
}
.gallery-item:hover{ filter:grayscale(0); transform:translateY(-6px) }
.gambar {
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:10px;
  filter:grayscale(60%) contrast(.95);
  transition:filter .28s ease, transform .22s ease;
}

.org-list{
  list-style:none;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.org-item{
  background:var(--card);
  padding:.6rem .9rem;
  border-radius:999px;
  cursor:default;
  position:relative;
  font-weight:600;
  color:var(--muted);
}
.org-item::after{ ... }
.org-item:hover::after{ ... }
/* === CONTACT === */
.contact {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1rem;
  text-align: center;
}

.contact h2 {
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-size: 2rem;
  animation: fadeInUp 0.8s ease forwards;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: fadeIn 1s ease forwards;
}

.contact-form input,
.contact-form textarea {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 1rem;
  transition: all .3s ease;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.8s ease forwards;
}

.contact-form input:nth-child(1){ animation-delay: .2s; }
.contact-form input:nth-child(2){ animation-delay: .4s; }
.contact-form textarea { animation-delay: .6s; }
.contact-form button { animation-delay: .8s; }

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  outline: none;
  background: rgba(255,255,255,0.06);
}

/* Tombol animasi */
.contact-form .btn {
  border: none;
  cursor: pointer;
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-form .btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(183,28,28,0.4);
}

/* Animasi */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* === FOOTER === */
.site-footer {
  background: linear-gradient(180deg, #1b1b1b, #0f0b0b);
  color: #e5e5e5;
  text-align: center;
  padding: 2.5rem 1rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer h3 {
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 1rem;
  animation: fadeInUp .8s ease forwards;
}

.site-footer p {
  margin: .3rem 0;
  font-size: .95rem;
  line-height: 1.6;
  opacity: 0.9;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: color .25s ease;
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer .copy {
  margin-top: 1rem;
  font-size: .85rem;
  opacity: 0.7;
}

/* Animasi masuk */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}