:root {
    --gi-accent: #111;
    --gi-border: #e5e5e5;
    --gi-meta-color: #666;
}

/* =========================
   SECTION HEADER
========================= */

.gi-section-header {
    margin-bottom: 28px;
}

.gi-section-header h2 {
    font-weight: 800;
    letter-spacing: .5px;
    margin: 0;
    display: inline-block;
}

.gi-section-header .gi-section-divider {
    margin-top: 10px;
    height: 3px;
    width: 40px;
    background: #111;
}

/* =========================
   GRID BASE
========================= */

.gi-grid {
    display: grid;
    gap: 30px;
}

.gi-grid.default {
    grid-template-columns: repeat(3, 1fr);
}

.gi-grid.featured {
    grid-template-columns: 2fr 1fr 1fr;
}

.gi-grid.featured .gi-featured {
    grid-column: span 2;
}

.gi-grid.masonry {
    column-count: 3;
    column-gap: 30px;
    display: block;
}

.gi-grid.masonry .gi-grid-item {
    break-inside: avoid;
    margin-bottom: 30px;
}

.gi-grid.asymmetric {
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.gi-grid.asymmetric .gi-grid-item:nth-child(3) {
    grid-column: span 2;
}

.gi-grid-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* =========================
   IMAGE / THUMB
========================= */

.gi-thumb {
    overflow: hidden;
    display: block;
    width: 100%;
}

.gi-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

/* =========================
   GRID CONTENT
========================= */

.gi-grid-content h3 {
    margin-top: 12px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0;
}

.gi-excerpt {
    font-size: 15px;
    line-height: 1.6;
    margin: 10px 0;
}

.gi-meta {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}

.gi-category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    display: inline-block;
    margin-bottom: 6px;
}

/* =========================
   GRID STYLE PRESETS
========================= */

.gi-grid.preset-card .gi-grid-item {
    background: #fff;
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

.gi-grid.preset-card .gi-grid-content {
    padding: 16px 18px 18px;
}

.gi-grid.preset-minimal .gi-grid-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.gi-grid.preset-cable .gi-grid-item {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 30px;
}

.gi-grid.preset-cable .gi-cable-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 6px;
    display: inline-block;
}

/* =========================
   HOVER SYSTEM
========================= */

.gi-grid.hover-zoom .gi-grid-item:hover .gi-thumb img {
    transform: scale(1.05);
}

.gi-grid.hover-lift .gi-grid-item {
    transition: transform .3s ease;
}

.gi-grid.hover-lift .gi-grid-item:hover {
    transform: translateY(-6px);
}

/* =========================
   LIST
========================= */

.gi-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.gi-list-item {
    position: relative;
}

.gi-list-item a {
    display: flex;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.gi-list-thumb {
    flex-shrink: 0;
    width: 160px;
    overflow: hidden;
}

.gi-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.gi-list-content {
    flex: 1;
    min-width: 0;
}

.gi-list-content h4 {
    font-weight: 700;
    margin: 4px 0 0;
    line-height: 1.3;
}

.gi-list-excerpt {
    font-size: 14px;
    margin: 8px 0 0;
    line-height: 1.6;
}

.gi-divider {
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e5e5;
}

/* LIST HOVER */
.gi-list.hover-lift .gi-list-item {
    transition: transform .3s ease;
}

.gi-list.hover-lift .gi-list-item:hover {
    transform: translateY(-4px);
}

/* LIST NUMBERED */
.gi-list.numbered .gi-list-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.gi-number {
    font-size: 26px;
    font-weight: 900;
    color: #e5e5e5;
    line-height: 1;
    flex-shrink: 0;
    min-width: 36px;
}

/* LIST TIMELINE */
.gi-list.timeline .gi-list-item {
    padding-left: 28px;
    border-left: 2px solid #e5e5e5;
    position: relative;
}

.gi-list.timeline .gi-list-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
}

/* =========================
   HERO
========================= */

.gi-hero-wrapper {
    position: relative;
    margin-bottom: 100px;
    z-index: 1; /* pastikan hero tidak melampaui drawer/overlay */
    isolation: isolate; /* cegah stacking context naik akibat admin bar / Elementor */
}

.gi-hero-media {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

.gi-hero-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.gi-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-hero-card {
    position: absolute;
    left: 50%;
    bottom: -80px;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px;
    padding: 40px 50px;
    background: #f4f4f4;
    border: 1px solid #ddd;
}

.gi-hero-card > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gi-hero-card h1 {
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 12px;
}

.gi-hero-card p {
    margin: 0 0 12px;
}

/* =========================
   SEARCH WIDGET
========================= */

.gi-search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible !important;
}

.elementor-widget-gi_search_minimal {
    overflow: visible !important;
}

/* JANGAN pakai display !important di sini —
   Elementor menyembunyikan widget via display:none pada .elementor-widget-container.
   Kalau di-override !important, fitur "Sembunyikan di Mobile" tidak akan bekerja. */
.elementor-widget-gi_search_minimal .elementor-widget-container {
    overflow: visible !important;
    display: inline-flex;   /* tanpa !important agar Elementor bisa override saat hidden */
    align-items: center;
}

.gi-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    /* Tidak pakai visibility/opacity !important —
       Elementor responsive hiding bekerja via visibility:hidden atau display:none
       pada parent .elementor-widget-container, bukan pada elemen ini langsung.
       Jadi kita tidak perlu override di sini. */
    overflow: visible !important;
    color: #111111;
}

.gi-search-toggle svg {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    display: block !important;
    visibility: visible !important;
    pointer-events: none;
    overflow: visible !important;
    flex-shrink: 0;
    fill: none !important;          /* cegah tema/Elementor override jadi solid */
    stroke: currentColor;
}

/* Paksa semua child SVG element di dalam toggle tidak ter-fill */
.gi-search-toggle svg circle,
.gi-search-toggle svg line,
.gi-search-toggle svg path,
.gi-search-toggle svg rect,
.gi-search-toggle svg polyline {
    fill: none !important;
    stroke: currentColor;
}

.gi-search-form {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    min-width: 240px;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.gi-search-form.active {
    display: block;
}

.gi-search-form input[type="search"] {
    width: 100%;
    border: 1px solid #ddd;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.gi-global-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.8);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.gi-global-search-overlay.active {
    display: flex;
}

.gi-overlay-inner {
    width: 90%;
    max-width: 600px;
}

.gi-overlay-inner input[type="search"] {
    width: 100%;
    font-size: 22px;
    padding: 16px 20px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}


/* =========================================================
   RESPONSIVE — TABLET  ≤ 1024px
   Pakai !important karena Elementor bisa generate inline
   style yang override media query biasa
========================================================= */

@media (max-width: 1024px) {

    .gi-grid.default {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gi-grid.featured {
        grid-template-columns: 1fr 1fr !important;
    }

    .gi-grid.featured .gi-featured {
        grid-column: span 2 !important;
    }

    .gi-grid.masonry {
        column-count: 2 !important;
    }

    .gi-grid.asymmetric {
        grid-template-columns: 1fr 1fr !important;
    }

    .gi-grid.asymmetric .gi-grid-item:nth-child(3) {
        grid-column: span 2 !important;
    }

    .gi-hero-media {
        height: 420px !important;
    }

    .gi-hero-card {
        padding: 28px 32px !important;
        width: 94% !important;
        bottom: -65px !important;
    }

    .gi-hero-wrapper {
        margin-bottom: 80px !important;
    }

    .gi-list-thumb {
        width: 130px !important;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE  ≤ 767px
   !important wajib untuk melawan:
   - Elementor inline style dari add_responsive_control
   - CSS spesifisitas tinggi dari Elementor core
========================================================= */

@media (max-width: 767px) {

    /* ----- GRID: semua layout jadi 1 kolom ----- */

    .gi-grid.default,
    .gi-grid.featured,
    .gi-grid.asymmetric {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .gi-grid.featured .gi-featured,
    .gi-grid.asymmetric .gi-grid-item:nth-child(3) {
        grid-column: span 1 !important;
    }

    .gi-grid.masonry {
        column-count: 1 !important;
    }

    /* ----- LIST: stack vertikal ----- */

    .gi-list {
        gap: 20px !important;
    }

    .gi-list-item a {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .gi-list-thumb {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: unset !important;
    }

    .gi-list-thumb img {
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }

    .gi-list.numbered .gi-list-item {
        flex-direction: column !important;
    }

    /* ----- HERO: static, tidak mengambang ----- */

    .gi-hero-wrapper {
        margin-bottom: 0 !important;
    }

    .gi-hero-media {
        height: 220px !important;
    }

    .gi-hero-card {
        position: static !important;
        transform: none !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
    }

    .gi-hero-card h1 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    /* ----- SECTION HEADER ----- */

    .gi-section-header {
        margin-bottom: 16px !important;
    }

    /* ----- SEARCH ----- */

    .gi-search-form {
        right: auto !important;
        left: 0 !important;
        min-width: 88vw !important;
    }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE  ≤ 480px
========================================================= */

@media (max-width: 480px) {

    .gi-hero-media {
        height: 180px !important;
    }

    .gi-hero-card {
        padding: 16px 12px !important;
    }

    .gi-hero-card h1 {
        font-size: 17px !important;
    }

    .gi-grid {
        gap: 16px !important;
    }
}


/* =========================================================
   READ MORE BUTTON — di pojok kanan section header
========================================================= */

.gi-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.gi-section-header-inner {
    flex: 1;
    min-width: 0;
}

.gi-readmore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    transition: opacity .2s;
}

.gi-readmore:hover { opacity: .7; }

.gi-readmore.link {
    color: inherit;
    background: none;
    border: none;
    padding: 0;
}

.gi-readmore.outline {
    border: 1.5px solid currentColor;
    padding: 5px 12px;
    border-radius: 3px;
    background: transparent;
}

.gi-readmore.solid {
    padding: 6px 14px;
    border-radius: 3px;
    color: #fff !important;
}

.gi-readmore-arrow {
    font-size: 14px;
    display: inline-block;
    transition: transform .2s;
}

.gi-readmore:hover .gi-readmore-arrow { transform: translateX(3px); }


/* =========================================================
   TICKER / BREAKING NEWS
========================================================= */

.gi-ticker {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 42px;
    background: #111;
}

.gi-ticker-label {
    flex-shrink: 0;
    background: #e62020;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
}

.gi-ticker-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.gi-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: #fff;
    font-size: 13px;
    padding-left: 20px;
    animation: gi-ticker-scroll linear infinite;
    will-change: transform;
}

.gi-ticker-track a {
    color: inherit;
    text-decoration: none;
    margin-right: 8px;
}

.gi-ticker-track a:hover { text-decoration: underline; }

.gi-ticker-sep { color: rgba(255,255,255,.4); }

@keyframes gi-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* =========================================================
   POST TABS
========================================================= */

.gi-post-tabs {}

.gi-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.gi-tab-nav::-webkit-scrollbar { display: none; }

.gi-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    white-space: nowrap;
    color: #888;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}

.gi-tab-btn.active {
    color: #111;
    border-bottom-color: #111;
}

.gi-tab-btn:hover:not(.active) { color: #555; }

.gi-tab-panel {
    transition: opacity .2s;
}

.gi-tabs-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}

.gi-no-posts {
    color: #999;
    font-size: 14px;
    padding: 20px 0;
}


/* =========================================================
   INDEPTH / INVESTIGASI
========================================================= */

/* --- Label --- */
.gi-indepth-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    background: #c0392b;
    padding: 3px 8px;
    margin-bottom: 10px;
}

.gi-indepth-main-title {
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 14px;
}

.gi-indepth-title {
    font-weight: 700;
    line-height: 1.3;
    margin: 6px 0 6px;
}

/* --- MAGAZINE --- */
.gi-magazine-layout {
    display: grid;
    grid-template-columns: 3fr 1.4fr;
    gap: 40px;
    align-items: start;
}

.gi-magazine-hero a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gi-magazine-hero-content {
    padding-top: 16px;
}

.gi-magazine-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-left: 2px solid #e5e5e5;
    padding-left: 28px;
}

.gi-magazine-side-item a {
    display: flex;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.gi-magazine-side-item .gi-list-thumb {
    flex-shrink: 0;
    width: 90px;
    overflow: hidden;
}

.gi-magazine-side-item .gi-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- DOSSIER --- */
.gi-dossier-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gi-dossier-item {
    position: relative;
    padding: 24px 24px 24px 32px;
    background: #f8f8f8;
    margin-bottom: 4px;
    transition: background .2s;
}

.gi-dossier-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #c0392b;
}

.gi-dossier-item a {
    display: flex;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.gi-dossier-item:hover { background: #f0f0f0; }

.gi-dossier-thumb {
    flex-shrink: 0;
    width: 200px;
    overflow: hidden;
}

.gi-dossier-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-dossier-content { flex: 1; min-width: 0; }

/* --- LONGREAD --- */
.gi-longread {
    position: relative;
}

.gi-longread a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gi-longread-media {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.gi-longread-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.gi-longread:hover .gi-longread-media img { transform: scale(1.03); }

.gi-longread-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 100%);
}

.gi-longread-content {
    padding: 28px 0 0;
}

.gi-longread-bar {
    height: 4px;
    width: 60px;
    background: #c0392b;
    margin-bottom: 20px;
}

/* --- SERIES --- */
.gi-series-wrapper {}

.gi-series-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.gi-series-badge {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: #c0392b;
    color: #fff;
    padding: 4px 10px;
}

.gi-series-count {
    font-size: 13px;
    color: #888;
}

.gi-series-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gi-series-item {
    display: flex;
    gap: 0;
    background: #f8f8f8;
}

.gi-series-number-col {
    flex-shrink: 0;
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 8px;
}

.gi-indepth-number {
    font-size: 20px;
    font-weight: 900;
    color: #c0392b;
    line-height: 1;
}

.gi-series-progress {
    width: 2px;
    flex: 1;
    background: #e5e5e5;
    position: relative;
    overflow: hidden;
}

.gi-series-progress-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #c0392b;
    transition: height .4s;
}

.gi-series-body {
    flex: 1;
    min-width: 0;
}

.gi-series-body a {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
    padding: 20px 20px 20px 0;
}

.gi-series-thumb {
    flex-shrink: 0;
    width: 130px;
    overflow: hidden;
}

.gi-series-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-series-content { flex: 1; min-width: 0; }


/* =========================================================
   TRENDING / MOST READ
========================================================= */

.gi-trending {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gi-trending-item {
    border-bottom: 1px solid #eee;
}

.gi-trending-item:last-child { border-bottom: none; }

.gi-trending-item a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    text-decoration: none;
    color: inherit;
}

.gi-trending-num {
    font-size: 28px;
    font-weight: 900;
    color: #ddd;
    line-height: 1;
    flex-shrink: 0;
    min-width: 38px;
}

.gi-trending-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    overflow: hidden;
}

.gi-trending-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-trending-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gi-trending-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    display: block;
}

.gi-trending--minimal .gi-trending-item a {
    padding: 10px 0;
}


/* =========================================================
   SOCIAL SHARE
========================================================= */

.gi-social-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gi-share-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #888;
    margin-right: 4px;
}

