/**
 * Theme Name:        Omahku Properti Terbaru
 * Description:       Custom Theme Properti Website
 * Version:           1.0.6
 * Author:            KusenaDev
 * Author URI:        https://kusendev.my.id
 * Text Domain:       omahku-properti
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */
html { overflow-x: clip; }
body { overflow-x: clip; }#property-nav span,.category-badge,.custom-status,.features,.gallery-container,.no-posts{text-align:center}.btn-custom,.category-badge:hover,.logo,.no-posts .btn,.read-more,.site-footer a,.site-footer a:hover,.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover,.site-mobile-menu .site-nav-wrap>li>a{text-decoration:none}:root{--primary-color:#00a859;--hover-color:#066e3e;--thumbnail-height:12rem;--border-radius:0.5rem;--card-body-height:13.5rem}.text-property{color:var(--primary-color)!important}.site-nav{padding-top:1.25rem;padding-bottom:1.25rem;position:absolute;z-index:9;width:100%}.site-nav .h1,.site-nav h1{margin:0;padding:0;font-size:1.5rem}.logo{font-size:1.5rem;color:rgba(255,255,255,.8)!important;font-weight:500}.logo:hover{color:#fff!important}.menu-bg-wrap{background-color:var(--primary-color);padding:1.25rem 1.875rem;position:relative;float:left;width:100%;border-radius:.4375rem;-webkit-box-shadow:0 .9375rem 1.875rem -.9375rem rgba(0,0,0,.1);box-shadow:0 .9375rem 1.875rem -.9375rem rgba(0,0,0,.1)}.site-nav .site-navigation .site-menu{margin-bottom:0}.single .social li,.site-footer .social li,.site-nav .site-navigation .site-menu>li,.tns-autowidth,.tns-vpfix>div,.tns-vpfix>li{display:inline-block}.site-nav .site-navigation .site-menu>li>a{font-size:.875rem;padding:.625rem .9375rem;display:inline-block;text-decoration:none!important;color:rgba(255,255,255,.5)}.site-nav .site-navigation .site-menu .has-children:active>a,.site-nav .site-navigation .site-menu .has-children:focus>a,.site-nav .site-navigation .site-menu .has-children:hover>a,.site-nav .site-navigation .site-menu>li.active>a,.site-nav .site-navigation .site-menu>li>a:hover,nav[aria-label=breadcrumb] a{color:#fff}.site-nav .site-navigation .site-menu>li.cta-button a{padding:.375rem 1.25rem;border:.125rem solid rgba(0,0,0,.1);color:#000;border-radius:1.875rem}.site-nav .site-navigation .site-menu>li.cta-button a:hover{color:#000;background:#00204a;border-color:#00204a}.hero-slide .img.overlay,.hero.overlay,.img-about.dots,.img-property-slide-wrap,.property-slider-wrap,.site-nav .site-navigation .site-menu .has-children{position:relative}.site-nav .site-navigation .site-menu .has-children>a{position:relative;padding-right:1.25rem}.site-nav .site-navigation .site-menu .has-children>a:before{position:absolute;content:"\e313";font-size:.875rem;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-family:icomoon}.site-nav .site-navigation .site-menu .has-children .dropdown{visibility:hidden;opacity:0;top:100%;z-index:999;position:absolute;text-align:left;-webkit-box-shadow:0 .125rem .625rem -.125rem rgba(0,0,0,.1);box-shadow:0 .125rem .625rem -.125rem rgba(0,0,0,.1);padding:1.25rem 0;margin-top:1.25rem;margin-left:0;background:#fff;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}.site-nav .site-navigation .site-menu .has-children .dropdown.arrow-top{position:absolute}.site-nav .site-navigation .site-menu .has-children .dropdown.arrow-top:before{bottom:100%;left:20%;border:.625rem solid rgba(136,183,213,0);content:" ";height:0;width:0;position:absolute;pointer-events:none;display:none;border-bottom-color:#fff;margin-left:-.625rem}.site-nav .site-navigation .site-menu .has-children .dropdown a{font-size:.875rem;text-transform:none;letter-spacing:normal;-webkit-transition:none;-o-transition:none;transition:none;color:#000}.site-nav .site-navigation .site-menu .has-children .dropdown .active a,.sticky-wrapper.is-sticky .site-navbar .site-menu>li.active a,.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a.active,.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a:hover{color:#00204a!important}.site-nav .site-navigation .site-menu .has-children .dropdown>li{list-style:none;padding:0;margin:0;min-width:11.25rem}.site-nav .site-navigation .site-menu .has-children .dropdown>li>a{text-decoration:none;padding:.3125rem 1.25rem;display:block}.site-mobile-menu .site-nav-wrap a:hover,.site-mobile-menu .site-nav-wrap li.active>a,.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children:active>a,.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children:focus>a,.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children:hover>a,.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>.dropdown li a:hover,.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>ul li a:hover,.site-nav .site-navigation .site-menu .has-children .dropdown>li>a:hover{color:#00204a}.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>a:before{content:"\e315";right:1.25rem}.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>.dropdown,.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>ul{left:100%;top:0}.site-nav .site-navigation .site-menu .has-children:active,.site-nav .site-navigation .site-menu .has-children:focus,.site-nav .site-navigation .site-menu .has-children:hover,.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.site-nav .site-navigation .site-menu .has-children:active>.dropdown,.site-nav .site-navigation .site-menu .has-children:focus>.dropdown,.site-nav .site-navigation .site-menu .has-children:hover>.dropdown{-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s;margin-top:0;visibility:visible;opacity:1}.site-mobile-menu-close{display:block;position:relative;height:1.875rem;width:1.875rem;z-index:99;cursor:pointer;top:-1.25rem}.site-mobile-menu-close>span{cursor:pointer;display:block;position:absolute;height:1.875rem;width:1.875rem}.site-mobile-menu-close>span:after,.site-mobile-menu-close>span:before{position:absolute;content:"";width:.125rem;height:1.875rem;background:#000}.site-mobile-menu-close>span:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.site-mobile-menu-close>span:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.site-mobile-menu{width:18.75rem;position:fixed;right:0;z-index:2000;padding-top:1.25rem;background:#fff;height:calc(100vh);-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:.8s cubic-bezier(.23, 1, .32, 1);-o-transition:.8s cubic-bezier(.23, 1, .32, 1);transition:.8s cubic-bezier(.23, 1, .32, 1)}.hero,.hero-slide .img{background-size:cover;background-position:center center}.offcanvas-menu .site-mobile-menu{-webkit-box-shadow:-.625rem 0 1.25rem -.625rem rgba(0,0,0,.1);box-shadow:-.625rem 0 1.25rem -.625rem rgba(0,0,0,.1);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.site-mobile-menu .site-mobile-menu-header{width:100%;float:left;padding-left:1.25rem;padding-right:1.25rem}.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close{float:right;margin-top:.5rem}.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span{font-size:1.875rem;display:inline-block;padding-left:.625rem;padding-right:0;line-height:1;cursor:pointer;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo{float:left;margin-top:.625rem;margin-left:0}.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a{display:inline-block;text-transform:uppercase}.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img{max-width:4.375rem}.site-mobile-menu .site-mobile-menu-body{overflow-y:scroll;-webkit-overflow-scrolling:touch;position:relative;padding:0 1.25rem 9.375rem;height:calc(100vh - 3.25rem)}.site-mobile-menu .site-nav-wrap{padding:0;margin:0;list-style:none;position:relative}.box-feature,.hero .heading,.hero .lead{margin-bottom:1.875rem}.site-mobile-menu .site-nav-wrap a{padding:.3125rem 1.25rem;display:block;position:relative;color:#000}.site-mobile-menu .site-nav-wrap li{position:relative;display:block}.site-mobile-menu .site-nav-wrap .arrow-collapse{position:absolute;right:0;top:0;z-index:20;width:2.25rem;height:2.25rem;text-align:center;cursor:pointer;border-radius:50%;border:.0625rem solid #f8f9fa}.site-mobile-menu .site-nav-wrap .arrow-collapse:before{font-size:.875rem;z-index:20;font-family:icomoon;content:"\e313";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(-180deg);-ms-transform:translate(-50%,-50%) rotate(-180deg);transform:translate(-50%,-50%) rotate(-180deg);-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.sticky-wrapper .site-navbar,body:before{-webkit-transition:.3s;-o-transition:.3s}.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before{-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.site-mobile-menu .site-nav-wrap>li{display:block;position:relative;float:left;width:100%}.site-mobile-menu .site-nav-wrap>li>a{padding-left:1.25rem;font-size:.875rem}.site-mobile-menu .site-nav-wrap>li>ul{padding:0;margin:0;list-style:none}.site-mobile-menu .site-nav-wrap>li>ul>li,.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li{display:block}.site-mobile-menu .site-nav-wrap>li>ul>li>a{padding-left:2.5rem;font-size:.875rem}.site-mobile-menu .site-nav-wrap>li>ul>li>ul{padding:0;margin:0}.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a{font-size:.875rem;padding-left:3.75rem}.sticky-wrapper{position:absolute;z-index:100;width:100%}.sticky-wrapper .site-navbar{transition:.3s}.sticky-wrapper .site-navbar .site-logo a,.sticky-wrapper .site-navbar .site-menu-toggle{color:#000}.sticky-wrapper .site-navbar .site-menu>li>a{color:rgba(0,0,0,.8)!important}.sticky-wrapper .site-navbar .site-menu>li>a.active,.sticky-wrapper .site-navbar .site-menu>li>a:hover,.sticky-wrapper.is-sticky .site-navbar .site-logo a,.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a{color:#000!important}.sticky-wrapper.is-sticky .burger span,.sticky-wrapper.is-sticky .burger:after,.sticky-wrapper.is-sticky .burger:before{background:#000;-webkit-transition:none;-o-transition:none;transition:none}.hero .form-search select.form-control,.hero .form-search select.form-control:focus,.hero .form-search select.form-control:hover{background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22%3E%3Cpath fill=%22%23005555%22 d=%22M7 10l5 5 5-5z%22/%3E%3C/svg%3E')}.hero,.hero-slide .img{background-repeat:no-repeat}.sticky-wrapper.is-sticky .site-navbar{background:#000;border-bottom:.0625rem solid transparent;-webkit-box-shadow:.25rem 0 1.25rem -.3125rem rgba(0,0,0,.1);box-shadow:.25rem 0 1.25rem -.3125rem rgba(0,0,0,.1)}.sticky-wrapper .shrink{padding-top:0!important;padding-bottom:0!important}.hero{position:relative;background-color:#00204a}.hero.overlay:before{background-color:rgba(0,0,0,.5);content:"";position:absolute;left:0;right:0;bottom:0;top:0;z-index:1}.hero,.hero>.container>.row{height:100vh;min-height:37.5rem}.hero.page-inner,.hero.page-inner>.container>.row{height:70vh;min-height:18.75rem}.hero>.container,.img-about img{position:relative;z-index:2}.hero .heading{color:#fff;font-size:clamp(1.5rem, 2.5vw, 2.5rem);font-weight:600}.hero .lead,.site-footer,body{font-size:.875rem}.hero .lead{color:#fff}#property-nav .next:hover,#property-nav .prev:hover,#property-nav span,.no-posts h2,.widget.contact span{color:var(--primary-color)}.hero .narrow-w{margin:0 auto;padding:1rem;background-color:rgba(255,255,255,.9);border-radius:1.875rem;-webkit-box-shadow:0 8px 15px rgba(0,0,0,.1);box-shadow:0 8px 15px rgba(0,0,0,.1)}.hero .form-search .form-control{padding:1.125rem 1.25rem;border:2px solid #ccc;border-radius:1rem;font-size:1rem;margin-right:.625rem}.hero .form-search .form-control:focus,.hero .form-search .form-control:hover{outline:0;box-shadow:0 0 10px rgba(0,85,85,.3);border-color:var(--hover-color);background-color:rgba(255,255,255,.95)}.hero .form-search .btn{background-color:var(--primary-color);padding-left:1.875rem;padding-right:1.875rem;color:#fff;border-radius:1.875rem;font-weight:700}.hero .form-search .btn:focus,.hero .form-search .btn:hover{outline:0;background-color:var(--hover-color);transform:translateY(-2px)}.hero .form-search select.form-control{padding:1.125rem 1.25rem;border-radius:1rem;border:2px solid #ccc;appearance:none;background-color:#fff;background-repeat:no-repeat;background-position:right 1.5rem center;background-size:1.3rem 1.3rem;-moz-appearance:none;-webkit-appearance:none;appearance:none}.hero .form-search select.form-control:focus,.hero .form-search select.form-control:hover{box-shadow:0 0 10px rgba(0,85,85,.3);border-color:var(--primary-color);background-color:rgba(255,255,255,.95)}.hero .form-search .btn,.hero .form-search .form-control,.hero .form-search select.form-control{transition:.3s ease-in-out}.hero-slide{top:0;position:absolute;left:0;right:0}.hero-slide .img{height:100vh;min-height:37.5rem}.hero-slide .img.overlay:before{content:"";position:absolute;left:0;right:0;bottom:0;top:0;z-index:1;background:rgba(34,34,34,.4)}.burger{width:1.75rem;height:2rem;cursor:pointer;position:relative}.burger.light span,.burger.light:after,.burger.light:before{background:#fff}.burger span,.burger:after,.burger:before{width:100%;height:.125rem;display:block;background:#000;border-radius:.125rem;position:absolute;opacity:1}.burger:after,.burger:before{-webkit-transition:top .35s cubic-bezier(.23, 1, .32, 1),-webkit-transform .35s cubic-bezier(.23, 1, .32, 1),opacity .35s cubic-bezier(.23, 1, .32, 1),background-color 1.15s cubic-bezier(.86, 0, .07, 1);transition:top .35s cubic-bezier(.23, 1, .32, 1),transform .35s cubic-bezier(.23, 1, .32, 1),opacity .35s cubic-bezier(.23, 1, .32, 1),background-color 1.15s cubic-bezier(.86, 0, .07, 1),-webkit-transform .35s cubic-bezier(.23, 1, .32, 1);-o-transition:top .35s cubic-bezier(.23, 1, .32, 1),transform .35s cubic-bezier(.23, 1, .32, 1),opacity .35s cubic-bezier(.23, 1, .32, 1),background-color 1.15s cubic-bezier(.86, 0, .07, 1);content:""}.burger:before{top:.25rem}.burger span{top:.9375rem}.burger:after{top:1.625rem}.burger:hover:before{top:.4375rem}.burger:hover:after{top:1.4375rem}.burger.active span,img[data-lazyloaded]{opacity:0}.burger.active:after,.burger.active:before{top:40%}.burger.active:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}.burger.active:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg)}.burger:focus,.img-property-slide-wrap .tns-nav button:active,.img-property-slide-wrap .tns-nav button:focus,.property-slider-wrap .tns-nav button:active,.property-slider-wrap .tns-nav button:focus{outline:0}body{font-family:"Work Sans",sans-serif;font-weight:400}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:9;background-color:rgba(0,0,0,.5);transition:.3s;opacity:0;visibility:hidden}#property-nav span,a{-webkit-transition:.3s;-o-transition:.3s}body.offcanvas-menu:before{opacity:1;visibility:visible}.h1,.h2,.h3,.h4,.h5,.logo,h1,h2,h3,h4,h5{font-family:"Work Sans",sans-serif;color:#00204a}a{text-decoration:none!important;transition:.3s}.section{padding-top:4rem;padding-bottom:4rem}.section .heading{font-weight:500}@media (max-width:760.4988rem){.section .heading{font-size:2.25rem}}.button-property{background-color:var(--primary-color)!important}.img-property-slide-wrap .tns-outer .tns-inner,.property-slider-wrap .tns-outer .tns-inner{padding-bottom:6.25rem!important}.img-property-slide-wrap .tns-nav,.property-slider-wrap .tns-nav{position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:2.5rem;z-index:2}.img-property-slide-wrap .tns-nav button,.property-slider-wrap .tns-nav button{background:0 0;border:none;display:inline-block;margin:.125rem;position:relative}.single .social li a,.site-footer .social li a{width:2.5rem;height:2.5rem;border-radius:40%;position:relative}#property-nav{position:absolute;width:100%;bottom:4rem}#property-nav span{display:inline-block;cursor:pointer;padding:.4375rem 1.25rem;border-radius:1.875rem;background:rgba(0,32,74,.1);transition:.3s}#property-nav span.active,#property-nav span:hover{background:var(--primary-color);color:#fff!important}#property-nav .next,#property-nav .prev{position:absolute;cursor:pointer}#property-nav .prev{left:0}#property-nav .next{right:0}.img-property-slide-wrap .tns-nav button:before,.property-slider-wrap .tns-nav button:before{position:absolute;content:"";width:.4375rem;height:.4375rem;border-radius:50%;background-color:rgba(0,0,0,.2);right:0;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.img-property-slide-wrap .tns-nav button.tns-nav-active:before,.property-slider-wrap .tns-nav button.tns-nav-active:before{background-color:#00204a}.features{padding-top:1.875rem;position:relative;z-index:8;background-color:rgba(0,32,74,.05)}.layer,.load{position:fixed}.box-feature-top{min-height:20rem}.box-feature-bottom{min-height:28.5rem}.box-feature{background:#fff;border-radius:.25rem;padding:1.875rem}.box-feature .h3,.box-feature h3{font-size:1rem;margin:0;padding:0;font-weight:700}.box-feature h3.top{min-height:2.425rem}.box-feature h3.bottom{min-height:4.797rem}.box-feature [class^=flaticon-]{color:var(--primary-color);font-size:3.75rem;margin:0 0 .625rem;display:block;padding:0;line-height:0}.site-footer{background:#001022;color:#fff;padding:3rem 3rem 0rem 3rem;}.site-footer a{color:#fff;position:relative;display:inline-block}.site-footer a:hover{color:#fff}.site-footer a:hover:before{background:var(--primary-color)}.site-footer .footer-cta .h2,.site-footer .footer-cta h2{font-size:1.875rem;color:var(--primary-color)}.none,.single .social li a:before,.site-footer .btn:before,.site-footer .social li a:before,.tns-controls,.tns-nav,button[data-action=stop]{display:none}.site-footer .widget{margin-bottom:2.5rem;display:block}.site-footer .widget .h3,.site-footer .widget h3{font-size:.75rem;font-weight:700;text-transform:uppercase;margin-bottom:.9375rem;color:var(--primary-color)}.site-footer .widget .links{width:9.375rem}.site-footer .widget .links li{margin-bottom:.625rem}.site-footer .social li a{display:inline-block;background:#fff}.site-footer .social li a>span{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:var(--primary-color)}.site-footer .social li a:hover{background:var(--primary-color);color:#fff}.single .social li a{display:inline-block;background:var(--primary-color)}.single .social li a>span{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.rumah-detail{padding:20px;border-radius:5px;margin:20px 0}.rumah-detail h2{margin-top:0}.detail-left,.detail-right{flex:1;margin-right:20px}.detail-left:last-child,.detail-right:last-child{margin-right:0}.detail-left ul,.detail-right ul{list-style-type:none;padding:0}.detail-left li,.detail-right li{margin:5px 0}.section-4{background-color:#fff}.section-4 .img-about{background-size:cover;background-position:center center}.section-4 .img-about img{-o-object-fit:cover;object-fit:cover}.img-about.dots:after{position:absolute;z-index:1;bottom:-3.125rem;right:-4.375rem;content:"";width:25.75rem;height:13.75rem}.feature-h{margin-bottom:1.5rem}.feature-h .wrap-icon{-webkit-box-flex:0;-ms-flex:0 0 5rem;flex:0 0 5rem;height:5rem;background:#efefef;color:#000;position:relative;border-radius:50%;border:.125rem solid transparent;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.feature-h .wrap-icon [class^=icon-]{position:absolute;left:50%;font-size:1.25rem;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.feature-h .feature-text{margin-top:.9375rem}.feature-h .feature-text .heading{font-size:1.125rem}.feature-h:focus .wrap-icon,.feature-h:hover .wrap-icon{border:.125rem solid var(--primary-color);background-color:transparent;-webkit-transform:scale(1.07);-ms-transform:scale(1.07);transform:scale(1.07)}.counter-wrap .number{font-size:2.5rem;display:block;font-weight:700}.load{z-index:7700;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.layer{width:100%;height:100%;z-index:7100;background:#fff;top:0;left:0;right:0;bottom:0}@-webkit-keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-border{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:.75s linear infinite spinner-border;animation:.75s linear infinite spinner-border}.breadcrumb,.contact-info i{display:-webkit-box;display:-ms-flexbox}.custom-card,.video-card{background:#fff;border-radius:.625rem;box-shadow:0 .25rem .75rem rgba(0,0,0,.2)}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}nav[aria-label=breadcrumb] li:before{color:rgba(255,255,255,.3)!important}.breadcrumb{display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0;margin-bottom:1rem;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:#6c757d}.contact-info i{font-size:1.25rem;float:left;width:2.75rem;height:2.75rem;background:var(--primary-color);display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:3.125rem;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;color:#fff}.contact-info .h4,.contact-info h4{font-size:1.125rem;padding:0 0 0 3.75rem}.contact-info p{padding:0 0 0 3.75rem;margin-bottom:0;font-size:.875rem}.video-card{max-width:23rem;margin:1.25rem auto;overflow:hidden}.video-card iframe{width:100%;height:12rem}.custom-card{margin:.625rem;padding:.625rem;position:relative;transition:transform .2s;height:100%;display:flex;flex-direction:column}.category-badge,.custom-detail-button,.custom-for-sale .custom-status{background-color:var(--primary-color)}.custom-card-header{height:12.5rem;width:100%;position:relative}.custom-card img{width:100%;height:12.5rem;object-fit:cover;border-top-left-radius:.625rem;border-top-right-radius:.625rem;margin-bottom:.625rem}.custom-status{position:absolute;padding:.3125rem .625rem;border-radius:.3125rem;color:#fff;font-weight:700}.tns-gallery,.tns-no-calc{position:relative;left:0}.custom-sold-out .custom-status{top:0;right:0;height:100%;font-size:2.5rem;display:flex;justify-content:center;align-items:center;width:100%}.custom-for-sale .custom-status{top:.5rem;right:.4rem}.category-badge:hover,.custom-detail-button:hover,.custom-single-button:hover,.no-posts .btn:hover{background-color:var(--hover-color)}.card-body{padding:1.25rem;flex:1;display:flex;flex-direction:column;justify-content:space-between}.custom-detail-button{color:#fff;border:none;border-radius:.3125rem;padding:.625rem;cursor:pointer;width:100%;margin-top:.9375rem;font-size:1rem;transition:background-color .3s}.custom-price{font-size:1.25rem;font-weight:700;color:var(--primary-color);border-radius:.3125rem;display:inline-block;margin-top:.625rem}.property-info{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}.property-item{min-height:2.688rem;display:flex;align-items:center;font-size:.9rem;color:#6c757d}.property-item .iconify,.property-item iconify-icon{margin-right:.5rem;color:var(--primary-color)}.custom-card .card-body .card-text iconify-icon,.property-item .me-1{margin-right:.5rem}.custom-card .card-body a.title{color:#252424!important}.custom-card .card-body .card-text{display:flex;align-items:center;font-size:.9rem}.blog-card .card-text.blog-card-text,.custom-card .card-body .card-text p,.custom-card .card-body .card-title{text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.custom-card .card-body .card-title{line-clamp:1;-webkit-line-clamp:1}.custom-card .card-body .card-text p{margin:0;line-clamp:1;-webkit-line-clamp:1}.blog-container{margin-top:1.875rem;margin-bottom:3.125rem}.blog-card{display:flex;flex-direction:column;border:none;box-shadow:0 .625rem 1.25rem rgba(0,0,0,.1);border-radius:.9375rem;transition:transform .3s,box-shadow .3s;height:100%}.blog-card:hover{transform:translateY(-.3125rem);box-shadow:0 .9375rem 1.5625rem rgba(0,0,0,.2)}.blog-card img{border-radius:.9375rem .9375rem 0 0}.blog-card .post-thumbnail{height:var(--thumbnail-height);overflow:hidden}.blog-card .post-thumbnail img{width:100%;height:auto;object-fit:cover}.blog-card .card-body{padding:1.25rem;flex-grow:1;max-height:var(--card-body-height);overflow:hidden}.blog-card .card-text.blog-card-text{max-height:4.5rem;line-clamp:3;-webkit-line-clamp:3}.blog-card-title a{font-size:1.5rem;color:#1b1c1d!important}.blog-card-title a:hover{cursor:pointer;color:var(--primary-color)!important}.blog-card-text{color:#6c757d;margin-bottom:.9375rem}.blog-card-footer{font-size:.9rem;color:#adb5bd}.read-more{color:var(--primary-color);font-weight:500}.category-badge{color:#fff;font-size:.75rem;padding:.3125rem .625rem;border-radius:1.25rem;display:inline-block;margin-bottom:.625rem;max-width:8rem}.tns-outer{padding:0!important}.tns-outer [hidden]{display:none!important}.tns-slider{-webkit-transition:none;-moz-transition:none;transition:none}.tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel,.tns-vpfix{white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after,.tns-t-ct:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}.tns-gallery{min-height:1px}.tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform,opacity;-moz-transition:transform,opacity;transition:transform,opacity}.tns-gallery>.tns-slide-active{position:relative;left:auto!important}.custom-gallery .sold-banner,.image-slider-container .sold-banner{width:100%;top:0;left:0;padding:.5rem 1rem;font-weight:700;text-transform:uppercase;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}.tns-gallery>.tns-moving{-webkit-transition:.25s;-moz-transition:.25s;transition:.25s}.tns-lazy-img{-webkit-transition:opacity .6s;-moz-transition:opacity .6s;transition:opacity .6s;opacity:.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height;-moz-transition:height;transition:height}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;z-index:0}.tns-fadeOut,.tns-normal{opacity:0;z-index:-1}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}.no-posts{padding:2rem;border:1px dashed #ddd;border-radius:8px;background-color:#f2f2f2}.ic--baseline-tiktok-footer,.proicons--youtube-shorts{background-color:currentColor;-webkit-mask-image:var(--svg);-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%}.no-posts .btn{margin-top:1rem;padding:.5rem 1rem;background-color:var(--primary-color);color:#fff;border-radius:4px}.post-title{font-size:2.5rem;margin:1.5rem 0;color:#007bff}.rumah-detail .detail-container li.detail-list{display:flex;flex-direction:row;align-items:center}.image-single{height:7rem;width:7rem}.ic--baseline-tiktok,.ic--baseline-tiktok-footer,.proicons--youtube-shorts{width:1.2rem;height:1.2rem;display:inline-block}.ic--baseline-tiktok{background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48'/%3E%3C/svg%3E")}.ic--baseline-tiktok-footer{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48'/%3E%3C/svg%3E");mask-image:var(--svg);mask-repeat:no-repeat;mask-size:100% 100%}.proicons--youtube-shorts{--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath stroke='%23000' stroke-linejoin='round' stroke-width='1.5' d='M12.834 3.186a3.627 3.627 0 0 1 3.627 6.282l-.74.426a3.626 3.626 0 0 1 1.935 6.766l-7.02 4.053a3.626 3.626 0 1 1-3.627-6.28l.739-.428A3.627 3.627 0 0 1 5.814 7.24z'/%3E%3Cpath fill='%23000' d='M13.992 11.016L11.2 9.271c-.74-.463-1.7.07-1.7.942v3.49c0 .873.96 1.405 1.7.943l2.792-1.746a1.11 1.11 0 0 0 0-1.884'/%3E%3C/g%3E%3C/svg%3E");mask-image:var(--svg);mask-repeat:no-repeat;mask-size:100% 100%}.btn-custom,.custom-gallery .sold-banner,.custom-single-button{background-color:var(--primary-color)}.img-header{height:2.7rem}.custom-gallery .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));gap:1.5rem;margin-top:2rem}.custom-gallery .gallery-item{cursor:pointer;position:relative;overflow:hidden;border-radius:.5rem}.custom-gallery .image-footer img,.custom-gallery .image-header img{width:100%;height:auto;display:block;border-radius:.5rem}.custom-gallery .image-main,.image-slider-container .image-main{position:relative;width:100%}.custom-gallery .fixed-size-image{width:100%;height:14rem;object-fit:cover}.custom-gallery .sold-banner{position:absolute;height:auto;color:#fff;z-index:10}.custom-single-button{color:#fff;border:none;border-radius:.3125rem;padding:.625rem;cursor:pointer;width:70%;margin-top:.9375rem;font-size:1rem;transition:background-color .3s}.responsive-custom-box{transition:transform .3s,box-shadow .3s}.responsive-custom-box:hover{transform:translateY(-.3rem);box-shadow:0 6px 12px rgba(0,0,0,.25)}@media (max-width:768px){.responsive-custom-box{width:90%;padding:1.5rem}}.section-title{font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:1rem}.section-subtitle{font-size:1.125rem;color:#334155;margin-left:auto;margin-right:auto}.bank-list li:before,.bank-list-title,.fees-title{color:var(--primary-color)}.fees-info{margin-top:1.5rem;text-align:left}.fees-info ul{padding-left:0;list-style:none}.fees-title{font-size:1.5rem;font-weight:600;text-align:center;margin-top:1rem}.bank-list-title{font-size:1.125rem;font-weight:600;margin-top:1.5rem;margin-bottom:.75rem;text-align:center}.bank-list{list-style:none;padding:0}.bank-list li{font-size:1rem;color:#333;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center}.bank-list li:before{content:"🏦";margin-right:.5rem}.btn-custom{padding:.75rem 1.5rem;font-size:1.125rem;color:#fff;border-radius:.5rem;transition:background-color .3s}.btn-custom:hover{background-color:var(--hover-color);color:#fff}.logo-single{max-width:7rem}.img-logo-about{max-width:56.25rem;object-fit:cover;border-radius:.3rem;overflow:hidden}.simple-custom-arrow-box{text-align:center;max-width:90%;background-color:#fff;padding:1.5rem;border-radius:.5rem}.simple-custom-arrow-box.align-left{justify-content:flex-start!important}.simple-custom-arrow-box.align-center{justify-content:center!important}.simple-custom-arrow-box.align-right{justify-content:flex-end!important}.image-slider-container .image-container-sold{position:relative;text-align:center;margin:auto}.image-slider-container .image-footer img,.image-slider-container .image-header img{width:100%;height:auto;display:block}.image-slider-container .fixed-size-image{width:100%;height:18.75rem;object-fit:cover}.image-slider-container .sold-banner{position:absolute;height:auto;color:#fff;background-color:var(--primary-color)}img.litespeed-loaded{-webkit-transition:opacity .5s linear .2s;-moz-transition:opacity .5s linear .2s;transition:opacity .5s linear .2s;opacity:1}.lets-icons--lamp-fill{display:inline-block;width:1.5em;height:1.5em;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m14.856 15.686l-.1.25a8.7 8.7 0 0 1-5.512 0l-.1-.25c-.095-.23-.143-.346-.226-.452c-.082-.107-.226-.215-.514-.43a6 6 0 1 1 7.192 0c-.288.215-.432.323-.514.43s-.13.221-.226.452m-5.006 2.48q.13.792.148 1.598a.39.39 0 0 0 .213.342a4 4 0 0 0 3.578 0a.39.39 0 0 0 .213-.342q.018-.806.148-1.598a10.7 10.7 0 0 1-4.3 0' clip-rule='evenodd'/%3E%3C/svg%3E");background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.custom-icons{height:1.25rem;width:1.25rem}

