/* --- 1. CONFIGURATION & VARIABLES --- */
:root {
   --sketch-font: 'Handlee', 'Patrick Hand', cursive;
   --article-font: 'Gentium Plus', serif;
   --border-width: 2px;
   --wobbly-border: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

/* --- 2. CUSTOM THEME COLORS --- */
[data-bs-theme="light"] {
   --bs-body-bg: #fdf6e3;
   --bs-body-color: #2c3e50;
   --bs-primary: #ff6b6b;
   --bs-card-bg: #ffffff;
   --bs-border-color: #2c3e50;
   --shadow-color: rgba(0, 0, 0, 0.1);
   --logo-color: #5e3a36;
}

[data-bs-theme="dark"] {
   --bs-body-bg: #1a1d21;
   --bs-body-color: #eee;
   --bs-primary: #f1c40f;
   --bs-card-bg: #212529;
   --bs-border-color: #eee;
   --shadow-color: rgba(255, 255, 255, 0.1);
   --logo-color: #f1c40f;

   /* --- TAMBAHAN KHUSUS DARK MODE UNTUK GAMBAR HERO --- */
   /* Membalik warna gambar (invert) agar garis hitam menjadi putih seperti kapur */
   .hero-sketch-img {
      filter: invert(1) brightness(0.9);
   }
}

/* --- 3. GLOBAL STYLES --- */
body {
   font-family: var(--sketch-font);
   font-size: 1.2rem;
   transition: background-color 0.3s, color 0.3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--sketch-font);
   font-weight: bold;
   letter-spacing: 1px;
}

.artikel {
   font-family: var(--article-font);
   font-size: 1.125rem;
   line-height: 1.8;
   text-align: left;
   /* Jarak baris lebih longgar untuk kenyamanan baca */
}

/* Optional: Styling khusus untuk paragraf di dalam artikel */
.artikel p {
   margin-bottom: 1rem;
   text-align: inherit;
}

.artikel li,
.artikel blockquote {
   text-align: inherit;
}

/* --- 4. SKETCHY COMPONENTS --- */
.card {
   border: var(--border-width) solid var(--bs-border-color);
   border-radius: var(--wobbly-border);
   box-shadow: 5px 5px 0px var(--shadow-color);
   transition: transform 0.2s;
}

.card:hover {
   transform: translateY(-3px) rotate(-1deg);
}

.btn {
   border: var(--border-width) solid currentColor;
   border-radius: var(--wobbly-border);
   font-weight: bold;
   text-transform: uppercase;
   box-shadow: 2px 2px 0px currentColor;
   transition: all 0.2s;
}

.btn:hover {
   box-shadow: none;
   transform: translate(2px, 2px);
}

.btn-primary {
   background-color: transparent;
   color: var(--bs-primary);
   border-color: var(--bs-primary);
}

.btn-primary:hover {
   background-color: var(--bs-primary);
   color: var(--bs-body-bg);
   border-color: var(--bs-primary);
}

.form-control {
   background-color: transparent;
   border: var(--border-width) solid var(--bs-border-color);
   border-radius: var(--wobbly-border);
   color: var(--bs-body-color);
}

.form-control:focus {
   background-color: transparent;
   box-shadow: none;
   border-color: var(--bs-primary);
   color: var(--bs-body-color);
}

.navbar {
   background-color: var(--bs-body-bg);
   border-bottom: var(--border-width) solid var(--bs-border-color);
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
   z-index: 1020;
}

.logo-svg {
   height: 60px;
   width: auto;
   display: block;
}

.logo-svg__fill {
   fill: var(--logo-color);
   transition: fill 0.3s ease;
}

.sketch-fill {
   fill: var(--logo-color);
   stroke: var(--logo-color);
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   filter: url(#sketch-filter);
   transition: fill 0.3s, stroke 0.3s;
}

/* --- TAMBAHAN CSS UNTUK GAMBAR HERO --- */
.hero-sketch-img {
   max-width: 100%;
   height: auto;
   /* Memberi sedikit rotasi agar terlihat seperti tempelan kertas */
   transform: rotate(2deg);
   transition: all 0.3s ease;
}

.hero-sketch-img:hover {
   transform: rotate(0deg) scale(1.02);
}

hr {
   opacity: 1;
   border: none;
   height: 2px;
   background-color: var(--bs-border-color);
   border-radius: 50%;
}

#theme-toggle {
   cursor: pointer;
   font-size: 1.5rem;
   border: none;
   background: none;
   color: var(--bs-body-color);
}