.gi-share-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gi-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 38px;
    height: 38px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    transition: opacity .2s, transform .15s;
}

.gi-share-btn:hover { opacity: .85; transform: translateY(-2px); }

.gi-share-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.gi-share-btn.minimal {
    background: none !important;
    color: #555 !important;
    border: 1px solid #ddd;
}

.gi-share-btn.outline {
    background: transparent !important;
    border: 1.5px solid currentColor;
}

.gi-share-btn-label {
    font-size: 11px;
    white-space: nowrap;
}

/* Floating layout */
.gi-social-share--floating {
    flex-direction: column;
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 10px 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.gi-social-share--floating .gi-share-buttons {
    flex-direction: column;
}

.gi-social-share--floating .gi-share-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin: 0 0 8px;
}

/* Stacked layout */
.gi-social-share--stacked {
    flex-direction: column;
    align-items: flex-start;
}

.gi-social-share--stacked .gi-share-buttons {
    flex-direction: column;
    width: 100%;
}

.gi-social-share--stacked .gi-share-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 0 14px;
    height: 40px;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.gi-newsletter {
    padding: 36px 32px;
    background: #f4f4f4;
}

.gi-newsletter--banner {
    text-align: center;
    padding: 48px 40px;
}

.gi-newsletter-heading {
    font-weight: 800;
    margin: 0 0 8px;
}

