/* ─── TOKENS ─────────────────────────────────── */
    :root {
      --navy:   #23b7ca;
      --gold:   #8B2500;
      --gold-dark: #B06A06;
      --white:  #ffffff;
      --light:  #fdcab95c;
      --muted:  #6b7280;
      --border: #e0e8d8;
      --text:   #1e293b;
      --font-display: 'Poppins', sans-serif;
      --font-body: 'PoppinsNumbers', 'Nunito Sans', sans-serif;
      --radius: 10px;
      --shadow: 0 2px 16px rgba(44,95,14,.08);
    }

    /* ─── BASE ─────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: var(--font-body); color: var(--text); background: var(--white); font-size: 15px; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; }

    /* ─── HERO BANNER ────────────────────────────── */
    .blog-hero {
      background: linear-gradient(120deg, var(--light) 0%, #f4f7fb 55%, #fdcab95c 100%);
      min-height: 280px;
      position: relative;
      overflow: hidden;
    }
    .blog-hero .hero-inner { padding: 56px 0 40px; }
    .blog-hero .eyebrow { color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
    .blog-hero h1 { font-family: 'Poppins', sans-serif !important; font-size: clamp(1.75rem, 5vw, 3.2rem) !important; font-weight: 800 !important; font-style: normal !important; color: var(--navy); line-height: 1.2; margin-bottom: 8px; }
    .blog-hero h1 span { color: var(--gold); }
    .blog-hero p { color: #4b5e7a; font-size: 15px; max-width: 400px; line-height: 1.65; }
    .hero-img { max-height: 280px; object-fit: cover; border-radius: 0 0 0 60px; }

    /* ─── SECTION SPACING ────────────────────────── */
    .blog-body { padding: 48px 0 64px; background: var(--white); }

    /* ─── SECTION TITLE ──────────────────────────── */
    .section-title { font-family: var(--font-display); font-size: 1.45rem; color: var(--navy); font-weight: 900; position: relative; padding-bottom: 10px; margin-bottom: 24px; }
    .section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 36px; height: 3px; background: var(--gold); border-radius: 2px; }

    /* ─── SORT / FILTER ──────────────────────────── */
    .sort-select { border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; color: var(--navy); padding: 7px 32px 7px 12px; font-weight: 700; background: var(--white); appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d1f3c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }

    /* ─── POST CARD ──────────────────────────────── */
    .post-card { display: flex; gap: 20px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border); align-items: flex-start; }
    .post-card:last-of-type { border-bottom: none; }
    .post-thumb { position: relative; flex-shrink: 0; width: 200px; height: 145px; border-radius: var(--radius); overflow: hidden; }
    .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .post-card:hover .post-thumb img { transform: scale(1.05); }
    .post-badge { position: absolute; bottom: 10px; left: 10px; background: var(--white); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; }
    .post-meta { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
    .post-meta i { color: var(--navy); }
    .post-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); font-weight: 900; line-height: 1.3; margin-bottom: 8px; transition: color .2s; cursor: pointer; }
    .post-title:hover { color: var(--gold); }
    .post-excerpt { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 10px; }
    .post-author { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--navy); font-weight: 700; }
    .post-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
    .post-author-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
    .post-author-avatar i { color: var(--gold); font-size: 15px; }

    /* ─── PAGINATION ─────────────────────────────── */
    .custom-pagination .page-item .page-link { border: 1px solid var(--border); color: var(--navy); font-weight: 700; font-size: 14px; border-radius: 6px !important; margin: 0 3px; padding: 7px 14px; transition: background .2s, color .2s; }
    .custom-pagination .page-item.active .page-link { background: var(--navy); border-color: var(--navy); color: var(--white); }
    .custom-pagination .page-item .page-link:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

    /* ─── SIDEBAR ────────────────────────────────── */
    .sidebar-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; }
    .sidebar-card .sidebar-title { font-family: var(--font-display); font-size: 1rem; color: var(--navy); font-weight: 900; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid var(--gold); display: inline-block; }

    /* Search */
    .search-input-wrap { display: flex; border: 1.5px solid var(--border); border-radius: 7px; overflow: hidden; }
    .search-input-wrap input { flex: 1; border: none; padding: 9px 13px; font-size: 13.5px; color: var(--navy); outline: none; }
    .search-input-wrap button { background: var(--navy); border: none; color: var(--white); padding: 9px 15px; cursor: pointer; transition: background .2s; }
    .search-input-wrap button:hover { background: var(--gold); color: var(--navy); }

    /* Categories */
    .category-list { list-style: none; padding: 0; margin: 0; }
    .category-list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
    .category-list li:last-child { border-bottom: none; }
    .category-list li a { color: var(--gold); font-weight: 700; transition: color .2s; }
    .category-list li a:hover { color: var(--gold-dark); }
    .category-list li .cat-count { background: var(--light); color: var(--muted); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }

    /* Popular Posts */
    .popular-post { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
    .popular-post:last-child { border-bottom: none; }
    .popular-post img { width: 68px; height: 58px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
    .popular-post-title { font-size: 13px; font-weight: 800; color: var(--navy); line-height: 1.35; margin-bottom: 4px; cursor: pointer; transition: color .2s; }
    .popular-post-title:hover { color: var(--gold); }
    .popular-post-date { font-size: 11.5px; color: var(--muted); }
    .popular-post-date i { color: var(--navy); }

    /* Newsletter */
    .newsletter-box { background: var(--navy); border-radius: var(--radius); padding: 24px; }
    .newsletter-box .nl-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
    .newsletter-box .nl-icon i { color: var(--gold); font-size: 22px; }
    .newsletter-box h5 { color: var(--white); font-weight: 900; font-size: 1rem; }
    .newsletter-box p { color: #000; font-size: 13px; line-height: 1.55; }
    .newsletter-box input { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: var(--white); font-size: 13.5px; padding: 10px 14px; width: 100%; margin-bottom: 10px; outline: none; }
    .newsletter-box input::placeholder { color: rgba(255,255,255,.45); }
    .newsletter-box .btn-subscribe { background: var(--gold); color: var(--white); font-weight: 800; font-size: 13.5px; border: none; border-radius: 6px; padding: 10px; width: 100%; letter-spacing: .05em; cursor: pointer; transition: background .2s; }
    .newsletter-box .btn-subscribe:hover { background: var(--gold-dark); }

    /* ─── WHATSAPP FLOAT ────────────────────────── */
    .whatsapp-float { position: fixed; bottom: 28px; right: 28px; width: 52px; height: 52px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.45); z-index: 2000; transition: transform .2s; }
    .whatsapp-float:hover { transform: scale(1.1); }
    .whatsapp-float i { color: var(--white); font-size: 26px; }

    /* ─── RESPONSIVE ───────────────────────────── */
    @media (max-width: 991px) {
      .post-thumb { width: 160px; height: 120px; }
      .blog-hero h1 { font-size: 2rem; }
      .hero-img { display: none; }
    }
    @media (max-width: 767px) {
      .post-card { flex-direction: column; }
      .post-thumb { width: 100%; height: 200px; }
      .topbar .topbar-contacts { display: none; }
    }
    @media (max-width: 575px) {
      .blog-hero .hero-inner { padding: 36px 0 28px; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
    }