/* Styling untuk Ikon Sosial Media di Footer */
.footer-links a {
   color: var(--bs-body-color);
   font-weight: 700;
}

.footer-links a:hover {
   color: var(--bs-primary);
}

footer a i {
   font-size: 1.75rem;
   color: var(--bs-primary);
   margin: 0 0.5rem;
   transition: opacity 0.2s, transform 0.2s;
}

footer a:hover i {
   opacity: 0.7;
   transform: scale(1.1);
}

.blog-list-img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: var(--wobbly-border);
   border: 2px solid var(--bs-border-color);
}

.pagination .page-link {
   background: transparent;
   color: var(--bs-body-color);
   border: var(--border-width) solid var(--bs-border-color);
}

.pagination .page-item.active .page-link {
   background: var(--bs-primary);
   border-color: var(--bs-primary);
   color: #fff;
}

.alert {
   border: var(--border-width) solid var(--bs-border-color);
   border-radius: var(--wobbly-border);
   box-shadow: 4px 4px 0 var(--shadow-color);
}

.contact-status-modal {
   border: var(--border-width) solid var(--bs-border-color);
   border-radius: var(--wobbly-border);
   box-shadow: 5px 5px 0 var(--shadow-color);
   background: var(--bs-card-bg);
}

.contact-status-modal .modal-header,
.contact-status-modal .modal-footer {
   border-color: var(--bs-border-color);
}

.contact-status-modal .modal-title {
   letter-spacing: 0.04em;
}

.contact-status-modal--success .modal-title {
   color: #198754;
}

.contact-status-modal--error .modal-title {
   color: #dc3545;
}

.contact-consent-check {
   padding: 0.85rem 1rem 0.85rem 2.75rem;
   border: var(--border-width) solid var(--bs-border-color);
   border-radius: var(--wobbly-border);
   background-color: transparent;
}

.contact-consent-check .form-check-input {
   margin-top: 0.2rem;
}

.contact-consent-check .form-check-label {
   line-height: 1.55;
}

.contact-consent-check a {
   color: var(--bs-primary);
   font-weight: 700;
}

.schedule-home-list {
   display: grid;
   gap: 0.9rem;
}

.schedule-home-item {
   padding: 0.95rem 1rem;
   border: var(--border-width) solid var(--bs-border-color);
   border-radius: var(--wobbly-border);
   background: rgba(255, 255, 255, 0.28);
   box-shadow: 3px 3px 0 var(--shadow-color);
}

.schedule-home-item__type {
   font-weight: 700;
   color: var(--bs-primary);
   margin-bottom: 0.25rem;
}

.schedule-home-item__date,
.schedule-home-item__place {
   font-size: 1rem;
   line-height: 1.45;
}

.schedule-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1.5rem;
   padding: 1rem 0;
}

