:root { --guide-ink: color-mix(in srgb,var(--turquoise-dark) 36%,#354632); --guide-strong: color-mix(in srgb,var(--turquoise-dark) 34%,#344c38); --guide-soft: color-mix(in srgb,var(--turquoise-soft) 40%,#f2f0e6); }
html, body { width: 100%; min-height: 100%; overflow-x: clip; }
body { font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: #293e38; }
body::before { background-color: #f8f8f2; background-image: radial-gradient(ellipse at 80% 0%,rgba(183,196,154,.13),transparent 55%); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--turquoise-dark); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button, a { touch-action: manipulation; }
a { color: var(--turquoise-dark); text-underline-offset: 3px; }
.guide-shell { position: relative; z-index: 1; max-width: 1320px; margin: auto; padding: 0 40px; }
.guide-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 104px; gap: 20px; }
.guide-brand { border: 0; background: none; display: flex; align-items: center; text-align: left; gap: 12px; color: var(--guide-ink); padding: 0; }
.guide-brand strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 29px; font-weight: 500; line-height: 1.2; }
.guide-brand small { font-size: 9px; letter-spacing: 1.8px; color: #6b7a6f; }
.guide-topbar-right { display: flex; align-items: center; gap: 14px; }
.today { font-size: 12px; color: #6c796f; margin-right: 10px; }
.guide-topbar .icon-button { height: 40px; width: 40px; }
.guide-topbar .icon-button svg { width: 20px; height: 20px; }
.guide-nav { display: flex; gap: 24px; border-top: 1px solid #dee3d7; border-bottom: 1px solid #dee3d7; overflow-x: auto; scrollbar-width: thin; }
.guide-nav button { display: flex; align-items: center; flex-shrink: 0; gap: 7px; background: none; color: #647469; border: 0; border-bottom: 2px solid transparent; padding: 15px 0 13px; font-size: 12px; }
.guide-nav svg { width: 16px; height: 16px; }
.guide-nav button[aria-current="page"] { color: #245e4a; border-bottom-color: #47745a; font-weight: 650; }
#view { min-height: 65vh; padding: 28px 0 40px; }
#pageTitle:focus { outline: none; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 2px; color: #647659; text-transform: uppercase; }
.home-hero { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; min-height: 265px; background: var(--guide-soft); border: 1px solid #e2e6d7; border-radius: 22px; overflow: hidden; }
.home-hero-copy { padding: 34px 42px; z-index: 1; }
.home-hero h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px,3.3vw,46px); line-height: 1.22; font-weight: 400; letter-spacing: -1.4px; color: var(--guide-ink); margin: 12px 0; }
.home-hero h1 em { color: #648163; font-weight: 400; }
.home-hero p { color: #6a7668; font-size: 13px; max-width: 390px; margin: 12px 0 0; }
.hero-art { position: relative; display: grid; place-items: center; background: radial-gradient(ellipse at bottom, #dce4ca 0, transparent 68%); }
.hero-art::before, .hero-art::after { content: ""; position: absolute; border: 1px solid #c9d1b8; width: 218px; height: 300px; top: 24px; border-radius: 150px 150px 0 0; transform: rotate(-10deg); }
.hero-art::after { transform: rotate(10deg); width: 250px; }
.hero-art .arch { position: absolute; width: 200px; height: 255px; top: 36px; border-radius: 110px 110px 0 0; background: #e6e9da; border: 1px solid #c7d0b5; box-shadow: 0 12px 36px #7a8d561a; }
.hero-art img { position: relative; width: 123px; height: 123px; margin-top: 16px; filter: saturate(.55); }
.hero-art .star { position: absolute; color: #b49c67; font-size: 28px; left: 22%; top: 32px; }
.hero-art .star.small { left: auto; right: 15%; top: 160px; font-size: 16px; }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 30px 0 16px; }
.section-top h2 { font-family: Georgia, serif; font-size: 23px; font-weight: 400; margin: 0; color: var(--guide-ink); }
.section-top p { margin: 0; font-size: 11px; color: #66745f; }
.module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.module-card { position: relative; text-align: left; padding: 22px; border: 1px solid #e2e6da; border-radius: 15px; background: #ffffffc9; color: #344c3d; transition: transform 160ms ease, box-shadow 160ms ease; }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 9px 25px #30442d0a; border-color: #bac8aa; }
.module-icon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #edf1e4; color: #697f50; margin-bottom: 15px; }
.module-card:nth-child(4n+2) .module-icon { background: #f4eddd; color: #a0884c; }
.module-card:nth-child(4n+3) .module-icon { background: #e7efeb; color: #588578; }
.module-card:nth-child(4n+4) .module-icon { background: #f0e9e5; color: #9c8070; }
.module-icon svg { width: 28px; height: 28px; }
.module-card strong { display: block; font-size: 16px; font-weight: 600; }
.module-card small { display: block; color: #70796a; font-size: 11px; margin-top: 3px; }
.module-arrow { position: absolute; right: 20px; top: 30px; opacity: .5; }
.module-arrow svg { width: 18px; height: 18px; }
.daily-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.daily-card { padding: 24px; border: 1px solid #e1e5d6; border-radius: 15px; background: #fffef8; display: flex; flex-direction: column; min-height: 260px; }
.daily-card:first-child { color: #f4f4e8; background: var(--guide-strong); border-color: var(--guide-strong); }
.daily-card:first-child .eyebrow, .daily-card:first-child a { color: #d1ddbc; }
.daily-card:nth-child(2) { background: var(--guide-soft); }
.daily-card:nth-child(4) { background: #f5efe1; }
.daily-card blockquote { font-family: Georgia, serif; font-size: 18px; line-height: 1.6; margin: 20px 0; flex: 1; }
.daily-card a { font-size: 10px; line-height: 1.6; }
.daily-card .esma-name { font-family: Georgia,serif; font-size: 30px; margin: 15px 0 0; font-weight: 400; }
.daily-card p { font-size: 12px; }
.daily-card .text-link { margin-top: auto; align-self: start; }
.verse-daily .arabic { margin:14px 0 5px; color:white; font-size:21px; line-height:1.75; text-align:right; }
.verse-daily .daily-reading { margin:0 0 8px; color:rgba(255,255,255,.62); font-size:9px; font-style:italic; line-height:1.55; }
.verse-daily blockquote { margin-top:8px; font-size:16px; }
.text-link { border: 0; background: none; padding: 0; color: var(--turquoise-dark); text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.times-strip { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.time-cell { text-align: center; padding: 14px; background: #ffffffa8; border: 1px solid #e1e6d7; border-radius: 12px; }
.time-cell small { display: block; color: #6b7964; font-size: 11px; }
.time-cell strong { font-size: 19px; font-weight: 500; color: var(--guide-ink); }
.page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 26px; }
.page-heading h1 { font: 400 36px/1.25 Georgia,serif; color: var(--guide-ink); margin: 6px 0 10px; }
.page-heading p { margin: 0; color: #637364; max-width: 740px; font-size: 13px; }
.primary-button, .secondary-button, .danger-button { border: 1px solid transparent; border-radius: 9px; padding: 10px 18px; font-weight: 600; font-size: 12px; line-height: 1.5; display: inline-flex; gap: 8px; justify-content: center; align-items: center; text-decoration: none; }
.primary-button { background: var(--turquoise-dark); color: white; }
.primary-button:hover { filter: brightness(.92); }
.secondary-button { border-color: #dce3d4; background: #ffffffba; color: #47604a; }
.danger-button { border-color: #e9caca; background: #fff6f3; color: #993c38; }
.primary-button svg, .secondary-button svg { width: 16px; height: 16px; }
.subnav { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.subnav button { background: transparent; border: 1px solid #d8dfcf; border-radius: 30px; padding: 9px 17px; font-size: 12px; color: #54644b; }
.subnav button[aria-pressed="true"] { background: var(--guide-strong); color: white; border-color: var(--guide-strong); }
.panel { border: 1px solid #e0e5d7; background: #fffffff0; border-radius: 16px; padding: 26px; margin-bottom: 20px; }
.panel h2, .panel h3 { color: var(--guide-ink); font-weight: 600; margin: 0 0 12px; }
.panel h2 { font-size: 20px; }.panel h3 { font-size: 16px; }.panel p { font-size: 13px; }
.notice { background: #edf2e7; border-left: 3px solid #8a9f76; border-radius: 3px 10px 10px 3px; padding: 13px 18px; color: #4c6145; font-size: 12px; margin: 16px 0; }
.notice.warning { background: #fff4e4; border-color: #bd9a56; color: #735c30; }
.notice a { font-size: inherit; }
.stats-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin: 20px 0; }
.stat { padding: 18px 14px; border-radius: 13px; background: var(--guide-soft); border: 1px solid #dee5d3; }
.stat span, .stat small { display: block; color: #6c7b60; font-size: 11px; }.stat b { font-size: 27px; font-weight: 500; color: var(--guide-ink); }.stat small { font-size: 10px; }
.tracker-layout { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.5fr); gap: 20px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12px; color: #52664a; }
.field input, .field select, .field textarea, .search-input { border: 1px solid #d7e0cf; border-radius: 8px; background: #fff; padding: 10px 12px; color: #344438; width: 100%; min-width: 0; }
.field textarea { resize: vertical; min-height: 68px; }
.field small, .help-text { color: #6a7960; font-size: 11px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border: 1px solid #e0e5d7; border-radius: 9px; padding: 14px; margin-bottom: 15px; font-size: 12px; }
.checks legend { font-size: 12px; padding: 0 5px; }.checks label { display: flex; align-items: center; gap: 7px; }.checks input { accent-color: #47604a; width: 16px; height: 16px; }
.form-error { color: #a7372f; font-size: 12px; margin: 10px 0; }
.ledger-entry { border-top: 1px solid #e1e5d9; padding: 18px 0; }
.entry-top { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }.entry-top strong { font-size: 13px; }.entry-top p { margin: 3px 0; color: #66745e; font-size: 11px; overflow-wrap: anywhere; }
.entry-delete { border: 0; color: #947164; font-size: 11px; background: none; padding: 2px 4px; }
.entry-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 10px; font-size: 12px; padding: 9px 12px; background: #f7f8f3; border-radius: 8px; }
.entry-row input { width: 56px; padding: 4px; border: 1px solid #d5dfca; border-radius: 5px; }.entry-row button { padding: 5px 10px; font-size: 10px; }
.entry-row form { display: flex; gap: 6px; }.entry-note { font-size: 11px; overflow-wrap: anywhere; }
.empty-state { text-align: center; padding: 40px 18px; color: #74806b; font-size: 13px; }.empty-state svg { height: 42px; width: 42px; color: #97aa80; margin-bottom: 12px; }
.entry-list { max-height: 580px; overflow-y: auto; padding-right: 3px; }
.history-list { list-style: none; padding: 0; }.history-list li { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 12px; border-bottom: 1px solid #e4e7dd; padding: 10px 0; }
.history-list button { font-size: 11px; border: 0; background: none; color: #57774b; text-decoration: underline; }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.article-grid .panel { margin: 0; }
.source-link { display: inline-block; font-size: 11px; margin-top: 7px; }
.table-scroll { overflow-x: auto; }.guide-table { border-collapse: collapse; width: 100%; font-size: 13px; }.guide-table th, .guide-table td { border-bottom: 1px solid #e1e6d8; text-align: left; padding: 13px; }.guide-table th { background: var(--guide-soft); font-weight: 600; }
.step-layout { display: grid; grid-template-columns: 210px 1fr; gap: 22px; }.step-list { display: flex; flex-direction: column; gap: 6px; }
.step-list button { text-align: left; padding: 11px 12px; border: 1px solid #dce3d3; border-radius: 8px; color: #526648; background: white; font-size: 12px; }
.step-list button[aria-current="step"] { background: var(--guide-soft); border-color: #81966c; font-weight: 600; }
.step-image { margin: 0; }.step-image img { display: block; width: 100%; border-radius: 12px; border: 1px solid #dbe4d7; height: auto; }.step-image figcaption { font-size: 10px; color: #748169; margin: 8px 0 16px; }
.step-detail { background: var(--guide-soft); padding: 18px; border-radius: 10px; }.step-detail p { margin: 0 0 9px; }.step-controls { display: flex; justify-content: space-between; margin-top: 20px; }
.search-bar { max-width: 460px; margin: 15px 0 22px; }.search-input { font-size: 13px; }.result-count { color: #718167; font-size: 11px; }
.library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.library-card { border-radius: 13px; border: 1px solid #dde5d3; background: #fffffff0; padding: 22px; }.library-card h2 { font: 400 24px Georgia,serif; margin: 0 0 10px; color: var(--guide-ink); }.library-card p { font-size: 12px; color: #617257; margin: 8px 0; }.library-card summary { cursor: pointer; color: #5a7749; font-size: 12px; }.library-card .number { font-size: 10px; letter-spacing: 1px; color: #859a70; display: block; margin-bottom: 9px; }
.arabic { font-family: "Traditional Arabic", "Amiri", "Noto Naskh Arabic", "Times New Roman", serif; font-size: 34px; direction: rtl; text-align: right; line-height: 2; font-weight: 400; }
.dua-card .arabic { font-size: 27px; color: var(--guide-ink); }.dua-card h2 { font-size: 23px; }.dua-card .reading { font-style: italic; color: #687762; }
.reader-panel { max-width: 920px; margin: 0 auto 20px; }.reader-panel .arabic { font-size: 43px; padding: 25px 10px; text-align: center; color: var(--guide-ink); }.reader-panel blockquote { margin: 10px auto 25px; max-width: 690px; font-family: Georgia,serif; font-size: 21px; line-height: 1.8; text-align: center; }.reader-header, .reader-controls { display: flex; justify-content: space-between; gap: 12px; align-items: center; }.reader-form { display: grid; grid-template-columns: 1fr 140px auto; gap: 12px; align-items: end; margin-top: 15px; }.reader-form .field { margin: 0; }.reader-controls { margin-top: 28px; }
.reader-reading { max-width:720px; margin:0 auto 22px; padding:13px 17px; color:var(--muted); border-radius:13px; background:var(--turquoise-soft); text-align:center; font-size:12px; line-height:1.7; }
.reader-reading b { display:block; margin-bottom:3px; color:var(--guide-ink); font-size:9px; letter-spacing:1.2px; text-transform:uppercase; }
.audio-target { cursor:pointer; outline:none; }
.audio-target:focus-visible { outline:3px solid color-mix(in srgb,var(--orange) 62%,white); outline-offset:3px; }
.audio-hint { display:inline-flex; align-items:center; justify-content:center; gap:7px; color:var(--turquoise-dark); font-size:10px; font-weight:700; letter-spacing:.35px; line-height:1.3; }
.audio-hint svg { width:17px; height:17px; flex:0 0 auto; }
.audio-target.is-audio-playing .audio-hint { color:color-mix(in srgb,var(--orange) 76%,#703b22); }
.audio-target.is-audio-playing .audio-hint svg { filter:drop-shadow(0 0 6px color-mix(in srgb,var(--orange) 55%,transparent)); }
.audio-target.is-audio-loading .audio-hint svg { animation:audio-pulse .75s ease-in-out infinite alternate; }
.audio-target.is-audio-error .audio-hint { color:#9a4339; }
.reader-audio-button { display:block; width:100%; margin:9px 0 18px; padding:0 15px 15px; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:18px; color:var(--guide-ink); background:linear-gradient(145deg,rgba(255,255,255,.45),color-mix(in srgb,var(--turquoise-soft) 28%,white)); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.reader-audio-button:hover { transform:translateY(-2px); border-color:rgba(var(--turquoise-rgb),.25); box-shadow:0 13px 30px rgba(var(--turquoise-rgb),.08); }
.reader-audio-button.is-audio-playing { border-color:color-mix(in srgb,var(--orange) 38%,transparent); box-shadow:0 12px 35px color-mix(in srgb,var(--orange) 12%,transparent); }
.reader-audio-button .arabic { display:block; width:100%; }
@keyframes audio-pulse { to { transform:scale(1.18);opacity:.48; } }
.dhikr-panel { max-width: 660px; margin: 0 auto; text-align: center; padding: 36px; }.dhikr-panel .field { text-align: left; }.counter-button { --progress: 0deg; display: block; width: 242px; height: 242px; border: 12px solid transparent; border-radius: 50%; background: linear-gradient(#fafcf6,#fafcf6) padding-box,conic-gradient(#71995a var(--progress),#e5ebdc 0) border-box; margin: 30px auto 22px; color: var(--guide-ink); box-shadow: 0 10px 45px #73865310; }.counter-button strong { display: block; font-size: 69px; font-weight: 350; line-height: 1.25; }.counter-button span { font-size: 11px; color: #627756; }.counter-button:active { transform: scale(.98); }.counter-progress { font-size: 12px; color: #607653; }.counter-actions { display: flex; gap: 10px; justify-content: center; margin: 22px 0; }
.guide-footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #dfe5d5; padding: 24px 0 32px; color: #738167; font-size: 11px; }.guide-footer button { border: 0; background: none; color: #647753; font: inherit; }
.preview-banner { background: #fff0d4; padding: 10px 14px; color: #765623; border-radius: 8px; font-size: 12px; }
.toast { position: fixed; z-index: 200; right: 25px; bottom: 25px; border-radius: 12px; background: var(--guide-strong); color: white; box-shadow: 0 10px 40px #24352633; padding: 14px 22px; max-width: min(520px,90vw); font-size: 13px; }
.toast.error { background: #853e34; }
.guide-dialog { border: 1px solid #dce4d0; border-radius: 16px; padding: 30px; width: min(480px,90vw); color: #344631; }.guide-dialog::backdrop { background: #13241788; }.guide-dialog h2 { font-family: Georgia,serif; font-weight: 400; }.guide-dialog p { font-size: 13px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.skip-link { position: fixed; top: -100px; z-index: 300; background: white; color: #294b35; padding: 10px; }.skip-link:focus { top: 10px; left: 10px; }
.loading-message { text-align: center; padding: 60px; color: #708063; }
.settings-panel { position: absolute; width: min(550px,calc(100vw - 28px)); height: calc(100dvh - 48px); left: auto; right: 24px; top: 24px; bottom: 24px; max-height: calc(100dvh - 48px); border-radius: 22px; }
.settings-panel__header h2 { font-size: 22px; }.settings-panel__body { max-height: none; }.settings-overlay { z-index: 100; }
@media (min-width: 1450px) { .guide-shell { max-width: 1400px; }.module-card { padding: 25px; } }
@media (max-width: 1050px) { .guide-shell { padding: 0 24px; }.guide-nav { gap: 17px; }.today { display: none; }.module-grid,.daily-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.module-card { padding: 18px 15px; }.module-card strong { font-size: 14px; }.module-card small { font-size: 10px; }.daily-card { padding: 18px; }.daily-card blockquote { font-size: 16px; }.library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.stats-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.tracker-layout { grid-template-columns: 1fr 1.3fr; } }
@media (max-width: 760px) { .guide-shell { padding: 0 18px; }.guide-topbar { min-height: 88px; }.guide-brand small { display: none; }.guide-brand strong { font-size: 26px; }.fullscreen-button { font-size: 10px; padding: 9px; }.guide-topbar-right { gap: 7px; }.home-hero { grid-template-columns: 1fr; }.home-hero-copy { padding: 28px; }.hero-art { display: none; }.home-hero h1 { font-size: 38px; }.module-grid,.daily-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.module-card { padding: 20px; }.daily-card { min-height: 240px; }.section-top { align-items: start; }.section-top p { max-width: 160px; text-align: right; }.times-strip { grid-template-columns: repeat(3,1fr); }.tracker-layout,.step-layout { grid-template-columns: 1fr; }.article-grid { grid-template-columns: 1fr; }.panel { padding: 20px; }.page-heading h1 { font-size: 31px; }.step-list { display: grid; grid-template-columns: 1fr 1fr; }.library-grid { grid-template-columns: 1fr; }.reader-form { grid-template-columns: 1fr 90px; }.reader-form button { grid-column: 1 / -1; }.reader-panel .arabic { font-size: 34px; }.guide-footer { flex-direction: column; gap: 8px; }.guide-footer button { align-self: start; }.settings-panel { right: 14px; top: 14px; bottom: 14px; max-height: calc(100dvh - 28px); }.dhikr-panel { padding: 24px 18px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* 2.1 — canlı, katmanlı rehber tasarım sistemi */
:root {
  --guide-ink: color-mix(in srgb,var(--turquoise-dark) 58%,#173831);
  --guide-strong: color-mix(in srgb,var(--turquoise-dark) 78%,#183b32);
  --guide-soft: color-mix(in srgb,var(--turquoise-soft) 72%,#fff9ec);
  --guide-card: color-mix(in srgb,var(--paper) 90%,#fff);
  --guide-gold: color-mix(in srgb,var(--orange) 66%,#caa85c);
  --guide-radius: 22px;
}

body {
  color: color-mix(in srgb,var(--ink) 88%,#213a33);
  background: var(--paper);
}

body::before {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 85% 4%,rgba(var(--orange-rgb),.14),transparent 27%),
    radial-gradient(circle at 8% 22%,rgba(var(--turquoise-rgb),.1),transparent 31%),
    linear-gradient(180deg,color-mix(in srgb,var(--paper) 96%,white),var(--paper));
}

body::after {
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 2 43 26 68 36 43 46 36 70 29 46 4 36 29 26Z' fill='none' stroke='%23087c78' stroke-opacity='.13'/%3E%3C/svg%3E");
  mask-image:linear-gradient(to bottom,black,transparent 58%);
}

.guide-shell { max-width:1440px; padding:0 clamp(22px,4vw,58px); }
.guide-topbar { min-height:96px; position:relative; }
.guide-brand img { width:52px; height:52px; filter:drop-shadow(0 8px 13px rgba(var(--turquoise-rgb),.16)); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.guide-brand:hover img { transform:rotate(-5deg) scale(1.06); }
.guide-brand strong { font-size:31px; letter-spacing:-.6px; }
.guide-brand small { color:var(--muted); letter-spacing:2.1px; }
.guide-topbar .icon-button,.fullscreen-button { backdrop-filter:blur(14px); box-shadow:0 9px 24px rgba(var(--turquoise-rgb),.07); }
.guide-nav { position:sticky; z-index:40; top:0; margin-inline:calc(clamp(22px,4vw,58px) * -1); padding-inline:clamp(22px,4vw,58px); border-color:rgba(var(--turquoise-rgb),.11); background:color-mix(in srgb,var(--paper) 82%,transparent); backdrop-filter:blur(18px) saturate(140%); scrollbar-width:none; }
.guide-nav::-webkit-scrollbar { display:none; }
.guide-nav button { position:relative; padding-block:16px 14px; transition:color .18s ease,transform .18s ease; }
.guide-nav button:hover { color:var(--turquoise-dark); transform:translateY(-1px); }
.guide-nav button[aria-current="page"]::after { content:""; position:absolute; height:5px; width:5px; border-radius:50%; bottom:4px; left:calc(50% - 2px); background:var(--orange); box-shadow:0 0 0 5px rgba(var(--orange-rgb),.1); }

#view { padding-top:38px; }
#view > * { animation:view-rise .52s cubic-bezier(.2,.8,.2,1) both; }
#view > :nth-child(2) { animation-delay:.04s; }
#view > :nth-child(3) { animation-delay:.08s; }
.page-heading { margin-bottom:28px; }
.page-heading h1 { font-size:clamp(38px,4vw,55px); letter-spacing:-1.8px; margin-top:8px; }
.page-heading p { font-size:14px; max-width:800px; }
.eyebrow { color:var(--turquoise-dark); font-weight:800; letter-spacing:2.4px; }

.home-hero { min-height:360px; grid-template-columns:1.22fr .78fr; border:0; border-radius:32px 32px 32px 10px; color:white; background:
  radial-gradient(circle at 18% 22%,rgba(255,255,255,.13),transparent 22%),
  linear-gradient(125deg,var(--guide-strong),color-mix(in srgb,var(--turquoise-dark) 62%,#274f68)); box-shadow:0 30px 80px rgba(var(--turquoise-rgb),.16); }
.home-hero::before { content:""; position:absolute; inset:auto 0 0; height:42%; opacity:.18; background:repeating-radial-gradient(ellipse at 50% 110%,transparent 0 36px,white 37px 38px,transparent 39px 54px); }
.home-hero-copy { padding:clamp(38px,5vw,72px); align-self:center; }
.home-hero .eyebrow { color:color-mix(in srgb,var(--orange-soft) 75%,white); }
.home-hero h1 { color:white; font-size:clamp(45px,5vw,68px); line-height:1.08; letter-spacing:-2.6px; }
.home-hero h1 em { color:color-mix(in srgb,var(--orange) 65%,#ffe4ad); }
.home-hero p { color:rgba(255,255,255,.73); font-size:14px; }
.hero-art { background:radial-gradient(circle at 50% 60%,rgba(255,221,162,.2),transparent 48%); }
.hero-art::before,.hero-art::after { border-color:rgba(255,255,255,.18); top:48px; animation:arch-breathe 5s ease-in-out infinite alternate; }
.hero-art::after { animation-delay:-2.5s; }
.hero-art .arch { top:62px; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); backdrop-filter:blur(8px); }
.hero-art img { width:156px; height:156px; filter:drop-shadow(0 20px 22px rgba(0,0,0,.2)); animation:logo-float 4.8s ease-in-out infinite; }
.hero-art .star { color:#f5cc7a; animation:star-pulse 2.6s ease-in-out infinite; }

.module-grid { gap:17px; }
.module-card { min-height:164px; border:1px solid rgba(var(--turquoise-rgb),.11); border-radius:20px 20px 20px 7px; background:color-mix(in srgb,var(--guide-card) 88%,transparent); box-shadow:0 12px 30px rgba(var(--turquoise-rgb),.06); overflow:hidden; }
.module-card::after { content:""; position:absolute; width:90px; height:90px; right:-48px; bottom:-55px; border:18px solid rgba(var(--turquoise-rgb),.06); border-radius:50%; transition:transform .35s ease; }
.module-card:hover { transform:translateY(-6px); box-shadow:0 22px 46px rgba(var(--turquoise-rgb),.13); border-color:rgba(var(--turquoise-rgb),.24); }
.module-card:hover::after { transform:scale(1.3); }
.module-icon { width:54px; height:54px; border-radius:18px 18px 18px 6px; }
.module-arrow { transition:transform .25s ease; }
.module-card:hover .module-arrow { transform:translateX(4px); }
.daily-card { border:1px solid rgba(var(--turquoise-rgb),.1); border-radius:22px 22px 22px 7px; box-shadow:0 16px 36px rgba(var(--turquoise-rgb),.05); }
.daily-card:first-child { background:linear-gradient(145deg,var(--guide-strong),color-mix(in srgb,var(--guide-strong) 72%,#2a5c62)); }
.daily-card blockquote { font-size:19px; }
.daily-card.verse-daily blockquote { margin-top:8px; font-size:16px; }

.panel,.library-card { border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:var(--guide-radius) var(--guide-radius) var(--guide-radius) 8px; background:color-mix(in srgb,var(--guide-card) 90%,transparent); box-shadow:0 14px 38px rgba(var(--turquoise-rgb),.055); backdrop-filter:blur(10px); }
.panel { padding:clamp(22px,2.4vw,34px); }
.panel h2 { font-size:22px; }
.notice { border:1px solid rgba(var(--turquoise-rgb),.12); border-left:4px solid var(--turquoise); border-radius:5px 15px 15px 5px; background:color-mix(in srgb,var(--turquoise-soft) 66%,white); padding:15px 20px; }
.subnav { margin:24px 0; gap:10px; }
.subnav button { padding:11px 20px; border-color:rgba(var(--turquoise-rgb),.2); background:rgba(255,255,255,.46); transition:all .2s ease; }
.subnav button:hover { border-color:var(--turquoise); transform:translateY(-2px); }
.subnav button[aria-pressed="true"] { background:linear-gradient(135deg,var(--guide-strong),var(--turquoise-dark)); box-shadow:0 9px 22px rgba(var(--turquoise-rgb),.18); }
.primary-button { background:linear-gradient(135deg,var(--guide-strong),var(--turquoise-dark)); border-radius:12px 12px 12px 4px; box-shadow:0 8px 20px rgba(var(--turquoise-rgb),.16); transition:transform .18s ease,box-shadow .18s ease; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(var(--turquoise-rgb),.23); }
.secondary-button { border-color:rgba(var(--turquoise-rgb),.17); border-radius:12px 12px 12px 4px; }

/* Kaza takip sayaçları */
.debt-dashboard { display:grid; grid-template-columns:150px minmax(260px,1fr) 150px 150px; align-items:center; gap:22px; margin:22px 0; padding:24px 28px; color:white; border-radius:27px 27px 27px 9px; overflow:hidden; position:relative; background:
  radial-gradient(circle at 80% 20%,rgba(255,255,255,.13),transparent 26%),
  linear-gradient(125deg,var(--guide-strong),color-mix(in srgb,var(--turquoise-dark) 68%,#315e68)); box-shadow:0 24px 55px rgba(var(--turquoise-rgb),.18); }
.debt-dashboard::after { content:"✦"; position:absolute; right:20px; top:5px; font-size:70px; color:rgba(255,255,255,.06); animation:star-pulse 4s ease-in-out infinite; }
.debt-ring { position:relative; width:130px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--guide-gold) var(--completion),rgba(255,255,255,.13) 0); animation:ring-arrive .9s ease both; }
.debt-ring::before { content:""; position:absolute; width:104px; aspect-ratio:1; border-radius:50%; background:color-mix(in srgb,var(--guide-strong) 86%,#315e68); }
.debt-ring>div { position:relative; z-index:1; text-align:center; }
.debt-ring strong { display:block; font:500 36px/1 Georgia,serif; }
.debt-ring span { display:block; margin-top:6px; font-size:9px; letter-spacing:.8px; opacity:.7; }
.debt-dashboard-copy .eyebrow { color:#f6d997; }
.debt-dashboard-copy h2 { color:white; font:400 25px/1.25 Georgia,serif; margin:8px 0; }
.debt-dashboard-copy p { color:rgba(255,255,255,.68); margin:0; font-size:11px; }
.debt-total { min-height:105px; display:flex; flex-direction:column; justify-content:center; padding:16px; border:1px solid rgba(255,255,255,.13); border-radius:17px 17px 17px 6px; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.debt-total small,.debt-total span { color:rgba(255,255,255,.66); font-size:10px; }
.debt-total strong { font:400 35px/1.2 Georgia,serif; }
.debt-total.completed strong { color:#f5d692; }
.stats-grid { gap:12px; }
.stat { position:relative; overflow:hidden; min-height:128px; padding:20px 17px; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:17px 17px 17px 6px; background:linear-gradient(145deg,color-mix(in srgb,var(--turquoise-soft) 67%,white),rgba(255,255,255,.72)); animation:stat-arrive .5s var(--delay) both; }
.stat b { display:block; margin:5px 0; font-size:33px; }
.stat-wave { position:absolute; width:82px; height:82px; right:-34px; bottom:-49px; border:13px solid rgba(var(--turquoise-rgb),.08); border-radius:50%; }

/* Namaz öğrenme */
.learning-hero { min-height:290px; display:grid; grid-template-columns:1.4fr .6fr; align-items:center; gap:30px; padding:clamp(32px,5vw,64px); margin-bottom:20px; color:white; border-radius:30px 30px 30px 10px; overflow:hidden; position:relative; background:
  radial-gradient(circle at 12% 16%,rgba(255,255,255,.12),transparent 24%),
  linear-gradient(130deg,var(--guide-strong),color-mix(in srgb,var(--turquoise-dark) 56%,#395d6a)); box-shadow:0 25px 60px rgba(var(--turquoise-rgb),.17); }
.learning-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 65%,rgba(255,255,255,.04) 65.2% 66%,transparent 66.2%); background-size:36px 36px; }
.learning-hero>div { position:relative; z-index:1; }
.learning-hero .eyebrow { color:#f5d58b; }
.learning-hero h2 { max-width:710px; margin:10px 0 14px; color:white; font:400 clamp(30px,3.6vw,48px)/1.12 Georgia,serif; letter-spacing:-1.3px; }
.learning-hero p { max-width:690px; color:rgba(255,255,255,.72); font-size:13px; }
.learning-metrics { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.learning-metrics span { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(255,255,255,.13); border-radius:99px; background:rgba(255,255,255,.07); font-size:10px; }
.learning-metrics b { color:#f5d58b; font-size:14px; }
.learning-orbit { width:190px; height:190px; margin:auto; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; animation:orbit-float 4s ease-in-out infinite; }
.learning-orbit::before,.learning-orbit::after { content:""; position:absolute; width:142px; height:142px; border:1px solid rgba(255,255,255,.13); border-radius:50% 50% 12px 50%; transform:rotate(45deg); }
.learning-orbit::after { width:106px; height:106px; }
.learning-orbit span { z-index:1; font:700 36px "Traditional Arabic","Times New Roman",serif; color:#fff4d3; }
.learning-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:#f2c873; box-shadow:0 0 0 8px rgba(242,200,115,.08); }
.learning-orbit i:nth-of-type(1){transform:translate(80px,-16px)} .learning-orbit i:nth-of-type(2){transform:translate(-73px,45px)} .learning-orbit i:nth-of-type(3){transform:translate(20px,87px)}
.learning-section { padding:30px 0 10px; }
.content-heading { display:flex; align-items:flex-start; gap:18px; margin:0 0 20px; }
.content-heading.compact { margin-top:28px; }
.content-heading h2 { margin:0 0 6px; color:var(--guide-ink); font:500 27px/1.2 Georgia,serif; }
.content-heading p { margin:0; color:var(--muted); font-size:12px; }
.content-number { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:16px 16px 16px 5px; color:white; background:linear-gradient(135deg,var(--guide-strong),var(--turquoise)); box-shadow:0 9px 20px rgba(var(--turquoise-rgb),.17); font:600 15px Georgia,serif; }
.prayer-type-grid .panel { position:relative; overflow:hidden; padding-top:70px; }
.type-orb { position:absolute; top:20px; left:24px; width:34px; height:34px; display:grid; place-items:center; color:var(--turquoise-dark); border-radius:50%; background:var(--turquoise-soft); font:600 13px Georgia,serif; }
.rakah-panel { margin-top:18px; }
.rakah-pill { min-width:34px; display:inline-grid; place-items:center; padding:4px 9px; border-radius:99px; color:var(--turquoise-dark); background:var(--turquoise-soft); font-weight:700; }
.rakah-pill.muted { color:var(--muted); background:transparent; }
.readiness-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.readiness-grid>div { display:flex; align-items:center; gap:11px; min-height:64px; padding:13px 16px; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:15px 15px 15px 5px; background:rgba(255,255,255,.62); font-size:12px; }
.readiness-grid span { color:var(--guide-gold); font:600 15px Georgia,serif; }
.ablution-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ablution-grid article { position:relative; min-height:210px; padding:24px; overflow:hidden; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:20px 20px 20px 7px; background:linear-gradient(155deg,rgba(255,255,255,.86),color-mix(in srgb,var(--turquoise-soft) 38%,white)); box-shadow:0 12px 30px rgba(var(--turquoise-rgb),.05); }
.ablution-grid h3 { margin:18px 0 8px; color:var(--guide-ink); font-size:16px; }
.ablution-grid p { margin:0; color:var(--muted); font-size:12px; }
.lesson-visual { width:64px; height:64px; display:grid; place-items:center; position:relative; border-radius:20px 20px 20px 7px; color:var(--turquoise-dark); background:var(--turquoise-soft); }
.lesson-visual svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lesson-visual i { position:absolute; right:-7px; bottom:-7px; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--guide-gold); font:normal 700 10px sans-serif; box-shadow:0 3px 9px rgba(var(--orange-rgb),.25); }
.inline-note { margin-top:15px; }
.call-table { display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:0; overflow:hidden; }
.call-table>div { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid rgba(var(--turquoise-rgb),.1); }
.call-table>div:nth-child(odd){border-right:1px solid rgba(var(--turquoise-rgb),.1)}
.call-table .arabic { margin:0; font-size:25px; line-height:1.6; color:var(--guide-ink); }
.call-table p:last-child { margin:0; font-size:11px; }
.call-table p:last-child b,.call-table p:last-child span { display:block; }
.call-table p:last-child span { color:var(--muted); margin-top:3px; }
.learning-details summary { cursor:pointer; color:var(--guide-ink); font-weight:700; }
.learning-details p { margin-bottom:0; }
.recitation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.recitation-card { position:relative; overflow:hidden; padding:25px; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:21px 21px 21px 7px; background:color-mix(in srgb,var(--guide-card) 91%,transparent); box-shadow:0 13px 32px rgba(var(--turquoise-rgb),.055); }
.recitation-card::before { content:""; position:absolute; width:90px; height:90px; right:-50px; top:-50px; border:15px solid rgba(var(--turquoise-rgb),.05); border-radius:50%; }
.recitation-card header span { color:var(--turquoise-dark); font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.recitation-card h3 { margin:3px 0 13px; color:var(--guide-ink); font:500 22px Georgia,serif; }
.recitation-card .arabic { padding:17px; margin:0 0 15px; border-radius:14px; background:linear-gradient(135deg,var(--turquoise-soft),color-mix(in srgb,var(--orange-soft) 38%,white)); color:var(--guide-ink); font-size:29px; line-height:2.05; }
.recitation-reading,.recitation-meaning { color:var(--muted); font-size:12px; line-height:1.7; }
.recitation-reading b,.recitation-meaning b,.verse-reading b { display:block; margin-bottom:3px; color:var(--guide-ink); font-size:9px; letter-spacing:1.2px; text-transform:uppercase; }
.recitation-card.compact { grid-column:1/-1; }
.recitation-card.compact .arabic { font-size:27px; }
.term-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.term-grid article { min-height:120px; padding:18px; border-radius:16px 16px 16px 5px; background:color-mix(in srgb,var(--turquoise-soft) 44%,white); border:1px solid rgba(var(--turquoise-rgb),.1); }
.term-grid h3 { margin:0 0 6px; color:var(--guide-ink); font-size:15px; }
.term-grid p { margin:0; color:var(--muted); font-size:11px; }
.faq-list { display:grid; gap:9px; margin-top:18px; }
.faq-list details { border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:15px 15px 15px 5px; background:rgba(255,255,255,.63); padding:15px 18px; }
.faq-list summary { cursor:pointer; color:var(--guide-ink); font-size:13px; font-weight:700; }
.faq-list p { margin:10px 0 0; color:var(--muted); font-size:12px; }
.purification-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.purification-grid details { padding:17px 18px; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:15px 15px 15px 5px; background:rgba(255,255,255,.64); }
.purification-grid summary { cursor:pointer; color:var(--guide-ink); font-weight:750; }
.purification-grid p { margin:10px 0 0; color:var(--muted); font-size:11px; }

/* Elif-Bâ */
.elif-hero { min-height:300px; display:grid; grid-template-columns:1.35fr .65fr; align-items:center; gap:25px; padding:clamp(34px,5vw,64px); color:white; overflow:hidden; position:relative; border-radius:30px 30px 30px 10px; background:
  radial-gradient(circle at 78% 20%,rgba(255,255,255,.13),transparent 23%),
  linear-gradient(128deg,color-mix(in srgb,var(--guide-strong) 86%,#214b62),color-mix(in srgb,var(--turquoise-dark) 60%,#574b77)); box-shadow:0 25px 60px rgba(var(--turquoise-rgb),.17); }
.elif-hero .eyebrow { color:#f3d28b; }
.elif-hero h2 { margin:9px 0 14px; color:white; font:400 clamp(34px,4vw,52px)/1.12 Georgia,serif; letter-spacing:-1.4px; }
.elif-hero p { max-width:700px; color:rgba(255,255,255,.72); font-size:13px; }
.elif-glyph { width:210px; height:210px; display:grid; place-items:center; position:relative; margin:auto; border:1px solid rgba(255,255,255,.16); border-radius:50%; }
.elif-glyph::before,.elif-glyph::after { content:""; position:absolute; inset:28px; border:1px solid rgba(255,255,255,.12); transform:rotate(45deg); border-radius:42% 42% 10px 42%; }
.elif-glyph::after { inset:58px; }
.elif-glyph span,.elif-glyph i,.elif-glyph b { position:absolute; color:#fff4d0; font:700 64px "Traditional Arabic","Times New Roman",serif; }
.elif-glyph i { transform:translate(-69px,48px); font-size:38px; opacity:.65; }
.elif-glyph b { transform:translate(70px,-46px); font-size:36px; opacity:.65; }
.alphabet-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.alphabet-grid article { min-width:0; min-height:184px; padding:15px 10px; text-align:center; border:1px solid rgba(var(--turquoise-rgb),.11); border-radius:17px 17px 17px 5px; background:linear-gradient(145deg,rgba(255,255,255,.82),color-mix(in srgb,var(--turquoise-soft) 38%,white)); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.alphabet-grid article:hover { transform:translateY(-4px); box-shadow:0 13px 27px rgba(var(--turquoise-rgb),.1); }
.alphabet-grid article.is-audio-playing { border-color:color-mix(in srgb,var(--orange) 42%,transparent); box-shadow:0 13px 27px color-mix(in srgb,var(--orange) 13%,transparent); }
.alphabet-grid article>span { display:block; color:var(--guide-gold); font-size:9px; letter-spacing:1px; text-align:left; }
.alphabet-grid article>p.arabic { margin:2px 0 0; color:var(--guide-ink); font-size:43px; line-height:1.3; text-align:center; }
.alphabet-grid h3 { margin:0 0 4px; color:var(--guide-ink); font-size:12px; }
.alphabet-grid small.arabic { display:block; color:var(--muted); font-size:16px; line-height:1.6; text-align:center; overflow-wrap:anywhere; }
.alphabet-grid .audio-hint { margin-top:7px; font-size:8px; letter-spacing:0; }
.alphabet-grid .audio-hint svg { width:13px;height:13px; }
.elif-rule-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.elif-rule-grid article { display:grid; grid-template-columns:120px 1fr; grid-template-rows:auto 1fr; gap:4px 18px; padding:21px; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:19px 19px 19px 6px; background:rgba(255,255,255,.68); }
.elif-rule-grid article>div { grid-row:1/3; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; border-radius:14px; background:linear-gradient(135deg,var(--turquoise-soft),color-mix(in srgb,var(--orange-soft) 32%,white)); }
.elif-rule-grid .arabic { margin:0; color:var(--guide-ink); font-size:36px; line-height:1.5; text-align:center; }
.elif-rule-grid article>div span { color:var(--turquoise-dark); font-size:11px; font-weight:700; }
.elif-rule-grid h3 { margin:4px 0; color:var(--guide-ink); font-size:16px; }
.elif-rule-grid article>p { margin:0; color:var(--muted); font-size:11px; }
.elif-rule-grid article>.audio-hint { grid-column:2; align-self:end; justify-self:start; margin-top:5px; }
.practice-list { display:grid; gap:10px; }
.practice-list article { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:15px; padding:18px 21px; border:1px solid rgba(var(--turquoise-rgb),.11); border-radius:17px 17px 17px 6px; background:rgba(255,255,255,.68); }
.practice-list article>span { width:40px;height:40px;display:grid;place-items:center;border-radius:14px 14px 14px 5px;color:white;background:var(--turquoise-dark);font:600 13px Georgia,serif; }
.practice-list h3 { margin:0; color:var(--guide-ink); font-size:13px; }
.practice-list .arabic { margin:2px 0; color:var(--guide-ink); font-size:30px; line-height:1.65; }
.practice-list small { color:var(--muted); font-size:11px; }
.practice-list .audio-hint { margin-top:7px; }

/* Resimli kılınış */
.step-layout { grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start; }
.step-list { position:sticky; top:70px; max-height:calc(100vh - 90px); overflow-y:auto; padding-right:5px; }
.step-list button { display:flex; align-items:center; gap:10px; min-height:47px; border-radius:13px 13px 13px 5px; transition:transform .18s ease,background .18s ease; }
.step-list button:hover { transform:translateX(4px); }
.step-list button>span { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:var(--turquoise-dark); background:var(--turquoise-soft); font-size:9px; }
.step-list button[aria-current="step"] { color:var(--guide-ink); background:linear-gradient(135deg,var(--turquoise-soft),color-mix(in srgb,var(--orange-soft) 24%,white)); border-color:rgba(var(--turquoise-rgb),.36); box-shadow:0 8px 18px rgba(var(--turquoise-rgb),.08); }
.step-list button[aria-current="step"]>span { color:white; background:var(--turquoise-dark); }
.step-stage { overflow:hidden; }
.step-progress { height:5px; margin:-34px -34px 28px; background:rgba(var(--turquoise-rgb),.08); }
.step-progress i { display:block; width:var(--step-progress); height:100%; border-radius:0 99px 99px 0; background:linear-gradient(90deg,var(--turquoise),var(--guide-gold)); transition:width .35s ease; }
.step-image { overflow:hidden; border-radius:18px 18px 18px 6px; }
.step-image img { border:0; border-radius:0; transition:transform .5s ease; }
.step-image:hover img { transform:scale(1.018); }
.step-image figcaption { padding:9px 13px; margin:0; color:var(--muted); background:var(--turquoise-soft); }
.step-detail { margin-top:17px; padding:20px; border:1px solid rgba(var(--turquoise-rgb),.1); border-radius:15px 15px 15px 5px; background:linear-gradient(135deg,var(--guide-soft),color-mix(in srgb,var(--turquoise-soft) 42%,white)); }
.step-recitation { margin-top:30px; }

/* Âyet vitrini */
.verse-showcase { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.verse-card { position:relative; overflow:hidden; min-height:420px; padding:clamp(28px,3vw,42px); color:white; border-radius:28px 28px 28px 9px; background:
  radial-gradient(circle at 88% 12%,rgba(255,255,255,.13),transparent 23%),
  linear-gradient(145deg,var(--guide-strong),color-mix(in srgb,var(--turquoise-dark) 55%,#385c6b)); box-shadow:0 22px 52px rgba(var(--turquoise-rgb),.15); }
.verse-card:nth-child(2) { background:linear-gradient(145deg,color-mix(in srgb,var(--orange) 48%,#875845),color-mix(in srgb,var(--guide-strong) 72%,#604e45)); }
.verse-card .eyebrow { color:#f4d694; }
.verse-card h2 { margin:9px 0 20px; color:white; font:400 28px Georgia,serif; }
.verse-card .arabic { min-height:130px; margin:10px 0; color:white; font-size:34px; line-height:2; }
.verse-reading { color:rgba(255,255,255,.72); font-size:12px; }
.verse-reading b { color:#f3d28a; }
.verse-card blockquote { margin:24px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); font:400 18px/1.7 Georgia,serif; }
.verse-index { position:absolute; right:18px; bottom:-18px; color:rgba(255,255,255,.05); font:700 100px Georgia,serif; }
.merit-grid { margin-top:18px; }

/* Zikirmatik tespih animasyonu */
.dhikr-panel { max-width:850px; padding:clamp(26px,4vw,50px); background:
  radial-gradient(circle at 50% 36%,rgba(var(--orange-rgb),.1),transparent 34%),
  color-mix(in srgb,var(--guide-card) 91%,transparent); }
.dhikr-intro h2 { margin:5px 0 6px; font:400 34px Georgia,serif; }
.dhikr-intro p { color:var(--muted); }
.dhikr-panel form { max-width:680px; margin:22px auto 0; padding:20px; border:1px solid rgba(var(--turquoise-rgb),.11); border-radius:18px 18px 18px 6px; background:rgba(255,255,255,.58); }
.target-presets { display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 14px; }
.target-presets button { padding:6px 11px; border:1px solid rgba(var(--turquoise-rgb),.16); border-radius:99px; color:var(--turquoise-dark); background:var(--turquoise-soft); font-size:10px; }
.target-presets button[aria-pressed="true"] { color:white; background:var(--turquoise-dark); }
.tasbih-stage { --bead-rotation:0deg; width:390px; height:390px; position:relative; display:grid; place-items:center; margin:30px auto 2px; }
.tasbih-stage::before { content:""; position:absolute; width:312px; height:312px; border:1px dashed rgba(var(--turquoise-rgb),.18); border-radius:50%; }
.tasbih-string { position:absolute; inset:50%; width:0; height:0; transform:rotate(var(--bead-rotation)); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.tasbih-bead { position:absolute; width:13px; height:21px; margin:-10px 0 0 -6px; border-radius:50% 50% 46% 46%; background:linear-gradient(135deg,color-mix(in srgb,var(--turquoise) 78%,white),var(--turquoise-dark)); box-shadow:inset -2px -3px 4px rgba(0,0,0,.13),0 4px 8px rgba(var(--turquoise-rgb),.14); transform:rotate(calc(var(--i) * 10.909deg)) translateY(-158px); transform-origin:6px 10px; }
.tasbih-bead:nth-child(3n) { background:linear-gradient(135deg,#efc972,color-mix(in srgb,var(--orange) 60%,#956530)); }
.tasbih-bead.is-active { box-shadow:0 0 0 5px rgba(var(--orange-rgb),.17),0 0 22px rgba(var(--orange-rgb),.45); filter:brightness(1.18); }
.tasbih-tail { position:absolute; left:-4px; top:157px; width:8px; height:82px; display:flex; flex-direction:column; gap:5px; align-items:center; }
.tasbih-tail::before { content:""; width:2px; height:24px; background:var(--guide-gold); }
.tasbih-tail i { width:10px; height:13px; border-radius:50%; background:var(--guide-gold); }
.tasbih-tail b { width:18px; height:26px; border-radius:5px 5px 13px 13px; background:linear-gradient(var(--guide-gold),var(--orange)); }
.counter-button { z-index:2; width:226px; height:226px; margin:0; border-width:10px; background:
  radial-gradient(circle at 35% 26%,rgba(255,255,255,.9),transparent 32%),
  linear-gradient(#fafcf6,#f4f8ef) padding-box,
  conic-gradient(var(--guide-gold) var(--progress),rgba(var(--turquoise-rgb),.1) 0) border-box; box-shadow:0 22px 50px rgba(var(--turquoise-rgb),.16),inset 0 0 30px rgba(var(--turquoise-rgb),.05); transition:transform .15s ease,box-shadow .15s ease; }
.counter-button small { display:block; color:var(--guide-gold); font-size:9px; letter-spacing:1.5px; }
.counter-button strong { font:400 65px/1.13 Georgia,serif; }
.counter-button span { font-size:9px; font-weight:800; letter-spacing:1.2px; }
.tasbih-stage.is-counting .counter-button { animation:counter-tap .34s ease; }
.tasbih-stage.is-counting .tasbih-bead.is-active { animation:bead-flash .34s ease; }
.counter-progress { font-weight:700; letter-spacing:.2px; }

.source-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:18px; }
.source-directory>div { padding:12px 15px; border:1px solid rgba(var(--turquoise-rgb),.1); border-radius:12px; background:var(--turquoise-soft); }
.source-directory .source-link { margin:0; font-size:12px; }

/* Dinî günler */
.year-switch { display:flex; width:max-content; gap:6px; margin:0 0 18px; padding:5px; border:1px solid rgba(var(--turquoise-rgb),.14); border-radius:14px; background:rgba(255,255,255,.64); }
.year-switch button { min-width:92px; padding:10px 18px; border:0; border-radius:10px; color:var(--guide-muted); background:transparent; font-weight:800; cursor:pointer; }
.year-switch button[aria-pressed="true"] { color:white; background:var(--turquoise-dark); box-shadow:0 6px 18px rgba(var(--turquoise-rgb),.18); }
.religious-notice { max-width:980px; }
.religious-calendar-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:24px 0 14px; }
.religious-calendar-head p { margin:0; color:var(--guide-muted); }
.religious-timeline { position:relative; display:grid; gap:14px; }
.religious-timeline::before { content:""; position:absolute; top:0; bottom:0; left:178px; width:1px; background:linear-gradient(var(--turquoise),rgba(var(--turquoise-rgb),.06)); }
.religious-day-card { position:relative; display:grid; grid-template-columns:160px 1fr; gap:36px; padding:24px 28px; border:1px solid rgba(var(--turquoise-rgb),.12); border-radius:20px 20px 20px 7px; background:rgba(255,255,255,.78); box-shadow:0 12px 35px rgba(var(--turquoise-rgb),.05); }
.religious-day-card::before { content:""; position:absolute; left:171px; top:33px; width:13px; height:13px; border:4px solid var(--guide-card); border-radius:50%; background:var(--turquoise); box-shadow:0 0 0 1px rgba(var(--turquoise-rgb),.25); }
.religious-day-card.is-next { border-color:rgba(var(--orange-rgb),.38); background:linear-gradient(125deg,rgba(255,255,255,.9),color-mix(in srgb,var(--orange-soft) 42%,white)); box-shadow:0 18px 48px rgba(var(--orange-rgb),.1); }
.religious-day-card.is-next::before { background:var(--orange); }
.religious-date time { display:block; color:var(--guide-ink); font:700 17px/1.35 Georgia,serif; }
.religious-date small { display:block; margin-top:5px; color:var(--guide-muted); font-size:11px; }
.religious-day-content h2 { margin:3px 0 7px; color:var(--guide-ink); font-size:23px; }
.religious-importance { margin:0 0 14px; padding:11px 14px; border-left:3px solid var(--orange); border-radius:3px 10px 10px 3px; color:color-mix(in srgb,var(--guide-ink) 82%,var(--orange)); background:color-mix(in srgb,var(--orange-soft) 54%,white); font-weight:650; }
.religious-rulings { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.religious-rulings li { display:grid; grid-template-columns:150px 1fr; align-items:start; gap:10px; }
.religious-rulings p { margin:0; color:var(--guide-muted); font-size:12px; line-height:1.65; }
.religious-rulings .source-link { display:block; width:max-content; margin:3px 0 0; }
.ruling-badge { display:inline-flex; justify-content:center; padding:6px 9px; border:1px solid rgba(var(--turquoise-rgb),.16); border-radius:999px; color:var(--turquoise-dark); background:var(--turquoise-soft); font-size:9px; font-weight:850; text-align:center; }

/* Kıble */
.qibla-layout { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(480px,1.28fr); gap:20px; align-items:start; }
.qibla-finder { text-align:center; }
#qiblaResult { display:grid; place-items:center; min-height:360px; }
.qibla-compass { position:relative; width:270px; aspect-ratio:1; margin:12px auto; border:12px solid transparent; border-radius:50%; background:radial-gradient(circle,#fff 0 47%,transparent 48%),repeating-conic-gradient(from -1deg,rgba(var(--turquoise-rgb),.55) 0 2deg,transparent 2deg 15deg) padding-box,linear-gradient(145deg,var(--turquoise-soft),#fff) border-box; box-shadow:inset 0 0 0 1px rgba(var(--turquoise-rgb),.16),0 20px 48px rgba(var(--turquoise-rgb),.12); }
.compass-point { position:absolute; color:var(--guide-muted); font-size:11px; font-weight:900; }
.compass-north { top:11px; left:50%; transform:translateX(-50%); color:var(--orange); }
.compass-east { right:13px; top:50%; transform:translateY(-50%); }
.compass-south { bottom:10px; left:50%; transform:translateX(-50%); }
.compass-west { left:13px; top:50%; transform:translateY(-50%); }
.qibla-needle { position:absolute; inset:22px; transform:rotate(var(--qibla-bearing)); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.qibla-needle i { position:absolute; top:29px; bottom:50%; left:50%; width:5px; transform:translateX(-50%); border-radius:5px; background:linear-gradient(var(--orange),var(--turquoise-dark)); box-shadow:0 4px 10px rgba(var(--orange-rgb),.25); }
.qibla-needle i::before { content:""; position:absolute; left:50%; top:-12px; transform:translateX(-50%); border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:17px solid var(--orange); }
.qibla-kaaba { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:40px; height:40px; transform:translate(-50%,-50%) rotate(45deg); border-radius:8px; color:#e1bd62; background:#263532; box-shadow:0 7px 19px rgba(20,34,31,.24); }
.qibla-reading { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:7px 12px; margin-top:-7px; }
.qibla-reading strong { color:var(--guide-ink); font:700 35px/1 Georgia,serif; }
.qibla-reading span { color:var(--turquoise-dark); font-weight:800; }
.qibla-reading small { flex-basis:100%; color:var(--guide-muted); }
.qibla-placeholder { margin:-5px 0 12px; color:var(--guide-muted); }
.qibla-locate { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:220px; margin:18px auto 2px; }
.qibla-locate svg { width:18px; }
#qiblaStatus.is-error { color:#a34a42; }
.qibla-map-panel .section-top { margin:0 0 14px; }
.qibla-map-panel .section-top h2 { margin:2px 0 0; }
.qibla-map { display:block; width:100%; height:650px; border:1px solid rgba(var(--turquoise-rgb),.14); border-radius:18px 18px 18px 6px; background:var(--turquoise-soft); }

@keyframes view-rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes logo-float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-11px) rotate(2deg)} }
@keyframes arch-breathe { from{transform:rotate(-10deg) scale(.98)} to{transform:rotate(-7deg) scale(1.04)} }
@keyframes star-pulse { 0%,100%{opacity:.45;transform:scale(.9) rotate(0)} 50%{opacity:1;transform:scale(1.15) rotate(18deg)} }
@keyframes orbit-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-9px) rotate(2deg)} }
@keyframes ring-arrive { from{transform:scale(.72) rotate(-80deg);opacity:0} to{transform:none;opacity:1} }
@keyframes stat-arrive { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:none} }
@keyframes counter-tap { 0%{transform:scale(1)} 45%{transform:scale(.94);box-shadow:0 10px 25px rgba(var(--turquoise-rgb),.13)} 100%{transform:scale(1)} }
@keyframes bead-flash { 50%{filter:brightness(1.6);box-shadow:0 0 0 9px rgba(var(--orange-rgb),.1),0 0 32px rgba(var(--orange-rgb),.55)} }

@media (max-width:1100px) {
  .debt-dashboard { grid-template-columns:130px 1fr 125px; }
  .debt-total.completed { display:none; }
  .learning-hero { grid-template-columns:1fr 220px; }
  .ablution-grid { grid-template-columns:repeat(2,1fr); }
  .term-grid { grid-template-columns:repeat(2,1fr); }
  .alphabet-grid { grid-template-columns:repeat(5,1fr); }
  .qibla-layout { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  #view { padding-top:27px; }
  .guide-nav { margin-inline:-18px; padding-inline:18px; }
  .home-hero { min-height:330px; }
  .home-hero-copy { padding:34px 27px; }
  .home-hero h1 { font-size:43px; }
  .debt-dashboard { grid-template-columns:105px 1fr; padding:20px; }
  .debt-ring { width:100px; }
  .debt-ring::before { width:79px; }
  .debt-ring strong { font-size:29px; }
  .debt-total { grid-column:1/-1; min-height:78px; }
  .learning-hero { grid-template-columns:1fr; padding:32px 26px; }
  .elif-hero { grid-template-columns:1fr; padding:32px 26px; }
  .learning-orbit { display:none; }
  .elif-glyph { display:none; }
  .learning-hero h2 { font-size:34px; }
  .readiness-grid,.ablution-grid,.recitation-grid,.call-table,.verse-showcase { grid-template-columns:1fr; }
  .call-table>div { border-right:0!important; grid-template-columns:1fr 1fr; }
  .recitation-card.compact { grid-column:auto; }
  .term-grid { grid-template-columns:1fr 1fr; }
  .purification-grid { grid-template-columns:1fr; }
  .alphabet-grid { grid-template-columns:repeat(4,1fr); }
  .elif-rule-grid { grid-template-columns:1fr; }
  .step-layout { grid-template-columns:1fr; }
  .step-list { position:static; width:100%; max-height:none; grid-template-columns:1fr; }
  .step-progress { margin:-20px -20px 24px; }
  .verse-card { min-height:0; }
  .tasbih-stage { width:340px; height:350px; transform:scale(.92); margin-inline:calc((100% - 340px)/2); }
  .tasbih-bead { transform:rotate(calc(var(--i) * 10.909deg)) translateY(-145px); }
  .tasbih-tail { top:144px; }
  .source-directory { grid-template-columns:1fr; }
  .religious-timeline::before { display:none; }
  .religious-day-card { grid-template-columns:1fr; gap:13px; padding:20px; }
  .religious-day-card::before { display:none; }
  .religious-rulings li { grid-template-columns:1fr; gap:5px; }
  .ruling-badge { width:max-content; }
  .religious-calendar-head { align-items:flex-start; flex-direction:column; }
  .qibla-map { height:520px; }
}

@media (max-width:410px) {
  .module-grid,.daily-grid { grid-template-columns:1fr; }
  .term-grid,.readiness-grid { grid-template-columns:1fr; }
  .alphabet-grid { grid-template-columns:repeat(3,1fr); }
  .elif-rule-grid article { grid-template-columns:92px 1fr; }
  .tasbih-stage { width:310px; height:325px; margin-inline:calc((100% - 310px)/2); }
  .tasbih-bead { transform:rotate(calc(var(--i) * 10.909deg)) translateY(-132px); }
  .tasbih-tail { top:131px; }
  .counter-button { width:196px; height:196px; }
  .counter-button strong { font-size:54px; }
}

@media (prefers-reduced-motion:reduce) {
  #view>*{animation:none!important}.hero-art img,.hero-art::before,.hero-art::after,.hero-art .star,.learning-orbit,.debt-dashboard::after{animation:none!important}
  .tasbih-string{transition:none!important}
}