@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

/* ═══════════════════════════════════════════
   ROOT VARIABLES — COLOR PALETTE
═══════════════════════════════════════════ */
:root {
    --praying-mantis: #61A07D;
    --macaw-green: #C6E9C8;
    --green-gecko: #FDA6AB;
    --parmesan: #FAC977;
    --honey-grove: #D24558;
    --deep-forest: #5D300E;
    --mist: #f5ede8;
    --cream: #fff5f0;
    --heading-font: 'Cinzel', serif;
    --display-font: 'Playfair Display', serif;
    --body-font: 'Lato', sans-serif;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-soft: 0 8px 32px rgba(93,48,14,0.10);
    --shadow-card: 0 16px 48px rgba(93,48,14,0.13);
    --transition: all 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ═══════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════ */
#tm-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--deep-forest);
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
#tm-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-ripple {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 28px;
}
.preloader-ripple span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid var(--honey-grove);
    animation: rippleOut 2s ease-out infinite;
    opacity: 0;
}
.preloader-ripple span:nth-child(2) { animation-delay: 0.5s; }
.preloader-ripple span:nth-child(3) { animation-delay: 1s; }
.preloader-ripple-inner {
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--honey-grove), #c4952a);
    animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes rippleOut {
    0%  { transform: scale(0.3); opacity: 1; }
    100%{ transform: scale(1.8); opacity: 0; }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(223,186,86,0.4); }
    50%       { box-shadow: 0 0 28px rgba(223,186,86,0.9); }
}
.preloader-text {
    font-family: var(--heading-font);
    color: var(--honey-grove);
    letter-spacing: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    animation: shimmerText 1.5s ease-in-out infinite;
}
.preloader-sub {
    font-family: var(--body-font);
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-top: 6px;
    text-transform: uppercase;
}
@keyframes shimmerText {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}
.preloader-bar {
    width: 120px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin-top: 22px;
    overflow: hidden;
}
.preloader-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--honey-grove), var(--praying-mantis));
    border-radius: 2px;
    animation: barFill 2.2s ease-in-out forwards;
}
@keyframes barFill {
    0%   { width: 0; }
    100% { width: 100%; }
}

