@import url("header.css");

*{
    margin:0;padding:0;box-sizing:border-box
}

@font-face {
    font-family: "AvenirNextLight";
    src: url("../fonts/avenir-next-lt-pro-light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body{
    background:#f7f7f7;
    color:#1d3557;
}

html,
body {
    font-family: "AvenirNextLight", sans-serif;
    font-weight: 300;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
.ed {
    font-family: inherit;
    font-weight: 300;
}

.container{width:1200px;max-width:95%;margin:auto}
.ed{
    margin-top:40px;color:#2196d3;font-family: "AvenirNextLight", sans-serif !important;font-weight:300
    }
h1{
    font-family: "AvenirNextLight", sans-serif !important;font-size:20px;margin:10px 0 35px
}

/*deck*/
.card{
    background:#fff;
    border-radius:2px;
    padding: 0px 15px 0px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    position:relative;
    padding-top: 10px !important;
    padding-bottom: 0px !important;
}

/*=============================
FOOTER
==============================*/
.footer{
    background:#343a40;
    color:#fff;
    margin-top:80px;
}

.footer-container{
    display:flex;
    justify-content:space-between;
    gap:40px;
    padding:50px 0;
}

.footer-column{
    flex:1;
}

.footer-column h3{
    font-size:26px;
    margin-bottom:15px;
}

.footer-column h4{
    margin-bottom:15px;
}

.footer-column p{
    color:#d8d8d8;
    line-height:1.8;
}

.footer-column ul{
    list-style:none;
    padding:0;
}

.footer-column li{
    margin-bottom:10px;
}

.footer-column a{
    color:#d8d8d8;
    text-decoration:none;
    transition:.2s;
}

.footer-column a:hover{
    color:white;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    padding:18px;
    color:#cfcfcf;
    font-size:14px;
}

/*
Read More
*/
.full-content {
    display: none;
}

/*
content area
*/
.content-area{
    padding-top:120px;
}

/*deck format*/
.news-category {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 0px;
    background: #6c757d;
    color: #fff;
    border: 1px solid #6c757d;
    font-size: 12px;  
    font-family: inherit; 
    line-height: 1;
}

.news-source {
    color: #777;
}

/*
bahasa
*/
/* =========================
   BRIEFING HEADER
========================= */

/*tulisan morning/afternoon update & the executive brief, jarak atas*/
.briefing-heading {
    padding: 10px 0 0;
    transform: translateY(-8px);
    margin-bottom: 0px;
}

/* Morning Edition + Language */
.briefing-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    margin: 0;
}


/* Tulisan Morning/Afternoon Update */
.briefing-heading .ed {
    padding: 0;
    margin: 0 0 0 !important;
    line-height: 1.1 !important;
    font-size: 16px !important;
    color: #6b7280;
}

/* Tulisan The Executive Brief */
.briefing-heading h1 {
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #102a43; 
}

/*jarak antar deck, jarak atas etc*/
.news-list{
    display:flex;
    flex-direction:column;
    gap:0px;
    transform: translateY(-20px);
    /*padding-bottom:50px;*/
}

/* =========================
   LANGUAGE SELECTOR
========================= */

.global-language {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin: 0;
    padding: 0;
}


/* Flag Button */
.flag-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

/* Flag */
.flag-btn img {
    width: 32px;
    height: 32px;
    display: block;
    border-radius: 50%;
}

/* Hover */
.flag-btn:hover {
    transform: scale(1.08);
}

/* Active */
.flag-btn.active img {
    box-shadow: 0 0 0 2px #777;
}

/*
navigasi artikel
*/
.article-related {
    width: 100%;
}

.article-related-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 8px;
}

.article-related-link {
    display: block;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    text-decoration: none;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e5e5;
}

.article-related-link:hover {
    color: #168dcc;
}

/*
mode artikel
*/
.news-card.article-open {
    max-width: 100%;
    display: block !important;
}

.news-card.article-hidden {
    display: none !important;
}

.news-card.article-open .news-title {
    max-width: 900px;
    color: #1d3557 !important;
    text-decoration: none !important;
    cursor: default;
}

.news-card.article-open .full-content {
    max-width: 900px;
}

.news-card.article-open .news-summary {
    display: none;
}

.news-card.article-open .readmore {
    display: none;
}

