:root{
    --rp-bg:#01170e;
    --rp-bg-2:#043b25;
    --rp-bg-3:#087248;

    --rp-card:rgba(4,62,38,.94);
    --rp-card-2:rgba(7,101,59,.9);
    --rp-card-dark:rgba(2,37,23,.96);

    --rp-text:#f2fff7;
    --rp-muted:#c4e6d2;

    --rp-green:#3cff9f;
    --rp-green-soft:#a0ffcc;
    --rp-lime:#d1ff84;
    --rp-gold:#f5d875;

    --rp-border:rgba(116,255,183,.34);
    --rp-shadow:
        0 14px 34px rgba(0,0,0,.36),
        0 0 18px rgba(60,255,159,.16),
        0 0 45px rgba(60,255,159,.07);
}

/* RESET */
*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    min-height:100%;
}

/* =====================================================
   BACKGROUND UTAMA TEMA RP5.000
===================================================== */

body{
    position:relative;
    min-height:100vh;
    overflow-x:hidden;
    color:var(--rp-text);

    background:
        radial-gradient(
            circle at 14% 14%,
            rgba(54,255,153,.32),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 82%,
            rgba(209,255,132,.14),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #01130b 0%,
            #043821 35%,
            #087248 68%,
            #01180f 100%
        );

    background-attachment:fixed;
    isolation:isolate;
}

/* POLA QRIS DI SELURUH HALAMAN */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;
    opacity:.4;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(198,255,225,.08) 47%,
            rgba(198,255,225,.08) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(198,255,225,.08) 47%,
            rgba(198,255,225,.08) 53%,
            transparent 54%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 24px,
            rgba(255,255,255,.022) 24px 26px
        );

    background-size:
        44px 44px,
        44px 44px,
        86px 86px;
}

/* SILUET PAHLAWAN INDONESIA */
body::after{
    content:"";
    position:fixed;
    right:-30px;
    bottom:-45px;
    width:min(450px,68vw);
    height:min(640px,78vh);
    z-index:-2;
    pointer-events:none;
    opacity:.17;

    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:contain;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 620'%3E%3Cdefs%3E%3ClinearGradient id='hero' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%235cffab'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='6' result='blur'/%3E%3CfeMerge%3E%3CfeMergeNode in='blur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='url(%23hero)' filter='url(%23glow)'%3E%3Cpath d='M106 110c29-50 166-70 214-10l-10 36H117z'/%3E%3Cpath d='M133 119c7-66 43-96 85-96 48 0 85 39 85 96v48c0 73-37 129-85 129-47 0-85-56-85-129z'/%3E%3Cpath d='M103 618c5-113 18-217 57-281 17-28 38-43 59-43 23 0 47 19 67 49 39 65 49 164 53 275z'/%3E%3Cpath d='M80 616c8-125 18-206 67-251l49 39-25 212z'/%3E%3Cpath d='M356 616c-8-125-18-206-68-251l-49 39 26 212z'/%3E%3Cpath d='M172 301h94l-13 91-34 35-36-35z'/%3E%3Cpath d='M153 160c24 13 105 15 135-7-5 49-30 100-70 100-39 0-62-49-65-93z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");

    filter:
        drop-shadow(0 0 18px rgba(83,255,166,.55))
        drop-shadow(0 0 58px rgba(83,255,166,.22));

    animation:pahlawanFloat 5s ease-in-out infinite;
}

/* =====================================================
   HEADING
===================================================== */

