/*
Theme Name: Alam SSKCKR
Theme URI: https://www.alam.web.id/
Author: Alam
Description: Tema WordPress custom Alam SSKCKR yang ringan, aman, responsif, dan SEO-friendly tanpa page builder.
Version: 1.9.5
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alam-minimal
*/

:root {
  --am-bg: #f8fafc;
  --am-surface: #ffffff;
  --am-text: #0f172a;
  --am-muted: #64748b;
  --am-border: #e2e8f0;
  --am-primary: #4f46e5;
  --am-primary-dark: #3730a3;
  --am-accent: #7c3aed;
  --am-max: 1180px;
  --am-radius: 18px;
  --am-shadow: 0 14px 40px rgba(15,23,42,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--am-bg);
  color: var(--am-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--am-primary); text-underline-offset: 3px; }
a:hover { color: var(--am-primary-dark); }
button, input, textarea, select { font: inherit; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 10px 14px;
  clip: auto;
  background: #fff;
  color: #111827;
  z-index: 99999;
  border-radius: 8px;
  box-shadow: var(--am-shadow);
}

.am-container {
  width: min(calc(100% - 32px), var(--am-max));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid var(--am-border);
  box-shadow: 0 4px 18px rgba(15,23,42,.045);
}
.admin-bar .site-header { top: 32px; }

.am-header-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-branding { display: flex; align-items: center; gap: 12px; min-width: 0; }
.am-emblem-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 50px;
  text-decoration: none;
}
.am-site-emblem,
.custom-logo {
  display: block;
  width: auto;
  max-width: 44px;
  max-height: 50px;
  object-fit: contain;
}
.am-brand-copy { min-width: 0; }
.site-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.site-title a { color: var(--am-text); text-decoration: none; }
.site-description { margin: 2px 0 0; color: var(--am-muted); font-size: .82rem; line-height: 1.35; }

.am-nav-toggle {
  display: none;
  border: 1px solid var(--am-border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 11px;
  cursor: pointer;
}

.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  color: #334155;
  text-decoration: none;
  font-size: .94rem;
  font-weight: 650;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { color: var(--am-primary); }

.site-main { min-height: 60vh; padding: 44px 0 64px; }

.am-card {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  box-shadow: var(--am-shadow);
}

.entry-header { margin-bottom: 24px; }
.entry-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.entry-meta { margin-top: 10px; color: var(--am-muted); font-size: .9rem; }
.entry-content { font-size: 1.02rem; }
.entry-content > * { max-width: 760px; }
.entry-content > .alignwide { max-width: 1040px; }
.entry-content > .alignfull { max-width: none; }
.entry-content h2, .entry-content h3 { line-height: 1.25; margin-top: 2em; }
.entry-content blockquote {
  margin-left: 0;
  padding: 14px 18px;
  border-left: 4px solid var(--am-primary);
  background: #f8faff;
}

.am-post-list { display: grid; gap: 18px; }
.am-post-card { padding: 24px; }
.am-post-card h2 { margin: 0 0 8px; font-size: 1.35rem; }
.am-post-card h2 a { color: var(--am-text); text-decoration: none; }
.am-post-card p { margin-bottom: 0; color: #475569; }

.navigation.pagination { margin-top: 30px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--am-border);
  border-radius: 9px;
  background: #fff;
  text-decoration: none;
}
.page-numbers.current { color: #fff; background: var(--am-primary); border-color: var(--am-primary); }

.site-footer {
  border-top: 1px solid var(--am-border);
  background: #fff;
  color: var(--am-muted);
}
.am-footer-inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: .9rem;
}
.am-footer-menu ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.am-footer-menu a { color: var(--am-muted); text-decoration: none; }

@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .am-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 16px;
    right: 16px;
    background: #fff;
    border: 1px solid var(--am-border);
    border-radius: 14px;
    box-shadow: var(--am-shadow);
    padding: 12px;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a { display: block; padding: 10px 8px; }
  .site-main { padding-top: 28px; }
  .am-emblem-link { width: 38px; height: 44px; }
  .am-site-emblem, .custom-logo { max-width: 38px; max-height: 44px; }
  .site-description { display: none; }
  .am-footer-inner { align-items: flex-start; flex-direction: column; padding: 24px 0; }
}