/* ==========================================================
   OMAHKU PROPERTI — DESIGN SYSTEM v2
   Tambahan di atas tema lama. Semua class baru diawali
   prefix "omk-" agar tidak bertabrakan dengan CSS lama.
   Digunakan oleh front-page.php dan template-template baru.
   ========================================================== */

/* --- CSS Variables (Design Tokens) --- */
:root {
  --omk-accent: #bedb22;
  --omk-accent-strong: #00a859;
  --omk-accent-hover: #008f4c;
  --omk-text-primary: #0f172a;
  --omk-text-secondary: #1e293b;
  --omk-text-soft: #475569;
  --omk-surface-base: #ffffff;
  --omk-surface-subtle: #f7f8fa;
  --omk-border: #e2e8f0;
  --omk-font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --omk-radius-sm: 0.5rem;
  --omk-radius: 0.75rem;
  --omk-radius-lg: 1rem;
  --omk-radius-xl: 1.5rem;
  --omk-shadow-card: 0 8px 30px rgba(0,0,0,0.04);
  --omk-shadow-card-hover: 0 8px 30px rgba(0,0,0,0.10);
  --omk-shadow-elevated: 0 20px 60px rgba(0,0,0,0.10);
}

html {
    scroll-behavior: smooth;
}

/* --- Base reset untuk elemen di dalam template v2 --- */
.omk-page {
  font-family: var(--omk-font);
  color: var(--omk-text-primary);
  background: var(--omk-surface-subtle);
  -webkit-font-smoothing: antialiased;
}
.omk-page *, .omk-page *::before, .omk-page *::after { box-sizing: border-box; }
.omk-page a { text-decoration: none; color: inherit; }
.omk-page img { display: block; max-width: 100%; }
.omk-page ul { list-style: none; padding-top: 27px; padding-left: 0; margin: 0; }

/* --- Layout Container --- */
.omk-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) { .omk-container { padding-inline: 3.5rem; } }

/* ==========================================================
   HEADER v2
   ========================================================== */
.omk-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s, border-color 0.3s;
}
@media (min-width: 768px) { .omk-header { min-height: 81px; padding: 0.375rem 1.5rem; } }
.omk-header.omk-scrolled { box-shadow: 0 1px 10px rgba(0,0,0,0.06); border-color: var(--omk-border); }

.omk-logo { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.omk-logo img { width: 38px; height: 38px; object-fit: contain; }
@media (min-width: 768px) { .omk-logo img { width: 60px; height: 60px; } }
.omk-logo-name {
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--omk-text-primary);
  line-height: 1.25;
  white-space: nowrap;
  font-family: Dutch801 Rm BT;
}
@media (min-width: 768px) { .omk-logo-name { font-size: 1.25rem; } }
.omk-logo-tagline {
  display: block;
  font-size: 0.7rem;
  color: #09a566;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.02em;
}
@media (min-width: 640px) { .omk-logo-tagline { font-size: 0.76rem; } }

/* Navigation Wrapper (Arrows and Scroll) */
.omk-nav-wrapper {
  display: none;
  position: relative;
  align-items: center;
  flex: 1;
  max-width: 1000px;
  min-width: 0;
  overflow: hidden;
  margin: 0 1.5rem;
}
.omk-nav-wrapper::before,
.omk-nav-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.omk-nav-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}
.omk-nav-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}
.omk-nav-wrapper:has(.omk-nav-arrow-left.omk-visible)::before {
  opacity: 1;
}
.omk-nav-wrapper:has(.omk-nav-arrow-right.omk-visible)::after {
  opacity: 1;
}

.omk-nav {
  display: flex !important;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex-wrap: nowrap !important;
  scrollbar-width: none; /* Firefox */
  position: relative;
}
.omk-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.omk-nav-item {
  flex-shrink: 0; /* Prevent links from shrinking */
}