h1{
    margin-bottom:10px;

    font-size:32px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.3px;
    text-align:center;

    color:#f3fff8;

    background:
        linear-gradient(
            180deg,
            #ffffff 10%,
            #d5ffe7 48%,
            #65ffae 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    filter:
        drop-shadow(0 0 9px rgba(69,255,157,.4));

    animation:titleGlow 4s ease-in-out infinite;
}

h1 span{
    color:var(--rp-gold);
    -webkit-text-fill-color:var(--rp-gold);

    text-shadow:
        0 0 12px rgba(245,216,117,.52),
        0 0 25px rgba(245,216,117,.18);
}

h2{
    position:relative;

    margin:30px 0 20px;
    padding-left:16px;

    font-size:26px;
    font-weight:700;
    letter-spacing:.4px;

    color:#effff5;

    text-shadow:
        0 0 10px rgba(63,255,157,.3);
}

h2::before{
    content:"";
    position:absolute;

    top:4px;
    bottom:4px;
    left:0;

    width:4px;
    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            var(--rp-gold),
            var(--rp-green)
        );

    box-shadow:
        0 0 10px rgba(65,255,159,.55),
        0 0 18px rgba(245,216,117,.22);
}

h3{
    margin:20px 0 10px;

    font-size:20px;
    font-weight:700;

    color:#baffd5;

    text-shadow:
        0 0 8px rgba(62,255,156,.28);
}

/* =====================================================
   TEKS
===================================================== */

p{
    margin-bottom:15px;

    color:var(--rp-muted);

    font-size:16px;
    line-height:1.75;
    text-align:justify;
}

li{
    margin:0 0 10px 20px;

    color:var(--rp-muted);
    list-style-type:disc;
}

a{
    color:var(--rp-lime);
    font-weight:700;
    text-decoration:none;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

a:hover{
    color:var(--rp-gold);

    text-shadow:
        0 0 8px rgba(245,216,117,.42);
}

/* =====================================================
   HIGHLIGHT BOX QRIS
===================================================== */

.highlight-box{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    margin:30px 0;
    padding:25px;

    border:
        1px solid var(--rp-border);

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            var(--rp-card-dark),
            var(--rp-card),
            var(--rp-card-2)
        );

    box-shadow:
        var(--rp-shadow),
        0 0 0 1px rgba(255,255,255,.035) inset;

    backdrop-filter:blur(8px);
}

/* POLA QRIS */
.highlight-box::before,
.info-card::before,
.faq-item::before,
.review-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.42;

    background-image:
        linear-gradient(
            90deg,
            transparent 46%,
            rgba(204,255,228,.13) 47%,
            rgba(204,255,228,.13) 53%,
            transparent 54%
        ),
        linear-gradient(
            transparent 46%,
            rgba(204,255,228,.13) 47%,
            rgba(204,255,228,.13) 53%,
            transparent 54%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0 14px,
            rgba(255,255,255,.024) 14px 16px
        );

    background-size:
        30px 30px,
        30px 30px,
        52px 52px;
}

/* CAHAYA BERGERAK */
.highlight-box::after,
.info-card::after,
.review-card::after{
    content:"";
    position:absolute;

    top:-55%;
    left:-100%;

    width:38%;
    height:220%;

    z-index:-1;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(225,255,238,.2),
            transparent
        );

    transform:rotate(20deg);
    filter:blur(8px);

    animation:qrisLight 7s linear infinite;
}

/* =====================================================
   INFO GRID
===================================================== */

.info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;

    margin:25px 0;
}

.info-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:20px 12px;

    text-align:center;

    border:
        1px solid rgba(118,255,184,.3);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(8,104,62,.87),
            rgba(2,43,27,.97)
        );

    box-shadow:
        0 10px 24px rgba(0,0,0,.26),
        0 0 16px rgba(59,255,157,.14),
        0 0 0 1px rgba(255,255,255,.025) inset;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.info-card:hover{
    transform:translateY(-4px);

    border-color:
        rgba(132,255,193,.62);

    box-shadow:
        0 14px 30px rgba(0,0,0,.32),
        0 0 24px rgba(59,255,157,.26),
        0 0 45px rgba(59,255,157,.09);
}

.info-card .label{
    position:relative;
    z-index:2;

    font-size:13px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;

    color:#c5ffdc;
}