/* ═══════════════════════════════════════════
   GLOBAL RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAM90lEQVR4nH2XeXDVZZbHz733t73fW/Pey8u+bwQSAgRRJCEBEWjQKVziiCDTo9PLVI22pYylTanNTDtTtl2OM/Z0j6Uto6xttG0bUGRPEFAJARL2JS/78rK9/bfee+cPcYpRes6/p+p8vnWWqu9B8JcDQUsLhtZWigGANWUVg6KuVjMzl+uWOZMZdnYgI0PRLQvbjOnUtgZtU+/2ePwHSMz4JP5xxwADAN7SQqC1lQEAvzXkVvESYNgMDANA0eNLZ4enx58qyM5eVZNflPnpmS/xr9Y+Zp4f7Ocu2aFPJBNi27ku8bUf/r115Hyn4+32A0iVlNHU9OTHMKXNgY4PnOc31fwuCn8P3tJCYDOwpr9pUtia6l+Hp0dP33dn49/u+OlGx8oZdePYorpXUc1fPrg++cSyVSw3IwNGr10QDnd30KYZNXFsUX3vUz93Pf/Qhp+UzZ31ldIy75WON98UYTMwaAHy/wv4pl20cn1jyRd6vP2RpSueKQnl0iuDA+nSYJCbzBbml1TSsUScb3p/q9DZd10lgNmau1Ylf3LXvXznyXbx0eblNOQL2i5BGfXKCtFEeHbBwf86CivL86EVKLS0/B8R6Ltw/5q51Umn+Jk5FSnYvnFztKFqBip98nFl11ObTIQJbT1+GA5ePCd43T7QDAP8ThcLeLzcoyhoz9F9ytZ/fMnIyQhpr3/yR2VP+wHXjud/OR1JxP3Pbns77EnDyom9Z6/ePA5088zrNizN606NH//Pv3siR8IkKRMCef6g/U77Ac+uY4dg2ZxFxvzSSrJ8dr1QFspEqiRhxjnEtTS/FonQrv5e+tGJIywv049O9/aQZ1bfzysyQ/TC8JA2moiFXt61JbyyuO6OfW+0TtxgM/TttjdFIqizQD+qYbqouXRmavtPnzb3nO1Av/hgq4o5tjc/8mP+wG13yC6XQwBLB2rpQAQCwAEoZUAkCQCLoOnUfuvIQetXu3fy+uwceLDxLlqUlQubdr7Dvxzq8cg2PpzY8cUy9M2FMQRNTQK0tdmetQteTDrwZhZL2mCbwrolq5Pn+nqQgiW0e9O/4EyPQ0knp4FxDggwV1Un6hkZNjHGvCiUJWtainPOEUIATk8AJmKa3rDpSV5VkEcHo1NC55ULCmBiE69LUNP0mcQfTr0GTU0ChrY2WvroosIUsp8Lig7jhfvWJx2+ANt+aLcrN5Bjn/jX3wh+hStg6aC6vCBgEQRRQuPxBH23rX1ya3v7VDSdpoIgIYGI4HR5gRsp8MlUOff6OySatljntYuKJyPI/qnlhwkPkc004ZsL72vMgbY2igGAR6j5NFdEh2mZ/NxQv6RraVxbWad9+NQmh2VMSjaj/E+nTiUOdnYkOEJcdrrhD8fapryKjN2yA3/0xYlp2eUFBojt7zwd/+Ts1zHKGafmlLT32c1yZV6Zpukp1Nl/XbFsE7giuCZl42cAwFHl2vpgL8IXqYADnFrATAsRRKxjL/6HtbCiQNX0FKQNy/r13r3R2qJiKZ5KGiGPW700OJyoysunBAAujY7gmvwCb3hiXMvy+aSz4bC+8Z5VfkUkgupwwbHL/anmf/6ZzIAJRJI4EgTAFhspnELVOMLxai6RIKKMS0REmAPcf8dSY2FlmTIdnwJFlmE0Nm3PLioitYXF3qaZtf5329u1nsgo3F5eqdSWFAvdvT1o2/E2fVltnW9GfoGnOj9fGIvFbEWSYSo2BY1V5Y575jcZGABEIiKwGeciyY24+UpsYljBgXNAnDMAYAzojxYvRyBy7HU6AQkCiIQQyjhRRAH6JieE+pIy9tDCRtTVG7avDA6hx5YuQ3NLynh4fFyQCQFAAIosciyK4HO5ACTAjy++GxhllH9zd5xj4JaAVgmMs3nAESKIIMO2IBTMtm4vr5TOXbmsfXXtWhoLIptMJqErHBb9bnc8peuqYRlSRU423tPRoSuSSH8wr97x+eVLNK6l6LXRkdT+s518bHpaC7rdKUZtWFhZqS6umiH6/VnWdHqaSERClAHiwG/DHKEc22ZgGAYGy4LKrDzm8XqE0+HrRkw3paA3w7+sts4/Iy/PmojGmWVZ0zZlxtsHDySW19WJd1ZVS28d2J+gjFsE4cl4Wqe1+UXs7ro5vqA3wz+WSMlnentMX4ZXrAzlMm7bYBgGppQCR5CPKeeuDIdKm2bM1sC0oCCQCZzZqLl6pjOupWm+308YcJIXCCqSSKS6krJgwO2RnQ6FJDTdTBk6czkUwaOq8szC4kyLWlKOP6BwQDjP78e6adrNM2e5gFIoDIYALJsvqa7T3JJMGXAPZoxhn+qy76qebQCl3O1wMERNVpQVEgv8fn5xcCCtWzaUZec6e8cj6XBkhC6pqfNmuFz85JVLtCscNn0uF26onuW7NjxoDU1OGEWhkEu3LLgw0J+syAqh3EBAAGpzVVY4UMpX1M7VXLKDUc4Ai4KghSci8osfbfMiRUJxTUOACOimAY8tXertHRvRdV3Ty3Oy8LyScn/b+fOJ8di0zgGpFbl5KODxEs20HWPRae34pYuJ+eWVGVW5uSiWjOsT8ai+vrnZqxkGAMYQ1zQOooife3+Lfzg+LYqI6ALiMEYEUsw4R9y2YHAygiyT8vFYAsZTY7i+rML3ztFDiZq8Ant+eYXcPKvONTg1mRiLRfUtR/e7ARA8sGBRYiQaUxpn1ngRcHPL4f3WpeEhtK6xOfB1Xx8KuZ0gCB7WNzmKEBG4JCncxoARZcNIfrh+N5Kle55YvHLkxPXL7u7hAWnfxpf5sUud8pzCYuiJjEPI54GUljZPXLxgA8ZcIAKm3KaMcQcCxAjGOgAijFMKgKChqloRREFMaDpk+3xwcWgIFlbO0Ve++jypCGUZFaHc1MfnO0LIpLsFCfABg9n3uGXVKPAHpePdHerl0REt5PXLNqNQV1QIo9EolISypYDHJ0VTaTAsEygHYJwBcE4QwqJIMCiiCD6XE5ySDJPJOMzKz4exWAyyvH7oHui1k1PjYnPDslTPxKhoWxZyI+EQLpXVP5spXTt8uSt479wFCUFS+NbP9+OZeSX2l9evQld/P6RME8ITE5DUDMAIA+MAFrXBohQsSoExBgQTIJhAUjNgcGoakroJZ/r64ExfGKpyiuzft39KMoOZtCI7x7w4NOBElOkeLO0Wut5t65Ufnv9Z51DPmoGJyMSjjXdHt+z70H++YUVqbnGl69xAD5iMgmkYZk9khHPOeLbPTznnQBlDAAAEY44QgsHpCUEVJJ7tDyKXQ5WjqSTUl1TB6f6edEfXV54n16ydUEXZiGgxUUBk98C2Y2GBA0C27HylLxVds//cGf+Pm38weeLKOefGLa/Ju3/+aqpQTzkvDvTSjkvdcHawH+d4PBBQnbbNqMiAM0qZQBAxZUlkk8kEGknEcV1eAdRX1tCa4jLiVr3pF373qlxZXJ4u9IfSv//8oD+qpXEOdr46csMNEdTaSl2P3L4jgcy1L6x8aIgyTn6374+hYCCU3vHEi3C254Kr7cJZ5nKorDSYJXDOWVzXsGaaoIgiuB0OEDHhjHN0dWwYDMuARVWzeV3pLL3l314gA5Oj0m8e/YfBy6MD+O0vDuUinX6o7Tr1IG9pIQhe+sYZl19oCPSJxteCQEKbVjwwfH5sWN35+YGMgCfDeutHG+1sr0/pGRsghCAQiQAYMGiWwd2KA4mCwNOmjtKmCTZlUJVbTMfjSf2x374sWYihxqrZqf7IKInahTg8MR6vUtyzL7zbFoGXvjWlNxxx5tpFDTFiH1ZkEflk1Xz67vvG3zjwp9D14T5xXfO9xsO3NyFJEsSpeFQQCEYiwWDaNqQMA0QiQqY3w+aAzO3HD8PWQx9Ls8tn6AtKKrU5RWX6cx+8l52mBs5E0vKxbScPf8v8ni0PrLvzr6a4+YFLUcT7axeMNVRUG4cud6u7Th7xSbKD1hdX2Q2VNVAUzAJVEhHBGBmUsaHpSTh+uRvaL50VJIzpL9asjwWdLquj5wp584TBPIbB9tv44fGdX374rQ/9/mt2I5H114uaJwXzPVuAgsUFVdH6wtJETWEx7e7vlU71XnVdGx8RDdPmGCOWNgzRoSh0OhkT5hSUGqtr58f8bjenSgrhTY5b+RZRK0eDweUau7VYJRAAJQogHFOJkUkiKn6IY1j00Rw0EGDoKhKdFBEGMKj2rNiUNdKmiBFe3yODHhiJ4pxKLfVPqFzuQAdRCq1tJY5h/iKgekAuSATwBkFqGQHpVR7APtA6jXNc0bAPJfQfL+iFLxODUNFXmNoBRTi4IbzALxhxJzRVJAn/3pJqAlnFt+blFIg1WbN3jAWZTIJlDW1z2aATY0BhFMpbMVDVr8lOhfkFxuJAhEYECuCbgA2Z9Z/yFlrr8LKWNZBpRAOJ7KBiAq0OEIGAB4D6fiqTOiobqLiCuJ7lA2f9WLexITFc29JxGSIE5lUIDUJyiCAhJgANGRRwl9AI0EIKsVTkLj/x3FHQXeMeRHAEBhGS4M01qLFJklqGdYKeBe5zTvNHu1g5F0y3LCoMXKqMAAAAASUVORK5CYII=') 16 16, auto !important;
}

body, html {
    font-family: var(--body-font) !important;
    background-color: var(--mist) !important;
    color: var(--deep-forest) !important;
    margin: 0; padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Suppress default Bootstrap backgrounds */