.news-card.article-open .full-content {
    display: block;
}

/*judul paragraf*/
.news-title {
    font-family: "AvenirNextLight", sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

/* Jarak judul dan summary berita */
.news-card .news-title {
    padding: 0 !important;
    line-height: 1.2 !important;
}

/*isi berita dan jarak bawahnya, menu utama the exectutive brief*/
.news-card .news-summary {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 5px !important;
    line-height: 1.2!important;
    font-size: 14px;
}

/*jarak kalimat dalam paragraf dan jarak antar paragrah*/
.full-content p {
    line-height: 1.40 !important;
    margin: 0 0 10px !important;
    
}

.full-content p:last-child {
    margin-bottom: 0 !important;
}

/*
Judul Utk Hyperlink
*/
.news-title-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.news-title-link:hover {
    color: #168dcc;
}

.news-title-link .news-title {
    cursor: pointer;
}

/*
Remaining Times, update pagi 10-siang 16
*/
.status-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*tombol ijo & merah*/
.status-box {
    width: 30px;
    height: 14px;
    border-radius: 0px;
    background: #2e9b4f;
    flex-shrink: 0;
}

.next-update {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}


/*
Marquee
*/

.running-text {
    width: calc(100% - 40px);
    margin-left: 40px;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 6px;
}

.running-text span {
    display: inline-block;
    white-space: nowrap;
    animation: runningText 10s linear infinite;
}

.running-text em {
    font-style: italic;
    font-size: 12px;
    font-weight: 300;
    color: #999;
}

@keyframes runningText {
    0% {
        transform: translateX(-100%);
    }

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

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


/*
Deck Header/filter based on Menu
*/
.deck-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translateY(-4px);
}

.deck-filter {
    padding: 6px 12px;
    border: 1px solid #bdbdbd;
    background: #fff;
    color: #444;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
}

.deck-filter:hover {
    background: #858b91;
    color: #fff;
    border-color: #6c757d;
}

/*menu berubah abu2 saat active*/
.deck-filter.active {
    background: #e3e7ea;
    color: #000;
    border-color: #6c757d;
}

/*sembunyikan navigasi*/
.article-navigation {
    display: none;
}

.article-navigation > a:nth-child(1) {
    justify-self: start;
}

.article-navigation > a:nth-child(2) {
    justify-self: start;
}

/*link footer dibagi 3 kolom*/
.news-card.article-open .article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    width: 100%;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    padding-bottom: 30px;
}

/*font size link footer*/
.news-card.article-open .article-navigation > a {
    font-size: 16px;
    color: #5b35a5;
    text-decoration: underline;
}

/* =========================
   ATTENTION BAR
   ========================= */
.news-card.article-open .attention-bars {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    zoom: 1 !important;
}

/* RESET TOTAL BAR */
.news-card.article-open .attention-bar {
    display: block !important;
    width: 30px !important;
    height: 14px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    line-height: 0 !important;
    font-size: 0 !important;
    transform: none !important;
    zoom: 1 !important;
}

/* LEVEL 1 */
.news-card.article-open .attention-bar.level-1 {
    background: #fff !important;
    border: 1px solid #4169a1 !important;
}

/* LEVEL 2 */
.news-card.article-open .attention-bar.level-2 {
    background: #4774b9 !important;
    border: none !important;
}

/* LEVEL 3 */
.news-card.article-open .attention-bar.level-3 {
    background: #173b72 !important;
    border: none !important;
}

/* LEVEL 4 */
.news-card.article-open .attention-bar.level-4 {
    background: #ffd21c !important;
    border: none !important;
}

/* LEVEL 5 */
.news-card.article-open .attention-bar.level-5 {
    background: #f00018 !important;
    border: none !important;
}


/*footer link, dibagi 3 kolom, tulisan attention*/
.attention-label {
    font-size: 16px;
    margin-bottom: 3px;
}

.article-nav-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.article-nav-center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.article-nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*tulisan weekly update, August W2. 2026*/
.article-week {
    margin-top: 5px;
    font-size: 14px;
    color: #6c757d;
    font-style: italic;
}

/*filter public sector */
.public-sector-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    padding: 10px 14px;
    margin: 0 0 12px 0;

    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.public-sector-filters .deck-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    height: 24px;

    padding: 0 18px;
    margin: 0;

    white-space: nowrap;
    box-sizing: border-box;
}