.gi-newsletter-subheading {
    margin: 0 0 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

.gi-newsletter-form {}

.gi-newsletter-fields {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gi-newsletter--stacked .gi-newsletter-fields {
    flex-direction: column;
}

.gi-newsletter-input {
    flex: 1;
    min-width: 180px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    font-size: 14px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.gi-newsletter-input:focus { border-color: #111; }

.gi-newsletter-btn {
    padding: 10px 22px;
    background: #111;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
}

.gi-newsletter-btn:hover { opacity: .8; }
.gi-newsletter-btn:disabled { opacity: .5; cursor: not-allowed; }

.gi-newsletter-privacy {
    margin: 10px 0 0;
    font-size: 12px;
    color: #aaa;
}

.gi-newsletter-msg {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    min-height: 20px;
}

.gi-newsletter-success { color: #27ae60; }
.gi-newsletter-error   { color: #e74c3c; }


/* =========================================================
   RESPONSIVE — TABLET ≤ 1024px
========================================================= */

@media (max-width: 1024px) {

    .gi-magazine-layout {
        grid-template-columns: 2fr 1.2fr !important;
        gap: 28px !important;
    }

    .gi-tabs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gi-dossier-thumb {
        width: 150px !important;
    }

    .gi-series-thumb {
        width: 100px !important;
    }

    .gi-social-share--floating {
        display: none !important;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE ≤ 767px
========================================================= */

@media (max-width: 767px) {

    /* Read More */
    .gi-section-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .gi-readmore {
        font-size: 12px !important;
    }

    /* Ticker */
    .gi-ticker-track { font-size: 12px !important; }

    /* Tabs */
    .gi-tab-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .gi-tabs-grid {
        grid-template-columns: 1fr !important;
    }

    /* Indepth Magazine */
    .gi-magazine-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .gi-magazine-sidebar {
        border-left: none !important;
        border-top: 2px solid #e5e5e5 !important;
        padding-left: 0 !important;
        padding-top: 24px !important;
        margin-top: 24px !important;
    }

    /* Indepth Dossier */
    .gi-dossier-item a {
        flex-direction: column !important;
    }

    .gi-dossier-thumb {
        width: 100% !important;
    }

    /* Indepth Series */
    .gi-series-body a {
        flex-direction: column !important;
    }

    .gi-series-thumb {
        width: 100% !important;
    }

    .gi-series-number-col {
        width: 40px !important;
    }

    /* Trending */
    .gi-trending-num { font-size: 22px !important; min-width: 30px !important; }

    /* Share */
    .gi-social-share--floating {
        display: none !important;
    }

    /* Newsletter */
    .gi-newsletter {
        padding: 24px 18px !important;
    }

    .gi-newsletter-fields {
        flex-direction: column !important;
    }

    .gi-newsletter-input {
        min-width: unset !important;
        width: 100% !important;
    }

    .gi-newsletter-btn {
        width: 100% !important;
    }
}


/* =========================================================
   GI ARTICLE HEADER — v5.1
   Widget byline + share bar untuk Single Post Template
========================================================= */

.gi-article-header {
    font-family: inherit;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.gi-article-header.gi-ah-has-divider {
    border-bottom: 1px solid #e5e5e5;
}

/* Kategori label di atas */
.gi-ah-category-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.gi-ah-category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #c0392b;
}

.gi-ah-category:hover { opacity: .8; }

.gi-ah-divider {
    display: inline-block;
    flex: 1;
    height: 1px;
    background: #e5e5e5;
    max-width: 60px;
}

/* Row utama: byline kiri + share kanan */
.gi-article-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Byline */
.gi-article-header-byline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gi-ah-avatar-link { display: block; flex-shrink: 0; }

.gi-ah-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #c0392b;
}

.gi-article-header-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.gi-ah-author {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-weight: 600;
    color: #111;
}

.gi-ah-prefix {
    font-weight: 400;
    color: #666;
}

.gi-ah-author-name {
    color: #111;
    text-decoration: none;
    font-weight: 700;
}

.gi-ah-author-name:hover { text-decoration: underline; }

.gi-ah-meta-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #777;
    font-size: 12px;
}

.gi-ah-sep { color: #ccc; }

.gi-ah-readtime { font-style: italic; }

/* Share buttons */
.gi-ah-share {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}


/* =========================================================
   GI AUTHOR BOX — v5.1
   Profil penulis untuk Single Post Template
========================================================= */

.gi-author-box {
    border: 1px solid #e5e5e5;
    background: #f8f8f8;
    padding: 24px;
    border-radius: 4px;
}

.gi-ab-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c0392b;
    margin-bottom: 14px;
}

/* Layout horizontal */
.gi-author-box--horizontal .gi-ab-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Layout vertical */
.gi-author-box--vertical .gi-ab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Layout minimal */
.gi-author-box--minimal .gi-ab-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Avatar */
.gi-ab-avatar-wrap { flex-shrink: 0; }

.gi-ab-avatar {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 3px solid #c0392b;
}

.gi-ab-avatar.circle  { border-radius: 50%; }
.gi-ab-avatar.rounded { border-radius: 8px; }
.gi-ab-avatar.square  { border-radius: 0; }

/* Konten */
.gi-ab-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gi-ab-name {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
}

.gi-ab-name:hover { text-decoration: underline; }

.gi-ab-bio {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.gi-ab-posts-link {
    font-size: 12px;
    font-weight: 700;
    color: #c0392b;
    text-decoration: none;
    letter-spacing: 0.03em;
}

.gi-ab-posts-link:hover { text-decoration: underline; }


/* =========================================================
   GI RELATED POSTS — v5.1
   Artikel terkait untuk Single Post Template
========================================================= */

/* Grid */
.gi-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* List */
.gi-related-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Carousel */
.gi-related-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
}

.gi-related-carousel::-webkit-scrollbar { display: none; }

/* Card base */
.gi-related-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.gi-related-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.gi-related-carousel .gi-related-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
}

/* Thumbnail */
.gi-related-thumb {
    position: relative;
    overflow: hidden;
    background: #eee;
}

.gi-related-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.gi-related-card:hover .gi-related-thumb img {
    transform: scale(1.04);
}

.gi-no-thumb {
    position: absolute;
    inset: 0;
    background: #e0e0e0;
}

/* Card body */
.gi-related-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gi-related-card-inner {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* List layout inner */
.gi-related-card--list .gi-related-card-inner {
    display: flex;
    gap: 14px;
}

.gi-related-card--list .gi-related-thumb {
    flex: 0 0 120px;
    padding-top: 0 !important;
    height: 90px;
}

.gi-related-card--list .gi-related-thumb img {
    position: relative;
    height: 100%;
    top: auto; left: auto;
}

.gi-related-card--list .gi-related-card-body {
    flex: 1;
    padding: 4px 0;
}

/* Card elements */
.gi-card-cat-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #c0392b;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
    text-decoration: none;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.gi-related-card-body .gi-card-cat-label {
    position: static;
}

.gi-card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    margin: 0;
}

.gi-card-excerpt {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.gi-card-date {
    font-size: 11px;
    color: #999;
    margin-top: auto;
}


/* =========================================================
   RESPONSIVE — TABLET ≤ 1024px
========================================================= */

@media (max-width: 1024px) {
    .gi-related-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   RESPONSIVE — MOBILE ≤ 767px
========================================================= */

@media (max-width: 767px) {

    /* Article Header */
    .gi-article-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .gi-ah-share { justify-content: flex-start; }

    /* Author Box */
    .gi-author-box--horizontal .gi-ab-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Related Posts */
    .gi-related-grid { grid-template-columns: 1fr !important; }

    .gi-related-card--list .gi-related-thumb {
        flex: 0 0 90px;
        height: 70px;
    }
}


/* =========================================================
   GI PULL QUOTE — v5.2
   Kutipan editorial besar untuk disisipkan dalam artikel
========================================================= */

.gi-pull-quote {
    margin: 2em 0;
    position: relative;
}

/* Tanda petik dekoratif */
.gi-pq-mark {
    display: block;
    font-size: 72px;
    line-height: 1;
    font-family: Georgia, 'Times New Roman', serif;
    color: #c0392b;
    margin-bottom: -12px;
    user-select: none;
}

/* Teks kutipan */
.gi-pq-text {
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.5;
    color: #111;
    margin: 0 0 12px 0;
    font-style: italic;
}

/* Atribusi */
.gi-pq-attribution {
    display: block;
    font-size: 0.8em;
    font-style: normal;
    font-weight: 700;
    color: #777;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* === Style: left-border === */
.gi-pull-quote--left-border {
    border-left: 4px solid #c0392b;
    padding-left: 24px;
}

/* === Style: centered === */
.gi-pull-quote--centered {
    text-align: center;
    padding: 32px 48px;
    border: none;
}

.gi-pull-quote--centered .gi-pq-mark {
    text-align: center;
}

/* === Style: highlight === */
.gi-pull-quote--highlight {
    background: #fdf6f6;
    border-left: 4px solid #c0392b;
    padding: 24px 28px;
    border-radius: 0 4px 4px 0;
}

/* === Style: minimal === */
.gi-pull-quote--minimal {
    border-top: 2px solid #c0392b;
    border-bottom: 2px solid #c0392b;
    padding: 20px 0;
    text-align: center;
}

.gi-pull-quote--minimal .gi-pq-mark {
    text-align: center;
}


/* =========================================================
   GI CALLOUT BOX — v5.2
   Info box / key facts untuk konten artikel
========================================================= */

.gi-callout-box {
    background: #fafafa;
    border-radius: 4px;
    padding: 20px 24px;
    margin: 1.5em 0;
}

/* === Style: border-left === */
.gi-callout-box--border-left {
    border-left: 4px solid #c0392b;
}

/* === Style: border-top === */
.gi-callout-box--border-top {
    border-top: 4px solid #c0392b;
}

/* === Style: full-border === */
.gi-callout-box--full-border {
    border: 2px solid #c0392b;
    background: transparent;
}

/* === Style: filled === */
.gi-callout-box--filled {
    background: #c0392b;
}

.gi-callout-box--filled .gi-cb-title,
.gi-callout-box--filled .gi-cb-content,
.gi-callout-box--filled .gi-cb-icon {
    color: #fff;
}

/* Header */
.gi-cb-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.gi-cb-icon {
    font-size: 16px;
    color: #c0392b;
    flex-shrink: 0;
}

.gi-cb-icon svg,
.gi-cb-icon i {
    display: block;
}

.gi-cb-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c0392b;
    margin: 0;
}

/* Konten */
.gi-cb-content {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

.gi-cb-content p { margin: 0 0 8px; }
.gi-cb-content p:last-child { margin-bottom: 0; }

.gi-cb-content ul,
.gi-cb-content ol {
    margin: 0;
    padding-left: 20px;
}

.gi-cb-content li {
    margin-bottom: 6px;
}

.gi-cb-content li:last-child { margin-bottom: 0; }


/* =========================================================
   GI MEMBERSHIP BANNER — v5.2
   CTA membership / donasi di akhir artikel
========================================================= */

.gi-membership-banner {
    background: #111;
    border-radius: 4px;
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Ikon dekoratif */
.gi-mb-icon {
    font-size: 32px;
    margin-bottom: 16px;
    color: #c0392b;
    opacity: 0.9;
}

.gi-mb-icon svg,
.gi-mb-icon i {
    display: inline-block;
}

/* Eyebrow */
.gi-mb-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c0392b;
    margin-bottom: 8px;
}

/* Divider tipis di bawah eyebrow */
.gi-mb-divider {
    width: 40px;
    height: 2px;
    background: #c0392b;
    margin: 8px auto 16px;
}

.gi-membership-banner--split .gi-mb-divider { margin: 8px 0 16px; }

/* Headline */
.gi-mb-headline {
    font-size: 1.8em;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

/* Deskripsi */
.gi-mb-description {
    font-size: 14px;
    color: #ccc;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto 28px;
}

.gi-membership-banner--split .gi-mb-description { margin: 0 0 28px; }

/* Actions */
.gi-mb-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.gi-membership-banner--split .gi-mb-actions { justify-content: flex-start; }

/* CTA Tombol Utama */
.gi-mb-cta-btn {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 3px;
    border: 2px solid #c0392b;
    transition: opacity .2s ease, transform .15s ease;
}

.gi-mb-cta-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* CTA Tombol Sekunder */
.gi-mb-cta-secondary {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #aaa;
    text-decoration: none;
    transition: color .2s ease;
}

.gi-mb-cta-secondary:hover { color: #fff; }

/* === Layout: split === */
.gi-membership-banner--split .gi-mb-content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    text-align: left;
}

.gi-membership-banner--split .gi-mb-description {
    max-width: none;
    grid-column: 1 / -1;
    margin: 0;
}

/* === Layout: light === */
.gi-membership-banner--light {
    background: #f5f5f5;
}

.gi-membership-banner--light .gi-mb-headline { color: #111; }
.gi-membership-banner--light .gi-mb-description { color: #555; }
.gi-membership-banner--light .gi-mb-cta-secondary { color: #666; }
.gi-membership-banner--light .gi-mb-cta-secondary:hover { color: #111; }


/* =========================================================
   GI POST TAGS — v5.2
   Tag cloud / taxonomy links di akhir artikel
========================================================= */

.gi-post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding-top: 0;
}

.gi-post-tags.has-divider {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
    margin-top: 8px;
}

/* Prefix label */
.gi-pt-prefix {
    font-size: 12px;
    font-weight: 700;
    color: #c0392b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

/* Tag list container */
.gi-post-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.gi-post-tags-list--plain {
    display: inline;
}

/* Base tag */
.gi-pt-tag {
    font-size: 12px;
    text-decoration: none;
    transition: all .2s ease;
}

/* === pill === */
.gi-tag-pill {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    padding: 4px 12px;
    border-radius: 100px;
    font-weight: 600;
}

.gi-tag-pill:hover {
    background: #991f1f;
    transform: translateY(-1px);
}

/* === outline === */
.gi-tag-outline {
    display: inline-block;
    border: 1px solid #c0392b;
    color: #c0392b;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 600;
}

.gi-tag-outline:hover {
    background: #c0392b;
    color: #fff;
}

/* === underline === */
.gi-tag-underline {
    color: #333;
    border-bottom: 1px solid #ddd;
}

.gi-tag-underline:hover {
    color: #c0392b;
    border-bottom-color: #c0392b;
}

/* === hashtag === */
.gi-tag-hashtag {
    color: #c0392b;
    font-weight: 600;
}

.gi-tag-hashtag:hover { opacity: .75; }

/* === plain === */
.gi-tag-plain {
    color: #555;
    margin-right: 2px;
}

.gi-tag-plain:hover { color: #111; }


/* =========================================================
   RESPONSIVE — LANGKAH 3 & 4 (≤ 767px)
========================================================= */

@media (max-width: 767px) {

    /* Pull Quote */
    .gi-pull-quote--centered { padding: 20px 16px; }
    .gi-pq-text { font-size: 1.15em; }
    .gi-pq-mark { font-size: 52px; }

    /* Membership Banner */
    .gi-membership-banner { padding: 32px 20px; }
    .gi-mb-headline { font-size: 1.4em; }
    .gi-mb-description { font-size: 13px; }

    .gi-membership-banner--split .gi-mb-content {
        grid-template-columns: 1fr;
    }

    .gi-mb-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gi-mb-cta-btn { text-align: center; }

    /* Post Tags */
    .gi-pt-prefix { width: 100%; }
}


/* =========================================================
   v6.0 — POST CONTENT
========================================================= */

.gi-post-content {
    line-height: 1.8;
}

.gi-post-content p {
    margin-bottom: 1.6em;
}

.gi-post-content h2,
.gi-post-content h3,
.gi-post-content h4 {
    margin-top: 2em;
    margin-bottom: .75em;
    line-height: 1.25;
    font-weight: 800;
}

.gi-post-content a {
    text-decoration: underline;
    color: inherit;
}

.gi-post-content.gi-pc-no-underline a { text-decoration: none; }
.gi-post-content.gi-pc-hover-underline a { text-decoration: none; }
.gi-post-content.gi-pc-hover-underline a:hover { text-decoration: underline; }

/* Drop Cap */
.gi-post-content.has-dropcap > p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    font-weight: 900;
    line-height: .75;
    margin-right: .08em;
    margin-top: .05em;
}

/* Blockquote */
.gi-post-content blockquote {
    border-left: 4px solid #111;
    padding: 16px 24px;
    margin: 2em 0;
    background: #f8f8f8;
    font-style: italic;
}

/* Images */
.gi-post-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.gi-post-content figure {
    margin: 2em 0;
}

.gi-post-content figcaption,
.gi-post-content .wp-caption-text {
    font-size: 12px;
    color: #888;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* Code */
.gi-post-content pre,
.gi-post-content code {
    background: #f4f4f4;
    border-radius: 3px;
    font-size: .9em;
}

.gi-post-content pre {
    padding: 16px 20px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.gi-post-content code {
    padding: 2px 6px;
}

/* Lists */
.gi-post-content ul,
.gi-post-content ol {
    padding-left: 1.6em;
    margin-bottom: 1.6em;
}

.gi-post-content li {
    margin-bottom: .5em;
}

/* Tables */
.gi-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: 14px;
}

.gi-post-content th,
.gi-post-content td {
    border: 1px solid #e5e5e5;
    padding: 10px 14px;
    text-align: left;
}

.gi-post-content th {
    background: #f4f4f4;
    font-weight: 700;
}

.gi-post-content tr:nth-child(even) td {
    background: #fafafa;
}

/* Alignment helpers (Gutenberg/WP) */
.gi-post-content .alignleft { float: left; margin: 0 24px 16px 0; }
.gi-post-content .alignright { float: right; margin: 0 0 16px 24px; }
.gi-post-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.gi-post-content .alignwide { max-width: 100%; }

/* Editor notice */
.gi-editor-notice {
    padding: 12px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 13px;
    color: #856404;
    font-style: italic;
}


/* =========================================================
   v6.0 — BREADCRUMB
========================================================= */

.gi-breadcrumb {
    font-size: 13px;
}

.gi-bc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.gi-bc-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gi-breadcrumb a {
    color: #555;
    text-decoration: none;
    transition: color .2s;
}

.gi-breadcrumb a:hover { color: #111; }

.gi-bc-current {
    color: #111;
    font-weight: 600;
}

.gi-bc-sep {
    color: #bbb;
    user-select: none;
}

/* Yoast/RankMath/SEOPress output wrapper */
.gi-breadcrumb--yoast,
.gi-breadcrumb--rankmath,
.gi-breadcrumb--seopress {
    font-size: 13px;
}


/* =========================================================
   v6.0 — POST NAVIGATION
========================================================= */

.gi-postnav-divider {
    border-top: 1px solid #e5e5e5;
    margin-bottom: 32px;
}

.gi-post-navigation {
    margin-top: 16px;
}

/* Side by side */
.gi-postnav--side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

/* Stacked */
.gi-postnav--stacked {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Minimal */
.gi-postnav--minimal {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.gi-postnav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    text-decoration: none;
    color: inherit;
    transition: background .2s;
}

.gi-postnav-item:hover { background: #f5f5f5; }

.gi-postnav-empty { pointer-events: none; }

.gi-postnav-next {
    justify-content: flex-end;
    text-align: right;
}

.gi-postnav--minimal .gi-postnav-item {
    border: none;
    padding: 0;
}

.gi-pn-thumb {
    flex-shrink: 0;
    overflow: hidden;
    width: 80px;
    height: 80px;
}

.gi-pn-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-pn-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gi-pn-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #888;
}

.gi-pn-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 767px) {
    .gi-postnav--side-by-side {
        grid-template-columns: 1fr !important;
    }
    .gi-pn-thumb {
        width: 56px !important;
        height: 56px !important;
    }
}


/* =========================================================
   v6.0 — TABLE OF CONTENTS
========================================================= */

.gi-toc {
    background: #f8f8f8;
    border-left: 4px solid #111;
    padding: 20px 24px;
    margin-bottom: 2em;
}

.gi-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.gi-toc-title {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .3px;
}

.gi-toc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #555;
    display: flex;
    align-items: center;
}

.gi-toc-arrow {
    width: 16px;
    height: 16px;
    transition: transform .2s;
}

.gi-toc--collapsed .gi-toc-arrow {
    transform: rotate(-90deg);
}

.gi-toc--collapsed .gi-toc-list {
    display: none;
}

.gi-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gi-toc-item {
    margin: 0;
}

.gi-toc-level-1 { padding-left: 16px; }
.gi-toc-level-2 { padding-left: 32px; }

.gi-toc-link {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: color .15s;
    display: block;
}

.gi-toc-link:hover { color: #111; }

.gi-toc-link.is-active {
    color: #c0392b;
    font-weight: 700;
}

.gi-toc-num {
    color: #aaa;
    font-size: 12px;
    margin-right: 4px;
}


/* =========================================================
   v6.0 — ARCHIVE HEADER
========================================================= */

.gi-archive-header {}

.gi-archive-header-inner {
    padding: 32px 0;
}

.gi-ah-prefix {
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c0392b;
    margin-bottom: 8px;
}

.gi-ah-bar {
    width: 40px;
    height: 3px;
    background: #c0392b;
    margin-bottom: 16px;
    display: none;
}

.gi-ah-prefix + .gi-ah-bar { display: block; }

.gi-archive-title {
    font-weight: 900;
    font-size: 2.2em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.gi-ah-count {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #c0392b;
    margin-bottom: 12px;
}

.gi-archive-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    max-width: 600px;
}

/* Hero layout */
.gi-archive-header--hero .gi-archive-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    background: #111;
}

.gi-archive-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 100%);
    z-index: 1;
}

.gi-archive-header--hero .gi-archive-header-inner {
    position: relative;
    z-index: 2;
    padding: 48px 40px;
    width: 100%;
}

.gi-archive-header--hero .gi-archive-title,
.gi-archive-header--hero .gi-ah-prefix,
.gi-archive-header--hero .gi-ah-count,
.gi-archive-header--hero .gi-archive-desc {
    color: #fff !important;
}

/* Author layout */
.gi-archive-author-wrap {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.gi-ah-author-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.gi-archive-author-info { flex: 1; }

@media (max-width: 767px) {
    .gi-archive-author-wrap {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .gi-archive-title { font-size: 1.6em !important; }
    .gi-archive-header--hero .gi-archive-header-inner { padding: 32px 20px !important; }
}


/* =========================================================
   v6.0 — AD SLOT
========================================================= */

.gi-ad-slot {
    display: block;
}

.gi-ad-label {
    display: block;
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #aaa;
    text-align: center;
    margin: 4px 0;
}

.gi-ad-image {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.gi-ad-dummy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border: 1px dashed #ccc;
    color: #bbb;
    font-size: 13px;
    font-family: monospace;
    border-radius: 3px;
}

.gi-ad-lazy-placeholder {
    min-height: 90px;
    background: #f8f8f8;
}


/* =========================================================
   v6.0 — SERIES NAVIGATION
========================================================= */

.gi-series-nav {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    margin: 2em 0;
}

.gi-sn-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f4f4f4;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
}

.gi-sn-meta {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.gi-sn-badge {
    flex-shrink: 0;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}

.gi-sn-title {
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gi-sn-position {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.gi-sn-progress-wrap {
    flex: 1;
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
    min-width: 60px;
    max-width: 120px;
}

.gi-sn-progress-fill {
    height: 100%;
    background: #c0392b;
    transition: width .3s;
}

.gi-sn-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #555;
    flex-shrink: 0;
}

.gi-sn-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform .2s;
}

.gi-sn-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gi-sn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}

.gi-sn-item:last-child { border-bottom: none; }
.gi-sn-item:hover { background: #fafafa; }

.gi-sn-item a {
    flex: 1;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: color .15s;
}

.gi-sn-item a:hover { color: #111; }

.gi-sn-num {
    flex-shrink: 0;
    width: 20px;
    font-size: 12px;
    color: #bbb;
    font-weight: 700;
    text-align: right;
}

.gi-sn-current-item {
    background: #fff9f9;
}

.gi-sn-current-item a {
    font-weight: 700;
}

.gi-sn-active-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c0392b;
}

.gi-sn-read-time {
    flex-shrink: 0;
    font-size: 11px;
    color: #bbb;
    white-space: nowrap;
}


/* =========================================================
   v6.0 — RESPONSIVE ADDITIONS
========================================================= */

@media (max-width: 767px) {

    /* Post Content */
    .gi-post-content .alignleft,
    .gi-post-content .alignright {
        float: none !important;
        margin: 1em auto !important;
        display: block !important;
    }

    /* Breadcrumb */
    .gi-bc-list { font-size: 12px !important; }

    /* ToC */
    .gi-toc { padding: 14px 16px !important; }

    /* Archive Header */
    .gi-archive-title { font-size: 1.5em !important; }

    /* Series Nav */
    .gi-sn-header { padding: 12px 14px !important; }
    .gi-sn-item { padding: 10px 14px !important; }
    .gi-sn-progress-wrap { display: none !important; }
}


/* =========================================================
   POST TILES — BASE & GRID LAYOUTS
========================================================= */

.gi-post-tiles {
    position: relative;
}

/* ── Grid layouts ──────────────────────────────────────── */

.gi-tiles-grid {
    display: grid;
    gap: 20px;
}

.gi-tiles--uniform {
    grid-template-columns: repeat(3, 1fr);
}

/* Metro: tile[0] spans 2 cols */
.gi-tiles--metro {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
}
.gi-tiles--metro .gi-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* Spotlight: 2fr + 1fr */
.gi-tiles--spotlight {
    grid-template-columns: 2fr 1fr;
}
.gi-tiles--spotlight .gi-tile--featured {
    grid-row: span 3;
}

/* Newsroom: row 1 = 2 big, row 2+ = 4 small */
.gi-tiles--newsroom {
    grid-template-columns: repeat(4, 1fr);
}
.gi-tiles--newsroom .gi-tile--featured,
.gi-tiles--newsroom .gi-tile:nth-child(2) {
    grid-column: span 2;
}

/* Compact */
.gi-tiles--compact {
    grid-template-columns: repeat(4, 1fr);
}


/* ── Tile base ─────────────────────────────────────────── */

.gi-tile {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    display: block;
}

.gi-tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.gi-tile-img-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.gi-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.gi-tile-no-img {
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gi-tile-no-img-cat {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}


/* ── Hover Effects ─────────────────────────────────────── */

.gi-tiles--hover-zoom .gi-tile-link:hover .gi-tile-img,
.gi-tiles--hover-zoom-reveal .gi-tile-link:hover .gi-tile-img {
    transform: scale(1.06);
}

.gi-tiles--hover-lift .gi-tile {
    transition: transform .25s ease, box-shadow .25s ease;
}
.gi-tiles--hover-lift .gi-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.gi-tiles--hover-darken .gi-tile-link:hover .gi-tile-img {
    filter: brightness(.85);
    transform: scale(1.02);
}


/* ── Style: OVERLAY ────────────────────────────────────── */

.gi-tile--overlay .gi-tile-img-wrap {
    display: block;
}

.gi-tile--overlay .gi-tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    transition: background .3s;
}

.gi-tiles--hover-zoom-reveal .gi-tile--overlay .gi-tile-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}

.gi-tile--overlay .gi-tile-title { color: #fff; margin: 0; }
.gi-tile--overlay .gi-tile-cat-badge { margin-bottom: 8px; }
.gi-tile--overlay .gi-tile-meta { color: rgba(255,255,255,.7); }
.gi-tile--overlay .gi-tile-excerpt { color: rgba(255,255,255,.85); }


/* ── Style: BELOW ──────────────────────────────────────── */

.gi-tile--below .gi-tile-body {
    padding: 14px 16px 16px;
}

.gi-tile--below .gi-tile-title {
    font-size: 15px;
    font-weight: 700;
    margin: 8px 0 6px;
    line-height: 1.35;
    color: #111;
}


/* ── Style: SIDE ───────────────────────────────────────── */

.gi-tile--side .gi-tile-link {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.gi-tile--side .gi-tile-img-wrap {
    flex: 0 0 40%;
    max-width: 40%;
}

.gi-tile--side .gi-tile-body {
    flex: 1;
    padding: 12px 12px 12px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gi-tile--side .gi-tile-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
    margin: 0 0 6px;
}


/* ── Style: GHOST ──────────────────────────────────────── */

.gi-tile--ghost {
    border: 1px solid #e5e5e5;
}

.gi-tile--ghost .gi-tile-body {
    padding: 16px;
}

.gi-tile--ghost .gi-tile-img-wrap {
    display: none;
}

.gi-tile--ghost .gi-tile-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #111;
}


/* ── Slide-up hover ────────────────────────────────────── */

.gi-tile-slideup {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.82);
    padding: 16px 18px;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.gi-tiles--hover-slide-up .gi-tile-link:hover .gi-tile-slideup {
    transform: translateY(0);
}

.gi-tile-slideup .gi-tile-title { color: #fff; margin: 0; font-size: 14px; }
.gi-tile-slideup .gi-tile-meta  { color: rgba(255,255,255,.65); font-size: 12px; }


/* ── Shared text elements ──────────────────────────────── */

.gi-tile-cat-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: #c0392b;
    padding: 3px 8px;
    border-radius: 2px;
    text-decoration: none;
    margin-bottom: 8px;
}

.gi-tile-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px;
}

.gi-tile-excerpt {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gi-tile-meta {
    font-size: 11px;
    color: #888;
    letter-spacing: .2px;
}

/* ── Carousel wrapper ──────────────────────────────────── */

.gi-tiles--carousel {
    overflow: hidden;
}

.gi-tiles-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    cursor: grab;
    user-select: none;
}

.gi-tiles-track:active { cursor: grabbing; }

/* Arrow buttons */
.gi-tiles-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    transition: opacity .2s, box-shadow .2s;
}

.gi-tiles-arrow:hover { box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.gi-tiles-arrow:disabled { opacity: .3; pointer-events: none; }
.gi-tiles-arrow svg { width: 18px; height: 18px; }

.gi-tiles-arrow--prev { left: -20px; }
.gi-tiles-arrow--next { right: -20px; }

/* Dots */
.gi-tiles-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.gi-tiles-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.gi-tiles-dot.active {
    background: #c0392b;
    transform: scale(1.3);
}

/* Auto scroll */
.gi-tiles--carousel-auto .gi-tiles-track {
    cursor: default;
}


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1024px) {
    .gi-tiles--uniform      { grid-template-columns: repeat(2, 1fr) !important; }
    .gi-tiles--metro        { grid-template-columns: repeat(2, 1fr) !important; }
    .gi-tiles--newsroom     { grid-template-columns: repeat(2, 1fr) !important; }
    .gi-tiles--compact      { grid-template-columns: repeat(3, 1fr) !important; }
    .gi-tiles--spotlight    { grid-template-columns: 1fr 1fr !important; }
    .gi-tiles-arrow--prev   { left: 4px !important; }
    .gi-tiles-arrow--next   { right: 4px !important; }
}

@media (max-width: 767px) {
    .gi-tiles--uniform   { grid-template-columns: 1fr !important; }
    .gi-tiles--metro     { grid-template-columns: 1fr !important; }
    .gi-tiles--metro .gi-tile--featured { grid-column: span 1 !important; grid-row: span 1 !important; }
    .gi-tiles--spotlight { grid-template-columns: 1fr !important; }
    .gi-tiles--spotlight .gi-tile--featured { grid-row: span 1 !important; }
    .gi-tiles--newsroom  { grid-template-columns: 1fr 1fr !important; }
    .gi-tiles--newsroom .gi-tile--featured,
    .gi-tiles--newsroom .gi-tile:nth-child(2) { grid-column: span 1 !important; }
    .gi-tiles--compact   { grid-template-columns: repeat(2, 1fr) !important; }
    .gi-tile--side .gi-tile-link { flex-direction: column !important; }
    .gi-tile--side .gi-tile-img-wrap { flex: none !important; max-width: 100% !important; }
}


/* =========================================================
   HERO SLIDER — BASE
========================================================= */

.gi-hero-slider {
    position: relative;
    overflow: hidden;
    height: 560px;
    background: #111;
}

.gi-hs-track {
    position: relative;
    width: 100%;
    height: 100%;
}


/* ── Slide ─────────────────────────────────────────────── */

.gi-hs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.gi-hs-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* FADE */
.gi-hs--trans-fade .gi-hs-slide {
    transition: opacity .7s ease;
}

/* SLIDE (horizontal) */
.gi-hs--trans-slide .gi-hs-slide {
    transform: translateX(calc(var(--gi-dir, 1) * 100%));
    transition: transform .7s cubic-bezier(.4,0,.2,1), opacity 0s;
    opacity: 1;
    pointer-events: none;
}
.gi-hs--trans-slide .gi-hs-slide.is-active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.gi-hs--trans-slide .gi-hs-slide.is-leaving {
    transform: translateX(calc(var(--gi-dir, 1) * -100%));
}

/* ZOOM FADE */
.gi-hs--trans-zoom-fade .gi-hs-slide {
    transition: opacity .7s ease, transform .8s ease;
    transform: scale(1.05);
}
.gi-hs--trans-zoom-fade .gi-hs-slide.is-active {
    transform: scale(1);
}
.gi-hs--trans-zoom-fade .gi-hs-slide.is-leaving {
    transform: scale(.97);
    opacity: 0;
}

/* PUSH */
.gi-hs--trans-push .gi-hs-track {
    display: flex;
}
.gi-hs--trans-push .gi-hs-slide {
    flex: 0 0 100%;
    position: relative;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}


/* ── Background image ──────────────────────────────────── */

.gi-hs-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gi-hs-bg-img,
.gi-hs-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 6s ease;
}

.gi-hs-slide.is-active .gi-hs-bg-img,
.gi-hs-slide.is-active .gi-hs-bg img {
    transform: scale(1.04);
}

.gi-hs-bg--empty {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}


/* ── Overlay ───────────────────────────────────────────── */

.gi-hs-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.gi-hs-overlay.has-gradient {
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 65%) !important;
}


/* ── Content ───────────────────────────────────────────── */

.gi-hs-content {
    position: absolute;
    z-index: 3;
    padding: 40px 48px;
    max-width: 620px;
}

/* Content positions */
.gi-hs--pos-top_left    .gi-hs-content { top: 0; left: 0; }
.gi-hs--pos-top_center  .gi-hs-content { top: 0; left: 50%; transform: translateX(-50%); text-align: center; }
.gi-hs--pos-center_left .gi-hs-content { top: 50%; left: 0; transform: translateY(-50%); }
.gi-hs--pos-center      .gi-hs-content { top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.gi-hs--pos-bottom_left .gi-hs-content { bottom: 0; left: 0; }
.gi-hs--pos-bottom_center .gi-hs-content { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; }
.gi-hs--pos-bottom_right  .gi-hs-content { bottom: 0; right: 0; text-align: right; }

/* Content enter animation */
.gi-hs-slide.is-active .gi-hs-content {
    animation: giHsContentIn .6s .2s both cubic-bezier(.4,0,.2,1);
}

@keyframes giHsContentIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Center positions already have transforms — override animation carefully */
.gi-hs--pos-top_center .gi-hs-slide.is-active .gi-hs-content,
.gi-hs--pos-center .gi-hs-slide.is-active .gi-hs-content,
.gi-hs--pos-bottom_center .gi-hs-slide.is-active .gi-hs-content {
    animation: giHsContentInCenter .6s .2s both;
}
@keyframes giHsContentInCenter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Category */
.gi-hs-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: #c0392b;
    padding: 4px 10px;
    border-radius: 2px;
    text-decoration: none;
    margin-bottom: 14px;
}

/* Title */
.gi-hs-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px;
}

.gi-hs-title a {
    color: inherit;
    text-decoration: none;
}

.gi-hs-title a:hover { opacity: .85; }

/* Excerpt */
.gi-hs-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.8);
    margin: 0 0 18px;
}

/* Meta */
.gi-hs-meta {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gi-hs-meta .gi-hs-sep { opacity: .5; }

/* Read button */
.gi-hs-read-btn {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: .3px;
    transition: opacity .2s, transform .2s;
}

.gi-hs-read-btn:hover {
    opacity: .88;
    transform: translateX(2px);
}


/* ── Arrow buttons ─────────────────────────────────────── */

.gi-hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}

.gi-hs-arrow svg { width: 20px; height: 20px; pointer-events: none; }

.gi-hs--arrow-circle .gi-hs-arrow {
    width: 48px; height: 48px; border-radius: 50%;
}
.gi-hs--arrow-square .gi-hs-arrow {
    width: 48px; height: 48px; border-radius: 4px;
}
.gi-hs--arrow-minimal .gi-hs-arrow {
    background: transparent; border: none;
    width: 36px; height: 36px;
}
.gi-hs--arrow-edge .gi-hs-arrow {
    top: 0; transform: none; height: 100%;
    width: 52px; border-radius: 0; background: rgba(0,0,0,.25);
}

.gi-hs-arrow--prev { left: 16px; }
.gi-hs-arrow--next { right: 16px; }
.gi-hs--arrow-edge .gi-hs-arrow--prev { left: 0; }
.gi-hs--arrow-edge .gi-hs-arrow--next { right: 0; }

.gi-hs-arrow:hover { background: rgba(255,255,255,.2); }
.gi-hs--arrow-edge .gi-hs-arrow:hover { background: rgba(0,0,0,.4); }


/* ── Dots ───────────────────────────────────────────────── */

.gi-hs-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gi-hs-dot {
    background: rgba(255,255,255,.4);
    border: none;
    cursor: pointer;
    transition: background .2s, transform .2s;
    padding: 0;
}

/* Circle */
.gi-hs-dots--circle .gi-hs-dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.gi-hs-dots--circle .gi-hs-dot.active {
    background: #c0392b; transform: scale(1.35);
}

/* Line */
.gi-hs-dots--line .gi-hs-dot.gi-hs-line {
    width: 24px; height: 3px; border-radius: 2px;
}
.gi-hs-dot.gi-hs-line { width: 20px; height: 3px; border-radius: 2px; }
.gi-hs-dot.gi-hs-line.active {
    background: #c0392b; width: 36px;
}

/* Number */
.gi-hs-dots--number .gi-hs-dot {
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
}
.gi-hs-dots--number .gi-hs-dot.active {
    background: #c0392b; color: #fff;
}

/* Progress */
.gi-hs-dots--progress .gi-hs-dot {
    width: 40px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.3); overflow: hidden;
    position: relative;
}
.gi-hs-progress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: #c0392b;
}


/* ── Counter ────────────────────────────────────────────── */

.gi-hs-counter {
    position: absolute;
    bottom: 20px;
    right: 24px;
    z-index: 10;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    letter-spacing: .5px;
}

.gi-hs-current { color: #fff; }


/* ── Style: SPLIT ───────────────────────────────────────── */

.gi-hs--split .gi-hs-slide {
    display: flex;
    align-items: stretch;
}

.gi-hs--split .gi-hs-bg { display: none; }
.gi-hs--split .gi-hs-overlay { display: none; }

.gi-hs-split-wrap {
    display: flex;
    width: 100%;
    height: 100%;
}

.gi-hs-split-img {
    flex: 0 0 55%;
    overflow: hidden;
}

.gi-hs-split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-hs-split-text {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
}

.gi-hs--split .gi-hs-title     { color: #111; }
.gi-hs--split .gi-hs-excerpt   { color: #555; }
.gi-hs--split .gi-hs-meta      { color: #888; }
.gi-hs--split .gi-hs-cat       { color: #fff; }


/* ── Style: CINEMATIC ───────────────────────────────────── */

.gi-hs--cinematic .gi-hs-slide.is-active .gi-hs-bg-img,
.gi-hs--cinematic .gi-hs-slide.is-active .gi-hs-bg img {
    animation: giHsCinematic 8s ease forwards;
}

@keyframes giHsCinematic {
    from { transform: scale(1.08) translateX(1%); }
    to   { transform: scale(1) translateX(0); }
}


/* ── Style: STRIP ───────────────────────────────────────── */

.gi-hs--strip .gi-hero-slider,
.gi-hs--strip {
    padding-bottom: 90px;
}

.gi-hs-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    display: flex;
    z-index: 10;
    background: rgba(0,0,0,.7);
}

.gi-hs-strip-item {
    flex: 1;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    opacity: .55;
    transition: opacity .2s;
    padding: 0;
    background: none;
}

.gi-hs-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-hs-strip-item.active { opacity: 1; }
.gi-hs-strip-item:hover  { opacity: .85; }

.gi-hs-strip-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background .2s;
}

.gi-hs-strip-item.active .gi-hs-strip-bar { background: #c0392b; }


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1024px) {
    .gi-hs-content { padding: 28px 32px !important; }
    .gi-hs-title   { font-size: 1.5rem !important; }
}

@media (max-width: 767px) {
    .gi-hero-slider { height: 340px !important; }

    .gi-hs--split .gi-hs-split-wrap  { flex-direction: column !important; }
    .gi-hs--split .gi-hs-split-img   { flex: 0 0 55% !important; }
    .gi-hs--split .gi-hs-split-text  { padding: 20px !important; }

    .gi-hs-content  { padding: 20px !important; max-width: 100% !important; }
    .gi-hs-title    { font-size: 1.2rem !important; }
    .gi-hs-excerpt  { display: none !important; }
    .gi-hs-arrow    { width: 36px !important; height: 36px !important; }
    .gi-hs--arrow-edge .gi-hs-arrow { width: 36px !important; }
    .gi-hs-dots     { bottom: 10px !important; }
    .gi-hs-counter  { display: none !important; }
    .gi-hs-strip    { height: 56px !important; }
    .gi-hs--strip   { padding-bottom: 56px !important; }
}


/* =========================================================
   HAMBURGER NAV — Tombol
========================================================= */

.gi-hamburger-wrap {
    display: inline-flex;
    align-items: center;
}

.gi-hbg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1;
    color: inherit;
    border-radius: 3px;
    transition: opacity .2s;
}

.gi-hbg-btn:hover { opacity: .72; }

/* Label */
.gi-hbg-has-label.gi-hbg-label-right .gi-hbg-btn  { flex-direction: row; gap: 8px; }
.gi-hbg-has-label.gi-hbg-label-left  .gi-hbg-btn  { flex-direction: row-reverse; gap: 8px; }
.gi-hbg-has-label.gi-hbg-label-below .gi-hbg-btn  { flex-direction: column; gap: 4px; }

.gi-hbg-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1;
}

/* ── Ikon: TIGA GARIS ──────────────────────────────────── */

.gi-hbg-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 24px;
}

.gi-hbg-line {
    display: block;
    height: 2px;
    width: 24px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
    transition: transform .3s cubic-bezier(.4,0,.2,1),
                opacity   .2s ease,
                width     .25s ease;
}

/* Animasi → X saat terbuka */
.gi-hbg-btn.is-open .gi-hbg-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.gi-hbg-btn.is-open .gi-hbg-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.gi-hbg-btn.is-open .gi-hbg-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Ikon: GRID DOT ────────────────────────────────────── */

.gi-hbg-grid {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 3px;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-items: center;
}

.gi-hbg-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    transition: transform .25s ease;
}

.gi-hbg-btn.is-open .gi-hbg-dot {
    transform: scale(0.6);
}
.gi-hbg-btn.is-open .gi-hbg-dot:nth-child(1) { transform: translate(7px, 7px) scale(1); }
.gi-hbg-btn.is-open .gi-hbg-dot:nth-child(3) { transform: translate(-7px, 7px) scale(1); }
.gi-hbg-btn.is-open .gi-hbg-dot:nth-child(5) { transform: scale(0); }
.gi-hbg-btn.is-open .gi-hbg-dot:nth-child(7) { transform: translate(7px, -7px) scale(1); }
.gi-hbg-btn.is-open .gi-hbg-dot:nth-child(9) { transform: translate(-7px, -7px) scale(1); }

/* ── Ikon: WORD ─────────────────────────────────────────── */

.gi-hbg-word {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    color: currentColor;
}

.gi-hbg-btn.is-open .gi-hbg-word::after { content: 'TUTUP'; }
.gi-hbg-btn.is-open .gi-hbg-word span   { display: none; }


/* =========================================================
   HAMBURGER NAV — Backdrop
========================================================= */

.gi-hbg-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0,0,0,.65);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.gi-hbg-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}


/* =========================================================
   HAMBURGER NAV — Drawer Base
========================================================= */

.gi-hamburger-drawer {
    position: fixed;
    top: 0;
    z-index: 9995;
    height: 100%;
    width: 380px;
    max-width: 92vw;
    background: #0a0a0a;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.gi-hamburger-drawer[hidden] {
    display: none !important;
}

/* ── Style: SLIDE ──────────────────────────────────────── */

.gi-hd--slide.gi-hd--left {
    left: 0;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 40px rgba(0,0,0,.4);
}

.gi-hd--slide.gi-hd--right {
    right: 0;
    left: auto;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -4px 0 40px rgba(0,0,0,.4);
}

.gi-hd--slide.is-open {
    transform: translateX(0) !important;
    display: flex !important;
}

/* ── Style: FULLSCREEN ─────────────────────────────────── */

.gi-hd--fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    left: 0;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .3s ease, transform .3s ease;
}

.gi-hd--fullscreen.is-open {
    opacity: 1;
    transform: scale(1);
    display: flex !important;
}

/* ── Style: REVEAL ─────────────────────────────────────── */

.gi-hd--reveal.gi-hd--left  { left: 0; transform: translateX(0); }
.gi-hd--reveal.gi-hd--right { right: 0; left: auto; }

body.gi-reveal-left  { transform: translateX(var(--gi-drawer-w,380px)); transition: transform .35s cubic-bezier(.4,0,.2,1); }
body.gi-reveal-right { transform: translateX(calc(-1 * var(--gi-drawer-w,380px))); transition: transform .35s cubic-bezier(.4,0,.2,1); }

/* Prevent body scroll when drawer open */
body.gi-drawer-open { overflow: hidden; }


/* =========================================================
   HAMBURGER NAV — Drawer Content
========================================================= */

/* ── Header ────────────────────────────────────────────── */

.gi-hd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

.gi-hd-brand { flex: 1; min-width: 0; }

.gi-hd-logo {
    max-height: 36px;
    width: auto;
    display: block;
}

.gi-hd-logo-link { display: inline-block; }

.gi-hd-logo-text {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -.5px;
    color: #c0392b;
    text-decoration: none;
    line-height: 1;
}

.gi-hd-tagline {
    font-size: 11px;
    color: rgba(255,255,255,.35);
    margin: 6px 0 0;
    letter-spacing: .4px;
    font-style: italic;
    line-height: 1.4;
}

.gi-hd-close {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.5);
    padding: 4px;
    flex-shrink: 0;
    margin-left: 12px;
    border-radius: 3px;
    transition: color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gi-hd-close svg { width: 20px; height: 20px; }
.gi-hd-close:hover { color: #fff; background: rgba(255,255,255,.08); }


/* ── Section container ─────────────────────────────────── */

.gi-hd-section {
    padding: 20px 28px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

.gi-hd-section-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c0392b;
    margin: 0 0 14px;
}


/* ── Search ────────────────────────────────────────────── */

.gi-hd-search-section { padding: 16px 28px; }

.gi-hd-search-form {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .2s;
}

.gi-hd-search-form:focus-within {
    border-color: rgba(255,255,255,.25);
}

.gi-hd-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    padding: 11px 14px;
    min-width: 0;
}

.gi-hd-search-input::placeholder { color: rgba(255,255,255,.3); }

.gi-hd-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    color: #c0392b;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity .15s;
}