.container, .container-fluid, main, section, .row, [class*="col-"] {
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left  { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right { opacity: 0; transform: translateX(50px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
.navbar-custom, .navbar {
    background: rgba(20, 38, 26, 0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(223,186,86,0.15);
    transition: all 0.4s ease !important;
}
.navbar-custom.scrolled {
    background: rgba(14, 26, 18, 0.99) !important;
    padding: 10px 0 !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.25) !important;
}
.navbar-custom .navbar-brand {
    color: var(--honey-grove) !important;
    font-family: var(--heading-font);
    letter-spacing: 0.5px;
    font-size: 1.05rem !important;
}
.navbar-custom .nav-link {
    color: rgba(240,235,218,0.72) !important;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    padding: 8px 14px !important;
    border-radius: 8px;
    transition: var(--transition) !important;
    position: relative;
}
.navbar-custom .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px; height: 2px;
    background: var(--honey-grove);
    border-radius: 2px;
    transition: transform 0.3s ease;
}
.navbar-custom .nav-link:hover::after,
.navbar-custom .nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}
.navbar-custom .nav-link:hover {
    color: var(--honey-grove) !important;
    background: rgba(223,186,86,0.08) !important;
}
.navbar-custom .nav-link.active {
    color: var(--honey-grove) !important;
    font-weight: 700 !important;
}
.navbar-logo-img {
    transition: transform 0.4s ease, filter 0.4s ease !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 8px rgba(223,186,86,0.3));
}
.navbar-logo-img:hover {
    transform: rotate(8deg) scale(1.12) !important;
    filter: drop-shadow(0 0 12px rgba(223,186,86,0.6));
}

/* ═══════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════ */
.hero-premium, header {
    position: relative;
    background-image: 
        linear-gradient(160deg, rgba(14,26,18,0.85) 0%, rgba(26,48,32,0.55) 60%, rgba(14,24,16,0.7) 100%),
        url('https://teropongmedia.id/wp-content/uploads/2023/02/Telaga-Menjer-1140x498.jpg') !important;
    background-size: cover !important;
    background-position: center 40% !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: var(--cream) !important;
    padding: 160px 0 120px !important;
    overflow: hidden;
}
.hero-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 80%, rgba(113,171,86,0.15) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 20%, rgba(223,186,86,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.hero-premium::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--mist));
    pointer-events: none;
}
.hero-premium h1, header h1 {
    font-family: var(--display-font) !important;
    font-weight: 700;
    color: #fff !important;
    font-size: clamp(2.4rem, 6vw, 4.2rem) !important;
    line-height: 1.15;
    margin-bottom: 22px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
    animation: heroSlideUp 1.1s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}