/* Nav Arrow Buttons */
.omk-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--omk-border, #e2e8f0);
  color: var(--omk-text-primary, #0f172a);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s, background 0.2s, color 0.2s;
}
.omk-nav-arrow.omk-visible {
  transform: translateY(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.omk-nav-arrow:hover {
  background: #f1f5f9;
  color: var(--omk-accent-strong, #00a859);
}
.omk-nav-arrow-left {
  left: 0;
}
.omk-nav-arrow-right {
  right: 0;
}

/* Responsive navigation visibility rules */
@media (min-width: 768px) {
  .omk-nav-wrapper {
    display: flex !important; /* Visible from tablet up to desktop */
    margin-left: 30px !important;
  }
  .omk-header > .omk-nav {
    margin-left: 30px !important;
  }
  .omk-btn-hamburger {
    display: none !important; /* Hide hamburger from tablet and above */
  }
}

@media (max-width: 767px) {
  #desktopNav {
    display: none !important;
  }
}


/* Dark mode adjustment for arrows and gradients */
body.dark .omk-nav-arrow {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
body.dark .omk-nav-arrow:hover {
  background: #273549;
  color: #bef322;
}
body.dark .omk-nav-wrapper::before {
  background: linear-gradient(to right, #0f172a, transparent);
}
body.dark .omk-nav-wrapper::after {
  background: linear-gradient(to left, #0f172a, transparent);
}

.omk-nav-active-bubble {
  position: absolute;
  border-radius: var(--omk-radius-sm);
  background-color: rgba(0, 168, 89, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 168, 89, 0.18) !important;
  border-bottom: 3px solid #00a859 !important;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: all 260ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.omk-nav-item {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--omk-radius-sm);
  font-weight: 600;
  color: var(--omk-text-secondary);
  transition: color 0.3s, background-color 0.3s, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s;
  text-decoration: none !important;
}
.omk-nav-item:hover {
  color: var(--omk-text-primary);
  background: var(--omk-surface-subtle);
  transform: translateY(-2.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
}
.omk-nav-item.omk-active {
  color: var(--omk-accent-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.omk-nav-item.omk-active:hover {
  background: rgba(0, 168, 89, 0.06) !important;
}

.omk-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.omk-btn-wa {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 1.25rem;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  font-family: var(--omk-font);
  position: relative;
  z-index: 10;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s;
  animation: omk-heartbeat-anim 2s infinite ease-in-out;
  overflow: visible;
}
.omk-btn-wa, .omk-btn-wa i, .omk-btn-wa span {
  color: #ffffff !important;
}
.omk-btn-wa:hover {
  background-color: #20ba5a;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.omk-btn-wa:hover, .omk-btn-wa:hover i, .omk-btn-wa:hover span {
  color: #ffffff !important;
}
.omk-btn-wa:active {
  transform: scale(0.95);
}
@media (min-width: 768px) { .omk-btn-wa { display: inline-flex; } }

/* Riak Radar Sonar WhatsApp */
.omk-btn-wa::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 9999px;
  background-color: rgba(37, 211, 102, 0.45);
  pointer-events: none;
  animation: omk-radar-ping 2s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Animasi Detak Jantung */
@keyframes omk-heartbeat-anim {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.06); }
  28% { transform: scale(1); }
  42% { transform: scale(1.06); }
  70% { transform: scale(1); }
}

/* Animasi Riak Radar */
@keyframes omk-radar-ping {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  80% {
    transform: scale(1.25, 1.45);
    opacity: 0;
  }
  100% {
    transform: scale(1.25, 1.45);
    opacity: 0;
  }
}

.omk-btn-hamburger {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 1px solid var(--omk-border);
  background: #fff;
  color: var(--omk-text-primary);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.15s;
}
.omk-btn-hamburger:hover { background: var(--omk-surface-subtle); }
@media (min-width: 1024px) { .omk-btn-hamburger { display: none; } }

/* --- Mobile Drawer v2 --- */
.omk-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.omk-drawer {
  display: flex;
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 280px;
  z-index: 99999;
  background: #fff;
  flex-direction: column;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  overflow-y: auto;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.omk-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.omk-drawer.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.omk-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--omk-border);
  flex-shrink: 0;
}
.omk-drawer-close {
  width: 36px; height: 36px;
  border-radius: var(--omk-radius-sm);
  background: var(--omk-surface-subtle);
  border: none; cursor: pointer;
  font-size: 1.1rem;
  color: var(--omk-text-soft);
  display: grid; place-items: center;
}
.omk-drawer-nav {
  flex: 1;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem; overflow-y: auto;
}
.omk-drawer-nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--omk-radius);
  font-weight: 700; font-size: 0.875rem;
  color: var(--omk-text-soft);
  transition: color 0.15s, background 0.15s;
  font-family: var(--omk-font);
}
.omk-drawer-nav-item:hover, .omk-drawer-nav-item.omk-active {
  color: var(--omk-accent-strong);
  background: rgba(0,168,89,0.08);
}
.omk-drawer-footer { padding: 1rem; border-top: 1px solid var(--omk-border); flex-shrink: 0; }
.omk-drawer-wa {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.75rem;
  border-radius: var(--omk-radius);
  background: var(--omk-accent-strong); color: #fff;
  font-weight: 700; font-size: 0.875rem;
  border: none; cursor: pointer; font-family: var(--omk-font);
  transition: background 0.15s;
}
.omk-drawer-wa:hover { background: var(--omk-accent-hover); }

/* ==========================================================
   BUTTONS v2
   ========================================================== */
.omk-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: var(--omk-radius); background: #000; color: #fff;
  font-weight: 700; font-size: 0.9375rem; font-family: var(--omk-font);
  border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  text-decoration: none !important;
}
.omk-btn-primary:hover { background: #202020; color: #fff !important; }
.omk-btn-primary:active { transform: translateY(1px); }

.omk-btn-green {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: var(--omk-radius); background: var(--omk-accent-strong); color: #fff;
  font-weight: 700; font-size: 0.9375rem; font-family: var(--omk-font);
  border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(0,168,89,0.3);
  text-decoration: none !important;
}
.omk-btn-green:hover { background: var(--omk-accent-hover); box-shadow: 0 6px 20px rgba(0,168,89,0.4); color: #fff !important; }
.omk-btn-green:active { transform: translateY(1px); }

.omk-btn-outline {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 40px; padding: 0 1rem;
  border-radius: var(--omk-radius);
  background: transparent !important;
  border: none !important;
  color: var(--omk-text-primary);
  font-weight: 700; font-size: 0.8125rem; font-family: var(--omk-font);
  cursor: pointer; transition: color 0.3s ease, transform 0.1s;
  text-decoration: none !important;
}
.omk-btn-outline::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #a8ff78, #78ffd6);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  z-index: -2;
  transition: opacity 0.3s ease;
}
.omk-btn-outline::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #00a859, #bef322);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.omk-btn-outline:hover::after {
  opacity: 1;
}
.omk-btn-outline:hover {
  color: var(--omk-accent-strong, #00a859) !important;
}
.omk-btn-outline:active { transform: translateY(1px); }

/* ==========================================================
   HERO SECTION v2
   ========================================================== */
.omk-hero {
  display: grid; grid-template-columns: 1fr;
  gap: 1.5rem; align-items: center;
  padding: 2rem 1rem 3rem;
  background: #fff;
}
@media (min-width: 1024px) {
  .omk-hero {
    grid-template-columns: 1.04fr 0.96fr;
    gap: 4.5rem;
    min-height: calc(100vh - 81px);
    padding: 1.5rem 3.5rem 5rem;
  }
}
.omk-hero-eyebrow {
  display: block;
  color: var(--omk-accent-strong);
  font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

@media (max-width:768px) {
  .omk-hero-eyebrow {
  display: block;
  color: var(--omk-accent-strong);
  font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  text-align: center;
  }
}

@media (min-width: 768px) { .omk-hero-eyebrow { font-size: 0.875rem; } }

.omk-hero-title {
  font-size: 2rem; 
  font-weight: 900;
  color: var(--omk-text-primary);
  letter-spacing: -0.025em; line-height: 1.2;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .omk-hero-title {
  font-size: 2rem; 
  font-weight: 900;
  color: var(--omk-text-primary);
  letter-spacing: -0.025em; 
  line-height: 1.2;
  margin-bottom: 2rem;
  text-align: center;
  }
}


@media (min-width: 640px) { .omk-hero-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .omk-hero-title { font-size: 3.5rem; } }
.omk-hero-title .omk-accent { color: var(--omk-accent-strong);}

.omk-hero-desc {
  max-width: 640px; margin-top: 1rem;
  color: var(--omk-text-secondary);
  font-size: 0.875rem; line-height: 1.65;
}
@media (min-width: 768px) { .omk-hero-desc { font-size: 1rem; } }

/* Search Form */
.omk-search-form {
  display: grid; grid-template-columns: 1fr;
  gap: 0.5rem; margin-top: 2rem;
  padding: 0.625rem; border-radius: var(--omk-radius-lg);
  background: #fff;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
  border: 1px solid #f1f5f9;
}
@media (min-width: 640px) { .omk-search-form { grid-template-columns: 1fr auto; } }
@media (min-width: 768px) { .omk-search-form { grid-template-columns: 1fr auto; gap: 0.75rem; } }

.omk-search-input-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 52px; padding: 0 0.75rem;
  border: 1px solid #f1f5f9; border-radius: var(--omk-radius);
  color: var(--omk-text-secondary);
}
.omk-search-input-wrap input {
  flex: 1; width: 100%; border: none; outline: none;
  background: transparent; font-family: var(--omk-font);
  font-size: 0.875rem; font-weight: 500;
  color: var(--omk-text-primary);
}
.omk-search-input-wrap input::placeholder { color: #374151; }

.omk-search-select {
  display: flex; align-items: center;
  min-height: 52px; padding: 0 2.5rem 0 0.75rem;
  border: 1px solid #f1f5f9; border-radius: var(--omk-radius);
  background: var(--omk-surface-subtle);
  font-family: var(--omk-font); font-size: 0.875rem; font-weight: 600;
  color: var(--omk-text-primary); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  width: 100%;
}

/* Hero Image */
.omk-hero-visual {
  position: relative; height: 240px;
  border-radius: var(--omk-radius-lg);
  background: #e2e8f0; overflow: hidden;
}
@media (min-width: 640px) { .omk-hero-visual { height: 320px; } }
@media (min-width: 768px) { .omk-hero-visual { height: 400px; } }
@media (min-width: 1024px) { .omk-hero-visual { min-height: 470px; height: 100%; } }
.omk-hero-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.omk-hero-visual-overlay {
  position: absolute; inset-x: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  pointer-events: none; z-index: 1;
}

/* ==========================================================
   STATS STRIP v2
   ========================================================== */
.omk-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  background: transparent;
  border-radius: 0;
  margin: 3.75rem 1rem 3.125rem;
  position: relative; z-index: 10;
  border: none;
  box-shadow: none;
  gap: 1rem;
}
@media (min-width: 768px) { .omk-stats { margin-inline: 3.5rem; gap: 1.25rem; } }
@media (min-width: 1024px) { .omk-stats { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.omk-stat-item {
  padding: 1.5rem; text-align: center;
  border-radius: var(--omk-radius-lg);
  background: #ffffff;
  border: 2px solid transparent;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #00a859, #bef322);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--omk-shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.omk-stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--omk-shadow-card-hover);
}
@media (min-width: 1024px) {
  .omk-stat-item { padding: 2.5rem; }
}
.omk-stat-number { display: block; font-size: 1.875rem; font-weight: 800; color: var(--omk-text-primary); line-height: 1; }
@media (min-width: 768px) { .omk-stat-number { font-size: 2.25rem; } }
.omk-stat-label {
  display: block; margin-top: 0.5rem;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--omk-text-soft);
}
@media (min-width: 768px) { .omk-stat-label { font-size: 0.8125rem; } }

/* ==========================================================
   MARQUEE v2
   ========================================================== */
.omk-marquee {
  position: relative; z-index: 9; overflow: hidden;
  margin-top: 0; padding: 0.75rem 0;
  background: linear-gradient(90deg, #f1f5f9, #ffffff 52%, #f1f5f9);
  border-block: 1px solid rgba(0, 168, 89, 0.12);
}
.omk-marquee::before, .omk-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  z-index: 2; width: min(18vw, 160px); pointer-events: none;
}
.omk-marquee::before { left: 0; background: linear-gradient(90deg, #f1f5f9, transparent); }
.omk-marquee::after  { right: 0; background: linear-gradient(270deg, #f1f5f9, transparent); }
.omk-marquee-track {
  display: flex; width: max-content; gap: 0.75rem;
  animation: omk-marquee 34s linear infinite;
}
@keyframes omk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.omk-marquee-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 1rem; border-radius: 9999px;
  background: rgba(0, 168, 89, 0.05);
  border: 1px solid rgba(0, 168, 89, 0.15);
  font-size: 0.75rem; font-weight: 700;
  color: var(--omk-text-primary); white-space: nowrap;
}
.omk-marquee-item i { color: var(--omk-accent-strong); font-size: 0.6875rem; }

/* ==========================================================
   SECTION COMMON v2
   ========================================================== */
.omk-section { padding: 5rem 1rem; }
@media (min-width: 768px) { .omk-section { padding: 7rem 3.5rem; } }
.omk-section-bg-white { background: #fff; }
.omk-section-bg-subtle { background: var(--omk-surface-subtle); }
.omk-section-bg-slate { background: #f8fafc; border-top: 1px solid var(--omk-border); }

.omk-eyebrow {
  display: block; color: var(--omk-accent-strong);
  font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem;
}

@media (max-width:768px) {
.omk-eyebrow {
  display: block; color: var(--omk-accent-strong);
  font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem;
  text-align: center;
 }
}

@media (min-width: 768px) { .omk-eyebrow { font-size: 0.875rem; } }

.omk-heading {
  font-size: 1.875rem; font-weight: 900;
  color: var(--omk-text-primary);
  line-height: 1.2; letter-spacing: -0.02em;
}

@media (max-width:768px) {
.omk-heading {
  font-size: 1.875rem; font-weight: 900;
  color: var(--omk-text-primary);
  line-height: 1.2; letter-spacing: -0.02em;
  text-align: center;
 }
}

@media (min-width: 768px) { .omk-heading { font-size: 2.5rem; } }
@media (min-width: 1024px) { .omk-heading { font-size: 3rem; } }
.omk-heading-fancy {
  position: relative; display: inline;
  background-image: linear-gradient(180deg, transparent 58%, rgba(190,219,34,0.34) 58%, rgba(0,168,89,0.2) 92%, transparent 92%);
  padding-inline: 0.03em;
}


.omk-section-desc {
  margin-top: 1rem; color: var(--omk-text-secondary);
  font-size: 1rem; line-height: 1.7; max-width: 760px;
}

@media (max-width:768px) {
  .omk-section-desc {
  margin-top: 1rem; color: var(--omk-text-secondary);
  font-size: 1rem; line-height: 1.7; max-width: 760px;
  text-align: center;
  }
}

@media (min-width: 768px) { .omk-section-desc { font-size: 1.125rem; } }
.omk-section-text-center { text-align: center; margin-top: 3.5rem; }

/* ==========================================================
   PROPERTY CARD v2
   ========================================================== */
.omk-grid-4 {
  display: grid; grid-template-columns: 1fr;
  gap: 1.5rem; margin-top: 3rem;
}
@media (min-width: 768px) { .omk-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .omk-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.omk-prop-card {
  border-radius: var(--omk-radius-lg); background: #fff; overflow: hidden;
  box-shadow: var(--omk-shadow-card);
  transition: box-shadow 0.3s, transform 0.3s; position: relative;
}
.omk-prop-card:hover { box-shadow: var(--omk-shadow-card-hover); transform: translateY(-4px); }

.omk-prop-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--omk-surface-subtle); }
.omk-prop-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.omk-prop-card:hover .omk-card-slider-container { transform: scale(1.04); }

.omk-prop-labels {
  position: absolute; top: 0.75rem; left: 0.75rem; right: 0.75rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  z-index: 10; pointer-events: none;
}
.omk-prop-label {
  display: inline-flex; align-items: center;
  min-height: 26px; border-radius: var(--omk-radius-sm);
  background: rgba(255,255,255,0.95); backdrop-filter: blur(4px);
  color: var(--omk-accent-strong); font-size: 0.75rem; font-weight: 800;
  padding: 0 0.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.omk-prop-image-overlay {
  position: absolute; inset-x: 0; bottom: 0;
  padding: 0.75rem;
  background: transparent;
  pointer-events: none; z-index: 10;
}
.omk-prop-addr {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.8125rem; color: #fff; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.omk-prop-body { padding: 1.25rem 1.25rem 1rem; }
.omk-prop-title {
  font-size: 1rem; font-weight: 800; color: var(--omk-text-primary);
  line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; height: 2.6rem; margin-bottom: 0.75rem;
}
.omk-prop-specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin-bottom: 0.75rem;
}
.omk-prop-spec {
  padding: 0.5rem; border: 1px solid #f1f5f9;
  border-radius: var(--omk-radius-sm); background: var(--omk-surface-subtle);
}
.omk-prop-spec-label {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.625rem; font-weight: 800;
  color: var(--omk-text-secondary); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 0.25rem;
}
@media (min-width: 768px) { .omk-prop-spec-label { font-size: 0.75rem; } }
.omk-prop-spec-value {
  display: block; font-size: 0.75rem; font-weight: 700;
  color: var(--omk-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 768px) { .omk-prop-spec-value { font-size: 0.875rem; } }
.omk-prop-price {
  display: block; font-size: 1rem; font-weight: 800;
  color: var(--omk-text-primary); margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .omk-prop-price { font-size: 1.125rem; } }
.omk-prop-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .omk-prop-actions { flex-direction: row; }
}

/* ==========================================================
   WHY CARD v2
   ========================================================== */
.omk-why-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 4rem;
}
@media (min-width: 768px) { .omk-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .omk-why-grid { grid-template-columns: repeat(4, 1fr); } }

.omk-why-card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; border-radius: var(--omk-radius-lg);
  background: var(--omk-surface-subtle);
  border: 1px solid rgba(226,232,240,0.5);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.omk-why-card:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,0.06); transform: translateY(-4px); }
.omk-why-icon {
  width: 3rem; height: 3rem; border-radius: var(--omk-radius);
  background: rgba(190,219,34,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.omk-why-icon i { font-size: 1.375rem; color: var(--omk-accent-strong); }
.omk-why-title { font-size: 1.0625rem; font-weight: 800; color: var(--omk-text-primary); }
.omk-why-desc { font-size: 0.875rem; color: var(--omk-text-secondary); line-height: 1.65; }

/* ==========================================================
   SOLD CAROUSEL v2
   ========================================================== */
.omk-sold-header {
  display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem;
}
@media (min-width: 768px) { .omk-sold-header { flex-direction: row; justify-content: space-between; align-items: flex-end; } }

.omk-sold-nav { display: flex; gap: 0.5rem; }
.omk-sold-nav-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--omk-border); border-radius: var(--omk-radius);
  background: #fff; color: var(--omk-text-primary); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  font-size: 1rem;
}
.omk-sold-nav-btn:hover { border-color: #94a3b8; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.omk-sold-nav-btn:active { transform: translateY(1px); }

.omk-sold-carousel {
  display: flex; gap: 1.5rem;
  overflow-x: auto; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
  scroll-snap-type: x mandatory; padding-bottom: 1rem;
}
.omk-sold-carousel::-webkit-scrollbar { display: none; }

.omk-sold-card {
  width: 290px; flex-shrink: 0; scroll-snap-align: start;
  border-radius: var(--omk-radius-lg); background: #fff;
  border: 1px solid #f1f5f9; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.02);
  transition: box-shadow 0.3s, transform 0.3s; position: relative;
}
@media (min-width: 768px) { .omk-sold-card { width: 320px; } }
.omk-sold-card:hover { box-shadow: 0 12px 35px rgba(0,0,0,0.06); transform: translateY(-4px); }

.omk-sold-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #f1f5f9; }
.omk-sold-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(35%); transition: filter 0.5s, transform 0.5s;
}
.omk-sold-card:hover .omk-sold-image img { filter: grayscale(0); transform: scale(1.05); }

/* Premium Sold Overlay Badge (Centered and Glassmorphic) */
.omk-sold-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45); /* Dark dim over the image */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.3s ease;
}
.omk-sold-card:hover .omk-sold-overlay {
  background: rgba(15, 23, 42, 0.3); /* Slightly lighter on hover */
}
.omk-sold-overlay-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem; /* 13px */
  font-weight: 900;
  color: #ffffff !important;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.omk-sold-card:hover .omk-sold-overlay-badge {
  transform: scale(1.08);
}
.omk-sold-overlay-badge.omk-terjual {
  background: rgba(239, 68, 68, 0.85); /* Red for sold */
  border-color: rgba(254, 226, 226, 0.4);
}
.omk-sold-overlay-badge.omk-tersewa {
  background: rgba(59, 130, 246, 0.85); /* Blue for rented */
  border-color: rgba(219, 234, 254, 0.4);
}

.omk-sold-body { padding: 1.25rem; display: flex; flex-direction: column; height: 180px; justify-content: space-between; }
.omk-sold-type { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--omk-accent-strong); letter-spacing: 0.08em; }
.omk-sold-title {
  margin: 0.375rem 0 0.25rem; font-size: 1rem; font-weight: 800;
  color: var(--omk-text-primary); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.omk-sold-addr { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--omk-text-secondary); }
.omk-sold-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #f1f5f9; padding-top: 0.75rem;
}
.omk-sold-price-label { font-size: 0.75rem; font-weight: 800; color: var(--omk-text-soft); }
.omk-sold-price { font-size: 0.875rem; font-weight: 800; color: #64748b; text-decoration: line-through; opacity: 0.6; }

/* ==========================================================
   CAROUSEL ARTIKEL POPULER
   ========================================================== */
.omk-article-extra .omk-populer-section,
.omk-populer-section { padding: 2.5rem 0; }

.omk-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; gap: 1rem;
}
.omk-section-title {
  font-size: 1.25rem; font-weight: 900;
  color: var(--omk-text-1, #1e293b);
  margin: 0;
}
@media (min-width: 768px) { .omk-section-title { font-size: 1.5rem; } }

.omk-populer-nav { display: flex; gap: 0.5rem; }
.omk-populer-nav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid #e2e8f0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s; color: #475569;
  font-size: 0.875rem;
}
.omk-populer-nav-btn:hover { border-color: #00a859; color: #00a859; box-shadow: 0 3px 10px rgba(0,168,89,0.12); }

.omk-populer-carousel {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
  scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
}
.omk-populer-carousel::-webkit-scrollbar { display: none; }

.omk-populer-card {
  width: 260px; flex-shrink: 0; scroll-snap-align: start;
  border-radius: var(--omk-radius, 0.75rem);
  background: #fff; border: 1px solid #f1f5f9;
  overflow: hidden; text-decoration: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s, transform 0.3s;
  display: block;
}
@media (min-width: 768px) { .omk-populer-card { width: 300px; } }
.omk-populer-card:hover { box-shadow: 0 10px 35px rgba(0,0,0,0.08); transform: translateY(-3px); }

.omk-populer- {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: #f8fafc;
}
.omk-populer-__img { background-size: cover; background-position: center; }
.omk-populer-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 60%);
  transition: opacity 0.3s;
}
.omk-populer-card__badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 0.25rem 0.625rem; border-radius: 999px;
  display: flex; align-items: center; gap: 0.25rem;
}
.omk-populer-card__body { padding: 1rem; }
.omk-populer-card__title {
  font-size: 0.9rem; font-weight: 800;
  color: var(--omk-text-1, #1e293b);
  margin: 0 0 0.5rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.omk-populer-card__date { font-size: 0.75rem; color: #94a3b8; }

/* ==========================================================
   CTA SECTION v2
   ========================================================== */
.omk-cta {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  padding: 2.5rem 1rem;
  background: linear-gradient(to top right, #000, #1e293b);
  color: #fff; border-radius: var(--omk-radius-lg);
  margin: 2rem 0.75rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  position: relative; overflow: hidden;
}
@media (min-width: 768px) { .omk-cta { margin: 3rem 3.5rem; padding: 4rem 2.5rem; } }
@media (min-width: 1024px) { .omk-cta { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; padding: 4rem; } }
.omk-cta-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at bottom right, rgba(190,219,34,0.12), transparent 60%);
  pointer-events: none;
}
.omk-cta-eyebrow { display: block; color: var(--omk-accent); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .omk-cta-eyebrow { font-size: 0.875rem; } }
.omk-cta-title { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1.2; }
@media (min-width: 768px) { .omk-cta-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .omk-cta-title { font-size: 2.25rem; } }
.omk-cta-desc { margin-top: 0.875rem; color: #ffffff; font-size: 0.9375rem; line-height: 1.65; }

.omk-cta-card {
  position: relative; z-index: 10;
  padding: 1.25rem; border-radius: var(--omk-radius-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
}
@media (min-width: 768px) { .omk-cta-card { padding: 1.5rem; } }
.omk-cta-card-title {
  font-size: 1rem; font-weight: 800; color: var(--omk-accent);
  border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (min-width: 768px) { .omk-cta-card-title { font-size: 1.125rem; } }
.omk-cta-fees { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.omk-cta-fee {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem; gap: 0.5rem;
}
.omk-cta-fee:last-child { border-bottom: none; }
.omk-cta-fee-label { font-size: 0.875rem; color: #94a3b8; font-weight: 500; }
.omk-cta-fee-value { font-size: 0.875rem; font-weight: 900; color: #fff; text-align: right; flex-shrink: 1; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }

.omk-btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 46px; border-radius: var(--omk-radius);
  background: var(--omk-accent-strong); color: #fff;
  font-weight: 800; font-size: 0.9375rem; font-family: var(--omk-font);
  border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 6px 20px rgba(0,168,89,0.35);
  text-decoration: none !important;
}
.omk-btn-cta:hover { background: var(--omk-accent-hover); color: #fff !important; }
.omk-btn-cta:active { transform: translateY(1px); }

/* ==========================================================
   FOOTER v2
   ========================================================== */
.omk-footer {
  background: #f8fafc;
  border-top: 1px solid rgba(226,232,240,0.8);
  padding: 2.5rem 1rem 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
  color: var(--omk-text-secondary);
  font-size: 0.8125rem; font-weight: 600;
  font-family: var(--omk-font);
}
@media (min-width: 768px) { .omk-footer { padding: 4rem 3.5rem 1.5rem; } }

/* --- Fix Mobile Footer Blank Space Bug --- */
.omk-back-to-top {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--omk-accent-strong, #00a859) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  box-shadow: 0 4px 14px rgba(0, 168, 89, 0.35) !important;
  z-index: 9999 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease !important;
}
.omk-back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.omk-back-to-top:hover {
  background: var(--omk-accent-hover, #008f4c) !important;
  transform: translateY(-3px) !important;
}
.layer,
.load {
  display: none !important;
  position: fixed !important;
  pointer-events: none;
}

.omk-footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem;
}
@media (min-width: 640px) { .omk-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .omk-footer-grid { grid-template-columns: 5fr 3fr 4fr; gap: 2.5rem; } }

.omk-footer-logo-wrap { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.omk-footer-logo-wrap img { width: 56px; height: 56px; object-fit: contain; }
.omk-footer-brand-name { display: block; font-size: 1.25rem; font-weight: 900; color: var(--omk-text-primary); line-height: 1.2;font-family: Dutch801 Rm BT; }
@media (min-width: 768px) { .omk-footer-brand-name { font-size: 1.5rem; } }
.omk-footer-brand-tagline { display: block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--omk-text-soft); margin-top: 0.125rem; }
@media (min-width: 768px) { .omk-footer-brand-tagline { font-size: 0.75rem;color: #09a566;} }
.omk-footer-desc { font-size: 0.8125rem; line-height: 1.7; color: var(--omk-text-soft); font-weight: 500; max-width: 480px; }
@media (min-width: 768px) { .omk-footer-desc { font-size: 0.9375rem; } }

.omk-footer-contacts { margin-top: 1.875rem; display: flex; flex-direction: column; gap: 0.75rem; }
.omk-footer-contact { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 768px) { .omk-footer-contact { gap: 0.75rem; } }
.omk-footer-contact i { color: var(--omk-accent-strong); font-size: 1rem; flex-shrink: 0; }
.omk-footer-contact a, .omk-footer-contact span { font-size: 0.8125rem; font-weight: 700; }
@media (min-width: 768px) { .omk-footer-contact a, .omk-footer-contact span { font-size: 0.9375rem; } }
.omk-footer-contact a { transition: color 0.2s; }
.omk-footer-contact a:hover { color: var(--omk-accent-strong) !important; }

.omk-footer-socials { display: flex; gap: 0.75rem; margin-top: 1rem; }
.omk-social-btn {
  width: 40px; height: 40px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--omk-border); background: #fff;
  color: #475569; font-size: 1rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.omk-social-btn:hover { background: var(--omk-accent-strong); color: #fff !important; border-color: var(--omk-accent-strong); }
.omk-social-btn.omk-facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff !important; }
.omk-social-btn.omk-instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: #dc2743; color: #fff !important; }
.omk-social-btn.omk-youtube:hover { background: #FF0000; border-color: #FF0000; color: #fff !important; }
.omk-social-btn.omk-tiktok:hover { background: #000000; border-color: #000000; color: #fff !important; }

.omk-footer-col-title {
  font-size: 1.125rem; font-weight: 900;
  color: var(--omk-text-primary);
  margin-bottom: 0.75rem; padding-bottom: 0.75rem; position: relative;
}
@media (min-width: 768px) { .omk-footer-col-title { font-size: 1.25rem; } }
.omk-footer-col-title::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 3rem; height: 4px;
  background: var(--omk-accent-strong); border-radius: 9999px;
}
.omk-footer-nav-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.omk-footer-nav-list a {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-left: -0.75rem;
  font-weight: 700;
  color: inherit;
  transition: color 0.3s ease;
}
.omk-footer-nav-list a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(0, 168, 89, 0.1);
  border-radius: 8px;
  z-index: -1;
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.omk-footer-nav-list a:hover {
  color: var(--omk-accent-strong) !important;
}
.omk-footer-nav-list a:hover::before {
  width: 100%;
}

.omk-footer-addr-wrap { display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 25px; }
@media (min-width: 768px) {
  .omk-footer-nav-list { margin-top: 2.75rem; }
}
.omk-footer-addr-icon { color: var(--omk-accent-strong); font-size: 1.125rem; flex-shrink: 0; margin-top: 0.125rem; }
.omk-footer-addr-text { font-size: 13px; font-weight: 700; color: var(--omk-text-secondary); line-height: 1.6; }
.omk-footer-map {
  margin-top: 0.75rem; border-radius: var(--omk-radius-lg); overflow: hidden;
  border: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); background: #fff; padding: 0.25rem;
}
.omk-footer-map iframe { width: 100%; height: 150px; border: 0; border-radius: 0.75rem; display: block; }
@media (min-width: 640px) { .omk-footer-map iframe { height: 180px; } }
@media (min-width: 768px) { .omk-footer-map iframe { height: 200px; } }

.omk-footer-bottom {
  padding-top: 1rem; padding-bottom: 1rem; border-top: 1px solid rgba(226,232,240,0.8);
  display: flex; flex-direction: column; gap: 0.75rem;
  align-items: center; text-align: center;
  font-size: 0.6875rem; font-weight: 700; color: var(--omk-text-soft);
}
@media (min-width: 640px) { .omk-footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
@media (min-width: 768px) { .omk-footer-bottom { font-size: 0.8125rem; } }
.omk-footer-bottom-links { display: flex; gap: 1rem; }
@media (min-width: 768px) { .omk-footer-bottom-links { gap: 1.5rem; } }
.omk-footer-bottom-links a:hover, .omk-footer-bottom a.omk-brand-link:hover { color: var(--omk-accent-strong) !important; }

/* --- White Button style --- */
.omk-btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.25rem;
  border-radius: var(--omk-radius); background: #fff; color: var(--omk-text-primary);
  font-weight: 700; font-size: 0.875rem; font-family: var(--omk-font);
  border: 1px solid var(--omk-border); cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  text-decoration: none !important;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .omk-btn-white { padding: 0 1.5rem; font-size: 0.9375rem; }
}
.omk-btn-white:hover { border-color: #94a3b8; color: var(--omk-text-primary) !important; background: #fafafa; }
.omk-btn-white:active { transform: translateY(1px); }

/* Dark mode: tombol putih tetap punya teks gelap agar terbaca */
body.dark .omk-btn-white {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(255,255,255,0.2) !important;
}
body.dark .omk-btn-white:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(255,255,255,0.4) !important;
}
body.dark .omk-btn-white .omk-btn-slide-label,
body.dark .omk-btn-white .omk-btn-slide-label-hover {
  color: #0f172a !important;
}
body.dark .omk-btn-white i { color: #0f172a !important; }

/* Dark mode: tombol neon (Titip Jual) tetap terbaca */
body.dark .omk-btn-neon {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
  color: #0f172a !important;
  border-color: rgba(255,255,255,0.25) !important;
}
body.dark .omk-btn-neon:hover {
  color: #0f172a !important;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
}

/* --- Custom Dropdown Tipe Properti v2 --- */
.omk-custom-dropdown {
  position: relative;
  width: 100%;
}

.omk-dropdown-trigger {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid #f1f5f9;
  border-radius: var(--omk-radius);
  background: var(--omk-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--omk-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-primary);
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.omk-dropdown-trigger:hover {
  border-color: #cbd5e1;
}
.omk-dropdown-trigger-label {
  display: flex;
  align-items: center;
}
.omk-dropdown-arrow {
  color: var(--omk-text-soft);
  font-size: 0.8125rem;
  transition: transform 0.2s;
}
.omk-custom-dropdown.open .omk-dropdown-arrow {
  transform: rotate(180deg);
}

.omk-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: var(--omk-radius);
  box-shadow: var(--omk-shadow-elevated);
  z-index: 50;
  padding: 0.375rem 0;
  overflow: hidden;
  animation: omk-dropdown-fade 0.15s ease-out;
}
.omk-custom-dropdown.open .omk-dropdown-menu {
  display: block;
}

@keyframes omk-dropdown-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.omk-dropdown-item {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  font-family: var(--omk-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.omk-dropdown-item:hover {
  background: var(--omk-surface-subtle);
}
.omk-dropdown-item.active {
  color: var(--omk-accent-strong);
  background: rgba(0, 168, 89, 0.06);
}

/* --- Hero Visual Carousel v2 --- */
.omk-hero-visual {
  position: relative;
  height: 240px;
  border-radius: var(--omk-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  background: #f1f5f9;
}
@media (min-width: 640px) { .omk-hero-visual { height: 320px; } }
@media (min-width: 768px) { .omk-hero-visual { height: 400px; } }
@media (min-width: 1024px) { .omk-hero-visual { min-height: 470px; height: 100%; } }

.omk-hero-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-out;
}

.omk-hero-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.omk-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nav Buttons */
.omk-hero-nav-buttons {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: flex;
  gap: 0.5rem;
  z-index: 20;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s, transform 0.3s;
}
.omk-hero-visual:hover .omk-hero-nav-buttons {
  opacity: 1;
  transform: scale(1);
}

.omk-hero-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.92);
  color: var(--omk-text-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: background 0.2s, transform 0.1s;
}
.omk-hero-nav-btn:hover {
  background: #ffffff;
}
.omk-hero-nav-btn:active {
  transform: translateY(1px);
}

/* Slide Counter */
.omk-hero-counter {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  padding: 0.25rem 0.625rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.5rem;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s;
}
.omk-hero-visual:hover .omk-hero-counter {
  opacity: 1;
}

/* Info Card */
.omk-hero-info-card {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 200px;
  height: 150px;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20;
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .omk-hero-info-card {
    right: 1.25rem;
    bottom: 1.25rem;
    width: calc(100% - 2.5rem);
    max-width: 320px;
    height: auto;
    padding: 1.25rem;
    border-radius: 1rem;
    display: block;
  }
}
.omk-hero-visual:hover .omk-hero-info-card {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.omk-hero-info-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background: rgba(0, 168, 89, 0.12);
  color: var(--omk-accent-strong);
  font-size: 0.625rem;
  font-weight: 800;
  border-radius: 0.375rem;
  text-transform: uppercase;
  align-self: flex-start;
}
@media (min-width: 640px) {
  .omk-hero-info-tag {
    font-size: 0.6875rem;
  }
}

.omk-hero-info-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--omk-text-primary);
  margin: 0.25rem 0 0.125rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .omk-hero-info-title {
    font-size: 1.125rem;
    margin: 0.5rem 0 0.25rem;
    line-height: 1.4;
  }
}

.omk-hero-info-addr {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--omk-text-soft);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.omk-hero-info-addr span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.omk-hero-info-addr i {
  color: var(--omk-accent-strong);
}
@media (min-width: 640px) {
  .omk-hero-info-addr {
    font-size: 0.75rem;
    margin: 0 0 0.75rem;
  }
}

.omk-hero-info-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}
@media (min-width: 640px) {
  .omk-hero-info-footer {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
  }
}

.omk-hero-info-price {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--omk-text-primary);
}
@media (min-width: 640px) {
  .omk-hero-info-price {
    font-size: 1.125rem;
  }
}

.omk-hero-info-link {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--omk-accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.omk-hero-info-link:hover {
  text-decoration: underline !important;
}
@media (min-width: 640px) {
  .omk-hero-info-link {
    font-size: 0.8125rem;
  }
}

/* --- Card Slider Styles --- */
.omk-card-slider-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.omk-card-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.omk-card-slider-track img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Nav Buttons (Hidden by default, shown on hover on desktop) */
.omk-card-nav-buttons {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.75rem;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.2s;
}
.omk-prop-card:hover .omk-card-nav-buttons {
  opacity: 1;
}

.omk-card-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background 0.15s, border-color 0.15s;
}
.omk-card-nav-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Dots Indicator */
.omk-card-dots {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.25rem;
  z-index: 15;
  pointer-events: none;
}

.omk-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.3s;
}
.omk-card-dot.active {
  background: #ffffff;
  width: 12px;
}

/* --- Premium Slide Hover Effect for Buttons --- */
.omk-btn-slide-effect {
  overflow: hidden;
  position: relative;
}

.omk-btn-slide-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 1.5em;
  line-height: 1.5em;
}
@media (min-width: 640px) {
  .omk-btn-slide-inner {
    height: 1.5em;
    overflow: hidden;
  }
}

.omk-btn-slide-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
  transform: translateY(0);
}

.omk-btn-slide-label-hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  white-space: nowrap;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
  transform: translateY(0);
}

.omk-btn-slide-effect:hover .omk-btn-slide-label {
  transform: translateY(-100%);
}

.omk-btn-slide-effect:hover .omk-btn-slide-label-hover {
  transform: translateY(-100%);
}

/* --- Neon Glow Button style (White-Silver Gradient) --- */
.omk-btn-neon {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.5rem;
  border-radius: var(--omk-radius); 
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%);
  color: var(--omk-accent-strong);
  font-weight: 800; font-size: 0.9375rem; font-family: var(--omk-font);
  border: 1px solid #cbd5e1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  text-decoration: none !important;
  transition: background 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.5s ease;
}
.omk-btn-neon:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
  border-color: #94a3b8;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(203, 213, 225, 0.8), 0 8px 25px rgba(15, 23, 42, 0.1);
  color: var(--omk-accent-hover) !important;
}
.omk-btn-neon:active {
  transform: translateY(-1px) scale(1);
}

/* --- Diagonal Ribbon for Listing Cards --- */
.omk-prop-ribbon {
  position: absolute;
  top: 20px;
  left: -36px;
  z-index: 20;
  width: 135px;
  text-align: center;
  font-size: 0.725rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 0;
  transform: rotate(-45deg);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  background: #ef4444 !important; /* Default Merah untuk Dijual */
}
.omk-prop-ribbon.disewa,
.omk-prop-ribbon.disewakan {
  background: #f59e0b !important; /* Orange/Amber untuk Disewa */
  width: 150px !important;
  left: -40px !important;
  top: 24px !important;
  font-size: 0.7rem !important;
  padding: 5px 0 !important;
}
.omk-prop-ribbon.dijual_disewakan {
  background: #6366f1 !important; /* Indigo untuk Dijual & Disewakan */
  width: 170px !important;
  left: -46px !important;
  top: 28px !important;
  font-size: 0.58rem !important;
  padding: 5px 0 !important;
  letter-spacing: 0.02em !important;
}

.omk-prop-labels-right {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 20;
  display: flex;
  gap: 0.375rem;
}

/* --- Back to Top Button --- */
.omk-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 99999 !important;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: var(--omk-accent-strong);
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 4px 12px rgba(0, 168, 89, 0.3);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s, box-shadow 0.2s;
}
.omk-back-to-top.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.omk-back-to-top:hover {
  background: var(--omk-accent-hover);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 168, 89, 0.4);
}
.omk-back-to-top:active {
  transform: translateY(-1px);
}
.omk-back-to-top i {
  font-size: 1.125rem;
  color: #ffffff !important;
}

