/* =============================
   Custom CSS for Masjid Web
   ============================= */

/* Variables */
:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --success: #16a34a;
  --success-hover: #15803d;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --secondary: #e5e7eb;
  --secondary-hover: #d1d5db;
  --warning: #facc15;
  --info: #0ea5e9;
}

/* Button base */
.btn {
  @apply px-4 py-2 rounded font-medium transition;
  display: inline-block;
  text-align: center;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}
.btn-primary:hover { background-color: var(--primary-hover); }

.btn-success {
  background-color: var(--success);
  color: white;
}
.btn-success:hover { background-color: var(--success-hover); }

.btn-secondary {
  background-color: var(--secondary);
  color: #1f2937;
}
.btn-secondary:hover { background-color: var(--secondary-hover); }

.btn-danger {
  background-color: var(--danger);
  color: white;
}
.btn-danger:hover { background-color: var(--danger-hover); }

.btn-outline {
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
}
.btn-outline:hover { background: #f9fafb; }

.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }
.btn-block { display: block; width: 100%; }
.btn-icon { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Forms */
.input, .select, .textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.3);
}

.label { font-weight: 600; margin-bottom: 0.25rem; display: block; }
.help { font-size: 0.875rem; color: #6b7280; }

/* Card */
.card {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  padding: 1rem;
}

/* Alerts */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}
.alert-success { background: #dcfce7; color: #166534; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef9c3; color: #92400e; }
.alert-info { background: #e0f2fe; color: #075985; }

/* Badge */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-success { background: #dcfce7; color: #166534; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef9c3; color: #92400e; }
.badge-info { background: #e0f2fe; color: #075985; }

/* Table */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th, .table td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem;
  text-align: left;
}
.table th {
  background: #f9fafb;
  font-weight: 600;
}

/* Layout helpers */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.toolbar { display: flex; justify-content: space-between; margin-bottom: 1rem; }

.rounded { border-radius: 0.375rem; }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.text-muted { color: #6b7280; }

/* Form grid */
.form-grid { display: grid; gap: 1rem; }
.form-grid.md-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.md-3 { grid-template-columns: repeat(3, 1fr); }

/* Navbar & Sidebar */
.navbar {
  background: var(--primary);
  color: white;
  padding: 0.5rem 1rem;
}
.sidebar {
  background: #1f2937;
  color: white;
  min-height: 100vh;
  padding: 1rem;
}

/* Utility margins */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }

/* ===== Responsive grid (pure CSS) ===== */
.grid-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* ≥ 640px (tablet potrait) → 2 kolom */
@media (min-width: 640px){
  .grid-cards.sm-2{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* ≥ 1024px (desktop) → 3 kolom */
@media (min-width: 1024px){
  .grid-cards.lg-3{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Kartu event: gambar biar rapi */
.card-media{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid #e5e7eb;
}

.site-footer{margin-top:2rem;padding:1rem 0;background:var(--surface);border-top:1px solid var(--border)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand-title{font-weight:800;font-size:1.1rem}
.footer-social{display:flex;gap:.5rem}
.footer-social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;color:#374151;text-decoration:none}
.footer-social a:hover{background:#f3f4f6}

/* ===== Carousel ===== */
.carousel{ position:relative; overflow:hidden; border-radius:16px; }
.carousel-track{ display:flex; transition:transform .5s ease; }
.carousel-item{ min-width:100%; position:relative; }
.carousel-item img{ width:100%; height:360px; object-fit:cover; display:block; }
@media (max-width:640px){ .carousel-item img{ height:220px; } }
.carousel-caption{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(0,0,0,.45); color:#fff; padding:.4rem .6rem;
  border-radius:8px; font-weight:600;
}
.crs-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.8); border:1px solid var(--border);
  width:38px; height:38px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.crs-nav:hover{ background:#fff; }
.crs-nav.prev{ left:.5rem; } .crs-nav.next{ right:.5rem; }
.crs-dots{ position:absolute; bottom:.5rem; left:0; right:0; display:flex; gap:.35rem; justify-content:center; }
.crs-dots .dot{ width:8px; height:8px; border-radius:999px; border:1px solid #fff; background:rgba(255,255,255,.4); }
.crs-dots .dot.active{ background:#fff; }


.site-header{ position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; }
.brand-wrap{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; }
.brand-logo{ width:120px; height:auto; object-fit:contain; }
@media (max-width:640px){ .brand-logo{ width:96px; } }
.brand-name{ font-weight:800; font-size:1.1rem; }


/* ====== HEADER ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 0; /* lebih tipis */
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}

.brand-logo {
  max-height: 48px; /* logo menyesuaikan, tidak lebih tinggi dari 48px */
  width: auto;
  object-fit: contain;
}

.brand-name {
  font-weight: 800;
  font-size: 1.05rem;
}

@media (max-width:640px){
  .brand-logo { max-height: 40px; }
  .brand-name { font-size: .95rem; }
}


/* ====== JADWAL SHOLAT ====== */
.jadwal-box {
  display: grid;
background-color: powderblue;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: .5rem;
  font-size: .85rem;   /* kecilin font */
}

.jadwal-item {
  background: #f9fafb;
 background-color: powderblue;
  
  border-radius: 5px;
  padding: .1rem .5rem;
  text-align: center;
 
}

.jadwal-item h4 {
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .2rem;
}

.jadwal-item span {
  font-size: .9rem;
  font-weight: 700;
  color: #111827;
}

.footer-icon { color:#16a34a; }       /* hijau */
.footer-icon:hover { color:#0d7a33; } /* hover */


/* ===== Kontak ===== */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1.2fr; }
}

.social-list{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.25rem;
}
.soc{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border:1px solid var(--border);
  border-radius:999px; text-decoration:none; font-size:.85rem;
  color:#374151; background:#fff;
}
.soc:hover{ background:#f9fafb; }
.soc.fb{ border-color:#1877F2; color:#1877F2; }
.soc.ig{ border-color:#C13584; color:#C13584; }
.soc.yt{ border-color:#FF0000; color:#FF0000; }
.soc.tt{ border-color:#000; color:#000; }

/* ==== 1) HEADER — MOBILE FIX ==== */
.site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;}
.brand-wrap{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;}
.brand-logo{max-height:40px;width:auto;object-fit:contain;}
.brand-name{font-weight:800;font-size:1.05rem;line-height:1.2;}
.nav-links{display:flex;gap:1rem;flex-wrap:wrap;}

/* Mobile: kecilkan dan izinkan wrap agar tidak nabrak */
@media (max-width:640px){
  .brand-logo{max-height:34px;}
  .brand-name{font-size:.95rem;}
  .nav{align-items:flex-start;gap:.5rem;}
  .nav-links{gap:.75rem;flex-wrap:wrap;}
  .nav-links a{font-size:.95rem;padding:.25rem 0;line-height:1.1;}
}

/* ==== 2) RUANG AMAN UNTUK KONTEN (kalau header sticky) ==== */
main{scroll-padding-top:64px;}           /* untuk anchor/scroll */
@media (max-width:640px){
  main{padding-top:.25rem;}             /* beri sedikit jarak di mobile */
}

/* ==== 3) JADWAL SHOLAT — COMPACT & RESPONSIVE ==== */
.jadwal-title{font-weight:700;font-size:1.1rem;margin:.5rem 0;}
.jadwal-box{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(90px,1fr)); /* desktop rapat */
  gap:.25rem;font-size:.9rem;
}
.jadwal-item{
  background:#cdeff4;border:1px solid #e5e7eb;border-radius:.35rem;
  padding:.35rem .5rem;text-align:center;
}
.jadwal-item h4{font-size:.8rem;font-weight:600;margin:0 0 .1rem;}
.jadwal-item span{font-size:.95rem;font-weight:700;color:#111827;}
/* Mobile: paksa 2 kolom agar tidak gepeng & tidak numpuk */
@media (max-width:640px){
  .jadwal-box{grid-template-columns:repeat(2, minmax(120px,1fr)); gap:.35rem;}
  .jadwal-item{padding:.35rem;}
  .jadwal-item h4{font-size:.85rem;}
  .jadwal-item span{font-size:1rem;}
}

/* ===== Header mobile fix (2 baris + nav scroll) ===== */
.site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border);}
.nav{display:flex;flex-direction:column;gap:.25rem;padding:.4rem 0;}
/* baris brand */
.nav .brand-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.brand-wrap{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;min-width:0;}
.brand-logo{max-height:36px;width:auto;object-fit:contain;flex:0 0 auto;}
.brand-name{font-weight:800;font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.brand-sub{color:#6b7280;font-size:.85rem;}
/* baris menu: scrollable */
.nav .menu-row{display:block;}
.nav-links{
  display:flex;gap:1rem;overflow-x:auto;white-space:nowrap;
  -webkit-overflow-scrolling:touch;padding:.25rem 0;
}
.nav-links a{display:inline-block;text-decoration:none;color:#111827;font-size:.95rem;}

/* Sembunyikan alamat di header saat HP agar tidak memanjang ke bawah */
@media (max-width:640px){
  .brand-sub{display:none;}
}

/* Desktop tetap satu baris rapi */
@media (min-width:641px){
  .nav{flex-direction:row;align-items:center;justify-content:space-between;}
  .nav .brand-row{gap:.75rem;}
  .nav .menu-row{flex:1;}
  .nav-links{justify-content:flex-end;overflow:visible;white-space:normal;gap:1.25rem;}
  .brand-logo{max-height:44px;}
  .brand-name{font-size:1.1rem;}
}

/* Ruang aman konten biar tidak ketutup header sticky */
main{scroll-padding-top:72px;}