:root {
    --gold-50: #fef9f0;
    --gold-100: #fcf0d8;
    --gold-200: #f7dca0;
    --gold-300: #eebe58;
    --gold-400: #d4a02c;
    --gold-500: #b8861c;
    --gold-600: #966b14;
    --gold-700: #7a5610;
    --gold-dark: #1a1408;
    --body-bg: #faf8f3;
    --card-bg: #fff;
    --text: #2c2418;
    --text-muted: #8a7d65;
    --border: #e8dfcc;
}

body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--body-bg);
    color: var(--text);
}

/* ======== NAVBAR ======== */
.main-navbar {
    background: var(--gold-dark);
    border-bottom: 2px solid var(--gold-500);
}
.main-navbar .nav-link {
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding: .6rem 1rem !important;
    transition: color .2s;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: var(--gold-300) !important;
}

.main-navbar .nav-link.active { font-weight: 700; }


/* Pagination */
.pagination {
    gap: 0.25rem;
}
.pagination li {
    list-style: none;
}
.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    background-color: var(--brn-card);
    border: 1px solid var(--brn-border);
    color: var(--brn-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s;
}
.pagination li a:hover {
    background-color: var(--brn-accent);
    border-color: var(--brn-accent);
    color: #000;
}
.pagination li.active a,
.pagination li.active span {
    background-color: var(--brn-accent);
    border-color: var(--brn-accent);
    color: #000;
}
.pagination li.disabled a,
.pagination li.disabled span {
    background-color: var(--brn-card);
    border-color: var(--brn-border);
    color: var(--brn-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}


.brand-text {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gold-300);
    letter-spacing: .03em;
}
.brand-icon {
    color: var(--gold-400);
    display: flex; align-items: center;
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: #fff; border: none; font-weight: 600;
}
.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: #fff;
}
.bg-gold { background: var(--gold-500) !important; }
.btn-outline-gold {
    border: 2px solid var(--gold-400); color: var(--gold-400);
    font-weight: 600; background: transparent;
}
.btn-outline-gold:hover { background: var(--gold-400); color: #fff; }

.text-gold-300 { color: var(--gold-300); }

/* Search */
.search-input {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff; font-size: .85rem;
}
.search-input::placeholder { color: rgba(255,255,255,.4); }
.search-input:focus {
    background: rgba(255,255,255,.15);
    border-color: var(--gold-400); color: #fff;
    box-shadow: 0 0 0 .15rem rgba(212,160,44,.2);
}
.search-input-mobile {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff; font-size: .9rem;
}
.search-input-mobile::placeholder { color: rgba(255,255,255,.4); }
.search-input-mobile:focus {
    background: rgba(255,255,255,.15);
    border-color: var(--gold-400); color: #fff;
    box-shadow: 0 0 0 .15rem rgba(212,160,44,.2);
}

.top-lang-btn {
    color: rgba(255,255,255,.6); font-size: .8rem; border: none;
}
.top-lang-btn:hover { color: var(--gold-300); }
.lang-dropdown { border: 1px solid var(--gold-200); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.lang-dropdown .dropdown-item:hover { background: var(--gold-50); }
.lang-dropdown .dropdown-item.active { background: var(--gold-100); color: var(--gold-700); font-weight: 600; }

.mobile-offcanvas { background: var(--gold-dark); color: #fff; }
.mobile-nav-link {
    color: rgba(255,255,255,.6); text-decoration: none;
    transition: all .2s;
}
.mobile-nav-link:hover { background: rgba(212,160,44,.12); color: var(--gold-300); }

.border-white-10 { border-color: rgba(255,255,255,.1) !important; }
.text-white-50 { color: rgba(255,255,255,.5) !important; }
.text-white-30 { color: rgba(255,255,255,.3) !important; }

/* ======== FOOTER ======== */
.site-footer {
    background: var(--gold-dark);
    color: #fff;
    border-top: 2px solid var(--gold-500);
}

/* ======== HERO ======== */
.hero-section { margin-bottom: 2rem; }
.hero-card {
    position: relative; height: 420px; overflow: hidden;
}
.hero-card img {
    width: 100%; height: 100%; object-fit: cover;
}
.hero-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #2a1f0a, #1a1408, #2a1f0a);
}
.hero-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    padding: 3rem 0 2.5rem;
}
.hero-title {
    color: #fff; font-size: 2rem; font-weight: 900;
    line-height: 1.25; max-width: 800px;
}
.hero-desc {
    color: rgba(255,255,255,.7); font-size: .95rem;
    max-width: 650px; line-height: 1.6; margin-top: .5rem;
}
.hero-meta {
    display: flex; gap: 1.25rem; margin-top: 1rem;
    color: rgba(255,255,255,.45); font-size: .85rem;
}

@media (max-width: 991px) {
    .hero-card { height: 340px; }
    .hero-title { font-size: 1.4rem; }
}
@media (max-width: 575px) {
    .hero-card { height: 260px; }
    .hero-title { font-size: 1.15rem; }
}

/* ======== SECTION TITLE ======== */
.section-title {
    font-size: 1.4rem; font-weight: 800; color: var(--text);
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: 1.5rem;
}
.title-icon { color: var(--gold-500); font-size: 1.2rem; }

/* ======== ARTICLE CARD ======== */
.article-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 1rem; overflow: hidden;
    transition: all .25s; height: 100%;
    display: flex; flex-direction: column;
    width: 100%;
    padding: 0 !important;
}
a.text-decoration-none .article-card {
    width: 100%;
}
.article-card img,
a .article-card img,
.card-img-top,
.card-img-top-sm {
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    height: auto !important;
    flex-shrink: 0;
}
.article-card .card-img-top { height: 200px !important; }
.article-card .card-img-top-sm { height: 140px !important; }
.article-card:hover {
    border-color: var(--gold-300);
    box-shadow: 0 8px 30px rgba(180,120,28,.12);
    transform: translateY(-2px);
}
.article-card .card-img-top { width: 100% !important; height: 200px !important; object-fit: cover; display: block; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-sizing: border-box; }
.article-card .card-img-top-sm { width: 100% !important; height: 140px !important; object-fit: cover; display: block; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-sizing: border-box; }
.article-card img:not(.card-img-top):not(.card-img-top-sm) { width: 100% !important; height: auto; display: block; margin: 0 !important; padding: 0 !important; max-width: none !important; border-radius: 0 !important; box-sizing: border-box; }