/* --- Theme Toggle Button --- */
.omk-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: none;
  background: #ffffff;
  color: var(--omk-text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s, transform 0.2s;
  padding: 0;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .omk-theme-toggle { width: 44px; height: 44px; }
}
.omk-theme-toggle:hover { background: #f8fafc; }
.omk-theme-toggle:active { transform: scale(0.92); }

/* === Bintang menyebar dari tombol saat toggle dark mode === */
.omk-star-shoot {
  position: fixed;
  width: var(--size);
  height: var(--size);
  left: var(--cx);
  top: var(--cy);
  border-radius: 50%;
  background: #fbbf24;
  pointer-events: none;
  z-index: 999999;
  box-shadow: 0 0 10px 4px rgba(251,191,36,0.95), 0 0 18px 6px rgba(253,230,138,0.5);
  animation: omk-shoot-out var(--duration) cubic-bezier(0.1, 0.8, 0.3, 1) var(--delay) forwards;
}
@keyframes omk-shoot-out {
  0%   { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5); opacity: 0; }
}

/* === View Transition clipPath untuk dark mode === */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.omk-theme-transition::view-transition-old(root) { animation: none !important; mix-blend-mode: normal !important; }
.omk-theme-transition::view-transition-new(root) { animation: none !important; mix-blend-mode: normal !important; }

