.dhikr-v2-page { overflow-x: hidden; }
.dhikr-v2-page main a:focus-visible,
.dhikr-v2-page main button:focus-visible,
.dhikr-v2-page main input:focus-visible { outline: 3px solid var(--makki-gold); outline-offset: 3px; }
.dhikr-v2-hero,
.dhikr-v2-detail-hero { position: relative; overflow: hidden; background: linear-gradient(125deg, rgba(255,255,255,.7), transparent 58%), var(--makki-ivory); border-bottom: var(--makki-border); }
.dhikr-v2-hero::before,
.dhikr-v2-detail-hero::before { position: absolute; top: -190px; right: 10%; width: 360px; height: 360px; border: 1px solid rgba(198,161,91,.2); border-radius: 50%; content: ""; }
.dhikr-v2-hero__inner { display: grid; min-height: 390px; grid-template-columns: minmax(0,1fr) 240px; align-items: center; gap: 4rem; padding-block: clamp(3rem,6vw,5.5rem); }
.dhikr-v2-hero h1 { max-width: 790px; margin: .35rem 0 .9rem; font-size: clamp(2.65rem,5.7vw,5rem); }
.dhikr-v2-hero p { max-width: 700px; margin: 0; color: rgba(37,43,49,.76); font-size: clamp(1rem,1.7vw,1.15rem); }
.dhikr-v2-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.2rem; color: var(--makki-sage); font-size: .8rem; font-weight: 700; }
.dhikr-v2-breadcrumb a { color: var(--makki-navy); text-decoration: none; }
.dhikr-v2-hero__motif { display: grid; width: 210px; aspect-ratio: .82; place-items: center; justify-self: end; border: 1px solid rgba(23,59,87,.18); border-radius: 120px 120px 8px 8px; }
.dhikr-v2-hero__motif::before { position: absolute; width: 170px; aspect-ratio: .82; border: 1px solid rgba(198,161,91,.56); border-radius: 100px 100px 4px 4px; content: ""; }
.dhikr-v2-hero__motif span { position: relative; color: var(--makki-navy); font-family: "Noto Naskh Arabic", serif; font-size: 2.4rem; }
.dhikr-v2-library { background: #fff; }
.dhikr-v2-library__header { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,440px); align-items: end; gap: 2rem; margin-bottom: 1rem; }
.dhikr-v2-library__header h2 { margin: .25rem 0 0; font-size: clamp(2rem,4vw,3.2rem); }
.dhikr-v2-search { display: grid; height: 58px; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: 0 1rem; background: var(--makki-white); border: 1px solid rgba(23,59,87,.22); border-radius: var(--makki-radius-md); box-shadow: var(--makki-shadow-sm); }
.dhikr-v2-search > i { color: var(--makki-gold); }
.dhikr-v2-search input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; color: var(--makki-charcoal); font: 600 .94rem "Manrope", sans-serif; }
.dhikr-v2-search button { width: 34px; height: 34px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--makki-navy); }
.dhikr-v2-results-status { min-height: 1.5rem; margin: 0; color: var(--makki-sage); font-size: .82rem; }
.dhikr-v2-group { padding-top: clamp(2.8rem,6vw,5.5rem); }
.dhikr-v2-group[hidden], .dhikr-v2-guide-group[hidden], [data-dhikr-item][hidden] { display: none !important; }
.dhikr-v2-group__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(23,59,87,.13); }
.dhikr-v2-group__heading span { padding-bottom: .6rem; color: var(--makki-wood); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dhikr-v2-group__heading h2 { margin: 0 0 -.07em; order: -1; font-size: clamp(1.9rem,3.5vw,2.8rem); }
.dhikr-v2-main-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.dhikr-v2-main-card { display: grid; min-width: 0; min-height: 122px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1.35rem 1.45rem; background: var(--makki-white); border: var(--makki-border); border-top: 3px solid var(--makki-sand); border-radius: var(--makki-radius-md); color: var(--makki-navy-deep); text-decoration: none; box-shadow: var(--makki-shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.dhikr-v2-main-card:hover { border-color: rgba(198,161,91,.72); border-top-color: var(--makki-gold); color: var(--makki-navy-deep); box-shadow: var(--makki-shadow-md); transform: translateY(-2px); }
.dhikr-v2-card__copy { display: grid; min-width: 0; gap: .25rem; }
.dhikr-v2-main-card strong { font-family: "El Messiri",serif; font-size: 1.25rem; line-height: 1.2; }
.dhikr-v2-main-card small { color: var(--makki-sage); font-size: .72rem; font-weight: 700; }
.dhikr-v2-card__arrow { color: var(--makki-gold); font-size: 1.1rem; transition: transform 220ms ease; }
.dhikr-v2-main-card:hover .dhikr-v2-card__arrow,
.dhikr-v2-other-card:hover .dhikr-v2-card__arrow { transform: translateX(.2rem); }
.dhikr-v2-other-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.dhikr-v2-other-card { display: grid; min-width: 0; min-height: 66px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--makki-ivory); border: var(--makki-border); border-radius: var(--makki-radius-sm); color: var(--makki-navy-deep); text-decoration: none; box-shadow: 0 5px 15px rgba(16,42,63,.06); transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.dhikr-v2-other-card:hover { background: #f1ead9; border-color: rgba(198,161,91,.62); color: var(--makki-navy-deep); box-shadow: var(--makki-shadow-sm); transform: translateY(-2px); }
.dhikr-v2-other-card strong { min-width: 0; font-size: .85rem; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.dhikr-v2-guides__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
.dhikr-v2-guide-group { padding: clamp(1.4rem,2.7vw,2rem); background: var(--makki-navy-deep); border-radius: var(--makki-radius-md); color: #fff; }
.dhikr-v2-guide-group:nth-child(2) { background: var(--makki-navy); }
.dhikr-v2-guide-group:nth-child(3) { background: #40544c; }
.dhikr-v2-guide-group h3 { min-height: 2.6em; margin: 0 0 1rem; color: var(--makki-white); font-size: 1.55rem; }
.dhikr-v2-guide-group > div { display: grid; }
.dhikr-v2-guide-group a { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.88); font-size: .88rem; font-weight: 650; text-decoration: none; }
.dhikr-v2-guide-group a:hover { color: var(--makki-sand); }
.dhikr-v2-no-results, .dhikr-v2-unavailable { padding: clamp(2.5rem,6vw,5rem); text-align: center; background: var(--makki-ivory); border: var(--makki-border); border-radius: var(--makki-radius-lg); }
.dhikr-v2-no-results i, .dhikr-v2-unavailable > i { color: var(--makki-gold); font-size: 2rem; }
.dhikr-v2-no-results h2, .dhikr-v2-unavailable h1, .dhikr-v2-unavailable h2 { margin: .8rem 0 .35rem; }
.dhikr-v2-detail-hero__inner { padding-block: clamp(2.7rem,5.2vw,4.4rem); }
.dhikr-v2-detail-hero h1 { max-width: 900px; margin: .35rem 0 1rem; font-size: clamp(2.4rem,5vw,4.5rem); }
.dhikr-v2-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--makki-navy); font-size: .85rem; font-weight: 800; text-decoration: none; }
.dhikr-v2-reading { background: linear-gradient(180deg,var(--makki-white),var(--makki-ivory)); }
.dhikr-v2-content { width: min(100%,920px); margin-inline: auto; color: var(--makki-charcoal); font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.dhikr-v2-content p { margin: 0 0 1.25rem; }
.dhikr-v2-content h2 { margin: 2.4rem 0 1rem; font-size: clamp(1.7rem,3vw,2.35rem); }
.dhikr-v2-content h3 { margin: 2rem 0 .85rem; font-size: clamp(1.35rem,2.4vw,1.75rem); }
.dhikr-v2-content h4, .dhikr-v2-content h5, .dhikr-v2-content h6 { margin: 1.7rem 0 .75rem; }
.dhikr-v2-content ul, .dhikr-v2-content ol { margin: 0 0 1.4rem; padding-left: 1.35rem; }
.dhikr-v2-content li + li { margin-top: .45rem; }
.dhikr-v2-content blockquote { margin: 1.8rem 0; padding: 1rem 1.3rem; background: var(--makki-ivory); border-left: 3px solid var(--makki-gold); }
.dhikr-v2-content a { color: var(--makki-navy); font-weight: 750; text-underline-offset: .18em; }
.dhikr-article-content { font-family: "Manrope",sans-serif; }
.dhikr-article-content > :first-child { margin-top: 0; }
.dhikr-article-content > :last-child { margin-bottom: 0; }
.dhikr-article-content h1,
.dhikr-article-content h2,
.dhikr-article-content h3,
.dhikr-article-content h4,
.dhikr-article-content h5,
.dhikr-article-content h6 { color: var(--makki-navy-deep); font-family: "El Messiri",serif; font-style: normal; line-height: 1.3; }
.dhikr-article-content h1 { margin: clamp(2.6rem,5vw,3.3rem) 0 1rem; font-size: clamp(2.1rem,3.6vw,2.75rem); }
.dhikr-article-content h2 { margin: clamp(2.4rem,5vw,3.1rem) 0 1rem; font-size: clamp(1.85rem,3.1vw,2.4rem); }
.dhikr-article-content h3 { margin: clamp(1.8rem,4vw,2.2rem) 0 .8rem; color: var(--makki-navy); font-size: clamp(1.55rem,2.5vw,1.85rem); }
.dhikr-article-content h4 { margin: 1.75rem 0 .7rem; font-size: clamp(1.3rem,2vw,1.5rem); }
.dhikr-article-content h5 { margin: 1.6rem 0 .65rem; font-size: clamp(1.15rem,1.7vw,1.3rem); }
.dhikr-article-content h6 { margin: 1.5rem 0 .6rem; font-size: clamp(1.02rem,1.5vw,1.15rem); }
.dhikr-article-content p { margin: 0 0 1.25rem; font-family: "Manrope",sans-serif; line-height: 1.78; }
.dhikr-article-content ul,
.dhikr-article-content ol { margin: 0 0 1.45rem; padding-inline-start: 1.35rem; font-family: "Manrope",sans-serif; }
.dhikr-article-content li { padding-inline-start: .3rem; font-family: "Manrope",sans-serif; line-height: 1.72; }
.dhikr-article-content li + li { margin-top: .75rem; }
.dhikr-article-content li::marker { color: var(--makki-gold); font-weight: 800; }
.dhikr-article-content ul ul,
.dhikr-article-content ol ol,
.dhikr-article-content ul ol,
.dhikr-article-content ol ul { margin: .7rem 0 0; }
.dhikr-article-content blockquote { margin: 1.8rem 0; padding: 1.15rem 1.4rem .05rem; background: var(--makki-ivory); border-left: 3px solid var(--makki-gold); border-radius: 0 var(--makki-radius-sm) var(--makki-radius-sm) 0; font-family: "Manrope",sans-serif; }
.dhikr-article-content figcaption,
.dhikr-article-content small { font-family: "Manrope",sans-serif; line-height: 1.7; }
.dhikr-article-content strong,
.dhikr-article-content b,
.dhikr-article-content em,
.dhikr-article-content i { font-family: inherit; }
.dhikr-article-content strong,
.dhikr-article-content b { font-weight: 800; }
.dhikr-article-content .dhikr-article-arabic { font-family: "Noto Naskh Arabic",serif; line-height: 1.9; }
.dhikr-article-content .dhikr-article-related { margin: 2rem 0 0; padding: 0; border-block: 1px solid rgba(23,59,87,.14); list-style: none; }
.dhikr-article-content .dhikr-article-related__item { margin: 0; padding: 0; }
.dhikr-article-content .dhikr-related-link-row { margin: 1.15rem 0; background: rgba(248,245,237,.72); border: 1px solid rgba(23,59,87,.14); border-radius: var(--makki-radius-sm); }
.dhikr-article-content .dhikr-related-link { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: var(--makki-navy); font-family: "Manrope",sans-serif; font-size: clamp(.94rem,1.4vw,1.04rem); font-weight: 750; line-height: 1.5; text-decoration: none; }
.dhikr-article-content .dhikr-article-related .dhikr-related-link { padding-inline: .15rem; }
.dhikr-article-content .dhikr-related-link::after { flex: 0 0 auto; color: var(--makki-gold); content: "\2192"; font-size: 1.1rem; transition: transform var(--makki-transition); }
.dhikr-article-content .dhikr-related-link:hover,
.dhikr-article-content .dhikr-related-link:focus-visible { color: var(--makki-wood); }
.dhikr-article-content .dhikr-related-link:hover::after { transform: translateX(.2rem); }
.dhikr-detail__intro { margin-bottom: 2rem; padding: 1.4rem 1.6rem; background: var(--makki-ivory); border-left: 3px solid var(--makki-gold); border-radius: 0 var(--makki-radius-md) var(--makki-radius-md) 0; }
.dhikr-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 1.25rem; margin-top: 1.75rem; padding: clamp(1.5rem,4vw,2.75rem); background: var(--makki-white); border: var(--makki-border); border-radius: var(--makki-radius-lg); box-shadow: var(--makki-shadow-sm); }
.dhikr-entry > h2 { grid-row: 1; grid-column: 1; margin: 0 0 1.65rem; color: var(--makki-navy-deep); font-size: clamp(1.45rem,3vw,2rem); }
.dhikr-entry__arabic { grid-column: 1 / -1; padding: clamp(1.15rem,3vw,2.15rem) 0 clamp(1.4rem,3vw,2.3rem); color: var(--makki-navy-deep); font-family: "Noto Naskh Arabic",serif; font-size: clamp(1.875rem,2.4vw,2.125rem); line-height: 1.9; text-align: right; letter-spacing: 0; text-transform: none; }
.dhikr-entry__arabic p { margin: 0; }
.dhikr-entry__count { grid-row: 1; grid-column: 2; align-self: start; padding: .3rem .68rem; background: var(--makki-gold); border-radius: 999px; color: var(--makki-navy-deep); font-size: .76rem; font-weight: 850; white-space: nowrap; }
.dhikr-entry__part { grid-column: 1 / -1; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(23,59,87,.12); }
.dhikr-entry__part h3 { margin: 0 0 .85rem; color: var(--makki-wood); font-family: "Manrope",sans-serif; font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.dhikr-entry__part--translation { margin-top: 0; padding: 1.25rem 1.35rem .2rem; background: rgba(248,245,237,.72); border-top: 2px solid rgba(198,161,91,.55); border-radius: var(--makki-radius-sm); }
.dhikr-entry__part-content > :last-child { margin-bottom: 0; }
.dhikr-entry__disclosure { grid-column: 1 / -1; border-top: 1px solid rgba(23,59,87,.12); }
.dhikr-entry__disclosure:last-child { border-bottom: 1px solid rgba(23,59,87,.12); }
.dhikr-entry__disclosure summary { position: relative; display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 2.35rem .8rem .15rem; color: var(--makki-navy); cursor: pointer; font-size: .78rem; font-weight: 850; letter-spacing: .07em; list-style: none; text-transform: uppercase; transition: color 180ms ease, background-color 180ms ease; }
.dhikr-entry__disclosure summary::-webkit-details-marker { display: none; }
.dhikr-entry__disclosure summary::after { position: absolute; right: .25rem; width: 1.65rem; height: 1.65rem; border: 1px solid rgba(23,59,87,.2); border-radius: 50%; color: var(--makki-gold); content: "+"; font-size: 1.05rem; font-weight: 650; line-height: 1.48rem; text-align: center; }
.dhikr-entry__disclosure[open] summary::after { content: "−"; }
.dhikr-entry__disclosure summary:hover { color: var(--makki-wood); }
.dhikr-entry__disclosure summary:focus-visible { background: rgba(248,245,237,.8); border-radius: var(--makki-radius-sm); outline: 3px solid var(--makki-gold); outline-offset: 2px; }
.dhikr-entry__disclosure .dhikr-entry__part-content { padding: .2rem .15rem 1.35rem; }
.dhikr-entry__disclosure .dhikr-entry__part-content h4,
.dhikr-entry__disclosure .dhikr-entry__part-content h5,
.dhikr-entry__disclosure .dhikr-entry__part-content h6 { color: var(--makki-navy-deep); }
.dhikr-v2-attribution { padding-block: 1.2rem; background: #f0ecdf; border-top: var(--makki-border); }
.dhikr-v2-attribution p { margin: 0; color: var(--makki-sage); font-size: .78rem; text-align: center; }
.dhikr-v2-attribution a { color: var(--makki-navy); font-weight: 750; }
.dhikr-v2-attribution span { color: var(--makki-navy); font-weight: 750; }
.dhikr-names-gallery { display: grid; width: min(100%,720px); gap: clamp(1.75rem,3vw,2.25rem); margin-inline: auto; }
.dhikr-names-gallery__item { margin: 0; overflow: hidden; background: var(--makki-white); border: var(--makki-border); border-radius: var(--makki-radius-md); box-shadow: var(--makki-shadow-sm); }
.dhikr-names-gallery__item img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.dhikr-names-gallery__unavailable { padding: 1.5rem; background: var(--makki-ivory); border: var(--makki-border); border-radius: var(--makki-radius-md); text-align: center; }
@media (max-width: 1199.98px) { .dhikr-v2-main-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1100px) { .dhikr-v2-other-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 991.98px) { .dhikr-v2-guides__grid { grid-template-columns: 1fr; } .dhikr-v2-guide-group h3 { min-height: 0; } }
@media (max-width: 767.98px) { .dhikr-v2-hero__inner, .dhikr-v2-library__header { grid-template-columns: 1fr; } .dhikr-v2-hero__inner { min-height: 0; } .dhikr-v2-hero__motif { display: none; } .dhikr-v2-library__header { align-items: stretch; } .dhikr-v2-main-grid { grid-template-columns: 1fr; } .dhikr-v2-other-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .dhikr-v2-main-grid, .dhikr-v2-other-grid { grid-template-columns: 1fr; } .dhikr-v2-group__heading { align-items: flex-start; flex-direction: column; gap: .15rem; } .dhikr-v2-group__heading h2 { order: 0; } .dhikr-v2-group__heading span { padding-bottom: 0; } .dhikr-v2-main-card { min-height: 112px; padding: 1.15rem 1.2rem; } .dhikr-v2-other-card { min-height: 62px; padding: .8rem .9rem; } .dhikr-entry { column-gap: .75rem; border-radius: var(--makki-radius-md); } .dhikr-entry__arabic { font-size: clamp(1.6rem,7vw,1.8rem); line-height: 1.9; } .dhikr-entry__part--translation { padding: 1.1rem 1rem .1rem; } .dhikr-entry__disclosure summary { min-height: 56px; } .dhikr-article-content h1 { font-size: 2rem; } .dhikr-article-content h2 { margin-top: 2.25rem; font-size: 1.8rem; } .dhikr-article-content h3 { margin-top: 1.65rem; font-size: 1.5rem; } .dhikr-article-content h4 { font-size: 1.28rem; } .dhikr-article-content ul, .dhikr-article-content ol { padding-inline-start: 1.15rem; } .dhikr-article-content li + li { margin-top: .6rem; } .dhikr-article-content blockquote { padding-inline: 1rem; } .dhikr-article-content .dhikr-related-link { min-height: 52px; padding: .75rem .85rem; } }
@media (prefers-reduced-motion: reduce) { .dhikr-v2-main-card, .dhikr-v2-other-card, .dhikr-v2-card__arrow { transition: none; } }