*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green-50: #f0fdf4;--green-100: #dcfce7;--green-200: #bbf7d0;--green-300: #86efac;--green-400: #4ade80;--green-500: #22c55e;--green-600: #16a34a;--green-700: #15803d;--green-800: #166534;--green-900: #14532d;--green-950: #052e16;--gold: #d4a843;--gold-light: #f0d78c;--cream: #fdf8ed;--white: #ffffff;--text: #1a1a2e;--text-light: #555;--shadow: 0 2px 12px rgba(0,0,0,.08);--shadow-lg: 0 8px 32px rgba(0,0,0,.12);--radius: 12px;--radius-sm: 8px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,var(--green-50) 0%,var(--cream) 50%,var(--green-100) 100%);color:var(--text);min-height:100vh;line-height:1.6}.app{display:flex;flex-direction:column;min-height:100vh}.header{background:linear-gradient(135deg,var(--green-900) 0%,var(--green-800) 50%,var(--green-700) 100%);color:var(--white);padding:0;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #15803d4d}.header-content{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.header-title h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.header-subtitle{font-size:.85rem;opacity:.85;margin-top:2px}.nav{display:flex;gap:6px}.nav-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--white);padding:10px 20px;border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s;font-family:inherit}.nav-btn:hover{background:#fff3;transform:translateY(-1px)}.nav-btn.active{background:var(--gold);border-color:var(--gold);color:var(--green-950);font-weight:600;box-shadow:0 2px 8px #d4a8434d}.main{flex:1;max-width:1200px;margin:0 auto;padding:32px 24px;width:100%}.page{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-title{font-size:1.75rem;font-weight:700;color:var(--green-800);margin-bottom:24px;text-align:center}.section{margin-bottom:48px}.section-title{font-size:1.35rem;font-weight:700;color:var(--green-800);margin-bottom:20px;padding-bottom:8px;border-bottom:3px solid var(--green-300);display:inline-block}.hero{background:linear-gradient(135deg,var(--green-800),var(--green-700));border-radius:var(--radius);padding:60px 40px;margin-bottom:48px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}.hero:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(212,168,67,.1) 0%,transparent 60%);animation:shimmer 8s ease-in-out infinite}@keyframes shimmer{0%,to{transform:rotate(0)}50%{transform:rotate(180deg)}}.hero-overlay{position:relative;z-index:1}.hero h2{font-family:Amiri,serif;font-size:2rem;color:var(--gold-light);margin-bottom:16px}.hero p{font-size:1.15rem;color:#ffffffe6;max-width:700px;margin:0 auto;line-height:1.8}.verses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:32px}.verse-card,.hadits-card{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border:1px solid var(--green-100);transition:transform .2s,box-shadow .2s}.verse-card:hover,.hadits-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--green-300)}.arabic{font-family:Amiri,serif;font-size:1.5rem;line-height:2;text-align:right;direction:rtl;color:var(--green-900);margin-bottom:12px}.arti{font-size:.95rem;color:var(--text);margin-bottom:8px;line-height:1.7}.surah,.sumber{font-size:.85rem;color:var(--green-600);font-style:italic}.hadits-list{display:flex;flex-direction:column;gap:16px}.slideshow-container{position:relative;max-width:900px;margin:0 auto 20px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--green-900)}.slide-wrapper{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}.slide-img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s ease}.slide-btn{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;color:#fff;border:none;padding:16px 20px;cursor:pointer;font-size:1.5rem;transition:background .2s;z-index:10;border-radius:0}.slide-btn:hover{background:#000c}.slide-btn.prev{left:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0}.slide-btn.next{right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.slide-dots{text-align:center;margin-bottom:12px}.dot{display:inline-block;width:12px;height:12px;margin:0 5px;background:var(--green-300);border-radius:50%;cursor:pointer;transition:all .2s}.dot.active{background:var(--green-700);transform:scale(1.3)}.slide-counter{text-align:center;color:var(--text-light);font-size:.9rem}.table-responsive{overflow-x:auto;margin-bottom:20px;border-radius:var(--radius);box-shadow:var(--shadow)}.table{width:100%;border-collapse:collapse;background:var(--white);font-size:.9rem}.table th{background:linear-gradient(135deg,var(--green-800),var(--green-700));color:#fff;padding:12px 16px;text-align:left;font-weight:600;white-space:nowrap}.table td{padding:10px 16px;border-bottom:1px solid var(--green-100)}.table tbody tr:hover{background:var(--green-50)}.amount{text-align:right;font-variant-numeric:tabular-nums}.income{color:var(--green-700)}.expense{color:#dc2626}.saldo-row{background:linear-gradient(135deg,var(--green-100),var(--green-200))}.saldo-row td{font-weight:700;border-top:2px solid var(--green-600)}.saldo-badge{text-align:center;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--green-950);padding:16px 24px;border-radius:var(--radius);font-size:1.1rem;font-weight:600;box-shadow:var(--shadow)}.empty-state{text-align:center;padding:80px 20px;color:var(--text-light)}.empty-state code{background:var(--green-100);padding:2px 8px;border-radius:4px;font-size:.9rem}.footer{background:var(--green-900);color:#ffffffb3;text-align:center;padding:20px;font-size:.85rem}@media(max-width:768px){.header-content{flex-direction:column;text-align:center}.nav{width:100%;justify-content:center}.nav-btn{flex:1;text-align:center;padding:10px 12px;font-size:.82rem}.header-title h1{font-size:1.2rem}.hero{padding:40px 20px}.hero h2{font-size:1.5rem}.verses-grid{grid-template-columns:1fr}.slide-wrapper{aspect-ratio:3/2}.slide-btn{padding:12px 14px;font-size:1.2rem}}@media(max-width:480px){.main{padding:20px 12px}.table{font-size:.8rem}.table th,.table td{padding:8px 10px}}