/* Blank / Canvas page template */
body.am-blank-layout {
  margin: 0;
  min-height: 100vh;
}
.am-blank-main {
  width: 100%;
  min-height: 100vh;
}
.am-blank-main > *:first-child { margin-top: 0; }
.am-blank-main > *:last-child { margin-bottom: 0; }

/* =========================================================
   Landing SSKCKR — official portal layout
   Inspired by the supplied landing-page structure: full-width
   animated hero, elevated service panel, clean institutional cards.
========================================================= */
.am-portal-home {
  padding: 0;
  background: #f8fafc;
}

.am-portal-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 48%, #7c3aed 78%, #6366f1 100%);
  background-size: 260% 260%;
  animation: amPortalGradient 14s ease infinite;
}

@keyframes amPortalGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.am-portal-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.15) 1.2px, transparent 1.2px);
  background-size: 30px 30px;
  pointer-events: none;
}

.am-portal-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
  padding-top: clamp(72px, 8vw, 118px);
  padding-bottom: clamp(108px, 11vw, 156px);
}

.am-portal-agency {
  margin: 0 0 18px;
  color: #e0e7ff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.am-portal-hero h1 {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(1.8rem, 3.65vw, 3.05rem);
  line-height: 1.14;
  letter-spacing: -.035em;
  text-align: center;
}

.am-portal-title-top,
.am-portal-title-bottom {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: inherit;
  line-height: inherit;
}

.am-portal-title-bottom {
  margin-top: .08em;
}


.am-portal-province {
  margin: 10px auto 0;
  color: #e0e7ff;
  font-size: clamp(.92rem, 1.5vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

.am-portal-lead {
  max-width: 760px;
  margin: 20px auto 0;
  color: rgba(255,255,255,.84);
  font-size: clamp(.98rem, 1.8vw, 1.12rem);
  line-height: 1.75;
}

.am-portal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.am-portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 750;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.am-portal-btn:hover { transform: translateY(-2px); }

.am-portal-btn-light {
  background: #fff;
  color: #3730a3;
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
}
.am-portal-btn-light:hover { color: #312e81; }

.am-portal-btn-outline {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.07);
  color: #fff;
}
.am-portal-btn-outline:hover { color: #fff; background: rgba(255,255,255,.13); }

.am-portal-content {
  position: relative;
  z-index: 2;
  margin-top: -62px;
  padding-bottom: 56px;
}

.am-portal-service-panel {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(15,23,42,.10);
}

.am-portal-section-head {
  margin-bottom: 24px;
  text-align: center;
}

.am-portal-section-head > p,
.am-portal-info-label {
  margin: 0 0 5px;
  color: #4f46e5;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.am-portal-section-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.am-portal-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.am-portal-card {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.am-portal-card:hover {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 12px 26px rgba(15,23,42,.075);
}

.am-portal-card > a {
  display: flex;
  min-height: 220px;
  height: 100%;
  flex-direction: column;
  padding: 20px;
  color: inherit;
  text-decoration: none;
}
.am-portal-card > a:hover { color: inherit; }

.am-portal-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
}

.am-portal-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.am-portal-card-copy { margin-top: 17px; }

.am-portal-card h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -.018em;
}

.am-portal-card p {
  margin: 0;
  color: #64748b;
  font-size: .88rem;
  line-height: 1.58;
}

.am-portal-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: auto;
  padding-top: 18px;
  color: #4f46e5;
  font-size: .83rem;
  font-weight: 800;
}

.am-portal-card-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.am-portal-card:hover .am-portal-card-link svg { transform: translateX(3px); }

.am-portal-info {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  align-items: center;
  margin-top: 42px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 22px;
  background: #312e81;
  color: #fff;
}