.hero-premium p, header p {
    color: rgba(255,255,255,0.85) !important;
    font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
    max-width: 620px;
    margin: 0 auto 36px auto;
    font-weight: 300;
    line-height: 1.7;
    animation: heroSlideUp 1.1s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: 0.4s;
    opacity: 0;
}
@keyframes heroSlideUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-btns {
    animation: heroSlideUp 1.1s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: 0.6s;
    opacity: 0;
}
.hero-premium .badge, header .badge {
    background: rgba(223,186,86,0.18) !important;
    color: var(--honey-grove) !important;
    border: 1px solid rgba(223,186,86,0.4) !important;
    padding: 8px 18px;
    font-weight: 600;
    border-radius: 30px;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
/* Scroll hint */
.hero-scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: heroSlideUp 1s ease forwards;
    animation-delay: 1s;
    opacity: 0;
    z-index: 2;
}
.hero-scroll-hint::after {
    content: '';
    width: 1.5px;
    height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
    animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-premium, .btn-primary {
    background: linear-gradient(135deg, var(--honey-grove), #c9981c) !important;
    color: var(--deep-forest) !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 13px 32px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.3px;
    transition: all 0.35s cubic-bezier(.25,.8,.25,1) !important;
    box-shadow: 0 6px 20px rgba(223,186,86,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    position: relative;
    overflow: hidden;
}
.btn-premium::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.btn-premium:hover::before { left: 100%; }
.btn-premium:hover, .btn-primary:hover {
    background: linear-gradient(135deg, #e8c56a, var(--honey-grove)) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(223,186,86,0.45) !important;
    color: var(--deep-forest) !important;
}
.btn-premium:active { transform: translateY(-1px) !important; }

.btn-outline-light {
    border: 2px solid rgba(255,255,255,0.6) !important;
    color: rgba(255,255,255,0.92) !important;
    background: rgba(255,255,255,0.07) !important;
    font-weight: 600;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    backdrop-filter: blur(6px);
    transition: var(--transition);
    font-size: 0.9rem !important;
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.9) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════
   CARDS (GLASS / GLASS-CARD)
═══════════════════════════════════════════ */
.card, .glass-card {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(26,48,32,0.09) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: transform 0.38s cubic-bezier(.25,.8,.25,1), box-shadow 0.38s ease !important;
    color: var(--deep-forest) !important;
    overflow: hidden;
}
.card:hover, .glass-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-card) !important;
}
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,
.card-body h5,.card-title {
    font-family: var(--heading-font);
    color: var(--deep-forest) !important;
}
.card .btn {
    background: linear-gradient(135deg, var(--honey-grove), #c9981c) !important;
    color: var(--deep-forest) !important;
    border: none;
    font-size: 0.85rem;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(223,186,86,0.25);
}
.card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(223,186,86,0.4);
}

/* ═══════════════════════════════════════════
   ATMOSFER SECTION
═══════════════════════════════════════════ */
.atmosfer-section {
    background: linear-gradient(160deg, #f0f5ed 0%, #e8f0e4 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.atmosfer-section::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(113,171,86,0.12), transparent 70%);
    pointer-events: none;
}
.text-justify {
    text-align: justify;
    line-height: 1.85;
    color: #2a3d2e !important;
    font-size: 1rem;
    font-weight: 400;
}
.atmosfer-section h2 {
    color: var(--deep-forest) !important;
    font-family: var(--display-font) !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
}
.atmosfer-section .img-fluid {
    transition: transform 0.55s cubic-bezier(.25,.8,.25,1), box-shadow 0.55s ease;
    border: 3px solid rgba(223,186,86,0.3);
    box-shadow: 0 20px 50px rgba(26,48,32,0.15);
}
.atmosfer-section .img-fluid:hover {
    transform: scale(1.025);
    box-shadow: 0 28px 60px rgba(26,48,32,0.2);
}

/* ═══════════════════════════════════════════
   SECTION HEADINGS
═══════════════════════════════════════════ */
.section-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--honey-grove);
    margin-bottom: 12px;
}
.section-divider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--honey-grove), var(--praying-mantis));
    border-radius: 3px;
    margin: 16px auto;
}