.event-card {
   border: var(--border-width) solid var(--bs-border-color);
   border-radius: var(--wobbly-border);
   padding: 1.5rem;
   box-shadow: 5px 5px 0px var(--shadow-color);
   transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.event-card:hover {
   transform: translateY(-5px) rotate(-1deg);
   box-shadow: 8px 8px 0px var(--shadow-color);
}

[data-bs-theme="light"] .event-card {
   background-color: #fcfaf2;
   background-image: radial-gradient(circle, #d1d1d1 1px, transparent 1px);
   background-size: 20px 20px;
}

[data-bs-theme="dark"] .event-card {
   background-color: #282c31;
   background-image: radial-gradient(circle, #3e444c 1px, transparent 1px);
   background-size: 20px 20px;
}

.event-type {
   align-self: flex-start;
   padding: 0.35rem 0.75rem;
   border-radius: var(--wobbly-border);
   font-weight: bold;
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   border: var(--border-width) solid;
}

[data-bs-theme="light"] .event-type.khotbah { background-color: #ff6b6b; color: #fff; border-color: #ff6b6b; }
[data-bs-theme="light"] .event-type.mengajar { background-color: #4ecdc4; color: #fff; border-color: #4ecdc4; }
[data-bs-theme="light"] .event-type.rapat { background-color: #f7b731; color: #333; border-color: #f7b731; }
[data-bs-theme="light"] .event-type.ibadah { background-color: #5f27cd; color: #fff; border-color: #5f27cd; }
[data-bs-theme="light"] .event-type.doa { background-color: #00d2d3; color: #333; border-color: #00d2d3; }
[data-bs-theme="light"] .event-type.kelas { background-color: #a29bfe; color: #fff; border-color: #a29bfe; }
[data-bs-theme="light"] .event-type.diskusi { background-color: #fd79a8; color: #fff; border-color: #fd79a8; }

[data-bs-theme="dark"] .event-type.khotbah { background-color: #c0392b; color: #fff; border-color: #c0392b; }
[data-bs-theme="dark"] .event-type.mengajar { background-color: #16a085; color: #fff; border-color: #16a085; }
[data-bs-theme="dark"] .event-type.rapat { background-color: #d68910; color: #fff; border-color: #d68910; }
[data-bs-theme="dark"] .event-type.ibadah { background-color: #8854d0; color: #fff; border-color: #8854d0; }
[data-bs-theme="dark"] .event-type.doa { background-color: #0fb9b1; color: #fff; border-color: #0fb9b1; }
[data-bs-theme="dark"] .event-type.kelas { background-color: #6c5ce7; color: #fff; border-color: #6c5ce7; }
[data-bs-theme="dark"] .event-type.diskusi { background-color: #e84393; color: #fff; border-color: #e84393; }

.event-detail {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--bs-body-color);
   font-size: 1rem;
}

.event-detail i {
   font-size: 1.1rem;
   color: var(--bs-primary);
}

.event-detail .label {
   font-weight: bold;
   min-width: 80px;
}

.event-notes {
   margin-top: auto;
   padding-top: 1rem;
   border-top: 1px dashed var(--bs-border-color);
   font-style: italic;
   font-size: 0.95rem;
   color: var(--bs-body-color);
   opacity: 0.85;
}

.btn-brosur {
   margin-top: 1rem;
   background-color: transparent;
   color: var(--bs-primary);
   border-color: var(--bs-primary);
   width: 100%;
}

.btn-brosur:hover {
   background-color: var(--bs-primary);
   color: var(--bs-body-bg);
   border-color: var(--bs-primary);
   box-shadow: none;
   transform: translate(2px, 2px);
}

.schedule-empty-card {
   background: rgba(255, 255, 255, 0.66);
}

.modal-body img {
   max-height: 80vh;
   object-fit: contain;
}

@media (min-width: 768px) {
   .blog-list-img {
      width: 250px;
      height: 150px;
   }
}

@media (max-width: 576px) {
   .schedule-container {
      grid-template-columns: 1fr;
   }

   .event-detail {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
   }

   .event-detail .label {
      min-width: auto;
   }
}

/* Share Buttons Custom Colors */
.share-wa {
   color: #25D366;
   border-color: #25D366;
}

.share-wa:hover {
   background-color: #25D366;
   color: #fff;
}

.share-fb {
   color: #1877F2;
   border-color: #1877F2;
}

.share-fb:hover {
   background-color: #1877F2;
   color: #fff;
}

.share-x {
   color: #000000;
   border-color: #000000;
}

.share-x:hover {
   background-color: #000000;
   color: #fff;
}

/* Khusus Dark Mode untuk X */
[data-bs-theme="dark"] .share-x {
   color: #ffffff;
   border-color: #ffffff;
}

[data-bs-theme="dark"] .share-x:hover {
   background-color: #ffffff;
   color: #000000;
}

.share-li {
   color: #0A66C2;
   border-color: #0A66C2;
}

.share-li:hover {
   background-color: #0A66C2;
   color: #fff;
}

.truncate-2 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-clamp: 2;
   /* Standard */
   -webkit-line-clamp: 2;
   /* Compatibility */
}