/*
Theme Name: Lariaja Theme
Theme URI: https://example.com/lariaja-theme
Author: Nama Anda
Author URI: https://example.com/
Description: Tema kustom responsif yang dibuat dari awal.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: themeslariaja
*/
/* Reset Dasar */
* {
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
body {
overflow-x: hidden;
}
body.wp-singular.page-template.page-template-Vendor.page-template-template-dashboard-vendor.page-template-Vendortemplate-dashboard-vendor-php.page.page-id-29.logged-in.wp-custom-logo.wp-theme-themeslariaja.theme-themeslariaja.woocommerce-js {
padding: 0px;
}
.tracking-widest{
letter-spacing: 0px!important;
}
#main-menu li.current-menu-item a, #main-menu li.current_page_item a, #main-menu li a:hover {
color: #ffd700!important;
}
span.highlight.white {
color: #000000;
}
.space-head {
height:62px;
}
header.new-header-v1 {
background-color: #ffffff;
height:97px;
position: fixed;
box-shadow: rgba(11, 11, 11, 0.1) 0px 2px 24px;
}
header.new-header-v1 #main-menu li a {
color: #000000;
}
header.new-header-v1 span.user-greeting {
color: #000000;
font-weight: 400 !important;
}
header.new-header-v1 .top-nav {
top: 17px;
}
#main-menu li.current-menu-item a::after, #main-menu li.current_page_item a::after, #main-menu li a:hover::after {
bottom: -17px!important;
}
/* Bungkus Utama (Container) */
.card-slider-new {
position: relative;
width: 100%; /* Mengikuti lebar parent/bungkusnya */
aspect-ratio: 16 / 9; /* Menjaga proporsi agar tidak gepeng */
overflow: hidden;
border-radius: 18px;
background: #111;
height: 220px;
}
/* Container Geser */
.slider-wrapper {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Item Slide */
.slide {
/* KUNCI: flex 0 0 100% artinya lebar slide HARUS 100% dan tidak boleh menciut */
flex: 0 0 100%;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
padding: 30px;
box-sizing: border-box;
}
.slider-content {
width: 100%;
max-width: 500px;
}
.slide-hashtag {
color: #ffd700;
font-weight: 800;
font-size: 14px;
margin: 0;
text-transform: uppercase;
}
.slide-title {
color: #fff;
font-size: clamp(18px, 4vw, 28px); /* Ukuran teks proporsional */
font-weight: 800;
margin: 5px 0 0;
line-height: 1.2;
}
/* Navigasi Dots */
.slider-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 5;
}
.dot {
width: 8px;
height: 8px;
background: rgba(255,255,255,0.3);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #fff;
width: 25px; /* Efek pill */
border-radius: 10px;
}
/* Responsif untuk layar kecil */
@media (max-width: 768px) {
.card-slider-new {
aspect-ratio: 4 / 3; /* Lebih tinggi sedikit di mobile agar teks tidak menumpuk */
}
}
.profile-page-wrapper {
padding: 0px 0!important;
}
/* =========================================== WRAP INFO ===========================================================*/
/* Container Utama */
.wrap-info-user {
padding: 60px 0;
width: 100%;
background-color: #ffffff;
}
.wrap-info-user .stepper-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative; /* Dasar untuk line-connector */
}
/* Garis Tipis Penghubung */
.wrap-info-user .line-connector {
position: absolute;
top: 25px; /* Pas di tengah lingkaran */
left: 15%;
right: 15%;
height: 1px;
background-color: #e0e0e0;
z-index: 1;
}
/* Item Per Step */
.wrap-info-user .step-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 2;
position: relative;
}
/* Lingkaran & Efek Glow Oranye */
.wrap-info-user .circle-container {
position: relative;
width: 50px;
height: 50px;
margin-bottom: 25px;
}
.wrap-info-user .circle-num {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #ffd700;
color: #000000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
z-index: 3;
transition: transform 0.3s ease;
}
.wrap-info-user .circle-glow {
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
background-color: rgb(173 173 173 / 20%);
border-radius: 50%;
z-index: 2;
filter: blur(2px);
transition: all 0.3s ease;
}
/* Tipografi */
.wrap-info-user .step-content h3 {
font-size: 16px;
color: #333;
font-weight: 700;
margin-bottom: 12px;
transition: color 0.3s ease;
}
.wrap-info-user .step-desc {
font-size: 13.5px;
color: #666;
line-height: 1.6;
max-width: 280px;
margin: 0 auto;
opacity: 0; /* Hidden untuk efek hover */
transform: translateY(10px);
transition: all 0.4s ease;
}
/* --- HOVER EFFECTS --- */
.wrap-info-user .step-item:hover .circle-num {
transform: scale(1.1);
}
.wrap-info-user .step-item:hover .circle-glow {
transform: scale(1.2);
background-color: rgba(255, 126, 77, 0.3);
}
.wrap-info-user .step-item:hover h3 {
color: #FFD700;
}
.wrap-info-user .step-item:hover .step-desc {
opacity: 1;
transform: translateY(0);
}
/* Responsif Mobile */
@media (max-width: 768px) {
.rd-user-info h1 {
font-size: 14px!important;
font-weight: 900!important;
}
.rd-user-info p {
font-size: 12px;
line-height: 16px!important;
padding-top: 7px!important;
}
.rd-pro-header {
padding: 10px!important
}
.mobile-pill-item.active {
color: #000 !important;
background-color: #ffd700;
border-radius: 100%!important;
}
.top-nav {
padding: 8px 20px !important;
}
.verified-tag {
color: #0420d8!important;;
background: #eff6ff;
font-size: 9px!important;;
}
.user-name {
font-size: 12px!important;
}
.hero-content { padding-top: 160px!important; max-width: 1000px; margin: auto; }
.wrap-info-user .stepper-container {
flex-direction: column;
gap: 50px;
}
.wrap-info-user .line-connector {
display: none;
}
.wrap-info-user .step-desc {
opacity: 1;
transform: none;
}
}
/* =========================================== WRAP INFO ===========================================================*/
/* --- 1. POPUP SEARCH OVERLAY (SMOOTH) --- */
#searchOverlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
z-index: 3000;
display: none;
flex-direction: column;
align-items: center;
padding-top: 100px;
color: white;
opacity: 0;
transition: opacity 0.4s ease;
}
#searchOverlay.active {
display: flex;
opacity: 1;
}
.overlay-content {
width: 80%; max-width: 600px; text-align: center;
transform: translateY(30px) scale(0.95);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#searchOverlay.active .overlay-content {
transform: translateY(0) scale(1);
}
.close-overlay {
position: absolute; top: 30px; right: 30px;
font-size: 2.5rem; cursor: pointer; color: #FFD700;
}
.recent-event {
margin-top: 40px; background: rgba(255,255,255,0.05);
padding: 25px; border-radius: 15px; border: 1px solid rgba(255, 215, 0, 0.4);
}
/* --- 2. MOBILE BURGER MENU & SIDEBAR --- */
.burger-btn {
display: none;
font-size: 1.5rem;
color: white;
cursor: pointer;
z-index: 2500;
}
#mobileMenuOverlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 2000;
display: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.mobile-sidebar {
position: fixed;
top: 0; right: -80%; width: 80%; height: 100%;
background: #FFD700;
z-index: 2100;
padding: 80px 30px;
display: flex;
flex-direction: column;
gap: 20px;
transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: -10px 0 20px rgba(0,0,0,0.2);
}
.mobile-sidebar a {
font-size: 1.5rem;
color: #000;
text-decoration: none;
font-weight: 900;
border-bottom: 1px solid rgba(0,0,0,0.1);
padding-bottom: 10px;
}
/* --- SLIDER --- */
.card-slider {
position: relative;
flex: 0 0 70%;
background: rgba(40, 40, 40, 0.7);
border-radius: 15px;
min-height: 250px;
overflow: hidden;
backdrop-filter: blur(8px);
}
.slider-wrapper {
display: flex;
height: 300px
width: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide {
width: 100%;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-size: cover;
background-position: center;
}
.slider-dots { position: absolute; bottom: 20px; left: 25px; display: flex; gap: 8px; }
.dot {
width: 30px; height: 5px; background: rgba(255,255,255,0.3);
border-radius: 5px; cursor: pointer; transition: 0.3s;
}
.dot.active { background: #FFD700; width: 50px; }
/* --- TAGGING URL --- */
.tag-container {
display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
.event-tag {
background: rgba(255, 215, 0, 0.2);
color: #000000; padding: 6px 15px; border-radius: 20px;
text-decoration: none; font-size: 0.85rem; font-weight: bold;
border: 1px solid rgba(255, 215, 0, 0.3);
transition: 0.3s;
}
.event-tag:hover { background: #FFD700; color: #000; }
.container-home { display: flex; min-height: 100vh; }
.hero-section {
top: -141px;
flex: 1;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url("https://i.pinimg.com/1200x/97/27/6b/97276b0d28a984cfec97370ee9293440.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
padding: 20px 50px;
position: relative;
padding-right: 120px;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: -150px;
}
.top-nav { display: flex; align-items: center; justify-content: space-evenly; z-index:123; position:relative; top:32px; }
.logo { width: 120px; filter: brightness(0) invert(1); }
.nav-links a { color: white; text-decoration: none; margin: 0 15px; font-weight: bold; }
.top-icons { display: flex; align-items: center; gap: 15px; }
.hero-content { padding-top: 240px; max-width: 1000px; margin: auto; }
.search-bar {
display: flex; border-bottom: 2px solid rgba(255,255,255,0.5);
margin-bottom: 40px; align-items: center; cursor: pointer;
}
.search-bar input {
background: transparent; border: none; color: #ffffff;
font-size: 2rem; width: 100%; padding: 10px; outline: none; cursor: pointer;
}
.btn-search {
background: #FFD700; border: none; color: white;
width: 45px; height: 45px; border-radius: 50%; cursor: pointer;
}
.cards-container { display: flex; gap: 20px; width: 100%; align-items: stretch; }
.card-rate {
flex: 1; background: rgba(40, 40, 40, 0.7); border-radius: 15px;
padding: 25px; min-height: 220px; backdrop-filter: blur(8px);
}
.rate-row { display: flex; justify-content: space-between; margin:0px 0; font-size: 1.1rem; }
hr { border: 0; border-top: 1px solid rgba(255,255,255,0.2); }
/* --- SIDE NAV (Desktop) --- */
.side-nav {
width: 109px; background: #FFD700; display: flex;
flex-direction: column; position: fixed; right: 0;
top: 0; bottom: 0; z-index: 100;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}
.side-nav.hidden { transform: translateX(100%); opacity: 0; }
.nav-item {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; color: #000000;
border-bottom: 1px solid rgba(0,0,0,0.05); cursor: pointer;
font-size: 0.75rem; text-decoration: none;
}
.nav-item i { font-size: 1.4rem; margin-bottom: 5px; }
.section-about { padding: 60px 20px; background: #f4f4f4; }
/* --- 3. FOOTER SECTION --- */
footer {
padding: 20px 15px;
color: #333;
}
.footer-banner {
background: linear-gradient(135deg, #d88d03, #FFD700);
padding: 60px;
border-radius: 30px;
text-align: center;
color: #000000;
margin-bottom: 60px;
display: none;
}
.footer-banner h2 { font-size: 2.5rem; margin-bottom: 15px; font-weight: 700; }
.footer-banner p { opacity: 0.9; margin-bottom: 30px; font-size: 1.1rem; }
.footer-banner .btn-build {
background: white; color: #FF7043; padding: 12px 30px;
border-radius: 25px; text-decoration: none; font-weight: bold;
display: inline-block; transition: 0.3s;
}
.footer-banner .btn-build:hover { transform: scale(1.05); }
.footer-main {
display: flex; justify-content: space-between; flex-wrap: wrap;
gap: 40px; margin-bottom:0px;
}
.footer-col-brand { flex: 1; min-width: 250px; }
.footer-col-brand .logo-text { font-size: 1.5rem; font-weight: 900; margin-bottom: 20px; display: block; }
.footer-col-brand p { color: #666; line-height: 1.6; margin-bottom: 20px; font-size:14px; }
.social-links { display: flex; gap: 15px; }
.social-links a { color: #333; font-size: 1.2rem; transition: 0.3s; }
.social-links a:hover { color: #FF7043; }
.footer-col-links { flex: 0.5; min-width: 150px; }
.footer-col-links h4 { margin-bottom: 20px; font-weight: 700; }
.footer-col-links ul { list-style: none; }
.footer-col-links ul li { margin-bottom: 12px; }
.footer-col-links ul li a { color: #666; text-decoration: none; transition: 0.3s; font-size:14px; }
.footer-col-links ul li a:hover { color: #FF7043; }
.footer-col-news { flex: 1; min-width: 250px; }
.footer-col-news h4 { margin-bottom: 20px; }
.news-input-wrap {
display: flex; background: #f9f9f9; border: 1px solid #ddd;
border-radius: 30px; padding: 5px; margin-top: 15px;
}
.news-input-wrap input {
border: none; background: transparent; padding: 10px 15px; flex: 1; outline: none;
}
.btn-subscribe {
background: #FFD700; color: #000000; border: none; padding: 10px 20px;
border-radius: 25px; cursor: pointer; transition: 0.3s;
}
.btn-subscribe:hover { background: #e64a19; }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 30px; border-top: 1px solid #eee; font-size: 0.85rem; color: #888;
}
.footer-bottom-links a { color: #888; text-decoration: none; margin-left: 20px; }
/* --- RESPONSIVE SETTINGS --- */
@media (max-width: 768px) {
.top-nav {
justify-content: center;
}
.section-about-new .intro-flex {
width: 90%;
margin: auto;
border-radius: 20px;
}
.step-item {
display: flex;
gap: 0px;
margin-bottom: 0px;
position: relative;
z-index: 2;
}
.step-content {
padding: 0px!important;
}
.copyright-bar {
background: #fff;
border-top: 1px solid var(--f-border-light);
padding: 20px 0;
margin-bottom: 80px;
}
footer { padding: 40px 20px 20px 20px; }
.footer-banner { padding: 40px 20px; }
.footer-banner h2 { font-size: 1.8rem; }
.footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
.footer-bottom-links a { margin: 0 10px; }
}
@media (max-width: 600px) {
.nav-bar.is-active {
left: 0;
z-index: 1234 !important;
}
.overlay-content {
padding: 0px 0px 0px!important;
}
.upcoming-events-hero {
height: 750px!important;
}
.card-slider-new {
height: 102px;
}
.hero-section { padding-right: 25px !important; }
.burger-btn { display: block; }
.side-nav {
width: 100%; height: 70px; flex-direction: row;
top: auto; bottom: -100px;
transform: none; right: 0; left: 0;
}
.side-nav.mobile-visible { bottom: 0 !important; opacity: 1 !important; }
.hero-section { padding: 25px !important; }
.card-slider { flex: 0 0 100%; }
.cards-container { flex-direction: column; }
}
/* CSS UNTUK MERAPIHKAN CARD EVENT & SLIDER */
.event-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(209px, 1fr));
gap:0px;
padding: 20px 0;
}
.event-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.event-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
/* --- UPDATE: CSS TAB FILTER SESUAI DESAIN --- */
.filter-tabs-container {
margin-bottom: 30px;
border-bottom: 1px solid #e2e8f0;
display: flow-root;
justify-content: center;
position: relative;
display: none;
}
.filter-tabs {
display: flex;
gap:6px;
position: relative;
padding-bottom: 10px;
}
.tab-item {
font-size: 16px;
font-weight: 600;
color: #64748b;
cursor: pointer;
text-decoration: none;
transition: color 0.3s ease;
padding: 5px 10px;
}
.tab-item.active {
color: #2563eb;
}
.tab-underline {
position: absolute;
bottom: -1px;
height: 3px;
background-color: #2563eb;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
}
/* CSS SLIDER DAERAH */
.vacation-ideas-container {
overflow: hidden;
padding: 40px 0;
}
.card-slider-wrapper {
position: relative;
display: flex;
align-items: center;
}
.card-list {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 20px 5px;
scrollbar-width: none;
}
.card-list::-webkit-scrollbar {
display: none;
}
.vacation-card {
min-width: 250px;
flex: 0 0 auto;
border-radius: 15px;
position: relative;
height: 350px;
overflow: hidden;
cursor: pointer;
}
.vacation-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.vacation-card:hover img {
transform: scale(1.1);
}
.slide-arrow {
position: absolute;
right:10px;
z-index: 10;
background: #fff;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Penambahan Badge Jumlah Event pada Card Wilayah */
.region-badge-count {
position: absolute;
top: 15px;
left: 15px;
background: rgba(37, 99, 235, 0.9);
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
z-index: 2;
}
/* --- UPDATE: CSS LIST ANGGOTA (TOGGLE FOLLOW & GRAY STYLE) --- */
.community-members-section {
padding: 40px 0;
background-color: #f8fafc;
}
.members-scroll-wrapper {
display: flex;
align-items: center;
gap: 15px;
overflow-x: auto;
padding: 10px 5px 20px;
scrollbar-width: none;
}
.members-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.fa-magnifying-glass::before, .fa-search::before {
content: "";
color: rgb(255, 215, 0) !important;
}
.member-item {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e2e8f0;
min-width: 185px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.member-item:hover {
border-color: #ffd700;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* Style saat sudah berteman (Gray Mode) */
.member-item.is-friend {
background-color: #f1f5f9 !important;
border-color: #ffd700 !important;
}
.member-item.is-friend img {
filter: grayscale(100%);
opacity: 0.6;
}
.member-avatar img {
width: 74px;
height: 74px;
border-radius: 50%;
object-fit: cover;
}
.member-info {
flex-grow: 1;
}
.member-info h4 {
margin: 0;
font-size: 13px;
font-weight: 700;
color: #232526;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
.member-item.is-friend .member-info h4,
.member-item.is-friend .member-info p {
color: #94a3b8 !important;
}
.member-info p {
margin: 0;
font-weight: 400;
font-size: 10px;
color: #94a3b8;
}
/* Style Tombol Toggle */
.btn-follow-action {
padding: 5px 12px;
font-size: 11px;
font-weight: 600;
border-radius: 20px;
text-decoration: none;
transition: 0.2s;
cursor: pointer;
border: 1px solid transparent;
display: inline-block;
text-align: center;
min-width: 85px;
}
.follow-link {
color: #000000;
background: #FFD700;
}
.unfollow-link {
color: #64748b;
background: #e2e8f0;
border-color: #ffd700;
}
.btn-follow-action:hover {
filter: brightness(0.95);
}
.see-all-members-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 120px;
height: 60px;
background: #fff;
border: 2px dashed #ffd700;
border-radius: 12px;
text-decoration: none;
flex-shrink: 0;
transition: 0.2s;
}
.see-all-members-card:hover {
background: #f1f5f9;
border-color: #2563eb;
}
.see-all-members-card span {
font-size: 12px;
font-weight: 700;
color: #FFD700;
text-align: center;
}
/* Container Utama */
.card-rate {
border-radius: 20px;
padding: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}
/* AREA SCROLL */
.member-scroll-wrapper {
max-height: 163px; /* Batas tinggi maksimal */
overflow-y: auto; /* Scroll aktif jika konten melebihi max-height */
overflow-x: hidden;
padding-right: 4px; /* Ruang untuk scrollbar */
}
/* Custom Scrollbar (Elegan & Tipis) */
.member-scroll-wrapper::-webkit-scrollbar {
width: 4px;
}
.member-scroll-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.member-scroll-wrapper::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.2);
border-radius: 10px;
}
.member-scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: #2563eb;
}
.card-header-flex {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 11px;
}
.card-rate h3 {
font-size: 12px;
font-weight: 800;
margin: 0;
color: #ffffff;
letter-spacing: 0px;
}
.badge-count {
background: #fef2f2;
color: #ef4444;
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border-radius: 100px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 5px;
}
.badge-count::before {
content: '';
width: 6px;
height: 6px;
background: #ef4444;
border-radius: 50%;
display: inline-block;
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.member-item-link {
text-decoration: none !important;
display: block;
margin-bottom: 12px;
}
.member-container {
padding: 7px;
border-radius: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
}
.member-item-link:hover .member-container {
background: rgba(255, 255, 255, 0.05); /* Sedikit terang saat hover */
border-color: rgba(37, 99, 235, 0.3);
transform: translateY(-2px);
}
.member-info-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom:0px;
}
.user-avatar-wrapper {
position: relative;
flex-shrink: 0;
}
.user-avatar-wrapper img {
width: 42px;
height: 42px;
border-radius: 12px;
border: 2px solid #fff;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.online-indicator {
position: absolute;
bottom: -2px;
right: -2px;
width: 12px;
height: 12px;
background: #10b981;
border: 2px solid #fff;
border-radius: 50%;
}
.user-text-meta {
flex: 1;
display: flex;
flex-direction: column;
}
.user-name {
font-weight: 700;
font-size: 12px;
color: #ffffff;
line-height: 1.2;
}
.user-status-text {
font-size: 11px;
color: #64748b;
font-weight: 500;
}
.action-icon {
color: #cbd5e1;
transition: 0.3s;
font-size: 14px;
}
.member-item-link:hover .action-icon {
color: #2563eb;
transform: translateX(3px);
}
.member-details-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid rgba(237, 242, 247, 0.1);
}
.detail-pill {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: #64748b;
font-weight: 600;
}
.verified-tag {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
color: #2563eb;
background: #eff6ff;
padding: 2px 8px;
border-radius: 6px;
}
.empty-state {
padding: 20px;
text-align: center;
color: #94a3b8;
font-size: 13px;
font-style: italic;
}
/* CSS UNTUK MENYEMBUNYIKAN ELEMEN JIKA LOGIC HIDE TERPENUHI */
footer,
.site-footer,
#colophon,
.footer-copy-right,
.new-header,
.bottom-nav-container,
.top-bar,
.mid-bar,
.nav-bar,
.space-header {
display: none !important;
}
body {
padding-bottom: 0 !important;
font-family: 'Lato', sans-serif !important;
}
.dashboard-custom-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 9999;
}
.btn-logout-dashboard {
color: #e74c3c;
text-decoration: none;
font-weight: 600;
border: 1px solid #e74c3c;
padding: 8px 15px;
border-radius: 8px;
transition: 0.3s;
}
.btn-logout-dashboard:hover {
background: #e74c3c;
color: #fff;
}
/* CSS TAMBAHAN UNTUK MOBILE MENU */
.mobile-menu-trigger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 18px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1100;
margin-left: 15px;
z-index: 10000 !important;
}
.mobile-menu-trigger .bar {
width: 100%;
height: 3px;
background-color: #333;
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 12;
}
.menu-overlay.is-active {
opacity: 1;
visibility: visible;
}
@media (max-width: 991px) {
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: relative;
}
.mobile-menu-trigger {
display: flex;
}
.nav-bar {
position: fixed !important;
top: 0;
left: -300px;
width: 280px;
height: 100vh;
box-shadow: 5px 0 25px rgba(0,0,0,0.1);
z-index: 1050;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: block !important;
overflow-y: auto;
padding-top: 20px;
z-index: 9999 !important;
}
.nav-bar.is-active {
left: 0;
}
.main-nav ul {
flex-direction: column;
padding: 20px;
margin: 0;
list-style: none;
}
.main-nav ul li {
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.sliding-line {
display: none !important;
}
.mobile-menu-trigger.open .bar:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.mobile-menu-trigger.open .bar:nth-child(2) {
opacity: 0;
}
.mobile-menu-trigger.open .bar:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
.lariaja-user-actions {
display: flex;
gap: 10px;
}
}
.bottom-nav-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 65px;
background: rgb(0 0 0);
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
z-index: 1000;
border-top: 1px solid rgba(0,0,0,0.05);
border-radius: 20px 20px 0 0;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #8e8e93;
font-size: 11px;
font-weight: 500;
transition: all 0.3s ease;
flex: 1;
}
.bottom-nav-item i {
font-size: 20px;
margin-bottom: 4px;
transition: transform 0.3s ease;
}
.bottom-nav-item.active {
color: #ffd700;
}
.bottom-nav-item:active i {
transform: scale(0.8);
}
.bottom-nav-center {
position: relative;
top: -15px;
flex: 0 0 65px;
}
.nav-center-circle {
width: 55px;
height: 55px;
background: linear-gradient(135deg, #007bff, #0056b3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 8px 15px rgba(0, 123, 255, 0.3);
border: 4px solid #ffffff;
}
.nav-center-circle i {
margin-bottom: 0;
font-size: 22px;
color: #fff !important;
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.menu-overlay.is-active {
opacity: 1;
visibility: visible;
}
@media (max-width: 991px) {
.nav-bar {
position: fixed !important;
top: 0;
left: -300px;
width: 280px;
height: 100vh;
background: #ffffff;
box-shadow: 10px 0 25px rgba(0,0,0,0.1);
z-index: 2000;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: block !important;
overflow-y: auto;
padding: 20px 0;
}
.nav-bar.is-active {
left: 0;
}
.mobile-menu-trigger {
display: flex;
position: relative;
z-index: 2001;
}
.mobile-menu-trigger.open .bar:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.mobile-menu-trigger.open .bar:nth-child(2) {
opacity: 0;
}
.mobile-menu-trigger.open .bar:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
}
.bottom-nav-container {
display: none!important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background:#000000;
backdrop-filter: blur(10px);
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 -5px 20px rgba(0,0,0,0.08);
z-index: 1000;
border-top: 1px solid rgba(0,0,0,0.05);
border-radius: 25px 25px 0 0;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #8e8e93;
font-size: 11px;
font-weight: 600;
flex: 1;
transition: 0.3s;
}
.bottom-nav-item.active {
color: #ffd700;
}
.bottom-nav-item i {
font-size: 20px;
margin-bottom: 4px;
}
.bottom-nav-center {
position: relative;
top: -20px;
flex: 0 0 70px;
}
.nav-center-circle {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ffd700, #ffd700);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 20px rgba(0, 123, 255, 0.4);
border: 5px solid #fff;
transition: transform 0.2s ease;
}
.nav-center-circle i {
color: #000000 !important;
font-size: 24px;
margin: 0;
}
.nav-center-circle:active {
transform: scale(0.9);
}
body.menu-open {
overflow: hidden;
}
@media (min-width: 992px) {
.bottom-nav-container { display: none; }
}
/* Styling Header & Horizontal List Premium */
.community-header-premium {
background: #000;
padding: 25px;
border-radius: 30px;
border: 1px solid #262626;
margin-bottom: 20px;
}
.header-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.main-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0; }
.subtitle { font-size: 12px; color: #666; margin: 0; }
.btn-create-community-elegant {
background: #fff; color: #000; border: none; padding: 8px 18px; border-radius: 14px;
display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.3s; font-weight: 800; font-size: 13px;
}
.btn-create-community-elegant:hover { transform: scale(1.05); }
.comm-horizontal-list-premium {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 10px 5px;
scrollbar-width: none; /* Firefox */
}
.comm-horizontal-list-premium::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.comm-item-wrapper { cursor: pointer; text-align: center; min-width: 85px; position: relative; }
.img-container-premium { position: relative; width: 62px; height: 62px; margin: 0 auto 10px; }
.comm-img-el {
width: 100%; height: 100%; border-radius: 22px;
object-fit: cover; border: 2px solid #1a1a1a;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.comm-item-wrapper.is-active .comm-img-el {
border-color: #d4af37;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}
.comm-name-label {
font-size: 10px;
font-weight: 700;
color: #555;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
transition: 0.3s;
}
.comm-item-wrapper.is-active .comm-name-label { color: #fff; }
.active-line {
width: 0; height: 3px; background: #d4af37;
margin: 6px auto 0; border-radius: 10px; transition: 0.3s;
}
.comm-item-wrapper.is-active .active-line { width: 20px; }
/* Container Utama Overlay */
.join-overlay-card {
background: linear-gradient(145deg, #0f0f0f, #161616);
padding: 80px 40px;
border-radius: 40px;
text-align: center;
border: 1px solid #262626;
margin-top: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
/* Efek Cahaya di Background */
.join-overlay-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
pointer-events: none;
}
/* Icon Gembok dengan Animasi Pulse */
.lock-icon {
font-size: 50px;
color: #d4af37;
margin-bottom: 25px;
background: rgba(212, 175, 55, 0.1);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(212, 175, 55, 0.2);
animation: lock-float 3s ease-in-out infinite;
}
@keyframes lock-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Typography */
.join-overlay-card h4 {
color: #fff;
font-size: 24px;
font-weight: 800;
margin-bottom: 10px;
}
.join-overlay-card p {
color: #888;
font-size: 14px;
max-width: 300px;
margin: 0 auto 30px;
line-height: 1.6;
}
.join-overlay-card strong {
color: #d4af37;
}
/* Tombol Gabung Sekarang */
.btn-join-now {
background: #fff;
color: #000;
border: none;
padding: 16px 40px;
border-radius: 20px;
font-weight: 800;
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 20px rgba(255,255,255,0.1);
}
.btn-join-now:hover {
transform: scale(1.05) translateY(-2px);
background: #d4af37;
color: #fff;
box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
}
.btn-join-now i {
font-size: 18px;
}
#comm-posts-container {
max-height: 500px;
overflow-y: auto;
padding: 20px;
background: rgba(0,0,0,0.2);
border-radius: 0 0 20px 20px;
}
/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--gold-primary); }
.chat-bubble-wrapper.me .chat-text {
font-weight: 500;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}
.loading-state {
text-align: center;
color: #444;
padding: 20px;
}
/* Dashboard Container */
.community-main-panel {
background: rgba(15, 15, 15, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}
/* Nav Header */
.comm-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.comm-nav-tabs { display: flex; gap: 8px; }
.tab-link {
background: transparent;
border: none;
color: #888;
padding: 10px 18px;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.tab-link i { font-size: 16px; }
.tab-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.tab-link.active { background: #d4af37; color: #000; }
/* Tools */
.comm-admin-tools { display: flex; gap: 10px; }
.btn-tool {
height: 40px;
padding: 0 15px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
transition: 0.3s;
}
.btn-tool.admin { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.btn-tool.admin:hover { background: #10b981; color: #fff; }
.btn-tool.logout { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.btn-tool.logout:hover { background: #ef4444; color: #fff; }
/* Composer Chat */
.mini-composer {
display: flex;
gap: 15px;
padding: 20px;
background: rgba(255,255,255,0.01);
}
.composer-avatar img { border-radius: 12px; border: 2px solid #d4af37; }
.composer-input-area {
flex: 1;
position: relative;
background: rgba(255,255,255,0.05);
border-radius: 15px;
padding: 2px 50px 2px 20px;
border: 1px solid rgba(255,255,255,0.1);
}
.composer-input-area input {
width: 100%;
height: 44px;
background: transparent;
border: none;
color: #fff;
outline: none;
}
.btn-send-chat {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: #d4af37;
color: #000;
border: none;
width: 34px;
height: 34px;
border-radius: 10px;
cursor: pointer;
}
/* Agenda & States */
.agenda-wrapper { padding: 25px; }
.gallery-empty-state {
padding: 100px 20px;
text-align: center;
color: #444;
}
.gallery-empty-state i { font-size: 50px; margin-bottom: 15px; }
@media (max-width: 600px) {
.hide-mobile { display: none; }
.tab-link span { display: none; }
.tab-link { padding: 12px; }
}
/* WRAP INFO */
.wrap-info {
padding: 60px;
background-color: #FFD700;
top: -51px;
position: relative;
}
.card-info {
margin-top: 40px;
display: flex;
gap: 30px;
padding: 100px 20px; /* Ruang ekstra untuk angka yang melayang */
max-width: 1200px;
margin: 0 auto;
justify-content: center;
}
.card-step {
position: relative;
flex: 1;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 20px;
padding: 50px 25px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
/* Menjaga tinggi kartu tetap konsisten agar tidak goyang */
min-height: auto;
display: flex;
align-items: center;
justify-content: center;
}
/* Lingkaran Angka */
.circle-number {
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 70px;
background-color: #fff;
border: 3px solid #FFD700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 700;
color: #FFD700;
z-index: 10;
transition: all 0.4s ease;
}
/* Container Teks */
.card-body {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Judul (Default Tampil) */
.card-body h3 {
font-size: 14px;
color: #111;
margin: 0;
text-transform: uppercase;
transition: all 0.5s ease;
opacity: 1;
visibility: visible;
text-align: center;
}
/* Deskripsi (Default Hilang) */
.card-body p {
position: absolute; /* Menumpuk di atas judul */
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.6;
/* Kondisi Awal: Tersembunyi */
opacity: 0;
visibility: hidden;
transform: translateY(10px); /* Muncul dari bawah sedikit */
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* --- LOGIKA HOVER --- */
.card-step:hover {
transform: translateY(-10px);
border-color: #FFD700;
box-shadow: 0 20px 40px rgba(255, 215, 0, 0.1);
}
.card-step:hover .circle-number {
background-color: #FFD700;
color: #000000;
}
/* Judul Fade Out */
.card-step:hover .card-body h3 {
opacity: 0;
visibility: hidden;
transform: translateY(-10px); /* Menghilang ke atas */
}
/* Deskripsi Fade In */
.card-step:hover .card-body p {
opacity: 1;
visibility: visible;
transform: translateY(0); /* Kembali ke posisi tengah */
}
/* Responsive */
@media (max-width: 992px) {
.card-info { flex-direction: column; gap: 60px; }
.card-step { min-height: 200px; width: 100%; max-width: 400px; margin: 0 auto; }
}
/* WRAP INFO */
/* WRAP CARD KOMUNITAS */
/* CONTAINER UTAMA - Setting warna dasar */
.wrap-user-komunitas {
padding: 60px 0;
background-color: #f7fafc; /* Warna background halaman yang sangat soft */
}
/* Wrapper Scroll - Menyesuaikan padding agar card terlihat mengambang */
.members-scroll-wrapper {
display: flex;
gap: 24px;
padding: 30px 10px 50px; /* Jarak ekstra di bawah untuk bayangan */
overflow-x: auto;
scrollbar-width: none;
mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.members-scroll-wrapper::-webkit-scrollbar {
display: none;
}
/* CARD MEMBER (The Core Design) */
.member-item {
flex: 0 0 260px; /* Lebar card */
background: transparent; /* Transparan agar pseudo-element terlihat */
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
overflow: hidden; /* Penting untuk efek cover */
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Bayangan soft dasar */
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
/* Penting: Mengubah urutan rendering agar tombol di bawah */
padding: 0;
}
/* Efek Hover Paralaks & Bayangan */
.member-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 25px 50px rgba(37, 99, 235, 0.15);
}
/* LAYER 1: Pseudo-element untuk COVER ATAS (GELAP) */
.member-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
/*background: linear-gradient(135deg, #FFD700, #FFD700);*/
z-index: 1;
}
/* LAYER 2: Pseudo-element untuk BAGIAN BAWAH (PUTIH) */
.member-item::after {
content: '';
position: absolute;
top: 110px; /* Mulai tepat di bawah cover atas */
left: 0;
width: 100%;
height: calc(100% - 110px); /* Sisa tinggi card */
background: #ffffff;
z-index: 0;
}
/* Penyesuaian Elemen Dalam agar posisinya benar */
/* AVATAR DENGAN EFEK TERPOTONG */
.member-avatar {
width: 110px; /* Sedikit lebih besar untuk efek dramatis */
height: 88px;
margin-top:10px; /* Setengah avatar di atas cover, setengah di bawah */
position: relative;
z-index: 2; /* Di atas pseudo-element */
margin-bottom:0px;
}
.member-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1px solid #fff; /* Border putih tebal seperti di gambar */
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
transition: transform 0.6s ease;
}
.member-item:hover .member-avatar img {
transform: scale(1.08) rotate(5deg);
}
/* INFO TYPOGRAPHY */
.member-info {
position: relative;
z-index: 2; /* Di atas pseudo-element */
width: 100%;
padding: 0 25px;
margin-bottom:0px;
}
.member-info h4 {
font-size: 19px;
font-weight: 800;
color: #1a202c;
margin: 0 0 10px 0;
letter-spacing: -0.5px;
}
.join-date {
font-size: 13px;
color: #a0aec0; /* Warna soft untuk tanggal */
margin-bottom: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
}
/* ICON TAMBAHAN UNTUK TANGGAL (seperti icon Premium di gambar) */
.join-date::before {
/*content: '📅'; Gunakan emoji atau icon font jika sudah terpasang */
font-size: 14px;
opacity: 0.7;
}
/* BUTTON ACTION (The Premium Style) */
.btn-follow-action {
width: 85%; /* Sedikit lebih kecil dari card agar tidak terlalu kaku */
padding: 14px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
border: none;
margin-top: auto; /* Tombol selalu di paling bawah */
margin-bottom: 25px; /* Jarak dari bawah card */
position: relative;
z-index: 2; /* Di atas pseudo-element */
letter-spacing: 0.5px;
}
.follow-link {
background: #2563eb;
color: #000000 !important;
}
.unfollow-link {
background: #f1f5f9;
color: #4a5568 !important;
}
.btn-follow-action:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
filter: brightness(1.1);
}
/* CARD LIHAT SEMUA (Menyesuaikan Desain Baru) */
.see-all-members-card {
flex: 0 0 180px;
margin-top: 100px; /* Menurunkan sedikit agar align dengan bagian info */
height: 250px; /* Menyesuaikan tinggi bagian putih */
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #ffffff !important;
position: relative;
z-index: 2;
transition: all 0.4s ease;
}
.see-all-members-card .icon-arrow {
background: rgba(255, 255, 255, 0.15);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 24px;
transition: all 0.4s ease;
}
.see-all-members-card span {
font-weight: 700;
line-height: 1.2;
}
.see-all-members-card:hover {
transform: translateY(-5px) scale(1.05);
}
.see-all-members-card:hover .icon-arrow {
background: #ffffff;
color: #2563eb;
transform: translateX(10px);
}
/* RESPONSIVE OPTIMIZATION */
@media (max-width: 768px) {
.member-item { flex: 0 0 230px; }
.member-avatar { width: 95px; height: 95px; margin-top: 60px; }
.member-item::before { height: 100px; }
.member-item::after { top: 100px; height: calc(100% - 100px); }
.member-info h4 { font-size: 17px; }
}
/* WRAP CARD KOMUNITAS */
.community-footer { background: #f9f9f9; padding: 60px 0 30px; margin-top: 40px; }
.footer-grid { width: 80%; margin: auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-logo { font-size: 24px; font-weight: 900; margin-bottom: 15px; }
.footer-logo span { color: var(--primary-color); }
.footer-brand p { color: var(--text-gray); font-size: 14px; line-height: 1.6; }
.footer-links h4, .footer-social h4 { font-size: 14px; font-weight: 700; margin-bottom: 20px; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { text-decoration: none; color: var(--text-gray); font-size: 14px; }
.footer-bottom { text-align: center; margin-top: 50px; padding-top: 20px; border-top: 1px solid #f3f4f6; color: var(--text-gray); font-size: 12px; }
/* Responsive */
@media (max-width: 1024px) {
.main-grid { grid-template-columns: 200px 1fr; }
.sidebar-right { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.main-grid { grid-template-columns: 1fr; }
.sidebar-left { display: none; }
.footer-grid { grid-template-columns: 1fr; text-align: center; }
}
/* Styling Artikel di Search Dropdown */
.article-horizontal-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.article-mini-card {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
text-decoration: none;
border-radius: 10px;
transition: background 0.2s;
border: 1px solid transparent;
}
.article-mini-card:hover {
background: #f8fafc;
border-color: #e2e8f0;
}
.article-thumb {
border-radius: 8px;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.article-details h5 {
margin: 0;
font-size: 13px;
color: #1e293b;
font-weight: 600;
line-height: 1.3;
}
.article-details span {
font-size: 10px;
color: #94a3b8;
display: block;
margin-top: 3px;
}
.dist-badge {
position: absolute;
bottom: 5px;
right: 5px;
background: rgba(37, 99, 235, 0.9); /* Biru Lariaja */
color: #fff;
font-size: 9px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 700;
}
.popular-img {
position: relative; /* Supaya badge jarak menempel di dalam gambar */
}
.popular-img {
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.popular-item:hover .popular-img {
transform: translateY(-5px);
border-color: var(--primary-blue);
}
.trending-badge {
position: absolute;
top: 5px;
left: 5px;
background: rgba(255, 255, 255, 0.9);
padding: 2px 6px;
border-radius: 4px;
color: #ff4757;
font-size: 8px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.popular-item span {
margin-top: 10px;
line-height: 1.2;
height: 2.4em; /* Menjaga teks tetap 2 baris agar grid rapi */
}
main#primary h2 {
text-align: center;
padding-top: 50px;
}
article#post-574 {
padding:0px;
margin: auto;
width: 100%;
display: flow-root;
}
.lariaja-invoice-wrapper {
background: #f4f7fa;
padding: 40px 20px;
display: flex;
justify-content: center;
}
.invoice-card {
background: #fff;
max-width: 600px;
width: 100%;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.05);
padding: 40px;
}
.invoice-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 30px;
border-bottom: 2px solid #f1f5f9;
padding-bottom: 20px;
}
.invoice-header h2 { color: #1e293b; margin: 0; font-size: 24px; font-weight: 800; }
.order-id { color: #64748b; font-size: 14px; margin: 5px 0 0; }
.status-badge {
padding: 8px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}
.status-badge.unpaid { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }
.status-badge.paid { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.invoice-section { margin-bottom: 30px; }
.invoice-section h4 { font-size: 16px; color: #334155; margin-bottom: 15px; border-left: 4px solid #2563eb; padding-left: 10px; }
.invoice-table { width: 100%; border-collapse: collapse; }
.invoice-table td { padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #475569; }
.text-right { text-align: right; }
.total-row td { border-bottom: none; padding-top: 20px; }
.price-total { font-size: 24px; color: #2563eb; font-weight: 800; }
.badge-cat { background: #e0f2fe; color: #0369a1; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.bank-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.bank-box img { height: 30px; }
.acc-number { font-size: 18px; font-weight: 700; color: #1e293b; margin: 5px 0; }
.copy-btn { font-size: 12px; color: #2563eb; cursor: pointer; margin-left: 10px; text-decoration: underline; }
.btn-submit-invoice {
width: 100%;
background: #2563eb;
color: #fff;
border: none;
padding: 15px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
margin-top: 15px;
}
.btn-submit-invoice:hover { background: #1d4ed8; transform: translateY(-2px); }
.file-input-wrapper {
border: 2px dashed #cbd5e1;
padding: 20px;
border-radius: 10px;
text-align: center;
background: #fcfcfc;
}
.file-hint { font-size: 11px; color: #94a3b8; margin-top: 8px; }
.quota-info-bar {
background: #fff1f2;
border: 1px solid #fecdd3;
color: #e11d48;
padding: 10px;
border-radius: 8px;
text-align: center;
font-size: 13px;
margin-bottom: 20px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
.invoice-card {
border-top: 5px solid #2563eb; /* Memberikan aksen garis biru di atas agar lebih elegan */
}
/* KOMUNITAS */
/* Container Utama dengan Background Image */
.wrap-komunitas {
max-width: 1200px;
margin: 20px auto;
padding: 0pxx;
border-radius: 20px;
font-family: Arial, sans-serif;
/* background-image: url(https://lariaja.com/stagging/wp-content/uploads/2026/02/CRTV11566_LB_EBD_2400x600_Apgai_02_26d2.webp); */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
position: relative;
}
/* Header */
.banner-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.header-left {
display: flex;
align-items: center;
gap: 15px;
}
.logo-placeholder {
font-weight: 900;
font-size: 24px;
color: #000;
}
.headline-text .small-text {
display: block;
font-size: 14px;
font-weight: bold;
color: #1a3c34;
letter-spacing: 1px;
}
.headline-text .script-text {
font-size: 32px;
font-family: 'Brush Script MT', cursive;
color: #000;
}
/* Badge Diskon */
.promo-badge {
display: flex;
align-items: center;
color: #1a3c34;
}
.promo-badge .label { font-size: 20px; font-weight: 800; margin-right: 5px; }
.promo-badge .percent { font-size: 60px; font-weight: 900; line-height: 1; }
.unit-box { display: flex; flex-direction: column; font-weight: bold; margin-left: 5px; }
.percent-sign { font-size: 24px; }
.sd { font-size: 12px; }
/* Grid Produk */
.brand-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.brand-card {
background: rgba(255, 255, 255, 0.4); /* Transparan agar BG terlihat sedikit */
padding: 5px;
border-radius: 12px;
display: flex;
flex-direction: column;
}
.product-frame {
background: #1a3c34; /* Warna hijau gelap khas desain */
height: 160px;
border-radius: 10px 10px 0 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 10px;
overflow: hidden;
}
.product-frame img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.brand-footer {
background: white;
padding: 10px 5px;
border-radius: 0 0 10px 10px;
text-align: center;
flex-grow: 1;
}
.brand-logo-img {
font-weight: bold;
font-size: 12px;
margin-bottom: 8px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.discount-tag {
background: #e1f5fe;
color: #0288d1;
font-size: 10px;
font-weight: bold;
padding: 6px 2px;
border-radius: 4px;
}
.discount-tag.special {
background: #e3f2fd;
color: #1565c0;
}
/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
.brand-grid {
grid-template-columns: repeat(2, 1fr); /* 2 kolom di tablet/HP lebar */
}
.banner-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.header-left {
flex-direction: column;
gap: 5px;
}
}
@media (max-width: 480px) {
.wrap-step {
width: 100%;
padding: 17px!important;
}
.step-card {
width: 100%!important;
}
.arrow-next {
right: 35px!important;
}
.arrow-prev {
left: 35px !important;
}
.promo-wrapper {
width: 93%!important;
margin: auto;
}
.wrap-user-komunitas .container-width {
padding: 0 10px!important;
}
.site-content {
padding: 21PX!important;
}
.container.wrapconten {
width: 100% !important;
}
.card-list {
padding: 0px!important;
}
.brand-grid {
grid-template-columns: 1fr; /* 1 kolom di HP kecil */
}
.wrap-komunitas {
padding: 15px;
}
.promo-badge .percent { font-size: 45px; }
}
/* KOMUNITAS */
.sidebar-left {
overflow: visible !important;
}
/* Jika ada pembungkus di luar sidebar-left, pastikan juga visible */
.site-content, .content-area, .wrapper {
overflow: visible !important;
}
/* Ganti .site-main dengan class pembungkus kolom kiri dan kanan Anda */
.site-main {
display: flex;
align-items: stretch;
}
.sidebar-left {
height: 100%; /* Atau pastikan parent layout-nya menggunakan display: flex */
min-height: 100vh;
}
.sticky-element {
position: -webkit-sticky;
position: sticky;
/* Ubah angka ini sesuai tinggi header Anda + jarak aman */
top: 100px;
z-index: 10;
align-self: flex-start;
}
.flex.items-center {
z-index: 123;
}
#preview-scroll-container::-webkit-scrollbar {
width: 4px;
}
#preview-scroll-container::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 10px;
}
.scroll-smooth {
scroll-behavior: smooth;
}
p.text-caption {
font-size: 11px;
font-style: italic;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
p.feed-excerpt {
font-size: 13px;
font-weight: 500;
line-height: 16px;
}
/* 1. Pastikan posisi relatif pada item menu agar badge menempel di sini */
.menu-badge-new {
position: relative;
}
/* 2. Membuat elemen "NEW" */
.menu-badge-new::after {
content: "NEW"; /* Teks yang muncul */
position: absolute; /* Posisi bebas */
top: -12px; /* Geser ke atas (sesuaikan angka ini) */
left: 82%; /* Posisi tengah horizontal */
transform: translateX(-50%); /* Memastikan benar-benar di tengah */
/* Styling Tampilan Badge */
background-color: #FFD700;
color: #000000;
font-size: 9px; /* Ukuran font kecil */
font-weight: bold;
padding: 2px 5px; /* Jarak dalam badge */
border-radius: 4px; /* Sudut membulat */
line-height: 1; /* Jarak baris rapat */
white-space: nowrap; /* Mencegah teks turun baris */
pointer-events: none; /* Agar klik tetap tembus ke menu */
z-index: 10;
font-weight: 400;
}
/*
.menu-badge-new::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
border-width: 4px 4px 0;
border-style: solid;
border-color: #ff0000 transparent transparent transparent;
} */
/* BREADCOME*/
/* Container Utama Header */
.lariaja-page-header {
background-color: #FFD700;
padding: 120px 0px 50px 20px;
text-align: center;
color: #ffffff;
margin-bottom: 40px;
width: 100%;
}
.lariaja-header-container {
max-width: 1200px;
margin: 0 auto;
}
/* Styling Judul Halaman */
.lariaja-page-header h1 {
margin: 0 0 15px 0;
font-size: 36px;
font-weight: 700;
color: #000000;
text-transform: capitalize; /* Huruf depan besar */
}
/* Styling Breadcrumbs */
.lariaja-breadcrumbs {
font-size: 14px;
color: #000000; /* Warna abu-abu muda */
}
.lariaja-breadcrumbs a {
color: #000000;
text-decoration: none;
transition: 0.3s;
font-weight: 500;
}
.lariaja-breadcrumbs a:hover {
color: #f1c40f; /* Warna kuning emas saat di-hover (branding LariAja) */
text-decoration: underline;
}
.lariaja-breadcrumbs .separator {
margin: 0 8px;
color: #888;
}
.lariaja-breadcrumbs .current {
color: #000000;
text-decoration: underline;
}
/* BREADCOME*/
/* Header tetap fixed */
header {
top: 0;
width: 100%;
z-index: 999;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
/* Body atau Container Konten diberikan padding atas sesuai tinggi header */
body {
/* Default fallback jika JS gagal (misal 100px) */
padding-top: 0px;
/* Nilai dinamis dari JS */
/* padding-top: var(--header-height); */
font-family: 'Lato', sans-serif;
}
.header-container {
/* Mengganti fixed dengan sticky */
position: sticky;
top: 0;
z-index: 1000; /* Pastikan di atas layer lain */
width: 100%;
background-color: white; /* Penting agar transparan tidak bocor */
}
.p-8.text-center {
padding: 10px !important;
margin: 0px;
}
.space-header {
height: 100%;
display: inline-block;
}
div#popup-content img {
display: block;
height: auto !important;
width: 48% !important;
max-width: 294px;
margin: 40px auto !important;
object-fit: contain; /* Memastikan gambar tidak terpotong */
}
div#popup-content h3 {
font-size: 16px !important;
padding-top: 30px;
font-weight: 500 !important;
line-height: 25px !important;
color: #000000 !important;
}
main#primary {
padding: 0px;
width: 100%;
background-color: #f3f3f3;
margin: auto;
display: block;
}
section.bg-slate-50.mt-20.py-24 {
margin: 0px !important;
}
.top-bar.hide-mobile {
display: none;
}
.mid-bar {
padding: 21px 0px 0px;
}
.mt-20.py-10.border-t.border-slate-100.flex.flex-col.md\:flex-row.md\:items-center.justify-between.gap-6 {
padding: 11px !important;
}
.filter-row.grid-filters-three .filter-col {
width: 100%;
}
header.pt-20.pb-12.md\:pt-32.md\:pb-20.bg-slate-50\/50 {
padding: 2rem !important;
}
/* Container Menu */
/* Container Utama */
.user-profile-dropdown-container {
position: relative;
display: inline-block;
padding: 0px 0px;
top: 0px;
}
.marquee-container {
position: relative;
width: 100%;
background-color: #2e2e2e;
color: white;
white-space: nowrap;
overflow: hidden;
/* --- BAGIAN TRANSISI --- */
/* Kita gunakan max-height agar bisa menyusut halus dari tinggi berapapun ke 0 */
max-height: 100px;
opacity: 1;
padding: 7px 0; /* Padding awal */
/* Animasi transisi selama 0.8 detik */
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Class tambahan saat tombol close diklik */
.marquee-container.closed {
opacity: 0; /* Menjadi transparan */
max-height: 0; /* Tinggi menjadi 0 */
padding: 0; /* Hilangkan padding agar benar-benar tipis */
pointer-events: none; /* Agar tidak bisa diklik saat transparan */
}
.marquee-track {
display: flex;
width: max-content;
animation: scroll-left 20s linear infinite;
}
.marquee-item {
display: flex;
align-items: center;
padding: 0 40px;
font-size: 11px;
font-weight: 500;
}
.marquee-item i {
margin-left: 10px;
font-size: 20px;
}
.close-btn {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: #fff;
font-size: 24px;
font-weight: bold;
cursor: pointer;
z-index: 100;
opacity: 0.7;
transition: opacity 0.3s;
}
.close-btn:hover {
opacity: 1;
color: #ff6b6b;
}
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* user yang baru bergabung*/
/* Container Utama Popup */
#lariaja-notification-popup {
position: fixed;
bottom: 20px;
left: 20px;
background: #fff;
border-radius: 50px; /* Membuat bentuk kapsul bulat */
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
padding: 10px 20px 10px 10px; /* Padding kanan lebih besar untuk close btn */
z-index: 99999; /* Pastikan paling atas */
max-width: 320px;
font-family: sans-serif;
border: 1px solid #f0f0f0;
/* Transisi Animasi */
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efek membal (bouncy) */
}
/* State Sembunyi (Geser ke bawah & hilang) */
.notification-hide {
opacity: 0;
visibility: hidden;
transform: translateY(100px) scale(0.8);
}
/* State Muncul (Normal) */
.notification-show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Layout Isi */
.notif-content {
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
/* Gambar Avatar Bulat */
#notif-img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f1c40f; /* Kuning Brand LariAja */
}
/* Teks Wrapper */
.notif-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.notif-text .name {
font-size: 13px;
font-weight: 700;
color: #1a237e; /* Biru Tua */
}
.notif-text .action {
font-size: 12px;
color: #444;
}
.notif-text .time {
font-size: 10px;
color: #888;
margin-top: 2px;
}
/* Tombol Close (X) Kecil */
.notif-close {
position: absolute;
top: -5px;
right: -10px;
background: #eee;
border: none;
color: #666;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 12px;
cursor: pointer;
line-height: 18px;
text-align: center;
padding: 0;
}
.notif-close:hover {
background: #ccc;
color: #000;
}
/* Mobile Responsive: Pindah ke atas atau perkecil */
@media (max-width: 480px) {
#lariaja-notification-popup {
bottom: 10px;
left: 10px;
right: 10px; /* Agar tidak terlalu lebar di HP */
max-width: none;
width: auto;
}
}
/* user yang baru bergabung*/
/* Container Pembungkus */
.wrap-step {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding:20px 0px;
}
/* Kartu Individual */
.step-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px; /* Sedikit lebih bulat sudutnya */
padding: 50px 20px 30px 20px;
text-align: center;
position: relative;
flex: 1;
min-width: 280px;
max-width: 350px;
margin-top: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Bayangan awal tipis */
/* PENTING: Properti transisi untuk kehalusan animasi */
transition: all 0.3s ease-in-out;
cursor: default; /* Agar kursor tidak berubah jadi teks */
}
/* Lingkaran Angka */
.step-number {
width: 70px;
height: 70px;
border: 2px solid #FFD700; /* Border sedikit lebih tebal agar tegas */
background-color: #fff;
border-radius: 50%;
color: #FFD700;
font-size: 32px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -34px;
left: 50%;
/* State transform awal (penting untuk di-override saat hover nanti) */
transform: translateX(-50%) scale(1);
/* PENTING: Properti transisi untuk kehalusan animasi warna dan scale */
transition: all 0.3s ease-in-out;
z-index: 2; /* Memastikan angka di atas segalanya */
}
/* Judul Langkah */
.step-card h3 {
color: #000000;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px;
line-height: 1.4;
transition: color 0.3s ease;
margin-top: 30px;
}
/* Deskripsi Langkah */
.step-card p {
color: #7a7a7a;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
}
/* --- TAMBAHAN HOVER ANIMATION --- */
/* 1. Efek saat kartu di-hover */
.step-card:hover {
/* Mengangkat kartu ke atas sebanyak 10px */
transform: translateY(-10px);
/* Membuat bayangan lebih besar dan lembut di bawahnya */
box-shadow: 0 20px 30px rgba(0,0,0,0.1);
border-color: transparent; /* Opsional: menghilangkan border agar bayangan lebih bersih */
}
/* 2. Efek pada lingkaran angka SAAT KARTU di-hover */
/* Selector ini berarti: "Cari .step-number yang berada di dalam .step-card yang sedang di-hover" */
.step-card:hover .step-number {
background-color: #FFD700; /* Ubah background jadi oranye */
color: #ffffff; /* Ubah teks angka jadi putih */
/* PENTING: Kita harus tetap menyertakan translateX(-50%) agar posisinya tetap di tengah,
lalu tambahkan scale(1.1) untuk efek membesar sedikit.
*/
transform: translateX(-50%) scale(1.15);
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4); /* Tambah efek glowing oranye */
}
/* Responsiveness */
@media (max-width: 768px) {
.wrap-step {
flex-direction: column;
align-items: center;
gap: 50px; /* Jarak vertikal lebih besar di HP */
}
.step-card {
width: 100%;
max-width: 400px;
/* Di layar sentuh, mungkin kita ingin mengurangi efek angkat agar tidak aneh saat di-tap */
transform: none !important;
}
/* Tetap jalankan animasi warna di HP saat di-tap */
.step-card:hover .step-number, .step-card:active .step-number {
background-color: #FFD700;
color: #ffffff;
transform: translateX(-50%) scale(1.1);
}
}
/* SEARCH */
/* --- CONTAINER UTAMA DROPDOWN --- */
/* Styling Kartu di Popup */
.event-card {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 8px;
transition: background 0.2s;
background: #f9f9f9;
margin-bottom: 8px; /* Jarak antar kartu */
}
.event-card:hover {
background: #eef2ff; /* Highlight Biru Muda saat hover */
}
.event-img {
width: 40px;
height: 40px;
border-radius: 6px;
background-size: cover;
background-position: center;
background-color: #ddd;
flex-shrink: 0;
}
.event-info-mini {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.evt-title {
font-size: 13px;
font-weight: 600;
color: #333;
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 1; /* Potong judul jika kepanjangan */
-webkit-box-orient: vertical;
overflow: hidden;
}
.evt-dist {
font-size: 11px;
color: #d35400; /* Warna Oranye untuk jarak */
font-weight: 500;
}
.empty-state-mini {
padding: 10px;
color: #666;
font-size: 12px;
text-align: center;
background: #f5f5f5;
border-radius: 6px;
}
/* State Aktif (Saat muncul) */
.search-box-wrapper.active .search-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0); /* Tetap di tengah (X-50%) dan turun ke posisi normal (Y0) */
}
/* --- LAYOUT ISI KONTEN (GRID 2 KOLOM) --- */
.dropdown-inner {
display: grid;
grid-template-columns: 1fr 2fr; /* Kiri (1 bagian), Kanan (2 bagian lebih lebar) */
gap: 40px; /* Jarak antar kolom */
text-align: left;
}
/* Judul Section (Pencarian Populer / Event Terdekat) */
.dropdown-section h4 {
font-size: 12px;
color: #999;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* List Pencarian Populer */
.dropdown-section ul li {
padding: 15px 0;
font-size: 15px;
color: #333;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
gap: 10px;
}
.dropdown-section ul li i {
color: #ccc;
}
/* Grid untuk Event Cards (Kolom Kanan) */
.event-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 kolom event ke samping */
gap: 15px;
}
.event-card {
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
padding: 10px;
transition: 0.2s;
text-align: center;
}
.event-card:hover {
border-color: #ffc107; /* Warna kuning lari aja */
transform: translateY(-3px);
}
.event-img {
height: 80px;
background-color: #f4f4f4;
border-radius: 6px;
margin-bottom: 8px;
background-image: url('path-to-placeholder.jpg'); /* Opsional */
background-size: cover;
}
.event-card span {
font-size: 13px;
font-weight: 600;
display: block;
color: #333;
letter-spacing: 0px;
}
/* --- OVERLAY BLUR --- */
.search-overlay {
position: fixed; /* Menutup satu layar penuh */
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5); /* Warna hitam transparan */
backdrop-filter: blur(8px); /* Efek Blur yang lebih kuat */
-webkit-backdrop-filter: blur(8px);
/* State Awal: Hilang */
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
/* Z-Index: Di bawah Search Box, tapi di atas konten lain */
z-index: 998;
}
/* State Aktif (Dikontrol JS) */
.search-overlay.active {
opacity: 1;
visibility: visible;
}
style attribute {
color: #FFD700!important;
}
.fa-magnifying-glass:before, .fa-search:before {
content: "\f002";
color: #000000 !important;
}
/* PENTING: Search Wrapper harus di atas Overlay */
.search-box-wrapper {
position: relative;
z-index: 1000; /* Harus lebih besar dari 998 */
}
/* 1. Paksa warna teks yang Anda ketik menjadi Hitam */
#mainSearch {
color: #333 !important;
font-weight: 500;
font-size: 13px;
opacity: 1 !important; /* Pastikan tidak transparan */
}
/* 2. Paksa warna teks Animasi (Placeholder) menjadi Abu-abu */
#mainSearch::placeholder {
color: #555 !important; /* Warna abu gelap */
opacity: 1 !important; /* Wajib untuk Firefox */
}
/* Opsional: Untuk browser Edge/IE lama */
#mainSearch::-ms-input-placeholder {
color: #555 !important;
}
/* 3. Pastikan teks rata tengah secara vertikal */
.search-input-group {
display: flex;
align-items: center;
}
/* SEARCH */
footer.lariaja-footer {
background-color: #272727!important;
color: #ffffff!important;
}
.footer-column a, .footer-column p {
color: #9f9f9f!important;
}
/* --- Wrapper Utama --- */
.region-badge-count {
background: #FFD700!important;
color: #000000!important;
}
.dropdown-section a {
color: #404040;
font-size: 13px;
}
.wrap-user-komunitas {
padding:10px 0;
background-color: #fff;
font-family: 'Segoe UI', sans-serif;
}
.wrap-user-komunitas .container-width {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* --- BAGIAN 1: GRID 3 LANGKAH --- */
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.step-card {
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
transition: transform 0.3s;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
border-color: #FFD700;
}
.step-icon {
width: 60px;
height: 60px;
border: 2px solid #FFD700;
color: #FFD700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px;
}
.step-content h3 {
color: #FFD700;
font-size: 16px;
font-weight: 800;
margin-bottom: 10px;
text-transform: uppercase;
}
.step-content p {
color: #666;
font-size: 14px;
line-height: 1.5;
}
/* --- PEMISAH --- */
.section-divider h3 {
font-size: 20px;
font-weight: 700;
color: #333;
margin-bottom: 20px;
padding-left: 10px;
border-left: 4px solid #FFD700;
}
/* --- BAGIAN 2: MEMBER SCROLL (Horizontal) --- */
.members-scroll-wrapper {
display: flex;
gap: 20px;
overflow-x: auto; /* Scroll menyamping */
padding-bottom: 20px; /* Ruang untuk scrollbar */
scrollbar-width: thin; /* Firefox */
scrollbar-color: #FFD700 #eee;
}
/* Custom Scrollbar Webkit */
.members-scroll-wrapper::-webkit-scrollbar {
height: 6px;
}
.members-scroll-wrapper::-webkit-scrollbar-track {
background: #eee;
border-radius: 3px;
}
.members-scroll-wrapper::-webkit-scrollbar-thumb {
background-color: #FFD700;
border-radius: 3px;
}
/* Kartu Member */
.member-item {
max-width: 60px; /* Lebar fix agar tidak gepeng */
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.member-avatar img {
width: 110px;
height: 60px;
margin-top: 7px;
position: relative;
z-index: 2;
margin-bottom: 20px;
}
.member-info h4 {
text-align: center;
margin:auto!important;
font-size: 16px;
font-weight: 600;
margin: 0 0 5px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.member-info .join-date {
font-size: 12px;
color: #999;
}
/* Tombol Follow */
.btn-follow-action {
display: inline-block;
padding: 6px 20px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.btn-follow-action.follow-link {
background-color: #FFD700;
color: #000;
}
.btn-follow-action.follow-link:hover {
background-color: #FFD700;
color: #fff;
}
.btn-follow-action.unfollow-link {
background-color: #eee;
color: #666;
border: 1px solid #ddd;
}
/* Kartu Lihat Semua */
.see-all-members-card {
min-width: 120px;
background: #FFD700;
color: #fff;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: bold;
text-align: center;
transition: background 0.2s;
}
.see-all-members-card:hover {
background: #e67e00;
}
.see-all-members-card .icon-arrow {
font-size: 24px;
margin-bottom: 5px;
}
/* Discussion Section */
.community-discussion {
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid #f3f4f6;
}
.discussion-title { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
.comment-respond-custom {
display: flex;
gap: 12px;
background: #f9fafb;
padding: 15px;
border-radius: 12px;
margin-bottom: 25px;
}
.comment-form-mini { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.comment-form-mini textarea {
width: 100%;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px;
font-size: 14px;
resize: none;
min-height: 60px;
}
.btn-send-comment {
align-self: flex-end;
background: #f03e3e;
color: white;
border: none;
padding: 6px 18px;
border-radius: 20px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
/* Comments List */
.comment-item-pro {
display: flex;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #f3f4f6;
}
.c-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.c-meta strong { font-size: 14px; color: #1a1a1b; }
.c-meta span { font-size: 11px; color: #717172; }
.c-text { font-size: 14px; color: #4b5563; line-height: 1.5; }
.no-comments { text-align: center; color: #9ca3af; padding: 20px; font-style: italic; }
.main-featured-img img {
width: 100%;
height: auto;
}
.feed-actions {
display: flex;
justify-content: space-between;
padding-top: 12px;
border-top: 1px solid #f0f2f5;
margin-top: 15px;
}
.action-group { display: flex; gap: 8px; }
.action-btn {
background: #f7f8f9;
border: none;
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
color: #636466;
cursor: pointer;
transition: 0.2s;
}
.action-btn:hover { background: #eef0f2; color: #2e69ff; }
.action-btn i { margin-right: 5px; }
/* Inline Comments */
.inline-comments-area { margin-top: 10px; padding: 10px; background: #fafafa; border-radius: 8px; }
.inline-comment-form { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.inline-comment-form input {
flex: 1; border: 1px solid #ddd; border-radius: 20px;
padding: 6px 15px; font-size: 13px;
}
.mini-comment { font-size: 13px; margin-bottom: 6px; line-height: 1.4; }
.mini-comment strong { color: #282829; margin-right: 5px; }
.mini-comment span { color: #444; }
/* Share UI */
.share-trigger:hover { color: #059669; }
.notif-item { font-size: 12px; padding: 10px; border-bottom: 1px solid #eee; }
.notif-item.unread { background: #fff5f5; border-left: 3px solid #f03e3e; }
.mini-comment-form { display: flex; gap: 5px; margin-bottom: 10px; }
.input-comment-ajax { flex: 1; border-radius: 20px; border: 1px solid #ddd; padding: 5px 15px; font-size: 13px; }
.btn-ajax-send { background: #f03e3e; color: #fff; border: none; border-radius: 20px; padding: 5px 15px; cursor: pointer; }
.comment-row { font-size: 13px; margin-bottom: 5px; padding: 5px; background: #f9f9f9; border-radius: 5px; }
.action-btn.voted {
color: #f03e3e; /* Warna merah saat sudah dipilih */
background: #fff5f5;
border-color: #feb2b2;
cursor: default;
}
.inline-comments-wrapper {
background: #f8f9fa;
border-top: 1px solid #eee;
padding: 15px;
border-radius: 0 0 12px 12px;
}
.comment-form-container {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.ajax-comment-form-pro {
flex: 1;
display: flex;
background: #333333;
border: 1px solid #ddd;
border-radius: 20px;
padding: 5px 5px 5px 15px;
}
.ajax-comment-form-pro input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
color: #ff4700;
}
.ajax-comment-form-pro button {
background: #f03e3e;
color: #fff;
border: none;
padding: 6px 15px;
border-radius: 15px;
font-weight: 600;
cursor: pointer;
}
/* Style daftar komentar semua user */
.comment-user-row {
display: flex;
gap: 10px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #ececec;
}
.comment-user-row:last-child { border: none; }
.c-user-meta strong { font-size: 13px; color: #1a1a1b; display: block; }
.c-user-meta p { font-size: 14px; color: #ffffff; margin: 2px 0 0; line-height: 1.4; }
/* Pastikan sidebar memiliki tinggi yang cukup */
.sidebar-right {
height: 100%;
}
/* Widget yang ingin dibuat fixed saat scroll */
.widget-box.suggest-widget {
position: -webkit-sticky;
position: sticky;
top: 300px; /* Jarak dari atas saat fixed */
z-index: 10;
transition: all 0.3s ease;
}
.menu-item:hover {
background: rgba(255,255,255,0.5);
color: #f03e3e !important;
}
.menu-item.is-active {
pointer-events: none; /* Menu yang aktif tidak bisa diklik ulang */
}
.leaderboard-list {
list-style: none;
padding: 0;
}
.leaderboard-item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #eee;
align-items: center;
}
/* Menonjolkan Peringkat 1 */
.top-rank-1 {
background-color: #fff9c4; /* Warna emas muda */
font-weight: bold;
border-radius: 8px;
border: 1px solid #fbc02d;
}
.rank-number {
width: 30px;
font-weight: bold;
color: #555;
}
.top-rank-1 .rank-number {
color: #fbc02d; /* Emas */
font-size: 1.2em;
}
.activity-score {
background: #f0f0f0;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.85em;
}
/* Kontainer Utama area komentar agar tidak pecah layout */
.inline-comments-wrapper {
background: #333333;
border-top: 1px solid #f0f2f5;
padding: 16px;
border-radius: 0 0 12px 12px;
}
/* Penyelarasan Input dan Avatar */
.comment-form-container {
display: flex !important;
align-items: center !important;
gap: 12px;
margin-bottom: 20px;
}
/* Gaya Input Bar ala Quora */
.ajax-comment-form-pro {
flex: 1;
display: flex !important;
align-items: center;
background: #333333;
border-radius: 24px;
padding: 4px 4px 4px 16px;
border: 1px solid transparent;
}
.ajax-comment-form-pro input {
border: none !important;
background: transparent !important;
box-shadow: none !important;
font-size: 14px !important;
height: 34px !important;
flex: 1;
outline: none !important;
}
/* Tombol Kirim yang Tajam */
.ajax-comment-form-pro button {
background: #f03e3e;
color: #fff;
border: none;
padding: 6px 16px;
border-radius: 18px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: 0.2s;
}
.ajax-comment-form-pro button:hover { background: #c92a2a; }
/* List Komentar */
.comment-user-row { display: flex; gap: 12px; margin-bottom: 15px; border-bottom: 1px solid #3f3f3f; padding-bottom: 10px; }
.c-user-meta strong { font-size: 13px; color: #1a1a1b; display: block; }
.c-user-meta p { font-size: 14px; color: #9a9a9a; margin: 3px 0 0; line-height: 1.4; }
.c-avatar img {
border-radius: 100%;
}
ul.comment-custom-list li {
border-bottom: 1px solid #333333 !important;
}
/* Pemicu */
.user-trigger {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.user-avatar-header img {
border-radius: 50%;
border: 1px solid #ddd;
}
/* Menu Dropdown (Sembunyi) */
.profile-dropdown-menu {
right: -59px !important;
top: 10px !important;
position: absolute;
top: 100%; /* Muncul tepat di bawah container */
right: 0;
width: 260px;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
visibility: hidden; /* Menggunakan visibility + opacity agar transisi halus */
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 9999;
padding: 15px 0;
}
/* EFEK HOVER */
.user-profile-dropdown-container:hover .profile-dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
/* Styling Isi Dropdown */
.dropdown-header {
display: flex;
align-items: center;
gap: 12px;
padding: 0 15px 15px;
border-bottom: 1px solid #eee;
}
.header-avatar img { border-radius: 50%; }
.header-info strong { display: block; font-size: 14px; color: #002f34; }
.btn-edit-profile {
font-size: 12px;
color: #002f34;
text-decoration: underline;
font-weight: bold;
}
.dropdown-links { list-style: none; padding: 0; margin: 0; }
.dropdown-links li a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
color: #002f34;
text-decoration: none;
font-size: 14px;
}
.dropdown-links li a:hover { background-color: #f2f4f5; }
.logout-item { border-top: 1px solid #eee; margin-top: 5px; }
.password-wrapper { position: relative; }
.toggle-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #999;
z-index: 10;
}
.form-group input { padding-right: 45px; } /* Beri ruang untuk ikon */
.btn-primary-story {
display: inline-flex;
align-items: center;
gap: 15px;
background: #0f172a; /* Warna gelap elegan */
color: #ffffff !important;
padding: 12px 12px 12px 35px;
border-radius: 50px;
text-decoration: none !important;
font-weight: 700;
font-size: 16px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.2);
border: 2px solid transparent;
}
.btn-primary-story .icon-circle {
width: 45px;
height: 45px;
background: #FFD700; /* Warna kuning aksen Lariaja */
color: #0f172a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Efek Hover */
.btn-primary-story:hover {
transform: translateY(-5px);
background: #1e293b;
box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.3);
padding-right: 20px;
}
.btn-primary-story:hover .icon-circle {
transform: rotate(-45deg) scale(1.1);
background: #ffffff;
}
.btn-primary-story:active {
transform: scale(0.95);
}
/* CSS UNTUK FIX PROMO SLIDER */
.promo-container {
position: relative;
max-width: 100%;
overflow: hidden; /* Sembunyikan slide yang di luar layar */
border-radius: 16px;
}
.promo-wrapper {
display: flex; /* Berbaris ke samping */
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
}
.promo-slide {
min-width: 100%; /* Satu slide memenuhi lebar container */
flex-shrink: 0;
}
.promo-slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.user-avatar-header img {
width: 40px;
height: 40px;
}
.sticky-booking-card {
position: sticky;
top: 120px;
z-index: 40;
}
.promo-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.promo-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 99999; /* Pastikan angka ini sangat tinggi */
}
.pb-6 {
padding-bottom: 1.5rem;
padding-top: 24px;
padding-left: 27px;
}
.bg-white.border.border-gray-200.rounded-2xl.shadow-xl.overflow-hidden .p-8 {
display: none;
}
.mb-16.bg-white.border.border-slate-100.rounded-\[2\.5rem\].p-8.shadow-sm {
display: none;
}
.container.wrapconten {
width: 80%;
margin: auto;
display: flow;
max-width: 100% !important;
}
.filter-row.grid-filters-three {
display: flex;
width: 100%;
}
/* Menargetkan semua list item menu */
#main-menu li {
position: relative;
display: inline-block;
margin-right:0px; /* Jarak antar menu */
}
/* Style default link menu */
#main-menu li a {
text-decoration: none;
color: #ffffff;
font-weight: 600;
padding-bottom: 8px; /* Ruang untuk garis bawah */
display: inline-block;
transition: color 0.3s ease;
}
/* --- STATE AKTIF & HOVER --- */
/* WordPress class otomatis untuk halaman aktif */
#main-menu li.current-menu-item a,
#main-menu li.current_page_item a,
#main-menu li a:hover {
color: #000; /* Warna teks saat aktif/hover */
}
/* Membuat garis bawah menggunakan pseudo-element ::after */
#main-menu li.current-menu-item a::after,
#main-menu li.current_page_item a::after,
#main-menu li a:hover::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background-color: #FFD700;
border-radius: 2px 2px 0px 0px;
}
/* --- PERBAIKAN RESPONSIVE GRID & CARD --- */
@media (max-width: 768px) {
.event-grid {
grid-template-columns: repeat(2, 1fr); /* 2 kolom di mobile agar tidak terlalu kecil */
gap:5px;
padding: 10px;
}
.event-card .event-poster img,
.event-card .event-poster div {
height: 150px !important; /* Tinggi gambar lebih pendek di mobile */
}
.event-info {
padding: 12px !important;
}
.event-info h3 {
font-size: 13px !important;
height: 36px; /* Batasi tinggi judul */
overflow: hidden;
}
}
/* --- MOBILE VERSION --- */
@media (max-width: 480px) {
.btn-search {
width: 45px;
height: 37px!important;
}
.rd-header-btns {
line-height: 16px;
padding-left: 12px;
}
img.avatar.avatar-80.photo {
height: 55px;
width: 78px;
object-fit: cover !important;
}
.news-input-wrap input {
font-size: 12px;
}
span.btn-text {
font-size: 12px;
}
.hero-section {
top: -143px;
width: 100%;
}
.top-nav .wrap-logo img {
height: 37px!important;
}
.event-tag-item {
font-size: 12px!important;
}
.search-bar input {
font-size: 13px!important;
}
.container.menumobile {
display: block!important;
text-align: left;
}
.marquee-container {
padding: 7px 0!important;
}
.logo {
text-align: center;
margin: auto;
}
.custom-logo-link img {
height: 43px!important;
width: auto;
text-align: center;
}
.promo-wrapper {
padding: 12px 0px 0px 0px!important;
}
.promo-slide {
flex: 0 0 80%!important;
min-width: 97%!important;
aspect-ratio: 0 / 2!important;
transform: scale(0.8);
filter: blur(1px);
}
.progress-wrap {
bottom: 46px;
}
.step-card {
width: 87%;
}
.single-event-lari .container.mx-auto.px-6.md\:px-24.py-12 {
padding: 40px 0px;
width: 90%;
margin: auto;
}
.space-header {
height:62px!important;
}
.promo-arrow {
top: 55% !important;
width: 20px !important;
height: 20px !important;
}
#main-menu li a {
padding:0px!important;
}
.container.menumobile {
display: flow;
}
.community-members-section {
padding: 12px 0!important;
background-color: #f8fafc;
}
.container.wrapconten {
padding: 0px!important;
}
.event-grid {
grid-template-columns: 1fr; /* 1 kolom untuk HP kecil jika diperlukan, atau tetap 2 */
}
}
/* --- PERBAIKAN SLIDER RESPONSIVE --- */
@media (max-width: 768px) {
.vacation-card {
min-width: 200px;
height: 280px;
}
.slide-arrow {
right: 5px;
width: 35px;
height: 35px;
font-size: 14px;
}
.section-title {
font-size: 20px;
padding: 0 10px;
}
}
/* --- FIX BURGER MENU (NAVIGASI MOBILE) --- */
/* Pastikan selector class ini sesuai dengan class yang ada di header.php Anda */
/* CSS TAMBAHAN UNTUK MOBILE MENU - DIPERBAIKI */
.mobile-menu-trigger {
display: none;
flex-direction: column;
justify-content: space-around; /* Lebih elegan daripada space-between */
width: 25px;
height: 18px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1002;
}
.mobile-menu-trigger .bar {
width: 100%;
height: 2px;
background-color: #333;
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); /* Transisi smooth */
}
/* Responsive Breakpoint */
@media (max-width: 991px) {
.mid-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-menu-trigger {
display: flex;
order: -1; /* Posisi di kiri logo jika diperlukan */
}
/* Penyesuaian Navigasi */
.nav-bar {
position: fixed;
top: 0;
left: -100%; /* Sembunyikan di luar layar kiri */
width: 80%; /* Tidak full agar elegan */
max-width: 300px;
height: 100vh;
box-shadow: 5px 0 15px rgba(0,0,0,0.1);
z-index: 1000;
transition: all 0.4s ease-in-out;
display: block !important; /* Overwrite display none */
padding-top: 80px;
}
.nav-bar.is-active {
left: 0; /* Geser ke dalam layar */
}
/* Overlay latar belakang saat menu terbuka */
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.menu-overlay.is-active {
opacity: 1;
visibility: visible;
}
/* Styling List Menu di Mobile */
.nav-bar ul {
flex-direction: column;
padding: 0 5px;
}
.nav-bar ul li {
border-bottom: 1px solid #f5f5f5;
width: 100%;
}
.nav-bar ul li a {
display: block;
padding: 15px 0;
color: #333;
font-weight: 500;
}
/* Animasi Burger jadi X */
.mobile-menu-trigger.open .bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.mobile-menu-trigger.open .bar:nth-child(2) {
opacity: 0;
transform: translateX(-20px);
}
.mobile-menu-trigger.open .bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Sembunyikan elemen yang mengganggu di mobile */
.search-container {
margin: 10px 0;
width: 100%;
order: 3; /* Pindah ke bawah logo/burger */
}
.mid-bar {
padding:0px;
}
.user-actions {
gap: 5px;
}
.user-greeting { display: none !important; }
.btn { font-size: 11px; padding: 8px 12px; }
}
/* REVISED EVENT GRID & CARD */
.event-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10px; /* Offset padding kolom */
}
.event-card-column {
padding: 5px;
flex: 0 0 33.333%; /* 3 Kolom Desktop */
max-width: 100%;
display: flex;
}
.event-card-new {
background: #fff;
border-radius: 12px;
border: 1px solid #edf2f7;
width: 100%;
text-decoration: none !important;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.event-card-new:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.card-thumb-container {
position: relative;
height: 254px;
width: 100%;
}
.card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-event-lari .container.mx-auto.px-6.md\:px-24.py-12 {
padding: 40px 0px;
}
.event-badge {
position: absolute;
top: 10px;
left: 10px;
background: #FFD700;
color: #000000;
padding: 4px 10px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
z-index: 2;
text-transform: uppercase;
}
.card-content-new {
padding: 0px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-meta-top {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 11px;
color: #64748b;
font-weight: 600;
}
.card-title-new {
font-size: 15px;
color: #1e293b;
margin: 0 0 0px 0;
font-weight: 600;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 42px; /* Menjaga tinggi konsisten */
}
.card-distance-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom:5px;
margin-top: 7px;
}
#gallery-modal.active {
display: flex;
animation: fadeIn 0.3s ease;
z-index: 11111;
}
.flex.flex-col a {
font-size: 13px;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 0px;
}
a.btn-detail {
color: #000000 !important;
background-color: #FFD700 !important;
}
.flex.items-center {
}
.flex.justify-between.text-\[11px\].text-gray-500 {
font-weight: 700;
letter-spacing: 0px;
color: #585858;
}
span.font-semibold.text-slate-700 {
font-size: 13px;
}
.prose.max-w-none.text-gray-600.leading-relaxed.text-lg {
font-size: 15px;
}
span.font-bold.text-slate-800 {
font-size: 15px;
}
.bg-slate-50.p-8.rounded-3xl.border.border-slate-100 {
padding: 10px 18px;
border-radius: 5px;
}
.tag-item-new {
background: #e4ffbf;
color: #475569;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
}
.card-footer-new {
margin-top: auto;
padding-top: 5px;
border-top: 1px solid #f1f5f9;
display: none;
}
.price-label {
display: block;
font-size: 9px;
color: #94a3b8;
text-transform: uppercase;
font-weight: 700;
}
.price-value {
font-size: 14px;
color: #0f172a;
font-weight: 700;
}
/* RESPONSIVE BREAKPOINTS */
@media (max-width: 992px) {
.event-card-column {
flex: 0 0 50%; /* 2 Kolom Tablet */
max-width: 50%;
}
}
@media (max-width: 576px) {
.promo-slide {
/* Slide utama mengambil 80% dari lebar layar */
flex: 0 0 80%;
min-width: 90%;
aspect-ratio: 4 / 2;
transform: scale(0.8);
filter: blur(1px);
}
.event-grid {
padding: 0 5px;
}
.event-card-column {
flex: 0 0 50%; /* Tetap 2 Kolom di Mobile agar rapi */
max-width: 100%;
padding: 6px;
}
.card-thumb-container {
height: 120px;
}
.card-title-new {
font-size: 13px;
height: 36px;
}
.card-content-new {
padding: 10px;
}
.price-value {
font-size: 12px;
}
}
/* NAVIGASI MOBILE FIX */
.menu-toggle {
display: block;
cursor: pointer;
}
@media (max-width: 768px) {
#site-navigation ul {
display: none; /* Sembunyikan default menu */
}
.mobile-menu-active #site-navigation ul {
display: block !important;
background: #fff;
position: absolute;
width: 100%;
left: 0;
z-index: 999;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
}
/* SUGGEST ALAMAT */
.suggested-events-container {
margin: 40px 0;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
}
.suggested-events-container h3 {
margin-bottom: 20px;
font-size: 20px;
border-left: 5px solid #f1c40f; /* Kuning LariAja */
padding-left: 15px;
}
.event-grid-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Grid Responsif */
gap: 20px;
}
.suggested-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.suggested-card:hover {
transform: translateY(-5px);
}
.card-thumb {
height: 120px;
background-size: cover;
background-position: center;
}
.card-info {
padding: 12px;
}
.card-info h4 {
font-size: 14px;
margin: 0 0 5px 0;
line-height: 1.4;
}
.location-badge {
font-size: 12px;
color: #666;
}
.alert-box, .no-event-msg {
padding: 15px;
background: #e3f2fd;
border-radius: 8px;
color: #0d47a1;
}
/* SUGGEST ALAMAT */
h1.text-4xl.md\:text-6xl.font-black.tracking-tight.mb-6.leading-tight.drop-shadow-lg {
font-size: 28px;
}
p.text-slate-400.text-lg.md\:text-xl.max-w-2xl.leading-relaxed.mb-10.font-light {
font-size: 14px;
letter-spacing: 0px;
}
.p-8.flex.flex-col.flex-1 h3.event-title.text-2xl.font-extrabold.text-slate-900.leading-tight.mb-4.group-hover\:text-blue-600.transition-colors.line-clamp-2 {
color: #585858;
font-size: 18px;
font-weight: 600;
}
.bg-white.rounded-3xl.shadow-2xl.border.border-slate-100.p-2.md\:p-8.overflow-hidden.fullwidth {
width: 100%;
}
.container.mx-auto.max-w-6xl.px-6.-mt-16.relative.z-20.fullwidth {
width: 100%;
}
/* Reset & Base Styles */
/* --- UPDATE: CAROUSEL 80% TENGAH & 3 SLIDE TERLIHAT --- */
.promo-slider-section {
padding: 20px 0;
background: #fff;
overflow: hidden;
}
.promo-wrapper {
display: flex;
gap: 0px; /* Jarak antar slide */
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
/* Padding kiri-kanan 10% agar slide samping terlihat (10% + 80% + 10% = 100%) */
padding: 0px 5%;
scroll-snap-type: x mandatory;
align-items: center;
}
.promo-wrapper::-webkit-scrollbar {
display: none;
}
.promo-slide {
/* Slide utama mengambil 80% dari lebar layar */
flex: 0 0 80%;
min-width: 80%;
scroll-snap-align: center;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 32 / 9;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.4;
transform: scale(0.9);
filter: blur(1px);
}
/* Keadaan Aktif (Slide Tengah) */
.promo-slide.active-slide {
opacity: 1;
transform: scale(1);
filter: blur(0);
z-index: 2;
}
.promo-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Navigasi Panah */
.promo-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: white;
border: 1px solid #eee;
border-radius: 50%;
cursor: pointer;
z-index: 10;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
}
.arrow-prev { left: 15px; }
.arrow-next { right: 15px; }
@media (max-width: 768px) {
.promo-wrapper { padding: 10px 5%; }
.promo-slide { flex: 0 0 90%; min-width: 90%; }
}
/* Body spacer */
.new-header {
/* position: fixed; Membuat header tetap di atas */
top: 0;
left: 0;
width: 100%;
z-index: 999;
background: #fff;
transition: all 0.4s ease; /* Transisi halus saat mengecil */
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
height: auto;
}
.new-header {
width: 100%;
}
.container {
max-width: 1200px !important;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0px;
}
/* Top Bar */
.top-bar {
background-color: #f0f0f0;
font-size: 11px;
padding: 8px 0;
}
.top-bar .container {
justify-content: space-between;
}
/* Mid Bar */
.mid-bar {
padding:0px;
background: #fff;
}
.mid-bar .container {
justify-content: space-between;
gap:0px;
padding:12px 0px 0px 0px;
}
.logo {
}
.search-container {
flex-grow: 1;
position: relative;
}
.search-container input {
width: 100%;
padding: 10px 45px 10px 15px;
border: 1px solid #ccc;
border-radius: 25px;
outline: none;
}
.search-container button {
position: absolute;
right: 10px;
top: 49%;
transform: translateY(-50%);
background: black;
color: white;
border: none;
width: 25px;
height: 25px;
border-radius: 50%
}
.user-actions {
display: flex;
gap: 0px;
align-items: center;
}
.user-actions a {
text-decoration: none;
color: #000000;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.btn-apply-filter {
flex: 1;
background: #FFD700 !important
color: #000000!important;
}
.burger-menu {
display: none;
font-size: 20px;
cursor: pointer;
}
/* Nav Bar */
.nav-bar {
padding-bottom: 0px;
}
.nav-bar ul {
list-style: none;
display: flex;
gap: 12px;
margin: 0px;
}
.nav-bar ul li a {
text-decoration: none;
color: #000;
font-weight: 600;
font-size: 14px;
}
/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
.top-bar { display: none; } /* Sembunyikan promo di mobile agar ringkas */
.burger-menu { display: block; }
.user-actions span { display: none; } /* Sembunyikan teks "Masuk/Daftar" */
.search-container {
order: 3; /* Pindah ke bawah logo pada layar sangat kecil */
width: 100%;
max-width: none;
}
.mid-bar .container {
flex-wrap: initial;
}
.nav-bar {
display: none; /* Sembunyikan navigasi utama */
width: 100%;
border-top: 1px solid #eee;
}
.nav-bar.active {
display: block;
}
.nav-bar ul {
flex-direction: column;
padding: 20px;
gap: 15px;
}
}
:root {
--primary-color: #FFD700;
--secondary-color: #6c757d;
--success-color: #28a745;
--accent-color: #f8f9fa;
--text-dark: #2d3436;
--text-light: #636e72;
--shadow: 0 4px 15px rgba(0,0,0,0.08);
--border-radius: 12px;
}
.space {
height: 130px;
}
/* Container Utama */
.progress-wrap {
position: fixed;
right: 30px;
bottom: 30px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 300ms linear;
}
.spasi-news {
height: 120px;
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Lingkaran Progress */
.progress-circle path {
fill: none;
stroke: #FFD700; /* Warna progres */
stroke-width: 4;
box-sizing: border-box;
transition: all 300ms linear;
}
/* Icon Panah */
.arrow-up {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: #FFD700;
}
/* Animasi Smooth Hover */
.progress-wrap:hover {
transform: scale(1.1);
}
.p-6.pt-0.text-slate-600.text-sm.font-medium.leading-relaxed.border-t.border-slate-100.mt-4.bg-white {
margin: 0px;
padding: 12px;
}
.p-5.pt-0.text-gray-600.text-base.leading-relaxed.bg-gray-50\/30 {
font-size: 13px;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
border-radius: 10px;
line-height: 50px;
}
.tracking-widest {
font-size: 12px;
letter-spacing: 0px;
text-align: center;
}
/* Perbaikan Input agar tidak overflow */
.ui-input {
@apply w-full bg-slate-50/50 p-3 rounded-xl border border-slate-200 transition-all font-medium text-slate-800 outline-none text-sm;
box-sizing: border-box; /* Memastikan padding tidak menambah lebar elemen */
}
/* Container utama untuk form agar tidak terlalu mepet */
.glass-card {
overflow: hidden; /* Mencegah elemen dalam keluar jalur */
}
/* Grid perbaikan untuk mobile */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.user-logged-in-wrapper {
gap: 0px !important;
padding: 0px;
margin: 0px;
}
a.btn.btn-outline {
font-size: 15px;
font-weight: 500;
color: #000000;
text-transform: capitalize;
}
.user-logged-in-wrapper a.btn.btn-primary {
font-size: 12px;
font-weight: 500 !important;
}
span.user-greeting {
color: #ffffff;
font-weight: 400 !important;
}
.search-hero-container {
width: 100%;
max-width: 800px;
margin: auto;
z-index: 100;
padding: 0 20px;.bg-white.rounded-3xl.shadow-2xl.border.border-slate-100.p-2.md\:p-8.overflow-hidden.fullwidth {
width: 100%;
}
.container.mx-auto.max-w-6xl.px-6.-mt-16.relative.z-20.fullwidth {
width: 100%;
}
bottom: 40px;
left: 10%;
}
.search-box-wrapper {
position: relative;
}
.search-input-group {
display: flex;
align-items: center;
padding-bottom:0px;
}
.search-input-group input {
background: #ffffff;
outline: none;
color: #101010;
font-size: 12px;
font-weight: 300;
width: 100%;
border: 1px solid #7f7f7f;
line-height: 17px;
}
.search-input-group input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.search-trigger-btn {
background: #FFD700; /* Warna biru BCA/MBSB */
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.2s;
}
.search-trigger-btn:hover {
transform: scale(1.1);
}
/* Panel Hasil Pencarian */
.search-results-panel {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.9);
border-radius: 0 0 15px 15px;
margin-top: 5px;
padding: 25px;
display: none; /* Sembunyi secara default */
animation: slideDown 0.3s ease-out;
border-radius: 20px;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.results-header {
color: #888;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 15px;
}
.results-list {
list-style: none;
padding: 0;
}
.results-list li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
display: block;
padding: 10px 0;
transition: color 0.2s;
}
.results-list li a:hover {
color: #FFD700;
}
/* Responsive Mobile */
@media (max-width: 768px) {
.search-input-group input {
font-size: 1.5rem;
}
.search-trigger-btn {
width: 40px;
height: 40px;
}
}
.control-item {
cursor: pointer;
width: 50px;
}
.control-text {
color: white;
font-size: 12px;
font-weight: 300;
display: block;
margin-top: 8px;
opacity: 0.6;
transition: 0.3s;
}
.control-item.active .control-text {
opacity: 1;
}
.progress-container {
width: 100%;
height: 3px;
background: rgba(255,255,255,0.3);
border-radius: 2px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0%;
background: var(--primary);
}
/* Animasi Progress Bar saat Aktif */
.control-item.active .progress-bar {
animation: progressRun 5s linear forwards;
}
@keyframes progressRun {
from { width: 0%; }
to { width: 100%; }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.promo-slide {
/* Slide utama mengambil 80% dari lebar layar */
flex: 0 0 80%;
min-width: 90%;
aspect-ratio: 4 / 2;
transform: scale(0.8);
filter: blur(1px);
}
.hero-slider { height: 500px; }
.slide-content h2 { font-size: 2rem; }
.slider-controls {
left: 5%;
right: 5%;
width: 90%;
}
.control-item { flex: 1; }
}
/* Pastikan elemen garis memiliki transisi yang halus */
.sliding-line {
position: absolute;
bottom: 0;
height: 4px;
background-color: #0099db;
transition: all 0.45s cubic-bezier(0.65, 0, 0.35, 1);
pointer-events: none;
z-index: 10;
width: 0; /* Default awal 0, akan diisi oleh JS */
left: 0;
}
/* Style teks untuk menu aktif agar lebih menonjol (Opsional) */
.main-nav ul li.current-menu-item a,
.main-nav ul li.current_page_item a {
color: #ffffff !important;
font-weight: 800;
}
:root {
--dark-blue: #002651;
--light-blue: #0099db;
}
/* Container Navigasi */
.main-nav ul {
display: flex;
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
/* Styling Item Menu */
.main-nav ul li:not(.sliding-line) a {
color: white;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 20px 13px;
display: block;
transition: color 0.3s ease;
}
/* Elemen Garis Geser */
.sliding-line {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: #0099db; /* Warna biru cerah MBSB */
width: 0;
transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
pointer-events: none; /* Agar tidak bisa diklik */
z-index: 5;
}
/* Warna Hover teks (Opsional) */
.main-nav ul li:hover a {
color: #0099db;
}
/* State Awal Header */
.wrap-header {
/* ... kode sebelumnya ... */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Efek smooth */
}
.wrap-logo {
/* ... kode sebelumnya ... */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wrap-logo img {
transition: height 0.4s ease;
}
/* State Saat Di-scroll (Shrink) */
/* Class "shrink" akan ditambahkan melalui JavaScript */
.wrap-header.shrink {
height: 60px; /* Lebih pendek dari original (80px) */
background-color:#FFD700; /* Sedikit transparan saat scroll */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.wrap-header.shrink .wrap-logo {
padding: 35px 30px;
top: 0; /* Logo sejajar dengan header saat shrink */
}
.wrap-header.shrink .wrap-logo img {
height: 35px; /* Logo mengecil */
}
.wrap-header.shrink .main-nav a {
padding-bottom: 20px; /* Menyesuaikan posisi menu */
}
.wrap-header {
width: 100%;
height:108px;
position: fixed;
top: 0;
z-index: 999;
}
.header-container {
margin: 0 auto;
height: 100%;
display: flex;
justify-content: space-between; /* Memisahkan kiri dan kanan */
align-items: center;
padding: 0 30px;
}
/* --- BAGIAN KIRI --- */
.left-section {
display: flex;
align-items: center;
gap:0px; /* Jarak antara logo dan menu pertama */
height: 100%;
}
.wrap-logo {
}
.wrap-logo img {
height: 45px;
}
.main-nav ul {
display: flex;
list-style: none;
gap:0px;
}
.main-nav a {
color: white;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
padding-bottom: 28px; /* Area klik lebih luas */
position: relative;
}
.main-nav li.active a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 4px;
background-color: var(--light-blue);
}
/* --- BAGIAN KANAN --- */
.right-section {
display: flex;
align-items: center;
gap: 20px;
}
.search-wrapper {
background: white;
border-radius: 25px;
padding: 3px 3px 3px 15px;
display: flex;
align-items: center;
}
.search-wrapper input {
border: none;
outline: none;
font-size: 13px;
width: 130px;
}
.search-wrapper button {
background: #f0f0f0;
border: none;
padding: 6px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
.lang-toggle {
display: flex;
gap: 8px;
}
.lang {
color: white;
font-size: 12px;
font-weight: bold;
width: 32px;
height: 32px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.lang.active {
background-color: var(--light-blue);
border-color: var(--light-blue);
}
/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
.main-nav, .right-section {
display: none; /* Sembunyikan untuk menu hamburger nanti */
}
.header-container {
justify-content: center; /* Logo di tengah pada mobile */
}
}
/* Reset & Container */
.runner-story-section {
padding: 40px 15px;
text-align: center;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: #ffffff;
}
.runner-story-grid {
display: flex;
flex-direction: column; /* Mobile first: tumpuk ke bawah */
gap: 20px;
align-items: center;
margin-top: 30px;
}
/* Card Styling */
.story-card-wrapper {
position: relative;
width: 100%;
max-width: 377px;
height: 299px;
border-radius: 16px;
overflow: hidden;
background-color: #333; /* Warna cadangan jika gambar gagal load */
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: all 0.4s ease;
}
/* Background Image Handling */
.card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
}
/* Overlay Gradasi agar teks terbaca */
.card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 60%);
z-index: 1;
}
/* Konten di dalam kartu */
.card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 25px;
color: white;
text-align: left;
z-index: 2;
}
.card-body h4 {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
}
.card-body p {
margin: 8px 0 0;
font-size: 0.95rem;
line-height: 1.4;
opacity: 0.9;
}
/* Play Button Centered */
.btn-play-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
transition: all 0.3s ease;
}
.runner-story-header {
margin: auto;
width: 100%;
text-align: center;
padding-bottom: 46px;
padding-top: 46px;
}
/* TRANSISI SMOOTH */
.story-card-wrapper:hover .card-bg {
transform: scale(1.1); /* Zoom gambar pelan */
}
.story-card-wrapper:hover .btn-play-center {
background: #FFD700; /* Warna kuning khas Fit Hub */
transform: translate(-50%, -50%) scale(1.2);
}
/* Responsive untuk Desktop */
@media (min-width: 768px) {
.runner-story-grid {
flex-direction: row; /* Berjejer ke samping di desktop */
justify-content: center;
flex-wrap: wrap;
}
.story-card-wrapper {
flex: 0 0 calc(33.33% - 20px);
}
}
.runner-dashboard-wrapper {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text-dark);
max-width: 1200px;
margin: 190px auto;
padding: 0 20px;
}
/* Typography */
.runner-dashboard h1 { font-weight: 800; font-size: 2.2rem; margin-bottom: 5px; color: var(--text-dark); }
.dashboard-subtitle { color: var(--text-light); margin-bottom: 30px; font-size: 1.1rem; }
/* Layout */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: start;
}
@media (min-width: 992px) {
.dashboard-grid { grid-template-columns: 350px 1fr; }
}
/* Sidebar & Navigation */
.dashboard-sidebar {
position: sticky; top: 20px;
}
/* Cards Styling */
.card {
background: #ffffff;
border: none;
padding: 25px;
margin-bottom: 25px;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
transition: transform 0.2s ease;
}
/* Status & Badges */
.status-badge {
padding: 6px 12px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-badge.paid { background-color: #e3fcef; color: #00a854; }
.status-badge.unallocated { background-color: #fff4e5; color: #ff9900; }
/* Quick Links / Menu */
.quick-links { display: flex; flex-direction: column; gap: 12px; }
.quick-links a {
display: flex; align-items: center;
padding: 14px 18px;
background-color: #fff;
color: var(--text-dark);
text-decoration: none;
border-radius: var(--border-radius);
font-weight: 600;
border: 1px solid #edf2f7;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.quick-links a:hover {
background-color: var(--primary-color);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,115,255,0.2);
}
.quick-links a i { margin-right: 12px; width: 20px; text-align: center; font-size: 1.1rem; }
/* Results Box */
.race-result-box {
background: linear-gradient(135deg, #FFD700 0%, #0056b3 100%);
color: white;
padding: 30px;
border-radius: var(--border-radius);
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0,123,255,0.2);
}
.race-result-box h4 { color: white; margin-bottom: 20px; font-weight: 700; border: none; }
.result-table { width: 100%; border-collapse: collapse; }
.result-table td { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
.result-table td strong { color: white; font-size: 1.2rem; }
/* Countdown Area */
.countdown-card {
background: #f8faff;
border-radius: 8px;
padding: 15px;
text-align: center;
border: 1px dashed #cbd5e0;
}
/* Buttons */
.button-primary {
background: var(--primary-color);
color: white !important;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
display: inline-block;
font-weight: 600;
transition: opacity 0.3s;
}
.button-primary:hover { opacity: 0.9; color: white; }
/* Mobile Optimization */
@media (max-width: 768px) {
.runner-dashboard h1 { font-size: 1.75rem; }
.card { padding: 20px; }
.dashboard-grid { gap: 20px; }
}
/* ... (Gaya CSS yang sudah ada sebelumnya) ... */
/* Gaya untuk Pesan Notifikasi */
.message {
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
text-align: center;
font-weight: bold;
border: 1px solid transparent;
}
.error {
background-color: #f8d7da;
color: #721c24;
border-color: #f5c6cb;
}
.success {
background-color: #d4edda;
color: #155724;
border-color: #c3e6cb;
}
.custom-form-wrapper {
max-width: 400px;
margin: 40px auto;
padding: 30px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.custom-form-wrapper h2 {
text-align: center;
color: #333;
margin-bottom: 25px;
}
.custom-form-wrapper .input-group {
margin-bottom: 15px;
}
.custom-form-wrapper label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.custom-form-wrapper input[type="text"],
.custom-form-wrapper input[type="email"],
.custom-form-wrapper input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.custom-submit-btn {
width: 100%;
padding: 12px;
background-color: #FFD700; /* Warna biru */
color: white;
border: none;
border-radius: 4px;
font-size: 1em;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}
.custom-submit-btn:hover {
background-color: #0056b3;
}
.custom-message {
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
font-weight: bold;
}
.custom-message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.custom-message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.switch-link {
margin-top: 20px;
text-align: center;
}
.input-group-checkbox {
text-align: left;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.input-group-checkbox label {
margin-left: 5px;
font-weight: normal;
}
/* ======================================================= */
/* AUTHENTICATION PAGES (LOGIN & REGISTER) STYLING */
/* ======================================================= */
.auth-title {
font-size: 24px;
color: #1e293b;
margin-bottom: 30px;
}
/* Styling Formulir Login WP (wp-login-form) */
.login form {
text-align: left;
}
.login label {
display: block;
font-weight: 600;
margin-top: 15px;
margin-bottom: 5px;
color: #333;
}
.login input[type="text"],
.login input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 16px;
transition: border-color 0.2s;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus {
border-color: #FFD700;
outline: none;
}
/* Tombol Submit */
#wp-submit-lariaja,
.btn-register-redirect {
width: 100%;
padding: 12px;
background-color: #f00030; /* Warna merah primer lariaja/blibli */
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
text-decoration: none; /* Untuk link Daftar Sekarang */
display: inline-block;
margin-top: 10px;
}
#wp-submit-lariaja:hover,
.btn-register-redirect:hover {
background-color: #c00020;
}
/* Ingat Saya dan Checkbox */
.forgetmenot {
float: none; /* Hapus float bawaan WP */
text-align: left;
font-size: 14px;
margin-bottom: 15px;
}
/* Link Bawah Formulir */
.auth-links {
margin-top: 20px;
font-size: 14px;
}
.auth-links a {
color: #FFD700;
text-decoration: none;
transition: color 0.2s;
}
.auth-links a:hover {
color: #0056b3;
}
.registration-note {
margin-top: 20px;
color: #ff4500;
font-style: italic;
}
/* Styling logo di halaman wp-login.php */
#login h1 a {
background-image: url('URL_LOGO_TEMA_ANDA.png');
width: 100%;
height: 100px; /* Sesuaikan tinggi */
background-size: contain;
background-repeat: no-repeat;
padding-bottom: 30px;
}
/* Mengubah latar belakang form wrapper */
#loginform {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
padding: 20px;
border-radius: 8px;
}
/* Mengubah style button Login */
#wp-submit {
background-color: #f00030; /* Warna Merah Lariaja */
color: white;
border: none;
height: 40px;
border-radius: 6px;
transition: background-color 0.2s;
}
/* Mengatur input field */
.login input[type="text"],
.login input[type="password"] {
border-color: #ccc;
box-shadow: none;
}
/* Styling Dasar */
.vacation-ideas-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.section-title {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 20px;
color: #333;
}
/* ===========================
Filter Tabs Styling
=========================== */
.filter-tabs {
display: flex;
gap:6px;
margin-bottom: 25px;
}
.tab-button {
padding: 8px 15px;
border: 1px solid #e0e0e0;
border-radius: 20px;
background-color: #f0f0f0;
color: #555;
font-size: 0.9em;
cursor: pointer;
transition: all 0.2s;
}
.tab-button.active {
background-color: #e6f0ff; /* Warna biru muda */
border-color: #a0c3ff;
color: #0066ff;
font-weight: 600;
}
.tab-button:hover:not(.active) {
background-color: #e9e9e9;
}
/* ===========================
Slider & Card Styling
=========================== */
.card-slider-wrapper {
position: relative;
overflow-x: hidden;
padding: 0 0px; /* Padding untuk tombol panah */
}
.card-list {
display: flex;
gap: 20px;
overflow-x: hidden; /* Sekarang diatur oleh JS */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
transition: transform 0.5s ease-in-out; /* Untuk animasi geser JS */
}
.card-list::-webkit-scrollbar {
display: none;
}
.vacation-card {
min-width: 250px;
height: 250px;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
scroll-snap-align: start;
transition: transform 0.3s ease;
}
.vacation-card:hover {
transform: translateY(-3px);
}
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.vacation-card:hover .card-image {
transform: scale(1.05);
}
.card-label {
position: absolute;
bottom: 15px;
left: 15px;
color: #ffffff;
font-size: 1.5em;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
/* Tombol Geser (Panah) */
.slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #ffffff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
color: #333;
font-size: 1.5em;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.slide-arrow:hover {
background-color: #f0f0f0;
}
.prev-arrow {
left: 0;
}
.next-arrow {
right: 0;
}
/* ===========================
Tombol See All Styling
=========================== */
.see-all-wrapper {
display: flex;
justify-content: center;
margin-top: 30px;
}
.see-all-button {
background-color: #e6f0ff;
color: #0066ff;
border: 1px solid #a0c3ff;
padding: 10px 30px;
border-radius: 8px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.see-all-button:hover {
background-color: #d1e3ff;
}
/* ===========================
Responsive Design
=========================== */
/* Tablet View */
@media (max-width: 1024px) {
.vacation-card {
min-width: 220px;
}
}
/* Mobile View */
@media (max-width: 768px) {
.vacation-ideas-container {
padding: 10px;
}
.space-header {
height: 3px;
}
.promo-arrow {
top: 22%;
}
.vacation-card {
min-width: 85%;
height: 200px;
}
.card-label {
font-size: 1.3em;
}
/* Tombol panah disembunyikan di mobile karena menggunakan guliran sentuh */
.slide-arrow {
display: none !important;
}
.card-slider-wrapper {
overflow-x: scroll; /* Aktifkan scroll sentuh di mobile */
padding: 0;
}
.card-list {
overflow-x: unset;
transition: none;
}
.filter-tabs {
overflow-x: scroll;
padding-bottom: 5px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar {
display: none;
}
.tab-button {
min-width: fit-content;
white-space: nowrap;
}
}
.wrapper-white {
background-color: #ffffff;
padding: 36px 0px;
}
/* Dalam slide-card-style.css */
.card-list {
/* ... properti lain ... */
overflow-x: auto; /* Ubah hidden menjadi auto di desktop agar tetap bisa di-scroll manual */
scroll-snap-type: x mandatory;
/* ... properti lain ... */
}
.vacation-card {
/* ... properti lain ... */
scroll-snap-align: start; /* Penting: Setiap kartu adalah titik snap */
/* ... properti lain ... */
}
/* FOOTER CONTAINER */
.decathlon-footer {
background-color: #ffffff; /* Latar belakang putih sesuai desain */
padding: 20px 5%; /* Padding horizontal 5% untuk desktop */
color: #333333;
font-size: 14px;
}
/* =========================================================
BAGIAN ATAS (Follow Us & Download App)
========================================================= */
.footer-top-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
}
/* Follow Us */
.follow-us h3,
.download-app h3 {
text-transform: uppercase;
font-weight: bold;
font-size: 1em; /* Sekitar 14px */
margin-bottom: 10px;
color: #333333;
}
.social-links a {
color: #333333;
font-size: 24px;
margin-right: 15px;
text-decoration: none;
transition: color 0.2s;
}
.social-links a:hover {
color: #FFD700; /* Contoh warna hover */
}
/* Download App */
.app-links {
display: flex;
gap: 10px;
}
.app-links img {
height: 40px; /* Sesuaikan ukuran badge */
width: auto;
}
/* Divider */
.footer-divider {
border: none;
border-top: 1px solid #5a5a5a;
margin: 10px 0 30px 0; /* Margin bawah lebih besar */
}
/* =========================================================
BAGIAN BAWAH (Links & Contact)
========================================================= */
.footer-links-section {
display: flex;
justify-content: space-between;
gap: 20px; /* Jarak antara kelompok kolom */
}
/* Kelompok kolom kiri (BELANJA, LAYANAN, PRODUK) */
.footer-column-group {
display: grid;
/* Grid 3 kolom untuk desktop */
grid-template-columns: repeat(3, 1fr);
gap: 40px;
flex-grow: 1; /* Biarkan mengambil ruang yang tersedia */
}
/* Kelompok kolom kanan (BERGABUNG, KONTAK) */
.footer-column-group-right {
display: flex;
flex-direction: column;
width: 350px; /* Lebar tetap untuk kolom kontak pada desktop */
gap: 20px;
}
/* Styling Kolom */
.footer-column h4 {
font-size: 1em; /* Sama dengan */
text-transform: uppercase;
font-weight: bold;
margin-bottom: 15px;
white-space: nowrap; /* Mencegah judul kolom kontak pindah baris */
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 5px;
}
.footer-column a,
.footer-column p {
color: #333333;
text-decoration: none;
display: block;
line-height: 1.5;
transition: color 0.2s;
}
.footer-column a:hover {
color: #FFD700;
}
.footer-column p {
margin: 0 0 5px 0;
}
.footer-column-contact p {
font-size: 0.95em;
}
.footer-column-contact .small-text {
font-size: 0.8em; /* Ukuran lebih kecil untuk teks legal */
line-height: 1.3;
}
/* =========================================================
RESPONSIVE DESIGN (Media Queries)
========================================================= */
/* Tablet View (Layar antara 768px dan 1024px) */
@media (max-width: 1024px) {
.decathlon-footer {
padding: 20px 3%;
}
.footer-links-section {
flex-direction: column; /* Tumpuk bagian links dan contact */
}
/* Grid 2x2 untuk 4 kolom pertama di tablet */
.footer-column-group {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
/* Pindahkan BERGABUNG ke dalam grid utama di tablet */
.footer-column-group-right {
width: 100%; /* Ambil lebar penuh */
flex-direction: row; /* Kolom BERGABUNG dan KONTAK bersebelahan */
gap: 30px;
}
/* Pastikan kolom BERGABUNG mengambil lebar yang wajar, dan kontak mengambil sisanya */
.footer-column-join {
flex-basis: 30%;
}
.footer-column-contact {
flex-basis: 70%;
}
}
/* Mobile View (Layar di bawah 768px) */
@media (max-width: 767px) {
.decathlon-footer {
padding: 20px 5%;
}
/* Bagian Atas: Tumpuk Follow Us dan Download App */
.footer-top-section {
flex-direction: column;
align-items: center;
text-align: center;
}
.follow-us,
.download-app {
width: 100%;
margin-bottom: 20px;
}
.social-links {
margin-bottom: 20px;
}
.app-links {
justify-content: center;
}
/* Bagian Bawah: Semua kolom menjadi 1 kolom */
.footer-column-group {
grid-template-columns: 1fr;
gap: 0;
}
.footer-column-group-right {
flex-direction: column;
gap: 0;
}
.footer-column h4 {
/* Sedikit padding atas untuk memisahkan kolom saat ditumpuk */
padding-top: 20px;
}
/* Hilangkan margin bawah dari kolom BERGABUNG dan KONTAK agar tidak terlalu renggang */
.footer-column-join,
.footer-column-contact {
flex-basis: auto;
}
}
/* Anda dapat menggunakan CSS sebelumnya, hanya ganti .decathlon-footer dengan .lariaja-footer */
/* RESET DASAR & FONT */
/* FOOTER CONTAINER */
.lariaja-footer { /* DIGANTI DI SINI */
background-color: #ffffff;
padding: 20px 5%;
color: #333333;
font-size: 14px;
}
/* =========================================================
BAGIAN ATAS (Follow Us & Download App)
========================================================= */
.footer-top-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
}
/* Follow Us */
.follow-us h3,
.download-app h3 {
text-transform: uppercase;
font-weight: bold;
font-size: 1em;
margin-bottom: 10px;
color: #333333;
}
/* ... (lanjutan styling social-links dan app-links) ... */
/* ... (Gaya untuk ikon, app-links, divider, dan bagian bawah tetap sama) ... */
/* ... (Semua media query juga tetap sama) ... */
/* Container Menu */
.lariaja-main-menu {
flex-grow: 1; /* Mengambil ruang tersisa */
margin-left: 20px;
}
.lariaja-main-menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
height: 100%;
}
.lariaja-main-menu li {
margin-right: 25px;
position: relative; /* Penting untuk Mega Menu dan Hover */
}
/* Styling Link Menu */
.lariaja-main-menu a {
text-decoration: none;
color: #333;
font-size: 14px;
font-weight: 500;
padding: 10px 0;
display: block;
position: relative;
}
/* 2. & 3. Hover Underline dan Transisi Smooth */
.lariaja-main-menu a::after {
content: '';
position: absolute;
width: 0; /* Lebar default 0 */
height: 3px;
background-color:#468cff; /* Warna underline */
bottom: 0;
left: 50%;
transform: translateX(-50%);
/* Transisi smooth */
transition: width 0.3s ease-out;
}
/* Efek Hover Underline */
.lariaja-main-menu a:hover::after {
width: 100%;
}
/* Efek Aktif Underline */
.lariaja-main-menu a.active-menu::after {
width: 100%;
}
/* ======================================================= */
/* MEGA MENU CONTAINER (1. Muncul saat Hover) */
/* ======================================================= */
.mega-menu-container {
/* Sembunyikan default */
display: none;
position: absolute;
left: -100px; /* Atur posisi agar menu terlihat di tengah, sesuaikan */
top: 100%;
width: 800px; /* Lebar mega menu */
background: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border: 1px solid #eee;
z-index: 1050; /* Di atas header lain */
border-top: none;
padding: 20px;
/* Transisi opacity untuk smooth */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
transform: translateY(10px);
}
/* Tampilkan Mega Menu saat hover pada LI */
.lariaja-main-menu li.has-mega-menu:hover .mega-menu-container {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Konten di dalam Mega Menu */
.mega-menu-content {
display: flex;
gap: 20px;
}
.menu-column {
padding: 10px;
}
/* Kolom Kategori (Kiri) */
.menu-categories {
flex: 0 0 40%;
border-right: 1px solid #f0f0f0;
}
.menu-categories a {
font-size: 14px;
font-weight: normal;
padding: 8px 0;
color: #666;
transition: color 0.2s;
}
.menu-categories a:hover {
color: #FFD700;
font-weight: 600;
}
.menu-categories a::after {
display: none; /* Hilangkan underline di item sub-menu */
}
/* Kolom Promo (Kanan) */
.menu-promo {
flex: 1;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 8px;
}
.mega-menu-promo-img {
width: 100%;
height: auto;
border-radius: 8px;
}
.mega-menu-promo-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 10px 0;
}
/* RESET DASAR */
a {
text-decoration: none;
color: inherit;
}
/* ======================================================= */
/* KOREKSI FINAL CSS: MEGA MENU CONTAINER VISIBILITY */
/* ======================================================= */
.mega-menu-container {
/* Hapus display: none */
position: absolute;
left: -100px;
top: 100%;
width: 800px;
background: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
border: 1px solid #eee;
z-index: 1050;
border-top: 3px solid #FFD700; /* Garis Biru di atas */
padding: 20px;
/* Gunakan opacity dan visibility untuk transisi smooth */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
transform: translateY(10px);
}
/* Tampilkan Mega Menu saat hover pada LI */
.lariaja-main-menu li.has-mega-menu:hover .mega-menu-container {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Wrapper Utama: card-home-lariaja */
.card-home-lariaja {
max-width: 1200px;
margin: 0 auto;
padding: 0px;
}
.section-title {
font-size: 20px; /* Sedikit lebih kecil dari header 2 default */
font-weight: 600; /* Medium-bold */
color: #1e293b;
margin-bottom: 25px;
}
/* Container untuk Cards (Flexbox) */
.events-container {
display: block;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-start;
}
/* Styling Card */
.event-card {
background-color: #fff;
border-radius: 8px; /* Sudut membulat */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Bayangan yang sangat tipis dan halus */
overflow: hidden;
flex: 1 1 280px; /* Fleksibilitas */
max-width: 277px; /* Lebar card di desain terlihat ramping */
display: flex; /* Menggunakan flex untuk mengatur tinggi konten */
flex-direction: column;
border: 1px solid #e2e8f0; /* Garis tepi yang sangat halus */
}
/* Override max-width untuk card 1 agar terlihat lebih sesuai dengan desain */
.event-card-1 {
max-width: 277px;
}
/* Styling Gambar dan Logo di Atas Card 1 */
.card-image-wrapper {
width: 100%;
/* Tinggi yang lebih pendek agar card lebih kompak seperti desain */
height: 140px;
overflow: hidden;
position: relative;
}
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Logo di Sudut Kiri Atas Card 1 (Contoh: GiFest) */
.card-1-logo-top {
position: absolute;
top: 10px;
left: 10px;
width: 30px;
height: 30px;
background-color: white; /* Latar belakang putih */
border-radius: 50%;
padding: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.card-1-logo-top img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Styling Konten (Teks) */
.card-content {
padding: 15px 12px 10px 12px; /* Padding sisi kiri/kanan sedikit lebih kecil */
display: flex;
flex-direction: column;
flex-grow: 1; /* Konten tumbuh untuk mengisi ruang vertikal */
}
.event-title {
font-size: 14px;
font-weight: 600;
color: #1e293b;
margin: 0 0 5px 0;
line-height: 1.4;
/* Batasi teks untuk 2 baris jika terlalu panjang */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-date {
font-size: 12px;
color: #64748b;
margin-bottom: 8px;
}
.event-price {
font-size: 15px;
font-weight: bold;
color: #000;
margin-top: auto; /* Mendorong harga ke bawah */
}
/* Styling Footer (Penyelenggara) */
.card-footer {
padding: 10px 12px;
border-top: 1px solid #f0f3f6; /* Garis pemisah yang sangat terang */
display: flex;
align-items: center;
}
.organizer-logo {
width: 20px; /* Ukuran logo lebih kecil */
height: 20px;
border-radius: 50%;
margin-right: 8px;
object-fit: cover; /* Gunakan cover untuk gambar profil/logo bulat */
}
/* Perlakuan khusus untuk logo JKT48 (Card 4) yang mungkin kotak */
.organizer-logo.jkt48-logo {
border-radius: 4px; /* Sudut sedikit membulat untuk logo kotak */
object-fit: contain;
}
.organizer-name {
font-size: 12px;
color: #64748b;
font-weight: 500;
}
/* Footer card 1 yang tidak memiliki logo bulat */
.card-footer-1 {
padding: 10px 12px;
border-top: 1px solid #f0f3f6;
display: flex;
align-items: center;
}
.card-footer-1 .organizer-logo {
width: auto;
height: 16px; /* Logo berbentuk teks/panjang */
border-radius: 0;
margin-right: 8px;
font-size: 12px;
object-fit: contain;
}
.card-footer-1 .organizer-name {
display: none; /* Nama organisasi tersembunyi karena sudah ada di logo */
}
/* ==================================== */
/* Media Query untuk Responsif Mobile */
/* ==================================== */
@media (max-width: 768px) {
.events-container {
/* Pada layar tablet/mobile, atur agar card bisa 2 atau 1 kolom */
justify-content: space-around; /* Rata tengah atau merata */
gap: 15px;
}
.event-card, .event-card-1 {
flex: 1 1 calc(50% - 10px); /* 2 kolom di tablet */
max-width: calc(50% - 10px);
}
}
@media (max-width: 500px) {
.p-10 {
padding: 9px!important;
}
.header-container {
padding: 27px;
max-width: 100%;
}
.wrap-header.shrink .wrap-logo {
padding: 5px 10px;
top: 0;
}
.wrap-logo {
padding: 8px 10px;
}
.events-container {
flex-direction: column;
gap: 15px;
}
.event-card, .event-card-1 {
max-width: 100%; /* Card mengambil lebar penuh di mobile */
flex: 1 1 100%;
}
body {
padding:0px;
}
.card-home-lariaja {
padding: 0;
}
}
.lariaja-header {
width: 100%;
border-bottom: 1px solid #eee;
}
.wrap-center {
justify-content: space-between;
width: 80%;
margin: auto;
display: flex;
}
/* --- 1. Top Bar (Baris Paling Atas) --- */
.lariaja-top-bar {
background-color: #f7f7f7;
font-size: 12px;
padding: 8px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
max-width: 100%; /* Lebar konten maksimum */
margin: 0 auto;
padding: 8px 20px; /* Padding samping untuk tampilan lebih kecil dari 1200px */
}
.top-bar-left a,
.top-bar-right a {
color: #666;
margin-right: 20px;
transition: color 0.2s;
}
.top-bar-right a:last-child {
margin-right: 0;
}
.top-bar-left a:hover,
.top-bar-right a:hover {
color: #000;
}
/* Tombol */
.btn {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
font-weight: bold;
margin-left: 8px;
}
.btn-outline {
/* background-color: #FFD100;*/
color: #ffffff;
/* border: 1px solid #FFD100;*/
transition: background-color 0.2s;
}
.btn-primary {
background-color: #FFD700;
color: #000000;
transition: background-color 0.2s;
}
.btn-outline:hover {
background-color: #e6f0ff;
}
.btn-primary:hover {
background-color: #0045b8;
}
/* --- 3. Bottom Bar (Kategori/Promosi/Alamat) --- */
.lariaja-bottom-bar {
padding: 8px 0;
border-top: 1px solid #f0f0f0;
}
.bottom-bar-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 20px;
}
.kategori-button {
display: flex;
align-items: center;
background-color: #f6f6f6; /* Warna latar belakang abu-abu muda */
border: 1px solid #e0e0e0;
color: #333;
padding: 6px 15px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
height: 40px; /* Samakan tinggi dengan search bar */
}
.kategori-button i {
margin-right: 8px;
color: #0056e4;
}
.kategori-button:hover {
background-color: #eee;
}
.promo-keywords {
margin-left: 20px;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
flex-grow: 1;
}
.promo-keywords a {
color: #666;
font-size: 12px;
margin-right: 15px;
padding: 2px 0;
transition: color 0.2s;
}
.promo-keywords a:hover {
color: #000;
}
.delivery-info {
display: flex;
align-items: center;
font-size: 13px;
color: #666;
margin-left: auto; /* Dorong ke kanan */
cursor: pointer;
padding: 5px 10px;
background-color: #f9f9f9;
border-radius: 4px;
}
.delivery-info i:first-child {
color: #0056e4;
margin-right: 5px;
}
.delivery-info span {
margin: 0 5px;
}
.delivery-info i:last-child {
font-size: 10px;
}
/* ======================================================= */
/* CSS UTAMA HEADER (DEFAULT STATE) */
/* ======================================================= */
/* HEADER UTAMA */
.lariaja-header {
width: 100%;
position: fixed; /* Membuat header selalu terlihat */
top: 0;
left: 0;
z-index: 1000;
background-color: #fff; /* Pastikan ada latar belakang padat */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
/* Transisi untuk menyusut (shrink) */
transition: all 0.3s ease-in-out;
}
/* BAR ATAS (TOP BAR) */
.lariaja-top-bar {
height: 45px; /* Tinggi default */
background-color: #f7f7f7;
transition: all 0.3s ease-in-out;
}
/* KONTEN UTAMA (MAIN BAR) */
.lariaja-main-bar {
padding: 0px 0;
transition: padding 0.3s ease-in-out;
}
/* BAR BAWAH (BOTTOM BAR) */
.lariaja-bottom-bar {
height: 50px; /* Tinggi default */
transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
/* ======================================================= */
/* CSS SAAT HEADER DIGULIR (SCROLLED STATE) */
/* ======================================================= */
.lariaja-header.scrolled {
/* Mengurangi sedikit box shadow */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 1. EFEK SHRINK (Menghilangkan Top Bar) */
.lariaja-header.scrolled .lariaja-top-bar {
/* Menghilangkan top bar */
height: 0;
opacity: 0;
visibility: hidden;
}
/* Mengurangi padding pada Main Bar */
.lariaja-header.scrolled .lariaja-main-bar {
padding: 5px 0;
}
/* Mengurangi atau menyembunyikan Bottom Bar sepenuhnya */
.lariaja-header.scrolled .lariaja-bottom-bar {
/* Menyembunyikan bottom bar */
height: 0;
opacity: 0;
padding: 0; /* Pastikan padding juga hilang */
visibility: hidden;
}
/* Opsi: Jika Anda hanya ingin mengurangi ukuran logo */
.lariaja-header.scrolled .lariaja-logo img {
max-height: 30px; /* Contoh: Kurangi tinggi maksimum logo */
transition: max-height 0.3s ease-in-out;
}
/* Pastikan konten utama tidak tertutup header yang baru (opsional) */
/* Sesuaikan nilai padding-top dengan tinggi header saat SCROLLED (misal 65px) */
body.home #content {
padding:40px 0px;
background-color: #000000;
max-width: 100%;
margin-bottom: 40px;
position: relative;
top: -49px;
}
.lariaja-header.scrolled ~ #content {
/* Padding untuk konten agar tidak tertutup header yang menyusut */
padding-top: 65px;
padding-bottom:65px;/* Sesuaikan dengan tinggi header baru */
}
.card-list {
display: flex;
gap: 20px;
overflow-x: hidden;
/* Hapus: scroll-snap-type: x mandatory; */ /* HAPUS INI */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
transition: transform 0.5s ease-in-out;
}
.vacation-card {
min-width: 250px;
/* Hapus: scroll-snap-align: start; */ /* HAPUS INI */
/* ... properti lain ... */
}
/* ------------------------------------- */
/* lariaja-STYLE CUSTOM SLIDER CSS (Final) */
/* ------------------------------------- */
:root {
--side-margin: 10vw; /* 10vw = 10% dari lebar viewport (untuk efek potongan 20%) */
--slide-gap: 15px; /* Jarak antar banner */
}
/* 1. Container Utama (Jendela Tampilan) */
.lariaja-slider-container {
position: relative;
width: 100%;
/* Gunakan padding untuk menciptakan ruang terpotong di kiri-kanan */
padding: 0 var(--side-margin);
margin: 20px auto;
overflow: hidden;
cursor: pointer;
}
/* 2. Wrapper (Kontainer yang Bergerak) */
.lariaja-slider-wrapper {
display: flex;
/* Margin negatif untuk menarik slide pertama ke kiri */
margin-left: calc(-1 * var(--slide-gap));
/* Smooth Transition */
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 3. Styling Slide Individu */
.lariaja-slide {
flex-shrink: 0;
aspect-ratio: 4 / 1;
/* Lebar slide: 100% viewport - 2x margin samping (memastikan 1 slide penuh di tengah) */
width: calc(100vw - (2 * var(--side-margin)));
max-width: 800px; /* Batas Maksimal Lebar Slide */
/* Padding di sini bertindak sebagai gap antar slide */
padding: 0 var(--slide-gap);
box-sizing: content-box;
}
.lariaja-slide > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 8px;
}
/* 4. KOREKSI TOMBOL NAVIGASI FINAL (PROFESIONAL lariaja-STYLE) */
.slider-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Ukuran menyerupai lariaja (lebih vertikal) */
width: 30px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 16px;
font-weight: normal;
/* Desain */
background: rgba(0, 0, 0, 0.4); /* Lebih gelap, lebih transparan */
color: white;
border: none;
cursor: pointer;
z-index: 10;
border-radius: 6px; /* Rounded rectangle */
opacity: 1; /* Selalu terlihat, atau gunakan 0 dan tampilkan saat hover */
transition: background 0.2s;
}
/* Penempatan Tombol di Ujung Container yang Terpotong */
.prev-btn {
left: 0; /* Pasang di tepi kiri container */
border-top-left-radius: 0; /* Meniru desain lariaja yang memotong sudut di tepi */
border-bottom-left-radius: 0;
}
.next-btn {
right: 0; /* Pasang di tepi kanan container */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.slider-button:hover {
background: rgba(0, 0, 0, 0.7); /* Kontras lebih kuat saat hover */
}
/* Styling Ikon (Pastikan ikon terpusat) */
.slider-button span {
display: block;
line-height: 60px;
}
/* ------------------------------------- */
/* 5. Indikator Paging (Dots) */
.slider-dots {
text-align: center;
padding: 10px 0 0;
}
.dot { /* ... styling dots ... */ }
.dot.active { background-color: #333; }
/* 6. Mobile Responsiveness */
@media (max-width: 768px) {
:root {
--side-margin: 5vw;
}
.lariaja-slide {
aspect-ratio: 3 / 1;
width: calc(100vw - (2 * var(--side-margin)));
padding: 0 var(--slide-gap);
}
.slider-button {
opacity: 1 !important;
width: 30px;
height: 50px;
line-height: 50px;
}
}
/* Wrapper Utama: card-home-lariaja */
.card-home-lariaja {
/* Gaya kontainer utama jika diperlukan,
misalnya lebar maksimum situs di desktop */
max-width: 1200px;
margin: 0 auto; /* Tengah di desktop */
padding:0px; /* Sedikit padding horizontal */
}
.section-title {
font-size: 24px;
font-weight: bold;
color: #1e293b;
margin-bottom: 20px;
padding-top:40px;
}
.event-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Styling Konten (Teks) */
.card-content {
padding: 15px;
display: flex;
flex-direction: column;
height:auto;
}
.event-title {
font-size: 14px;
font-weight: 600;
color: #1e293b;
margin: 0 0 5px 0;
line-height: 1.3;
}
.event-date {
font-size: 14px;
color: #64748b;
margin-bottom: 10px;
}
/* Styling Footer (Penyelenggara) */
.card-footer {
padding: 10px 15px;
border-top: 1px solid #e2e8f0;
display: flow;
align-items: center;
}
.organizer-logo {
width: 24px;
font-size: 12px;
height: 24px;
border-radius: 4px;
margin-right: 8px;
object-fit: contain;
}
.organizer-name {
font-size: 12px;
color: #64748b;
}
/* ==================================== */
/* Media Query untuk Responsif Mobile */
/* ==================================== */
@media (max-width: 650px) {
.p-6 {
padding: 0px 10px!important;
}
.gap-6 {
gap: 11px!important;
}
.events-container {
flex-direction: column;
gap: 15px;
}
.event-card {
max-width: 100%;
flex: 1 1 100%;
}
.card-home-lariaja {
padding: 0; /* Hapus padding jika body sudah memiliki padding */
}
}
/* 4. Sembunyikan Label Text */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important;
}
/* HEADER & NAVIGASI (Desain Mirip CAUSE) */
.site-header {
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
position: relative;
z-index: 1000;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding:0px 20px;
}
/* Kiri: Logo dan Navigasi */
.nav-left {
display: flex;
align-items: center;
}
/* Styling Logo Text Fallback */
.logo a, .logo-text {
font-weight: bold;
font-size: 1.2rem;
color: #e30022; /* Warna merah */
white-space: nowrap;
}
/* Penyesuaian WordPress Custom Logo */
.custom-logo-link img {
height: 46px; /* Atur ketinggian logo gambar */
width: auto;
}
/* Jarak antara Logo dan Navigasi */
.main-nav {
margin-left: 40px;
}
/* Daftar Item Menu */
.main-nav a {
color: #ffffff;
padding: 26px 0;
transition: color 0.3s;
font-size: 16px;
font-weight: 600;
}
.main-nav a:hover {
color: #e30022;
}
/* Kanan: Tombol Aksi */
.nav-right {
display: flex;
align-items: center;
gap: 10px;
}
.btn {
padding: 8px 15px;
border-radius: 4px;
font-weight: bold;
transition: background-color 0.3s;
text-transform: uppercase;
}
.btn-log {
background: none;
color: #e30022;
border: 1px solid #e30022;
}
.btn-signup {
background-color: #e30022;
color: white;
border: 1px solid #e30022;
}
.btn-signup:hover {
background-color: #c9001f;
}
/* Tombol Hamburger (Awalnya Tersembunyi) */
.menu-toggle {
display: none;
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
color: #e30022;
}
/* Konten Utama */
.site-content {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* FOOTER */
.site-footer {
text-align: center;
padding: 20px;
border-top: 1px solid #ddd;
margin-top: 40px;
background-color: #ffffff;
color: #777;
}
/* MEDIA QUERIES untuk responsivitas (Mobile) */
@media (max-width: 768px) {
.main-nav {
display: none;
}
.menu-toggle {
display: block;
margin-left: 10px;
}
/* Opsional: Sembunyikan Log In di mobile jika ruang terbatas */
/* .btn-log {
display: none;
} */
}
/*=================RESPONSIVE=================/*
/* Mobile Standar (300px ke atas) */
@media (min-width: 300px) and (max-width:500px) {
.upcoming-events-hero {
height: auto !important;
}
footer {
padding: 0px;
}
.community-footer {
background: #f9f9f9;
padding: 0px;
margin-top: 40px;
width: 100%;
}
.footer-col-news {
flex: 1;
width: 100%;
}
.footer-bottom-flex {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
max-width: 100%;
margin: 0 auto;
padding: 0px;
gap: 0px;
}
.runner-story-section {
padding: 0px 15px!important;
}
.footer-grid {
padding: 0px!important;
width: 90%!important;
}
.card-slider-wrapper {
margin-left: 14px!important;
}
.vacation-card {
margin-left: 13px!important;
height: 200px!important;
}
.promo-slide img {
height: 370px!important;
}
.card-list {
gap: 0px!important;
}
.container-inner {
margin-top: -250px!important;
}
.card-step {
min-height:98px;
}
.wrap-info {
padding: 6px;
margin-top: 20px;
}
.member-avatar {
width: 95px;
height: 93px;
margin-top: 10px;
}
.nav-bar ul li {
padding:8px 0!important;
}
.nav-bar ul {
gap: 0px!important;
}
.menu-badge-new::after {
top: 13px!important;
}
.mid-bar {
padding: 0px 20px;
}
.mobile-menu-trigger {
margin-left: 0px!important;
}
.container {
max-width: 100% !important;
}
}
/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
.menu-badge-new::after {
top: -12px !important;
}
}
.container {
max-width: 1200px !important;
}
}
/* Desktop (1024px - 1440px) */
@media (min-width: 1024px) {
.container {
max-width: 1200px !important;
}
}
/* Large Screen (> 1440px) */
@media (min-width: 1441px) {
}
/*=================RESPONSIVE=================/*
/* Container Utama */
.training-widget-premium {
background: #ffffff;
border-radius: 20px;
padding: 30px;
border: 1px solid #f0f0f0;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
font-family: 'Inter', -apple-system, sans-serif;
}
/* Header & Title */
.training-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
gap: 20px;
}
.title-area {
display: flex;
align-items: center;
gap: 15px;
}
.icon-circle {
width: 45px;
height: 45px;
background: #fff4ed;
color: #ff6b00;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 20px;
}
.text-group h3 {
margin: 0;
font-size: 18px;
font-weight: 800;
color: #1a1a1a;
}
.text-group p {
margin: 2px 0 0;
font-size: 13px;
color: #888;
}
/* Select Styling */
.select-wrapper {
position: relative;
}
.premium-select {
appearance: none;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 10px 40px 10px 15px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #475569;
cursor: pointer;
transition: 0.3s;
min-width: 180px;
}
.premium-select:hover {
border-color: #ff6b00;
background: #fff;
}
.select-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #94a3b8;
pointer-events: none;
}
/* Progress Card */
.progress-container-card {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 16px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.progress-info {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.percent-badge {
background: #ff6b00;
color: white;
padding: 2px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
}
.progress-track {
width: 100%;
height: 10px;
background: #f1f5f9;
border-radius: 20px;
overflow: hidden;
}
.progress-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #ff6b00, #ff9d52);
border-radius: 20px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Congrats Banner */
.congrats-banner {
margin-top: 15px;
background: #fff9eb;
border: 1px solid #ffeeba;
padding: 10px;
border-radius: 10px;
color: #b8860b;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* Timeline/Checklist Items */
.training-timeline-modern {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Penyesuaian class timeline-item dari AJAX */
.timeline-item {
background: #fff;
border: 1px solid #f1f5f9;
padding: 15px;
border-radius: 12px;
transition: 0.2s;
display: flex;
align-items: center;
}
.timeline-item:hover {
border-color: #e2e8f0;
background: #fcfcfc;
}
.timeline-item.completed {
background: #f8fafc;
border-color: transparent;
}
/* Animasi Loading */
.loading-state {
padding: 40px 0;
text-align: center;
color: #94a3b8;
}
.spinner-simple {
width: 30px;
height: 30px;
border: 3px solid #f3f3f3;
border-top: 3px solid #ff6b00;
border-radius: 50%;
margin: 0 auto 15px;
animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 600px) {
.training-header { flex-direction: column; align-items: flex-start; }
.select-wrapper { width: 100%; }
.premium-select { width: 100%; }
}
/* CSS Reset & Variables */
:root {
--primary-color: #f03e3e;
--text-dark: #1a1a1b;
--text-gray: #717172;
--bg-light: #000000;
--border-color: #e5e7eb;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.quora-theme {
background-color: var(--bg-light);
color: var(--text-dark);
}
textarea#status-textarea {
width: 100%;
border-radius: 12px;
border: 1px solid #000000;
padding: 12px;
resize: none;
font-family: inherit;
font-size: 14px;
outline: none;
background-color: #181818;
}
/* Sub Header */
.community-sub-header {
/*border-bottom: 1px solid var(--border-color);*/
padding: 15px 0;
margin-bottom: 25px;
position: sticky;
top: 0;
z-index: 100;
}
.flex-sub { display: flex; justify-content: space-between; align-items: center; }
.page-title { font-size: 20px; font-weight: 800; margin: 0; color: #ffffff; }
.btn-primary-sm {
background: var(--primary-color);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: 0.3s;
}
.btn-primary-sm:hover { background: #c92a2a; transform: translateY(-1px); }
/* Grid Layout */
.main-grid {
display: grid;
grid-template-columns: 240px 1fr 280px;
gap: 24px;
align-items: start;
padding-bottom: 60px;
}
/* Widgets & Sidebar */
.nav-group-title { font-size: 11px; text-transform: uppercase; color: var(--text-gray); letter-spacing: 1px; margin-bottom: 12px; }
.nav-link {
display: flex;
align-items: center;
padding: 10px;
text-decoration: none;
color: var(--text-dark);
font-size: 15px;
border-radius: 8px;
font-weight: 600;
transition: 0.2s;
line-height: 45px;
}
.strava-report-card {
background: #333333 !important;
border: none !important;
}
.strava-report-card h4 {
padding-bottom: 5px;
color: #ffffff !important;
}
.strava-report-card strong {
color: #ffffff !important;
}
.strava-report-card div {
background: #2f2e2e !important;
border: none !important;
color: #ffffff!important;
}
.widget-box.notification-box p {
color: #ffffff;
}
span.user-name {
color: #ffffff;
}
textarea#status-textarea {
color: #ffffff;
}
.feed-text-content p {
color: #ffffff;
padding-left: 18px;
}
.leaderboard-wrapper strong {
color: #707070;
font-size: 12px;
}
.nav-link.active { background: #fff; box-shadow: var(--shadow-sm); font-weight: 700; color: var(--primary-color); }
.widget-box { background: #1d1d1d; border-radius: 12px; padding: 20px; /*border: 1px solid var(--border-color);*/ box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.widget-title { color:#ffffff; font-size: 14px; font-weight: 700; margin-bottom: 15px; border-bottom: 1px solid #f3f4f6; padding-bottom: 10px; }
/* User List */
.user-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.user-avatar-small img { border-radius: 50%; border: 1px solid #eee; }
.user-name { color: #000000; display: block; font-size: 13px; font-weight: 600; }
.user-join-date { font-size: 11px; color: var(--text-gray); }
/* Feed Styling */
.compose-card {
background: #1d1d1d;
border-radius: 12px;
padding: 16px;
border: 1px solid #000000;
box-shadow: var(--shadow-sm);
margin-bottom: 20px;
}
.compose-flex { display: flex; gap: 12px; align-items: center; }
.fake-input {
flex: 1; background: var(--bg-light); border-radius: 24px; padding: 12px 20px;
color: var(--text-gray); cursor: pointer; font-size: 14px; transition: 0.2s;
}
.fake-input:hover { background: #e5e7eb; }
/* Container Card */
.feed-card {
background: #1d1d1d;
border-radius: 12px;
padding: 20px 0px;
margin-bottom: 16px;
border: 1px solid #000000;
}
/* Header Profil */
.feed-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 0px 20px;
}
.author-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar img {
border-radius: 50%;
object-fit: cover;
}
.author-meta {
display: flex;
flex-direction: column;
}
.author-name {
font-weight: 700;
font-size: 15px;
color: #1a1a1b;
}
.post-date {
font-size: 12px;
color: #717172;
}
.btn-delete-post {
color: #f03e3e;
opacity: 0.5;
transition: 0.2s;
}
textarea#status-textarea {
line-height: 6px;
}
.btn-delete-post:hover {
opacity: 1;
}
/* Konten Teks & Artikel */
.status-text {
font-size: 16px;
line-height: 1.6;
color: #dfdfdf;
margin-bottom: 10px;
padding: 0px 20px;
}
.article-link-wrapper {
display: block;
background: #f8f9fa;
overflow: hidden;
transition: 0.2s;
}
.article-link-wrapper:hover {
background: #f1f3f5;
}
.article-flex {
display: block;
gap: 15px;
}
.article-thumb img {
width: 100%;
height: auto;
object-fit: cover;
}
.article-info {
padding: 10px 20px;
background-color: #1d1d1d;
}
.feed-body {
}
.article-title {
font-size: 16px;
font-weight: 700;
margin: 0 0 5px 0;
color: #1a1a1b;
}
.article-excerpt {
font-size: 13px;
color: #555;
margin: 0;
}
.feed-actions.spaceing {
padding: 17px 20px 0px;
}
/* Tombol Aksi (Pill Style) */
.feed-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid #2f2f2f;
}
.action-group {
display: flex;
gap: 8px;
}
.pill-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
background: #2a2a2a;
border: none;
font-size: 13px;
font-weight: 600;
color: #57585a;
cursor: pointer;
transition: 0.2s;
}
.pill-btn:hover {
background: #e4e6e9;
}
.pill-btn i {
font-size: 14px;
}
/* Style Khusus Tombol Dukung saat Aktif */
.btn-dukung-ajax.voted {
background: #2a2a2a;
color: #606060;
}
.badge {
background: #ffd700;
color: #000000;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
margin-left: 4px;
}
/* Komentar Group */
.inline-comments-wrapper {
margin-top: 15px;
padding: 15px;
background: #3a3a3a;
border-radius: 10px;
}
.comment-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.ajax-comment-form-pro {
flex: 1;
position: relative;
display: flex;
background: #333333;
border-radius: 20px;
border: 1px solid #3a3a3a;
padding: 5px 15px;
}
.ajax-comment-form-pro input {
flex: 1;
border: none;
padding: 8px 0;
outline: none;
font-size: 13px;
}
.ajax-comment-form-pro button {
background: none;
border: none;
color: #ffd700;
cursor: pointer;
}
/* Detail Article View */
.article-card-full { background: #1d1d1d;
border-radius: 12px;
padding: 32px;
border: 1px solid #000000; }
.btn-back { color: var(--primary-color); text-decoration: none; font-weight: 700; margin-bottom: 20px; display: inline-block; }
.article-title { font-size: 32px; font-weight: 900; color: #ececec; margin-bottom: 20px; line-height: 1.2; }
.article-meta-info { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.author-details strong { display: block; font-size: 15px; }
.author-details span { font-size: 12px; color: var(--text-gray); }
.text-content { font-size: 17px; line-height: 1.8; color: #ffffff; }
/* Suggestion Widget */
.suggestion-item { margin-bottom: 12px; }
.suggest-tag { font-size: 10px; background: #fff3f3; color: var(--primary-color); padding: 2px 8px; border-radius: 4px; font-weight: 700; margin-right: 5px; }
.suggestion-item a { text-decoration: none; font-size: 13px; color: var(--text-dark); font-weight: 500; }
.suggestion-item a:hover { color: var(--primary-color); }
/* Footer */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-logo { font-size: 24px; font-weight: 900; margin-bottom: 15px; }
.footer-logo span { color: var(--primary-color); }
.footer-brand p { color: var(--text-gray); font-size: 14px; line-height: 1.6; }
.footer-links h4, .footer-social h4 { font-size: 14px; font-weight: 700; margin-bottom: 20px; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { text-decoration: none; color: var(--text-gray); font-size: 14px; }
.footer-bottom { text-align: center; margin-top: 50px; padding-top: 20px; border-top: 1px solid #f3f4f6; color: var(--text-gray); font-size: 12px; }
/* Responsive */
@media (max-width: 1024px) {
.main-grid { grid-template-columns: 200px 1fr; }
.sidebar-right { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.main-grid { grid-template-columns: 1fr; }
.sidebar-left { display: none; }
.footer-grid { grid-template-columns: 1fr; text-align: center; }
}