/* ═══════════════════════════════════════════
   FACILITY PILLS
═══════════════════════════════════════════ */
.facility-pill, .service-badge {
    background: rgba(161,184,70,0.15) !important;
    color: #2a4a1e !important;
    border: 1px solid rgba(161,184,70,0.3) !important;
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   BACKEND CARD (Perahu)
═══════════════════════════════════════════ */
.backend-card {
    transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s ease !important;
}
.backend-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 50px rgba(26,48,32,0.18) !important;
}
.backend-card img {
    transition: transform 0.55s ease;
}
.backend-card:hover img {
    transform: scale(1.06);
}

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.home-cta-section {
    background: linear-gradient(135deg, #1a3020 0%, #253c28 50%, #0e1a10 100%) !important;
    border-radius: var(--radius-lg) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(113,171,86,0.15);
    box-shadow: 0 24px 60px rgba(14,26,18,0.3);
}
.home-cta-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223,186,86,0.12), transparent 70%);
}
.home-cta-section::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(113,171,86,0.1), transparent 70%);
}
.btn-wame {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.btn-wame:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(223,186,86,0.35) !important;
}

/* ═══════════════════════════════════════════
   RESERVASI CARD
═══════════════════════════════════════════ */
.card-reservasi-custom {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid rgba(163,128,43,0.2) !important;
    border-radius: var(--radius-lg) !important;
    padding: 28px !important;
    box-shadow: 0 16px 40px rgba(44,30,17,0.1) !important;
}
.card-reservasi-custom h3, .card-reservasi-custom h4 {
    color: var(--deep-forest) !important;
    font-family: var(--display-font);
    font-weight: 700 !important;
}
.text-reservasi-jelas {
    color: #3a2a18 !important;
    font-weight: 500 !important;
    line-height: 1.65;
}
.btn-reservasi-custom {
    background: linear-gradient(135deg, var(--honey-grove), #c9981c) !important;
    color: var(--deep-forest) !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 13px 28px !important;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(223,186,86,0.28);
}
.btn-reservasi-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(223,186,86,0.4) !important;
}