.public-sector-filters .deck-filter.active {
    font-weight: 600;
}

#publicArticlesList {
    clear: both;
}

.news-subsector {
    font-size: 12px;
    color: #6c757d;
    padding: 5px 8px;
}

/* =========================================
   ARTICLE TITLE + SECTOR BADGES
========================================= */
.news-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.news-title-row .news-title-link {
    flex: 0 1 auto;
    min-width: 0;
}

.news-title-row .news-title {
    margin: 0 !important;
}

.news-taxonomy {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.news-sector-badge,
.news-subsector-badge {
    display: inline-flex;
    align-items: center;

    padding: 2px 7px;

    font-size: 10px;
    line-height: 1.2;

    border-radius: 4px;
    white-space: nowrap;
}

.news-sector-badge {
    background: #eef2f5;
    color: #4b5563;
    font-weight: 600;
}

.news-subsector-badge {
    background: #f6f7f8;
    color: #6b7280;
    border: 1px solid #e1e5e9;
}

/*PREVIOUS NEWS*/
.previous-news-link {
    display: block;
    margin-bottom: 6px;
}

.previous-related-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.previous-related-link {
    display: block;
    padding: 0;
    margin: 0;

    font-size: 12px;
    line-height: 1.3;

    color: #6b7280;
    text-decoration: none;
}

.previous-related-link:hover {
    color: #168dcc;
    text-decoration: underline;
}
/*END PREVIOUS NEWS*/

/*FREE LIMIT ARTICLES*/
.public-access-wall {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,.35);

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

    z-index: 10000;
}

.public-access-wall[hidden] {
    display: none;
}