.article-card .card-body { padding: 1.25rem; flex-grow: 1; }
.article-card .card-title {
    font-size: 1.05rem; font-weight: 700; line-height: 1.4; color: var(--text);
}
.article-card .card-title-sm { font-size: .95rem; }
.article-card .card-text { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.article-card .badge-category {
    background: var(--gold-100); color: var(--gold-700);
    font-size: .7rem; font-weight: 600; text-decoration: none;
    padding: .2rem .6rem; border-radius: .3rem;
}
.article-card .meta { font-size: .75rem; color: #aaa18e; }

/* Big Card (category block) */
.article-card-big {
    background: #fff; border: 1px solid var(--border);
    border-radius: 1rem; overflow: hidden;
    transition: all .25s; height: 100%;
}
.article-card-big:hover {
    border-color: var(--gold-300);
    box-shadow: 0 8px 30px rgba(180,120,28,.12);
    transform: translateY(-2px);
}
.article-card-big img {
    width: 100%; height: 220px; object-fit: cover;
}

/* Category block */
.category-block { padding: 2.5rem 0; }
.category-block:nth-child(even) { background: #fff; }

/* List item */
.list-item { transition: all .2s; border-radius: .5rem; }
.list-item:hover { background: var(--gold-50); }
.list-thumb { width: 120px; height: 80px; border-radius: .5rem; overflow: hidden; }
.list-thumb img { width: 100%; height: 100%; object-fit: cover; }

.badge-category {
    background: var(--gold-100); color: var(--gold-700);
    font-size: .7rem; font-weight: 600; text-decoration: none;
    padding: .2rem .6rem; border-radius: .3rem; white-space: nowrap;
}

/* ======== PAGINATION ======== */
.pagination .page-link {
    color: var(--gold-600); border-color: #ede4d0; font-weight: 500;
}
.pagination .active .page-link {
    background: var(--gold-500); border-color: var(--gold-500); color: #fff;
}
.pagination .page-link:hover { background: var(--gold-50); color: var(--gold-700); }

/* ======== Breadcrumb ======== */
.breadcrumb { background: transparent; }
.breadcrumb a { color: var(--gold-600); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-800); }

/* ======== Sub Nav ======== */
.sub-nav { border-bottom: 1px solid var(--border); }
.sub-nav a {
    font-size: .85rem; color: var(--text-muted); text-decoration: none;
    padding: .5rem .75rem; font-weight: 500; transition: color .2s;
}
.sub-nav a:hover, .sub-nav a.active { color: var(--gold-600); font-weight: 600; }

/* Tag Badge */
.tag-badge {
    background: var(--gold-50); color: var(--gold-700);
    border: 1px solid var(--gold-200);
    font-size: .8rem; padding: .35rem .75rem; border-radius: .35rem;
    text-decoration: none; transition: all .2s;
}
.tag-badge:hover { background: var(--gold-400); color: #fff; border-color: var(--gold-400); }

/* List Article Item */
.list-article-item {
    border-bottom: 1px solid var(--border); padding: 1.25rem 0; transition: all .2s;
}
.list-article-item:last-child { border-bottom: none; }
.list-article-item:hover { background: rgba(212,160,44,.03); }
.list-article-item h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin-bottom: .35rem; }
.list-article-item h3 a { color: var(--text); text-decoration: none; }
.list-article-item h3 a:hover { color: var(--gold-500); }
.list-article-item .excerpt { font-size: .88rem; color: var(--text-muted); line-height: 1.5; }
.list-article-item .thumb { width: 160px; height: 100px; object-fit: cover; border-radius: .5rem; }

/* Sidebar */
.sidebar-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.5rem;
}
.sidebar-card h5 {
    font-size: .85rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--gold-700);
    margin-bottom: 1rem; padding-bottom: .75rem;
    border-bottom: 2px solid var(--gold-200);
}

/* 404 */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; }

/* Article Body */
.article-body { line-height: 1.85; font-size: 16px; color: var(--text); }
.article-body p { margin-bottom: 1.5rem; }
.article-body h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 1rem; color: var(--gold-800); }
.article-body h3 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; }
.article-body blockquote { border-left: 4px solid var(--gold-400); padding: 1rem 1.25rem; margin: 1.5rem 0; background: var(--gold-50); border-radius: 0 8px 8px 0; color: var(--gold-800); }
.article-body a { color: var(--gold-600); text-decoration: underline; }
.article-body a:hover { color: var(--gold-800); }

/* Responsive */
@media (max-width: 991px) {
    .article-card .card-img-top { height: 180px; }
    .article-card-big img { height: 180px; }
}
@media (max-width: 575px) {
    .brand-text { font-size: 1.1rem; }
}