/* ═══════════════════════════════════════════
   UMKM CARDS
═══════════════════════════════════════════ */
.umkm-card, .umkm-product-card {
    transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s ease;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(113,171,86,0.15) !important;
    overflow: hidden;
}
.umkm-card:hover, .umkm-product-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 48px rgba(26,48,32,0.18) !important;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY GLOBALS
═══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    color: var(--deep-forest) !important;
    font-weight: 700 !important;
}
.text-muted { color: #4d6152 !important; }
body { color: #1a2d20 !important; font-weight: 400 !important; }

/* ═══════════════════════════════════════════
   PAYMENT CARD
═══════════════════════════════════════════ */
.payment-card {
    transition: var(--transition);
    border-radius: var(--radius-sm) !important;
}
.payment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    border-color: var(--honey-grove) !important;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
    background: linear-gradient(135deg, #122116 0%, #1a3020 60%, #0e1810 100%) !important;
    color: rgba(240,235,218,0.75) !important;
    padding: 36px 0 !important;
    margin-top: 60px;
    border-top: 1px solid rgba(223,186,86,0.15) !important;
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--honey-grove), transparent);
}
footer p { color: rgba(240,235,218,0.65) !important; }

/* ═══════════════════════════════════════════
   FLOATING WA BUTTON
═══════════════════════════════════════════ */
.floating-wa-btn {
    position: fixed;
    bottom: 30px; right: 30px;
    background: linear-gradient(135deg, #25D366, #1eb358);
    color: white !important;
    width: 62px; height: 62px;
    border-radius: 50px;
    font-size: 30px;
    z-index: 9998;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(.25,.8,.25,1);
    overflow: hidden;
    white-space: nowrap;
    padding: 0 18px;
    box-shadow: 0 8px 28px rgba(37,211,102,0.4);
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.floating-wa-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 70%);
}
.floating-wa-btn .wa-text-hover {
    font-size: 0; opacity: 0;
    font-family: var(--body-font);
    font-weight: 700; font-size: 0;
    transition: all 0.3s ease;
}
.floating-wa-btn:hover {
    width: 178px; border-radius: 32px;
    box-shadow: 0 14px 36px rgba(37,211,102,0.5);
    background: linear-gradient(135deg, #2adf6b, #20ba5a);
}
.floating-wa-btn:hover .wa-text-hover {
    font-size: 15px; opacity: 1; margin-left: 10px;
}
@media (max-width: 768px) {
    .floating-wa-btn { bottom: 22px; right: 22px; width: 56px; height: 56px; font-size: 26px; }
    .floating-wa-btn:hover { width: 56px; border-radius: 50%; }
    .floating-wa-btn:hover .wa-text-hover { display: none; }
    .hero-premium, header { background-attachment: scroll !important; padding: 120px 0 90px !important; }
}

/* ═══════════════════════════════════════════
   ANIMATE SECTION (legacy compat)
═══════════════════════════════════════════ */
.animate-section {
    animation: fadeInUp 0.9s cubic-bezier(.22,.61,.36,1) forwards;
    opacity: 0;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   BADGE global override
═══════════════════════════════════════════ */
span.tm-pill, .tm-pill-pending {
    font-size: 0.75rem;
}



#custom-cursor {
    width: 36px;
    height: 36px;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
}

#custom-cursor svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

#custom-cursor.clicking {
    transform: translate(-50%, -50%) scale(0.85);
}


/* — CUSTOM CURSOR — */
html { cursor: none !important; }
body { cursor: none !important; }
* { cursor: none !important; }
a, button, input, select, textarea, label { cursor: none !important; }