.public-access-wall-box {
    width: 420px;
    max-width: 90%;

    background: #fff;

    padding: 28px;

    box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.public-access-wall-box h3 {
    margin: 0 0 10px;

    color: #102a43;

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

.public-access-wall-box p {
    margin: 0 0 20px;

    color: #6b7280;

    line-height: 1.5;
}

.public-access-wall-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*REGISTER & LOGIN AFTER REACH LIMIT*/
.public-auth-modal {
    position: fixed;
    inset: 0;

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

    background: rgba(0,0,0,.35);

    z-index: 10001;
}

.public-auth-modal[hidden] {
    display: none;
}

.public-auth-box {
    position: relative;

    width: 380px;
    max-width: 90%;

    padding: 28px;

    background: #fff;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);
}

.public-auth-box h3 {
    margin: 0 0 18px;

    color: #102a43;

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

.public-auth-box form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.public-auth-box input {
    width: 100%;

    padding: 10px 12px;

    border: 1px solid #d7dce1;

    box-sizing: border-box;
}

.public-auth-close {
    position: absolute;

    top: 10px;
    right: 12px;

    border: 0;
    background: transparent;

    font-size: 22px;
    cursor: pointer;
}

.public-auth-switch {
    margin-top: 14px;

    font-size: 12px;
    color: #6b7280;
}

.public-auth-switch button {
    border: 0;
    background: transparent;

    color: #168dcc;

    cursor: pointer;
}

.public-auth-error {
    margin-top: 10px;

    font-size: 12px;
}

/*
MODAL SUBSCRIPTION
*/
.public-subscribe-box {
    position: relative;

    width: 760px;
    max-width: 94vw;

    padding: 34px;

    background: #ffffff;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.18);
}


.public-subscribe-box h3 {
    margin: 0;

    font-size: 30px;
    line-height: 1.2;

    font-weight: 700;

    color: #102a43;
}


.public-subscribe-subtitle {
    margin:
        10px 0 26px;

    font-size: 15px;

    color: #6b7280;
}


.public-subscription-plans {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.public-subscription-plan {
    width: 100%;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        190px;

    gap: 18px;

    align-items: start;

    padding: 22px 24px;

    background: #ffffff;

    border:
        1px solid #d9dee7;

    border-radius: 14px;

    text-align: left;

    cursor: pointer;

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


.public-subscription-plan:hover {
    border-color: #a9bdd8;

    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.06);
}


.public-subscription-plan.selected {
    border-color: #2f6fed;

    box-shadow:
        0 0 0 3px rgba(47, 111, 237, 0.10);
}


.public-plan-radio {
    width: 20px;
    height: 20px;

    margin-top: 3px;

    border:
        2px solid #9ca3af;

    border-radius: 50%;

    box-sizing: border-box;
}


.public-subscription-plan.selected
.public-plan-radio {
    border-color: #2f6fed;

    background:
        radial-gradient(
            circle,
            #2f6fed 0 4px,
            #ffffff 5px 100%
        );
}


.public-plan-main {
    min-width: 0;
}


.public-plan-name {
    font-size: 19px;

    font-weight: 700;

    color: #111827;
}


.public-plan-description {
    margin-top: 4px;

    font-size: 14px;

    color: #697386;
}


.public-plan-benefits {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 18px;
}


.public-plan-benefit {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: #536174;
}


.public-plan-check {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #eaf8ef;

    color: #16a34a;

    font-size: 14px;

    font-weight: 700;
}


.public-plan-side {
    text-align: right;
}


.public-plan-duration {
    display: inline-block;

    padding:
        6px 10px;

    border-radius: 8px;

    background: #edf4ff;

    color: #2563eb;

    font-size: 12px;

    font-weight: 600;
}


.public-subscription-plan[data-subscription-plan="annual"]
.public-plan-duration {
    background: #eaf8ef;

    color: #169447;
}


.public-plan-price {
    margin-top: 18px;

    font-size: 22px;

    font-weight: 700;

    color: #111827;
}


.public-plan-payment-note {
    margin-top: 4px;

    font-size: 12px;

    color: #7b8493;
}


.public-subscribe-actions {
    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 28px;

    padding-top: 22px;

    border-top:
        1px solid #e5e7eb;
}


#publicSubscribeCancel,
#publicSubscribeConfirm {
    min-width: 130px;

    padding:
        10px 18px;

    border-radius: 10px;
}


#publicSubscribeConfirm:disabled {
    opacity: .45;

    cursor: not-allowed;
}


@media (max-width: 720px) {

    .public-subscribe-box {
        width: 92vw;

        padding: 24px;
    }


    .public-subscription-plan {
        grid-template-columns:
            28px
            minmax(0, 1fr);

        padding: 18px;
    }


    .public-plan-side {
        grid-column: 2;

        text-align: left;
    }


    .public-plan-price {
        margin-top: 10px;
    }

}

/* =========================================
   COMPACT SUBSCRIPTION MODAL
========================================= */

.public-subscribe-box {
    width: 560px;
    max-width: 90vw;
    padding: 20px 22px;
    border-radius: 16px;
}

.public-subscribe-box h3 {
    font-size: 24px;
}

.public-subscribe-subtitle {
    margin: 6px 0 16px;
    font-size: 13px;
}


/* PLAN LIST */

.public-subscription-plans {
    gap: 10px;
}

.public-subscription-plan {
    grid-template-columns:
        24px
        minmax(0, 1fr)
        135px;

    gap: 10px;

    padding: 12px 14px;

    border-radius: 12px;
}


/* RADIO */

.public-plan-radio {
    width: 17px;
    height: 17px;
}


/* PLAN TEXT */

.public-plan-name {
    font-size: 16px;
}

.public-plan-description {
    margin-top: 2px;
    font-size: 12px;
}


/* BENEFITS */
.public-plan-benefits {
    gap: 4px;
    margin-top: 8px;
}


.public-plan-benefit {
    gap: 7px;
    font-size: 12px;
}

.public-plan-check {
    flex: 0 0 18px;

    width: 18px;
    height: 18px;

    font-size: 11px;
}


/* RIGHT SIDE */

.public-plan-duration {
    padding: 4px 8px;

    font-size: 11px;
}

.public-plan-price {
    margin-top: 9px;

    font-size: 17px;
}

.public-plan-payment-note {
    margin-top: 2px;

    font-size: 10px;
}


/* FOOTER */

.public-subscribe-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 10px;
    padding-top: 0;

    border-top: none;
}

#publicSubscribeCancel,
#publicSubscribeConfirm {
    min-width: 105px;

    padding: 8px 14px;

    font-size: 13px;
}

/* =========================================
   MANAGE SUBSCRIPTION MODAL
========================================= */

.public-manage-box {
    position: relative;

    width: 520px;
    max-width: 90vw;

    padding: 22px;

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 18px 50px rgba(15, 23, 42, .16);
}


