/* Zikir Pagi Petang & Setelah Shalat — Markaz Inayah
   Layout satu halaman: [Tab di atas tetap] · [Teks tengah bisa di-scroll] · [Tombol aksi di bawah tetap] */

.zk-app {
    --zk-bg: #ffffff;
    --zk-card: #f7f9f8;
    --zk-text: #1f2a24;
    --zk-muted: #5d6b63;
    --zk-border: #dfe6e2;
    --zk-accent: #2f6b4f;
    --zk-ar-size: 28px;
    --zk-txt-size: 16px;
    color: var(--zk-text);
    background: var(--zk-bg);
    border-radius: 14px;
    max-width: 780px;
    margin: 1.5em auto;
    font-family: inherit;
    line-height: 1.6;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.zk-app *, .zk-app *::before, .zk-app *::after { box-sizing: border-box; }

/* Satu halaman penuh: tinggi layar dikurangi header website (jika ada) */
.zk-app.zk-combined {
    height: calc(100vh - var(--zk-offset, 0px));
    height: calc(100dvh - var(--zk-offset, 0px));
    min-height: 460px;
}

/* Mode malam */
.zk-app.zk-dark {
    --zk-bg: #141a17;
    --zk-card: #1d2622;
    --zk-text: #e8efea;
    --zk-muted: #9fb0a6;
    --zk-border: #2c3834;
}

/* 1. Header tetap: tab + pengaturan */
.zk-top {
    flex: 0 0 auto;
    background: var(--zk-bg);
    border-bottom: 1px solid var(--zk-border);
    padding: 10px 12px 8px;
    z-index: 2;
}
.zk-tabs { display: flex; gap: 6px; background: var(--zk-card); border: 1px solid var(--zk-border); border-radius: 12px; padding: 4px; }
.zk-tab {
    flex: 1 1 0; appearance: none; border: 0; background: transparent; color: var(--zk-muted);
    font: inherit; font-weight: 600; font-size: 15px; padding: 9px 6px; border-radius: 9px; cursor: pointer;
    transition: background .15s, color .15s;
}
.zk-tab[aria-selected="true"] { background: var(--zk-accent); color: #fff; }
.zk-settings { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 8px; }

.zk-btn {
    appearance: none; border: 1px solid var(--zk-border); background: var(--zk-card); color: var(--zk-text);
    border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
}
.zk-btn:hover { border-color: var(--zk-accent); }
.zk-btn.zk-on { background: var(--zk-accent); color: #fff; border-color: var(--zk-accent); }
.zk-btn:disabled { opacity: .4; cursor: default; }

/* 2. Area tengah: hanya bagian ini yang di-scroll */
.zk-scroll {
    flex: 1 1 auto;
    min-height: 0;               /* penting agar flex child bisa menyusut dan scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 16px;
}
.zk-title { font-size: 1.1em; font-weight: 700; margin: 0 0 10px; text-align: center; color: var(--zk-text); }

.zk-progress { height: 5px; background: var(--zk-border); border-radius: 99px; overflow: hidden; margin: 0 0 12px; flex: 0 0 auto; }
.zk-progress > span { display: block; height: 100%; width: 0; background: var(--zk-accent); transition: width .3s; }

.zk-card { background: var(--zk-card); border: 1px solid var(--zk-border); border-radius: 12px; padding: 18px 16px; }
.zk-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--zk-muted); margin-bottom: 10px; }
.zk-badge { background: var(--zk-accent); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 12px; }

.zk-ar {
    font-family: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
    font-size: var(--zk-ar-size);
    line-height: 2.1;
    direction: rtl; text-align: right; white-space: pre-line;
    margin: 4px 0 10px;
}
.zk-meaning { font-size: var(--zk-txt-size); color: var(--zk-text); margin: 10px 0; text-align: left; }
.zk-note-block { font-size: var(--zk-txt-size); }

.zk-riwayat { margin-top: 10px; border-top: 1px dashed var(--zk-border); padding-top: 10px; font-size: calc(var(--zk-txt-size) - 2px); color: var(--zk-muted); }
.zk-riwayat p { margin: 0 0 6px; }
.zk-riwayat-toggle { margin-top: 6px; }

.zk-list-item { border-top: 1px solid var(--zk-border); padding: 16px 0; }
.zk-list-item:first-child { border-top: 0; padding-top: 0; }
.zk-hint { font-size: 13px; color: var(--zk-muted); }
.zk-end { text-align: center; padding: 16px 10px 4px; font-size: 1em; color: var(--zk-accent); font-weight: 600; }
.zk-hidden { display: none !important; }

/* 4. Footer tetap: hitungan & navigasi */
.zk-footer {
    flex: 0 0 auto;
    background: var(--zk-bg);
    border-top: 1px solid var(--zk-border);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 2;
}
.zk-footer-info { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--zk-muted); margin-bottom: 8px; }
.zk-footer-row { display: flex; align-items: center; gap: 8px; }
.zk-nav-btn { flex: 0 0 auto; min-width: 84px; padding: 10px 8px; font-size: 14px; }
.zk-tap {
    flex: 1 1 auto; appearance: none; border: 0; cursor: pointer; min-height: 64px; border-radius: 14px;
    background: var(--zk-accent); color: #fff; font: inherit; display: flex; align-items: center; justify-content: center;
    gap: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .08s, background .2s;
}
.zk-tap:active { transform: scale(.97); }
.zk-tap-num { font-size: 26px; font-weight: 700; line-height: 1; }
.zk-tap-of { font-size: 13px; opacity: .92; }
.zk-tap.zk-tap-done { background: var(--zk-muted); }
.zk-footer-sub { display: flex; justify-content: center; margin-top: 6px; }

/* Layout lama (shortcode per-bagian): tanpa fixed height, scroll di dalam */
.zk-app:not(.zk-combined) .zk-scroll { max-height: 60vh; }

@media (min-width: 720px) {
    .zk-app.zk-combined { border-radius: 16px; }
    .zk-scroll { padding: 18px 26px; }
    .zk-tap { min-height: 72px; }
}

@media (max-width: 600px) {
    .zk-app { border-radius: 0; margin: 0 auto; }
    .zk-app.zk-combined { min-height: 420px; }
    .zk-nav-btn { min-width: 72px; }
}