/* Islamic tone: emerald green, dark green, gold, sand, white */
:root{
  --green-700:#146c43;
  --green-500:#198754;
  --green-100:#e6f4ea;
  --gold-500:#c8a64b;
  --sand-100:#f7f3e8;
  --ink:#0f2a1e;
  --muted:#6b7d73;
  --white:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient( circle at 15% 10%, rgba(200,166,75,.10), transparent 40%),
    radial-gradient( circle at 85% 0%, rgba(20,108,67,.10), transparent 35%),
    var(--sand-100);
  overflow-x:hidden;
  font-display:swap;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slideInRight {
  animation: slideInRight 0.8s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.6s ease-out forwards;
}

/* Subtle geometric (midi) pattern reminiscent of Islamic art */
.pattern-top{
  position:fixed; inset:0 auto auto 0; height:16rem; width:100%;
  background:
    linear-gradient(45deg, rgba(20,108,67,.12) 25%, transparent 25%) 0 0/2rem 2rem,
    linear-gradient(-45deg, rgba(200,166,75,.10) 25%, transparent 25%) 0 0/2rem 2rem;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
  pointer-events:none; z-index:0;
}

.container{max-width:1100px; margin:0 auto; padding:0 1.25rem}
.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:.6rem;
  font-weight:600; text-decoration:none;
  transition:transform .2s ease, box-shadow .3s ease, background .3s ease; cursor:pointer;
  position:relative;
  overflow:hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn-primary{background:var(--green-700); color:var(--white); box-shadow:0 6px 18px rgba(20,108,67,.25)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 8px 24px rgba(20,108,67,.35)}
.btn-ghost{border:2px solid var(--green-700); color:var(--green-700); background:transparent}
.btn-ghost:hover{background:var(--green-700); color:var(--white); transform:translateY(-2px)}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{padding:.35rem .7rem;border:1px solid var(--gold-500); border-radius:999px; font-size:.85rem; color:var(--ink); background:rgba(200,166,75,.08)}

header.site{
  position:sticky; top:0; z-index:999; backdrop-filter: blur(6px);
  background:rgba(247,243,232,.8); border-bottom:1px solid rgba(20,108,67,.12);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.nav a{color:var(--ink); text-decoration:none; font-weight:600; margin-left:1rem}
.nav .brand{display:flex; align-items:center; gap:.75rem; font-weight:800; letter-spacing:.3px; color:var(--green-700)}
.logo{
  width:40px; height:40px; border-radius:10px; border:2px solid var(--gold-500);
  background: conic-gradient(from 0deg, rgba(200,166,75,.3), transparent 40%, rgba(20,108,67,.3) 70%, transparent 100%);
}

.hero{
  position:relative; padding:5rem 0 3rem 0; z-index:1;
  min-height:80vh;
  display:flex;
  align-items:center;
}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2rem, 3.5vw, 3.2rem); line-height:1.1; margin:0 0 1rem 0; animation: fadeInUp 0.8s ease-out}
.hero p{font-size:1.05rem; color:var(--muted); animation: fadeInUp 1s ease-out 0.2s backwards}
.hero .badge{animation: fadeIn 0.8s ease-out}
.hero .chips{animation: fadeInUp 1.2s ease-out 0.4s backwards}
.hero figure{margin:0; border-radius:1rem; overflow:hidden; border:4px solid var(--white); box-shadow:0 20px 40px rgba(15,42,30,.25); aspect-ratio: 4 / 3; animation: slideInRight 1s ease-out 0.3s backwards; transition:transform .3s ease, box-shadow .3s ease}
.hero figure:hover{transform:translateY(-5px) scale(1.02); box-shadow:0 25px 50px rgba(15,42,30,.35)}
.hero img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .4s ease, transform .3s ease}
.hero img:hover{transform:scale(1.05)}

