/* ==========================================================================
   MA AMTSILATI BANGSRI - PREMIUM THEME STYLESHEET
   Exclusive Palette: Emerald Green Gradient + Warm Gold + Pure White
   ========================================================================== */

:root {
   /* Green Gradient & Ad-Dikri Warm Gold Palette Collaboration */
   --gradient-primary: linear-gradient(135deg, #073b1c 0%, #116e39 50%, #094a24 100%);
   --gradient-nav: linear-gradient(90deg, #094a24 0%, #116e39 50%, #073b1c 100%);
   --gradient-gold: linear-gradient(135deg, #d48b15 0%, #c47d0e 50%, #965a00 100%);
   --gradient-addikri: linear-gradient(135deg, #c47d0e 0%, #965a00 100%);
   
   --primary-green: #116e39;
   --dark-green: #073b1c;
   
   /* Ad-Dikri Warm Amber Gold Accent Colors */
   --gold-accent: #c47d0e;
   --gold-light: #f8ecc9;
   --gold-border: #d48b15;
   --addikri-gold: #b8730e;
   
   /* Pure White & Clean Tints */
   --pure-white: #ffffff;
   --bg-clean: #fcf9f2;
   
   --text-dark: #092112;
   --text-muted: #556c5e;
   --border-light: #e0eae3;
   
   --card-shadow: 0 6px 20px rgba(9, 74, 36, 0.07);
   --hover-shadow: 0 12px 30px rgba(196, 125, 14, 0.18);
}

html, body {
   overflow-x: hidden !important;
   max-width: 100% !important;
   width: 100% !important;
   margin: 0;
   padding: 0;
}

body {
   font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: var(--bg-clean);
   color: var(--text-dark);
   line-height: 1.6;
}

/* DESKTOP CONTAINER EXPANSION */
@media (min-width: 1200px) {
   .container {
      max-width: 1260px !important;
   }
}
@media (min-width: 1400px) {
   .container {
      max-width: 1320px !important;
   }
}

body a {
   color: var(--primary-green);
   transition: all 0.25s ease;
}

body a:hover {
   color: var(--dark-green);
   text-decoration: none;
}

/* SLEEK COMPACT TOP BAR (RICH EMERALD GREEN GRADIENT & GOLD BORDER) */
.top-bar {
   background: linear-gradient(135deg, #073b1c 0%, #116e39 50%, #094a24 100%);
   color: #ffffff;
   font-size: 13px;
   padding: 8px 0 !important;
   border-bottom: 3px solid #c47d0e;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.top-bar a {
   color: #ffffff;
   font-weight: 500;
}

.top-bar a:hover {
   color: #f8ecc9;
}

.top-bar i {
   margin-right: 5px;
   color: #fce8b3;
}

.brand {
   font-family: "Montserrat", sans-serif;
   font-weight: 800;
   letter-spacing: 0.5px;
   color: #ffffff;
   text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.tagline-text {
   color: #d1ebd8;
   font-weight: 500;
}

/* SLEEK NAV BAR (EMERALD GREEN GRADIENT) */
.menu-bar {
   text-transform: uppercase;
   font-weight: 700;
   background: linear-gradient(90deg, #073b1c 0%, #116e39 50%, #094a24 100%);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
   border-bottom: 3px solid #c47d0e;
}

.sticky.is-sticky {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 1000;
   width: 100%;
   box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.sm-clean {
   background: transparent;
}

.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active {
   color: var(--pure-white) !important;
   padding: 12px 18px;
   font-size: 13.5px;
}

.sm-clean ul {
   background: var(--dark-green);
   border-radius: 0 0 8px 8px;
   border: 1px solid var(--gold-accent);
   box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.sm-clean ul a {
   color: #e2f0e6 !important;
   font-size: 13px;
}

.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted {
   background: var(--primary-green) !important;
   color: var(--gold-light) !important;
}

/* CAROUSEL */
.carousel {
   border-radius: 12px;
   overflow: hidden;
   box-shadow: var(--card-shadow);
   border: 1px solid var(--border-light);
}

.carousel-caption {
   background: linear-gradient(0deg, rgba(7,59,28,0.94) 0%, rgba(17,110,57,0.65) 100%);
   border-top: 3px solid var(--gold-accent);
   color: var(--pure-white);
   right: 0;
   left: 0;
   bottom: 0;
   text-align: left;
   padding: 22px 26px;
}

.carousel-caption h2 {
   color: var(--pure-white);
   font-weight: 700;
   font-size: 1.45rem;
}

.carousel-indicators li {
   background-color: rgba(255,255,255,0.6);
   width: 10px;
   height: 10px;
   border-radius: 50%;
}

.carousel-indicators .active {
   background-color: var(--gold-accent);
   width: 26px;
   border-radius: 6px;
}

/* VISI MISI FEATURE BOX (PUTIH + EMAS + GREEN GRADIENT) */
.feature-box {
   background: var(--pure-white);
   border-radius: 12px;
   padding: 24px 20px;
   margin-bottom: 20px;
   box-shadow: var(--card-shadow);
   border: 1px solid var(--border-light);
   border-top: 4px solid var(--gold-accent);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-box:hover {
   transform: translateY(-4px);
   box-shadow: var(--hover-shadow);
   border-top-color: var(--primary-green);
}

.feature-icon {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--gradient-primary);
   color: var(--gold-light);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 14px;
   box-shadow: 0 4px 12px rgba(9, 74, 36, 0.2);
}

/* PAGE TITLE */
.page-title {
   font-weight: 700;
   color: var(--dark-green);
   position: relative;
   margin-bottom: 20px;
   padding-bottom: 8px;
   border-bottom: 2px solid var(--border-light);
}

.page-title:after {
   border-bottom: 3.5px solid var(--gold-accent);
   width: 55px;
   display: block;
   position: absolute;
   content: '';
   bottom: -2px;
   left: 0;
}

footer .page-title {
   color: var(--pure-white);
   border-bottom-color: rgba(255,255,255,0.15);
}

footer .page-title:after {
   border-bottom-color: var(--gold-accent);
}

/* PURE WHITE CARDS & CONTENT */
.card {
   border: 1px solid var(--border-light);
   border-radius: 12px !important;
   box-shadow: var(--card-shadow) !important;
   transition: all 0.25s ease;
   background: var(--pure-white) !important;
   overflow: hidden;
}

.card:hover {
   transform: translateY(-4px);
   box-shadow: var(--hover-shadow) !important;
   border-color: var(--gold-accent);
}

.card-img-wrapper {
   overflow: hidden;
   position: relative;
}

.card-img-wrapper img {
   transition: transform 0.4s ease;
}

.card:hover .card-img-wrapper img {
   transform: scale(1.05);
}

/* PROFESSIONAL POST COVER & TYPOGRAPHY STYLES */
.card-img-wrapper-cover {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 200px;
   background: #f4ede2;
   overflow: hidden;
}

.card-img-wrapper-cover img {
   width: 100%;
   height: 100%;
   object-fit: cover !important;
   object-position: center !important;
   transition: transform 0.4s ease;
}

.card:hover .card-img-wrapper-cover img {
   transform: scale(1.05);
}

.post-card-title, .post-card-title a {
   font-size: 1.08rem !important;
   line-height: 1.4 !important;
   font-weight: 700 !important;
   color: #073b1c !important;
   transition: color 0.2s ease;
}

.post-card-title a:hover {
   color: #c47d0e !important;
   text-decoration: none !important;
}

.article-headline {
   font-size: 1.55rem !important;
   line-height: 1.38 !important;
   font-weight: 800 !important;
   color: #073b1c !important;
}

@media (max-width: 767px) {
   .post-card-title, .post-card-title a {
      font-size: 0.96rem !important;
      line-height: 1.35 !important;
   }
   
   .article-headline {
      font-size: 1.3rem !important;
      line-height: 1.35 !important;
   }

   .card-img-wrapper-cover {
      min-height: 175px !important;
      max-height: 220px !important;
   }
}

/* BUTTONS */
.action-button {
   background: var(--gradient-primary);
   color: var(--pure-white);
   border: none;
   border-radius: 8px !important;
   font-weight: 600;
   padding: 8px 18px;
   box-shadow: 0 3px 10px rgba(9, 74, 36, 0.25);
}

.action-button:hover {
   background: var(--gradient-gold);
   color: var(--dark-green);
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(226, 168, 56, 0.35);
}

/* SIDEBAR */
.sidebar .list-group-item {
   border: 1px solid var(--border-light);
   border-radius: 8px;
   margin-bottom: 8px;
   background: var(--pure-white);
   transition: all 0.25s ease;
}

.sidebar .list-group-item:hover {
   border-color: var(--gold-accent);
   background-color: #fdfaf3;
}

/* FOOTER */
footer {
   color: #e2ede5;
   font-size: 13.5px;
   margin-top: 40px;
}

footer .primary-footer {
   background: var(--gradient-primary);
   padding: 40px 0 28px;
}

footer .secondary-footer {
   border-top: 1px solid rgba(226, 168, 56, 0.3);
   background-color: #041f0e;
   padding: 14px 0;
}

footer .copyright {
   color: #c4d6cb;
}

footer a {
   color: var(--pure-white);
}

footer a:hover {
   color: var(--gold-light);
}

.social-icon {
   width: 38px;
   height: 38px;
   font-size: 14px;
   background-color: rgba(255,255,255,0.12);
   color: var(--pure-white);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 8px;
   border-radius: 50%;
   border: 1px solid rgba(226, 168, 56, 0.4);
   transition: all 0.25s ease;
}

.social-icon:hover {
   background: var(--gradient-gold);
   color: var(--dark-green);
   transform: translateY(-3px);
}

/* TAGS */
.tag-content-block {
   display: block;
}

.tag a {
   border: 1px solid rgba(226, 168, 56, 0.4);
   padding: 6px 14px;
   color: var(--pure-white);
   display: inline-block;
   font-size: 12px;
   border-radius: 20px;
   margin-bottom: 6px;
   margin-right: 4px;
   text-decoration: none;
   transition: all 0.25s ease;
}

.tag a:hover {
   border-color: var(--gold-accent);
   background: var(--gradient-gold);
   color: var(--dark-green);
}

/* PROFESSIONAL ARTICLE READING TYPOGRAPHY */
.article-body-content p {
   margin-bottom: 1.5rem;
   font-size: 1.08rem;
   line-height: 1.88;
   color: #1a2e22;
}

.article-body-content h2,
.article-body-content h3,
.article-body-content h4 {
   color: #073b1c;
   font-weight: 700;
   margin-top: 2rem;
   margin-bottom: 1rem;
   padding-left: 14px;
   border-left: 4px solid #116e39;
}

.article-body-content blockquote {
   background-color: #f4f9f5;
   border-left: 5px solid #e2a838;
   padding: 16px 20px;
   margin: 1.8rem 0;
   font-style: italic;
   border-radius: 0 10px 10px 0;
   color: #2a4734;
}

.article-body-content img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
   margin: 1.5rem 0;
   box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.article-body-content ul,
.article-body-content ol {
   margin-bottom: 1.5rem;
   padding-left: 1.6rem;
}

.article-body-content li {
   margin-bottom: 0.5rem;
   line-height: 1.75;
}

/* INSTAGRAM STYLE PAMPHLET GRID (9:16 ASPECT RATIO) */
.prestasi-insta-card {
   cursor: pointer;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 14px rgba(9, 74, 36, 0.08);
   border: 2px solid var(--border-light);
   background: #000;
   transition: all 0.3s ease;
}

.prestasi-insta-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 24px rgba(17, 110, 57, 0.22);
   border-color: var(--gold-accent);
}

.pamphlet-aspect-container {
   position: relative;
   width: 100%;
   padding-top: 177.77%; /* 9:16 Aspect Ratio */
   overflow: hidden;
   background: #091c10;
}

.pamphlet-img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.prestasi-insta-card:hover .pamphlet-img {
   transform: scale(1.08);
}

.pamphlet-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(0deg, rgba(5, 43, 20, 0.92) 0%, rgba(5, 43, 20, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
   display: flex;
   align-items: flex-end;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.prestasi-insta-card:hover .pamphlet-overlay {
   opacity: 1;
}

.overlay-content {
   width: 100%;
   padding: 12px;
}

.line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* FULLSCREEN SEARCH */
#search_form {
   z-index: 999999;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgba(5, 43, 20, 0.97);
   transition: all 0.35s ease-in-out;
   transform: translate(0px, -100%) scale(0, 0);
   opacity: 0;
}

#search_form.open {
   transform: translate(0px, 0px) scale(1, 1);
   opacity: 1;
}

#search_form input[type="search_form"] {
   position: absolute;
   top: 50%;
   width: 100%;
   color: var(--pure-white);
   background: rgba(0, 0, 0, 0);
   font-size: 42px;
   font-weight: 300;
   text-align: center;
   border: 0px;
   margin: 0px auto;
   margin-top: -51px;
   outline: none;
}

/* RETURN TO TOP */
#return-to-top {
   opacity: 0.9;
   z-index: 10000;
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: var(--gradient-gold);
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: none;
   text-decoration: none;
   transition: all 0.25s ease;
   box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

#return-to-top i {
   color: var(--dark-green);
   margin: 0;
   position: relative;
   left: 14px;
   top: 11px;
   font-size: 18px;
}

#return-to-top:hover {
   background: var(--dark-green);
}

#return-to-top:hover i {
   color: var(--gold-light);
}

/* MOBILE BOTTOM NAV BAR (ANDROID APP STYLE) */
.mobile-bottom-nav {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 60px;
   background: var(--gradient-primary);
   box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
   z-index: 99999;
   justify-content: space-around;
   align-items: center;
   border-top: 3px solid var(--gold-accent);
}

.mobile-bottom-nav-item {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #d1ebd8 !important;
   font-size: 11px;
   font-weight: 500;
   text-decoration: none !important;
   padding: 6px 0;
   transition: all 0.2s ease;
}

.mobile-bottom-nav-item i {
   font-size: 18px;
   margin-bottom: 2px;
}

.mobile-bottom-nav-item.active, .mobile-bottom-nav-item:hover {
   color: var(--gold-light) !important;
}

.mobile-bottom-nav-item.active i, .mobile-bottom-nav-item:hover i {
   transform: translateY(-2px);
}

/* ==========================================================================
   MODERN MOBILE RESPONSIVE STYLES (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
   body {
      padding-bottom: 65px !important;
   }

   #return-to-top {
      bottom: 75px !important;
   }

   .top-bar {
      padding: 6px 0 !important;
      font-size: 11.5px;
   }
   
   .top-header {
      justify-content: center;
      text-align: center;
      flex-direction: row;
   }
   
   .top-header img {
      margin-right: 10px !important;
      width: 38px !important;
      height: 38px !important;
   }

   .brand {
      font-size: 14px !important;
   }

   .tagline-text {
      display: none;
   }

   .top-right {
      display: flex !important;
      justify-content: center;
      margin-top: 4px;
      padding: 0;
      float: none !important;
   }

   .top-right li {
      padding: 0 6px !important;
      font-size: 11px;
   }

   .navbar-toggler {
      border: none !important;
      background: linear-gradient(135deg, #c47d0e, #965a00) !important;
      padding: 8px 16px !important;
      border-radius: 8px !important;
      margin: 6px 12px !important;
      outline: none !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
   }

   .navbar-collapse {
      background: #ffffff !important;
      border-top: 3px solid #c47d0e !important;
      border-bottom: 3px solid #c47d0e !important;
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18) !important;
      border-radius: 0 0 14px 14px !important;
      padding: 8px 0 !important;
   }

   .menu-bar {
      margin-bottom: 12px !important;
      padding: 2px 0;
   }

   .sm-clean {
      background: transparent !important;
      padding: 0 !important;
   }

   .sm-clean li {
      border-top: 1px solid #f0e6d6 !important;
   }

   .sm-clean > li:first-child {
      border-top: 0 !important;
   }

   .sm-clean li a {
      padding: 13px 18px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      color: #073b1c !important;
   }

   .sm-clean li a:hover, .sm-clean li a.highlighted {
      background: #fdf6ea !important;
      color: #c47d0e !important;
   }

   /* Sub-arrow (+) toggle buttons for Mobile Menu with Ad-Dikri Warm Amber Gold */
   .sm-clean a .sub-arrow {
      background: linear-gradient(135deg, #c47d0e, #965a00) !important;
      color: #ffffff !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 8px rgba(196, 125, 14, 0.3) !important;
      width: 36px !important;
      height: 36px !important;
      line-height: 36px !important;
      margin-top: -18px !important;
      right: 10px !important;
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
   }

   .sm-clean ul {
      background: #fcf8f2 !important;
      border: 1px solid #e2c08a !important;
      border-radius: 8px !important;
      margin: 4px 10px !important;
   }

   .sm-clean ul a {
      color: #073b1c !important;
      padding: 10px 16px !important;
   }

   .sm-clean ul a:hover {
      background: #f5e8d0 !important;
      color: #c47d0e !important;
   }

   .feature-box {
      padding: 16px 14px;
      margin-bottom: 12px;
      border-radius: 10px;
   }

   .feature-icon {
      width: 42px;
      height: 42px;
      font-size: 17px;
      margin-bottom: 10px;
   }

   body {
      padding-bottom: 76px !important;
   }

   .container, .container-fluid {
      padding-left: 12px !important;
      padding-right: 12px !important;
      max-width: 100% !important;
      overflow-x: hidden !important;
   }

   .row {
      margin-left: -6px !important;
      margin-right: -6px !important;
   }

   .row > [class*="col-"] {
      padding-left: 6px !important;
      padding-right: 6px !important;
   }

   footer .primary-footer {
      padding: 24px 0 20px;
      text-align: center;
   }
}

/* PERMANENT FIXED MOBILE BOTTOM NAVIGATION BAR (ANDROID STYLE) */
@media (max-width: 991px) {
   .mobile-bottom-nav {
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 64px !important;
      z-index: 999999 !important;
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      background: linear-gradient(135deg, #073b1c 0%, #094a24 50%, #116e39 100%) !important;
      border-top: 3px solid #e2a838 !important;
      box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.4) !important;
      justify-content: space-around !important;
      align-items: center !important;
   }

   .mobile-bottom-nav-item {
      flex: 1 !important;
      text-align: center !important;
      color: rgba(255, 255, 255, 0.85) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      text-decoration: none !important;
      padding: 6px 0 !important;
      transition: all 0.25s ease !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
   }

   .mobile-bottom-nav-item i {
      font-size: 20px !important;
      margin-bottom: 3px !important;
      color: #fce8b3 !important;
      transition: all 0.25s ease !important;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
   }

   .mobile-bottom-nav-item span {
      color: #ffffff !important;
      font-weight: 700 !important;
      letter-spacing: 0.3px !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
   }

   .mobile-bottom-nav-item:hover, .mobile-bottom-nav-item.active {
      color: #ffffff !important;
      font-weight: 800 !important;
   }

   .mobile-bottom-nav-item.active i, .mobile-bottom-nav-item:hover i {
      color: #ffffff !important;
      transform: translateY(-2px) !important;
      filter: drop-shadow(0 0 8px rgba(252, 232, 179, 0.9)) !important;
   }

   .mobile-bottom-nav-item.active span {
      color: #fce8b3 !important;
      font-weight: 800 !important;
   }

   /* CENTER NAV CARD FOR KIPRAH & PRESTASI */
   .mobile-bottom-nav-center {
      position: relative !important;
      top: -12px !important;
   }

   .center-nav-card {
      width: 46px !important;
      height: 46px !important;
      border-radius: 12px !important;
      background: linear-gradient(135deg, #d48b15 0%, #c47d0e 50%, #965a00 100%) !important;
      border: 2.5px solid #ffffff !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-bottom: 2px !important;
      transition: all 0.25s ease !important;
   }

   .center-nav-card i {
      font-size: 20px !important;
      color: #ffffff !important;
      margin-bottom: 0 !important;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) !important;
   }

   .mobile-bottom-nav-center:hover .center-nav-card,
   .mobile-bottom-nav-center.active .center-nav-card {
      transform: scale(1.1) translateY(-2px) !important;
      box-shadow: 0 6px 18px rgba(196, 125, 14, 0.65) !important;
      background: linear-gradient(135deg, #f3c64c 0%, #c47d0e 100%) !important;
   }

   .mobile-bottom-nav-center span {
      font-size: 10px !important;
      font-weight: 800 !important;
      color: #ffffff !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
   }

   .mobile-bottom-nav-center.active span {
      color: #fce8b3 !important;
   }
}