:root{--primary-color:#0D6EFD;--secondary-color:#212529;--success-color:#198754;--bg-color:#F8F9FA;--card-bg:#FFFFFF;--nav-link-color:#000000;--nav-link-hover:#333333;--dark-btn:#000000;--dark-btn-hover:#333333;}body{background-color:var(--bg-color);font-family:'Inter',sans-serif;color:var(--secondary-color);overflow-x:hidden;}img,iframe,video{max-width:100%;height:auto;}.nav-wrapper{position:absolute;top:20px;left:0;right:0;width:100%;z-index:1030;padding:0 15px;}.floating-navbar{background-color:#ffffff;border-radius:50px;padding:10px 30px;box-shadow:0 10px 30px rgba(0,0,0,0.08);margin:0 auto;max-width:1100px;transition:all 0.3s ease;}.floating-navbar .nav-link{color:var(--nav-link-color) !important;font-size:0.85rem;font-weight:500;margin:0 15px;transition:color 0.3s ease;}.floating-navbar .nav-link:hover{color:var(--nav-link-hover) !important;}.btn-custom-dark{background-color:var(--dark-btn);color:#ffffff;border-radius:50px;padding:8px 24px;font-size:0.85rem;font-weight:500;border:none;transition:background-color 0.3s ease;}.btn-custom-dark:hover{background-color:var(--dark-btn-hover);color:#ffffff;}.main-content{margin-left:260px;padding:20px;min-height:100vh;background-color:var(--bs-tertiary-bg);transition:all 0.3s ease-in-out;width:100%;padding-bottom:80px;}.admin-footer{position:fixed;bottom:0;right:0;left:260px;z-index:90;background-color:var(--bs-body-bg);border-top:1px solid var(--bs-border-color);transition:all 0.3s ease-in-out;}#mainContent.toggled .admin-footer{left:0;}.card-service{background-color:var(--card-bg);border:none;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.05);transition:transform 0.3s ease,box-shadow 0.3s ease;}.card-service:hover{transform:translateY(-5px);box-shadow:0 10px 15px rgba(13,110,253,0.1);}.btn-primary-custom{background-color:var(--primary-color);border-color:var(--primary-color);border-radius:8px;font-weight:600;}.logo-slider{background-color:transparent;overflow:hidden;position:relative;width:100%;padding:10px 0;}.logo-slider::before,.logo-slider::after{background:none;content:"";height:100%;position:absolute;width:150px;z-index:2;top:0;}.logo-slider::before{left:0;}.logo-slider::after{right:0;transform:rotateZ(180deg);}.logo-slide-track{display:flex;align-items:center;width:calc(200px * 10);animation:scrollLogos 25s linear infinite;}.logo-slide-track:hover{animation-play-state:paused;}.slide{width:200px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:color 0.3s ease,transform 0.3s ease;cursor:pointer;}.slide:hover{color:#333333;transform:scale(1.05);}.testimonial-scroll-container{overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:20px;-ms-overflow-style:none;scrollbar-width:none;}.testimonial-scroll-container::-webkit-scrollbar{display:none;}.testimonial-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;}.testimonial-scroll-container::-webkit-scrollbar-thumb{background:#d1d1d1;border-radius:10px;}.testimonial-scroll-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8;}.testimonial-track{padding:10px 5px;}.testimonial-card{width:320px;scroll-snap-align:center;background-color:#ffffff;transition:transform 0.3s ease,box-shadow 0.3s ease,border 0.3s ease;border:1px solid transparent !important;white-space:normal !important;}.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.08) !important;border-color:rgba(13,110,253,0.2) !important;}.hover-primary{transition:all 0.3s ease;}.hover-primary:hover{background-color:var(--primary-color) !important;color:#ffffff !important;border-color:var(--primary-color) !important;}.hover-primary:hover i{color:#ffffff !important;}.product-card{transition:transform 0.3s ease,box-shadow 0.3s ease;}.product-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;}.product-card img{transition:transform 0.5s ease;}.product-card:hover img{transform:scale(1.05);}.review-text{white-space:normal !important;word-break:break-word !important;overflow-wrap:break-word !important;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%;margin:0 auto;}.flash-sale-sticker{background:linear-gradient(45deg,#ff416c,#ff4b2b);color:#fff;padding:5px 12px;border-radius:8px;font-weight:bold;font-size:0.85rem;box-shadow:0 4px 6px rgba(255,65,108,0.3);text-transform:uppercase;letter-spacing:0.5px;display:inline-block;transform:rotate(-2deg);}.blog-card{transition:transform 0.3s ease,box-shadow 0.3s ease;border:1px solid rgba(0,0,0,0.05);}.blog-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,0.1) !important;}.card-img-wrapper{overflow:hidden;height:220px;}.card-img-wrapper img{transition:transform 0.5s ease;}.blog-card:hover .card-img-wrapper img{transform:scale(1.08);}.text-limit-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.pagination-black .page-item.active .page-link,.pagination-black .page-item.active .page-link a{background-color:#212529 !important;border-color:#212529 !important;color:#ffffff !important;}.pagination-black .page-link,.pagination-black .page-link a{background-color:#ffffff !important;border-color:#dee2e6 !important;color:#212529 !important;text-decoration:none !important;}.pagination-black .page-item:not(.active) .page-link:hover,.pagination-black .page-item:not(.active) .page-link:hover a{background-color:#e9ecef !important;border-color:#dee2e6 !important;color:#000000 !important;}.pagination-black .page-link:focus,.pagination-black .page-link a:focus{box-shadow:0 0 0 0.25rem rgba(33,37,41,0.25) !important;}.search-seamless .form-control:focus{box-shadow:none !important;outline:none !important;}.newsletter-wrapper{display:flex;padding:4px;background:#ffffff;border:1px solid #dee2e6;border-radius:50rem;}.newsletter-wrapper .form-control{border:none !important;background:transparent !important;padding-left:20px;box-shadow:none !important;}.newsletter-wrapper .btn{border-radius:50rem !important;padding:8px 20px;font-weight:bold;}.latest-post-item{transition:transform 0.2s ease,background-color 0.2s ease;padding:8px;border-radius:8px;}.latest-post-item:hover{background-color:#f8f9fa;transform:translateX(5px);}.latest-post-item:hover .post-title{color:#2e2e2e !important;}.tag-pill{display:inline-block;padding:0.4rem 0.9rem;margin:0.25rem;border-radius:50rem;font-size:0.85rem;font-weight:500;text-decoration:none;transition:all 0.25s ease;background-color:#f8f9fa;color:#495057;border:1px solid #e9ecef;}.tag-pill:hover{background-color:#212529;color:#ffffff;border-color:#212529;transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,0.1);}#profileTab .nav-link.active{background-color:#212529 !important;color:#ffffff !important;}#profileTab .nav-link{color:#495057;transition:all 0.3s ease;}#profileTab .nav-link:hover:not(.active){background-color:#e9ecef;color:#000000;}@media (max-width:768px){.testimonial-card{width:280px;}}@keyframes scrollLogos{0%{transform:translateX(0);}100%{transform:translateX(calc(-200px * 5));}}@media (max-width:768px){.card-body{padding:15px !important;}.container-fluid{padding-left:10px !important;padding-right:10px !important;}h1,h3{font-size:1.5rem !important;}.slide{width:150px;font-size:1.2rem;}.logo-slide-track{width:calc(150px * 10);}@keyframes scrollLogos{0%{transform:translateX(0);}100%{transform:translateX(calc(-150px * 5));}}}@media (max-width:991.98px){.admin-footer{left:0;}.floating-navbar{border-radius:20px;padding:15px 20px;}.floating-navbar .navbar-collapse{margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0;}.floating-navbar .nav-link{margin:8px 0;font-size:0.95rem;}.mobile-action-area{margin-top:15px;justify-content:flex-start !important;}}.carousel-img-custom-height{width:100% !important;height:450px;}@media (max-width:768px){.carousel-img-custom-height{height:auto !important;aspect-ratio:16 / 9;object-fit:cover !important;}#productTab,#profileTab,#categoryFilterScroll{flex-wrap:nowrap !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:5px;}#productTab::-webkit-scrollbar,#profileTab::-webkit-scrollbar,#categoryFilterScroll::-webkit-scrollbar{display:none;}#productTab .nav-item,#profileTab .nav-item,#categoryFilterScroll .btn{flex-shrink:0;}#productTab .nav-link,#profileTab .nav-link{white-space:nowrap;}}html,body{overflow-x:hidden;}.nav-wrapper{position:fixed;top:20px;left:0;width:100%;z-index:1030;padding:0 15px;}.nav-spacer{height:100px;}.floating-navbar{background-color:#ffffff;border-radius:50px;padding:10px 30px;box-shadow:0 10px 30px rgba(0,0,0,0.08);margin:0 auto;max-width:1100px;}.floating-navbar .nav-link{color:#888888 !important;font-size:0.85rem;font-weight:500;margin:0 15px;transition:color 0.3s ease;}.floating-navbar .nav-link:hover{color:#333333 !important;}.btn-custom-brown{background-color:#a68a77;color:#ffffff;border-radius:50px;padding:8px 24px;font-size:0.85rem;font-weight:500;border:none;transition:background-color 0.3s ease;}.btn-custom-brown:hover{background-color:#8c7360;color:#ffffff;}.dropdown-profile-toggle::after{display:none !important;}@media (max-width:991.98px){.nav-spacer{height:135px;}.floating-navbar{border-radius:20px;padding:15px 20px;}.floating-navbar .navbar-collapse{margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0;text-align:center;}.floating-navbar .nav-link{margin:8px 0;font-size:0.95rem;}.mobile-action-area{display:flex !important;width:100% !important;justify-content:center !important;align-items:center !important;margin-top:20px !important;padding-top:20px !important;border-top:1px solid #f0f0f0 !important;gap:25px !important;}.mobile-action-area>a,.mobile-action-area>div{margin-left:0 !important;margin-right:0 !important;}.mobile-action-area .dropdown-menu{position:absolute !important;left:50% !important;transform:translateX(-50%) !important;text-align:center;margin-top:15px !important;}}.wa-floating-btn{position:fixed;width:55px;height:55px;bottom:90px;right:21.5px;background-color:#25d366;color:#FFF;border-radius:50%;text-align:center;font-size:32px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1040;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease-in-out;text-decoration:none;animation:pulse-wa 2s infinite;}.wa-floating-btn:hover{background-color:#1ebe57;color:white;transform:translateY(-5px) scale(1.05);box-shadow:0 6px 15px rgba(0,0,0,0.25);animation:none;}@keyframes pulse-wa{0%{box-shadow:0 0 0 0 rgba(37,211,102,0.5);}70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}#cookieConsentBanner{--ck-bg:#ffffff;--ck-border:rgba(0,0,0,0.08);--ck-shadow:0 -2px 30px rgba(0,0,0,0.08),0 8px 24px rgba(0,0,0,0.06);--ck-icon-bg:#f5f5f5;--ck-icon-border:#e0e0e0;--ck-title-color:#0a0a0a;--ck-desc-color:#6b7280;--ck-link-color:#000000;--ck-link-border:rgba(0,0,0,0.25);--ck-link-hover:#333333;--ck-reject-bg:transparent;--ck-reject-color:#555555;--ck-reject-border:#d1d5db;--ck-reject-bg-hover:#f5f5f5;--ck-reject-color-hover:#111111;--ck-reject-border-hover:#9ca3af;--ck-accept-bg:#111111;--ck-accept-color:#ffffff;--ck-accept-shadow:0 4px 14px rgba(0,0,0,0.20);--ck-accept-bg-hover:#333333;--ck-accept-shadow-hover:0 6px 18px rgba(0,0,0,0.30);position:fixed;bottom:0;left:0;right:0;z-index:99999;padding:0 16px 16px;animation:cookieSlideUp 0.5s cubic-bezier(0.16,1,0.3,1) both;}@media (prefers-color-scheme:dark){#cookieConsentBanner{--ck-bg:#111111;--ck-border:rgba(255,255,255,0.08);--ck-shadow:0 -2px 30px rgba(0,0,0,0.50),0 8px 24px rgba(0,0,0,0.40);--ck-icon-bg:#1e1e1e;--ck-icon-border:#2e2e2e;--ck-title-color:#f5f5f5;--ck-desc-color:#9ca3af;--ck-link-color:#ffffff;--ck-link-border:rgba(255,255,255,0.30);--ck-link-hover:#d1d5db;--ck-reject-bg:transparent;--ck-reject-color:#9ca3af;--ck-reject-border:#2e2e2e;--ck-reject-bg-hover:#1e1e1e;--ck-reject-color-hover:#f5f5f5;--ck-reject-border-hover:#555555;--ck-accept-bg:#ffffff;--ck-accept-color:#111111;--ck-accept-shadow:0 4px 14px rgba(255,255,255,0.10);--ck-accept-bg-hover:#e5e5e5;--ck-accept-shadow-hover:0 6px 18px rgba(255,255,255,0.18);}}@keyframes cookieSlideUp{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}}@keyframes cookieSlideDown{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(110%);}}#cookieConsentBanner.cookie-hiding{animation:cookieSlideDown 0.4s cubic-bezier(0.16,1,0.3,1) forwards;}.cookie-inner{background:var(--ck-bg);border-radius:20px;box-shadow:var(--ck-shadow);padding:20px 24px;display:flex;align-items:center;gap:18px;max-width:900px;margin:0 auto;border:1px solid var(--ck-border);flex-wrap:wrap;transition:background 0.3s ease,box-shadow 0.3s ease;}.cookie-icon-wrap{flex-shrink:0;width:52px;height:52px;background:var(--ck-icon-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ck-icon-border);transition:background 0.3s ease,border-color 0.3s ease;}.cookie-emoji{font-size:1.6rem;line-height:1;}.cookie-text-wrap{flex:1;min-width:200px;}.cookie-title{font-weight:700;font-size:0.95rem;color:var(--ck-title-color);margin:0 0 4px 0;letter-spacing:-0.2px;transition:color 0.3s ease;}.cookie-desc{font-size:0.80rem;color:var(--ck-desc-color);margin:0;line-height:1.55;transition:color 0.3s ease;}.cookie-link{color:var(--ck-link-color);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ck-link-border);transition:color 0.2s ease,border-color 0.2s ease;}.cookie-link:hover{color:var(--ck-link-hover);border-bottom-color:var(--ck-link-hover);}.cookie-actions{display:flex;gap:10px;align-items:center;flex-shrink:0;}.btn-cookie-reject{background:var(--ck-reject-bg);color:var(--ck-reject-color);border:1.5px solid var(--ck-reject-border);border-radius:50px;padding:9px 20px;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.25s ease;white-space:nowrap;font-family:'Inter',sans-serif;}.btn-cookie-reject:hover{background:var(--ck-reject-bg-hover);color:var(--ck-reject-color-hover);border-color:var(--ck-reject-border-hover);}.btn-cookie-accept{background:var(--ck-accept-bg);color:var(--ck-accept-color);border:none;border-radius:50px;padding:9px 22px;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.25s ease;white-space:nowrap;font-family:'Inter',sans-serif;box-shadow:var(--ck-accept-shadow);}.btn-cookie-accept:hover{background:var(--ck-accept-bg-hover);transform:translateY(-1px);box-shadow:var(--ck-accept-shadow-hover);}@media (max-width:576px){.cookie-inner{gap:14px;padding:18px;}.cookie-icon-wrap{display:none;}.cookie-actions{width:100%;justify-content:flex-end;}.btn-cookie-reject,.btn-cookie-accept{flex:1;text-align:center;}}#logoTrack{width:max-content !important;animation:scrollLogosDynamic var(--logo-anim-duration, 30s) linear infinite !important;}#logoTrack .slide{width:auto !important;padding:0 35px !important;margin:0 !important;}@keyframes scrollLogosDynamic{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}#logoTrack:hover{animation-play-state:paused;}.portfolio-card:hover{transform:translateY(-8px);box-shadow:0 15px 50px rgba(0,0,0,0.08) !important;}.portfolio-card:hover .portfolio-img{transform:scale(1.06);}.portfolio-card:hover .portfolio-arrow{background-color:#212529 !important;}.portfolio-card:hover .portfolio-arrow i{color:white !important;}.category-scroll-wrapper::-webkit-scrollbar{display:none;}.category-scroll-wrapper{cursor:grab;}.category-scroll-wrapper.is-dragging{cursor:grabbing;}.category-scroll-wrapper.is-dragging a{pointer-events:none;}
.portfolio-scroll-wrapper{margin-bottom:2rem;}.portfolio-gallery-header{font-size:0.9rem;color:#6c757d;}.portfolio-scroll-container{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:1rem;padding-bottom:1rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#d1d1d1 #f1f1f1;cursor:grab;}.portfolio-scroll-container:active{cursor:grabbing;}.portfolio-scroll-container::-webkit-scrollbar{height:6px;}.portfolio-scroll-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px;}.portfolio-scroll-container::-webkit-scrollbar-thumb{background:#d1d1d1;border-radius:10px;}.portfolio-scroll-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8;}.portfolio-scroll-item{flex-shrink:0;width:75%;max-width:380px;}.portfolio-scroll-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1rem;transition:transform 0.3s ease,box-shadow 0.3s ease;}.gallery-thumbnail{width:70px;height:45px;object-fit:cover;cursor:pointer;border:2px solid transparent;opacity:0.5;transition:all 0.3s ease;}.gallery-thumbnail.active-thumb{border-color:#fff !important;opacity:1 !important;} /* CSS Pelindung Layout Mobile & Tipografi */ html, body { overflow-x: clip !important; max-width: 100vw; } .text-break-mobile { word-wrap: break-word !important; word-break: break-word !important; white-space: normal !important; } .article-content img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 1.5rem; } .adsbygoogle { max-width: 100% !important; overflow: hidden !important; } /* CSS Tambahan Khusus Gaya Portal Berita */ .avatar-group { display: flex; align-items: center; } .avatar-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1rem; border: 2px solid #fff; z-index: 1; } .avatar-circle.stacked { margin-left: -15px; /* Efek menumpuk */ z-index: 0; } .action-btn-group .btn { background-color: #2a2a2a; /* Warna dark ala Kompas */ color: #fff; border: none; border-radius: 20px; padding: 5px 15px; font-size: 0.85rem; transition: 0.2s ease; } .action-btn-group .btn:hover { background-color: #444; } .action-btn-group .btn-icon { padding: 5px 10px; border-radius: 50%; } [data-theme="dark"] .action-btn-group .btn { background-color: #444; } .article-meta-row { gap: 1rem; } .article-author { min-width: 220px; } .article-author-photo { width: 56px; height: 56px; min-width: 56px; border-radius: 50%; object-fit: cover; margin-right: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } .article-author-initial { display: flex; align-items: center; justify-content: center; background: #0d6efd; color: #fff; font-weight: 700; font-size: 1rem; } .article-author-name { color: #0b2d5c; font-weight: 600; font-size: 1.05rem; line-height: 1.2; } .article-author-role { color: #5f6f82; font-size: 0.92rem; } .article-meta-info { gap: 12px; color: #4f5f70; font-size: 0.95rem; } .article-meta-item { display: inline-flex; align-items: center; gap: 8px; color: #4f5f70; text-decoration: none; white-space: nowrap; } .article-meta-item i { color: #52677a; font-size: 0.95rem; } .article-comment-link:hover { color: #0d6efd; text-decoration: none; } .article-meta-dot { color: #7b8794; } /* CSS Kustom Navigasi Pagination */ .custom-pagination .page-item.active .page-link { background-color: #212529; border-color: #212529; color: #ffffff; } .custom-pagination .page-link { color: #212529; border-radius: 5px; margin: 0 3px; } .custom-pagination .page-link:hover { background-color: #e9ecef; color: #212529; } @media (max-width: 576px) { .article-meta-row { align-items: flex-start !important; } .article-meta-info { width: 100%; margin-top: 8px; padding-left: 70px; } } 
.nav-pills .nav-link.active{background-color:#212529 !important;color:#ffffff !important;}.nav-pills .nav-link{color:#212529 !important;background-color:#ffffff;border:1px solid #dee2e6;transition:0.2s;}.nav-pills .nav-link:hover{background-color:#f8f9fa;border-color:#212529;}