/* ============================================================
   TEMA CERITA AKSARA — biru + keluarga
   Palet: --t-bg:#EEF5FC  --t-ink:#1F3A55  --t-blue:#2E6F9E
          --t-blue-deep:#173B57  --t-warm:#F2B75B (hangat keluarga)
   Tipografi: Quicksand (judul, ramah & bulat) + Literata (baca nyaman)
   Diterapkan pada wrapper <div class="theme-cerita"> di dalam <main>,
   header & footer situs tetap memakai tema utama (emas-hitam-putih).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Literata:ital,wght@0,400;0,500;1,400&display=swap');

.theme-cerita{
  --t-bg:#eef5fc; --t-ink:#1f3a55; --t-blue:#2e6f9e; --t-blue-deep:#173b57;
  --t-warm:#f2b75b; --t-warm-soft:#fdecd2; --t-line:#cfe1f0; --t-accent-soft:#dcedfb;
  --t-display:'Quicksand', sans-serif;
  display:block; background:var(--t-bg); color:var(--t-ink); font-family:'Literata', Georgia, serif;
}
.theme-cerita h1, .theme-cerita h2, .theme-cerita h3{font-family:var(--t-display); font-weight:700; color:var(--t-blue-deep); letter-spacing:0}
.theme-cerita p{color:#3f5a73}
.theme-cerita a{color:var(--t-blue-deep)}

.theme-cerita .ca-hero{padding:64px 0 46px; position:relative; background:linear-gradient(180deg, rgba(23,59,87,.93), rgba(31,58,85,.88) 55%, var(--t-bg) 100%), url('/assets/images/cerita-aksara-hero.jpg') center 22%/cover no-repeat}
.theme-cerita .ca-hero-wrap{max-width:1180px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; position:relative}
@media(max-width:880px){.theme-cerita .ca-hero-wrap{grid-template-columns:1fr}}
.theme-cerita .ca-badge{display:inline-block; background:var(--t-warm); color:#5a3a0a; font-family:var(--t-display); font-weight:700; padding:.4em 1em; border-radius:30px; font-size:.85rem; margin-bottom:14px}
.theme-cerita .ca-hero h1{font-size:clamp(2.2rem,4.6vw,3.2rem); color:#fff}
.theme-cerita .ca-hero .ca-big{color:#eef5fc}
.theme-cerita .ca-hero > .ca-hero-wrap > div > p{color:#dbe7f3}
.theme-cerita .ca-illustration{background:linear-gradient(160deg, rgba(46,111,158,.3), rgba(23,59,87,.8)), url('/assets/images/cerita-aksara-hero.jpg') center 15%/cover no-repeat; border-radius:28px; padding:34px; color:#eef5fc; position:relative; overflow:hidden; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 20px 50px rgba(15,30,45,.35)}
.theme-cerita .ca-illustration:before{content:"";position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,30,45,.85) 0%, rgba(15,30,45,.1) 55%, transparent 80%)}
.theme-cerita .ca-illustration strong, .theme-cerita .ca-illustration p{position:relative; z-index:1}
.theme-cerita .ca-illustration strong{display:block; font-family:var(--t-display); font-size:1.15rem; margin-bottom:6px}

.theme-cerita .ca-actions{display:grid; gap:12px; margin-top:24px}
.theme-cerita .ca-action{display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--t-line); border-radius:18px; padding:16px 20px; text-decoration:none}
.theme-cerita .ca-action.primary{background:var(--t-blue-deep); color:#fff; border-color:var(--t-blue-deep)}
.theme-cerita .ca-action strong{font-family:var(--t-display); font-size:1.02rem}
.theme-cerita .ca-action span{font-size:.85rem; opacity:.85}
.theme-cerita .ca-action:hover{border-color:var(--t-blue-deep)}

.theme-cerita .ca-benefits{padding:16px 24px 70px; max-width:1180px; margin:0 auto}
.theme-cerita .ca-benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:20px}
@media(max-width:900px){.theme-cerita .ca-benefit-grid{grid-template-columns:1fr 1fr}}
.theme-cerita .ca-benefit{background:#fff; border:1px solid var(--t-line); border-radius:18px; padding:22px}
.theme-cerita .ca-benefit b{display:inline-block; background:var(--t-warm-soft); color:#8a5a10; font-family:var(--t-display); font-size:.8rem; padding:.25em .7em; border-radius:10px; margin-bottom:10px}
.theme-cerita .ca-benefit strong{display:block; font-family:var(--t-display); margin-bottom:4px; color:var(--t-blue-deep)}
.theme-cerita .ca-benefit p{margin:0; font-size:.9rem}

.theme-cerita .ca-form-card{background:#fff; border:1px solid var(--t-line); border-radius:20px; padding:30px}
.theme-cerita .ca-form-card .field input, .theme-cerita .ca-form-card .field textarea, .theme-cerita .ca-form-card .field select{border-color:var(--t-line); border-radius:12px}
.theme-cerita .btn-cerita{background:var(--t-blue-deep); color:#fff; border-radius:30px; padding:.85em 1.6em; font-family:var(--t-display); font-weight:700; text-decoration:none; display:inline-block; border:0; cursor:pointer}
.theme-cerita .btn-cerita:hover{background:var(--t-blue)}
.theme-cerita .ca-story-card{background:#fff; border:1px solid var(--t-line); border-radius:18px; padding:20px; margin-bottom:14px}
.theme-cerita .ca-story-card h3{font-family:var(--t-display); color:var(--t-blue-deep); margin-bottom:4px}
.theme-cerita .ca-story-card span{font-size:.8rem; color:#5a7690}