.gi-hd-search-btn:hover { opacity: .75; }
.gi-hd-search-btn svg { width: 16px; height: 16px; }


/* ── Nav Menu ──────────────────────────────────────────── */

.gi-hd-nav {
    flex: 1;
    padding: 8px 0;
}

.gi-hd-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gi-hd-menu-item {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.gi-hd-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: color .15s, padding-left .15s;
    position: relative;
}

.gi-hd-menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #c0392b;
    transition: width .2s ease;
}

.gi-hd-menu-link:hover,
.gi-hd-menu-link.active {
    color: #fff;
    padding-left: 34px;
}

.gi-hd-menu-link:hover::before,
.gi-hd-menu-link.active::before {
    width: 3px;
}

/* Sub-toggle arrow */
.gi-hd-sub-toggle {
    display: flex;
    align-items: center;
    padding: 4px;
    margin-right: -4px;
    flex-shrink: 0;
    color: rgba(255,255,255,.3);
    transition: transform .25s ease, color .15s;
}

.gi-hd-sub-toggle svg { width: 14px; height: 14px; }

.gi-hd-menu-item.sub-open > .gi-hd-menu-link .gi-hd-sub-toggle {
    transform: rotate(90deg);
    color: rgba(255,255,255,.6);
}

/* Submenu */
.gi-hd-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
    background: rgba(0,0,0,.25);
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}