.public-manage-heading h3 {
    margin: 0;

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

    color: #102a43;
}


.public-manage-heading p {
    margin: 5px 0 18px;

    font-size: 12px;

    color: #64748b;
}


/* PLAN CARD */

.public-manage-plan-card {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 16px;

    border: 1px solid #dce8df;
    border-radius: 12px;

    background: #f3faf5;
}


.public-manage-plan-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: #43a65f;

    color: #fff;

    font-size: 22px;
}


.public-manage-plan-label {
    font-size: 11px;

    color: #64748b;
}


.public-manage-plan-title-row {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 3px;
}


.public-manage-plan-title-row strong {
    font-size: 20px;

    color: #369652;
}


.public-manage-active {
    padding: 3px 7px;

    border-radius: 999px;

    background: #dcf4e3;

    color: #258441;

    font-size: 10px;
    font-weight: 700;
}


.public-manage-plan-duration {
    margin-top: 3px;

    font-size: 12px;

    color: #64748b;
}


/* DETAIL CARD */

.public-manage-details {
    margin-top: 14px;

    padding: 5px 14px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #fff;
}


.public-manage-detail-row {
    display: grid;

    grid-template-columns:
        24px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    padding: 11px 0;

    border-bottom:
        1px solid #eef2f7;

    font-size: 12px;
}


.public-manage-detail-row:last-child {
    border-bottom: 0;
}


.public-manage-detail-icon {
    color: #475569;
}


.public-manage-detail-label {
    color: #475569;
}


.public-manage-detail-row strong {
    color: #0f172a;
}


/* BUTTONS */

.public-manage-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 16px;
}


.public-manage-change,
.public-manage-cancel {
    min-height: 38px;

    border-radius: 9px;

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

    cursor: pointer;
}


.public-manage-change {
    border:
        1px solid #46a663;

    background: #fff;

    color: #339353;
}


.public-manage-cancel {
    border:
        1px solid #ef4444;

    background: #ef4444;

    color: #fff;
}


.public-manage-change:hover {
    background: #f2faf4;
}


.public-manage-cancel:hover {
    background: #dc3535;
}


/* SECURITY */

.public-manage-security {
    margin-top: 14px;

    text-align: center;

    font-size: 10px;

    color: #64748b;
}

/* =========================================
   PUBLIC ACCESS LIMIT MODAL
========================================= */

.public-access-wall {
    position: fixed;
    inset: 0;

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

    padding: 20px;

    background: rgba(15, 23, 42, 0.38);

    z-index: 9999;
}


/* Penting untuk attribute hidden */
.public-access-wall[hidden] {
    display: none;
}


.public-access-wall-box {
    position: relative;

    width: 420px;
    max-width: 90vw;

    padding: 28px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.18);
}


/* CLOSE */

.public-access-wall-close {
    position: absolute;

    top: 14px;
    right: 16px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #475569;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


/* ICON */

.public-access-wall-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 16px;

    border-radius: 50%;

    background: #ecf8ef;

    color: #329653;

    font-size: 22px;
    font-weight: 700;
}


/* HEADING */

.public-access-wall-heading h3 {
    margin: 0;

    color: #102a43;

    font-size: 22px;
    font-weight: 700;
}


.public-access-wall-heading p {
    margin: 7px 0 0;

    color: #64748b;

    font-size: 13px;
    line-height: 1.5;
}


/* BUTTON AREA */

.public-access-wall-actions {
    display: flex;

    gap: 10px;

    margin-top: 24px;
}


.public-access-register,
.public-access-subscribe {
    flex: 1;

    min-height: 40px;

    border-radius: 9px;

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

    cursor: pointer;
}


/* REGISTER */

.public-access-register {
    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #334155;
}


/* SUBSCRIBE */

.public-access-subscribe {
    border: 1px solid #3ca35a;

    background: #3ca35a;

    color: #ffffff;
}


.public-access-register:hover {
    background: #f8fafc;
}


.public-access-subscribe:hover {
    background: #328d4c;
}

/* =========================================
   AUTH MODAL - REGISTER / LOGIN
========================================= */

.public-auth-modal {
    position: fixed;
    inset: 0;

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

    padding: 20px;

    background: rgba(15, 23, 42, 0.38);

    z-index: 10000;
}