.section{padding:3.5rem 0; position:relative}
.section h2{font-size:2rem; margin:0 0 1rem 0; color:var(--green-700)}
.section p{color:var(--ink); line-height:1.6}
.contact-info-card{
  background:var(--white); 
  border:1px solid rgba(20,108,67,.14); 
  border-radius:1rem; 
  padding:1.2rem; 
  box-shadow:0 6px 24px rgba(15,42,30,.07);
  height:100%;
}
.contact-info-card h2{
  font-size:1.5rem; 
  margin:0 0 1rem 0; 
  color:var(--green-700);
}
.contact-info-card p{
  margin:0.5rem 0;
  color:var(--ink);
  line-height:1.6;
}
#kontak .feature{margin-top:0; align-items:stretch}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.card{background:var(--white); border:1px solid rgba(20,108,67,.14); border-radius:1rem; padding:1.2rem; box-shadow:0 6px 24px rgba(15,42,30,.07); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; will-change:transform; contain:layout}
.card:hover{transform:translateY(-5px); box-shadow:0 12px 36px rgba(15,42,30,.15); border-color:var(--gold-500)}
.card h3{margin-top:0; transition:color .3s ease}
.card:hover h3{color:var(--green-700)}

.feature{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start}
.feature img{width:100%; border-radius:.75rem; border:3px solid var(--white); box-shadow:0 14px 30px rgba(0,0,0,.12)}

.badge{display:inline-block; font-weight:700; padding:.35rem .6rem; border-radius:6px; background:rgba(25,135,84,.12); color:var(--green-700); border:1px solid rgba(25,135,84,.25)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}

.faq details{background:var(--white); border:1px solid rgba(20,108,67,.15); padding:1rem 1.1rem; border-radius:.75rem; margin:.6rem 0}
.faq summary{font-weight:700; cursor:pointer}
.faq p{margin:.6rem 0 0 0}

.cta{
  text-align:center; background: linear-gradient(180deg, rgba(25,135,84,.08), rgba(200,166,75,.08));
  border-top:1px solid rgba(20,108,67,.12); border-bottom:1px solid rgba(20,108,67,.12);
}

footer{padding:2rem 0; color:#183427}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem}
footer a{color:inherit; text-decoration:none}
.small{font-size:.9rem; color:var(--muted)}

.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.gallery img{width:100%; height:280px; object-fit:cover; border-radius:.6rem; border:3px solid var(--white); box-shadow:0 10px 20px rgba(15,42,30,.1); transition:transform .3s ease, box-shadow .3s ease}
.gallery img:hover{transform:scale(1.05); box-shadow:0 15px 30px rgba(15,42,30,.2)}
.gallery video{width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border-radius:.6rem; border:3px solid var(--white); box-shadow:0 10px 20px rgba(15,42,30,.1); background:#000; transition:transform .3s ease, box-shadow .3s ease}
.gallery video:hover{transform:scale(1.03); box-shadow:0 15px 30px rgba(15,42,30,.2)}

.khatam{
  display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--muted)
}

/* Tablet styles */
@media (max-width: 1024px){
  .container{padding:0 1.5rem}
  .hero-inner{grid-template-columns:1fr; gap:2.5rem; text-align:center}
  .hero{padding:4rem 0 2rem 0; min-height:auto}
  .hero figure{max-width:600px; margin:0 auto}
  .cards{grid-template-columns:repeat(2,1fr); gap:1rem}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr; gap:2rem}
  .nav{flex-direction:column; gap:.75rem; padding:1rem 0}
  .nav nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem}
  .nav a{margin-left:0}
}

/* Mobile styles */
@media (max-width: 768px){
  .container{padding:0 1rem}
  .hero{padding:3rem 0 2rem 0}
  .hero h1{font-size:1.75rem}
  .hero p{font-size:.95rem}
  .hero-inner{gap:1.5rem}
  .section{padding:2.5rem 0}
  .section h2{font-size:1.5rem}
  .cards{grid-template-columns:1fr; gap:1rem}
  .grid-2, .grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr; gap:.75rem}
  .feature{grid-template-columns:1fr; gap:1.5rem}
  footer .cols{grid-template-columns:1fr; gap:1.5rem}
  .btn{padding:.75rem 1rem; font-size:.9rem}
  .chips{justify-content:center}
  .nav{padding:.75rem 0}
  .nav .brand{font-size:.9rem}
  .logo{width:35px; height:35px}
}

/* Small mobile */
@media (max-width: 480px){
  .hero h1{font-size:1.5rem}
  .hero p{font-size:.9rem}
  .section h2{font-size:1.3rem}
  .card{padding:1rem}
  .btn{width:100%; text-align:center; margin-bottom:.5rem}
  .hero div > div{display:flex; flex-direction:column; gap:.5rem}
  .gallery video{aspect-ratio:4/3}
}

/* Large screens */
@media (min-width: 1400px){
  .container{max-width:1300px}
  .hero h1{font-size:3.5rem}
  .hero p{font-size:1.15rem}
}