.gi-hd-submenu .gi-hd-menu-link {
    padding: 10px 28px 10px 44px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
}

.gi-hd-submenu .gi-hd-menu-link:hover { color: rgba(255,255,255,.9); }
.gi-hd-submenu .gi-hd-menu-link::before { left: 28px; }


/* ── Recent Posts ──────────────────────────────────────── */

.gi-hd-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gi-hd-recent-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s;
}

.gi-hd-recent-link:hover { opacity: .75; }

.gi-hd-recent-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 3px;
}

.gi-hd-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gi-hd-recent-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gi-hd-recent-cat {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c0392b;
}

.gi-hd-recent-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255,255,255,.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── Newsletter mini ───────────────────────────────────── */

.gi-hd-nl-form {
    display: flex;
    gap: 0;
    margin-top: 4px;
}

.gi-hd-nl-input {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-right: none;
    border-radius: 3px 0 0 3px;
    color: #fff;
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    min-width: 0;
}

.gi-hd-nl-input::placeholder { color: rgba(255,255,255,.25); }
.gi-hd-nl-input:focus { border-color: rgba(255,255,255,.25); }

.gi-hd-nl-btn {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 0 3px 3px 0;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.gi-hd-nl-btn:hover { background: #a93226; }


/* ── Social icons ──────────────────────────────────────── */

.gi-hd-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gi-hd-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.gi-hd-social a:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.gi-hd-social svg { width: 15px; height: 15px; }


/* =========================================================
   MEGA MENU — Nav
========================================================= */

.gi-mega-nav {
    position: relative;
}

.gi-mega-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 28px;
    flex-wrap: nowrap;
}

/* ── Top-level item ────────────────────────────────────── */

.gi-mega-item {
    position: static;   /* static so mega panel can be full-width */
    display: flex;
    align-items: center;
}

/* Standard dropdown items use relative */
.gi-mega-item.has-dropdown {
    position: relative;
}

/* Top-level link */
.gi-mega-top-link {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    position: relative;
    padding-bottom: 2px;
}

/* Underline accent on hover/open */
.gi-mega-top-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #c0392b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.gi-mega-top-link:hover::after,
.gi-mega-item.is-open > .gi-mega-top-link::after {
    transform: scaleX(1);
}

/* Arrow chevron */
.gi-mega-arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform .2s ease;
    opacity: .6;
}

