/* =========================================================
   Template tampilan. Dipilih di admin: Template tampilan.
   Dimuat setelah app.css; tiap template dibatasi kelas pada <body>.
   "klasik" = tampilan bawaan di app.css (tanpa aturan tambahan).
   ========================================================= */

/* ---------- MODERN: bersih, berpusat, tanpa garis buku ---------- */
.tpl-modern .site-header { background: rgba(255,255,255,.9); border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }
.tpl-modern .brand-mark { box-shadow: none; border-radius: 12px; }
.tpl-modern .nav a.active::after { height: 3px; bottom: 0; left: .8rem; right: .8rem; background: var(--blue); border-radius: 2px; z-index: 0; }
.tpl-modern .hero { background: linear-gradient(160deg, var(--blue-tint), var(--paper) 60%); background-image: linear-gradient(160deg, var(--blue-tint), var(--paper) 60%); border-bottom: 0; }
.tpl-modern .hero::before { display: none; }
.tpl-modern .hero h1, .tpl-modern .lead { background: none; }
.tpl-modern .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.tpl-modern .hero .lead { margin-inline: auto; }
.tpl-modern .hero .actions { justify-content: center; }
.tpl-modern .hero-side { width: 100%; justify-items: center; }
.tpl-modern .hero-photo { max-width: 720px; }
.tpl-modern .idcard { transform: none; justify-self: center; box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); }
.tpl-modern .idcard::after { background: var(--hl); height: 5px; }
.tpl-modern .page-head { background: linear-gradient(160deg, var(--blue-tint), var(--paper)); border-bottom: 0; }
.tpl-modern .section.soft { background: var(--blue-tint); }
.tpl-modern .person, .tpl-modern .datacard, .tpl-modern .info { border-top-width: 1px; border-radius: var(--radius); box-shadow: 0 10px 24px -18px rgba(0,0,0,.35); }
.tpl-modern .btn { border-width: 0; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
.tpl-modern .btn:not(.primary):not(.hl):not(.wa) { background: #fff; }
.tpl-modern .btn:not(.primary):not(.hl):not(.wa):hover { background: var(--ink); }
.tpl-modern .ach { border: 0; box-shadow: 0 14px 30px -20px rgba(0,0,0,.4); }
.tpl-modern .thumb, .tpl-modern .cover { box-shadow: 0 14px 30px -20px rgba(0,0,0,.4); }
.tpl-modern .head h2::after, .tpl-modern .greet h2::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--hl); margin-top: .5rem; }