.public-auth-modal[hidden] {
    display: none;
}


.public-auth-box {
    position: relative;

    width: 390px;
    max-width: 90vw;

    padding: 26px;

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.18);
}


.public-auth-box h3 {
    margin: 0;

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

    color: #102a43;
}


.public-auth-subtitle {
    margin: 6px 0 20px;

    font-size: 13px;

    color: #64748b;
}


.public-auth-close {
    position: absolute;

    top: 14px;
    right: 16px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #475569;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


/* FORM FIELD */

.public-auth-field {
    margin-bottom: 14px;
}

.public-auth-field label {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 600;

    color: #334155;
}

.public-auth-field input {
    width: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    border: 1px solid #cbd5e1;
    border-radius: 9px;

    background: #fff;

    font-size: 13px;

    color: #0f172a;

    outline: none;
}

.public-auth-field input:focus {
    border-color: #3ca35a;

    box-shadow:
        0 0 0 3px rgba(60, 163, 90, 0.10);
}


/* MAIN BUTTON */

.public-auth-submit {
    width: 100%;

    min-height: 40px;

    margin-top: 4px;

    border: 1px solid #3ca35a;
    border-radius: 9px;

    background: #3ca35a;

    color: #fff;

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

    cursor: pointer;
}

.public-auth-submit:hover {
    background: #328d4c;
}


/* SWITCH REGISTER / LOGIN */

.public-auth-switch {
    margin-top: 14px;

    text-align: center;

    font-size: 12px;

    color: #64748b;
}

.public-auth-switch button {
    padding: 0;

    border: 0;
    background: transparent;

    color: #339353;

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

    cursor: pointer;
}

.public-auth-switch button:hover {
    text-decoration: underline;
}


/* ERROR */

.public-auth-error {
    margin-top: 12px;

    font-size: 12px;

    color: #dc2626;
}

/* =========================================
   COMPACT AUTH MODAL - LOGIN / REGISTER
========================================= */

.public-auth-box {
    width: 370px;
    max-width: 90vw;

    padding: 20px 22px;

    border-radius: 14px;
}


/* TITLE */

.public-auth-box h3 {
    font-size: 20px;
}


/* SUBTITLE */

.public-auth-subtitle {
    margin: 4px 0 14px;

    font-size: 12px;
}


/* FIELD */

.public-auth-field {
    margin-bottom: 9px;
}

.public-auth-field label {
    margin-bottom: 3px;

    font-size: 11px;
}

.public-auth-field input {
    padding: 8px 10px;

    min-height: 34px;

    border-radius: 8px;

    font-size: 12px;
}


/* REGISTER / LOGIN BUTTON */

.public-auth-submit {
    min-height: 35px;

    margin-top: 2px;

    border-radius: 8px;

    font-size: 12px;
}


/* LOGIN / REGISTER SWITCH */

.public-auth-switch {
    margin-top: 9px;

    font-size: 11px;
}

.public-auth-switch button {
    font-size: 11px;
}


/* ERROR */

.public-auth-error {
    margin-top: 7px;

    font-size: 11px;
}


/* CLOSE X */

.public-auth-close {
    top: 11px;
    right: 13px;

    font-size: 21px;
}

/* =========================================
   AUTH MODAL - 70% SCREEN HEIGHT
========================================= */

.public-auth-box {
    width: 370px;

    max-width: 90vw;
    max-height: 70vh;

    box-sizing: border-box;

    padding: 16px 20px;

    border-radius: 14px;

    overflow-y: auto;
}


/* TITLE */

.public-auth-box h3 {
    margin: 0;

    font-size: 19px;
    line-height: 1.2;
}


/* SUBTITLE */

.public-auth-subtitle {
    margin: 3px 0 10px;

    font-size: 11px;
    line-height: 1.3;
}


/* FIELD */

.public-auth-field {
    margin-bottom: 6px;
}


.public-auth-field label {
    margin-bottom: 2px;

    font-size: 11px;
    line-height: 1.2;
}


.public-auth-field input {
    min-height: 30px;

    padding: 6px 9px;

    border-radius: 7px;

    font-size: 12px;
}


/* BUTTON */

.public-auth-submit {
    min-height: 32px;

    margin-top: 2px;

    border-radius: 7px;

    font-size: 12px;
}


/* LOGIN / REGISTER SWITCH */

.public-auth-switch {
    margin-top: 6px;

    font-size: 11px;
    line-height: 1.2;
}


.public-auth-switch button {
    font-size: 11px;
}


/* ERROR */

.public-auth-error {
    margin-top: 5px;

    font-size: 10px;
}


/* CLOSE */

.public-auth-close {
    top: 9px;
    right: 11px;

    font-size: 20px;
}

/* =========================================
   AUTH MODAL - COMPACT WITHOUT SCROLL
========================================= */

.public-auth-box {
    width: 430px;
    max-width: 90vw;

    padding: 16px 20px;

    box-sizing: border-box;

    border-radius: 14px;

    overflow: visible;
}


/* TITLE */

.public-auth-box h3 {
    margin: 0;

    font-size: 19px;
    line-height: 1.2;
}


/* SUBTITLE */

.public-auth-subtitle {
    margin: 3px 0 10px;

    font-size: 11px;
    line-height: 1.25;
}


/* FORM */

.public-auth-box form {
    gap: 0;
}


/* FIELD */

.public-auth-field {
    margin: 0 0 6px;
}


.public-auth-field label {
    display: block;

    margin: 0 0 2px;

    font-size: 10px;
    line-height: 1.2;
}


.public-auth-field input {
    width: 100%;

    min-height: 30px;

    box-sizing: border-box;

    padding: 5px 9px;

    border-radius: 7px;

    font-size: 12px;
}


/* MAIN BUTTON */

.public-auth-submit {
    width: 100%;

    min-height: 32px;

    margin-top: 2px;

    padding: 6px 10px;

    border-radius: 7px;

    font-size: 12px;
}


/* SWITCH LOGIN / REGISTER */

.public-auth-switch {
    margin-top: 6px;

    font-size: 10px;
    line-height: 1.2;
}

.public-auth-switch button {
    font-size: 10px;
}


/* ERROR */

.public-auth-error {
    margin-top: 4px;

    font-size: 10px;
}


/* CLOSE */

.public-auth-close {
    top: 9px;
    right: 11px;

    font-size: 19px;
}
/* =========================================
   AUTH MODAL - FINAL COMPACT ADJUSTMENT
========================================= */

/* Tombol utama Login / Register */
.public-auth-submit {
    display: block;

    width: 50%;
    min-height: 32px;

    margin: 8px auto 0;

    padding: 6px 10px;

    border-radius: 7px;

    font-size: 12px;
}


/* Don't have an account / Already have account */
.public-auth-switch {
    display: block;

    width: 100%;

    margin-top: 8px;

    text-align: center;

    font-size: 11px;
    line-height: 1.3;

    color: #64748b;
}


.public-auth-switch button {
    display: inline;

    padding: 0;

    border: 0;
    background: transparent;

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

    color: #339353;

    cursor: pointer;
}

#publicRegisterForm[hidden],
#publicLoginForm[hidden] {
    display: none !important;
}