/* === BACKGROUND & BODY GLOBAL === */
body.tm-body {
    background-color: #fff5f0 !important;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(250,201,119,0.13) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(198,233,200,0.15) 0%, transparent 50%),
        radial-gradient(circle at 60% 30%, rgba(210,69,88,0.07) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D24558' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    min-height: 100vh;
}

/* Section backgrounds */
section {
    background: transparent !important;
}

.container, .container-fluid {
    position: relative;
}

/* Card glow effect */
.tm-card, .card, .backend-card {
    background: rgba(255,245,240,0.92) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(210,69,88,0.1) !important;
}

/* Soft section divider */
.animate-section:nth-child(even) {
    background: linear-gradient(135deg, rgba(198,233,200,0.15), rgba(250,201,119,0.1)) !important;
    border-radius: 24px;
    padding: 2rem !important;
    margin-bottom: 1rem;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fff5f0; }
::-webkit-scrollbar-thumb { background: linear-gradient(#D24558, #FAC977); border-radius: 4px; }

/* === FORCE BACKGROUND SEMUA SECTION === */
html {
    background-color: #fff5f0 !important;
}
body, body.tm-body {
    background-color: #fff5f0 !important;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(250,201,119,0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(198,233,200,0.18) 0%, transparent 45%),
        radial-gradient(circle at 70% 20%, rgba(210,69,88,0.08) 0%, transparent 35%) !important;
}
section, .section, div[class*="section"], .container, .container-fluid,
.tm-shell, .tm-main, .card, .tm-card, .backend-card,
[style*="background: white"], [style*="background:#fff"],
[style*="background: #fff"], [style*="background-color: white"],
[style*="background-color:#fff"], [style*="background-color: #fff"] {
    background-color: transparent !important;
    background: transparent !important;
}
.navbar-custom, nav.navbar {
    background-color: #5D300E !important;
}
footer, .footer {
    background-color: #5D300E !important;
}
.card, .tm-card, .backend-card {
    background: rgba(255,245,240,0.85) !important;
    border: 1px solid rgba(210,69,88,0.12) !important;
    backdrop-filter: blur(6px);
}

/* === EFEK TAMBAHAN BIAR KEREN === */

/* Floating particles background */
body.tm-body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle 2px at 10% 20%, rgba(210,69,88,0.4) 0%, transparent 100%),
        radial-gradient(circle 2px at 30% 60%, rgba(250,201,119,0.5) 0%, transparent 100%),
        radial-gradient(circle 2px at 50% 30%, rgba(97,160,125,0.4) 0%, transparent 100%),
        radial-gradient(circle 2px at 70% 80%, rgba(210,69,88,0.3) 0%, transparent 100%),
        radial-gradient(circle 2px at 90% 40%, rgba(250,201,119,0.4) 0%, transparent 100%),
        radial-gradient(circle 3px at 20% 90%, rgba(97,160,125,0.3) 0%, transparent 100%),
        radial-gradient(circle 2px at 80% 10%, rgba(210,69,88,0.3) 0%, transparent 100%);
}


    100% { left: 160%; }
}

/* Glow pada heading */
h1, h2 {
    text-shadow: 0 2px 20px rgba(210,69,88,0.08);
}

/* Glass card hover glow */
.glass-card {
    background: rgba(255,245,240,0.7) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(210,69,88,0.15) !important;
    transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1) !important;
    position: relative;
    overflow: hidden;
}
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, #D24558, #FAC977, transparent);
    transition: left 0.5s ease;
}
.glass-card:hover::before {
    left: 100%;
}
.glass-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(210,69,88,0.18) !important;
    border-color: rgba(210,69,88,0.3) !important;
}

/* Backend card hover */
.backend-card {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
.backend-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(250,201,119,0.05), rgba(210,69,88,0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.backend-card:hover::after { opacity: 1; }
.backend-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 16px 40px rgba(210,69,88,0.15) !important;
}

/* Tombol premium pulse */
.btn-premium {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #D24558, #FAC977) !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s ease !important;
}
.btn-premium::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}
.btn-premium:hover::before {
    width: 300px; height: 300px;
}
.btn-premium:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(210,69,88,0.4) !important;
}

/* Reveal animasi lebih smooth */
.reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25,0.8,0.25,1) !important;
}
.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
    opacity: 1 !important;
    transform: translate(0) !important;
}

/* Gambar zoom hover */
.img-fluid, .gallery-wrapper img, .rounded-3 img {
    transition: transform 0.5s ease !important;
}
.img-fluid:hover, .gallery-wrapper:hover img {
    transform: scale(1.04) !important;
}

/* Badge glow */
.badge, span.badge {
    box-shadow: 0 2px 12px rgba(210,69,88,0.25);
}

/* Divider garis animasi */
div[style*="width: 60px"][style*="height: 3px"] {
    position: relative;
    overflow: visible !important;
}
div[style*="width: 60px"][style*="height: 3px"]::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.6);
    animation: barShine 2.5s infinite;
}
@keyframes barShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Navbar link underline animasi */
.navbar-nav .nav-link {
    position: relative;
}
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    width: 0; height: 2px;
    background: #FAC977;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 80%;
}

/* Scroll hint animasi */
.hero-scroll-hint {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ===== EFEK WOW ===== */

/* 1. Floating orbs animasi di background */
body.tm-body::after {
    content: '';
    position: fixed;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(210,69,88,0.08) 0%, transparent 70%);
    top: -100px; right: -100px;
    animation: floatOrb1 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes floatOrb1 {
    0%, 100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(-30px, 40px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}


    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 3. Card tilt 3D effect */
.glass-card, .backend-card {
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1) !important;
}

/* 4. Garis border animasi pada section */
.animate-section {
    position: relative;
}
.animate-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #D24558, #FAC977, transparent);
    transition: width 1.2s ease;
}
.animate-section.visible::before {
    width: 80%;
}

/* 5. Image overlay gradient hover */
.backend-card .position-relative::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(93,48,14,0.5) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}
.backend-card:hover .position-relative::after {
    opacity: 1;
}