.gi-mega-item.is-open > .gi-mega-top-link .gi-mega-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   MEGA MENU — Panel
========================================================= */

.gi-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 500;
    background: #fff;
    border-top: 3px solid #c0392b;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* Width variants */
.gi-mega-panel--wide   { left: 50%; transform: translateX(-50%); right: auto; width: 800px; max-width: 98vw; }
.gi-mega-panel--medium { left: 50%; transform: translateX(-50%); right: auto; width: 640px; max-width: 98vw; }
.gi-mega-panel--narrow { right: auto; width: 480px; max-width: 98vw; }

.gi-mega-panel-inner {
    padding: 28px 32px;
    display: flex;
    gap: 0;
    align-items: flex-start;
}


/* ── Featured post (artikel besar) ────────────────────── */

.gi-mega-featured {
    flex: 0 0 260px;
    max-width: 260px;
    margin-right: 28px;
    padding-right: 28px;
    border-right: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.gi-mega-featured-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s;
}

.gi-mega-featured-link:hover { opacity: .85; }

.gi-mega-featured-img {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 12px;
}

.gi-mega-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.gi-mega-featured-link:hover .gi-mega-featured-img img {
    transform: scale(1.04);
}

.gi-mega-featured-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gi-mega-featured-cat {
    display: inline-block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: #c0392b;
    color: #fff;
    padding: 2px 7px;
    border-radius: 2px;
    align-self: flex-start;
}

