/* Halaman SDG (sdg.blade.php). Dimuat setelah home.css dan about.css (pembuka .am-hero, [data-rv]); token dari shell.css.
   Warna ubin = warna resmi UN SDG. Kontras teks di atas ubin: putih di atas #E5243B 4,6:1; putih di atas #C5192D 6,0:1;
   putih di atas #A21942 7,6:1; putih di atas #19486A 9,6:1; navy-deep di atas #4C9F38 4,9:1; navy-deep di atas #FF3A21 4,7:1;
   navy-deep di atas #FD6925 5,6:1. Angka besar di ubin dekoratif (aria-hidden), nama tujuan yang dibaca. */
.sg-hero .am-hero-in { min-height: min(600px, 74svh); }
.sg-hero .am-hero-t { padding-bottom: 72px; }
.sg-hero .am-hero-ph img { object-position: 50% 45%; }
.sg-logo { width: min(100%, 240px); height: auto; }
.sg-g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sg-t { position: relative; aspect-ratio: 1; padding: 20px; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; color: #fff; }
.sg-t.s4 { grid-column: span 2; grid-row: span 2; padding: 28px; }
.sg-n { font: 700 clamp(44px, 4.4vw, 64px)/.9 var(--display); letter-spacing: -.05em; }
.sg-t b { font: 600 clamp(16px, 1.35vw, 19px)/1.2 var(--display); letter-spacing: -.02em; }
.sg-t.s4 .sg-n { font-size: clamp(110px, 12vw, 180px); line-height: .82; }
.sg-t.s4 b { max-width: 12ch; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; }
.sg-f { font-size: 14.5px; font-weight: 600; }
.sg-ic { position: absolute; top: 28px; right: 28px; width: 22%; height: auto; border-radius: 12px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9); }
.sg-t.s1 { background: #E5243B; } .sg-t.s3 { background: #4C9F38; color: var(--navy-deep); } .sg-t.s4 { background: #C5192D; } .sg-t.s5 { background: #FF3A21; color: var(--navy-deep); }
.sg-t.s8 { background: #A21942; } .sg-t.s9 { background: #FD6925; color: var(--navy-deep); } .sg-t.s17 { background: #19486A; }
.lp-home .sg-pri { margin-top: 40px; max-width: 76ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.sg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sg-two:has(> .sg-card:only-child) { grid-template-columns: minmax(0, 820px); } /* gambar Smart Campus di CMS hilang: kartunya dilepas, video berdiri sendiri */
.sg-card { padding: 14px 14px 24px; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; gap: 10px; align-content: start; justify-items: start; }
.sg-ph { width: 100%; margin-bottom: 8px !important; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--navy-deep); }
.sg-ph img, .sg-ph iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.sg-by { padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.lp-home .sg-card h3 { padding: 0 10px; font: 700 21px/1.2 var(--display); letter-spacing: -.025em; color: var(--navy-deep); }
@media (max-width: 1000px) { .sg-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sg-t.s4 { grid-column: span 4; grid-row: auto; aspect-ratio: auto; min-height: 280px; } }
@media (max-width: 900px) { .sg-hero .am-hero-t { padding-bottom: 44px; } .sg-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .sg-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sg-t.s4 { grid-column: span 2; min-height: 260px; } .sg-t { aspect-ratio: auto; min-height: 150px; padding: 16px; } }