.info-card .value{
    position:relative;
    z-index:2;

    margin-top:10px;

    font-size:18px;
    font-weight:800;

    color:#ffffff;

    text-shadow:
        0 0 10px rgba(60,255,159,.3),
        0 0 18px rgba(245,216,117,.12);
}

/* =====================================================
   FAQ QRIS
===================================================== */

.faq-container{
    margin:30px 0;
}

.faq-item{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    margin-bottom:14px;

    border:
        1px solid rgba(118,255,184,.28);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(3,52,32,.97),
            rgba(7,96,57,.91)
        );

    box-shadow:
        0 10px 24px rgba(0,0,0,.28),
        0 0 17px rgba(59,255,157,.13),
        0 0 40px rgba(59,255,157,.05);
}

.faq-question{
    position:relative;
    z-index:2;

    width:100%;
    padding:18px 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;
    cursor:pointer;

    font-size:16px;
    font-weight:700;
    text-align:left;

    color:#f1fff7;

    background:
        linear-gradient(
            90deg,
            rgba(28,190,108,.22),
            rgba(209,255,132,.07),
            rgba(28,190,108,.18)
        );

    transition:
        background .25s ease,
        box-shadow .25s ease;
}

.faq-question:hover{
    background:
        linear-gradient(
            90deg,
            rgba(35,225,128,.31),
            rgba(245,216,117,.1),
            rgba(35,225,128,.25)
        );

    box-shadow:
        0 0 20px rgba(59,255,157,.12) inset;
}

.faq-question .icon{
    color:var(--rp-gold);

    font-size:22px;
    font-weight:400;

    text-shadow:
        0 0 10px rgba(245,216,117,.48);

    transition:
        transform .25s ease;
}

.faq-answer{
    max-height:0;
    padding:0 20px;
    overflow:hidden;

    background:
        rgba(2,34,21,.8);

    transition:
        max-height .3s ease,
        padding .3s ease;
}

.faq-answer p{
    margin:15px 0;

    color:var(--rp-muted);
}

.faq-answer.open{
    max-height:250px;
    padding:0 20px;
}

/* =====================================================
   REVIEW CARD QRIS
===================================================== */

.reviews-section{
    margin:40px 0;
}

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

    margin-top:25px;
}

.review-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    padding:20px;

    border:
        1px solid rgba(118,255,184,.28);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(7,97,58,.91),
            rgba(2,43,27,.98)
        );

    box-shadow:
        0 12px 28px rgba(0,0,0,.3),
        0 0 17px rgba(59,255,157,.13),
        0 0 42px rgba(59,255,157,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.review-card:hover{
    transform:translateY(-5px);

    border-color:
        rgba(133,255,193,.62);

    box-shadow:
        0 17px 34px rgba(0,0,0,.34),
        0 0 26px rgba(59,255,157,.25),
        0 0 50px rgba(59,255,157,.09);
}

.review-header{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin-bottom:12px;
}

.review-name{
    font-weight:800;
    color:#ffffff;
}

.review-stars{
    color:var(--rp-gold);
    letter-spacing:2px;

    text-shadow:
        0 0 8px rgba(245,216,117,.48);
}

.review-text{
    position:relative;
    z-index:2;

    margin:10px 0;

    color:var(--rp-muted);

    font-size:14px;
    font-style:italic;
    line-height:1.75;
}

.review-date{
    position:relative;
    z-index:2;

    display:block;
    margin-top:10px;

    color:#9dd6b7;
    font-size:12px;
}

/* =====================================================
   CTA BUTTON
===================================================== */

.cta-section{
    margin:40px 0 20px;

    text-align:center;
}

.cta-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.btn{
    position:relative;
    overflow:hidden;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:150px;
    padding:14px 40px;

    border:1px solid;
    border-radius:50px;

    font-size:15px;
    font-weight:800;
    letter-spacing:1px;
    text-decoration:none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.btn::before{
    content:"";
    position:absolute;
    inset:0;

    opacity:0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,.3) 50%,
            transparent 80%
        );

    transform:translateX(-120%);
}

