/* ==========================================
   1. CUSTOM PROPERTIES (VARIABLES)
   ========================================== */
:root {
    --primary-color: #003366;
    --bg-main: #f1f1f1;
    --text-main: #222222;        /* Warna teks utama */
    --text-muted: #555555;       /* Teks meta/tanggal */
    --border-light: #cccccc;     /* Border jelas */
    --wa-color: #25d366;
    --wa-hover: #1eb954;
    --link-color: #0044cc;
}

/* ==========================================
   2. BASE & RESET
   ========================================== */
html {
    font-size: 16px; /* Diturunkan sedikit dari 16px sebagai patokan dasar rem */
}

body { 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    font-size: 1rem; /* 15px */
    line-height: 1.55;
}

.padding-10 { padding: 10px; }
.margin-top-20 { margin-top: 20px; }
.margin-bottom-10 { margin-bottom: 10px; }

/* Typography */
h1 { font-size: 1.7rem; font-weight: bold; color: var(--text-main); }
h2 { font-size: 1.4rem; font-weight: bold; color: var(--text-main); }

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.woff2') format('woff2');
    font-display: swap;
}

/* ==========================================
   3. NAVBAR STYLING
   ========================================== */
.navbar.bg-primary { 
    background-color: var(--primary-color); 
    border: none; 
}
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .navbar-nav > li > a { 
    color: #ffffff !important; 
    font-weight: 500;
    font-size: 0.95rem;
}
.navbar.bg-primary .navbar-nav > li > a:hover,
.navbar.bg-primary .navbar-nav > li > a:focus,
.navbar.bg-primary .navbar-nav > .open > a { 
    background-color: rgba(255, 255, 255, 0.15) !important; 
    color: #ffffff !important; 
}
.navbar.bg-primary .navbar-nav > li > a .caret { 
    border-top-color: #ffffff !important; 
    border-bottom-color: #ffffff !important; 
}
.navbar.bg-primary .navbar-toggle .icon-bar { 
    background-color: #ffffff !important; 
}

/* Multi-level Dropdown */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu { display: block; }
.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover > a:after { border-left-color: #fff; }
.dropdown-submenu.pull-left { float: none; }
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px;
}

/* ==========================================
   4. CARD & BLOG LAYOUT
   ========================================== */
.row.display-flex { display: flex; flex-wrap: wrap; }
.card-blog-col { display: flex; margin-bottom: 20px; }

.thumbnail.card-blog { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 100%; 
    height: 100%; 
    margin-bottom: 0; 
    background-color: #ffffff;
    border: 1px solid var(--border-light);
}

.img-wrapper { 
    height: 170px; 
    overflow: hidden; 
    background-color: #e5e5e5; 
}
.img-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.thumbnail.card-blog .caption { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}

.card-title { 
    font-size: 1rem; /* Diturunkan dari 1.1rem */
    font-weight: bold; 
    color: var(--text-main);
    margin-top: 5px; 
    margin-bottom: 8px; 
    line-height: 1.35; 
    height: 2.7em; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
}

.card-text { 
    flex-grow: 1; 
    font-size: 0.9rem; /* Diturunkan dari 0.95rem */
    color: var(--text-muted);
    margin-bottom: 10px; 
}

.card-date { 
    margin-top: auto; 
    color: var(--text-muted);
    font-size: 0.825rem; /* Diturunkan dari 0.875rem */
    font-weight: 500;
}

/* ==========================================
   5. MAIN PRODUCT LIST & METADATA
   ========================================== */
.main-heading { margin-top: 0; }
.section-divider { margin: 10px 0 20px 0; border-top: 1px solid var(--border-light); }

.product-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-light);
}
.product-img-wrapper { margin-bottom: 10px; }

.title-list {
    margin-top: 0;
    font-size: 18px; /* Diturunkan dari 20px */
    font-weight: bold;
}
.title-link {
    text-decoration: none;
    color: var(--text-main);
}
.title-link:hover { color: var(--link-color); }

.product-meta {
    font-size: 0.75rem; /* Diturunkan dari 0.9rem */
    color: var(--text-muted) !important;
    opacity: 1 !important;
    margin-bottom: 8px;
    font-weight: 500;
}
.product-meta time,
.product-meta .meta-item {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}
.meta-separator { 
    margin: 0 5px; 
    color: #888888;
}

.product-desc { 
    color: var(--text-main); 
    font-size: 0.935rem; /* Diturunkan dari 1rem */
    line-height: 1.55;
}
.product-action-row { margin-top: 15px; }

.price-badge {
    opacity: 1 !important;
    font-weight: bold !important;
    font-size: 14px !important; /* Diturunkan dari 15px */
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
}
.action-button-col { margin-top: 5px; }

/* ==========================================
   6. PRODUCT & BLOG DETAIL PAGES
   ========================================== */
