/*
 * PT.KAR UI/UX stage 2 (v1.2.0).
 * Additive layer: visual and accessibility refinements without replacing
 * the current brand identity or CMS-driven content. Loaded AFTER style.css.
 */

/* Consistent keyboard visibility; no unexpected outline on mouse/touch. */
:where(.public-page, body) :is(a, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
    outline: 3px solid #e4a426;
    outline-offset: 3px;
}
.public-page main:focus { outline: none; }
.public-page [hidden] { display: none !important; }

/* Accessible skip-navigation shortcut. */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 3000;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 18px;
    border: 2px solid #e8a92f;
    border-radius: 12px;
    background: #ffffff;
    color: #071a3b;
    font: 800 14px/1.3 var(--font-body, sans-serif);
    box-shadow: 0 12px 34px rgba(7, 26, 59, .25);
    transform: translateY(-160%);
    transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* More legible and predictable global interactions. */
.public-page .site-header {
    isolation: isolate;
    box-shadow: 0 8px 30px rgba(7, 26, 59, .15);
}
.public-page .site-header-inner {
    width: min(calc(100% - 48px), 1320px);
}
.public-page .primary-navigation > a:not(.primary-navigation-cta) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.public-page .primary-navigation > a[aria-current="page"]:not(.primary-navigation-cta) {
    color: #f7ca68;
}
.public-page .primary-navigation .primary-navigation-cta {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 11px;
    background: linear-gradient(115deg, #f9d17c, #e8a92f);
    color: #071a3b !important;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.public-page .primary-navigation .primary-navigation-cta:hover {
    color: #071a3b !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0,0,0,.19);
}
.public-page .mobile-navigation-heading { display: none; }
.public-page .site-brand-name { letter-spacing: .012em; }

.public-page :is(.button, .category-filter-button, .visit-link, .roadmap-slider-arrow, .share-article-button) {
    touch-action: manipulation;
}
.public-page .button:focus-visible,
.public-page .primary-navigation-cta:focus-visible {
    outline-color: #ffd269;
}
.public-page .section-heading-row { gap: 24px; }
.public-page .section-desc { max-width: 740px; }
.public-page .content-card:focus-within,
.public-page .information-card:focus-within,
.public-page .partner-logo-card:focus-within {
    border-color: rgba(202, 151, 32, .63);
    box-shadow: 0 18px 45px rgba(7, 26, 59, .10);
}
.public-page :is(.content-card, .information-card) { overflow-wrap: anywhere; }
.public-page :is(.content-card, .information-card) h3 { text-wrap: balance; }
.public-page .hero h1 { text-wrap: balance; }
.public-page .hero p { line-height: 1.75; }
.public-page .form-field input,
.public-page .form-field textarea,
.public-page .form-field select { color: #13213a; }
.public-page :is(.form-field input, .form-field textarea, .form-field select)::placeholder { color: #707c91; }
.public-page .form-field :is(input, textarea, select):focus-visible {
    outline: 2px solid rgba(197, 135, 14, .75);
    outline-offset: 2px;
    border-color: #af7914;
}

/* Reusable, responsive content discovery tools: berita + brand. */
.public-page .discovery-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, .9fr);
    align-items: end;
    gap: 18px;
    margin: 12px 0 10px;
    padding: 20px;
    border: 1px solid #dfe5ee;
    border-radius: 18px;
    background: linear-gradient(120deg, #f8fafc, #fffdf8);
}
.public-page .discovery-search {
    min-width: 0;
    display: grid;
    gap: 8px;
}
.public-page .discovery-search > label,
.public-page .discovery-toolbar .brand-filter-dropdown > label,
.public-page .discovery-toolbar .brand-filter-dropdown > span {
    display: block;
    margin: 0;
    color: #25334b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}
.public-page .discovery-search-field {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 54px;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.public-page .discovery-search-field:focus-within {
    border-color: #a67011;
    box-shadow: 0 0 0 4px rgba(232,169,47,.15);
}
.public-page .discovery-search-icon {
    display: inline-flex;
    justify-content: center;
    flex: 0 0 25px;
    margin-left: 15px;
    font: 700 27px/1 var(--font-body);
    color: #5b6880;
    transform: translateY(-1px);
}
.public-page .discovery-search-field input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 10px 14px 10px 0;
    border: 0;
    outline: 0;
    border-radius: 12px;
    color: #12233d;
    background: transparent;
    font: 500 14px/1.5 var(--font-body);
    appearance: none;
}
.public-page .discovery-search-field input:focus-visible { outline: 0; }
.public-page .discovery-search-field input::placeholder { color: #65758a; opacity: 1; }
.public-page .discovery-toolbar .brand-filter-dropdown {
    width: 100%;
    min-width: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.public-page .discovery-toolbar .brand-category-dropdown,
.public-page .discovery-toolbar .brand-category-trigger { width: 100%; }
.public-page .discovery-toolbar .brand-category-trigger {
    min-height: 54px;
    border-radius: 12px;
}
.public-page .discovery-search-news {
    max-width: 650px;
    margin: 10px 0 18px;
}
.public-page .discovery-search-news .discovery-search-field { background: #fff; }
.public-page .discovery-result-status {
    min-height: 24px;
    margin: 9px 0 22px;
    color: #53647d;
    font-size: 13px;
    font-weight: 600;
}
.public-page .news-category-filter-bar {
    gap: 9px;
    margin: 0 0 8px;
}
.public-page .category-filter-button {
    min-height: 43px;
    padding-inline: 16px;
    border-color: #cbd5e1;
    color: #334155;
    font-weight: 700;
}
.public-page .category-filter-button:hover,
.public-page .category-filter-button.is-active,
.public-page .category-filter-button[aria-pressed="true"] {
    border-color: #071a3b;
    color: #fff;
    background: #071a3b;
}
.public-page .discovery-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 22px;
    margin: 12px 0 26px;
    border: 1px dashed #b8c6d9;
    border-radius: 18px;
    color: #35445e;
    background: #fafbfd;
    text-align: center;
}
.public-page .discovery-empty-state strong {
    color: #071a3b;
    font: 800 19px/1.3 var(--font-heading);
}
.public-page .discovery-empty-state p { margin: 0; font-size: 14px; }
.public-page .discovery-reset {
    margin-top: 7px;
    min-height: 42px;
    padding: 9px 19px;
    border: 1px solid #0d2b5c;
    border-radius: 10px;
    background: #0d2b5c;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.public-page .discovery-reset:hover { background: #183d70; }
.public-page .news-grid,
.public-page .ecosystem-grid { align-items: stretch; }

/* Better submission feedback on the WhatsApp contact path. */
.public-page .form-feedback {
    margin: 16px 0 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #d6e2ee;
    color: #0d2b5c;
    background: #f2f7fc;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.65;
}
.public-page .wa-fallback-link {
    margin-top: 8px;
    min-height: 46px;
    width: fit-content;
}

@media (max-width: 900px) {
    .public-page .site-header-inner { width: min(calc(100% - 32px), 1320px); }
    .public-page .mobile-navigation-heading {
        display: block;
        color: #64748b;
        padding: 8px 14px 14px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
    }
    .public-page .primary-navigation {
        box-shadow: -18px 22px 50px rgba(7, 26, 59, .18);
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
    .public-page .primary-navigation > a:not(.primary-navigation-cta) {
        min-height: 48px;
        display: flex;
        font-size: 15px;
        font-weight: 700;
    }
    .public-page .primary-navigation > a[aria-current="page"]:not(.primary-navigation-cta) {
        background: #fff6df;
        color: #071a3b;
        box-shadow: inset 3px 0 #e8a92f;
    }
    .public-page .primary-navigation .primary-navigation-cta {
        min-height: 49px;
        margin-top: 12px;
    }
    .public-page .discovery-toolbar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .public-page .discovery-toolbar {
        margin-top: 6px;
        padding: 15px;
        gap: 16px;
        border-radius: 15px;
    }
    .public-page .discovery-search-news { margin-bottom: 18px; }
    .public-page .discovery-search-field,
    .public-page .discovery-toolbar .brand-category-trigger { min-height: 52px; }
    .public-page .discovery-result-status { margin-bottom: 16px; }
    .public-page .hero-actions .button { justify-content: center; }
    .public-page .wa-fallback-link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .skip-link { transition: none; }
    .public-page .primary-navigation,
    .public-page .primary-navigation .primary-navigation-cta,
    .public-page .discovery-search-field { transition: none !important; }
    .public-page :is(.content-card, .information-card):hover { transform: none; }
}
@media (forced-colors: active) {
    .skip-link:focus { outline: 3px solid Highlight; }
    .public-page .category-filter-button[aria-pressed="true"] { outline: 2px solid Highlight; }
    .public-page .discovery-search-field:focus-within { outline: 2px solid Highlight; }
}

/* Stage 3: related reading cards. */
.related-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.related-news-card{min-width:0;border:1px solid var(--line);border-radius:18px;background:#fff;padding:26px;display:flex;flex-direction:column;gap:14px}
.related-news-card h3{font-family:var(--font-heading);font-size:1.15rem;line-height:1.4;color:var(--navy)}
.related-news-card h3 a:hover,.related-news-card h3 a:focus-visible{color:#94650e;text-decoration:underline}
.related-news-card p{font-size:.94rem;color:var(--muted);line-height:1.65;flex:1}
.related-news-card .inline-action-link{align-self:flex-start}
@media(max-width:820px){.related-news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.related-news-grid{grid-template-columns:1fr}.related-news-card{padding:20px}}