* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: radial-gradient(circle at 10% 20%, #0A1128, #030618);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #EEF2FF;
  line-height: 1.5;
  min-height: 100vh;
  padding: 0 0 2rem 0;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(210, 180, 140, 0.5); border-radius: 10px; }

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

.app-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1rem 0 0.5rem;
  border-bottom: 1px solid rgba(210, 180, 140, 0.3);
}
.app-header h1 {
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, #F3E7C0, #C5A86A);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.app-header p { font-size: 0.8rem; color: #A7B6D9; margin-top: 6px; }

.search-box { margin-bottom: 1.8rem; }
.search-box input {
  width: 100%;
  background: rgba(15, 25, 45, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(210, 180, 140, 0.4);
  border-radius: 60px;
  padding: 14px 20px;
  font-size: 1rem;
  color: #F0F3FA;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  outline: none;
}
.search-box input:focus {
  border-color: #D4AF6A;
  box-shadow: 0 0 12px rgba(212, 175, 106, 0.2);
}
.search-box input::placeholder { color: #7B8BB0; }

.surah-grid { display: flex; flex-direction: column; gap: 12px; }
.surah-card {
  background: rgba(12, 22, 45, 0.65);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(212, 175, 106, 0.25);
  padding: 1rem 1.2rem;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  touch-action: manipulation;
}
.surah-card:active { transform: scale(0.98); background: rgba(20, 35, 65, 0.8); border-color: #C5A86A; }
.surah-info { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.surah-number { font-size: 0.7rem; font-weight: 600; color: #D4AF6A; letter-spacing: 1px; }
.surah-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.arabic-name { font-family: 'Amiri', serif; font-size: 1.4rem; font-weight: 600; color: #F9F6E0; }
.latin-name { font-weight: 600; font-size: 1rem; color: #CCDDFF; }
.surah-meta { display: flex; gap: 12px; font-size: 0.7rem; color: #8F9FC0; }
.surah-badge {
  background: rgba(212, 175, 106, 0.2);
  padding: 4px 12px;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #E6D5A8;
  white-space: nowrap;
}

.detail-view { animation: fadeIn 0.2s ease; }
.detail-header {
  background: rgba(5, 12, 28, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 32px;
  padding: 1.5rem 1.2rem;
  margin-bottom: 1.8rem;
  border: 1px solid rgba(212, 175, 106, 0.4);
  text-align: center;
}

/* Tombol biasa (bukan neumorphism) */
.back-btn,
.audio-btn,
.btn-toggle-tafsir,
#retryListBtn,
#retryDetailBtn {
  background: rgba(212, 175, 106, 0.15);
  border: none;
  border-radius: 40px;
  padding: 10px 18px;
  min-height: 36px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #F3E7C0;
  cursor: pointer;
  transition: 0.2s;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.back-btn:active,
.audio-btn:active,
.btn-toggle-tafsir:active,
#retryListBtn:active,
#retryDetailBtn:active {
  background: rgba(212, 175, 106, 0.4);
  transform: scale(0.96);
}
.back-btn svg { stroke: #F3E7C0; }

/* ===== AUDIO PLAYER (RAPI & SEDERHANA) ===== */
.audio-player {
  margin-top: 1.2rem;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 60px;
  padding: 12px 16px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(212, 175, 106, 0.2);
}

.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Tombol Play/Pause Neumorphism Bulat */
.play-btn {
  background: #0e1a2b;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #F3E7C0;
  cursor: pointer;
  box-shadow: 5px 5px 12px #040914, -5px -5px 12px #16263f;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.play-btn:active {
  box-shadow: inset 5px 5px 12px #040914, inset -5px -5px 12px #16263f;
  transform: scale(0.96);
  color: #D4AF6A;
}

.time-slider-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.current-time, .duration-time {
  font-size: 0.75rem;
  color: #D4AF6A;
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.seek-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(212, 175, 106, 0.3);
  border-radius: 10px;
  outline: none;
}
.seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #D4AF6A;
  border-radius: 50%;
  box-shadow: 0 0 8px #D4AF6A;
  cursor: pointer;
}
.seek-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #D4AF6A;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.qari-row {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* Select Qari (Neumorphism) */
.qari-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 175, 106, 0.1);
  padding: 4px 12px;
  border-radius: 40px;
  backdrop-filter: blur(4px);
}
.qari-selector label {
  font-size: 0.75rem;
  color: #D4AF6A;
}
.qari-selector select {
  background: #0e1a2b;
  border: none;
  border-radius: 40px;
  padding: 8px 14px;
  font-size: 0.75rem;
  color: #F3E7C0;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  box-shadow: inset 3px 3px 8px #040914, inset -3px -3px 8px #16263f;
}

.now-playing {
  font-size: 0.7rem;
  color: #D4AF6A;
  margin-top: 10px;
  text-align: center;
}

.surah-title-arabic {
  font-family: 'Amiri', serif;
  font-size: 2.3rem;
  margin: 0.5rem 0;
  color: #FFFAEC;
  direction: rtl;
  text-align: center;
  line-height: 1.6;
}
.surah-title-latin { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.3px; }
.surah-desc {
  font-size: 0.8rem;
  color: #B9CAF0;
  margin-top: 12px;
  border-top: 1px dashed rgba(212,175,106,0.3);
  padding-top: 10px;
}

.ayat-list { display: flex; flex-direction: column; gap: 20px; margin-top: 1rem; padding-bottom: 3rem; }
.ayat-card {
  background: rgba(8, 18, 36, 0.65);
  backdrop-filter: blur(8px);
  border-radius: 28px;
  border: 1px solid rgba(212, 175, 106, 0.25);
  padding: 1.2rem;
  overflow: hidden;
}
.ayat-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #D4AF6A, #A67C2E);
  width: 34px;
  height: 34px;
  border-radius: 40px;
  font-weight: bold;
  font-size: 0.9rem;
  color: #0A0F1F;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.arabic-text {
  font-family: 'Amiri', 'Scheherazade New', 'Lateef', 'Noto Naskh Arabic', serif;
  font-size: 1.8rem;
  line-height: 2.2;
  text-align: right;
  direction: rtl;
  unicode-bidi: embed;
  margin: 1rem 0;
  color: #FEF7E0;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
  word-spacing: 0.15em;
  font-weight: 500;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.latin-text {
  font-size: 0.85rem;
  color: #B2C4F0;
  font-style: italic;
  border-left: 2px solid #D4AF6A;
  padding-left: 12px;
  margin: 8px 0;
}
.translation {
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 10px 12px;
  border-radius: 20px;
  margin: 8px 0;
  color: #E2ECFF;
}
.tafsir-wrapper { margin-top: 8px; }
.tafsir-preview, .tafsir-full {
  font-size: 0.8rem;
  color: #BCC9F0;
  background: rgba(212, 175, 106, 0.08);
  padding: 10px 12px;
  border-radius: 20px;
  border-left: 3px solid #C5A86A;
}
.tafsir-full { margin-top: 8px; display: none; }
.tafsir-full.show { display: block; }
.tafsir-preview.hide-preview { display: none; }

.loading-spinner { text-align: center; padding: 3rem; color: #D4AF6A; }
.error-msg { background: rgba(255,80,80,0.2); padding: 1rem; border-radius: 28px; text-align: center; color: #FFB4A2; }
.hidden { display: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }

@media (max-width: 550px) {
  .container { padding: 0.8rem; }
  .ayat-card { padding: 1rem; }
  .surah-card { padding: 0.8rem 1rem; }
  .surah-badge { font-size: 0.65rem; padding: 3px 8px; }
  .arabic-text { font-size: 1.5rem; line-height: 2; word-spacing: 0.1em; }
  .surah-title-arabic { font-size: 1.8rem; }
  .player-row { gap: 8px; }
  .play-btn { width: 42px; height: 42px; font-size: 1.2rem; }
  .back-btn svg { width: 16px; height: 16px; }
}