.gi-mega-featured-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    color: #111;
    margin: 0;
}

.gi-mega-featured-excerpt {
    font-size: 12px;
    line-height: 1.55;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gi-mega-featured-date {
    font-size: 11px;
    color: #aaa;
}


/* ── Columns ────────────────────────────────────────────── */

.gi-mega-columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0 24px;
    min-width: 0;
}

/* Jika ada featured, kurangi kolom sedikit */
.gi-mega-columns.has-featured {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.gi-mega-col {
    min-width: 0;
    padding: 0 0 8px;
}


/* ── Kolom header: label rubrik ─────────────────────────── */

.gi-mega-col-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

.gi-mega-panel-cat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c0392b;
    text-decoration: none;
    transition: opacity .15s;
}

.gi-mega-panel-cat-label::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 2px;
    background: #c0392b;
    flex-shrink: 0;
}

.gi-mega-panel-cat-label:hover { opacity: .72; }


/* ── Link list dalam kolom ──────────────────────────────── */

.gi-mega-sub-list,
.gi-mega-post-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gi-mega-panel-link {
    display: block;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    padding: 5px 0;
    transition: color .15s, padding-left .15s;
    line-height: 1.4;
    border-bottom: none;
}

.gi-mega-panel-link:hover {
    color: #111;
    padding-left: 5px;
}

/* Sub list dengan bullet */
.gi-mega-sub-list .gi-mega-panel-link {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

.gi-mega-item-bullet {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c0392b;
    opacity: .5;
    transition: opacity .15s;
}

.gi-mega-sub-list .gi-mega-panel-link:hover .gi-mega-item-bullet {
    opacity: 1;
}

/* Post list */
.gi-mega-post-item {}

.gi-mega-post-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gi-mega-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    font-weight: 600;
    font-size: 12px;
}

.gi-mega-post-date {
    font-size: 10px;
    color: #aaa;
    font-weight: 400;
}


/* ── View all ────────────────────────────────────────────── */

.gi-mega-view-all {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #c0392b;
    text-decoration: none;
    margin-top: 6px;
    transition: opacity .15s;
}

.gi-mega-view-all:hover { opacity: .72; }


/* =========================================================
   MEGA MENU — Standard Dropdown
========================================================= */

.gi-mega-dd-item {
    position: relative;
}

.gi-mega-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-top: 3px solid #c0392b;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    z-index: 500;
    padding: 8px 0;
}

/* Sub-dropdown (nested) */
.gi-mega-dd-item .gi-mega-dropdown {
    top: -8px;
    left: 100%;
    border-top: none;
    border-left: 3px solid #c0392b;
}

.gi-mega-dd-link {
    display: flex;
    align-items: center;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: background .12s, color .12s, padding-left .15s;
    white-space: nowrap;
    gap: 8px;
}

.gi-mega-dd-link:hover {
    background: #fafafa;
    color: #111;
    padding-left: 22px;
}


/* =========================================================
   MEGA MENU — Vertical layout
========================================================= */

.gi-mega-nav--vertical .gi-mega-nav-list {
    flex-direction: column;
    gap: 0;
}

.gi-mega-nav--vertical .gi-mega-item {
    position: relative;
}

.gi-mega-nav--vertical .gi-mega-panel {
    left: 100%;
    top: 0;
    bottom: auto;
}


/* =========================================================
   MEGA MENU — Responsive
========================================================= */

@media (max-width: 1024px) {
    .gi-mega-featured      { flex: 0 0 200px; max-width: 200px; }
    .gi-mega-panel--wide   { width: 700px; }
}

@media (max-width: 767px) {
    /* Sembunyikan mega menu di mobile — gunakan hamburger */
    .gi-mega-nav { display: none; }
}


/* =========================================================
   HAMBURGER — Responsive (show/hide)
========================================================= */

/* Opsional: tombol hamburger bisa disembunyikan di desktop via Elementor responsive controls */
@media (min-width: 1025px) {
    /* Di desktop, hamburger bisa tetap visible untuk supplemental nav */
    /* Override dengan display:none di Elementor jika tidak diinginkan */
}



/* =========================================================
   GI NAV MENU — Wrapper & switching
   Breakpoint dikontrol via JS (class + hidden attribute).
   --gi-nav-bp di-set dari PHP lewat style attribute.
========================================================= */

.gi-nav-wrap {
    position: relative;
}

/* ── Visibility dikontrol oleh PHP inline <style> per widget ID ──
   PHP output: #gi-nav-XXX .gi-nav-desktop { display:block/none !important }
   PHP output: #gi-nav-XXX .gi-nav-hbg-btn { display:none/inline-flex !important }
   CSS di sini TIDAK set display — biarkan PHP yang handle via ID selector.
──────────────────────────────────────────────────────────────────── */


/* =========================================================
   DESKTOP — Nav list & items
========================================================= */

.gi-nav-desktop {
    position: relative;
}

.gi-nav-desktop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 28px;
    flex-wrap: nowrap;
}

/* ── Top-level item ─────────────────────────────────────── */

.gi-nav-item {
    position: static;
    display: flex;
    align-items: center;
}

.gi-nav-item.has-dropdown,
.gi-nav-dd-item {
    position: relative;
}

.gi-nav-top-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    position: relative;
    padding-bottom: 2px;
    cursor: pointer;
}

/* Underline accent */
.gi-nav-top-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #c0392b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.gi-nav-top-link:hover::after,
.gi-nav-item.is-open > .gi-nav-top-link::after,
.gi-nav-item.current-item > .gi-nav-top-link::after {
    transform: scaleX(1);
}

/* Chevron */
.gi-nav-arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: .6;
    transition: transform .2s ease;
}

.gi-nav-item.is-open > .gi-nav-top-link .gi-nav-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   DESKTOP — Mega Panel
========================================================= */

.gi-nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9000;
    background: #fff;
    border-top: 3px solid #c0392b;
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
    /* Hidden by default — no HTML 'hidden' attr needed */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.gi-nav-item.is-open > .gi-nav-panel,
.gi-nav-dd-item.is-open > .gi-nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
}

.gi-nav-panel--wide   { left:50%; transform:translateX(-50%); right:auto; width:840px; max-width:98vw; }
.gi-nav-panel--medium { left:50%; transform:translateX(-50%); right:auto; width:640px; max-width:98vw; }
.gi-nav-panel--narrow { right:auto; width:480px; max-width:98vw; }

.gi-nav-panel-inner {
    padding: 28px 32px;
    display: flex;
    gap: 0;
    align-items: flex-start;
}

/* ── Featured post ──────────────────────────────────────── */

.gi-nav-featured {
    flex: 0 0 260px;
    max-width: 260px;
    margin-right: 28px;
    padding-right: 28px;
    border-right: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.gi-nav-featured-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s;
}

.gi-nav-featured-link:hover { opacity: .85; }

.gi-nav-featured-img {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 12px;
}

.gi-nav-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.gi-nav-featured-link:hover .gi-nav-featured-img img { transform: scale(1.04); }

.gi-nav-featured-body { display: flex; flex-direction: column; gap: 6px; }

.gi-nav-featured-cat {
    display: inline-block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: #c0392b;
    color: #fff;
    padding: 2px 7px;
    border-radius: 2px;
    align-self: flex-start;
}

.gi-nav-featured-title {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    color: #111;
    margin: 0;
}

.gi-nav-featured-excerpt {
    font-size: 12px;
    line-height: 1.55;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gi-nav-featured-date { font-size: 11px; color: #aaa; }

/* ── Columns ────────────────────────────────────────────── */

.gi-nav-columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) );
    gap: 0 24px;
    min-width: 0;
}

.gi-nav-columns.has-featured {
    grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) );
}

.gi-nav-col { min-width: 0; padding: 0 0 8px; }

.gi-nav-col-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

.gi-nav-panel-cat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c0392b;
    text-decoration: none;
    transition: opacity .15s;
}

.gi-nav-panel-cat-label::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 2px;
    background: #c0392b;
    flex-shrink: 0;
}

.gi-nav-panel-cat-label:hover { opacity: .72; }

/* Link dalam kolom */
.gi-nav-sub-list,
.gi-nav-post-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gi-nav-panel-link {
    display: block;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    padding: 5px 0;
    line-height: 1.4;
    transition: color .12s, padding-left .12s;
}