.btn:hover::before{
    opacity:1;
    animation:shineMove 1.1s linear;
}

.btn-login{
    color:#effff5;

    border-color:
        rgba(91,255,168,.45);

    background:
        linear-gradient(
            135deg,
            rgba(5,75,45,.96),
            rgba(9,132,76,.88)
        );

    box-shadow:
        0 10px 22px rgba(0,0,0,.25),
        0 0 16px rgba(59,255,157,.18);
}

.btn-login:hover{
    transform:translateY(-2px);

    border-color:
        var(--rp-green);

    box-shadow:
        0 14px 27px rgba(0,0,0,.3),
        0 0 23px rgba(59,255,157,.34);
}

.btn-register{
    color:#052519;

    border-color:
        rgba(255,245,183,.65);

    background:
        linear-gradient(
            135deg,
            var(--rp-gold) 0%,
            var(--rp-lime) 50%,
            var(--rp-green) 100%
        );

    box-shadow:
        0 11px 23px rgba(0,0,0,.28),
        0 0 19px rgba(59,255,157,.23),
        0 0 37px rgba(245,216,117,.11);
}

.btn-register:hover{
    transform:translateY(-2px);
    filter:brightness(1.07);

    box-shadow:
        0 15px 28px rgba(0,0,0,.32),
        0 0 26px rgba(59,255,157,.36),
        0 0 46px rgba(245,216,117,.17);
}

/* =====================================================
   GLOW OTOMATIS UNTUK CARD DAN AREA PADDING
===================================================== */

.container,
.content,
.content-box,
.card,
.box,
.panel,
.padding,
[class*="card"],
[class*="box"],
[class*="panel"],
[class*="padding"]{
    border-color:
        rgba(116,255,183,.3);

    box-shadow:
        0 12px 30px rgba(0,0,0,.28),
        0 0 17px rgba(59,255,157,.13),
        0 0 42px rgba(59,255,157,.05);
}

/* =====================================================
   ANIMASI
===================================================== */

@keyframes titleGlow{
    0%,
    100%{
        filter:
            drop-shadow(0 0 8px rgba(64,255,158,.32));
    }

    50%{
        filter:
            drop-shadow(0 0 15px rgba(64,255,158,.5));
    }
}

@keyframes qrisLight{
    0%{
        left:-100%;
    }

    45%,
    100%{
        left:155%;
    }
}

@keyframes pahlawanFloat{
    0%,
    100%{
        transform:translateY(0) scale(1);
        opacity:.14;
    }

    50%{
        transform:translateY(-9px) scale(1.015);
        opacity:.2;
    }
}

@keyframes shineMove{
    0%{
        transform:translateX(-120%);
    }

    100%{
        transform:translateX(120%);
    }
}