/* =========================================
   FINAL AUTH MODAL COMPACT
========================================= */

.public-auth-box {
    width: 430px;
    max-width: 90vw;

    padding: 16px 22px 14px;

    box-sizing: border-box;

    border-radius: 15px;

    overflow: visible;
}


.public-auth-box h3 {
    margin: 0;

    font-size: 19px;
    line-height: 1.2;
}


.public-auth-subtitle {
    margin: 3px 0 10px;

    font-size: 11px;
    line-height: 1.2;
}


/* FORM */

.public-auth-box form {
    margin: 0;
}


/* FIELD */

.public-auth-field {
    margin-bottom: 6px;
}


.public-auth-field label {
    display: block;

    margin-bottom: 2px;

    font-size: 10px;
    line-height: 1.2;
}


.public-auth-field input {
    width: 100%;

    height: 32px;

    box-sizing: border-box;

    padding: 5px 9px;

    border-radius: 7px;

    font-size: 12px;
}


/* BUTTON */

.public-auth-submit {
    display: block;

    width: 50%;
    height: 32px;

    margin: 8px auto 0;

    padding: 5px 10px;

    border-radius: 7px;

    font-size: 12px;
}


/* SWITCH */

.public-auth-switch {
    display: block;

    width: 100%;

    margin: 7px 0 0;

    padding-bottom: 2px;

    box-sizing: border-box;

    text-align: center;

    font-size: 11px;
    line-height: 1.25;

    color: #64748b;
}


