.dzikir-page{background-color:var(--color-bg,#f8faf8);min-height:100vh;color:var(--color-ink,#17352a);font-family:var(--font-body,"Poppins", sans-serif);padding-bottom:90px}.dzikir-container{max-width:800px;margin:0 auto;padding:0 16px}.dzikir-hero{color:#fff;background:linear-gradient(145deg,#07532d 0%,#0b6b3a 55%,#147a46 100%);border-radius:0 0 28px 28px;margin-bottom:24px;padding:32px 20px 36px;position:relative;overflow:hidden;box-shadow:0 12px 32px #0b6b3a26}.dzikir-hero-bg{opacity:.22;mix-blend-mode:overlay;pointer-events:none;background-image:url(/assets/brand/bg-dzikir-header.webp);background-position:top;background-size:cover;position:absolute;inset:0}.dzikir-hero-content{z-index:1;text-align:center;position:relative}.dzikir-eyebrow{letter-spacing:2px;text-transform:uppercase;color:var(--color-gold,#f4b400);background:#f4b40026;border:1px solid #f4b4004d;border-radius:20px;align-items:center;gap:6px;margin-bottom:12px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-flex}.dzikir-hero h1{font-family:var(--font-display,"Playfair Display", serif);color:#fff;margin:0 0 8px;font-size:26px;font-weight:700;line-height:1.3}.dzikir-hero-subtitle{color:#ffffffe6;max-width:460px;margin:0 auto 16px;font-size:13.5px;line-height:1.5}.dzikir-quote-card{backdrop-filter:blur(10px);color:#fff9e6;text-align:center;background:#ffffff1f;border:1px solid #fff3;border-radius:16px;margin-top:14px;padding:12px 16px;font-size:12.5px;line-height:1.55}.dzikir-quote-ref{color:#fffc;margin-top:4px;font-size:11px;font-weight:600;display:block}.section-title-wrap{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.section-h2{color:var(--color-ink,#17352a);margin:0;font-size:17px;font-weight:700}.moment-cards-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px;display:grid}@media (width<=480px){.moment-cards-grid{grid-template-columns:repeat(3,1fr);gap:8px}}.moment-card{text-align:center;border:1.5px solid var(--color-border,#e5ece7);color:var(--color-ink,#17352a);background:#fff;border-radius:20px;flex-direction:column;justify-content:space-between;align-items:center;min-height:140px;padding:18px 8px 14px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;box-shadow:0 4px 14px #0f1e140a}.moment-card:hover{border-color:var(--color-primary,#0b6b3a);transform:translateY(-3px);box-shadow:0 8px 24px #0b6b3a1f}.moment-icon-wrap{border-radius:16px;justify-content:center;align-items:center;width:46px;height:46px;margin-bottom:8px;font-size:22px;display:flex}.moment-icon-pagi{color:#d98200;background:#fff5d6}.moment-icon-shalat{color:#0b6b3a;background:#e8f3ec}.moment-icon-petang{color:#c8502b;background:#fdf0ed}.moment-title{margin:0 0 2px;font-size:13.5px;font-weight:700}.moment-desc{color:var(--color-muted,#7a8983);margin:0 0 8px;font-size:10.5px;line-height:1.35}.moment-arrow-btn{width:26px;height:26px;color:var(--color-primary,#0b6b3a);background:#f2f6f3;border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:flex}.populer-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px;display:grid}.populer-card{border:1px solid var(--color-border,#e5ece7);color:var(--color-ink,#17352a);background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;text-decoration:none;transition:all .15s;display:flex}.populer-card:hover{border-color:var(--color-primary,#0b6b3a);transform:translateY(-2px)}.populer-icon{background:var(--color-primary-soft,#e8f3ec);width:40px;height:40px;color:var(--color-primary,#0b6b3a);border-radius:14px;justify-content:center;align-items:center;font-size:18px;display:flex}.populer-label{text-align:center;font-size:12px;font-weight:600}.catalog-nav-tabs{border-bottom:1px solid var(--color-border,#e5ece7);background:#fff;border-radius:14px;margin-bottom:14px;padding:4px;display:flex}.catalog-tab-btn{text-align:center;color:var(--color-muted,#7a8983);cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;padding:8px 4px;font-size:12.5px;font-weight:600;transition:all .15s}.catalog-tab-btn.active{background:var(--color-primary,#0b6b3a);color:#fff}.catalog-list{flex-direction:column;gap:8px;margin-bottom:28px;display:flex}.catalog-item-row{border:1px solid var(--color-border,#e5ece7);color:var(--color-ink,#17352a);background:#fff;border-radius:16px;justify-content:space-between;align-items:center;padding:14px 16px;text-decoration:none;transition:all .15s;display:flex}.catalog-item-row:hover{border-color:var(--color-primary,#0b6b3a);transform:translate(2px);box-shadow:0 4px 16px #0b6b3a14}.catalog-row-left{align-items:center;gap:12px;display:flex}.catalog-item-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.catalog-item-title{margin:0 0 2px;font-size:14.5px;font-weight:700}.catalog-item-sub{color:var(--color-muted,#7a8983);margin:0;font-size:11.5px}.catalog-row-right{color:#b5c0b9}.dzikir-top-bar{z-index:40;backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border,#e5ece7);background:#fffffff2;padding:10px 16px;position:sticky;top:0}.dzikir-top-bar-inner{justify-content:space-between;align-items:center;max-width:800px;margin:0 auto;display:flex}.dzikir-back-btn{color:var(--color-ink,#17352a);align-items:center;gap:6px;font-size:14px;font-weight:600;text-decoration:none;display:flex}.dzikir-hero-banner{color:#fff;background:linear-gradient(135deg,#07532d,#0b6b3a);border-radius:20px;flex-direction:column;justify-content:center;height:160px;margin-bottom:18px;padding:20px;display:flex;position:relative;overflow:hidden}.dzikir-banner-bg{opacity:.35;background-image:url(/assets/brand/bg-dzikir-header.webp);background-position:50%;background-size:cover;position:absolute;inset:0}.dzikir-banner-content{z-index:1;position:relative}.dzikir-banner-h1{font-family:var(--font-display,"Playfair Display", serif);margin:0 0 6px;font-size:24px;font-weight:700}.dzikir-banner-sub{color:#ffffffeb;max-width:460px;margin:0;font-size:12.5px;line-height:1.45}.dzikir-detail-tabs{border-bottom:1px solid var(--color-border,#e5ece7);margin-bottom:18px;display:flex}.dzikir-detail-tab{text-align:center;color:var(--color-muted,#7a8983);cursor:pointer;border-bottom:2px solid #0000;flex:1;padding:10px 4px;font-size:13px;font-weight:600;text-decoration:none}.dzikir-detail-tab.active{color:var(--color-primary,#0b6b3a);border-bottom-color:var(--color-primary,#0b6b3a)}.dzikir-info-card{border:1px solid var(--color-border,#e5ece7);background:#fff;border-radius:16px;gap:12px;margin-bottom:12px;padding:14px 16px;display:flex}.dzikir-info-icon{flex-shrink:0;font-size:20px}.dzikir-info-title{color:var(--color-primary,#0b6b3a);margin:0 0 3px;font-size:13px;font-weight:700}.dzikir-info-text{color:var(--color-ink,#17352a);margin:0;font-size:12.5px;line-height:1.5}.btn-start-guided{background:var(--color-primary,#0b6b3a);color:#fff;cursor:pointer;border:none;border-radius:16px;justify-content:center;align-items:center;gap:8px;width:100%;margin:18px 0 24px;padding:14px;font-size:14.5px;font-weight:600;text-decoration:none;transition:background .2s,transform .1s;display:flex;box-shadow:0 6px 20px #0b6b3a2e}.btn-start-guided:hover{background:var(--color-primary-dark,#07532d);transform:translateY(-1px)}.preview-item-row{border:1px solid var(--color-border,#e5ece7);background:#fff;border-radius:14px;align-items:flex-start;gap:12px;margin-bottom:8px;padding:12px 14px;display:flex}.preview-item-num{width:26px;height:26px;color:var(--color-primary,#0b6b3a);background:#f2f6f3;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.preview-item-name{margin:0 0 2px;font-size:13.5px;font-weight:600}.preview-item-target{color:var(--color-muted,#7a8983);margin:0;font-size:11.5px}.guided-step-wrap{border:1.5px solid var(--color-border,#e5ece7);background:#fff;border-radius:22px;margin-bottom:20px;padding:24px 20px;box-shadow:0 6px 24px #0f1e140d}.guided-progress-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.guided-step-counter{color:var(--color-primary,#0b6b3a);font-size:13px;font-weight:700}.guided-progress-bar-bg{background:#e8f0ea;border-radius:6px;width:100%;height:6px;margin-bottom:20px;overflow:hidden}.guided-progress-bar-fill{background:linear-gradient(90deg,#0b6b3a,#28a745);border-radius:6px;height:100%;transition:width .3s}.guided-arabic-text{font-family:var(--font-arabic,"Noto Naskh Arabic", serif);text-align:center;color:var(--color-ink,#17352a);direction:rtl;margin:16px 0 14px;font-size:28px;line-height:2.2}.guided-transliteration{color:#4b6356;text-align:center;margin-bottom:10px;font-size:13.5px;font-style:italic;line-height:1.5}.guided-translation{text-align:center;color:var(--color-ink,#17352a);border-bottom:1px dashed var(--color-border,#e5ece7);margin-bottom:18px;padding-bottom:16px;font-size:14px;line-height:1.6}.guided-keutamaan-box{color:#5c4a1e;background:linear-gradient(135deg,#fffdf8,#fff9e6);border:1px solid #f1e5c5;border-radius:14px;gap:10px;margin-bottom:20px;padding:12px 16px;font-size:12.5px;line-height:1.55;display:flex}.guided-counter-container{flex-direction:column;align-items:center;gap:12px;margin:18px 0;display:flex}.counter-stepper-row{align-items:center;gap:14px;display:flex}.counter-stepper-label{color:var(--color-muted,#7a8983);font-size:13.5px;font-weight:600}.stepper-ctrl-btn{border:1px solid var(--color-border,#e5ece7);width:36px;height:36px;color:var(--color-ink,#17352a);cursor:pointer;user-select:none;background:#f8faf8;border-radius:10px;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex}.counter-current-num{color:var(--color-primary,#0b6b3a);text-align:center;min-width:30px;font-size:20px;font-weight:800}.btn-big-hit-count{background:var(--color-primary,#0b6b3a);color:#fff;cursor:pointer;user-select:none;border:none;border-radius:18px;justify-content:center;align-items:center;gap:8px;width:100%;height:60px;font-size:16px;font-weight:700;transition:transform .1s,background .15s;display:flex}.btn-big-hit-count:active{background:var(--color-primary-dark,#07532d);transform:scale(.97)}.guided-bottom-nav{justify-content:space-between;align-items:center;margin-top:18px;display:flex}.btn-guided-nav{color:var(--color-ink,#17352a);border:1px solid var(--color-border,#e5ece7);cursor:pointer;background:#f2f6f3;border-radius:12px;align-items:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.tasbih-hero-wrap{text-align:center;padding:16px 0}.tasbih-name{color:var(--color-muted,#7a8983);margin-bottom:6px;font-size:16px;font-weight:700}.tasbih-arabic{font-family:var(--font-arabic,"Noto Naskh Arabic", serif);color:var(--color-primary,#0b6b3a);direction:rtl;margin-bottom:4px;font-size:32px}.tasbih-meaning{color:var(--color-muted,#7a8983);margin-bottom:24px;font-size:13.5px}.circular-tasbih-wrap{cursor:pointer;user-select:none;justify-content:center;align-items:center;width:220px;height:220px;margin:0 auto 24px;display:flex;position:relative}.circular-tasbih-svg{width:100%;height:100%;transform:rotate(-90deg)}.circle-bg{fill:none;stroke:#e8f0ea;stroke-width:12px}.circle-progress{fill:none;stroke:var(--color-primary,#0b6b3a);stroke-width:12px;stroke-linecap:round;transition:stroke-dashoffset .15s}.tasbih-center-text{text-align:center;pointer-events:none;position:absolute}.tasbih-count-val{color:var(--color-ink,#17352a);font-size:48px;font-weight:800;line-height:1}.tasbih-target-val{color:var(--color-muted,#7a8983);margin-top:4px;font-size:16px;font-weight:600}.tasbih-controls-row{justify-content:center;align-items:center;gap:16px;margin-bottom:20px;display:flex}.tasbih-ctrl-btn{border:1.5px solid var(--color-border,#e5ece7);width:48px;height:48px;color:var(--color-ink,#17352a);cursor:pointer;background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex;box-shadow:0 2px 8px #0f1e140a}.tasbih-reset-btn{border:1px solid var(--color-border,#e5ece7);color:var(--color-muted,#7a8983);cursor:pointer;background:0 0;border-radius:12px;align-items:center;gap:6px;margin:0 auto;padding:8px 16px;font-size:13px;display:inline-flex}.tasbih-tips-card{color:#5c4a1e;background:#fffdf8;border:1px solid #f1e5c5;border-radius:16px;gap:10px;margin-top:20px;padding:14px 16px;font-size:12.5px;display:flex}.completion-card{text-align:center;background:#fff;border:1.5px solid #dceade;border-radius:24px;margin-bottom:24px;padding:32px 20px;box-shadow:0 10px 30px #0b6b3a14}.completion-check-icon{color:#0b6b3a;background:#e8f3ec;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:32px;display:flex}.completion-h2{font-family:var(--font-display,"Playfair Display", serif);color:var(--color-ink,#17352a);margin:0 0 6px;font-size:22px;font-weight:700}.completion-sub{color:var(--color-muted,#7a8983);margin:0 0 20px;font-size:13.5px}.completion-stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;display:grid}.completion-stat-box{border:1px solid var(--color-border,#e5ece7);background:#f8faf8;border-radius:14px;padding:12px}.completion-stat-num{color:var(--color-primary,#0b6b3a);font-size:18px;font-weight:700}.completion-stat-lbl{color:var(--color-muted,#7a8983);font-size:11px}.completion-actions{flex-direction:column;gap:10px;display:flex}.btn-share-wa{color:#fff;background:#25d366;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:14px;font-weight:600;text-decoration:none;display:flex}.btn-secondary-action{border:1.5px solid var(--color-border,#e5ece7);color:var(--color-ink,#17352a);cursor:pointer;background:#fff;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:14px;font-weight:600;text-decoration:none;display:flex}