.gi-nav-panel-link:hover { color: #111; padding-left: 4px; }

/* Sub list dengan bullet */
.gi-nav-sub-list .gi-nav-panel-link {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

.gi-nav-item-bullet {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c0392b;
    opacity: .5;
    transition: opacity .12s;
}

.gi-nav-sub-list .gi-nav-panel-link:hover .gi-nav-item-bullet { opacity: 1; }

/* Post list */
.gi-nav-post-link { display: flex; flex-direction: column; gap: 2px; }

.gi-nav-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    font-weight: 600;
    font-size: 12px;
}

.gi-nav-post-date { font-size: 10px; color: #aaa; }

.gi-nav-view-all {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #c0392b;
    text-decoration: none;
    margin-top: 6px;
    transition: opacity .12s;
}

.gi-nav-view-all:hover { opacity: .72; }


/* =========================================================
   DESKTOP — Standard Dropdown
========================================================= */

.gi-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-top: 3px solid #c0392b;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    z-index: 9000;
    padding: 8px 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Nested dropdown */
.gi-nav-dd-item .gi-nav-dropdown {
    top: -8px;
    left: 100%;
    border-top: none;
    border-left: 3px solid #c0392b;
}

.gi-nav-dd-link {
    display: flex;
    align-items: center;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: background .12s, padding-left .12s;
    white-space: nowrap;
    gap: 8px;
}

.gi-nav-dd-link:hover {
    background: #fafafa;
    color: #111;
    padding-left: 22px;
}


/* =========================================================
   MOBILE — Hamburger Button
========================================================= */

.gi-nav-hbg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: inherit;
    border-radius: 3px;
    transition: opacity .2s;
}

.gi-nav-hbg-btn:hover { opacity: .72; }

/* Ikon: tiga garis */
.gi-nav-hbg-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.gi-nav-hbg-line {
    display: block;
    height: 2px;
    width: 24px;
    background: currentColor;
    border-radius: 2px;
    transform-origin: center;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s, width .2s;
}

/* Animasi → X */
.gi-nav-hbg-btn.is-open .gi-nav-hbg-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gi-nav-hbg-btn.is-open .gi-nav-hbg-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.gi-nav-hbg-btn.is-open .gi-nav-hbg-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Ikon: grid titik */
.gi-nav-hbg-grid {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 3px;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-items: center;
    flex-direction: unset;
}

.gi-nav-hbg-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    transition: transform .2s;
}

/* Ikon: word */
.gi-nav-hbg-word {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.gi-nav-hbg-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================================
   MOBILE — Backdrop
========================================================= */

.gi-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0,0,0,.65);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.gi-nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}


/* =========================================================
   MOBILE — Drawer
========================================================= */

.gi-nav-drawer {
    position: fixed;
    top: 0;
    z-index: 9995;
    height: 100%;
    width: 360px;
    max-width: 92vw;
    background: #0a0a0a;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;               /* always flex — no hidden attr */
    flex-direction: column;
    will-change: transform;
    visibility: hidden;          /* hidden by default via visibility */
    pointer-events: none;        /* no clicks until open */
}

.gi-nav-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* Slide left */
.gi-nav-drawer--slide.gi-nav-drawer--left {
    left: 0;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow: 6px 0 40px rgba(0,0,0,.4);
}

/* Slide right */
.gi-nav-drawer--slide.gi-nav-drawer--right {
    right: 0;
    left: auto;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow: -6px 0 40px rgba(0,0,0,.4);
}

.gi-nav-drawer--slide.is-open {
    transform: translateX(0) !important;
}

/* Fullscreen */
.gi-nav-drawer--fullscreen {
    width: 100% !important;
    max-width: 100% !important;
    left: 0;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .3s ease, transform .3s ease;
}

.gi-nav-drawer--fullscreen.is-open {
    opacity: 1;
    transform: scale(1);
}

/* Reveal */
.gi-nav-drawer--reveal { transform: translateX(0); }

body.gi-drawer-open { overflow: hidden; }
body.gi-reveal-left  { transform: translateX(var(--gi-drawer-w,360px)); transition: transform .35s cubic-bezier(.4,0,.2,1); }
body.gi-reveal-right { transform: translateX(calc(-1 * var(--gi-drawer-w,360px))); transition: transform .35s cubic-bezier(.4,0,.2,1); }


/* =========================================================
   MOBILE — Drawer Content
========================================================= */

/* Header */
.gi-nav-hd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

.gi-nav-hd-brand { flex: 1; min-width: 0; }

.gi-nav-hd-logo { max-height: 36px; width: auto; display: block; }

.gi-nav-hd-logo-text {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -.5px;
    color: #c0392b;
    text-decoration: none;
    line-height: 1;
}

.gi-nav-hd-tagline {
    font-size: 11px;
    color: rgba(255,255,255,.3);
    margin: 6px 0 0;
    font-style: italic;
    letter-spacing: .3px;
    line-height: 1.4;
}

.gi-nav-hd-close {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.45);
    padding: 4px;
    margin-left: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: color .15s, background .15s;
}

.gi-nav-hd-close svg { width: 20px; height: 20px; }
.gi-nav-hd-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Section */
.gi-nav-hd-section {
    padding: 18px 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

.gi-nav-hd-section-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c0392b;
    margin: 0 0 12px;
}

/* Search */
.gi-nav-hd-search { padding: 14px 24px; }

.gi-nav-hd-search-wrap {
    display: flex;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .2s;
}

.gi-nav-hd-search-wrap:focus-within { border-color: rgba(255,255,255,.25); }

.gi-nav-hd-search-wrap input[type="search"] {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    padding: 10px 14px;
    min-width: 0;
}

.gi-nav-hd-search-wrap input::placeholder { color: rgba(255,255,255,.28); }

.gi-nav-hd-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    color: #c0392b;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.gi-nav-hd-search-btn svg { width: 16px; height: 16px; }

/* Nav menu */
.gi-nav-hd-nav { flex: 1; padding: 6px 0; }

.gi-nav-hd-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gi-nav-hd-item {
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.gi-nav-hd-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 24px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .15px;
    transition: color .12s, padding-left .15s;
    position: relative;
}

.gi-nav-hd-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: #c0392b;
    transition: width .2s;
}

.gi-nav-hd-link:hover,
.gi-nav-hd-link.active {
    color: #fff;
    padding-left: 30px;
}

.gi-nav-hd-link:hover::before,
.gi-nav-hd-link.active::before { width: 3px; }

/* Toggle arrow */
.gi-nav-hd-toggle {
    display: flex;
    align-items: center;
    padding: 4px;
    margin-right: -4px;
    flex-shrink: 0;
    color: rgba(255,255,255,.28);
    transition: transform .25s, color .15s;
}

.gi-nav-hd-toggle svg { width: 14px; height: 14px; }

.gi-nav-hd-item.sub-open > .gi-nav-hd-link .gi-nav-hd-toggle {
    transform: rotate(90deg);
    color: rgba(255,255,255,.55);
}

/* Submenu */
.gi-nav-hd-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    max-height: 0;              /* collapsed by default — no hidden attr */
    transition: max-height .28s cubic-bezier(.4,0,.2,1);
}

.gi-nav-hd-item.sub-open > .gi-nav-hd-submenu {
    max-height: 600px;          /* open state */
}

.gi-nav-hd-submenu .gi-nav-hd-link {
    padding: 9px 24px 9px 40px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
}

.gi-nav-hd-submenu .gi-nav-hd-link:hover { color: rgba(255,255,255,.85); padding-left: 46px; }
.gi-nav-hd-submenu .gi-nav-hd-link::before { left: 24px; }

/* Recent posts */
.gi-nav-hd-recent {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gi-nav-hd-recent-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s;
}

.gi-nav-hd-recent-link:hover { opacity: .72; }

.gi-nav-hd-recent-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 3px;
}

.gi-nav-hd-recent-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.gi-nav-hd-recent-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }

.gi-nav-hd-recent-cat {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c0392b;
}

.gi-nav-hd-recent-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Newsletter mini */
.gi-nav-hd-nl-form {
    display: flex;
    margin-top: 4px;
}

.gi-nav-hd-nl-form input[type="email"] {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-right: none;
    border-radius: 3px 0 0 3px;
    color: #fff;
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    min-width: 0;
}

.gi-nav-hd-nl-form input::placeholder { color: rgba(255,255,255,.25); }

.gi-nav-hd-nl-form button {
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 0 3px 3px 0;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}

.gi-nav-hd-nl-form button:hover { background: #a93226; }

/* Social */
.gi-nav-hd-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gi-nav-hd-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.gi-nav-hd-social a:hover { background: rgba(255,255,255,.12); color: #fff; }
.gi-nav-hd-social svg { width: 15px; height: 15px; }


/* ============================================================
   GI ACCESSIBILITY BAR — v6.4.0
   ============================================================ */

.gi-a11y-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
    font-family: inherit;
}

/* Group (TTS | FontSize) */
.gi-a11y-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.gi-a11y-group-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    user-select: none;
}

.gi-a11y-group-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
}

.gi-a11y-group-text { display: inline; }

/* Divider antara group */
.gi-a11y-divider {
    width: 1px;
    height: 28px;
    background: #ddd;
    margin: 0 4px;
    align-self: center;
}

/* Tombol */
.gi-a11y-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #fff;
    color: #333;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
    user-select: none;
}

.gi-a11y-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    pointer-events: none;
}

/* Tombol icon-only (font ± reset) — lebih compact */
.gi-a11y-btn--font-inc,
.gi-a11y-btn--font-dec,
.gi-a11y-btn--font-reset {
    padding: 6px 8px;
    min-width: 32px;
    justify-content: center;
}

.gi-a11y-btn:hover:not(:disabled) {
    background: #f0f0f0;
    border-color: #bbb;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.gi-a11y-btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.gi-a11y-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* State aktif (saat TTS berjalan atau font diubah) */
.gi-a11y-btn--active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}

.gi-a11y-btn--active svg {
    stroke: #fff;
}

/* Label ukuran font */
.gi-a11y-font-label {
    min-width: 38px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    font-variant-numeric: tabular-nums;
}

/* Progress bar TTS */
.gi-a11y-tts-progress {
    display: none; /* JS set ke flex saat aktif */
    align-items: center;
    flex: 1;
    min-width: 60px;
    max-width: 180px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.gi-a11y-tts-progress-bar {
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    border-radius: 2px;
    transition: width .3s linear;
}

/* Status text (aria-live) */
.gi-a11y-tts-status {
    font-size: 11px;
    color: #888;
    font-style: italic;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Animasi icon baca (pulse saat playing) */
.gi-a11y-btn--tts-play.gi-a11y-btn--active svg {
    animation: gi-a11y-pulse 1.2s ease-in-out infinite;
}
@keyframes gi-a11y-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* Screen-reader only */
.gi-a11y-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Responsive — stack di mobile */
@media (max-width: 480px) {
    .gi-a11y-bar {
        gap: 10px;
        padding: 10px 12px;
    }
    .gi-a11y-divider { display: none; }
    .gi-a11y-group { width: 100%; }
    .gi-a11y-group-text { display: inline; }
    .gi-a11y-tts-status { max-width: 100%; }
    .gi-a11y-tts-progress { max-width: 100px; }
}