@font-face{
font-family:"Amiri Quran Local";
src:url("/assets/fonts/amiri-1.003/AmiriQuran.ttf") format("truetype");
font-weight:400;
font-style:normal;
font-display:swap;
}
*{box-sizing:border-box}
body{
margin:0;background:#f6f9f6;color:#173c30;
font-family:system-ui,-apple-system,sans-serif;
}
main{max-width:850px;margin:auto;padding:18px 16px 80px}
a{color:#146b50;text-decoration:none}
.top{display:flex;justify-content:space-between;
align-items:center;gap:12px;font-size:14px}
.hero{background:#e8f5ec;border-radius:22px;
padding:25px 16px;margin:22px 0;text-align:center}
.hero h1{font-size:28px;margin:5px 0 12px}
#surah-arabic{font-family:"Amiri Quran Local",serif;
font-size:30px;margin:8px}
.toolbar{display:flex;justify-content:space-between;
gap:12px;flex-wrap:wrap;margin-bottom:18px}
.modes,.sizes{display:flex;gap:8px}
button{font:inherit;padding:12px 15px;border-radius:12px;
border:1px solid #cadbd1;background:#fff;color:#173c30;
cursor:pointer}
button[aria-pressed="true"]{background:#146b50;color:white}
.ayah{background:#fff;border:1px solid #e3ebe5;
border-radius:18px;padding:16px 20px;margin:12px 0}
.ayah-number{color:#146b50;font-weight:700;font-size:14px}
.arabic{font-family:"Amiri Quran Local",serif;
font-size:36px;line-height:2;text-align:right;
direction:rtl;overflow-wrap:normal;word-break:normal}
.mushaf{background:white;border:1px solid #e3ebe5;
border-radius:18px;padding:22px}
.mushaf .arabic{text-align:justify;text-align-last:right}
.notice{color:#64766d}
.navigation{display:flex;justify-content:space-between;
gap:15px;margin:28px 0}
footer{font-size:13px;color:#64766d;line-height:1.8}
@media(max-width:600px){
main{padding:14px 12px 60px}
.hero{padding:20px 12px}
.hero h1{font-size:25px}
.ayah{padding:14px 16px}
.arabic{font-size:30px;line-height:2.1}
.toolbar{gap:10px}
}


/* R2-D47 — Tampilan bacaan responsif */
.ayah {
  padding: 12px 18px;
  margin: 10px 0;
}

.ayah .arabic {
  margin: 6px 0 2px;
  line-height: 1.9;
}

.ayah-number {
  font-weight: 700;
  margin-bottom: 2px;
}

.mushaf {
  padding: 24px;
}

.mushaf .arabic {
  margin: 0;
  line-height: 2.15;
  text-align: justify;
  text-align-last: right;
}

.ayah-marker {
  display: inline;
  white-space: nowrap;
  color: #146b50;
}

.navigation a {
  padding: 9px 0;
}

@media (max-width: 600px) {
  .ayah {
    padding: 12px 14px;
  }

  .ayah .arabic {
    line-height: 2;
  }

  .mushaf {
    padding: 16px;
  }

  .mushaf .arabic {
    line-height: 2.2;
  }
}


/* R2-D67 — Fitur Lanjut Baca dan Penanda Ayat */
.reading-features {
  background:#edf6f0;
  border:1px solid #d2e5d8;
  border-radius:16px;
  padding:14px 16px;
  margin:0 0 18px;
  font-size:14px;
}
.reading-features strong {display:block;margin-bottom:9px}
.reading-features .resume-link {
  display:block;margin:7px 0 12px;
}
.reading-features details {margin-top:8px}
.reading-features summary {cursor:pointer;color:#146b50}
.reading-message {font-size:13px;color:#64766d;margin-bottom:0}
.ayah-actions {
  display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;
}
.ayah-actions button,.bookmark-row button {
  font-size:12px;padding:6px 9px;border-radius:9px;
}
.bookmark-row {
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 0;border-bottom:1px solid #d2e5d8;
}
.bookmarks-list {padding-top:8px}


/* R2-D68 — Pencarian Surah */
.surah-search {
  padding:14px 16px;
  background:#fff;
  border:1px solid #e3ebe5;
  border-radius:16px;
  margin-bottom:18px;
}
.surah-search label {
  display:block;
  color:#146b50;
  font-weight:700;
  margin-bottom:9px;
}
.surah-search input {
  width:100%;
  padding:12px;
  border:1px solid #cadbd1;
  border-radius:10px;
  font:inherit;
  font-size:16px;
}
.surah-search-results a {
  display:block;
  padding:11px 6px;
  border-bottom:1px solid #e3ebe5;
  overflow-wrap:anywhere;
}
.surah-search-results p {
  color:#64766d;
  font-size:14px;
}


/* R2-D69 — Navigasi 30 Juz */
.juz-navigation {
  margin:0 0 18px;
  padding:14px 16px;
  background:#fff;
  border:1px solid #e3ebe5;
  border-radius:16px;
}
.juz-navigation summary {
  color:#146b50;
  font-weight:700;
  cursor:pointer;
}
.juz-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:12px;
}
.juz-item {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px;
  border:1px solid #d2e5d8;
  border-radius:11px;
  background:#f6f9f6;
  min-width:0;
}
.juz-item small {
  font-size:11px;
  line-height:1.5;
  color:#64766d;
  overflow-wrap:anywhere;
}
.juz-note {
  font-size:12px;
  color:#64766d;
}
@media(max-width:600px) {
  .juz-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* R2-D70 — Navigasi interaktif dalam Mode Mushaf */
.mushaf .ayah-marker {
  cursor:pointer;
  border-radius:6px;
}
.mushaf .ayah-marker:focus-visible {
  outline:2px solid #146b50;
  outline-offset:3px;
}
.mushaf .ayah-marker.is-bookmarked {
  color:#a76d12;
}
.mushaf-actions-r2d70 {
  position:fixed;
  z-index:1000;
  bottom:18px;
  left:12px;
  right:12px;
  max-width:540px;
  margin:auto;
  padding:13px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  background:#edf6f0;
  border:2px solid #146b50;
  border-radius:15px;
  box-shadow:0 8px 30px #173c3033;
}
.mushaf-actions-r2d70 strong {
  flex-basis:100%;
}
.mushaf-actions-r2d70 button {
  font-size:13px;
  padding:10px 12px;
}


/* R2-D72 — Pergi ke Ayat */
.go-ayah {
  background:#fff;
  border:1px solid #e3ebe5;
  border-radius:16px;
  padding:14px 16px;
  margin:0 0 18px;
}
.go-ayah-form {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.go-ayah-form label {
  flex-basis:100%;
  color:#146b50;
  font-weight:700;
}
.go-ayah-form input {
  min-width:0;
  width:140px;
  flex:1;
  padding:12px;
  border:1px solid #cadbd1;
  border-radius:10px;
  font:inherit;
  font-size:16px;
}
.go-ayah-form button {
  background:#146b50;
  color:white;
}
.go-ayah-feedback {
  font-size:13px;
  color:#64766d;
  margin:7px 0 0;
}
.go-ayah-highlight {
  outline:3px solid #d4a72c;
  outline-offset:3px;
  border-radius:6px;
}


/* R2-D73 — Penyempurnaan tampilan pembaca HP */
html {
  scroll-behavior:smooth;
  scroll-padding-top:20px;
}
body {
  -webkit-text-size-adjust:100%;
}
.top {
  min-height:42px;
}
.top span {
  font-weight:800;
  letter-spacing:.3px;
}
.toolbar button {
  min-height:44px;
  touch-action:manipulation;
}
.reading-features,
.surah-search,
.juz-navigation,
.go-ayah {
  scroll-margin-top:16px;
}
.ayah,
.mushaf {
  scroll-margin-top:24px;
}
.ayah .arabic,
.mushaf .arabic {
  max-width:100%;
}
.ayah-actions button,
.mushaf-actions-r2d70 button {
  min-height:40px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline:2px solid #146b50;
  outline-offset:3px;
}
@media (max-width:600px) {
  main {
    max-width:100%;
    padding:12px 12px 72px;
  }
  .hero {
    margin:14px 0 16px;
    border-radius:17px;
  }
  .toolbar {
    gap:8px;
  }
  .modes,
  .sizes {
    gap:6px;
  }
  .toolbar button {
    padding:11px 12px;
  }
  .ayah {
    border-radius:14px;
    margin:9px 0;
  }
  .mushaf {
    border-radius:14px;
  }
  .navigation {
    flex-wrap:wrap;
    gap:12px;
  }
  .navigation a {
    min-height:44px;
  }
  .mushaf-actions-r2d70 {
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
  }
}


/* R2-D74 — Mode Fokus dan Kembali ke Atas */
.reading-focus-actions {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:-4px 0 18px;
}
.reading-focus-actions button {
  min-height:44px;
  font-size:14px;
  padding:10px 14px;
}
.reading-focus-actions button[aria-pressed="true"] {
  background:#146b50;
  color:white;
}
.reading-back-top {
  margin-left:auto;
}
.reading-focus-active .hero,
.reading-focus-active .surah-search,
.reading-focus-active .juz-navigation,
.reading-focus-active .go-ayah,
.reading-focus-active .reading-features,
.reading-focus-active .navigation,
.reading-focus-active footer {
  display:none;
}
.reading-focus-active .toolbar {
  margin-top:16px;
}
.reading-focus-active #reader-content {
  margin-top:12px;
}
@media(max-width:600px) {
  .reading-focus-actions {
    margin-bottom:12px;
  }
  .reading-focus-actions button {
    padding:10px 12px;
  }
}


/* R2-D75 — Navigasi Ayat */
.ayah-nav-r2d75 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:9px;
  padding:12px;
  margin:0 0 14px;
  background:#edf6f0;
  border:1px solid #d2e5d8;
  border-radius:14px;
}
.ayah-nav-r2d75 button {
  font-size:13px;
  min-height:42px;
  padding:9px 12px;
}
.ayah-nav-r2d75 button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.ayah-nav-position {
  color:#146b50;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
@media(max-width:600px) {
  .ayah-nav-r2d75 {
    justify-content:center;
  }
  .ayah-nav-r2d75 button {
    flex:1;
  }
  .ayah-nav-position {
    order:-1;
    flex-basis:100%;
  }
}


/* R2-D76 — Panel alat navigasi HP */
.reading-tools-r2d76 {
  margin:0 0 18px;
  background:#fff;
  border:1px solid #d2e5d8;
  border-radius:16px;
  overflow:hidden;
}
.reading-tools-r2d76 > summary {
  padding:15px 16px;
  cursor:pointer;
  color:#146b50;
  font-weight:700;
  list-style-position:inside;
}
.reading-tools-r2d76[open] > summary {
  border-bottom:1px solid #e3ebe5;
}
.reading-tools-inside-r2d76 {
  padding:12px;
}
.reading-tools-inside-r2d76 > section {
  margin:0 0 12px;
}
.reading-tools-inside-r2d76 > section:last-child {
  margin-bottom:0;
}
.reading-focus-active .reading-tools-r2d76 {
  display:none;
}
@media(max-width:600px) {
  .reading-tools-r2d76 > summary {
    padding:14px 12px;
    font-size:14px;
  }
  .reading-tools-inside-r2d76 {
    padding:8px;
  }
}


/* R2-D77 — Bagikan Tautan Ayat */
.share-ayah-r2d77 {
  min-height:40px;
  padding:8px 11px;
  font-size:12px;
  border:1px solid #b6d8c4;
  border-radius:9px;
  background:#edf6f0;
  color:#146b50;
  cursor:pointer;
}
.share-ayah-r2d77:focus-visible {
  outline:2px solid #146b50;
  outline-offset:2px;
}
.mushaf-actions-r2d70 .share-ayah-r2d77 {
  min-height:40px;
  font-size:13px;
}


/* R2-D81 — Pemutar Audio Murattal */
.audio-player-r2d81 {
  background:#fff;
  border:1px solid #d2e5d8;
  padding:16px;
  border-radius:16px;
  margin:0 0 18px;
}
.audio-status-r2d81 {
  color:#64766d;
  font-size:13px;
  line-height:1.6;
}
.audio-controls-r2d81 {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:10px 0;
}
.audio-controls-r2d81 select,
.audio-controls-r2d81 input {
  min-width:0;
  padding:10px;
  border:1px solid #cadbd1;
  border-radius:10px;
  font:inherit;
}
.audio-controls-r2d81 select { flex:2; }
.audio-controls-r2d81 input { width:85px; flex:1; }
.audio-controls-r2d81 button { flex:1; }
.audio-player-r2d81 audio {
  width:100%;
  display:block;
}
.reading-focus-active .audio-player-r2d81 {
  display:none;
}