/* Kartu surah Juz 30 — tambahan terpisah agar style.css lama tidak tertimpa */
.surah-search{max-width:270px;width:100%;padding:11px 13px;border:1px solid #35546f;border-radius:11px;background:#081a2c;color:#fff;font:inherit}
.surah-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;align-items:stretch}
.surah-card{min-width:0;min-height:270px;display:flex;flex-direction:column;padding:14px 13px 13px;border:1px solid #28445f;border-radius:17px;background:linear-gradient(150deg,#142e48f5,#0c1c30f5);color:#edf7ff;box-shadow:0 12px 25px #0002;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.surah-card:hover,.surah-card:focus-visible{border-color:#83f0cd;transform:translateY(-3px);box-shadow:0 16px 30px #0003;outline:none}
.surah-card-top{display:flex;align-items:center;justify-content:space-between;gap:7px}
.surah-number{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#1d4057;color:#83f0cd;font-weight:900;flex:0 0 auto}
.surah-type{font-size:10px;font-weight:800;line-height:1.2;color:#b9ffe6;background:#174438;border:1px solid #2c6657;border-radius:999px;padding:5px 7px;text-align:center;white-space:normal}
.surah-arabic{font-family:"Amiri","Noto Naskh Arabic",serif;text-align:center;color:#ffd16b;font-size:clamp(23px,1.7vw,31px);line-height:1.6;margin:12px 0 5px;min-height:47px}
.surah-card h3{font-size:15px;line-height:1.3;margin:0;text-align:center;overflow-wrap:anywhere}
.surah-meaning{text-align:center;color:#a7bed1;font-size:11px;line-height:1.35;margin:5px 0 8px;min-height:15px}
.surah-meta{align-self:center;color:#83f0cd;background:#17364a;border-radius:7px;padding:4px 8px;font-size:10px;font-weight:750}
.surah-description{color:#b7cadd;font-size:11px;line-height:1.5;margin:10px 0 13px;flex:1}
.surah-open{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #28445f;padding-top:10px;color:#79dfff;font-size:11px;font-weight:800}
@media(max-width:1200px){.surah-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.section-head{align-items:stretch;flex-direction:column}.surah-search{max-width:none}.surah-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.surah-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.surah-card{padding:11px 10px;min-height:260px}.surah-card h3{font-size:14px}.surah-description{font-size:10px}.surah-type{font-size:9px}}
@media(max-width:350px){.surah-list{grid-template-columns:1fr}}

/* Target hafalan per jenjang kelas */
.surah-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.surah-filters .surah-search{min-width:190px}
.grade-target{display:block;text-align:center;margin:7px auto 0;padding:5px 9px;border:1px solid #2f6659;border-radius:999px;background:#123c36;color:#a9ffe0;font-size:10px;font-weight:850;letter-spacing:.2px}
@media(max-width:850px){.surah-filters{justify-content:stretch;flex-direction:column}.surah-filters .surah-search{max-width:none;width:100%}}


/* Pengelompokan beranda berdasarkan target kelas */
.grade-group{margin:22px 0 30px;padding:17px;border:1px solid #294760;border-radius:20px;background:linear-gradient(145deg,#0c2033cc,#081727cc)}
.grade-group-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid #28445f}
.grade-group-title{min-width:0;flex:1}
.grade-kicker{display:inline-block;color:#83f0cd;font-size:10px;font-weight:900;letter-spacing:1.2px;margin-bottom:5px}
.grade-group-title h3{font-size:clamp(17px,2vw,22px);line-height:1.35;margin:0 0 8px;color:#f2f8ff}
.grade-group-title p{margin:5px 0;color:#b9cddd;font-size:13px;line-height:1.65}
.grade-group-title .grade-focus{color:#d8e8f3}
.grade-count{flex:0 0 145px;text-align:center;border:1px solid #2e665a;background:#10352f;border-radius:14px;padding:11px 9px;color:#b7ffe4}
.grade-count strong{display:block;font-size:27px;line-height:1.1;color:#83f0cd}
.grade-count span,.grade-count small{display:block;font-size:10px;line-height:1.45;margin-top:4px}
.grade-count small{color:#a5c8bf}
.grade-group .surah-list{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1200px){.grade-group .surah-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){.grade-group{padding:12px}.grade-group-head{flex-direction:column}.grade-count{display:flex;align-items:center;gap:9px;flex:0 0 auto;width:100%;text-align:left;padding:9px 12px}.grade-count strong{font-size:23px}.grade-count span,.grade-count small{margin:0}.grade-group .surah-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.grade-group{margin:15px 0 22px;padding:10px;border-radius:15px}.grade-group-title p{font-size:12px}.grade-count{flex-wrap:wrap}.grade-group .surah-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}}
@media(max-width:350px){.grade-group .surah-list{grid-template-columns:1fr}}


/* Perbaikan v2: wadah luar harus menumpuk kelompok secara vertikal, bukan menjadikan tiap kelompok kolom grid. */
#surahList.surah-list{display:block;width:100%;min-width:0}
#surahList > .grade-group{display:block;width:100%;box-sizing:border-box;min-width:0}
.grade-group .surah-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.grade-group .surah-card{min-width:0;overflow-wrap:anywhere}
.grade-group-head{min-width:0}
.grade-group-title{min-width:0}
.grade-count{box-sizing:border-box}
@media(max-width:1200px){.grade-group .surah-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.grade-group .surah-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grade-group .surah-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.grade-group-head{gap:12px}.grade-count{width:100%}}
@media(max-width:380px){.grade-group .surah-list{grid-template-columns:1fr}}