/* =====================================================
   RESPONSIVE
===================================================== */

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

    .reviews-grid{
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media(max-width:768px){
    .container{
        padding:25px;
    }

    h1{
        font-size:24px;
    }

    h2{
        font-size:22px;
    }

    .info-card .value{
        font-size:16px;
    }

    .reviews-grid{
        grid-template-columns:1fr;
    }

    .btn{
        width:100%;
        max-width:260px;
    }

    body::after{
        right:-110px;
        width:390px;
        height:550px;
        opacity:.1;
    }
}

@media(max-width:520px){
    .info-grid{
        grid-template-columns:1fr;
    }

    .highlight-box,
    .info-card,
    .review-card{
        padding:17px 14px;
    }

    h1{
        font-size:22px;
    }

    h2{
        font-size:20px;
    }

    h3{
        font-size:18px;
    }

    body::after{
        right:-150px;
        bottom:-20px;
        width:340px;
        height:490px;
        opacity:.08;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}

/* =====================================================
   ARTIKEL PREMIUM — TAMBAHAN
   Fokus pada area artikel tanpa mengubah struktur HTML
===================================================== */

article,
.article,
.article-content,
.entry-content,
.post-content,
.main-content,
main .container{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    width:min(100%, 1080px);
    margin:28px auto;
    padding:clamp(22px, 4vw, 46px);

    border:1px solid rgba(116,255,183,.34);
    border-radius:26px;

    background:
        linear-gradient(145deg, rgba(2,35,22,.96), rgba(5,78,47,.9)),
        radial-gradient(circle at 12% 0%, rgba(60,255,159,.12), transparent 34%);

    box-shadow:
        0 22px 55px rgba(0,0,0,.42),
        0 0 24px rgba(60,255,159,.14),
        0 0 70px rgba(60,255,159,.06),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter:blur(10px);
}

article::before,
.article::before,
.article-content::before,
.entry-content::before,
.post-content::before,
.main-content::before,
main .container::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.28;

    background-image:
        linear-gradient(90deg, transparent 47%, rgba(210,255,231,.10) 48%, rgba(210,255,231,.10) 52%, transparent 53%),
        linear-gradient(transparent 47%, rgba(210,255,231,.10) 48%, rgba(210,255,231,.10) 52%, transparent 53%);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 88%);
}

article::after,
.article::after,
.article-content::after,
.entry-content::after,
.post-content::after,
.main-content::after,
main .container::after{
    content:"";
    position:absolute;
    top:-55%;
    left:-45%;
    z-index:-1;
    width:24%;
    height:210%;
    pointer-events:none;

    background:linear-gradient(90deg, transparent, rgba(230,255,241,.16), transparent);
    transform:rotate(18deg);
    filter:blur(8px);
    animation:articleLightSweep 9s linear infinite;
}

article > *:first-child,
.article > *:first-child,
.article-content > *:first-child,
.entry-content > *:first-child,
.post-content > *:first-child,
.main-content > *:first-child{
    margin-top:0;
}