.am-portal-info-label { color: #c7d2fe; }

.am-portal-info h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.am-portal-info-copy > p:last-child {
  margin: 0;
  color: #e0e7ff;
  line-height: 1.72;
}

.am-portal-info-list {
  display: grid;
  gap: 10px;
}

.am-portal-info-list > div {
  display: grid;
  gap: 2px;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
}
.am-portal-info-list strong { font-size: .95rem; }
.am-portal-info-list span { color: #c7d2fe; font-size: .84rem; }

@media (max-width: 900px) {
  .am-portal-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .am-portal-info { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .am-portal-hero-inner {
    padding-top: 58px;
    padding-bottom: 96px;
  }
  .am-portal-agency { font-size: .68rem; line-height: 1.5; }
  .am-portal-hero h1 { font-size: clamp(1.15rem, 5.1vw, 1.72rem); }
  .am-portal-title-top,
  .am-portal-title-bottom { font-size: inherit; letter-spacing: inherit; }
  .am-portal-lead { font-size: .94rem; }
  .am-portal-actions { flex-direction: column; align-items: stretch; padding-inline: 10px; }
  .am-portal-btn { width: 100%; }
  .am-portal-content { margin-top: -44px; width: min(calc(100% - 22px), var(--am-max)); }
  .am-portal-service-panel { padding: 20px 14px; border-radius: 19px; }
  .am-portal-section-head { margin-bottom: 18px; }
  .am-portal-service-grid { grid-template-columns: 1fr; gap: 11px; }
  .am-portal-card > a {
    min-height: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 16px;
  }
  .am-portal-card-icon { width: 42px; height: 42px; }
  .am-portal-card-copy { margin-top: 0; }
  .am-portal-card h3 { margin-bottom: 4px; font-size: 1rem; }
  .am-portal-card p { font-size: .8rem; line-height: 1.45; }
  .am-portal-card-link {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: #eef2ff;
  }
  .am-portal-card-link { font-size: 0; }
  .am-portal-card-link svg { width: 15px; height: 15px; }
  .am-portal-info { margin-top: 26px; padding: 26px 20px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .am-portal-hero { animation: none; }
  .am-portal-btn,
  .am-portal-card,
  .am-portal-card-link svg { transition: none; }
  .am-portal-btn:hover,
  .am-portal-card:hover { transform: none; }
}

/* =========================================================
   Landing content sections
========================================================= */
.am-portal-service-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.am-content-section {
  margin-top: 34px;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  scroll-margin-top: 92px;
}

.am-content-section--about {
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 52%, #f5f3ff 100%);
  border-color: #dbe3f5;
}

.am-content-kicker {
  margin-bottom: 8px;
  color: #4f46e5;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.am-content-section h2 {
  margin: 0;
  color: #111827;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.am-content-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(24px, 5vw, 54px);
  align-items: start;
}

.am-content-copy p {
  margin: 0 0 14px;
  color: #64748b;
  line-height: 1.75;
}
.am-content-copy p:last-child { margin-bottom: 0; }

.am-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.am-step-card {
  padding: 22px;
  border: 1px solid #312e81;
  border-radius: 18px;
  background: #312e81;
  color: #fff;
  box-shadow: 0 10px 24px rgba(49,46,129,.10);
}

.am-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #c7d2fe;
  border: 1px solid rgba(255,255,255,.14);
  font-size: .78rem;
  font-weight: 850;
}

.am-step-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1rem;
}

.am-step-card p {
  margin: 0;
  color: #e0e7ff;
  font-size: .88rem;
  line-height: 1.6;
}

.am-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
}

.am-inline-link {
  color: #4f46e5;
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}
.am-inline-link:hover { color: #3730a3; }

.am-content-section--law {
  background: #312e81;
  border-color: #312e81;
  color: #fff;
}
.am-content-section--law .am-content-kicker { color: #c7d2fe; }
.am-content-section--law h2 { color: #fff; }

.am-law-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.am-law-list article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}

.am-law-list article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: .72rem;
  font-weight: 850;
}

.am-law-list h3 {
  margin: 1px 0 4px;
  color: #fff;
  font-size: 1rem;
}

.am-law-list p {
  margin: 0;
  color: #c7d2fe;
  font-size: .86rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .am-portal-service-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .am-content-grid { grid-template-columns: 1fr; }
  .am-steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .am-portal-service-grid--three { grid-template-columns: 1fr; }
  .am-content-section {
    margin-top: 22px;
    padding: 24px 18px;
    border-radius: 18px;
    scroll-margin-top: 76px;
  }
  .am-steps-grid { gap: 10px; margin-top: 20px; }
  .am-step-card { padding: 18px; }
  .am-law-list article { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 15px; }
  .am-law-list article > span { width: 40px; height: 40px; }
}


/* Contact section */
.am-content-section--contact {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid #e0e7ff;
}
.am-contact-intro {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--am-muted);
  line-height: 1.7;
}
.am-contact-list {
  display: grid;
  gap: 14px;
}
.am-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
a.am-contact-item:hover {
  color: inherit;
  border-color: #c7d2fe;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.am-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: #eef2ff;
  color: var(--am-primary);
}
.am-contact-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.am-contact-item small {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.am-contact-item strong,
.am-contact-item span span {
  display: block;
}
.am-contact-item strong {
  color: var(--am-text);
  font-size: .98rem;
}
.am-contact-item span span {
  margin-top: 3px;
  color: var(--am-muted);
  font-size: .9rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .am-contact-item { padding: 15px; }
  .am-contact-icon { width: 38px; height: 38px; flex-basis: 38px; }
}

/* Detailed SAKEDAP procedure */
.am-procedure-intro {
  max-width: 760px;
  margin: 10px 0 0;
  color: #64748b;
  font-size: .94rem;
  line-height: 1.7;
}

.am-steps-grid--eight {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.am-step-card--wide {
  grid-column: span 2;
}

.am-step-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.am-step-detail-grid > div {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.am-step-detail-grid strong {
  display: block;
  margin-bottom: 6px;
  color: #312e81;
  font-size: .86rem;
}

.am-step-detail-grid p {
  margin: 0;
  color: #475569;
  font-size: .82rem;
  line-height: 1.55;
}

.am-procedure-note {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #dbe3f5;
  border-radius: 14px;
  background: #eef2ff;
}

.am-procedure-note strong {
  display: block;
  margin-bottom: 4px;
  color: #312e81;
  font-size: .88rem;
}

.am-procedure-note p {
  margin: 0;
  color: #475569;
  font-size: .86rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .am-steps-grid--eight { grid-template-columns: 1fr; }
  .am-step-card--wide { grid-column: auto; }
  .am-step-detail-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Penghargaan Serah Simpan — dedicated award landing page
========================================================= */
.am-award-page {
  padding: 0;
  background: #f7f8fc;
}

.am-award-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 110px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 48%, #7c3aed 100%);
  background-size: 220% 220%;
  animation: amAwardGradient 14s ease infinite;
}

@keyframes amAwardGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.am-award-pattern {
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(120deg, transparent 0 65%, rgba(255,255,255,.06) 65% 66%, transparent 66% 100%);
  background-size: 28px 28px, 100% 100%;
  pointer-events: none;
}

.am-award-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.am-award-agency {
  margin: 0 0 18px;
  color: rgba(255,255,255,.78);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.am-award-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px;
  background: rgba(255,255,255,.10);
}

.am-award-mark svg,
.am-award-card-icon svg,
.am-award-note-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.am-award-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 3.2vw, 2.45rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}


.am-award-title-stack {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.am-award-title-stack span {
  display: block;
  width: 100%;
  text-align: center;
}
.am-award-subtitle {
  margin: 8px 0 0;
  color: #ddd6fe;
  font-size: clamp(2.25rem, 5.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 700;
  font-weight: 700;
}

.am-award-lead {
  max-width: 720px;
  margin: 18px auto 0;
  color: rgba(255,255,255,.82);
  font-size: 1.03rem;
  line-height: 1.72;
}

.am-award-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: #3730a3;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
}

.am-award-section {
  position: relative;
  z-index: 2;
  margin-top: -54px;
  padding: 0 0 64px;
}

.am-award-section-head {
  margin-bottom: 26px;
  padding: 26px 30px;
  border: 1px solid #e4e7f2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15,23,42,.06);
}

.am-award-section-head > p {
  margin: 0 0 4px;
  color: #4f46e5;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.am-award-section-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.am-award-section-head span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: .94rem;
}

.am-award-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.am-award-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 24px;
  border: 1px solid #e1e5f0;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #f8f9ff 100%);
  box-shadow: 0 10px 26px rgba(15,23,42,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.am-award-card:hover {
  transform: translateY(-3px);
  border-color: #c7d2fe;
  box-shadow: 0 16px 34px rgba(15,23,42,.075);
}

.am-award-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
}

.am-award-rank-1 {
  background: linear-gradient(150deg, #fffdf4 0%, #fff7d6 100%);
  border-color: #f3d97a;
}
.am-award-rank-1::before { background: linear-gradient(90deg, #d49d00, #f3c84b); }
.am-award-rank-2 { background: linear-gradient(150deg, #ffffff 0%, #f1f5f9 100%); }
.am-award-rank-2::before { background: linear-gradient(90deg, #7c8798, #b6c0cf); }
.am-award-rank-3 { background: linear-gradient(150deg, #fffaf6 0%, #f7e9df 100%); }
.am-award-rank-3::before { background: linear-gradient(90deg, #a86a3d, #d59a6c); }

.am-award-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #eef2ff;
  color: #4338ca;
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.am-award-rank-1 .am-award-rank { background: #fff1b8; color: #8a6500; }
.am-award-rank-2 .am-award-rank { background: #e9eef5; color: #586474; }
.am-award-rank-3 .am-award-rank { background: #f2dfd2; color: #8b5835; }

.am-award-card-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(79,70,229,.08);
  color: #4f46e5;
}

.am-award-card-icon svg { width: 22px; height: 22px; }

.am-award-card-copy { margin-top: 38px; }

.am-award-category {
  margin: 0 0 6px !important;
  color: #4f46e5 !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.am-award-card h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 1.24rem;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.am-award-card p {
  margin: 0;
  color: #64748b;
  font-size: .92rem;
  line-height: 1.62;
}

.am-award-note { padding: 0 0 72px; }

.am-award-note-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 26px 28px;
  border-radius: 22px;
  background: #312e81;
  color: #fff;
}

.am-award-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
}

.am-award-note-icon svg { width: 22px; height: 22px; }

.am-award-note-card h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.28rem;
}

.am-award-note-card p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: .93rem;
}

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

@media (max-width: 620px) {
  .am-award-hero { padding: 42px 0 58px; }
  .am-award-agency { font-size: .68rem; line-height: 1.5; }
  .am-award-mark { width: 56px; height: 56px; border-radius: 16px; }
  .am-award-hero h1 { font-size: clamp(1.28rem, 6.1vw, 1.72rem); line-height: 1.08; }
  .am-award-subtitle { font-size: clamp(2rem, 10vw, 2.8rem); }
  .am-award-lead { font-size: .94rem; }
  .am-award-section { margin-top: -42px; padding-bottom: 48px; }
  .am-award-section-head { padding: 22px; border-radius: 18px; }
  .am-award-grid { grid-template-columns: 1fr; gap: 14px; }
  .am-award-card { min-height: 0; padding: 20px; border-radius: 18px; }
  .am-award-card-copy { margin-top: 28px; }
  .am-award-note { padding-bottom: 52px; }
  .am-award-note-card { grid-template-columns: 1fr; padding: 22px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .am-award-hero { animation: none; }
  .am-award-card { transition: none; }
  .am-award-card:hover { transform: none; }
}

/* =========================================================
   Penghargaan v2 — event layout inspired by Rakernas page
========================================================= */
.am-award-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.am-award-hero-actions .am-award-hero-btn { margin-top: 0; }

.am-award-hero-btn.is-outline {
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: none;
}

.am-award-highlight-wrap {
  position: relative;
  z-index: 4;
  margin-top: -42px;
}

.am-award-highlight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: #312e81;
  box-shadow: 0 16px 36px rgba(15,23,42,.12);
}

.am-award-highlight-item {
  display: flex;
  min-height: 120px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  text-align: center;
  color: #fff;
}

.am-award-highlight-item + .am-award-highlight-item {
  border-left: 1px solid rgba(255,255,255,.14);
}

.am-award-highlight-item strong {
  color: #facc15;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

.am-award-highlight-item span {
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  font-size: .88rem;
  font-weight: 700;
}

.am-award-workshop {
  padding: 72px 0 66px;
}

.am-award-section-title {
  max-width: 760px;
  margin: 0 auto 26px;
  text-align: center;
}

.am-award-section-title > p {
  margin: 0 0 6px;
  color: #4f46e5;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.am-award-section-title h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.75rem, 4vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.am-award-section-title span {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-size: .96rem;
  line-height: 1.7;
}

.am-award-speaker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.am-award-speaker-card {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 170px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-left: 5px solid #4f46e5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.045);
}

.am-award-speaker-card.is-moderator {
  grid-column: 1 / -1;
  max-width: 760px;
  width: 100%;
  justify-self: center;
  border-left-color: #ca8a04;
  background: #fffdf6;
}

.am-award-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
}

.am-award-speaker-card.is-moderator .am-award-avatar {
  background: #fef3c7;
  color: #a16207;
}

.am-award-avatar svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.am-award-speaker-copy span {
  display: inline-block;
  margin-bottom: 4px;
  color: #4f46e5;
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.am-award-speaker-card.is-moderator .am-award-speaker-copy span { color: #a16207; }

.am-award-speaker-copy h3 {
  margin: 0 0 7px;
  color: #0f172a;
  font-size: 1.2rem;
  line-height: 1.25;
}

.am-award-speaker-copy p {
  margin: 0;
  color: #64748b;
  font-size: .92rem;
  line-height: 1.6;
}

.am-award-section {
  margin-top: 0;
  padding: 68px 0 72px;
  background: #f1f5f9;
}

@media (max-width: 760px) {
  .am-award-highlight { grid-template-columns: 1fr; }
  .am-award-highlight-item { min-height: 94px; }
  .am-award-highlight-item + .am-award-highlight-item {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .am-award-workshop { padding: 58px 0 48px; }
  .am-award-speaker-grid { grid-template-columns: 1fr; }
  .am-award-speaker-card,
  .am-award-speaker-card.is-moderator { grid-column: auto; }
}

@media (max-width: 520px) {
  .am-award-speaker-card {
    align-items: flex-start;
    min-height: 0;
    padding: 20px;
  }
  .am-award-avatar {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }
  .am-award-avatar svg { width: 26px; height: 26px; }
}

/* Award hero correction — compact, balanced, no trophy mark */
.am-award-hero {
  padding: 58px 0 76px;
}
.am-award-hero-inner {
  max-width: 980px;
}
.am-award-title-stack {
  display: grid;
  gap: 3px;
  justify-items: center;
}
.am-award-hero h1.am-award-title-stack {
  font-size: clamp(1.55rem, 3.1vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.am-award-title-stack span {
  width: auto;
  max-width: 100%;
  text-align: center;
}
.am-award-lead {
  margin-top: 14px;
  font-size: .98rem;
}
.am-award-hero-actions {
  margin-top: 22px;
}
@media (max-width: 760px) {
  .am-award-hero { padding: 42px 0 58px; }
  .am-award-hero h1.am-award-title-stack {
    font-size: clamp(1.2rem, 5.2vw, 1.62rem);
    line-height: 1.16;
    letter-spacing: -.025em;
  }
  .am-award-agency { margin-bottom: 12px; }
  .am-award-lead { font-size: .9rem; line-height: 1.55; }
  .am-award-hero-actions { margin-top: 18px; }
}