/* Sun/Moon icon toggle animations */
.omk-theme-toggle .omk-icon-sun,
.omk-theme-toggle .omk-icon-moon {
  position: absolute;
  font-size: 1.0625rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
/* Light mode: bulan tampil, matahari sembunyi */
body:not(.dark) .omk-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
body:not(.dark) .omk-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
/* Dark mode: matahari tampil, bulan sembunyi */
body.dark .omk-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
body.dark .omk-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* ============================================================
   DARK MODE — Token variables
   ============================================================ */
body.dark {
  --omk-text-primary:   #f8fafc;
  --omk-text-secondary: #cbd5e1;
  --omk-text-soft:      #94a3b8;
  --omk-surface-base:   #0f172a;
  --omk-surface-subtle: #1e293b;
  --omk-border:         rgba(255, 255, 255, 0.08);
  --omk-shadow-card:    0 4px 20px rgba(0,0,0,0.25);
  --omk-shadow-card-hover: 0 8px 32px rgba(0,0,0,0.35);
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

/* --- Header --- */
body.dark .omk-header {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark .omk-header.omk-scrolled {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.4) !important;
}
body.dark .omk-logo-name { color: #f8fafc !important; }
body.dark .omk-logo-tagline { color: #09a566 !important; }

body.dark .omk-nav-item { color: #94a3b8 !important; }
body.dark .omk-nav-item:hover {
  color: #f8fafc !important;
  background: rgba(255,255,255,0.06) !important;
}
body.dark .omk-nav-item.omk-active { color: var(--omk-accent-strong) !important; }

body.dark .omk-theme-toggle {
  background: #1e293b;
  border: none;
  color: #f8fafc;
}
body.dark .omk-theme-toggle:hover { background: #273549; }

body.dark .omk-btn-hamburger {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #f8fafc !important;
}
body.dark .omk-btn-hamburger:hover { background: #273549 !important; }

/* --- Mobile Drawer --- */
body.dark .omk-drawer {
  background: #1e293b !important;
}
body.dark .omk-drawer-header {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
body.dark .omk-drawer-close {
  background: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
}
body.dark .omk-drawer-nav-item { color: #94a3b8 !important; }
body.dark .omk-drawer-nav-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #f8fafc !important;
}
body.dark .omk-drawer-nav-item.omk-active {
  background: rgba(0,168,89,0.12) !important;
  color: #00a859 !important;
}
body.dark .omk-drawer-footer { border-top-color: rgba(255,255,255,0.08) !important; }

/* --- Hero Section --- */
body.dark .omk-hero { background: #0f172a !important; }
body.dark .omk-hero-title { color: #f8fafc !important; }
body.dark .omk-hero-desc { color: #cbd5e1 !important; }

body.dark .omk-search-form {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important;
}
body.dark .omk-search-input-wrap {
  background: #0f172a !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #cbd5e1 !important;
}
body.dark .omk-search-input-wrap input {
  background: transparent !important;
  color: #f8fafc !important;
}
body.dark .omk-search-input-wrap input::placeholder { color: #64748b !important; }
body.dark .omk-search-select {
  background-color: #0f172a !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #f8fafc !important;
}
body.dark .omk-search-select option,
body.dark select option {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}
body.dark .omk-hero-visual { background: #1e293b !important; }
body.dark .omk-hero-nav-btn {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}
body.dark .omk-hero-nav-btn:hover {
  background: #273549 !important;
  color: var(--omk-accent, #bedb22) !important;
}

body.dark .omk-dropdown-menu {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
body.dark .omk-dropdown-item {
  color: #cbd5e1 !important;
}
body.dark .omk-dropdown-item:hover {
  background: #273549 !important;
  color: #f8fafc !important;
}
body.dark .omk-dropdown-item.active {
  color: var(--omk-accent-strong) !important;
  background: rgba(0, 168, 89, 0.15) !important;
}

/* --- Stats Strip --- */
body.dark .omk-stats {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.dark .omk-stat-item {
  background: #1e293b !important;
  background-image: linear-gradient(#1e293b, #1e293b), linear-gradient(135deg, #00a859, #bef322) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  border: 2px solid transparent !important;
  box-shadow: var(--omk-shadow-card) !important;
}
body.dark .omk-stat-item:hover {
  box-shadow: var(--omk-shadow-card-hover) !important;
}
body.dark .omk-stat-number { color: #f8fafc !important; }
body.dark .omk-stat-label { color: #94a3b8 !important; }

/* --- Marquee Strip --- */
body.dark .omk-marquee {
  background: linear-gradient(90deg, #090d16, #0f172a 52%, #090d16) !important;
  border-color: rgba(190, 219, 34, 0.18) !important;
}
body.dark .omk-marquee::before {
  background: linear-gradient(90deg, #090d16, transparent) !important;
}
body.dark .omk-marquee::after {
  background: linear-gradient(270deg, #090d16, transparent) !important;
}
body.dark .omk-marquee-item {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(190, 219, 34, 0.18) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
body.dark .omk-marquee-item i {
  color: var(--omk-accent) !important;
}

/* --- Section Backgrounds --- */
body.dark .omk-section-bg-white { background: #0f172a !important; }
body.dark .omk-section-bg-subtle { background: #0d1526 !important; }
body.dark .omk-section-bg-slate {
  background: #0f172a !important;
  border-top-color: rgba(255,255,255,0.06) !important;
}
body.dark .omk-heading { color: #f8fafc !important; }
body.dark .omk-section-desc { color: #cbd5e1 !important; }
body.dark .omk-eyebrow { color: var(--omk-accent-strong) !important; }

/* --- Property Cards --- */
body.dark .omk-prop-card {
  background: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}
body.dark .omk-prop-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}
body.dark .omk-prop-body { background: #1e293b !important; }
body.dark .omk-prop-title { color: #f8fafc !important; }
body.dark .omk-prop-price { color: var(--omk-accent-strong) !important; }
body.dark .omk-prop-spec {
  background: #273549 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.dark .omk-prop-spec-label { color: #94a3b8 !important; }
body.dark .omk-prop-spec-value { color: #f8fafc !important; }
body.dark .omk-prop-label {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #e2e8f0 !important;
}
body.dark .omk-prop-image { background: #273549 !important; }

/* --- Buttons (outline) --- */
body.dark .omk-btn-outline {
  background: transparent !important;
  color: #f8fafc !important;
}
body.dark .omk-btn-outline::before {
  background-image: linear-gradient(#1e293b, #1e293b), linear-gradient(135deg, rgba(168, 255, 120, 0.25), rgba(120, 255, 214, 0.25)) !important;
}
body.dark .omk-btn-outline::after {
  background-image: linear-gradient(#1e293b, #1e293b), linear-gradient(135deg, #00a859, #bef322) !important;
}
body.dark .omk-btn-outline:hover {
  color: #bef322 !important;
}

/* --- Why Cards --- */
body.dark .omk-why-card {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.dark .omk-why-card:hover { background: #273549 !important; }
body.dark .omk-why-icon {
  background: #ffffff !important;
}
body.dark .omk-why-title { color: #f8fafc !important; }
body.dark .omk-why-desc { color: #94a3b8 !important; }

/* --- Sold Carousel --- */
body.dark .omk-sold-nav-btn {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #f8fafc !important;
}
body.dark .omk-sold-nav-btn:hover { border-color: rgba(255,255,255,0.2) !important; }
body.dark .omk-sold-card {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.dark .omk-sold-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important; }
body.dark .omk-sold-type { color: var(--omk-accent-strong) !important; }
body.dark .omk-sold-title { color: #f8fafc !important; }
body.dark .omk-sold-addr { color: #94a3b8 !important; }
body.dark .omk-sold-footer { border-top-color: rgba(255,255,255,0.06) !important; }
body.dark .omk-sold-price-label { color: #64748b !important; }

/* --- Footer --- */
body.dark .omk-footer {
  background: #090f1e !important;
  border-top-color: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
}
body.dark .omk-footer-brand-name { color: #f8fafc !important; }
body.dark .omk-footer-brand-tagline { color: #09a566 !important; }
body.dark .omk-footer-desc { color: #64748b !important; }
body.dark .omk-footer-contact span,
body.dark .omk-footer-contact a { color: #94a3b8 !important; }
body.dark .omk-footer-contact a:hover { color: var(--omk-accent-strong) !important; }

body.dark .omk-social-btn {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #94a3b8 !important;
}
body.dark .omk-social-btn:hover {
  color: #fff !important;
}
body.dark .omk-social-btn.omk-facebook:hover {
  background: #1877F2 !important;
  border-color: #1877F2 !important;
}
body.dark .omk-social-btn.omk-instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border-color: #dc2743 !important;
}
body.dark .omk-social-btn.omk-youtube:hover {
  background: #FF0000 !important;
  border-color: #FF0000 !important;
}
body.dark .omk-social-btn.omk-tiktok:hover {
  background: #000000 !important;
  border-color: #000000 !important;
}
body.dark .omk-footer-col-title { color: #f8fafc !important; }
body.dark .omk-footer-addr-text { color: #94a3b8 !important; font-size: 13px !important; }
body.dark .omk-footer-map {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.dark .omk-footer-nav-list a { color: #94a3b8 !important; }
body.dark .omk-footer-nav-list a:hover { color: var(--omk-accent-strong) !important; }
body.dark .omk-footer-nav-list a::before { background-color: rgba(0,168,89,0.08) !important; }

body.dark .omk-footer-bottom {
  border-top-color: rgba(255,255,255,0.06) !important;
  color: #475569 !important;
}
body.dark .omk-footer-bottom a { color: #475569 !important; }
body.dark .omk-footer-bottom a:hover { color: var(--omk-accent-strong) !important; }

@media (min-width: 768px) {
  .omk-theme-toggle {
    width: 44px;
    height: 44px;
  }
}
.omk-theme-toggle:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.omk-theme-toggle:active {
  transform: scale(0.92);
}

/* Sun/Moon icon toggle animations */
.omk-theme-toggle .omk-icon-sun,
.omk-theme-toggle .omk-icon-moon {
  position: absolute;
  font-size: 1.125rem;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Light mode (default) */
body:not(.dark) .omk-icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
body:not(.dark) .omk-icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Dark mode */
body.dark .omk-icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
body.dark .omk-icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/* --- Dark Mode Variables & Colors --- */
body.dark {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  --omk-text-primary: #f8fafc;
  --omk-text-secondary: #cbd5e1;
  --omk-text-soft: #94a3b8;
  --omk-surface-base: #0f172a;
  --omk-surface-subtle: #1e293b;
  --omk-border: rgba(255, 255, 255, 0.08);
}

body.dark .omk-theme-toggle {
  background: #1e293b;
  border: none;
  color: #f8fafc;
}
body.dark .omk-theme-toggle:hover {
  background: #273549;
}

body.dark .omk-header {
  background: rgba(30, 41, 59, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark .omk-logo-text {
  color: #ffffff !important;
}

body.dark .omk-nav-item {
  color: #cbd5e1 !important;
}
body.dark .omk-nav-item:hover, body.dark .omk-nav-item.omk-active {
  color: #ffffff !important;
}

body.dark .omk-prop-card {
  background: #1e293b !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
body.dark .omk-prop-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
}
body.dark .omk-prop-title {
  color: #ffffff !important;
}
body.dark .omk-prop-body {
  background: #1e293b !important;
}
body.dark .omk-prop-desc {
  color: #cbd5e1 !important;
}
body.dark .omk-prop-spec-val {
  color: #f8fafc !important;
}
body.dark .omk-prop-label {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark .omk-drawer {
  background: #1e293b !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark .omk-drawer-nav-item {
  color: #cbd5e1 !important;
}
body.dark .omk-drawer-nav-item:hover {
  background: #273549 !important;
  color: #ffffff !important;
}
body.dark .omk-drawer-nav-item.omk-active {
  background: rgba(0, 168, 89, 0.15) !important;
  color: #00a859 !important;
}
body.dark .omk-drawer-title {
  color: #ffffff !important;
}

body.dark .omk-section-title {
  color: #ffffff !important;
}
body.dark .omk-section-subtitle {
  color: #cbd5e1 !important;
}

body.dark .omk-info-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark .omk-info-card h3 {
  color: #ffffff !important;
}
body.dark .omk-info-card p {
  color: #cbd5e1 !important;
}

body.dark .omk-hero-info-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark .omk-hero-info-card h2, body.dark .omk-hero-info-card strong {
  color: #ffffff !important;
}
body.dark .omk-hero-info-card p {
  color: #cbd5e1 !important;
}

body.dark .omk-sold-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark .omk-sold-title a {
  color: #ffffff !important;
}
body.dark .omk-sold-addr {
  color: #cbd5e1 !important;
}

body.dark .omk-footer-col-title {
  color: #ffffff !important;
}
body.dark .omk-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================
   CATALOG PAGE v2 — Matches Vue.js PropertyCatalogPage
   All classes prefixed omk-catalog-* or use existing omk-prop-*
   ========================================================== */

/* ── Hero Section ── */
.omk-catalog-hero {
  position: relative;
  min-height: 420px !important;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
  z-index: 1;
  background: #1e293b;
}
.omk-catalog-hero__media {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1e293b;
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform;
}
.omk-catalog-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,23,42,0.76), rgba(15,23,42,0.58) 46%, rgba(15,23,42,0.34)),
    radial-gradient(circle at 18% 25%, rgba(190,219,34,0.18), transparent 32%);
  pointer-events: none;
}
.omk-catalog-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: #fff;
}
.omk-catalog-hero__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--omk-accent-strong);
  margin-bottom: 0.75rem;
}
.omk-catalog-hero__title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.omk-catalog-hero__desc {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(226,232,240,0.92);
}

/* ── Responsive Hero ── */
@media (max-width: 768px) {
  .omk-catalog-hero {
    min-height: 320px;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .omk-catalog-hero__title {
    font-size: 1.75rem;
  }
  .omk-catalog-hero__desc {
    font-size: 0.9375rem;
  }
}

/* ── Main catalog section ── */
.omk-catalog-main {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* ── Filter bar ── */
.omk-catalog-filter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 0.75rem;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #f1f5f9;
  box-shadow: 0 15px 40px rgba(0,0,0,0.04);
  position: relative;
  z-index: 40;
}
@media (min-width: 768px) {
  .omk-catalog-filter { grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; }
}
.omk-catalog-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 0.75rem;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--omk-text-secondary);
  cursor: text;
}
.omk-catalog-search-wrap i { flex-shrink: 0; font-size: 1rem; }
.omk-catalog-search-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--omk-font);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--omk-text-primary);
}
.omk-catalog-search-wrap input::placeholder { color: #94a3b8; }

.omk-catalog-luas-filter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;
  background: transparent;
  min-height: 52px;
  overflow: hidden;
  padding: 0 0.5rem;
}
.omk-luas-op-btn {
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--omk-text-primary);
  font-weight: 700;
  font-size: 0.9375rem;
  min-height: 38px;
  padding: 0 0.625rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.omk-luas-op-btn[data-op="gte"] {
  background: rgba(0, 168, 89, 0.08);
  color: #00a859;
  border-color: rgba(0, 168, 89, 0.18);
}
.omk-luas-op-btn[data-op="gte"]:hover {
  background: rgba(0, 168, 89, 0.15);
}
.omk-luas-op-btn[data-op="lte"] {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.18);
}
.omk-luas-op-btn[data-op="lte"]:hover {
  background: rgba(37, 99, 235, 0.15);
}
.omk-luas-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--omk-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-primary);
  padding: 0 0.5rem;
}
.omk-luas-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}
.omk-luas-submit-btn {
  background: var(--omk-accent-strong, #00a859);
  color: #ffffff !important;
  border: none;
  border-radius: 0.5rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
  flex-shrink: 0;
}
.omk-luas-submit-btn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}
.omk-luas-submit-btn:active {
  transform: translateY(1px);
}

/* ── Catalog Dropdowns ── */
.omk-catalog-dd-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;
  background: var(--omk-surface-subtle);
  cursor: pointer;
}
.omk-catalog-dd-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  gap: 0.5rem;
  background: none;
  border: none;
  outline: none;
  font-family: var(--omk-font);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--omk-text-primary);
  text-align: left;
  cursor: pointer;
}
.omk-catalog-dd-label { display: flex; align-items: center; gap: 0.5rem; }
.omk-catalog-dd-arrow {
  transition: transform 0.2s ease;
  font-size: 0.875rem;
  color: #94a3b8;
  flex-shrink: 0;
}
.omk-catalog-dd.open .omk-catalog-dd-arrow { transform: rotate(180deg); }
.omk-catalog-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.10);
  z-index: 50;
  padding: 0.375rem 0;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.omk-catalog-dd-menu::-webkit-scrollbar { width: 6px; }
.omk-catalog-dd-menu::-webkit-scrollbar-track { background: transparent; }
.omk-catalog-dd-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.omk-catalog-dd-menu::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.omk-catalog-dd.open .omk-catalog-dd-menu { display: block; }
.omk-catalog-dd-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  outline: none;
  font-family: var(--omk-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.omk-catalog-dd-item:hover { background: var(--omk-surface-subtle); }
.omk-catalog-dd-item.active { color: var(--omk-accent-strong); background: rgba(190,219,34,0.10); }

/* ── Info Bar ── */
.omk-catalog-info-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}
@media (min-width: 640px) {
  .omk-catalog-info-bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.omk-catalog-count {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--omk-text-secondary);
}
.omk-catalog-sort-wrap { display: flex; align-items: center; gap: 0.5rem; }
.omk-catalog-sort-label { font-size: 0.875rem; font-weight: 600; color: var(--omk-text-secondary); white-space: nowrap; }
.omk-catalog-sort-dd { min-width: 190px; min-height: 40px; }
.omk-catalog-sort-trigger { min-height: 40px; font-weight: 800; font-size: 0.875rem; }
.omk-catalog-sort-dd .omk-catalog-dd-menu { right: 0; left: auto; }

/* ── Property Grid ── */
.omk-catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .omk-catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .omk-catalog-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Property Card ── */
.omk-prop-card {
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
  transition: box-shadow 0.3s, transform 0.3s;
}
.omk-prop-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.10); transform: translateY(-4px); }

/* Card image wrapper (now an <a>) */
a.omk-prop-image, .omk-prop-image {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--omk-surface-subtle);
  text-decoration: none;
}

/* Top badge labels */
.omk-prop-top-labels {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}
.omk-prop-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  color: var(--omk-accent-strong);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0 0.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Image slider */
.omk-card-slider-container { width: 100%; height: 100%; overflow: hidden; }
.omk-card-slider-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-out; }
.omk-card-slider-track img { flex-shrink: 0; width: 100%; height: 100%; object-fit: cover; }
.omk-card-no-image { flex-shrink: 0; width: 100%; height: 100%; display: grid; place-items: center; background: var(--omk-surface-subtle); }
.omk-card-no-image i { font-size: 2rem; color: var(--omk-text-soft); }

/* Prev/Next nav */
.omk-card-nav-buttons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 20;
}
.omk-prop-card:hover .omk-card-nav-buttons { opacity: 1; }
@media (hover: none) { .omk-card-nav-buttons { opacity: 1; } }
.omk-card-nav-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff; color: #0f172a;
  pointer-events: auto; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: background 0.15s, transform 0.1s;
  font-size: 0.875rem;
}
.omk-card-nav-btn:hover { background: #f8fafc; }
.omk-card-nav-btn:active { transform: translateY(1px); }

/* Dots */
.omk-card-dots {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  z-index: 10;
}
.omk-card-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: width 0.3s, background 0.3s; }
.omk-card-dot.active { background: #fff; width: 12px; border-radius: 3px; }

/* Top right code badge */
.omk-prop-code-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 12;
  padding: 0.35rem 0.75rem;
  border-top-right-radius: 1rem; /* Pas mengikuti border radius kartu */
  border-bottom-left-radius: 0.5rem;
  font-size: 0.725rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
}
.omk-prop-code-badge.omk-code-a {
  background: linear-gradient(135deg, #ffd700 0%, #d4af37 40%, #b8860b 80%, #9a6a15 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.omk-prop-code-badge.omk-code-ai {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 25%, #cbd5e1 60%, #94a3b8 100%);
  color: #0f172a;
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.omk-prop-code-badge.omk-code-other {
  background-color: #4b5563;
  color: #fff;
}

/* Bottom gradient overlay */
.omk-prop-image-overlay {
  position: absolute;
  inset-x: 0; bottom: 0;
  padding: 0.5rem 0.75rem;
  background: transparent !important; /* Hapus overlay transparant hitam */
  z-index: 10;
  pointer-events: none;
}
.omk-prop-addr {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: #fff;
  margin: 0;
  overflow: hidden;
  max-width: 100%;
}
.omk-prop-addr i {
  flex-shrink: 0;
  font-size: 0.8125rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}
.omk-prop-addr-scroll-wrap {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  position: relative;
  margin-right: 10px; /* Beri jarak 10px dari border kanan agar tidak mentok */
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 98%);
  mask-image: linear-gradient(to right, #000 80%, transparent 98%);
}
.omk-prop-addr-text {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  padding-right: 180px; /* Jeda spasi 180px (~ container width + 10px / delay 0.3s) agar teks berikutnya antri setelah tenggelam */
}
.omk-prop-addr-text.static {
  display: inline-block;
  padding-right: 0;
}
.omk-prop-addr-text.marquee {
  display: none;
}
.omk-prop-card:hover .omk-prop-addr-text.static {
  display: none;
}
.omk-prop-card:hover .omk-prop-addr-text.marquee {
  display: inline-block;
  animation: omk-addr-marquee 10s linear infinite;
}
@keyframes omk-addr-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ── Card Body ── */
.omk-prop-body { padding: 1.25rem; }
.omk-prop-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--omk-text-primary);
  line-height: 1.35;
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 45px;
}
.omk-prop-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.omk-prop-spec {
  padding: 0.5rem;
  border: 1px solid #f1f5f9;
  border-radius: 0.5rem;
  background: var(--omk-surface-subtle);
  min-width: 0;
}
.omk-prop-spec-label {
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 0.6875rem; font-weight: 800;
  color: var(--omk-text-secondary);
  margin-bottom: 0.25rem;
}
.omk-prop-spec-value {
  display: block;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--omk-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin: 0;
}
.omk-prop-price { display: block; font-size: 1rem; font-weight: 800; color: var(--omk-text-primary); margin-bottom: 0.75rem; }
.omk-prop-price--contact { color: var(--omk-text-soft); font-weight: 600; }
.omk-prop-actions { display: flex; gap: 0.5rem; }
.omk-prop-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
  border-radius: 0.75rem;
  font-family: var(--omk-font);
  font-size: 0.8125rem; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.omk-prop-btn:active { transform: translateY(1px); }
.omk-prop-btn--outline { border: 1px solid #e2e8f0; background: #fff; color: var(--omk-text-primary); }
.omk-prop-btn--outline:hover { border-color: #94a3b8; }
.omk-prop-btn--green { border: 1px solid transparent; background: var(--omk-accent-strong); color: #fff !important; }
.omk-prop-btn--green:hover { background: var(--omk-accent-hover); }

/* ── Pagination Prev/Next ── */
.omk-catalog-pagination { display: flex; justify-content: center; margin-top: 4rem; }
.omk-pagination-inner { display: inline-flex; align-items: center; gap: 0.5rem; }
.omk-page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 40px; padding: 0 0.75rem;
  border: 1px solid #e2e8f0; border-radius: 0.75rem;
  background: #fff; color: var(--omk-text-primary);
  font-family: var(--omk-font); font-size: 0.875rem; font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.1s;
}
.omk-page-btn:hover { border-color: #94a3b8; }
.omk-page-btn:active { transform: translateY(1px); }
.omk-page-btn--disabled { opacity: 0.5; pointer-events: none; }
.omk-page-info { font-weight: 800; color: var(--omk-text-secondary); font-size: 0.9375rem; padding: 0 0.75rem; white-space: nowrap; }

/* ── Type Tabs (Rumah / Ruko) ── */
.omk-catalog-type-tabs {
  display: inline-flex;
  gap: 0;
  background: #f1f5f9;
  padding: 0.25rem;
  border-radius: 0.5rem;
  align-items: center;
}
.omk-catalog-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  color: #475569;
  transition: all 0.2s ease;
}
.omk-catalog-tab:hover { color: #1e293b; background: rgba(255,255,255,0.5); }
.omk-catalog-tab.active {
  background: var(--omk-accent-strong, #00a859);
  color: #fff !important;
}
body.dark .omk-catalog-tab {
  color: #0f172a;
}
body.dark .omk-catalog-tab.active {
  color: #fff !important;
}
body.dark .omk-catalog-tab:hover {
  color: #0f172a;
}

@media (max-width: 640px) {
  .omk-catalog-info-bar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .omk-catalog-type-tabs {
    order: 2;
    width: 100%;
    justify-content: center;
  }
}

/* ── Empty State ── */
.omk-catalog-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem;
  border-radius: 1rem; background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  color: var(--omk-text-secondary);
}
.omk-catalog-empty__icon { font-size: 2.25rem; color: var(--omk-text-soft); margin-bottom: 1rem; }
.omk-catalog-empty__title { font-size: 1.125rem; font-weight: 700; color: var(--omk-text-primary); margin: 0 0 0.5rem; }
.omk-catalog-empty__desc { font-size: 0.875rem; max-width: 380px; margin: 0 0 1.25rem; }

/* ── Dark Mode overrides (catalog v2) ── */
body.dark .omk-catalog-filter { background: rgba(30,41,59,0.95); border-color: rgba(255,255,255,0.06); }
body.dark .omk-catalog-search-wrap,
body.dark .omk-catalog-dd-wrap { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
body.dark .omk-catalog-search-wrap input { color: #f1f5f9; }
body.dark .omk-catalog-luas-filter { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; }
body.dark .omk-luas-op-btn { border: 1px solid transparent !important; }
body.dark .omk-luas-op-btn[data-op="gte"] {
  background: rgba(190, 243, 34, 0.12) !important;
  color: #bef322 !important;
  border-color: rgba(190, 243, 34, 0.25) !important;
}
body.dark .omk-luas-op-btn[data-op="gte"]:hover {
  background: rgba(190, 243, 34, 0.2) !important;
}
body.dark .omk-luas-op-btn[data-op="lte"] {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}
body.dark .omk-luas-op-btn[data-op="lte"]:hover {
  background: rgba(56, 189, 248, 0.2) !important;
}
body.dark .omk-luas-input { color: #f1f5f9 !important; }
body.dark .omk-luas-submit-btn { background: #bef322 !important; color: #0f172a !important; }
body.dark .omk-catalog-dd-trigger { color: #f1f5f9; }
body.dark .omk-catalog-dd-menu { background: #1e293b; border-color: rgba(255,255,255,0.08); }
body.dark .omk-catalog-dd-menu::-webkit-scrollbar-thumb { background: #475569; }
body.dark .omk-catalog-dd-menu::-webkit-scrollbar-thumb:hover { background: #64748b; }
body.dark .omk-catalog-dd-item { color: #f1f5f9; }


body.dark .omk-prop-spec-label { color: #94a3b8; }
body.dark .omk-prop-spec-value,
body.dark .omk-prop-title,
body.dark .omk-prop-price { color: #f1f5f9; }
body.dark .omk-prop-btn--outline { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #f1f5f9; }
body.dark .omk-page-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #f1f5f9; }
body.dark .omk-catalog-empty { background: #1e293b; }

/* ── Article list (home.php) ── */
/* ── Arlina Web: Info Menarik ── */
.omk-article-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.omk-article-card {
  display: flex;
  flex-direction: column;
  background: #ffffff; /* color.surface.muted */
  border-radius: 8px; /* radius.sm */
  overflow: hidden;
  border: 1px solid #eef1f4;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 0px 10px 0px;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Google Sans', 'Inter', sans-serif;
  position: relative;
}
@media (min-width: 768px) {
  .omk-article-card {
    flex-direction: row !important;
    align-items: center !important;
    padding: 12px !important;
    gap: 20px !important;
    min-height: 180px;
  }
  .omk-article-card .omk-article-thumb {
    width: 260px !important;
    height: 162px !important; /* Rasio tetap 16:10 agar tidak meregang/terpotong ekstrim */
    aspect-ratio: 16/10 !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
  }
  .omk-article-card .omk-article-body {
    padding: 0 12px 0 0 !important;
    flex: 1;
  }
}

.omk-article-card::before {
  content: none !important; /* Hapus top border gradient */
}

/* Thumbnail wrapper */
.omk-article-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f7f8fa;
  text-decoration: none;
}

.omk-article-thumb img {
  width: 100%;
  height: 100%;
  transition: transform 400ms ease;
}

.omk-article-thumb:hover img {
  transform: scale(1.06);
}

.omk-article-thumb-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 400ms ease;
}

.omk-article-thumb:hover .omk-article-thumb-bg {
  transform: scale(1.06);
}

.omk-article-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.02);
  pointer-events: none;
}

/* Category Badge */
.omk-article-badge-cat {
  position: absolute;
  top: 10px; /* space.4 */
  left: 10px; /* space.4 */
  z-index: 10;
  padding: 4px 10px;
  font-size: 12px; /* font.size.xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px; /* radius.xs */
  color: #ffffff;
  background: #ff3232; /* color.surface.strong */
  box-shadow: 0 2px 5px rgba(255, 50, 50, 0.2);
  pointer-events: none;
}

/* Body container */
.omk-article-body {
  padding: 15px 20px 20px 20px; /* space.6 space.8 space.8 space.8 */
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #ffffff;
}
@media (max-width: 640px) {
  .omk-article-body { padding: 15px; }
}

/* Meta info (date & views) */
.omk-article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.omk-article-date,
.omk-article-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px; /* font.size.sm */
  font-weight: 500;
  color: #777777;
}

.omk-article-date i,
.omk-article-views i {
  color: #294db4; /* color.text.inverse */
  font-size: 12px;
}

/* Card Title */
.omk-article-card .omk-article-title {
  margin: 0 0 10px 0;
  font-size: 15px; /* font.size.lg */
  font-weight: 700;
  line-height: 1.45;
  padding: 0;
  text-shadow: none !important;
}

.omk-article-title a {
  color: #222222; /* color.text.primary */
  text-decoration: none;
  transition: color 200ms ease;
  text-shadow: none !important;
}

.omk-article-title a:hover {
  color: #294db4; /* color.text.inverse */
}


/* Card Excerpt */
.omk-article-excerpt {
  font-size: 13px; /* font.size.sm */
  font-weight: 500;
  color: #555555;
  line-height: 1.6;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  flex: 1;
}

/* Read More Button */
.omk-article-readmore,
.omk-article-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px; /* font.size.sm */
  font-weight: 700;
  color: #294db4; /* color.text.inverse */
  text-decoration: none;
  margin-top: auto;
  transition: gap 200ms ease, color 200ms ease;
}

.omk-article-readmore:hover,
.omk-article-read-more:hover {
  color: #ff3232; /* color.surface.strong */
  gap: 10px;
}

/* ── Date Badge ── */
.omk-article-date-badge {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 0.375rem 0.5rem;
  background: #ffffff;
  border-radius: var(--omk-radius-sm, 0.5rem);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  text-align: center;
  line-height: 1;
  z-index: 3;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.omk-article-card:hover .omk-article-date-badge {
  transform: scale(1.05) rotate(-2deg);
}
.omk-article-date-day {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--omk-accent-strong,#00a859);
}
.omk-article-date-month {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--omk-text-soft,#6b7280);
  margin-top: 0.125rem;
}

/* ── Body ── */
.omk-article-body {
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 768px) {
  .omk-article-body { padding: 0; }
}

/* ── Meta Row ── */
.omk-article-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}

.omk-article-category {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--omk-accent-strong,#00a859);
  text-decoration: none;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: rgba(0,168,89,0.08);
  transition: background 0.2s, color 0.2s;
}
.omk-article-category:hover {
  background: var(--omk-accent-strong,#00a859);
  color: #ffffff;
}

.omk-article-readtime {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--omk-text-soft,#6b7280);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.omk-article-readtime i { font-size: 0.75rem; }

/* ── Title ── */
.omk-article-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.45;
}
.omk-article-title a {
  color: var(--omk-text-primary,#0f172a);
  text-decoration: none;
  transition: color 0.2s ease;
}
.omk-article-title a:hover {
  color: var(--omk-accent-strong,#00a859);
}

/* ── Excerpt ── */
.omk-article-excerpt {
  font-size: 0.8125rem;
  color: var(--omk-text-secondary,#374151);
  line-height: 1.7;
  margin: 0 0 1.25rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (min-width: 768px) {
  .omk-article-excerpt { font-size: 0.875rem; }
}

/* ── Footer Row ── */
.omk-article-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(226,232,240,0.7);
}
.omk-article-views {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--omk-text-soft,#6b7280);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.omk-article-views i { font-size: 0.8125rem; }

/* ── Read More ── */
.omk-article-read-more {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--omk-accent-strong,#00a859);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: gap 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.omk-article-read-more i {
  font-size: 0.6875rem;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.omk-article-read-more:hover {
  gap: 0.625rem;
  color: var(--omk-accent-hover,#008f4c);
}
.omk-article-read-more:hover i {
  transform: translateX(3px);
}

/* ── Gallery (template-gallery.php) ── */
.omk-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .omk-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .omk-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
.omk-gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--omk-surface-subtle);
  border: 1px solid #f1f5f9;
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
  text-decoration: none;
}
.omk-gallery-item:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.omk-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.omk-gallery-item:hover img {
  transform: scale(1.05);
}
.omk-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.30) 60%, transparent);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s;
}
.omk-gallery-item:hover .omk-gallery-overlay {
  opacity: 1;
}
.omk-gallery-title {
  color: #fff;
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.35;
  margin: 0 0 0.25rem;
}
.omk-gallery-link {
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.omk-gallery-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 0.625rem;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.04em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.omk-gallery-badge.badge-sudah_terjual {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
}
.omk-gallery-badge.badge-sudah_tersewa {
  background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
}

/* ── Jasa Konstruksi (template-jasa.php) ── */
.omk-jasa-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .omk-jasa-layout { grid-template-columns: 1.8fr 1fr; gap: 3rem; align-items: start; }
}
.omk-jasa-content {
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
  border: 1px solid #f1f5f9;
  color: var(--omk-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.75;
}
@media (min-width: 768px) {
  .omk-jasa-content { padding: 2.5rem; }
}
.omk-jasa-content h1 {
  font-size: 1.75rem;
  color: var(--omk-text-primary);
  font-weight: 800;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.omk-jasa-content h2 {
  font-size: 1.45rem;
  color: var(--omk-text-primary);
  font-weight: 800;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.omk-jasa-content h3 {
  font-size: 1.2rem;
  color: var(--omk-text-primary);
  font-weight: 800;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}
.omk-jasa-content p {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
}
.omk-jasa-content .has-medium-font-size {
  font-size: 1.0625rem !important;
  font-weight: 500;
  line-height: 1.7;
}
.omk-jasa-content .has-small-font-size {
  font-size: 0.9375rem !important;
}
.omk-jasa-content ol, .omk-jasa-content ul {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}
.omk-jasa-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .omk-jasa-sidebar { position: sticky; top: 6rem; }
}
.omk-jasa-cta-card {
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.omk-jasa-cta-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(0,168,89,0.1);
  color: #00a859;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.omk-jasa-cta-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--omk-text-primary);
  margin: 0;
}
.omk-jasa-cta-desc {
  font-size: 0.9375rem;
  color: var(--omk-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.omk-jasa-features {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.omk-jasa-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--omk-text-secondary);
  font-weight: 500;
}
.omk-jasa-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00a859;
  flex-shrink: 0;
}
.omk-jasa-dark-card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.omk-jasa-dark-card h4 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: #fff;
}
.omk-jasa-dark-card p {
  font-size: 0.875rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

/* ── About Us (template-about.php) ── */
.omk-about-wrap {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.omk-about-card {
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
  border: 1px solid #f1f5f9;
}
@media (min-width: 768px) {
  .omk-about-card { padding: 2.5rem; }
}
.omk-about-card h3 {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--omk-text-primary);
  margin: 0 0 1rem;
}
.omk-about-card p {
  font-size: 0.9375rem;
  color: var(--omk-text-secondary);
  line-height: 1.75;
  margin: 0 0 1rem;
}
.omk-about-card p:last-child {
  margin: 0;
}
.omk-about-content {
  line-height: 1.8;
  color: var(--omk-text-secondary);
  font-size: 0.9375rem;
}
.omk-about-content p {
  margin-bottom: 1.5rem;
}
.omk-about-content h1, .omk-about-content h2, .omk-about-content h3 {
  color: var(--omk-text-primary);
  font-weight: 800;
  margin-top: 1.8rem;
  margin-bottom: 1rem;
}
.omk-about-content .wp-block-columns,
.omk-about-content .wp-block-image,
.omk-about-content .wp-block-gallery,
.omk-about-content figure {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

/* ── Contact Page (template-contact.php) ── */
.omk-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .omk-contact-layout { grid-template-columns: 1.12fr 0.88fr; gap: 3.5rem; align-items: start; }
}
.omk-contact-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--omk-accent-strong);
  margin-bottom: 0.75rem;
}
.omk-contact-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--omk-text-primary);
  line-height: 1.25;
  margin: 0 0 1rem;
}
.omk-contact-desc {
  font-size: 0.9375rem;
  color: var(--omk-text-secondary);
  line-height: 1.7;
  margin: 0 0 2rem;
}
.omk-contact-form-card {
  max-width: 500px;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
  border: 1px solid #f1f5f9;
}
@media (min-width: 640px) {
  .omk-contact-form-card { padding: 2rem; }
}
.omk-contact-form-group {
  margin-bottom: 1.25rem;
}
.omk-contact-form-card label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--omk-text-secondary);
  margin-bottom: 0.5rem;
}
.omk-contact-form-card input,
.omk-contact-form-card textarea {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  outline: none;
  background: #f8fafc;
  font-family: var(--omk-font);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--omk-text-primary);
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.omk-contact-form-card input:focus,
.omk-contact-form-card textarea:focus {
  background: #fff;
  border-color: #94a3b8;
}
.omk-contact-form-card textarea {
  resize: vertical;
  min-height: 120px;
}
.omk-contact-submit {
  width: 100%;
  min-height: 48px;
  border-radius: 0.75rem;
  border: none;
  background: var(--omk-accent-strong);
  color: #fff;
  font-family: var(--omk-font);
  font-size: 0.9375rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.omk-contact-submit:hover {
  background: var(--omk-accent-hover);
}
.omk-contact-submit:active {
  transform: translateY(1px);
}
.omk-contact-info-card {
  padding: 2rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #090d16, #1e293b);
  color: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.omk-contact-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(190,219,34,0.15), transparent 60%);
  pointer-events: none;
}
.omk-contact-info-name {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: #fff;
}
.omk-contact-info-addr {
  font-size: 0.875rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.omk-contact-info-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #cbd5e1;
}
.omk-contact-info-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.omk-contact-info-detail i {
  margin-top: 0.25rem;
  color: var(--omk-accent-strong);
  flex-shrink: 0;
}
.omk-contact-info-map {
  margin-top: 2rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.omk-contact-info-map iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}
@media (min-width: 1024px) {
  .omk-contact-right { position: sticky; top: 6rem; }
}

/* ── Dark Mode overrides for new sections ── */
body.dark .omk-article-card {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
body.dark .omk-article-card::before {
  content: none !important;
}
body.dark .omk-article-thumb {
  background: rgba(255,255,255,0.03);
}
body.dark .omk-article-body {
  background: #1e293b !important; /* Menimpa background putih dari light mode */
}
body.dark .omk-article-card .omk-article-title a { color: #f1f5f9; }
body.dark .omk-article-card .omk-article-title a:hover { color: #60a5fa; }
body.dark .omk-article-excerpt { color: #cbd5e1; }
body.dark .omk-article-date,
body.dark .omk-article-views { color: #94a3b8; }
body.dark .omk-article-readmore,
body.dark .omk-article-read-more { color: #60a5fa; }
body.dark .omk-article-readmore:hover,
body.dark .omk-article-read-more:hover { color: #f87171; }



body.dark .omk-gallery-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}

body.dark .omk-jasa-content {
  background: #1e293b;
  border-color: rgba(255,255,255,0.06);
}
body.dark .omk-jasa-content h1,
body.dark .omk-jasa-content h2,
body.dark .omk-jasa-content h3 {
  color: #f1f5f9;
}
body.dark .omk-jasa-cta-card {
  background: #1e293b;
  border-color: rgba(255,255,255,0.06);
}
body.dark .omk-jasa-cta-title { color: #f1f5f9; }

body.dark .omk-about-card {
  background: #1e293b;
  border-color: rgba(255,255,255,0.06);
}
body.dark .omk-about-card h3 { color: #f1f5f9; }
body.dark .omk-about-content h1,
body.dark .omk-about-content h2,
body.dark .omk-about-content h3 {
  color: #f1f5f9;
}

body.dark .omk-contact-form-card {
  background: #1e293b;
  border-color: rgba(255,255,255,0.06);
}
body.dark .omk-contact-form-card input,
body.dark .omk-contact-form-card textarea {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #f1f5f9;
}
body.dark .omk-contact-form-card input:focus,
body.dark .omk-contact-form-card textarea:focus {
  border-color: var(--omk-accent-strong);
}
body.dark .omk-contact-title { color: #f1f5f9; }

/* ==========================================================
   SPA PAGE DIRECTIONAL TRANSITIONS
   ========================================================== */
.swup-transition {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#swup-content {
  width: 100%;
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.38s ease;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* Exit transitions (old page leaves) */
.swup-transition.route-next #swup-content.is-exiting {
  opacity: 0;
  transform: translate3d(-80px, 0, 0);
}
.swup-transition.route-prev #swup-content.is-exiting {
  opacity: 0;
  transform: translate3d(80px, 0, 0);
}

/* Entry transitions (new page enters) */
.swup-transition.route-next #swup-content.is-entering {
  opacity: 0;
  transform: translate3d(80px, 0, 0);
}
.swup-transition.route-prev #swup-content.is-entering {
  opacity: 0;
  transform: translate3d(-80px, 0, 0);
}

/* ==========================================================
   LISTING DETAIL PAGE STYLES
   ========================================================== */
.omk-detail-hero {
  background: var(--omk-surface-base);
  border-bottom: 1px solid var(--omk-border);
  padding-top: 1rem;
  padding-bottom: 4rem;
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
}
.omk-detail-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .omk-detail-hero-inner {
    grid-template-columns: 1.12fr 0.88fr;
    gap: 3.5rem;
  }
}

/* Info Column (Left) */
.omk-detail-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.omk-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--omk-text-secondary);
  margin-bottom: 1.5rem;
  text-decoration: none;
  transition: color 0.2s;
}
.omk-detail-back-link:hover {
  color: var(--omk-text-primary);
}
.omk-detail-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: var(--omk-radius-sm);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0 0.75rem;
  margin-bottom: 1rem;
  margin-right: 0.5rem;
}
.omk-badge-dijual, .omk-badge-disewa, .omk-badge-dijual_disewakan {
  background-color: rgba(0, 168, 89, 0.12);
  color: var(--omk-accent-strong);
}
.omk-badge-terjual {
  background-color: #f1f5f9;
  color: #64748b;
}
.omk-detail-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--omk-text-primary);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}
.omk-detail-address {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--omk-text-secondary);
}
.omk-detail-address i {
  color: var(--omk-accent-strong);
}
.omk-detail-price-wrap {
  margin: 0.7rem;
}
.omk-detail-price {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 900;
  color: var(--omk-text-primary);
}
.omk-detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.omk-detail-btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  border-radius: var(--omk-radius);
  font-weight: 700;
  background: var(--omk-text-primary);
  color: #fff !important;
  padding: 0 1.5rem;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: background 0.2s, transform 0.15s;
}
.omk-detail-btn-wa:hover {
  background: #1e293b;
  color: #fff !important;
}
.omk-detail-btn-wa:active {
  transform: translateY(1px);
}
.omk-detail-btn-maps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  border-radius: var(--omk-radius);
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--omk-border);
  color: var(--omk-text-primary);
  padding: 0 1.5rem;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.omk-detail-btn-maps:hover {
  border-color: #cbd5e1;
}
.omk-detail-btn-maps:active {
  transform: translateY(1px);
}
.omk-detail-btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  border-radius: var(--omk-radius);
  background: #fff;
  border: 1px solid var(--omk-border);
  color: var(--omk-text-primary);
  padding: 0;
  font-size: 1.25rem;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.omk-detail-btn-social:active {
  transform: translateY(1px);
}
.omk-detail-btn-social.omk-btn-ig:hover {
  border-color: #d62976;
  background-color: rgba(214, 41, 118, 0.05);
  color: #d62976;
}
.omk-detail-btn-social.omk-btn-fb:hover {
  border-color: #1877f2;
  background-color: rgba(24, 119, 242, 0.05);
  color: #1877f2;
}
.omk-detail-btn-social.omk-btn-tiktok:hover {
  border-color: #000000;
  background-color: rgba(0, 0, 0, 0.05);
  color: #000000;
}

/* Gallery Column (Right) */
.omk-detail-gallery-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.omk-detail-gallery-main {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--omk-surface-subtle);
  border: 1px solid var(--omk-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.omk-detail-gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}
.omk-detail-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: var(--omk-radius-sm);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.70);
  color: var(--omk-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: background-color 0.2s, transform 0.1s;
}
.omk-detail-gallery-nav:hover {
  background: #ffffff;
}
.omk-detail-gallery-nav:active {
  transform: translateY(-50%) scale(0.97);
}
.omk-gallery-prev {
  left: 1rem;
}
.omk-gallery-next {
  right: 1rem;
}
.omk-gallery-counter {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  z-index: 10;
}
.omk-gallery-view-counter {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.omk-detail-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .omk-detail-gallery-thumbs {
    grid-template-columns: repeat(8, 1fr);
  }
}
.omk-detail-thumb {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--omk-radius-sm);
  border: 1px solid var(--omk-border);
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: border-color 0.2s;
}
.omk-detail-thumb:hover {
  border-color: #cbd5e1;
}
.omk-detail-thumb.active {
  border: 2px solid var(--omk-accent-strong);
}
.omk-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.omk-detail-gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  aspect-ratio: 4/3;
  border-radius: 1rem;
  background: var(--omk-surface-subtle);
  border: 1px dashed var(--omk-border);
  color: var(--omk-text-soft);
}
.omk-detail-gallery-placeholder i {
  font-size: 2.5rem;
}
.omk-detail-gallery-placeholder span {
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Content Grid Section (Below Hero) ── */
.omk-detail-content-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.omk-detail-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .omk-detail-content-grid {
    grid-template-columns: 1.12fr 0.88fr;
    gap: 3.5rem;
  }
}
.omk-detail-content-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.omk-detail-card {
  padding: 0.8rem;
  border-radius: 1rem;
  background: var(--omk-surface-base);
  border: 1px solid var(--omk-border);
  box-shadow: 0 8px 30px rgba(0,0,0,0.03);
  width: 100%;
  box-sizing: border-box;
}
.omk-detail-card-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--omk-text-primary);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 1px solid var(--omk-border);
  padding-bottom: 0.75rem;
}
.omk-detail-card-title i {
  color: var(--omk-accent-strong);
}

/* Spesifikasi Utama Grid */
.omk-detail-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) {
  .omk-detail-specs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.omk-detail-spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.875rem;
  background: var(--omk-surface-subtle);
  border: 1px solid var(--omk-border);
  border-radius: var(--omk-radius);
  gap: 0.25rem;
}
.omk-detail-spec-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--omk-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.omk-detail-spec-label i {
  color: var(--omk-accent-strong);
  font-size: 0.8125rem;
}
.omk-detail-spec-value {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--omk-text-primary);
}

/* Detail Fasilitas Dl List */
.omk-detail-facility-dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 0;
}
.omk-detail-facility-row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 0.5rem;
}
.omk-detail-facility-dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--omk-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.omk-detail-facility-dt i {
  color: var(--omk-accent-strong);
  width: 1rem;
  text-align: center;
}
.omk-detail-facility-dd {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--omk-text-primary);
}

/* Deskripsi & Media Embeds */
.omk-detail-desc {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--omk-text-secondary);
}
.omk-detail-desc p {
  margin: 0 0 1rem;
}
.omk-detail-desc p:last-child {
  margin: 0;
}
.omk-detail-map, .omk-detail-video {
  width: 100%;
  border-radius: var(--omk-radius);
  overflow: hidden;
  border: 1px solid var(--omk-border);
  aspect-ratio: 16/9;
}
.omk-detail-map iframe, .omk-detail-video iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Sticky Contact Sidebar (Right) */
.omk-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .omk-detail-sidebar {
    position: sticky;
    top: 120px;
  }
}
.omk-detail-contact-panel {
  position: relative;
  padding: 2rem;
  border-radius: 1.25rem;
  background: linear-gradient(to top right, #090d16, #1e293b);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.omk-detail-contact-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(190, 219, 34, 0.12), transparent 60%);
  pointer-events: none;
}
.omk-detail-contact-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--omk-accent);
  margin: 0 0 0.5rem;
}
.omk-detail-contact-heading {
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  color: #fff;
}
.omk-detail-contact-desc {
  font-size: 0.8125rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.omk-detail-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  border-radius: var(--omk-radius);
  font-weight: 800;
  background: var(--omk-accent);
  color: #0f172a;
  text-decoration: none;
  font-size: 0.9375rem;
  box-shadow: 0 4px 12px rgba(190, 219, 34, 0.15);
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
}
.omk-detail-contact-btn:hover {
  background: var(--omk-accent-strong);
  color: #ffffff;
}
.omk-detail-contact-btn:active {
  transform: translateY(1px);
}
.omk-detail-contact-unit {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.omk-detail-contact-unit-label {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
}
.omk-detail-contact-unit-value {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255,255,255,0.06);
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
}

/* ── Responsive adjustments for Detail Page cards and items ── */
@media (max-width: 768px) {
  .omk-detail-hero {
    padding-top: 0.5rem;
    padding-bottom: 2rem;
    border-radius: 0 0 1rem 1rem;
  }
  .omk-detail-hero-inner {
    gap: 1.25rem;
  }
  .omk-detail-content-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .omk-detail-content-grid {
    gap: 1.25rem;
  }
  .omk-detail-content-left {
    gap: 1rem;
  }
  .omk-detail-sidebar {
    gap: 1rem;
  }
  .omk-detail-card {
    padding: 0.8rem;
    border-radius: 0.75rem;
  }
  .omk-detail-map {
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
  .omk-detail-contact-panel {
    padding: 0.8rem;
    border-radius: 0.75rem;
  }
  .omk-detail-card-title {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }
  .omk-detail-specs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .omk-detail-spec-item {
    padding: 0.5rem;
    gap: 0.125rem;
  }
  .omk-detail-spec-value {
    font-size: 0.8125rem;
  }
  .omk-detail-facility-dl {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .omk-detail-facility-dt {
    font-size: 0.8125rem;
  }
  .omk-detail-facility-dd {
    font-size: 0.8125rem;
  }
  .omk-detail-hero-actions {
    gap: 0.5rem;
    width: 100%;
  }
  .omk-detail-btn-wa,
  .omk-detail-btn-maps {
    flex: 1 1 calc(50% - 0.25rem);
    min-height: 44px;
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }
  .omk-detail-btn-social {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .omk-detail-gallery-wrap {
    gap: 0.5rem;
  }
  .omk-detail-gallery-main {
    border-radius: 0.75rem;
  }
  .omk-gallery-view-counter {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    gap: 0.25rem;
  }
  .omk-detail-gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
  }
  .omk-detail-thumb {
    border-radius: 0.375rem;
  }
  .omk-detail-gallery-placeholder {
    border-radius: 0.75rem;
    gap: 0.5rem;
  }
  .omk-detail-gallery-placeholder i {
    font-size: 2rem;
  }
  .omk-detail-gallery-placeholder span {
    font-size: 0.8125rem;
  }
  .omk-detail-desc {
    font-size: 0.875rem;
  }
  .omk-detail-price-wrap {
    margin: 0.5rem 0;
  }
  .omk-detail-back-link {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
  }
}
@media (max-width: 576px) {
  .omk-detail-btn-wa,
  .omk-detail-btn-maps {
    flex: 1 1 100%;
  }
  .omk-detail-hero-actions .omk-detail-btn-social {
    flex: 1 1 calc(33.333% - 0.333rem);
    max-width: 80px;
  }
  .omk-detail-gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
  .omk-detail-specs-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .omk-detail-spec-item {
    grid-column: auto !important;
  }
}
@media (max-width: 360px) {
  .omk-detail-card {
    padding: 0.8rem;
    border-radius: 0.625rem;
  }
  .omk-detail-contact-panel {
    padding: 0.8rem;
    border-radius: 0.625rem;
  }
  .omk-detail-specs-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .omk-detail-spec-item {
    grid-column: auto !important;
    padding: 0.375rem;
  }
  .omk-detail-gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
  .omk-detail-title {
    font-size: 1.25rem;
  }
  .omk-detail-price {
    font-size: 1.125rem;
  }
}

/* ── Detail Page Dark Mode ── */
body.dark .omk-detail-hero {
  background: #0f172a;
  border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .omk-detail-back-link {
  color: #94a3b8;
}
body.dark .omk-detail-back-link:hover {
  color: #f1f5f9;
}
body.dark .omk-detail-title {
  color: #f1f5f9;
}
body.dark .omk-detail-address {
  color: #94a3b8;
}
body.dark .omk-detail-price {
  color: #f1f5f9;
}
body.dark .omk-detail-btn-wa {
  background: #f1f5f9;
  color: #0f172a !important;
}
body.dark .omk-detail-btn-wa:hover {
  background: #cbd5e1;
  color: #0f172a !important;
}
body.dark .omk-detail-btn-maps {
  background: transparent;
  border-color: rgba(255,255,255,0.1);
  color: #cbd5e1;
}
body.dark .omk-detail-btn-maps:hover {
  border-color: rgba(255,255,255,0.25);
  color: #f1f5f9;
}
body.dark .omk-detail-btn-social {
  background: transparent;
  border-color: rgba(255,255,255,0.1);
  color: #cbd5e1;
}
body.dark .omk-detail-btn-social.omk-btn-ig:hover {
  border-color: #d62976;
  background-color: rgba(214, 41, 118, 0.1);
  color: #f43f5e;
}
body.dark .omk-detail-btn-social.omk-btn-fb:hover {
  border-color: #1877f2;
  background-color: rgba(24, 119, 242, 0.1);
  color: #3b82f6;
}
body.dark .omk-detail-btn-social.omk-btn-tiktok:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
body.dark .omk-detail-gallery-main {
  background: #1e293b;
  border-color: rgba(255,255,255,0.06);
}
body.dark .omk-detail-gallery-nav {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}
body.dark .omk-detail-gallery-nav:hover {
  background: #1e293b;
}
body.dark .omk-detail-thumb {
  border-color: rgba(255,255,255,0.08);
}
body.dark .omk-detail-thumb:hover {
  border-color: rgba(255,255,255,0.2);
}
body.dark .omk-gallery-view-counter {
  background: rgba(30, 41, 59, 0.85);
}
body.dark .omk-detail-gallery-placeholder {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  color: #94a3b8;
}
body.dark .omk-detail-card {
  background: #0f172a;
  border-color: rgba(255,255,255,0.06);
}
body.dark .omk-detail-card-title {
  color: #f1f5f9;
  border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .omk-detail-spec-item {
  background: #1e293b;
  border-color: rgba(255,255,255,0.06);
}
body.dark .omk-detail-spec-label {
  color: #cbd5e1;
}
body.dark .omk-detail-spec-value {
  color: #f1f5f9;
}
body.dark .omk-detail-facility-row {
  border-bottom-color: rgba(255,255,255,0.04);
}
body.dark .omk-detail-facility-dt {
  color: #cbd5e1;
}
body.dark .omk-detail-facility-dd {
  color: #f1f5f9;
}
body.dark .omk-detail-desc {
  color: #cbd5e1;
}
body.dark .omk-detail-map,
body.dark .omk-detail-video {
  border-color: rgba(255,255,255,0.08);
}

/* =========================================
   Testimonial Marquee (Comment Cards)
   ========================================= */
.omk-sold-testimonials-wrap {
  margin-top: 3.5rem;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.omk-sold-testimonials-wrap::before,
.omk-sold-testimonials-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 5;
  pointer-events: none;
}
.omk-sold-testimonials-wrap::before {
  left: 0;
  background: linear-gradient(to right, #f1f5f9, transparent);
}
.omk-sold-testimonials-wrap::after {
  right: 0;
  background: linear-gradient(to left, #f1f5f9, transparent);
}
.omk-testimonial-marquee-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
}
.omk-testimonial-marquee-content {
  display: flex;
  gap: 1.5rem;
  animation: omk-marquee-scroll 75s linear infinite;
}
.omk-testimonial-marquee-track:hover .omk-testimonial-marquee-content {
  animation-play-state: paused;
}
@keyframes omk-marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.omk-testimonial-marquee-content-reverse {
  display: flex;
  gap: 1.5rem;
  animation: omk-marquee-scroll-reverse 75s linear infinite;
}
.omk-testimonial-marquee-track:hover .omk-testimonial-marquee-content-reverse {
  animation-play-state: paused;
}
@keyframes omk-marquee-scroll-reverse {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.omk-testimonial-card {
  background: #ffffff;
  border: 1px solid var(--omk-border, #e2e8f0);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  width: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.omk-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.omk-testimonial-avatar {
  font-size: 2.75rem;
  color: var(--omk-accent-strong, #00a859);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.omk-testimonial-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
.omk-testimonial-name {
  font-size: 0.9375rem;
  color: var(--omk-text-primary, #0f172a);
  font-weight: 600;
  text-align: center;
}
.omk-testimonial-comment {
  font-size: 0.8125rem;
  color: var(--omk-text-secondary, #475569);
  line-height: 1.6;
  margin: 0.5rem 0 0;
  text-align: center;
}
.omk-testimonial-comment .omk-code {
  font-weight: 700;
  color: var(--omk-accent-strong, #00a859);
  background: rgba(0, 168, 89, 0.06);
  padding: 0.125rem 0.35rem;
  border-radius: 0.25rem;
  font-family: monospace;
}
.omk-testimonial-comment .omk-quote {
  font-style: italic;
  color: var(--omk-text-primary, #0f172a);
}

/* Dark Mode adaptation */
body.dark .omk-sold-testimonials-wrap::before {
  background: linear-gradient(to right, #0d1526, transparent);
}
body.dark .omk-sold-testimonials-wrap::after {
  background: linear-gradient(to left, #0d1526, transparent);
}
body.dark .omk-testimonial-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.dark .omk-testimonial-name {
  color: #f8fafc;
}
body.dark .omk-testimonial-comment {
  color: #cbd5e1;
}
body.dark .omk-testimonial-comment .omk-quote {
  color: #f8fafc;
}
body.dark .omk-testimonial-comment .omk-code {
  background: rgba(190, 219, 34, 0.12);
  color: #bef322;
}

/* Clickable Link and Star Ratings in Marquee Testimonials */
.omk-testimonial-owner-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--omk-accent-strong, #00a859);
  margin-bottom: 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.omk-testimonial-owner-link:hover {
  color: var(--omk-accent-strong-hover, #008f4b);
  text-decoration: underline;
}
.omk-testimonial-rating {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.75rem;
  color: #eab308; /* Gold stars */
  font-size: 0.8125rem;
}

/* Dark mode adjustment for owner link */
body.dark .omk-testimonial-owner-link {
  color: #bef322 !important;
}
body.dark .omk-testimonial-owner-link:hover {
  color: #a4d31d !important;
}

/* =========================================
   Mekanisme Jasa Konstruksi Layout Tuning
   ========================================= */
/* Container columns */
.omk-jasa-content {
  counter-reset: omk-step-counter;
}

.omk-jasa-content .wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .omk-jasa-content .wp-block-columns {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

/* Image styling inside the columns */
.omk-jasa-content .wp-block-image img {
  border-radius: var(--omk-radius-lg, 1rem);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.25rem;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}
.omk-jasa-content .wp-block-image img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Premium step box styling with auto-numbering and left accent */
.responsive-custom-box {
  counter-increment: omk-step-counter;
  position: relative !important;
  background: linear-gradient(135deg, #ffffff, #fafbfd) !important;
  border: 1px solid var(--omk-border, #e2e8f0) !important;
  border-left: 5px solid var(--omk-accent-strong, #00a859) !important;
  border-radius: 1rem !important;
  padding: 1.35rem 1.75rem 1.35rem 4.5rem !important; /* Kept clear of the badge */
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: var(--omk-text-primary, #0f172a) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0.8rem auto !important;
  max-width: 760px !important;
  width: 90% !important;
}
.responsive-custom-box:hover {
  transform: translateY(-2px) translateX(4px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

/* Auto-numbering Badge */
.responsive-custom-box::before {
  content: counter(omk-step-counter, decimal-leading-zero) !important;
  position: absolute !important;
  left: 1.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  background: rgba(0, 168, 89, 0.08) !important;
  color: var(--omk-accent-strong, #00a859) !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0, 168, 89, 0.18) !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.responsive-custom-box:hover::before {
  background: var(--omk-accent-strong, #00a859) !important;
  color: #ffffff !important;
  border-color: var(--omk-accent-strong, #00a859) !important;
}

/* Reset inner paragraph styles added by wpautop */
.responsive-custom-box p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.55 !important;
  color: inherit !important;
  width: 100% !important;
}

/* Simple Arrow Box centering and clean styles */
.simple-custom-arrow-box {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.4rem auto !important;
  width: 100% !important;
  height: auto !important;
}
.simple-custom-arrow-box svg {
  font-size: 1.5rem;
  fill: var(--omk-accent-strong, #00a859) !important;
  color: var(--omk-accent-strong, #00a859) !important;
  animation: omk-arrow-bounce 2s infinite ease-in-out;
}
.simple-custom-arrow-box svg path {
  fill: var(--omk-accent-strong, #00a859) !important;
}

@keyframes omk-arrow-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* Dark mode overrides */
body.dark .responsive-custom-box {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  border-left-color: #bef322 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}
body.dark .responsive-custom-box * {
  color: #f1f5f9 !important;
}
body.dark .responsive-custom-box::before {
  background: rgba(190, 219, 34, 0.12) !important;
  color: #bef322 !important;
  border-color: rgba(190, 219, 34, 0.25) !important;
}
body.dark .responsive-custom-box:hover::before {
  background: #bef322 !important;
  color: #0f172a !important;
  border-color: #bef322 !important;
}
body.dark .simple-custom-arrow-box svg {
  fill: #bef322 !important;
  color: #bef322 !important;
}
body.dark .simple-custom-arrow-box svg path {
  fill: #bef322 !important;
}

/* ==========================================================
   ARTICLE DETAIL PAGE v2
   ========================================================== */
.omk-article-hero {
  position: relative;
  padding: 6rem 1.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .omk-article-hero { padding: 8rem 2rem; }
}
.omk-article-meta-top {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.9;
}
.omk-article-category a {
  background: var(--omk-accent-strong);
  color: #ffffff !important;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
}
.omk-article-date {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.omk-article-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  max-width: 800px;
  margin: 0 auto;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  color: #ffffff !important;
}
@media (min-width: 768px) {
  .omk-article-title { font-size: 2.75rem; }
}

.omk-article-container {
  max-width: 1350px !important;
  margin: -3rem auto 5rem !important;
  position: relative;
  z-index: 20;
  padding-inline: 1rem;
}
.omk-post-body-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  padding: 1.5rem;
  border: 1px solid rgba(0, 168, 89, 0.08);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
@media (min-width: 768px) {
  .omk-post-body-card { padding: 3rem; }
}

body.dark .omk-post-body-card {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ── Baris Tombol Kembali ── */
.omk-post-back-row {
  margin-bottom: 0.75rem;
}

/* ── Baris Breadcrumb + View Counter ── */
.omk-post-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
body.dark .omk-post-meta-row {
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ── Breadcrumb ── */
.omk-post-breadcrumb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 250px;
}
.omk-breadcrumb-links {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  color: var(--omk-text-soft);
  font-weight: 500;
}
.omk-breadcrumb-links a {
  color: var(--omk-text-soft) !important;
  transition: color 0.2s;
  text-decoration: none;
}
.omk-breadcrumb-links a:hover {
  color: var(--omk-accent-strong) !important;
}
.omk-breadcrumb-sep {
  color: #cbd5e1;
  font-weight: 400;
}
body.dark .omk-breadcrumb-sep {
  color: #475569;
}
.omk-breadcrumb-current-line {
  font-size: 0.78rem;
  color: var(--omk-text-soft);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 10px;
}
body.dark .omk-breadcrumb-current-line {
  color: #94a3b8;
}

.omk-article-meta-bar-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.82rem;
  color: #64748b;
  flex-shrink: 0;
}

/* ── Back Link ── */
.omk-back-link {
  color: var(--omk-text-soft) !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
  text-decoration: none !important;
}
.omk-back-link:hover {
  color: var(--omk-accent-strong) !important;
}

/* ── View Counter ── */
.omk-article-stats {
  color: var(--omk-text-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ── Judul Artikel di Detail ── */
.omk-post-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--omk-text-primary);
  line-height: 1.3;
  margin: 0 0 5rem;
}
@media (min-width: 768px) {
  .omk-post-title { font-size: 2.25rem; }
}
body.dark .omk-post-title {
  color: #f8fafc;
}

/* Typography & Content Styles */
.omk-article-content {
  font-size: 0.9375rem; /* Dikecilkan dari 1.0625rem (17px) ke 0.9375rem (15px) */
  line-height: 1.75;
  color: #000000; /* Warna teks hitam pekat */
  transition: color 0.3s, font-size 0.2s ease;
}
body.dark .omk-article-content {
  color: #cbd5e1;
}

.omk-article-content p {
  margin-bottom: 1.5rem;
}
.omk-article-content h2, .omk-article-content h3, .omk-article-content h4 {
  color: var(--omk-text-primary);
  font-weight: 700;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.omk-article-content h2 { font-size: 1.5rem; }
.omk-article-content h3 { font-size: 1.35rem; }
.omk-article-content h4 { font-size: 1.2rem; }

.omk-article-content img {
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 100%;
  height: auto;
}
.omk-article-content blockquote {
  border-left: 4px solid var(--omk-accent-strong);
  background: rgba(0, 168, 89, 0.04);
  padding: 1.25rem 1.75rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 2rem 0;
  font-style: italic;
  color: var(--omk-text-soft);
}
body.dark .omk-article-content blockquote {
  background: rgba(0, 168, 89, 0.08);
}
.omk-article-content ul, .omk-article-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}
.omk-article-content ul { list-style-type: disc; }
.omk-article-content ol { list-style-type: decimal; }
.omk-article-content li {
  margin-bottom: 0.5rem;
}

.omk-article-footer {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .omk-article-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
body.dark .omk-article-footer {
  border-top-color: rgba(255,255,255,0.08);
}
.omk-article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.omk-tag-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-soft);
}
.omk-tag {
  background: var(--omk-surface-subtle);
  color: var(--omk-text-soft);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--omk-border);
}
.omk-share-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-soft);
}
.omk-share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff !important;
  font-size: 0.9375rem;
  transition: transform 0.2s, filter 0.2s;
}
.omk-share-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.omk-share-wa { background: #25d366; }
.omk-share-fb { background: #1877f2; }

/* Related Posts */
.omk-related-posts-section {
  margin-top: 4rem;
}
.omk-related-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--omk-text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .omk-related-title { text-align: left; }
}
.omk-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .omk-related-grid { grid-template-columns: repeat(3, 1fr); }
}
.omk-related-card {
  background: #ffffff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  border: 1px solid var(--omk-border);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background-color 0.3s;
  display: block;
}
.omk-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-color: rgba(0, 168, 89, 0.2);
}
body.dark .omk-related-card {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
}
.omk-related-card-img {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
.omk-related-card-body {
  padding: 1.25rem;
}
.omk-related-date {
  font-size: 0.75rem;
  color: var(--omk-text-soft);
  display: block;
  margin-bottom: 0.5rem;
}
.omk-related-card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--omk-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 2-Column Blog Layout --- */
.omk-article-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 992px) {
  .omk-article-row {
    flex-direction: row;
    gap: 1rem;
  }
}
.omk-article-main {
  flex: 1;
  min-width: 0; /* Prevent flex blowout */
}
.omk-article-sidebar {
  width: 100%;
  flex-shrink: 0;
}
@media (min-width: 992px) {
  .omk-article-sidebar {
    width: 400px;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 96px !important;
    align-self: start !important;
  }
}

/* Sidebar Widgets */
.omk-sidebar-widget {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid rgba(0, 168, 89, 0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
body.dark .omk-sidebar-widget {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.omk-widget-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--omk-text-primary);
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
}
.omk-widget-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 3px;
  background: var(--omk-accent-strong);
  border-radius: 9999px;
}

/* Search widget */
.omk-search-input-wrap {
  display: flex;
  position: relative;
}
.omk-search-input {
  width: 100%;
  padding: 0.75rem 3rem 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--omk-border);
  background: var(--omk-surface-subtle);
  color: var(--omk-text-primary);
  font-size: 0.875rem;
  transition: border-color 0.2s, background-color 0.2s;
}
.omk-search-input:focus {
  border-color: var(--omk-accent-strong);
  background: #ffffff;
  outline: none;
}
body.dark .omk-search-input:focus {
  background: #0f172a;
}
.omk-search-submit {
  position: absolute;
  right: 0.25rem;
  top: 52%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--omk-text-soft);
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.2s;
}
.omk-search-submit:hover {
  color: var(--omk-accent-strong);
}

/* Widget categories */
.omk-widget-categories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.omk-widget-categories li {
  margin-bottom: 0.75rem;
}
.omk-widget-categories li:last-child {
  margin-bottom: 0;
}
.omk-widget-categories a {
  font-size: 0.9375rem;
  color: var(--omk-text-soft) !important;
  font-weight: 500;
  transition: color 0.2s;
  text-decoration: none;
}
.omk-widget-categories a:hover {
  color: var(--omk-accent-strong) !important;
}
.omk-cat-count {
  background: var(--omk-surface-subtle);
  border: 1px solid var(--omk-border);
  color: var(--omk-text-soft);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
}

/* Widget posts */
.omk-widget-posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.omk-widget-post-item {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}
.omk-widget-post-img {
  width: 60px;
  height: 60px;
  border-radius: 0.5rem;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--omk-border);
}
.omk-widget-post-info {
  min-width: 0;
}
.omk-widget-post-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-primary);
  margin: 0 0 0.25rem 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.omk-widget-post-date {
  font-size: 0.75rem;
  color: var(--omk-text-soft);
  display: block;
}

/* Widget properties */
.omk-widget-properties {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.omk-widget-prop-item {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}
.omk-widget-prop-img {
  width: 70px;
  height: 70px;
  border-radius: 0.5rem;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--omk-border);
}
.omk-widget-prop-badge {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #ffffff;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
}
.omk-widget-prop-badge.dijual { background: var(--omk-accent-strong); }
.omk-widget-prop-badge.disewakan { background: #007bff; }
.omk-widget-prop-badge.terjual { background: #6c757d; }
.omk-widget-prop-info {
  min-width: 0;
}
.omk-widget-prop-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--omk-text-primary);
  margin: 0 0 0.25rem 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.omk-widget-prop-price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--omk-accent-strong);
  display: block;
}

/* Widget CTA */
.omk-widget-cta {
  color: #ffffff;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 30px rgba(0, 168, 89, 0.25);
}
.omk-cta-title {
  font-size: xxx-large;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #ffffff !important;
}
.omk-cta-title::after { display: none; }
.omk-cta-desc {
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  line-height: 1.5;
  color: #ffffff;
}
.omk-cta-btn {
  background: #ffffff;
  color: var(--omk-accent-strong) !important;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.omk-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
body.dark .omk-widget-cta {
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* ── Latest Articles Slider Section (light bg) ── */
.omk-latest-section {
  padding: 2.5rem 0 1.5rem;
  background: var(--omk-surface-subtle);
}
@media (min-width: 768px) {
  .omk-latest-section { padding: 3.5rem 0 2rem; }
}
.omk-latest-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--omk-accent-strong);
  margin-bottom: 0.75rem;
}
.omk-latest-wrapper {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
.omk-latest-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--omk-radius-lg, 1rem);
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  border: 1px solid var(--omk-border, #e2e8f0);
}
.omk-latest-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.omk-latest-slide {
  flex: 0 0 100%;
  width: 100%;
}
.omk-latest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--omk-text-primary);
}
.omk-latest-media {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-top-left-radius: var(--omk-radius-lg, 1rem);
  border-top-right-radius: var(--omk-radius-lg, 1rem);
}
.omk-latest-title {
  width: 100%;
  padding: 0.875rem 1rem 1rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--omk-text-primary);
  background: #ffffff;
  border-bottom-left-radius: var(--omk-radius-lg, 1rem);
  border-bottom-right-radius: var(--omk-radius-lg, 1rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) {
  .omk-latest-title {
    font-size: 1.05rem;
    padding: 1rem 1.25rem 1.1rem;
  }
}
.omk-latest-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
  z-index: 3;
}
.omk-latest-arrow:hover {
  background: rgba(15,23,42,0.75);
  border-color: #fff;
}
.omk-latest-prev { left: 0.625rem; }
.omk-latest-next { right: 0.625rem; }
.omk-latest-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.omk-latest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.25s;
}
.omk-latest-dot.active {
  width: 22px;
  border-radius: 999px;
  background: var(--omk-accent, #bedb22);
}

/* ── Article area with sidebar ── */
.omk-article-area {
  padding: 2rem 0 4rem;
  background: var(--omk-surface-subtle);
}

/* ── Slider inside dark hero overrides ── */
.omk-catalog-hero .omk-latest-wrapper {
  margin-top: 0.5rem;
  max-width: 680px;
}
.omk-catalog-hero .omk-latest-label {
  color: var(--omk-accent, #bedb22);
}
.omk-catalog-hero .omk-latest-viewport {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}
.omk-catalog-hero .omk-latest-title {
  color: #fff;
  background: transparent;
  margin-bottom: 20px;
}
.omk-catalog-hero .omk-latest-dot {
  background: rgba(255,255,255,0.28);
}
.omk-catalog-hero .omk-latest-dot.active {
  background: var(--omk-accent, #bedb22);
}

/* ==========================================================
   3D COVERFLOW — Team Gallery (Originkit vanilla)
   ========================================================== */
.omk-cf-section {
  padding: 3.5rem 0 4.5rem;
  background: var(--omk-surface-subtle);
}
.omk-cf-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.omk-cf-wrap {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
}
.omk-cf-stage {
  position: relative;
  width: 100%;
  height: 480px;
  perspective: 1600px;
  overflow: hidden;
  outline: none;
}
.omk-cf-deck {
  position: relative;
  width: 334px;
  height: 381px;
  margin: 0 auto;
  transform-style: preserve-3d;
}
.omk-cf-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 334px;
  aspect-ratio: 334 / 381;
  border-radius: 16px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center center;
  background: #1a1a1a;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.20);
}
.omk-cf-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.omk-cf-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.omk-cf-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.7) 100%);
  color: #fff;
  pointer-events: none;
}
.omk-cf-caption h4 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.omk-cf-caption span {
  font-size: 0.875rem;
  opacity: 0.85;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.omk-cf-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--omk-text-primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  z-index: 10;
  transition: background 0.2s, transform 0.2s;
}
.omk-cf-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.omk-cf-prev { left: 0.5rem; }
.omk-cf-next { right: 0.5rem; }
@media (min-width: 768px) {
  .omk-cf-stage { height: 560px; }
  .omk-cf-deck { width: 400px; height: auto; aspect-ratio: 334/381; }
  .omk-cf-card { width: 400px; }
  .omk-cf-prev { left: 1rem; }
  .omk-cf-next { right: 1rem; }
}
@media (min-width: 1024px) {
  .omk-cf-deck { width: 420px; }
  .omk-cf-card { width: 420px; }
}
.omk-cf-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25rem;
}
.omk-cf-dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.omk-cf-dot.active {
  background: var(--omk-accent-strong, #00a859);
  transform: scale(1.35);
}

/* ═══════════════════════════════════════════════
   AREA CASCADING DROPDOWN (Kabupaten → Kecamatan)
═══════════════════════════════════════════════ */
.omk-area-dd-wrap {
  position: relative;
}
.omk-area-dd-wrap .omk-catalog-dd-trigger {
  /* Inherit same trigger style as other dropdowns */
}

/* Panel utama */
.omk-area-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  width: 320px;
  max-width: 96vw;
  background: var(--omk-surface, #fff);
  border: 1px solid var(--omk-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  overflow: hidden;
  flex-direction: column;
  animation: omkAreaFadeIn .18s ease;
}
@keyframes omkAreaFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.omk-area-dd-wrap.open .omk-area-panel {
  display: flex;
}

/* Wizard Steps */
.omk-area-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--omk-surface-subtle, #f8f9fa);
  border-bottom: 1px solid var(--omk-border, #e5e7eb);
  overflow-x: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.omk-area-step {
  border: none;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--omk-text-soft, #6b7280);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.omk-area-step:hover:not(:disabled) {
  background: var(--omk-border, #e5e7eb);
  color: var(--omk-text, #111);
}
.omk-area-step.active {
  background: var(--omk-accent-soft, #e6f5ee);
  color: var(--omk-accent, #00a859);
}
.omk-area-step:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.omk-area-step-arrow {
  font-size: 0.65rem;
  color: var(--omk-text-soft, #9ca3af);
  display: flex;
  align-items: center;
}

/* Dark mode for wizard steps */
.dark .omk-area-steps {
  background: var(--omk-surface-subtle, #16181f);
  border-bottom-color: var(--omk-border, #2e3040);
}
.dark .omk-area-step {
  color: var(--omk-text-soft, #8a8f9e);
}
.dark .omk-area-step:hover:not(:disabled) {
  background: var(--omk-border, #2e3040);
  color: var(--omk-text, #e8e8e8);
}
.dark .omk-area-step.active {
  background: rgba(0, 168, 89, 0.18);
  color: var(--omk-accent, #00a859);
}

/* Kolom kiri & kanan */
.omk-area-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  width: 100%;
}
.omk-area-col--prov,
.omk-area-col--kab,
.omk-area-col--kec {
  width: 100%;
  max-width: 100% !important;
  border-right: none !important;
}/* Header kolom */
.omk-area-col-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--omk-border, #e5e7eb);
  background: var(--omk-surface-subtle, #f8f9fa);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.omk-area-col-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--omk-text-soft, #6b7280);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Search kabupaten */
.omk-area-search {
  width: 100%;
  border: 1px solid var(--omk-border, #e5e7eb);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: .8rem;
  background: var(--omk-bg, #fff);
  color: var(--omk-text, #111);
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.omk-area-search:focus {
  border-color: var(--omk-accent, #00a859);
}

/* List scroll */
.omk-area-list {
  overflow-y: auto;
  max-height: 240px;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--omk-border,#e5e7eb) transparent;
}
.omk-area-list::-webkit-scrollbar { width: 5px; }
.omk-area-list::-webkit-scrollbar-thumb { background: var(--omk-border,#ddd); border-radius: 9px; }

/* Item */
.omk-area-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 14px;
  font-size: .83rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--omk-text, #111);
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.omk-area-item:hover {
  background: var(--omk-surface-subtle, #f3f4f6);
  color: var(--omk-accent, #00a859);
}
.omk-area-item.active {
  background: var(--omk-accent-soft, #e6f5ee);
  color: var(--omk-accent, #00a859);
  font-weight: 600;
}
.omk-area-item--all {
  font-style: italic;
  color: var(--omk-text-soft, #6b7280);
  border-bottom: 1px solid var(--omk-border, #e5e7eb);
  margin-bottom: 2px;
}
.omk-area-item--all.active {
  color: var(--omk-accent, #00a859);
  font-style: normal;
}

/* Loading state */
.omk-area-loading {
  padding: 18px 14px;
  font-size: .82rem;
  color: var(--omk-text-soft, #6b7280);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Dark mode */
.dark .omk-area-panel {
  background: var(--omk-surface, #1e2028);
  border-color: var(--omk-border, #2e3040);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.dark .omk-area-col--kab {
  border-right-color: var(--omk-border, #2e3040);
}
.dark .omk-area-col-header {
  background: var(--omk-surface-subtle, #16181f);
  border-bottom-color: var(--omk-border, #2e3040);
}
.dark .omk-area-search {
  background: var(--omk-bg, #12141a);
  border-color: var(--omk-border, #2e3040);
  color: var(--omk-text, #f0f0f0);
}
.dark .omk-area-item { color: var(--omk-text, #e8e8e8); }
.dark .omk-area-item:hover { background: var(--omk-surface-subtle, #1e2028); }
.dark .omk-area-item.active { background: rgba(0,168,89,.18); }
.dark .omk-area-item--all { color: var(--omk-text-soft, #8a8f9e); border-bottom-color: var(--omk-border,#2e3040); }
.dark .omk-area-item--all.active { color: var(--omk-accent,#00c46a); }

/* Responsive: panel di mobile jadi stacked vertikal */
@media (max-width: 600px) {
  .omk-area-panel {
    width: 98vw;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
  }
  .omk-area-col--kab {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--omk-border, #e5e7eb);
  }
  .omk-area-list { max-height: 140px; }
}

/* ── Arlina Web: Trending Widget ── */
.omk-widget-trending {
  background: #ffffff;
  border-radius: 8px; /* radius.sm */
}
.omk-trending-list {
  display: flex;
  flex-direction: column;
  gap: 15px; /* space.6 */
  margin-top: 10px;
}
.omk-trending-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  padding-bottom: 12px;
  border-bottom: 1px dashed #eef1f4;
  transition: all 200ms ease;
}
.omk-trending-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.omk-trending-img {
  width: 160px;
  height: 100px;
  border-radius: 6px; /* radius.sm */
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid #eef1f4;
  transition: transform 200ms ease;
}
.omk-trending-item:hover .omk-trending-img {
  transform: scale(1.05);
}
.omk-trending-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.omk-trending-title {
  margin: 0;
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 13.5px; /* font.size.md */
  font-weight: 700;
  color: #222222; /* color.text.primary */
  line-height: 1.4;
  transition: color 200ms ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.omk-trending-item:hover .omk-trending-title {
  color: #294db4; /* color.text.inverse */
}

/* Dark mode overrides for trending widget */
body.dark .omk-trending-item {
  border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .omk-trending-img {
  border-color: rgba(255,255,255,0.08);
}
body.dark .omk-trending-title {
  color: #cbd5e1;
}
body.dark .omk-trending-item:hover .omk-trending-title {
  color: #60a5fa;
}

/* ── Animated Share Modal/Sheet ── */
.omk-share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.omk-share-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.omk-share-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1;
}
.omk-share-modal-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  padding: 24px;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.omk-share-modal.active .omk-share-modal-content {
  transform: scale(1) translateY(0);
}
.omk-share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 12px;
}
.omk-share-modal-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
}
.omk-share-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: 300;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}
.omk-share-modal-close:hover {
  color: #0f172a;
}
.omk-share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.omk-share-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #475569;
  transition: transform 0.2s;
}
.omk-share-link:hover {
  transform: translateY(-2px);
}
.omk-share-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #ffffff;
  transition: filter 0.2s;
}
.omk-share-link:hover .omk-share-icon {
  filter: brightness(0.95);
}
.omk-share-link span {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}
/* Colors */
.omk-share-whatsapp .omk-share-icon { background: #25D366; }
.omk-share-facebook .omk-share-icon { background: #1877F2; }
.omk-share-telegram .omk-share-icon { background: #0088cc; }
.omk-share-twitter .omk-share-icon { background: #0f172a; }
.omk-share-reddit .omk-share-icon { background: #ff4500; }
.omk-share-pinterest .omk-share-icon { background: #bd081c; }
.omk-share-tiktok .omk-share-icon { background: #000000; }
.omk-share-copy .omk-share-icon { background: #64748b; }

.omk-copy-tooltip {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #0f172a;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 10;
  white-space: nowrap;
}
.omk-copy-tooltip.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile Share Sheet style */
@media (max-width: 640px) {
  .omk-share-modal {
    align-items: flex-end;
  }
  .omk-share-modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .omk-share-modal.active .omk-share-modal-content {
    transform: translateY(0);
  }
  .omk-share-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

/* Dark Mode Overrides */
body.dark .omk-share-modal-content {
  background: #1e293b;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
body.dark .omk-share-modal-header {
  border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .omk-share-modal-header h4 {
  color: #f1f5f9;
}
body.dark .omk-share-link {
  color: #cbd5e1;
}

/* ── Google Comments Section ── */
.omk-comments-section {
  margin-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 1.5rem;
}
.omk-comments-trigger-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.omk-comments-trigger-box:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.omk-comments-trigger-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.95rem;
}
.omk-comments-trigger-left i {
  font-size: 1.2rem;
  color: #00a859;
}
.omk-comments-trigger-right {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 500;
}
.omk-comments-trigger-right i {
  transition: transform 0.3s ease;
}
.omk-comments-expanded-area {
  margin-top: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.omk-comments-scroll-list {
  max-height: 350px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 8px;
}
/* Scrollbar */
.omk-comments-scroll-list::-webkit-scrollbar {
  width: 6px;
}
.omk-comments-scroll-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 9999px;
}
.omk-comments-scroll-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.omk-comments-scroll-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.omk-comment-item {
  display: flex;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.omk-comment-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.omk-comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}
.omk-comment-content-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.omk-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.omk-comment-author {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}
.omk-comment-date {
  font-size: 0.72rem;
  color: #94a3b8;
}
.omk-comment-text {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.5;
}
.omk-comments-empty {
  text-align: center;
  padding: 30px 0;
  color: #94a3b8;
  font-size: 0.88rem;
  font-style: italic;
}

/* Comment Form Block */
.omk-comment-form-block {
  border-top: 1px solid #f1f5f9;
  padding-top: 18px;
}
.omk-comment-auth-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 15px 0;
}
.omk-comment-auth-block p {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  font-weight: 500;
}
.omk-google-btn-wrap {
  display: flex;
  justify-content: center;
}
.omk-mock-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #dadce0;
  color: #3c4043;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background 0.2s, box-shadow 0.2s;
}
.omk-mock-google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
}
.omk-mock-google-btn i {
  color: #4285F4;
  font-size: 1rem;
}

.omk-comment-input-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.omk-comment-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.omk-comment-user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.omk-comment-user-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}
.omk-comment-logout-btn {
  background: none;
  border: none;
  padding: 0;
  color: #ef4444;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
#omkCommentForm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#omkCommentText {
  width: 100%;
  height: 80px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-family: inherit;
  font-size: 0.88rem;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#omkCommentText:focus {
  outline: none;
  border-color: #00a859;
  box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.1);
}
.omk-submit-comment-btn {
  padding: 8px 24px;
  border-radius: 9999px;
  background: #00a859;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.82rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.omk-submit-comment-btn:hover {
  background: #008f4c;
}
.omk-submit-comment-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* ── Mock Google Login Pop-up ── */
.omk-mock-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.omk-mock-login-card {
  width: 90%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.omk-mock-login-header img {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}
.omk-mock-login-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #202124;
}
.omk-mock-login-header p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #5f6368;
}
.omk-mock-login-accounts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.omk-mock-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.omk-mock-account-item:hover {
  background: #f8f9fa;
  border-color: #cbd5e1;
}
.omk-mock-account-item img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.omk-mock-account-info {
  display: flex;
  flex-direction: column;
}
.omk-mock-account-info strong {
  font-size: 0.85rem;
  color: #3c4043;
}
.omk-mock-account-info span {
  font-size: 0.72rem;
  color: #5f6368;
}
.omk-mock-login-close {
  background: none;
  border: none;
  color: #5f6368;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.omk-mock-login-close:hover {
  color: #202124;
}

/* Dark Mode Overrides for Comments */
body.dark .omk-comments-section {
  border-top-color: rgba(255,255,255,0.06);
}
body.dark .omk-comments-trigger-box {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
}
body.dark .omk-comments-trigger-box:hover {
  background: #334155;
  border-color: rgba(255,255,255,0.15);
}
body.dark .omk-comments-trigger-left {
  color: #f1f5f9;
}
body.dark .omk-comments-trigger-right {
  color: #94a3b8;
}
body.dark .omk-comments-expanded-area {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
}
body.dark .omk-comments-scroll-list::-webkit-scrollbar-track {
  background: #1e293b;
}
body.dark .omk-comments-scroll-list::-webkit-scrollbar-thumb {
  background: #334155;
}
body.dark .omk-comment-item {
  border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .omk-comment-avatar {
  border-color: rgba(255,255,255,0.08);
}
body.dark .omk-comment-author {
  color: #f1f5f9;
}
body.dark .omk-comment-text {
  color: #cbd5e1;
}
body.dark .omk-comment-form-block {
  border-top-color: rgba(255,255,255,0.06);
}
body.dark .omk-comment-auth-block p {
  color: #94a3b8;
}
body.dark .omk-mock-google-btn {
  background: #0f172a;
  border-color: rgba(255,255,255,0.1);
  color: #cbd5e1;
}
body.dark .omk-mock-google-btn:hover {
  background: #1e293b;
}
body.dark .omk-comment-user-name {
  color: #f1f5f9;
}
body.dark #omkCommentText {
  background: #0f172a;
  border-color: rgba(255,255,255,0.1);
  color: #f1f5f9;
}
body.dark #omkCommentText:focus {
  border-color: #00a859;
}
body.dark .omk-mock-login-card {
  background: #1e293b;
}
body.dark .omk-mock-login-header h3 {
  color: #f1f5f9;
}
body.dark .omk-mock-login-header p {
  color: #94a3b8;
}
body.dark .omk-mock-account-item {
  border-color: rgba(255,255,255,0.1);
}
body.dark .omk-mock-account-item:hover {
  background: #0f172a;
  border-color: rgba(255,255,255,0.15);
}
body.dark .omk-mock-account-info strong {
  color: #f1f5f9;
}
body.dark .omk-mock-account-info span {
  color: #94a3b8;
}
body.dark .omk-mock-login-close {
  color: #94a3b8;
}
body.dark .omk-mock-login-close:hover {
  color: #f1f5f9;
}

/* ── Horizontal Share Section & Comments Header ── */
.omk-horizontal-share-box {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.omk-share-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.08em;
}
.omk-horizontal-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.omk-hshare-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: 1.05rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  padding: 0;
}
.omk-hshare-btn:hover {
  transform: translateY(-2px);
  filter: brightness(0.95);
}
.omk-hshare-wa { background: #25D366; }
.omk-hshare-fb { background: #1877F2; }
.omk-hshare-tg { background: #0088cc; }
.omk-hshare-tw { background: #0f172a; }
.omk-hshare-rd { background: #ff4500; }
.omk-hshare-pin { background: #bd081c; }
.omk-hshare-tk { background: #000000; }
.omk-hshare-cp { background: #64748b; }

.omk-comments-header-title {
  font-family: 'Google Sans', 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 850;
  color: #0f172a;
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 6px;
  display: inline-block;
}
.omk-comments-header-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  background: #ff3232; /* red badge */
  border-radius: 9999px;
}

/* Dark Mode Support */
body.dark .omk-horizontal-share-box {
  border-top-color: rgba(255, 255, 255, 0.06);
}
body.dark .omk-share-title {
  color: #94a3b8;
}
body.dark .omk-hshare-tw { background: #334155; }
body.dark .omk-hshare-tk { background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.08); }
body.dark .omk-comments-header-title {
  color: #f1f5f9;
}

/* ── Disclaimer Box ── */
.omk-article-disclaimer {
  margin-top: 1.5rem;
  background: #fffbeb; /* soft amber background */
  border: 1px solid #fef3c7; /* soft amber border */
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #451a03; /* dark amber text */
  font-size: 0.8rem;
  line-height: 1.5;
}
.omk-article-disclaimer i {
  color: #d97706; /* amber icon */
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Dark Mode support for disclaimer */
body.dark .omk-article-disclaimer {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.15);
  color: #fef3c7;
}
body.dark .omk-article-disclaimer i {
  color: #fbbf24;
}

/* ── Inline Related Posts (Baca Juga) ── */
.omk-inline-related {
  margin: 1.8rem 0;
  padding: 14px 20px;
  background: #f8fafc;
  border-left: 4px solid #00a859; /* Green brand border */
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
.omk-inline-related-label {
  font-weight: 800;
  color: #ff3232; /* Red accent label */
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.omk-inline-related-link {
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.4;
  transition: color 0.2s;
}
.omk-inline-related-link:hover {
  color: #00a859;
  text-decoration: underline;
}

/* Dark Mode support for inline related posts */
body.dark .omk-inline-related {
  background: #1e293b;
  border-left-color: #00a859;
  box-shadow: none;
}
body.dark .omk-inline-related-link {
  color: #cbd5e1;
}
body.dark .omk-inline-related-link:hover {
  color: #00a859;
}

/* ── Font Size Editor Styles ── */
.omk-font-editor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  margin-right: 6px;
  flex-shrink: 0;
}
.omk-font-editor button {
  border: none;
  background: none;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background-color 0.2s, color 0.2s;
  padding: 0;
}
.omk-font-editor-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
}
.omk-font-editor-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}
.omk-font-editor-reset {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0 4px;
  min-width: 16px;
  text-align: center;
}
.omk-font-editor-reset:hover {
  color: #00a859;
}

/* Dark Mode support for Font Size Editor */
body.dark .omk-font-editor {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
}
body.dark .omk-font-editor button {
  color: #94a3b8;
}
body.dark .omk-font-editor-btn:hover {
  background: #334155;
  color: #f1f5f9;
}
body.dark .omk-font-editor-reset:hover {
  color: #00a859;
}

/* ── Inline Meta Bar with Pipes & Font Adjusters ── */
.omk-article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.omk-font-editor-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.omk-font-editor-inline button {
  border: none;
  background: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
  font-weight: 700;
  transition: color 0.2s, transform 0.15s;
}
.omk-font-editor-inline button:hover {
  color: #0f172a;
  transform: scale(1.15);
}
.omk-font-btn-dec {
  font-size: 0.72rem;
}
.omk-font-btn-res {
  font-size: 0.85rem;
  color: #00a859 !important;
  font-weight: 800 !important;
}
.omk-font-btn-inc {
  font-size: 0.92rem;
}
.omk-meta-pipe {
  color: #cbd5e1;
  font-weight: 300;
  user-select: none;
}
.omk-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.omk-meta-item i {
  font-size: 0.9rem;
  color: #94a3b8;
}
.omk-btn-share-trigger-text {
  border: none;
  background: none;
  color: #00a859;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color 0.2s;
}
.omk-btn-share-trigger-text:hover {
  color: #008f4c;
  text-decoration: underline;
}

/* Dark mode overrides for Inline Meta Bar */
body.dark .omk-article-meta-bar {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}
body.dark .omk-font-editor-inline button {
  color: #94a3b8;
}
body.dark .omk-font-editor-inline button:hover {
  color: #f1f5f9;
}
body.dark .omk-font-editor-inline button.omk-font-btn-res {
  color: #00a859 !important;
}
body.dark .omk-meta-pipe {
  color: rgba(255, 255, 255, 0.1);
}
body.dark .omk-meta-item i {
  color: #64748b;
}

/* ── Related Posts Widget (Arlina Code Style) ── */
.omk-related-line {
  position: relative;
  margin: 30px 0 20px 0;
  padding: 0 0 8px 0;
  border-bottom: 2px solid var(--omk-border);
}
.omk-related-info-th {
  font-size: 1rem;
  font-weight: 700;
  color: var(--omk-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: none !important;
}
#omk-related-posts {
  overflow: hidden;
  margin: 0;
  padding: 10px 0 0 0;
  list-style: none;
}
#omk-related-posts li {
  width: 32.1%;
  display: inline-block;
  height: auto;
  float: left;
  margin-right: 1.85%;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}
#omk-related-posts li:nth-child(3) {
  margin-right: 0;
}
.omk-related-thumb {
  width: 100%;
  aspect-ratio: 188 / 120;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  background-color: #f1f5f9;
}
.omk-related-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.omk-related-thumb:hover .omk-related-img {
  transform: scale(1.06);
}
.omk-related-thumb::after {
  background: rgba(0, 0, 0, 0.02);
  content: "";
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transition: background-color 0.4s ease;
}
.omk-related-thumb:hover::after {
  background: rgba(40, 35, 40, 0.25);
}
.omk-related-title {
  margin: 8px auto 0 auto;
  line-height: 1.4;
  z-index: 2;
  font-weight: 500;
}
.omk-related-title a {
  font-size: 14px;
  padding: 0;
  color: #1e293b;
  display: block;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.omk-related-title a:hover {
  color: #00a859;
  text-decoration: underline;
}

/* Responsive constraints */
@media screen and (max-width: 768px) {
  #omk-related-posts li {
    width: 48.5%;
    margin-right: 3%;
    height: auto;
  }
  #omk-related-posts li:nth-child(2) {
    margin-right: 0;
  }
  #omk-related-posts li:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  #omk-related-posts li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    height: auto;
  }
}

/* Dark mode overrides for Related Posts */
body.dark .omk-related-line {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.dark .omk-related-info-th {
  background-color: transparent !important;
  color: #f1f5f9 !important;
  border: none !important;
}
body.dark .omk-related-title a {
  color: #e2e8f0;
}
body.dark .omk-related-title a:hover {
  color: #00a859;
}
body.dark .omk-related-thumb {
  background-color: #1e293b;
}

/* Fix sticky sidebar by overriding body overflow-x clip */
body.omk-page {
  overflow-x: visible !important;
}

/* --- Filter Block (Search & Tabs) --- */
.omk-filter-block {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #eef1f4;
  box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 3px 0px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.dark .omk-filter-block {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Search Row */
.omk-filter-search-wrapper {
  position: relative;
  width: 100%;
}
.omk-filter-search-wrapper .omk-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 14px;
}
.omk-filter-search-wrapper input {
  width: 100%;
  padding: 11px 40px 11px 38px;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background-color: #f8fafc;
  color: #1f2937;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}
body.dark .omk-filter-search-wrapper input {
  border-color: #334155;
  background-color: #0f172a;
  color: #f1f5f9;
}
.omk-filter-search-wrapper input:focus {
  border-color: #00a859;
  background-color: #ffffff;
}
body.dark .omk-filter-search-wrapper input:focus {
  border-color: #00a859;
  background-color: #0f172a;
}
#omkArticleSearchClear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#omkArticleSearchClear:hover {
  color: #ef4444;
}

/* Tabs Container */
.omk-filter-tabs-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.omk-filter-tabs-viewport {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}
.omk-filter-tabs-viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.omk-filter-tabs-track {
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}
.omk-filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background-color: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
body.dark .omk-filter-tab {
  color: #94a3b8;
  background-color: #0f172a;
}
.omk-filter-tab:hover {
  background-color: #e2e8f0;
  color: #1e293b;
}
body.dark .omk-filter-tab:hover {
  background-color: #1e293b;
  color: #f1f5f9;
}
.omk-filter-tab.active {
  background-color: #00a859;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 168, 89, 0.25);
}
body.dark .omk-filter-tab.active {
  background-color: #00a859;
  color: #ffffff;
}

/* Arrow Button */
.omk-tabs-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 5;
  transition: opacity 0.2s, background-color 0.2s;
  opacity: 0;
  pointer-events: none;
}
body.dark .omk-tabs-arrow {
  border-color: #334155;
  background-color: #1e293b;
  color: #f1f5f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.omk-tabs-arrow.visible {
  opacity: 1;
  pointer-events: auto;
}
.omk-tabs-arrow:hover {
  background-color: #f8fafc;
}
body.dark .omk-tabs-arrow:hover {
  background-color: #0f172a;
}

/* Empty search state */
.omk-filter-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: #ffffff;
  border-radius: 8px;
  border: 1px dashed #e2e8f0;
}
body.dark .omk-filter-empty {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}
.omk-filter-empty i {
  font-size: 32px;
  color: #94a3b8;
  margin-bottom: 12px;
}
.omk-filter-empty p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}