.public-auth-switch button {
    display: inline;

    padding: 0;

    border: 0;
    background: transparent;

    font-size: 11px;
    font-weight: 700;
}


/* HIDDEN FIX */

#publicRegisterForm[hidden],
#publicLoginForm[hidden] {
    display: none !important;
}

/* =========================================
   PAYMENT MODAL
========================================= */

.public-payment-box {
    position: relative;

    width: 460px;
    max-width: 90vw;

    padding: 20px 22px 18px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.18);
}


/* TITLE */

.public-payment-box h3 {
    margin: 0;

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

    color: #102a43;
}


.public-payment-subtitle {
    margin: 5px 0 16px;

    font-size: 12px;
    line-height: 1.4;

    color: #64748b;
}


/* SUMMARY CARD */

.public-payment-summary {
    padding: 8px 14px;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    background: #f8fafc;
}


.public-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 11px 0;

    border-bottom: 1px solid #e8edf3;

    font-size: 12px;
}


.public-payment-row:last-child {
    border-bottom: 0;
}


.public-payment-row span {
    color: #64748b;
}


.public-payment-row strong {
    color: #0f172a;

    font-size: 13px;
    font-weight: 700;
}


/* ACTIONS */

.public-payment-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 16px;
}


.public-payment-cancel,
.public-payment-pay {
    min-height: 38px;

    border-radius: 9px;

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

    cursor: pointer;
}


/* CANCEL */

.public-payment-cancel {
    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #334155;
}


.public-payment-cancel:hover {
    background: #f8fafc;
}


/* PAY */

.public-payment-pay {
    border: 1px solid #3ca35a;

    background: #3ca35a;

    color: #ffffff;
}


.public-payment-pay:hover {
    background: #328d4c;
}


/* ERROR */

#publicPaymentError {
    margin-top: 10px;

    font-size: 11px;

    color: #dc2626;
}

.public-payment-success {
    display: flex;
    flex-direction: column;

    align-items: center;

    padding: 18px 10px;

    text-align: center;
}


.public-payment-success-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 10px;

    border-radius: 50%;

    background: #eaf8ef;

    color: #2f9a50;

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


.public-payment-success strong {
    font-size: 16px;

    color: #102a43;
}


.public-payment-success span {
    margin-top: 4px;

    font-size: 11px;

    color: #64748b;
}

.public-cancel-confirm {
    margin-top: 14px;
    padding: 14px;

    border: 1px solid #fecaca;
    border-radius: 10px;

    background: #fff7f7;
}

.public-cancel-confirm-title {
    font-size: 13px;
    font-weight: 700;

    color: #991b1b;
}

.public-cancel-confirm-text {
    margin-top: 4px;

    font-size: 11px;
    color: #64748b;
}

.public-cancel-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 12px;
}

.public-cancel-keep,
.public-cancel-yes {
    min-height: 34px;

    border-radius: 8px;

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

    cursor: pointer;
}

.public-cancel-keep {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
}

.public-cancel-yes {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #fff;
}

/* =========================================
   CHOOSE SUBSCRIPTION - ACTION BUTTONS
========================================= */

/* Cancel */
#publicSubscribeCancel {
    min-height: 42px;

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    background: #ffffff;

    color: #334155;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


#publicSubscribeCancel:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}


/* Subscribe */
#publicSubscribeConfirm {
    min-height: 42px;

    border: 1px solid #3ca35a;
    border-radius: 10px;

    background: #3ca35a;

    color: #ffffff;

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

    cursor: pointer;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.08);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


#publicSubscribeConfirm:hover:not(:disabled) {
    background: #328d4c;
    border-color: #328d4c;
}


/* Disabled sebelum plan dipilih */
#publicSubscribeConfirm:disabled {
    border-color: #e2e8f0;

    background: #f1f5f9;

    color: #a8b1bd;

    box-shadow: none;

    cursor: not-allowed;
}


/* Sedikit feedback saat diklik */
#publicSubscribeCancel:active,
#publicSubscribeConfirm:active:not(:disabled) {
    transform: translateY(1px);
}