.product-title, .blog-title {
    font-size: 1.55rem; /* Diturunkan dari 1.75rem */
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 10px;
}
.meta-product, .meta-blog { 
    margin-bottom: 15px; 
    color: var(--text-muted) !important;
    opacity: 1 !important;
}
.responsive-content { margin-bottom: 20px; }
.article-content { margin-bottom: 30px; line-height: 1.6; font-size: 0.95rem; }
.price-box { margin-bottom: 20px; }
.price-text {
    font-weight: bold;
    font-size: 1.35rem; /* Diturunkan dari 1.5rem */
    color: #d9534f;
}
.action-buttons { margin-bottom: 20px; }
.embed-video { margin-bottom: 20px; }

.update-log-box {
    margin-top: 20px;
    padding: 12px;
    background: #ffffff;
    border-left: 4px solid #5bc0de;
    border-top: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.update-log-title {
    margin-top: 0;
    font-weight: bold;
    color: var(--text-main);
}

/* Share & Related Section */
.share-box {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-light);
}
.share-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--text-main);
}
.related-title {
    font-size: 1.15rem; /* Diturunkan dari 1.25rem */
    font-weight: bold;
    color: var(--text-main);
    border-left: 4px solid #d9534f;
    padding-left: 8px;
}
.related-item { margin-bottom: 15px; }
.related-td { vertical-align: middle; }
.related-img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin-right: 10px;
}
.related-heading, .related-link {
    font-size: 0.935rem; /* Diturunkan dari 1rem */
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 5px;
}
.related-link:hover { color: var(--link-color); }

/* ==========================================
   7. SIDEBAR WIDGETS
   ========================================== */
.sidebar-widget {
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.sidebar-search-widget { margin-bottom: 15px; }
.sidebar-widget .panel-heading { padding: 10px 12px; }
.sidebar-widget .panel-title {
    font-size: 13.5px; /* Diturunkan dari 15px */
    font-weight: bold;
    letter-spacing: 0.4px;
}
.sidebar-widget .panel-body-no-padding { padding: 0; }
.sidebar-widget .panel-body-padding { padding: 10px; }

.sidebar-list { margin-bottom: 0; }
.sidebar-list .list-group-item {
    padding: 8px 10px;
    border-left: none;
    border-right: none;
    border-color: var(--border-light);
}
.sidebar-list .list-group-item:first-child { border-top: none; }
.sidebar-list .list-group-empty { padding: 12px; color: var(--text-muted); }

.sidebar-thumb {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}
.sidebar-item-title {
    font-size: 13px; /* Diturunkan dari 14px */
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sidebar-meta { margin-top: 4px; }
.sidebar-meta .text-muted { 
    font-size: 11px; /* Diturunkan dari 12px */
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* ==========================================
   8. ALERTS & CONTACT BUTTONS
   ========================================== */
.alert-order-box {
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 12px; /* Diturunkan dari 13px */
}
.alert-order-link {
    color: #000000 !important;
    font-weight: bold;
    text-decoration: underline;
}
.alert-confirm-box {
    padding: 8px 10px;
    margin-bottom: 0;
    font-size: 12px; /* Diturunkan dari 13px */
}

.bank-card {
    background: #ffffff;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    margin-bottom: 10px;
}
.bank-card-last { margin-bottom: 0; }
.bank-rekening {
    font-size: 13px; /* Diturunkan dari 14px */
    color: var(--text-main);
    font-weight: 500;
}

.wa-button-container { margin-bottom: 10px; }
.wa-button-container-alt { margin-bottom: 12px; }
.wa-button {
    display: inline-block;
    background: var(--wa-color);
    color: #ffffff !important;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 12px; /* Diturunkan dari 13px */
    text-decoration: none !important;
    margin-top: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.wa-button:hover { 
    background: var(--wa-hover); 
    color: #ffffff !important;
}

.sidebar-address { margin-bottom: 10px; color: var(--text-main); font-size: 0.875rem; }
.sidebar-map-iframe {
    border: 0;
    border-radius: 4px;
}

/* Social Icons */
.social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: #333333;
    color: #ffffff !important;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.social-icon:hover {
    transform: translateY(-2px);
    text-decoration: none;
}
.social-icon.facebook:hover { background-color: #3b5998; }
.social-icon.instagram:hover { background-color: #e1306c; }
.social-icon.youtube:hover { background-color: #ff0000; }
.social-icon.whatsapp:hover { background-color: var(--wa-color); }

/* ==========================================
   9. MEDIA QUERIES
   ========================================== */
@media (max-width: 767px) {
    .text-right-sm { 
        text-align: left !important; 
        margin-top: 10px; 
    }
    .style-mobile-btn .btn { 
        width: 100%; 
        display: block; 
    }
}
@media (min-width: 768px) {
    .text-right-sm { 
        text-align: right !important; 
    }
}