/* ---------- ELEGAN: serif, garis tipis, formal ---------- */
.tpl-elegan { letter-spacing: .005em; }
.tpl-elegan h1, .tpl-elegan h2, .tpl-elegan h3 { font-weight: 700; letter-spacing: 0; }
.tpl-elegan .site-header { background: var(--paper); border-bottom: 3px double var(--line); }
.tpl-elegan .brand-mark { border-radius: 2px; box-shadow: none; }
.tpl-elegan .nav a:not(.btn) { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.tpl-elegan .nav a.active::after { height: 2px; bottom: .1rem; background: var(--blue); z-index: 0; }
.tpl-elegan .btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.tpl-elegan .hero { background-image: none; background-color: var(--paper); border-bottom: 3px double var(--line); }
.tpl-elegan .hero::before { display: none; }
.tpl-elegan .hero h1, .tpl-elegan .lead { background: none; }
.tpl-elegan .hero h1 { font-weight: 700; letter-spacing: -.01em; }
.tpl-elegan .chip { border-radius: 2px; }
.tpl-elegan .idcard { transform: none; border-radius: 2px; box-shadow: none; border: 1px solid var(--ink); }
.tpl-elegan .idcard-top { background: var(--blue); }
.tpl-elegan .idcard::after { height: 4px; background: var(--hl); }
.tpl-elegan .page-head { background: var(--paper); border-bottom: 3px double var(--line); }
.tpl-elegan .section.soft { background: var(--grey); }
.tpl-elegan .tag, .tpl-elegan .pills a { border-radius: 2px; }
.tpl-elegan .person, .tpl-elegan .datacard, .tpl-elegan .info, .tpl-elegan .panel, .tpl-elegan .ach, .tpl-elegan .items.boxed li { border-radius: 2px; }
.tpl-elegan .ach-award { border-radius: 2px; }
.tpl-elegan .head { border-bottom: 1px solid var(--ink); padding-bottom: .6rem; }
.tpl-elegan .site-footer { background: var(--blue-dark); }
.tpl-elegan .cta { background: var(--blue-dark); }

/* ---------- CERIA: garis tebal, bayangan blok, penuh warna ---------- */
.tpl-ceria { --ink: #1c1233; }
.tpl-ceria .site-header { background: #fff; border-bottom: 3px solid var(--ink); }
.tpl-ceria .brand-mark { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--hl); }
.tpl-ceria .nav a.active::after { height: 100%; top: 0; bottom: 0; left: 0; right: 0; border-radius: 999px; background: var(--hl); z-index: -1; }
.tpl-ceria .nav a.active { z-index: 0; color: var(--ink); }
.tpl-ceria .btn { border-width: 2.5px; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.tpl-ceria .btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.tpl-ceria .btn.primary { border-color: var(--ink); } .tpl-ceria .btn.hl, .tpl-ceria .btn.wa { border-color: var(--ink); }
.tpl-ceria .btn.primary:hover, .tpl-ceria .btn.hl:hover, .tpl-ceria .btn.wa:hover { border-color: var(--ink); }
.tpl-ceria .hero { background-image: radial-gradient(circle at 12% 20%, var(--hl) 0 70px, transparent 71px), radial-gradient(circle at 92% 80%, var(--blue-tint) 0 140px, transparent 141px); background-color: var(--paper); border-bottom: 3px solid var(--ink); }
.tpl-ceria .hero::before { display: none; }
.tpl-ceria .hero h1, .tpl-ceria .lead { background: none; }
.tpl-ceria .hero h1 { font-weight: 900; }
.tpl-ceria .chip { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tpl-ceria .idcard { border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-2deg); }
.tpl-ceria .idcard::after { background: repeating-linear-gradient(135deg, var(--hl) 0 10px, var(--red) 10px 20px); }
.tpl-ceria .page-head { background: var(--hl); border-bottom: 3px solid var(--ink); }
.tpl-ceria .page-head .lead { color: var(--ink); }
.tpl-ceria .section.soft { background: var(--blue-tint); }
.tpl-ceria .person, .tpl-ceria .datacard, .tpl-ceria .info, .tpl-ceria .ach, .tpl-ceria .items.boxed li { border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: var(--radius); }
.tpl-ceria .panel { border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.tpl-ceria .thumb, .tpl-ceria .cover, .tpl-ceria .tile img, .tpl-ceria .tile-ph { border: 2.5px solid var(--ink); }
.tpl-ceria .tag { border: 2px solid var(--ink); }
.tpl-ceria .pills a { border: 2.5px solid var(--ink); font-weight: 700; } .tpl-ceria .pills a.active { background: var(--blue); border-color: var(--ink); }
.tpl-ceria .cta { background: var(--blue); border-top: 3px solid var(--ink); }
.tpl-ceria .site-footer { background: var(--ink); }
.tpl-ceria .tabbar { border-top: 3px solid var(--ink); }
.tpl-ceria .sub-menu { border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* ---------- MALAM: mode gelap ---------- */
.tpl-malam {
  --paper: #0e1424; --grey: #151c31; --ink: #e8ecf8; --muted: #9aa6c4; --line: #27304a;
  --blue: color-mix(in srgb, var(--brand) 55%, #ffffff);
  --blue-dark: color-mix(in srgb, var(--brand) 40%, #ffffff);
  --blue-tint: color-mix(in srgb, var(--brand) 32%, #0e1424);
  --ok: #58d398; --ok-bg: #12331f; --bad: #ff8a80; --bad-bg: #3a1613;
  color-scheme: dark;
}
.tpl-malam .site-header { background: rgba(14,20,36,.92); }
.tpl-malam .brand-mark, .tpl-malam .idcard-top .brand-mark { color: #0b1230; }
.tpl-malam .idcard-top .brand-mark { background: #fff; }
.tpl-malam .nav a.active { color: var(--ink); }
.tpl-malam .nav a.active::after { opacity: .55; }
.tpl-malam .btn:hover { background: var(--ink); color: var(--paper); }
.tpl-malam .btn.primary, .tpl-malam .btn.primary:hover { color: #0b1230; }
.tpl-malam .btn.hl, .tpl-malam .btn.hl:hover, .tpl-malam .btn.wa { color: #0b1230; }
.tpl-malam .btn.wa { background: #4bd08b; border-color: #4bd08b; } .tpl-malam .btn.wa:hover { background: #38b977; border-color: #38b977; color: #0b1230; }
.tpl-malam .chip, .tpl-malam .tag.Pengumuman, .tpl-malam .ach-award, .tpl-malam .banner.open { color: #101b3d; }
.tpl-malam .tag { color: var(--ink); }
.tpl-malam .hero { background-color: var(--paper); background-image: repeating-linear-gradient(to bottom, transparent 0 35px, #1a2340 35px 36px); }
.tpl-malam .hero h1, .tpl-malam .lead { background: none; }
.tpl-malam .idcard, .tpl-malam .person, .tpl-malam .datacard, .tpl-malam .info, .tpl-malam .ach,
.tpl-malam .items.boxed li, .tpl-malam .pills a, .tpl-malam .tabbar, .tpl-malam .sheet-panel, .tpl-malam .sub-menu { background: var(--grey); }
.tpl-malam .idcard { box-shadow: 0 22px 44px -22px rgba(0,0,0,.8); }
.tpl-malam .idcard-top { background: color-mix(in srgb, var(--brand) 75%, #000); }
.tpl-malam .pills a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tpl-malam .panel { background: hsl(var(--h) 28% 16%); border-color: hsl(var(--h) 22% 25%); border-top-color: hsl(var(--h) 55% 58%); }
.tpl-malam .thumb-ph, .tpl-malam .tile-ph, .tpl-malam .ach-ph { color: hsl(var(--h) 45% 75%); background-color: hsl(var(--h) 30% 17%); background-image: repeating-linear-gradient(to bottom, transparent 0 23px, hsl(var(--h) 25% 24%) 23px 24px); }
.tpl-malam .flow li::before { color: #0b1230; box-shadow: 0 0 0 4px var(--paper); }
.tpl-malam .nav .sub-menu a:not(.btn):hover { color: var(--ink); }
.tpl-malam .sheet-close, .tpl-malam .sheet-grip { background: #27304a; color: var(--ink); }
.tpl-malam input, .tpl-malam select, .tpl-malam textarea { background: var(--grey); color: var(--ink); }
.tpl-malam input:hover, .tpl-malam textarea:hover { border-color: #3a4666; }
.tpl-malam .cta { background: color-mix(in srgb, var(--brand) 65%, #000); }
.tpl-malam .site-footer { background: #070b17; }
.tpl-malam .skip { background: #fff; color: #101b3d; }
.tpl-malam .lightbox-x { background: #fff; color: #101b3d; }

/* ---------- Penyesuaian kecil di layar lebar ---------- */
@media (min-width: 900px) {
  .tpl-modern .hero-grid { gap: 2.5rem; }
  .tpl-elegan .hero-grid { grid-template-columns: 1.4fr 1fr; }
}

/* =========================================================
   SUNSHINE: beranda modern bergaya situs sekolah (view home-cerah)
   ========================================================= */
.tpl-sunshine { --ink: #1f1740; --muted: #5d5878; --line: #e8e2f4; --sn-shadow: 0 18px 40px -22px rgba(60,30,140,.35); }
.tpl-sunshine .site-header { background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
.tpl-sunshine .bar { min-height: 68px; }
.tpl-sunshine .brand-mark { box-shadow: none; border-radius: 12px; width: 40px; height: 40px; }
.tpl-sunshine .brand-name { font-weight: 700; font-size: 1.05rem; }
.tpl-sunshine .brand-tag { display: block; font: 600 .62rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.tpl-sunshine .nav a:not(.btn) { color: var(--ink); font-weight: 500; font-size: .92rem; }
.tpl-sunshine .nav a.active { color: var(--blue); font-weight: 600; }
.tpl-sunshine .nav a.active::after { bottom: -.55rem; height: 3px; background: var(--blue); border-radius: 2px; z-index: 0; }
.tpl-sunshine .btn { border-radius: 10px; font-weight: 600; gap: .55rem; }
.tpl-sunshine .btn:not(.primary):not(.hl):not(.wa) { background: #fff; border-color: var(--line); }
.tpl-sunshine .btn:not(.primary):not(.hl):not(.wa):hover { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue); }
.tpl-sunshine .nav-cta::after { content: "→"; }
.tpl-sunshine .page-head { background: linear-gradient(120deg, var(--blue-tint), #fff); border-bottom: 0; }
.tpl-sunshine .section.soft { background: linear-gradient(180deg, #faf7ff, var(--blue-tint)); }
.tpl-sunshine .person, .tpl-sunshine .datacard, .tpl-sunshine .info, .tpl-sunshine .ach { border-top-width: 1px; border-radius: var(--radius); box-shadow: var(--sn-shadow); }
.tpl-sunshine .site-footer { background: var(--blue-dark); }

/* Hero */
.sn-hero { position: relative; overflow: hidden; padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(4.5rem, 9vw, 6.5rem); background: radial-gradient(circle at 8% 10%, #fff 0 8rem, transparent 8.1rem), linear-gradient(115deg, #fff7e6 0%, #f7f1ff 45%, #efe6ff 100%); }
.sn-hero-grid { display: grid; gap: 2rem; align-items: center; }
.sn-tag { margin: 0 0 .9rem; font: 700 .95rem var(--head); color: var(--blue); }
.sn-hero h1 { font-size: clamp(2.2rem, 7vw, 3.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.sn-accent { display: inline-block; position: relative; font: 700 1.15em/1 "Dancing Script", "Brush Script MT", cursive; color: var(--blue); letter-spacing: 0; }
.sn-accent::after { content: ""; position: absolute; left: 2%; right: 0; bottom: -.12em; height: .13em; border-radius: 99px; background: var(--hl); transform: rotate(-1.2deg); }
.sn-lead { margin: 1.4rem 0 0; max-width: 28em; color: var(--muted); font-size: 1.05rem; }
.sn-hero .actions { margin-top: 1.75rem; }
.sn-hero-media { position: relative; }
.sn-hero-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: var(--sn-shadow); }
.sn-ph { display: grid; place-items: center; color: var(--blue); background: radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 19%), linear-gradient(135deg, var(--blue-tint), #e0d3ff); }
.sn-ph svg { width: 34%; height: auto; opacity: .55; }
.sn-admit { position: relative; margin: -2.2rem 1rem 0 auto; width: min(260px, 90%); display: grid; justify-items: start; gap: .1rem; padding: 1.1rem 1.25rem 1.25rem; background: #fff; border-radius: 20px; box-shadow: 0 22px 44px -18px rgba(60,30,140,.45); }
.sn-admit small { color: var(--muted); font-weight: 600; font-size: .85rem; }
.sn-admit strong { font: 800 1.7rem var(--head); color: var(--blue); line-height: 1.2; margin-bottom: .6rem; }
.sn-admit .btn { min-height: 40px; padding: .4rem 1rem; font-size: .88rem; }
.sn-admit-ico { position: absolute; top: -1.3rem; left: 1.25rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 0 5px #fff; }
.sn-admit-ico svg { width: 22px; height: 22px; }
.sn-admit small { margin-top: .9rem; }
@media (min-width: 900px) {
  .sn-hero-grid { grid-template-columns: 1fr 1.15fr; gap: 3rem; }
  .sn-hero-photo { aspect-ratio: 5 / 4; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); border-radius: 0 28px 28px 0; box-shadow: none; }
  .sn-admit { position: absolute; right: 1.25rem; bottom: -1.5rem; margin: 0; }
}

/* Strip keunggulan */
.sn-feats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1rem; margin-top: -3.2rem; padding: 1.4rem 1.25rem; background: #fff; border-radius: 22px; box-shadow: var(--sn-shadow); border: 1px solid var(--line); }
.sn-feats li { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.sn-feat-ico { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.sn-feat-ico svg { width: 24px; height: 24px; }
.sn-feats strong { display: block; font: 700 .95rem/1.25 var(--head); }
.sn-feats span:not(.sn-feat-ico) { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.4; color: var(--muted); }
@media (min-width: 900px) { .sn-feats { grid-template-columns: repeat(4, 1fr); padding: 1.5rem 2rem; gap: 1.5rem; } .sn-feats li:not(:first-child) { padding-left: 1.5rem; border-left: 1px solid var(--line); } }
@media (max-width: 420px) { .sn-feats { grid-template-columns: 1fr; } }

/* Sambutan + berita */
.sn-main { padding: clamp(2.25rem, 6vw, 3.5rem) 0; background: linear-gradient(180deg, #fff, #f6f1ff); }
.sn-main-grid { display: grid; gap: 2.25rem; }
.sn-welcome { display: grid; gap: 1.25rem; align-content: start; }
.sn-welcome-img { position: relative; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--sn-shadow); background: var(--blue-tint); }
.sn-welcome-img img, .sn-welcome-img .sn-ph { width: 100%; height: 100%; object-fit: cover; display: grid; }
.sn-pill { position: absolute; left: .8rem; bottom: .8rem; padding: .3rem .9rem; border-radius: 99px; background: #fff; font: 700 .82rem var(--head); color: var(--blue); }
.sn-welcome-text small { display: block; font: 700 .72rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: .5rem; }
.sn-welcome-text h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 700; line-height: 1.2; }
.sn-welcome-text p { margin: .9rem 0 1.25rem; color: var(--muted); font-size: .96rem; line-height: 1.65; }
.sn-news-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.sn-news-head h2 { font-size: 1.35rem; font-weight: 700; }
.sn-news-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sn-post { display: grid; gap: .5rem; align-content: start; padding: .6rem .6rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 26px -20px rgba(60,30,140,.5); }
.sn-post:hover { transform: translateY(-2px); }
.sn-post-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--grey); }
.sn-post-img img, .sn-post-img .thumb-ph { width: 100%; height: 100%; object-fit: cover; display: grid; font-size: .85rem; }
.sn-date { position: absolute; left: .5rem; top: .5rem; display: grid; justify-items: center; min-width: 40px; padding: .25rem .4rem; border-radius: 9px; background: var(--c); color: #fff; font: 700 .62rem/1.2 var(--head); }
.sn-date b { font-size: 1.05rem; line-height: 1.1; }
.sn-post strong { padding-inline: .3rem; font: 700 .92rem/1.3 var(--head); }
.sn-post .muted { padding-inline: .3rem; font-size: .8rem; line-height: 1.45; }
.sn-post:hover strong { color: var(--blue); text-decoration: none; }
@media (min-width: 640px) { .sn-welcome { grid-template-columns: .9fr 1fr; align-items: center; } .sn-welcome-img { aspect-ratio: 4 / 5; } }
@media (min-width: 1000px) { .sn-main-grid { grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: start; } .sn-news-grid { grid-template-columns: repeat(3, 1fr); } }

/* Pita ajakan */
.sn-band-wrap { padding: 0 0 clamp(2rem, 5vw, 3rem); background: #fff; }
.sn-band-wrap { padding-top: 2rem; }
.sn-band { display: grid; gap: 1.1rem 1.5rem; align-items: center; padding: 1.4rem 1.5rem; border-radius: 22px; color: #fff; background: linear-gradient(110deg, var(--blue-dark), var(--blue)); box-shadow: 0 22px 44px -22px rgba(60,30,140,.7); }
.sn-band-item { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.sn-band-item strong { display: block; font: 700 1rem/1.3 var(--head); overflow-wrap: anywhere; }
.sn-band-item span:not(.sn-band-ico), .sn-band-item small { display: block; font-size: .85rem; opacity: .85; }
.sn-band-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--hl); color: #1f1740; }
.sn-band-ico.sm { width: 38px; height: 38px; background: rgba(255,255,255,.15); color: #fff; }
.sn-band-ico svg { width: 22px; height: 22px; } .sn-band-ico.sm svg { width: 18px; height: 18px; }
.sn-band-cta { display: grid; gap: .75rem; justify-items: start; font-weight: 600; }
.sn-band-cta .btn { color: #1f1740; border-color: var(--hl); }
@media (min-width: 900px) { .sn-band { grid-template-columns: auto auto auto 1fr; padding: 1.3rem 2rem; } .sn-band-cta { grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; font-size: .92rem; } }

/* =========================================================
   TEMPLATE BARU: Samudra, Akademi Navy, Zamrud Asri, Mentari
   (dipakai bersama susunan beranda klasik; slider ikut variabel tema)
   ========================================================= */

/* ---------- SAMUDRA: hero gradien, kartu kaca, menu pil ---------- */
.tpl-samudra { --ink: #0b2a33; --muted: #4d6770; --line: #dbe8eb; }
.tpl-samudra .site-header { background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); }
.tpl-samudra .brand-mark { border-radius: 12px; box-shadow: none; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.tpl-samudra .nav a:not(.btn) { border-radius: 999px; }
.tpl-samudra .nav a:not(.btn):hover { background: var(--blue-tint); color: var(--blue-dark); }
.tpl-samudra .nav a.active { background: var(--blue-tint); color: var(--blue-dark); }
.tpl-samudra .nav a.active::after { display: none; }
.tpl-samudra .hero { color: #fff; border-bottom: 0; background-color: var(--blue-dark);
  background-image: radial-gradient(800px 380px at 92% -8%, color-mix(in srgb, var(--hl) 38%, transparent), transparent 62%), linear-gradient(135deg, var(--blue-dark), var(--blue)); }
.tpl-samudra .hero::before { display: none; }
.tpl-samudra .hero h1 { background: none; color: #fff; }
.tpl-samudra .hero .lead { background: none; color: rgba(255,255,255,.86); }
.tpl-samudra .chip { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(6px); }
.tpl-samudra .chip i { background: var(--hl); }
.tpl-samudra .hero .btn.primary { background: #fff; border-color: #fff; color: var(--blue-dark); }
.tpl-samudra .hero .btn.primary:hover { background: var(--hl); border-color: var(--hl); color: var(--ink); }
.tpl-samudra .hero .btn:not(.primary):not(.hl) { border-color: rgba(255,255,255,.6); color: #fff; }
.tpl-samudra .hero .btn:not(.primary):not(.hl):hover { background: #fff; color: var(--blue-dark); }
.tpl-samudra .hero-photo { border: 0; box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); }
.tpl-samudra .idcard { color: var(--ink); transform: none; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.96); box-shadow: 0 26px 50px -24px rgba(0,0,0,.55); }
.tpl-samudra .idcard::after { height: 5px; background: linear-gradient(90deg, var(--hl), var(--blue)); }
.tpl-samudra .page-head { background: linear-gradient(160deg, var(--blue-tint), var(--paper)); border-bottom: 0; }
.tpl-samudra .section.soft { background: linear-gradient(180deg, var(--blue-tint), var(--paper)); }
.tpl-samudra .person, .tpl-samudra .datacard, .tpl-samudra .info, .tpl-samudra .ach { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 32px -24px rgba(11,42,51,.5); }
.tpl-samudra .person { border-top: 4px solid var(--blue); }
.tpl-samudra .btn { border-width: 0; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); }
.tpl-samudra .btn:not(.primary):not(.hl):not(.wa) { background: #fff; }
.tpl-samudra .btn:not(.primary):not(.hl):not(.wa):hover { background: var(--ink); color: #fff; }
.tpl-samudra .thumb, .tpl-samudra .cover { box-shadow: 0 16px 32px -22px rgba(0,0,0,.45); }
.tpl-samudra .cta { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.tpl-samudra .site-footer { background: color-mix(in srgb, var(--blue-dark) 70%, #000); }
.tpl-samudra .tabbar { background: rgba(255,255,255,.9); backdrop-filter: blur(12px); }

/* ---------- AKADEMI NAVY: tegas, serif, aksen emas ---------- */
.tpl-akademi { --ink: #0f1b33; --muted: #4a5875; --line: #d5dbe8; }
.tpl-akademi h1, .tpl-akademi h2, .tpl-akademi h3 { font-weight: 700; letter-spacing: 0; }
.tpl-akademi .site-header { background: #fff; border-top: 4px solid var(--blue); border-bottom: 1px solid var(--line); }
.tpl-akademi .brand-mark { border-radius: 6px; box-shadow: inset 0 -3px 0 var(--hl); }
.tpl-akademi .nav a:not(.btn) { text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; font-weight: 700; border-radius: 0; }
.tpl-akademi .nav a.active::after { height: 3px; bottom: 0; background: var(--blue); border-radius: 0; z-index: 0; }
.tpl-akademi .btn { border-radius: 6px; letter-spacing: .02em; }
.tpl-akademi .hero { background-image: none; background-color: var(--paper); border-bottom: 1px solid var(--line); }
.tpl-akademi .hero::before { left: 0; width: 8px; background: var(--blue); }
.tpl-akademi .hero h1, .tpl-akademi .lead { background: none; }
.tpl-akademi .hero h1 { font-weight: 700; letter-spacing: -.01em; color: var(--blue-dark); }
.tpl-akademi .chip { border-radius: 4px; background: var(--blue); color: #fff; }
.tpl-akademi .chip i { background: var(--hl); }
.tpl-akademi .idcard { transform: none; border-radius: 6px; border: 1px solid var(--line); border-top: 5px solid var(--blue); box-shadow: 0 16px 32px -24px rgba(15,27,51,.55); }
.tpl-akademi .idcard-top { border-radius: 0; }
.tpl-akademi .idcard::after { height: 4px; background: var(--hl); }
.tpl-akademi .hero-photo { border-radius: 6px; }
.tpl-akademi .page-head { background: var(--blue); color: #fff; border-bottom: 4px solid var(--hl); }
.tpl-akademi .page-head h1 { color: #fff; }
.tpl-akademi .page-head .lead, .tpl-akademi .page-head p { color: rgba(255,255,255,.86); background: none; }
.tpl-akademi .section.soft { background: var(--grey); }
.tpl-akademi .head { border-left: 5px solid var(--hl); padding-left: .9rem; }
.tpl-akademi .person, .tpl-akademi .datacard, .tpl-akademi .info, .tpl-akademi .panel, .tpl-akademi .ach, .tpl-akademi .items.boxed li { border-radius: 6px; }
.tpl-akademi .tag, .tpl-akademi .pills a, .tpl-akademi .ach-award { border-radius: 4px; }
.tpl-akademi .cta { background: var(--blue-dark); border-top: 4px solid var(--hl); }
.tpl-akademi .site-footer { background: color-mix(in srgb, var(--blue-dark) 55%, #000); }

/* ---------- ZAMRUD ASRI: hijau lembut, sudut organik, penanda daun ---------- */
.tpl-zamrud { --ink: #10281f; --muted: #4f665c; --line: #dfe9e2; }
.tpl-zamrud .site-header { background: rgba(253,250,244,.92); border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.tpl-zamrud .brand-mark { border-radius: 50% 10px 50% 10px; box-shadow: none; }
.tpl-zamrud .nav a:not(.btn) { border-radius: 999px; }
.tpl-zamrud .nav a.active { z-index: 0; }
.tpl-zamrud .nav a.active::after { inset: 0; height: auto; background: var(--blue-tint); border-radius: 999px; z-index: -1; }
.tpl-zamrud .hero { border-bottom: 0; background-color: var(--paper);
  background-image: radial-gradient(circle at 8% 14%, color-mix(in srgb, var(--hl) 42%, transparent) 0 80px, transparent 81px), radial-gradient(circle at 97% 92%, var(--blue-tint) 0 230px, transparent 231px); }
.tpl-zamrud .hero::before { display: none; }
.tpl-zamrud .hero h1, .tpl-zamrud .lead { background: none; }
.tpl-zamrud .chip { background: var(--blue-tint); color: var(--blue-dark); }
.tpl-zamrud .chip i { background: var(--blue); }
.tpl-zamrud .hero-photo { border: 0; border-radius: 30px 30px 30px 8px; box-shadow: 0 24px 44px -26px rgba(15,107,79,.6); }
.tpl-zamrud .idcard { transform: none; border: 0; border-radius: 28px 28px 28px 8px; box-shadow: 0 24px 44px -26px rgba(15,107,79,.6); }
.tpl-zamrud .idcard::after { height: 6px; background: linear-gradient(90deg, var(--blue), var(--hl)); }
.tpl-zamrud .page-head { background: var(--blue-tint); border-bottom: 0; border-radius: 0 0 36px 36px; }
.tpl-zamrud .section.soft { background: var(--blue-tint); }
.tpl-zamrud .head h2::before, .tpl-zamrud .greet h2::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5rem; border-radius: 50% 0 50% 0; background: var(--blue); }
.tpl-zamrud .person, .tpl-zamrud .datacard, .tpl-zamrud .info, .tpl-zamrud .ach, .tpl-zamrud .panel { border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 28px -22px rgba(15,107,79,.55); }
.tpl-zamrud .person { border-top-width: 1px; }
.tpl-zamrud .thumb, .tpl-zamrud .cover { border-radius: 22px; }
.tpl-zamrud .btn { box-shadow: 0 6px 16px -10px rgba(15,107,79,.7); }
.tpl-zamrud .cta { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.tpl-zamrud .site-footer { background: #0b2a20; }

/* ---------- MENTARI: hangat, terang, tombol membulat ---------- */
.tpl-mentari { --ink: #2a1608; --muted: #6b5546; --line: #f0e1d3; }
.tpl-mentari .site-header { background: rgba(255,255,255,.95); border-bottom: 0; box-shadow: 0 6px 22px -16px rgba(120,60,10,.55); }
.tpl-mentari .brand-mark { border-radius: 12px; box-shadow: none; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.tpl-mentari .nav a.active::after { height: 3px; bottom: 0; left: .8rem; right: .8rem; background: var(--blue); border-radius: 2px; z-index: 0; }
.tpl-mentari .hero { border-bottom: 0; background-color: #fff; background-image: linear-gradient(120deg, color-mix(in srgb, var(--hl) 40%, #fff) 0%, #fff 58%); }
.tpl-mentari .hero::before { display: none; }
.tpl-mentari .hero h1 { background: none; color: var(--blue-dark); }
.tpl-mentari .lead { background: none; }
.tpl-mentari .chip { background: var(--blue); color: #fff; }
.tpl-mentari .chip i { background: var(--hl); }
.tpl-mentari .btn { border-width: 0; box-shadow: 0 8px 18px -10px rgba(120,60,10,.6); }
.tpl-mentari .btn:not(.primary):not(.hl):not(.wa) { background: #fff; }
.tpl-mentari .btn:not(.primary):not(.hl):not(.wa):hover { background: var(--ink); color: #fff; }
.tpl-mentari .hero-photo { border: 0; box-shadow: 0 24px 44px -26px rgba(120,60,10,.6); }
.tpl-mentari .idcard { transform: none; border: 0; border-radius: 26px; box-shadow: 0 24px 44px -26px rgba(179,74,14,.6); }
.tpl-mentari .idcard-top { background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.tpl-mentari .idcard::after { height: 6px; background: var(--hl); }
.tpl-mentari .page-head { background: linear-gradient(120deg, color-mix(in srgb, var(--hl) 40%, #fff), #fff 70%); border-bottom: 0; }
.tpl-mentari .section.soft { background: color-mix(in srgb, var(--hl) 14%, #fff); }
.tpl-mentari .person, .tpl-mentari .datacard, .tpl-mentari .info, .tpl-mentari .ach { border: 0; border-radius: var(--radius); box-shadow: 0 14px 28px -20px rgba(120,60,10,.55); }
.tpl-mentari .person { border-top: 5px solid var(--blue); }
.tpl-mentari .thumb, .tpl-mentari .cover { box-shadow: 0 14px 28px -20px rgba(120,60,10,.55); }
.tpl-mentari .head h2::after, .tpl-mentari .greet h2::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--blue); margin-top: .5rem; }
.tpl-mentari .cta { background: linear-gradient(120deg, var(--blue), var(--blue-dark)); }
.tpl-mentari .cta p { color: rgba(255,255,255,.85); }
.tpl-mentari .site-footer { background: #2a1608; }

@media (min-width: 900px) {
  .tpl-samudra .hero-grid, .tpl-zamrud .hero-grid, .tpl-mentari .hero-grid { gap: 3.5rem; }
}
.tpl-samudra .idcard-top .brand-mark, .tpl-mentari .idcard-top .brand-mark { background: #fff; color: var(--blue); box-shadow: inset 0 -4px 0 var(--hl); }