/* 6. Navbar blur glassmorphism */
nav.navbar {
    backdrop-filter: blur(20px) !important;
    background: rgba(26,48,32,0.92) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.15) !important;
    border-bottom: 1px solid rgba(250,201,119,0.2) !important;
}

/* 7. Footer wave */
footer {
    position: relative;
    overflow: hidden;
}
footer::before {
    content: '';
    position: absolute;
    top: -20px; left: 0;
    width: 200%; height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40'%3E%3Cpath fill='%23fff5f0' d='M0,20 C360,40 1080,0 1440,20 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
    background-size: 50% 100%;
    animation: waveAnim 8s linear infinite;
}
@keyframes waveAnim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 8. Scroll reveal stagger untuk cards */
.row .col-md-4:nth-child(1) .glass-card,
.row .col-md-4:nth-child(1) .backend-card { animation-delay: 0s; }
.row .col-md-4:nth-child(2) .glass-card,
.row .col-md-4:nth-child(2) .backend-card { animation-delay: 0.1s; }
.row .col-md-4:nth-child(3) .glass-card,
.row .col-md-4:nth-child(3) .backend-card { animation-delay: 0.2s; }

/* 9. Tombol glow pulse */
.btn-premium {
    animation: btnPulse 3s ease infinite;
}
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(210,69,88,0.3); }
    50% { box-shadow: 0 4px 30px rgba(210,69,88,0.6), 0 0 60px rgba(250,201,119,0.2); }
}

/* 10. Galeri foto hover caption */
.rounded-3.overflow-hidden {
    position: relative;
    overflow: hidden !important;
}
.rounded-3.overflow-hidden::after {
    content: '📸 Telaga Menjer';
    position: absolute;
    bottom: -40px;
    left: 0; right: 0;
    background: linear-gradient(to top, rgba(93,48,14,0.85), transparent);
    color: white;
    font-size: 0.8rem;
    padding: 8px 12px;
    transition: bottom 0.3s ease;
    text-align: center;
}
.rounded-3.overflow-hidden:hover::after {
    bottom: 0;
}

/* 11. Typewriter cursor pada hero subtitle */
.hero-premium p.lead::after {
    content: '|';
    animation: blink 1s infinite;
    color: #FAC977;
    font-weight: 100;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* === HEADING GLOW AMAN === */
.hero-premium h1, header h1 {
    color: #ffffff !important;
    text-shadow: 0 0 30px rgba(250,201,119,0.6), 0 2px 20px rgba(0,0,0,0.5) !important;
    -webkit-text-fill-color: unset !important;
}
h2.fw-bold, h2.display-5 {
    color: var(--deep-forest) !important;
    text-shadow: 0 2px 15px rgba(210,69,88,0.1) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Fix scroll hint dobel */
.hero-scroll-hint {
    display: block !important;
}

/* === NAVBAR TEXT COLOR FIX === */
nav.navbar .navbar-brand,
nav.navbar .nav-link,
nav.navbar .navbar-nav .nav-link {
    color: #FAC977 !important;
}
nav.navbar .nav-link:hover,
nav.navbar .nav-link.active {
    color: #ffffff !important;
}




.card, .tm-card, .glass-card, .backend-card, .umkm-card, .payment-card,
div[style*="background: #ffffff"], div[style*="background:#ffffff"],
div[style*="background: rgba(255, 255, 255"], div[style*="background:rgba(255,255,255"] {
    background-color: #61A07D !important;
    background: #61A07D !important;
}

/* === CARD COLOR HARMONIOUS === */
.card, .tm-card, .glass-card, .backend-card, .umkm-card, .payment-card,
div[style*="background: #ffffff"], div[style*="background:#ffffff"],
div[style*="background: rgba(255, 255, 255"], div[style*="background:rgba(255,255,255"] {
    background-color: #e8f5e9 !important;
    background: #e8f5e9 !important;
    border: 1px solid rgba(97,160,125,0.2) !important;
}

/* === FIX PRELOADER BACKGROUND === */
#tm-preloader {
    background-color: #C6E9C8 !important;
}
#tm-preloader .preloader-text,
#tm-preloader .preloader-sub {
    color: #5D300E !important;
}
#tm-preloader .preloader-ripple {
    border-color: #61A07D !important;
}
#tm-preloader .preloader-ripple-inner {
    background-color: #D24558 !important;
}
#tm-preloader .preloader-bar-fill {
    background: linear-gradient(90deg, #61A07D, #D24558, #FAC977) !important;
}