article h1,
.article h1,
.article-content h1,
.entry-content h1,
.post-content h1,
.main-content h1{
    margin:0 0 24px;
    padding-bottom:18px;
    font-size:clamp(26px, 4vw, 40px);
    line-height:1.25;
    text-align:left;
    letter-spacing:.2px;

    border-bottom:1px solid rgba(116,255,183,.2);
    background:linear-gradient(180deg, #ffffff 8%, #d8ffe8 52%, #68ffb0 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    filter:drop-shadow(0 0 10px rgba(60,255,159,.24));
}

article h2,
.article h2,
.article-content h2,
.entry-content h2,
.post-content h2,
.main-content h2{
    margin:34px 0 16px;
    padding:12px 16px 12px 18px;

    border:1px solid rgba(116,255,183,.18);
    border-left:4px solid var(--rp-green);
    border-radius:0 14px 14px 0;

    background:linear-gradient(90deg, rgba(60,255,159,.11), rgba(245,216,117,.04), transparent);
    box-shadow:inset 0 0 18px rgba(60,255,159,.04);
}

article h2::before,
.article h2::before,
.article-content h2::before,
.entry-content h2::before,
.post-content h2::before,
.main-content h2::before{
    display:none;
}

article h3,
.article h3,
.article-content h3,
.entry-content h3,
.post-content h3,
.main-content h3{
    margin:26px 0 12px;
    padding-left:13px;
    border-left:3px solid var(--rp-gold);
    color:#d7ffe7;
}

article p,
.article p,
.article-content p,
.entry-content p,
.post-content p,
.main-content p{
    margin:0 0 18px;
    color:#d5efe0;
    font-size:clamp(15px, 1.55vw, 17px);
    line-height:1.9;
    letter-spacing:.05px;
    text-align:left;
}

article p:first-of-type,
.article p:first-of-type,
.article-content p:first-of-type,
.entry-content p:first-of-type,
.post-content p:first-of-type,
.main-content p:first-of-type{
    color:#ecfff4;
    font-size:clamp(16px, 1.7vw, 18px);
}

article strong,
.article strong,
.article-content strong,
.entry-content strong,
.post-content strong,
.main-content strong{
    color:#ffffff;
    text-shadow:0 0 8px rgba(60,255,159,.2);
}

article ul,
article ol,
.article ul,
.article ol,
.article-content ul,
.article-content ol,
.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol,
.main-content ul,
.main-content ol{
    margin:18px 0 24px;
    padding:18px 20px 18px 42px;

    border:1px solid rgba(116,255,183,.16);
    border-radius:16px;
    background:rgba(1,34,20,.5);
    box-shadow:inset 0 0 20px rgba(60,255,159,.035);
}

article li,
.article li,
.article-content li,
.entry-content li,
.post-content li,
.main-content li{
    margin:0 0 11px;
    padding-left:4px;
    color:#cce9d8;
    line-height:1.75;
}

article li::marker,
.article li::marker,
.article-content li::marker,
.entry-content li::marker,
.post-content li::marker,
.main-content li::marker{
    color:var(--rp-green);
    font-weight:800;
}

article blockquote,
.article blockquote,
.article-content blockquote,
.entry-content blockquote,
.post-content blockquote,
.main-content blockquote{
    position:relative;
    margin:26px 0;
    padding:20px 22px 20px 58px;

    border:1px solid rgba(245,216,117,.25);
    border-radius:18px;
    background:linear-gradient(135deg, rgba(245,216,117,.09), rgba(60,255,159,.06));
    color:#f4ffe9;
    box-shadow:0 12px 28px rgba(0,0,0,.2);
}

article blockquote::before,
.article blockquote::before,
.article-content blockquote::before,
.entry-content blockquote::before,
.post-content blockquote::before,
.main-content blockquote::before{
    content:"“";
    position:absolute;
    top:8px;
    left:18px;
    color:var(--rp-gold);
    font-size:52px;
    line-height:1;
    text-shadow:0 0 12px rgba(245,216,117,.32);
}

article img,
.article img,
.article-content img,
.entry-content img,
.post-content img,
.main-content img{
    display:block;
    max-width:100%;
    height:auto;
    margin:26px auto;
    border:1px solid rgba(116,255,183,.3);
    border-radius:20px;
    box-shadow:
        0 18px 40px rgba(0,0,0,.38),
        0 0 20px rgba(60,255,159,.12);
}

article a,
.article a,
.article-content a,
.entry-content a,
.post-content a,
.main-content a{
    color:var(--rp-lime);
    text-decoration:underline;
    text-decoration-color:rgba(209,255,132,.4);
    text-underline-offset:4px;
}

article a:hover,
.article a:hover,
.article-content a:hover,
.entry-content a:hover,
.post-content a:hover,
.main-content a:hover{
    color:var(--rp-gold);
    text-decoration-color:var(--rp-gold);
}

@keyframes articleLightSweep{
    0%{ left:-45%; }
    55%,100%{ left:125%; }
}

@media(max-width:768px){
    article,
    .article,
    .article-content,
    .entry-content,
    .post-content,
    .main-content,
    main .container{
        margin:18px auto;
        padding:22px 18px;
        border-radius:20px;
    }

    article h1,
    .article h1,
    .article-content h1,
    .entry-content h1,
    .post-content h1,
    .main-content h1{
        text-align:center;
    }

    article h2,
    .article h2,
    .article-content h2,
    .entry-content h2,
    .post-content h2,
    .main-content h2{
        margin-top:28px;
        padding:11px 13px;
    }

    article p,
    .article p,
    .article-content p,
    .entry-content p,
    .post-content p,
    .main-content p{
        line-height:1.82;
        text-align:left;
    }
}