:root{
--paper:#F3F4F7; --surface:#FFFFFF; --ink:#151D3B; --muted:#5A6380; --line:#DCDFE8;
--lapis:#172457; --lapis-2:#22347C; --lapis-deep:#0F1942;
--gold:#BE9850; --gilt:#D9BC78; --gold-ink:#7E5F22;
--ivory:#F3ECDD; --ivory-dim:#BDB8AC;
--folio:#FCF9F1; --folio-ink:#1A1A22; --fold:rgba(60,45,10,.10);
--tint:rgba(23,36,87,.05); --hl:rgba(190,152,80,.24); --pop:#FFFFFF;
--search-bg:#FBFAF6; --search-ink:#151D3B; --mark:rgba(190,152,80,.32);
--shadow:0 22px 48px -28px rgba(15,25,66,.5);
--f-display:"Alegreya","Iowan Old Style","Palatino Linotype",Georgia,serif;
--f-body:"Alegreya Sans","Segoe UI",system-ui,-apple-system,sans-serif;
--f-ar:"Amiri Quran","Amiri","Scheherazade New","Traditional Arabic",serif;
--f-ar-ui:"Amiri","Scheherazade New","Traditional Arabic",serif;
--ar-scale:1; --barh:64px;
--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1 25.56 6.56H33.44V14.44L39 20 33.44 25.56V33.44H25.56L20 39 14.44 33.44H6.56V25.56L1 20 6.56 14.44V6.56H14.44Z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--paper:#0B1024; --surface:#11183A; --ink:#E9E5DA; --muted:#9BA3BE; --line:#242D58;
--lapis:#1C2A66; --lapis-2:#28398A; --lapis-deep:#0A1030;
--gold:#C9A65E; --gilt:#DCC07E; --gold-ink:#D7B66F;
--ivory:#F3ECDD; --ivory-dim:#AEB0BA;
--folio:#161D3F; --folio-ink:#EEE8D7; --fold:rgba(0,0,0,.35);
--tint:rgba(201,166,94,.08); --hl:rgba(201,166,94,.24); --pop:#141C44;
--search-bg:#151E48; --search-ink:#F3ECDD; --mark:rgba(201,166,94,.38);
--shadow:0 22px 48px -24px rgba(0,0,0,.75);
color-scheme:dark;
}}
:root[data-theme="dark"]{
--paper:#0B1024; --surface:#11183A; --ink:#E9E5DA; --muted:#9BA3BE; --line:#242D58;
--lapis:#1C2A66; --lapis-2:#28398A; --lapis-deep:#0A1030;
--gold:#C9A65E; --gilt:#DCC07E; --gold-ink:#D7B66F;
--ivory:#F3ECDD; --ivory-dim:#AEB0BA;
--folio:#161D3F; --folio-ink:#EEE8D7; --fold:rgba(0,0,0,.35);
--tint:rgba(201,166,94,.08); --hl:rgba(201,166,94,.24); --pop:#141C44;
--search-bg:#151E48; --search-ink:#F3ECDD; --mark:rgba(201,166,94,.38);
--shadow:0 22px 48px -24px rgba(0,0,0,.75);
color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:6px;background:var(--gilt);color:#151D3B;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{margin:0;font:700 13px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gilt)}
.eyebrow.ink{color:var(--gold-ink)}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:500;letter-spacing:-.005em;text-wrap:balance}
[lang="ar"]{font-family:var(--f-ar)}
.star{display:inline-block;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ivory);text-decoration:none}
.brand svg{width:30px;height:30px;flex:none;color:var(--gilt);fill:none;stroke:currentColor;stroke-width:1.4}
.brand-word{font:500 22px/1 var(--f-display);letter-spacing:.005em;white-space:nowrap}
@media (max-width:420px){.brand-word{font-size:19px}.brand{gap:8px}.brand svg{width:26px;height:26px}}
.brand-word span{font-style:italic;color:var(--gilt)}
.top-r{display:flex;align-items:center;gap:8px}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:50%;background:transparent;color:var(--ivory);cursor:pointer;transition:background .2s,border-color .2s}
.icon-btn:hover{background:rgba(255,255,255,.07);border-color:var(--gold)}
.icon-btn svg{width:18px;height:18px}
.dil{position:relative;flex:none}
.dil-btn{display:flex;align-items:center;gap:5px;height:40px;padding:0 11px 0 13px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:999px;background:transparent;color:var(--ivory);font:700 13px/1 var(--f-body);letter-spacing:.06em;cursor:pointer;transition:background .2s,border-color .2s}
.dil-btn:hover,.dil-btn[aria-expanded="true"]{background:rgba(255,255,255,.07);border-color:var(--gold)}
.dil-btn svg{width:12px;height:12px;opacity:.8;transition:transform .18s}
.dil-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dil-m{position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:236px;max-height:min(420px,calc(100vh - 90px));overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 24px 48px -16px rgba(10,16,40,.45)}
.dil-m[hidden]{display:none}
.dil-m button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 15px/1.2 var(--f-body);text-align:left;cursor:pointer}
.dil-m button:hover,.dil-m button:focus-visible{background:var(--tint);outline:none}
.dil-m button[aria-checked="true"]{background:color-mix(in srgb,var(--gold) 16%,transparent);font-weight:700}
.dl-ad{flex:1;min-width:0}
.dl-ad[dir="rtl"]{text-align:left;font-family:var(--f-ar-ui,var(--f-body))}
.dl-k{font:700 11px/1 var(--f-body);letter-spacing:.08em;color:var(--muted)}
.dl-s{font-size:11px;color:var(--muted);font-style:italic}
.dil-m button.yok{cursor:default;opacity:.55}
.dil-m button.yok:hover{background:none}
@media (max-width:520px){.dil-btn{height:36px;padding:0 9px 0 10px}}
.girih{position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:16px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);font:500 15px var(--f-body);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{border-color:var(--gold);background:var(--tint)}
.btn.primary{background:var(--lapis);border-color:var(--lapis);color:var(--ivory)}
.btn.primary:hover{background:var(--lapis-2)}
.btn svg{width:16px;height:16px}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.seg button{min-height:2.3rem;padding:0 1rem;border:0;border-radius:999px;background:transparent;font:600 .95rem var(--f-body);color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.seg button:hover{color:var(--ink)}
.seg button b{margin-left:5px;font-weight:600;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"]{background:var(--lapis);color:var(--ivory)}
.seg button[aria-checked="true"] b,.seg button[aria-pressed="true"] b{color:var(--gilt)}
.end{color:var(--gold-ink);white-space:nowrap}
.foot{margin-top:clamp(64px,9vw,112px);border-top:1px solid var(--line);background:var(--surface)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-block:44px 36px}
.foot-brand{max-width:36ch}
.foot-brand .brand{color:var(--ink)}
.foot-brand .brand svg{color:var(--gold)}
.foot-brand .brand-word span{color:var(--gold-ink)}
.foot-brand p{margin:12px 0 0;color:var(--muted);font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;gap:24px 56px}
.foot-nav h2{margin:0 0 10px;font:700 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.foot-nav ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.foot-nav a{color:var(--ink);font-size:15px;text-decoration:none}
.foot-nav a:hover{color:var(--gold-ink)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-block:18px 28px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;max-width:calc(100% - 32px);padding:11px 16px;border-radius:6px;background:var(--ink);color:var(--paper);font-size:15px;box-shadow:var(--shadow);transform:translateX(-50%)}
@media (max-width:420px){.brand-word{font-size:19px}.brand{gap:8px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:640px){.brand-en{white-space:normal;max-width:12.5ch;font-size:17px;line-height:1.08}}
.sura-head{position:relative;isolation:isolate;overflow:hidden;color:var(--ivory);background:radial-gradient(120% 120% at 50% 0%,var(--lapis-2) 0%,var(--lapis) 55%,var(--lapis-deep) 100%)}
.sura-head::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23BE9850'%3E%3Cpath d='M80.00 56.57 L56.57 80.00 L23.43 80.00 L0.00 56.57 L-0.00 23.43 L23.43 -0.00 L56.57 0.00 L80.00 23.43Z' stroke-width='1'/%3E%3Cpath d='M40.00 11.00 L48.49 19.49 L60.51 19.49 L60.51 31.51 L69.00 40.00 L60.51 48.49 L60.51 60.51 L48.49 60.51 L40.00 69.00 L31.51 60.51 L19.49 60.51 L19.49 48.49 L11.00 40.00 L19.49 31.51 L19.49 19.49 L31.51 19.49Z' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0/80px 80px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 55%,transparent 35%,#000 90%);mask-image:radial-gradient(ellipse 60% 80% at 50% 55%,transparent 35%,#000 90%);pointer-events:none}
.picker{position:relative;display:flex;align-items:center}
.picker select{height:40px;max-width:min(46vw,240px);padding:0 34px 0 14px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:999px;background:transparent;color:var(--ivory);font:500 15px var(--f-body);cursor:pointer;-webkit-appearance:none;appearance:none}
.picker select:hover{border-color:var(--gold)}
.picker select option{background:var(--surface);color:var(--ink)}
.picker::after{content:"";position:absolute;right:15px;top:15px;width:7px;height:7px;border-right:1.5px solid var(--gilt);border-bottom:1.5px solid var(--gilt);transform:rotate(45deg);pointer-events:none}
.picker[hidden]{display:none}
.sp-btn{position:relative;height:40px;max-width:min(46vw,240px);padding:0 34px 0 14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:999px;background:transparent;color:var(--ivory);font:500 15px var(--f-body);text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.sp-btn:hover,.sp-btn[aria-expanded="true"]{border-color:var(--gold)}
.sp-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sp-btn::after{content:"";position:absolute;right:15px;top:15px;width:7px;height:7px;border-right:1.5px solid var(--gilt);border-bottom:1.5px solid var(--gilt);transform:rotate(45deg);transition:transform .18s}
.sp-btn[aria-expanded="true"]::after{top:18px;transform:rotate(-135deg)}
.sp-pop{position:absolute;z-index:70;display:flex;flex-direction:column;max-height:min(480px,calc(100vh - 120px));border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 24px 48px -16px rgba(10,16,40,.45);overflow:hidden;animation:spIn .14s ease-out}
.sp-pop[hidden]{display:none}
@keyframes spIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sp-ara{display:flex;align-items:center;gap:8px;flex:none;padding:10px 12px;border-bottom:1px solid var(--line)}
.sp-ara svg{flex:none;width:18px;height:18px;color:var(--muted)}
.sp-ara input{flex:1;min-width:0;height:36px;padding:0 4px;border:0;background:transparent;color:var(--ink);font:500 16px var(--f-body);outline:none}
.sp-ara input::placeholder{color:var(--muted);font-weight:400}
.sp-ara input::-webkit-search-cancel-button{cursor:pointer}
.sp-list{flex:1;min-height:0;margin:0;padding:6px;overflow:auto;overscroll-behavior:contain;list-style:none}
.sp-list li{display:grid;grid-template-columns:2.2rem minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:.6rem;padding:8px 10px;border-radius:8px;color:var(--ink);cursor:pointer}
.sp-list li[aria-selected="true"]{background:var(--hl)}
.sp-list li.cur .sp-a{color:var(--gold-ink)}
.sp-n{font:600 .82rem/1 var(--f-body);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.sp-a{font:500 15px/1.25 var(--f-body);white-space:nowrap}
.sp-m{overflow:hidden;font-size:.85rem;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.sp-yok{margin:0;padding:18px 16px;color:var(--muted);font-size:.95rem;text-align:center}
.head-in{display:flex;flex-direction:column;align-items:center;padding-block:.6rem 2.2rem;text-align:center}
.cartouche{position:relative;width:min(40rem,100%);aspect-ratio:640/112}
.cartouche svg{position:absolute;inset:0;width:100%;height:100%}
.cartouche .t{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(1.5rem,4.6vw,2.35rem)/1 var(--f-ar);color:var(--gilt)}
.cartouche .side{position:absolute;top:50%;font:400 clamp(.7rem,1.6vw,.95rem)/1 var(--f-ar-ui);color:var(--ivory-dim);transform:translateY(-50%)}
.cartouche .side.r{right:14%}.cartouche .side.l{left:14%}
.sura-head h1{margin-top:1.15rem;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.1;color:var(--ivory)}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.1rem;margin:.75rem 0 0;padding:0;list-style:none;font-size:.95rem;color:var(--ivory-dim)}
.facts b{margin-left:.3rem;font:500 1.08rem var(--f-display);color:var(--gilt);font-variant-numeric:tabular-nums}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.4rem;padding-block:.6rem}
.where{margin:0 auto 0 0;font:500 1.06rem/1.2 var(--f-display);white-space:nowrap}
.where span{font:400 .9rem var(--f-body);color:var(--muted)}
.where b{font-weight:500;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.ctl{display:flex;align-items:center;gap:.55rem}
.vstrip{order:9;flex:1 1 100%;min-width:0}
.vs-in{--fl:1.4rem;--fr:1.4rem;display:flex;align-items:center;gap:.35rem;overflow-x:auto;overscroll-behavior-x:contain;padding:.15rem .1rem .45rem;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--gold) 45%,transparent) transparent;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.vs-in.at-start{--fl:0px}.vs-in.at-end{--fr:0px}
.vs-in::-webkit-scrollbar{height:6px}
.vs-in::-webkit-scrollbar-thumb{border-radius:3px;background:color-mix(in srgb,var(--gold) 45%,transparent)}
.vg{display:inline-flex;flex:none;gap:1px;padding:2px;border-radius:999px;background:var(--tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 32%,transparent);transition:background .2s,box-shadow .2s}
.vn{display:grid;place-items:center;flex:none;min-width:1.9rem;height:1.9rem;padding:0 .35rem;border-radius:999px;font:600 .8rem/1 var(--f-body);color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.vn:hover{background:var(--hl);color:var(--ink)}
.vn[aria-current="true"]{background:var(--lapis);color:var(--ivory)}
html[data-mode="grup"] .vg.cur{background:var(--hl);box-shadow:inset 0 0 0 1.5px var(--gold)}
html[data-mode="grup"] .vg.cur .vn:not([aria-current="true"]){color:var(--ink)}
.ctl-label{font:700 .68rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.size{display:inline-flex;overflow:hidden;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.size button{width:2.6rem;height:2.4rem;border:0;background:transparent;font-family:var(--f-ar-ui);line-height:1;color:var(--ink);cursor:pointer}
.size button + button{border-left:1px solid var(--line)}
.size button:hover{background:var(--hl)}
.size .s1{font-size:1rem}.size .s2{font-size:1.45rem}
:is(#segMode,#segTr) button[aria-checked]{background:transparent;color:var(--muted)}
:is(#segMode,#segTr) button[aria-checked]:hover{color:var(--ink)}
html:not([data-mode="grup"]) #segMode [data-mode="ayet"],html[data-mode="grup"] #segMode [data-mode="grup"],
html:not([data-tr="acik"]):not([data-tr="off"]) #segTr [data-tr="meal"],html[data-tr="acik"] #segTr [data-tr="acik"],html[data-tr="off"] #segTr [data-tr="off"]{background:var(--lapis);color:var(--ivory)}
.reader{padding-bottom:1rem}
.intro{max-width:52rem;margin:1.6rem auto 0;color:var(--muted);font-size:.98rem;line-height:1.55;text-align:center;text-wrap:balance}
.intro .note{display:block;margin-top:.35rem;font-size:.9rem;color:var(--gold-ink)}
html[data-mode="grup"] .i-ayet,html:not([data-mode="grup"]) .i-grup{display:none}
.besmele{margin:1.5rem 0 0;text-align:center}
.besmele p{margin:0;font-size:calc(2.1rem * var(--ar-scale));line-height:2.3;color:var(--ink)}
.besmele small{display:block;margin-top:.5rem;font:italic 400 1.02rem var(--f-display);color:var(--muted)}
.besmele.none{margin-top:1.4rem}
.besmele.none small{margin:0}
.tr-cevik,.tr-acik{margin:0;font-family:var(--f-display);color:var(--ink)}
.tr-acik .mk{margin:0;font-weight:500}
.tr-acik .am{margin-top:.45rem;color:color-mix(in srgb,var(--ink) 84%,var(--muted))}
.tr-acik .am p{margin:0 0 .55rem;font-size:.94em;line-height:1.78}
.tr-acik .am p:last-child{margin-bottom:0}
.tr-acik .am b{font-weight:600;color:var(--ink)}
.tr-acik .mk + .am{padding-left:.9rem;border-left:2px solid color-mix(in srgb,var(--gold) 38%,transparent)}
.vno{display:none}
.ma{margin-top:.55rem}
.ma summary{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem 0;font:700 .7rem/1.2 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);cursor:pointer;list-style:none}
.ma summary::-webkit-details-marker{display:none}
.ma summary::before{content:"";width:.42rem;height:.42rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.ma[open] summary::before{transform:rotate(45deg)}
.ma summary:hover{color:var(--ink)}
.ma > div{margin-top:.4rem;padding-left:.9rem;border-left:2px solid var(--line)}
.ma p{margin:0 0 .55rem;font-size:.92em;line-height:1.75;color:var(--muted)}
.ma b{font-weight:600;color:var(--ink)}
.about{max-width:54rem;margin:1.8rem auto 0;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow)}
.about summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;padding:1rem 3rem 1rem 1.3rem;position:relative;cursor:pointer;list-style:none}
.about summary::-webkit-details-marker{display:none}
.about summary::after{content:"";position:absolute;right:1.35rem;top:1.35rem;width:.55rem;height:.55rem;border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink);transform:rotate(45deg);transition:transform .2s}
.about[open] summary::after{top:1.6rem;transform:rotate(-135deg)}
.about summary:hover .ab-k{color:var(--gold-ink)}
.ab-k{font:500 1.3rem/1.2 var(--f-display);color:var(--ink)}
.ab-t{font-size:.92rem;color:var(--muted)}
.ab-body{padding:.2rem 1.3rem 1.4rem;border-top:1px solid var(--line)}
.ab-body p{max-width:70ch;margin:.85rem 0 0;font:400 1.08rem/1.78 var(--f-display);color:var(--ink)}
.ab-body p > b:first-child{color:var(--gold-ink)}
.ab-body h3{margin:1.5rem 0 0;font:700 .72rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.tr-lab{display:block;margin-bottom:.35rem;font:700 .7rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
html:not([data-has-acik]) .tr-acik,html[data-has-acik]:not([data-tr="acik"]) .tr-acik{display:none!important}
html[data-has-acik][data-tr="acik"] .tr-cevik{display:none!important}
html[data-tr="off"] :is(.tr-cevik,.tr-acik,.pg-tr){display:none!important}
html[data-tr="off"] .besmele:not(.none) small,html[data-tr="off"] :is(.i-ayet,.i-grup,.intro .note){display:none}
html:not([data-tr="off"]) .i-off{display:none}
@keyframes flash{0%{background:var(--hl);box-shadow:0 0 0 .5rem var(--hl)}100%{background:transparent;box-shadow:0 0 0 .5rem transparent}}
.flash{animation:flash 1.9s ease-out}
.grp,.v{scroll-margin-top:calc(var(--barh) + 1rem)}
html:not([data-mode="grup"]) .grups{max-width:54rem;margin:1.6rem auto 0}
html:not([data-mode="grup"]) .grp{position:relative;display:flex;flex-direction:column;padding-left:4.6rem}
html:not([data-mode="grup"]) .grp + .orn + .grp{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line)}
html:not([data-mode="grup"]) :is(.book,.pg-ar,.frame,.frame-in,.mushaf,.pg-tr,.acik){display:contents}
html:not([data-mode="grup"]) :is(.corner,.cap,.orn,.cnt,.to-ayet){display:none}
html:not([data-mode="grup"]) .grp-h{position:absolute;top:0;bottom:0;left:0;width:4.6rem}
html:not([data-mode="grup"]) .grp-h::before{content:"";position:absolute;top:1.5rem;bottom:1.5rem;left:50%;width:2px;border-radius:2px;background:linear-gradient(var(--gold),color-mix(in srgb,var(--gold) 30%,transparent));transform:translateX(-50%)}
html:not([data-mode="grup"]) .grp[data-n="1"] .grp-h::before{top:2.15rem;bottom:auto;width:.5rem;height:.5rem;border-radius:50%;background:color-mix(in srgb,var(--gold) 60%,transparent)}
html:not([data-mode="grup"]) .grp-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.to-grup{position:sticky;top:calc(var(--barh) + .9rem);z-index:1;display:block;margin:1.1rem auto 0;padding:.3rem .55rem;border:1px solid color-mix(in srgb,var(--gold) 65%,transparent);border-radius:999px;background:var(--surface);font:700 .8rem/1.2 var(--f-body);color:var(--gold-ink);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s,color .2s}
.to-grup small{display:block;font-size:.66rem;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.to-grup:hover{border-color:var(--lapis);background:var(--lapis);color:var(--ivory)}
.to-grup:hover small{color:var(--ivory-dim)}
html:not([data-mode="grup"]) .v{position:relative;display:block;padding:1.05rem 0 1.1rem 2.9rem;font-size:calc(2rem * var(--ar-scale));line-height:2.25;text-align:right;color:var(--ink);border-radius:6px}
html:not([data-mode="grup"]) .v::before{content:attr(data-v);position:absolute;top:1.65rem;left:0;display:grid;place-items:center;width:1.95rem;height:1.95rem;border-radius:50%;background:var(--lapis);color:var(--ivory);font:700 .8rem/1 var(--f-body);font-variant-numeric:tabular-nums}
html:not([data-mode="grup"]) .v + .v{border-top:1px dashed var(--line)}
html:not([data-mode="grup"]) .v[data-cz]::after{content:attr(data-cz) ". cüz";position:absolute;top:.3rem;right:0;direction:ltr;unicode-bidi:isolate;font:700 .66rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.vh{display:none}
html:not([data-mode="grup"]) .vh{display:flex;align-items:center;gap:.9rem;margin:1.5rem 0 0 2.9rem;font:700 .84rem/1.2 var(--f-body);letter-spacing:.04em;color:var(--gold-ink);font-variant-numeric:tabular-nums;text-align:center}
html:not([data-mode="grup"]) .vh::before,html:not([data-mode="grup"]) .vh::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--gold) 40%,var(--line))}
html:not([data-mode="grup"]) .grp .vh:first-of-type{margin-top:.6rem}
.vh :is(a,span){flex:none;padding:.32rem .85rem;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;background:var(--surface);color:inherit;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.vh a:hover,.vh a:focus-visible{border-color:var(--lapis);background:var(--lapis);color:var(--ivory);outline:none}
html:not([data-mode="grup"]):not([data-preview]) .grp{padding-left:0}
html:not([data-mode="grup"]):not([data-preview]) .grp-h{display:none}
html:not([data-mode="grup"]):not([data-preview]) .grp + .orn + .grp{margin-top:0;padding-top:0;border-top:0}
html:not([data-mode="grup"]) .grp:has(.vh) .v{padding-top:.5rem}
html:not([data-mode="grup"]) .grp:has(.vh) .v + .v{border-top:0}
html:not([data-mode="grup"]) .grp:has(.vh) .v::before{content:none}
html:not([data-mode="grup"]) .grp:has(.vh) .v[data-cz]{padding-top:1.4rem}
html:not([data-mode="grup"]) .grp:has(.vh) .vplay{top:1.15rem}
html:not([data-mode="grup"]) .grp:has(.vh) .v[data-cz] .vplay{top:2.05rem}
html:not([data-mode="grup"]) .tr-cevik{margin:.15rem 0 1.4rem 2.9rem;max-width:66ch;font-size:1.16rem;line-height:1.75}
html:not([data-mode="grup"]) .grp[data-n="1"] .tr-lab{display:none}
html:not([data-mode="grup"]) .tr-acik{margin:-.25rem 0 1.15rem 2.9rem;max-width:66ch;font-size:1.13rem;line-height:1.75}
html[data-mode="grup"] .grups{max-width:76rem;margin:2rem auto 0}
html[data-mode="grup"] .to-grup{display:none}
html[data-mode="grup"] .orn{display:flex;align-items:center;gap:1rem;max-width:20rem;margin:2.8rem auto;color:var(--gold)}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--gold) 50%,transparent)}
.orn i{width:1.1rem;height:1.1rem}
html[data-mode="grup"] .grp-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.6rem 1rem;margin-bottom:.9rem}
html[data-mode="grup"] .grp-t{flex:1 0 100%;display:flex;align-items:center;gap:.9rem;margin:0;font:700 .92rem/1.2 var(--f-body);letter-spacing:.04em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
html[data-mode="grup"] .grp-t::before,html[data-mode="grup"] .grp-t::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--gold) 40%,var(--line))}
html[data-mode="grup"] .grp-t>span{flex:none;padding:.38rem 1rem;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;background:var(--surface);white-space:nowrap}
html[data-mode="grup"] .cnt{display:none}
html[data-mode="grup"] .grups:has(.grp-t>span) .orn{display:none}
html[data-mode="grup"] .grups:has(.grp-t>span) .orn + .grp{margin-top:3.2rem}
.cnt{color:var(--muted);font-size:.95rem}
.to-ayet{margin-left:auto;padding:.35rem .2rem;border:0;background:none;font:600 .95rem var(--f-body);color:var(--gold-ink);cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 60%,transparent);text-underline-offset:4px}
.to-ayet:hover{color:var(--ink)}
html[data-mode="grup"] .book{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tr ar";border:1px solid var(--line);border-radius:6px;background:var(--surface);box-shadow:var(--shadow)}
html[data-mode="grup"] .book::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2.4rem;background:linear-gradient(90deg,transparent,var(--fold) 50%,transparent);transform:translateX(-50%);pointer-events:none}
html[data-mode="grup"] :is(.pg-ar,.pg-tr){display:flex;flex-direction:column;min-width:0;padding:2rem 2.3rem 1.2rem}
html[data-mode="grup"] .pg-tr{grid-area:tr}
html[data-mode="grup"] .pg-ar{grid-area:ar;border-radius:0 6px 6px 0;background:var(--folio)}
html[data-mode="grup"] .frame{position:relative;padding:5px;border:1.5px solid var(--gold)}
html[data-mode="grup"] .frame-in{padding:1.3rem 1.4rem;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.corner{position:absolute;width:13px;height:13px;color:var(--gold)}
.corner.tl{top:-7px;left:-7px}.corner.tr{top:-7px;right:-7px}.corner.bl{bottom:-7px;left:-7px}.corner.br{right:-7px;bottom:-7px}
html[data-mode="grup"] .grp.sticky .frame{position:sticky;top:calc(var(--barh) + 1.2rem)}
html[data-mode="grup"] .mushaf{margin:0;font-size:calc(1.85rem * var(--ar-scale));line-height:2.4;color:var(--folio-ink);text-align:justify;text-align-last:right}
html[data-mode="grup"] .v{border-radius:4px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .18s,box-shadow .18s}
html[data-mode="grup"] .v.hl,html[data-mode="grup"] .tr-acik.hl{background:var(--hl);box-shadow:0 0 0 3px var(--hl)}
html[data-mode="grup"] .tr-cevik{font-size:1.15rem;line-height:1.85}
html[data-mode="grup"] .tr-lab{display:none}
html[data-mode="grup"] .tr-acik{margin:0 0 1.05rem;border-radius:4px;font-size:1.1rem;line-height:1.8;cursor:pointer}
html[data-mode="grup"] .vno{display:inline;margin-right:.3em;font:700 .7em/1 var(--f-body);color:var(--gold-ink);vertical-align:.45em;font-variant-numeric:tabular-nums}
html[data-has-acik][data-tr="acik"] .c-meal,html:not([data-tr="acik"]) .c-acik,html:not([data-has-acik]) .c-acik{display:none}
html[data-mode="grup"] .cap{order:1000}
html[data-mode="grup"][data-tr="off"] :is(.book,.grp-h){max-width:50rem;margin-inline:auto}
html[data-mode="grup"][data-tr="off"] .book{grid-template-columns:minmax(0,1fr);grid-template-areas:"ar"}
html[data-mode="grup"][data-tr="off"] .book::after{display:none}
html[data-mode="grup"][data-tr="off"] .pg-ar{border-radius:6px}
.cap{margin:auto 0 0;padding-top:1.2rem;font:700 .66rem/1 var(--f-body);letter-spacing:.18em;text-align:center;text-transform:uppercase;color:var(--muted)}
.credits{max-width:54rem;margin:3.4rem auto 0;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);text-align:center}
.credits p{margin:.2rem 0}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:54rem;margin:2.2rem auto 0}
.pager a{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);text-decoration:none;transition:border-color .2s,background .2s}
.pager a:hover{border-color:var(--gold);background:var(--tint)}
.pager .nx{text-align:right;grid-column:2}
.pager small{font:700 .7rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.pager b{font:500 1.25rem/1.25 var(--f-display)}
.pager span{font-size:.88rem;color:var(--muted)}
.vnav{margin-top:2.4rem}
.vnav-all{max-width:54rem;margin:1rem auto 0;font-size:.98rem;text-align:center}
.vnav-all a{font-weight:600;color:var(--gold-ink);text-underline-offset:3px}
html.vp-full :is(.vnav,.vnav-all){display:none}
.sura-head h1 .h1-v{color:var(--gilt)}
.h1-ses{margin:.55rem 0 0;font-size:1rem}
.h1-ses a{display:inline-flex;align-items:center;gap:.45rem;color:var(--gilt);text-decoration:none}
.h1-ses a:hover{text-decoration:underline;text-underline-offset:3px}
.h1-ses svg{width:1.05em;height:1.05em;fill:currentColor}.h1-ses .i-pause{display:none}
.pager-nz{max-width:54rem;margin:1.1rem auto 0;font-size:.95rem;line-height:1.6;color:var(--muted);text-align:center;text-wrap:balance}
.pager-nz a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 45%,transparent);text-underline-offset:3px}
.pager-nz a:hover{color:var(--ink)}
.pager-nz .all{display:inline-block;margin-top:.3rem}
@media (max-width:900px){
html[data-mode="grup"] .book{grid-template-columns:minmax(0,1fr);grid-template-areas:"ar" "tr"}
html[data-mode="grup"] .book::after{display:none}
html[data-mode="grup"] .pg-ar{border-bottom:1px solid var(--line);border-radius:6px 6px 0 0}
html[data-mode="grup"] :is(.pg-ar,.pg-tr){padding:1.4rem 1.2rem 1rem}
html[data-mode="grup"] .frame-in{padding:1rem}
}
@media (max-width:640px){
body{font-size:16px}
.bar-in{gap:.45rem .5rem;padding-block:.45rem}
.where{display:none}
.vstrip{order:1;flex:1 1 calc(100% - 6.4rem)}
.vs-in{padding-bottom:.15rem;scrollbar-width:none}
.vs-in::-webkit-scrollbar{display:none}
.ctl-size{order:2}
.ctl:not(.ctl-size){order:3;flex:1 1 auto}
.ctl.ctl-gor{order:4;flex:none}
.ctl-label{display:none}
.ctl:not(.ctl-size) .seg{flex:1}
.seg button{flex:1;min-height:2.2rem;padding:0 .55rem}
.size button{height:2.2rem}
.cartouche .side{display:none}
.picker select{max-width:44vw}
.sp-btn{max-width:44vw}
.sp-pop{max-height:min(420px,calc(100vh - 140px))}
.sura-head .brand-word{display:none}
html:not([data-mode="grup"]) .grp{padding-left:2.7rem}
html:not([data-mode="grup"]) .grp-h{width:2.7rem}
.to-grup{padding:.3rem .2rem;font-size:.72rem}
.to-grup small{display:none}
html:not([data-mode="grup"]) .v{padding-left:2.4rem;font-size:calc(1.7rem * var(--ar-scale))}
html:not([data-mode="grup"]) .v::before{width:1.75rem;height:1.75rem;top:1.5rem}
html:not([data-mode="grup"]) .vh{margin-left:0;gap:.6rem}
html:not([data-mode="grup"]) .grp:has(.vh) .vplay{top:1rem}
html:not([data-mode="grup"]) :is(.tr-cevik,.tr-acik){margin-left:0}
.about summary{padding:.9rem 2.6rem .9rem 1rem}
.about summary::after{right:1.1rem}
.ab-body{padding:.1rem 1rem 1.2rem}
.ab-body p{font-size:1.04rem}
html[data-mode="grup"] .mushaf{font-size:calc(1.6rem * var(--ar-scale))}
.pager{grid-template-columns:minmax(0,1fr)}
.pager .nx{grid-column:1}
}
@media (max-width:420px){.hx{display:none}}
html[data-layers]:not([data-mode="grup"]) .L-ce,
html[data-layers][data-mode="grup"] .L-am,
html[data-layers][data-mode="grup"] .L-cv,
html[data-mode="grup"] .lp-row:has(>input[data-l="am"]),
html[data-mode="grup"] .lp-row:has(>input[data-l="cv"]),
html[data-layers]:not([data-show~="ok"]) .L-ok,
html[data-layers]:not([data-show~="cv"]) .L-cv,
html[data-layers]:not([data-show~="am"]) .L-am,
html[data-layers]:not([data-show~="il"]) .L-il{display:none!important}
.lb,.L-h{display:none;font:700 .66rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.lb{margin-bottom:.2rem}
.L-h{margin:0 0 .55rem}
html[data-txt="n"]:not([data-mode="grup"]) .lb{display:block}
html[data-txt="n"][data-mode="grup"] .L-h,html[data-layers][data-mode="grup"] .L-ce>.L-h{display:block}
.lv p{margin:0}
html[data-layers]:not([data-mode="grup"]) :is(.lv-cv,.lv-am)>.lb,
html[data-layers][data-mode="grup"] :is(.L-cv,.L-am)>.L-h{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
:is(.lv-cv,.lv-am)>.lb::after,:is(.L-cv,.L-am)>.L-h::after{content:"";flex:none;width:.42rem;height:.42rem;margin-top:-.2rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s}
:is(.lv-cv,.lv-am)>.lb:hover,:is(.L-cv,.L-am)>.L-h:hover{color:var(--ink)}
:is(.lv-cv,.lv-am)>.lb:focus-visible,:is(.L-cv,.L-am)>.L-h:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
html[data-layers]:not([data-mode="grup"])[data-kapali~="cv"] .lv-cv>:not(.lb),
html[data-layers]:not([data-mode="grup"])[data-kapali~="am"] .lv-am>:not(.lb),
html[data-layers][data-mode="grup"][data-kapali~="cv"] .L-cv>:not(.L-h),
html[data-layers][data-mode="grup"][data-kapali~="am"] .L-am>:not(.L-h){display:none!important}
html[data-layers][data-kapali~="cv"] :is(.lv-cv>.lb,.L-cv>.L-h)::after,
html[data-layers][data-kapali~="am"] :is(.lv-am>.lb,.L-am>.L-h)::after{margin-top:0;transform:rotate(-45deg)}
html[data-layers][data-kapali~="cv"] :is(.lv-cv>.lb,.L-cv>.L-h),
html[data-layers][data-kapali~="am"] :is(.lv-am>.lb,.L-am>.L-h){color:color-mix(in srgb,var(--gold-ink) 72%,var(--muted))}
html[data-layers]:not([data-kapali~="cv"]) :is(.lv-cv>.lb,.L-cv>.L-h),
html[data-layers]:not([data-kapali~="am"]) :is(.lv-am>.lb,.L-am>.L-h),
html[data-layers] .L-ce>.L-h{margin-bottom:.45rem}
.lv-ok p{font:italic 400 1.08rem/1.6 var(--f-display);color:color-mix(in srgb,var(--gold-ink) 82%,var(--ink))}
.lv-cv p,.lv-ce p{font:400 1.16rem/1.72 var(--f-display);color:var(--ink)}
.lv-ce p+p{margin-top:.55em}
.lv-cv .ph,.lv-ce .ph,.lv-am .am .ph{font-style:italic;color:var(--muted)}
.lv-am .am p{margin:0 0 .7rem;font:400 1.1rem/1.8 var(--f-display);color:var(--ink)}
.lv-am .am p:last-child{margin-bottom:0}
.lv-am .am b{font-weight:600;color:var(--ink)}
html{--acc:color-mix(in srgb,var(--gold) 8%,var(--surface));--acc-line:color-mix(in srgb,var(--gold) 24%,transparent)}
html[data-theme="dark"]{--acc:color-mix(in srgb,var(--gold) 7%,var(--surface))}
html[data-layers]:not([data-mode="grup"]) .L{display:contents}
html[data-layers]:not([data-mode="grup"]) .lv{margin:0 0 .85rem 2.9rem;max-width:66ch}
html[data-layers]:not([data-mode="grup"]) .lv-ok{margin-top:.5rem}
html[data-layers]:not([data-mode="grup"]) :is(.lv-cv,.lv-am){margin:0 0 0 2.9rem;padding:.6rem 1.1rem;border-left:2px solid var(--gold);border-top:1px solid var(--acc-line);border-radius:0;background:var(--acc)}
html[data-layers]:not([data-mode="grup"]):not([data-kapali~="cv"]) .lv-cv,
html[data-layers]:not([data-mode="grup"]):not([data-kapali~="am"]) .lv-am{padding:.75rem 1.1rem .9rem}
html[data-layers]:not([data-mode="grup"]) .lv-il{margin-top:.8rem}
html[data-layers]:not([data-mode="grup"]) .v+.v{margin-top:1rem}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .v{min-height:0;padding:1.1rem 0 0;font-size:0;line-height:0}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .v::before{top:.95rem}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .v[data-cz]::after{top:.25rem}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .lv-ok{margin-top:0}
html[data-layers]:not([data-show~="ar"]) .besmele p{display:none}
html[data-layers][data-mode="grup"] .L{margin:0 0 1.35rem}
html[data-layers][data-mode="grup"] .L:last-child{margin-bottom:0}
html[data-layers][data-mode="grup"] :is(.L-ce,.L-cv,.L-am){margin:0 -.4rem;padding:.6rem .95rem;border-left:2px solid var(--gold);border-top:1px solid var(--acc-line);background:var(--acc)}
html[data-layers][data-mode="grup"] .L-ce,
html[data-layers][data-mode="grup"]:not([data-kapali~="cv"]) .L-cv,
html[data-layers][data-mode="grup"]:not([data-kapali~="am"]) .L-am{padding:.75rem .95rem .85rem}
html[data-layers][data-mode="grup"] .L-ok{margin-bottom:1.1rem}
html[data-layers][data-mode="grup"] .L-il{margin-top:1.2rem}
html[data-layers][data-mode="grup"] .lv{margin:0 0 .6rem;border-radius:4px;cursor:pointer;transition:background .18s,box-shadow .18s}
html[data-layers][data-mode="grup"] .lv.hl{background:var(--hl);box-shadow:0 0 0 3px var(--hl)}
html[data-layers][data-mode="grup"] :is(.lv-cv,.lv-ce) p{font-size:1.1rem}
html[data-layers][data-mode="grup"]:not([data-show~="ar"]) .pg-ar{display:none}
html[data-layers][data-mode="grup"]:not([data-show~="ar"]) .book{grid-template-columns:minmax(0,1fr);grid-template-areas:"tr"}
html[data-layers][data-mode="grup"]:not([data-show~="ar"]) .book::after{display:none}
html[data-layers][data-mode="grup"]:not([data-show~="ar"]) :is(.book,.grp-h){max-width:50rem;margin-inline:auto}
html[data-layers]:not([data-mode="grup"])[data-txt="0"] .pg-tr{display:none}
.fab-r{position:fixed;top:50%;right:16px;z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transform:translateY(-50%)}
.ctl-gor{position:relative}
.lp{position:relative}
.lp-tab{display:inline-flex;align-items:center;gap:.45rem;height:2.4rem;padding:0 .6rem 0 .8rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 .9rem/1 var(--f-body);cursor:pointer;transition:border-color .2s,background .2s}
.lp-tab:hover,.lp.open .lp-tab{border-color:var(--gold)}
.lp.open .lp-tab{background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.lp-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lp-tab svg{width:18px;height:18px;color:var(--gold-ink)}
.lp-tab b{display:grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:999px;background:var(--lapis);color:var(--ivory);font:700 .7rem/1 var(--f-body);font-variant-numeric:tabular-nums}
.lp-body{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:262px;max-height:calc(100vh - var(--barh,120px) - 24px);overflow:auto;padding:.35rem 0 .75rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 30px 60px -18px rgba(15,25,66,.55)}
.lp.open .lp-body{display:block;animation:lpIn .16s ease-out}
@keyframes lpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lp-head{display:flex;align-items:center;justify-content:space-between;padding:.45rem .55rem .5rem 1rem;font:700 .68rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.lp-close{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.lp-close:hover{background:var(--hl);color:var(--ink)}
.lp-close svg{width:14px;height:14px}
.lp-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem 1rem;cursor:pointer;transition:background .15s}
.lp-row:hover{background:var(--tint)}
.lp-row.off{opacity:.5;cursor:default}
.lp-row.off:hover{background:none}
.lp-t{display:flex;flex-direction:column;font:500 .98rem/1.2 var(--f-body);color:var(--ink)}
.lp-t small{margin-top:.18rem;font-size:.78rem;font-weight:400;color:var(--muted)}
.sw{position:relative;flex:none;width:36px;height:21px;margin:0;border-radius:999px;background:var(--line);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .2s}
.sw:checked{background:var(--gold-ink)}
.sw:checked::after{transform:translateX(15px)}
.sw:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sw:disabled{cursor:default}
.lp-pre{display:flex;gap:.5rem;margin:.45rem 1rem 0;padding-top:.75rem;border-top:1px solid var(--line)}
.lp-pre button{flex:1;padding:.45rem 0;border:1px solid var(--line);border-radius:999px;background:transparent;font:600 .85rem var(--f-body);color:var(--ink);cursor:pointer}
.lp-pre button:hover{border-color:var(--gold);background:var(--tint)}
@media (max-width:640px){
html[data-layers]:not([data-mode="grup"]) .lv,html[data-layers]:not([data-mode="grup"]) :is(.lv-cv,.lv-am){margin-left:0}
html[data-layers]:not([data-mode="grup"]) :is(.lv-cv,.lv-am){padding:.65rem .85rem .7rem}
.fab-r{top:auto;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none}
.lp-tab{height:2.2rem;padding:0 .5rem 0 .65rem}
.lp-body{width:min(300px,calc(100vw - 28px))}
}
.lv-il p{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .4rem}
.lv-il a{display:inline-flex;align-items:center;height:1.8rem;padding:0 .72rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 .82rem/1 var(--f-body);color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.lv-il a:hover{border-color:var(--gold);background:var(--tint);color:var(--gold-ink)}
html[data-layers][data-mode="grup"] .lv-il{cursor:auto}
html[data-layers][data-mode="grup"] .lv-il .vno{margin-right:.15rem}
.qn{display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.qn.on{opacity:1;visibility:visible}
.qn-b{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);box-shadow:var(--shadow);color:var(--gold-ink);cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s}
.qn-b:hover,.qn-b:focus-visible{border-color:var(--gold);color:var(--ink);outline:none}
.qn-b svg{flex:none;width:20px;height:20px}
.qn-l{display:flex;align-items:center;justify-content:flex-end;width:auto;min-width:46px;padding:0 12px;border-radius:999px;transition:border-color .2s,color .2s,background-color .2s,padding .28s ease}
.qn-t{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font:600 .86rem/1 var(--f-body);color:var(--ink);transition:max-width .32s ease,margin .32s ease,opacity .2s}
.qn-l.ac{padding-left:18px;border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.qn-l.ac .qn-t{max-width:16rem;margin-right:.6rem;opacity:1;transition:max-width .32s ease,margin .32s ease,opacity .25s .08s}
@media (prefers-reduced-motion:reduce){.qn-l,.qn-t,.qn-l.ac .qn-t{transition:none}}
.fab-r{align-items:flex-end}
.fab-r .qn{align-self:flex-end}
@media (max-width:640px){.qn-b{width:44px;height:44px}.qn-l{width:auto;min-width:44px;padding:0 11px}.qn-l.ac{padding-left:16px}}
.dil-not{max-width:46rem;margin:0 auto 1.6rem;padding:.7rem 1rem;border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));border-radius:8px;background:var(--tint);font:400 .92rem/1.5 var(--f-body);color:var(--muted);text-align:center}
.dil-not b{color:var(--ink)}
.dl-tr [dir="rtl"],.dl-tr[dir="rtl"]{text-align:right}
.dl-tr :is(p,div)[dir="rtl"]{font-family:var(--f-ar-ui,'Amiri',serif);font-size:1.2rem;line-height:1.9}
.i-pause{display:none}
.vplay{display:none}
html:not([data-mode="grup"]) .vplay{position:absolute;top:4.05rem;left:0;display:grid;place-items:center;width:1.95rem;height:1.95rem;padding:0;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:50%;background:var(--surface);color:var(--gold-ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.vplay svg{width:.9rem;height:.9rem;fill:currentColor}
.vplay:hover,.vplay:focus-visible{border-color:var(--lapis);background:var(--lapis);color:var(--ivory);outline:none}
html.ap-playing .v.playing .vplay{border-color:var(--lapis);background:var(--lapis);color:var(--ivory)}
html.ap-playing .v.playing .vplay .i-play{display:none}
html.ap-playing .v.playing .vplay .i-pause{display:inline}
html:not([data-mode="grup"]) .v.playing{background:color-mix(in srgb,var(--hl) 75%,transparent)}
html[data-mode="grup"] :is(.v,.lv).playing{background:var(--hl);box-shadow:0 0 0 3px var(--hl)}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .vplay{top:.95rem;left:2.3rem}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .v{min-height:2.9rem}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .v.playing{background:transparent}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .v.playing::before{box-shadow:0 0 0 4px var(--hl)}
html[data-layers]:not([data-show~="ar"]):not([data-mode="grup"]) .v{min-height:3.2rem}
.to-dinle{display:none}
html[data-mode="grup"] .to-dinle{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;height:2rem;padding:0 .8rem 0 .65rem;border:1px solid color-mix(in srgb,var(--gold) 65%,transparent);border-radius:999px;background:var(--surface);font:600 .88rem var(--f-body);color:var(--gold-ink);cursor:pointer;transition:background .15s,color .15s}
html[data-mode="grup"] .to-dinle + .to-ayet{margin-left:.4rem}
.to-dinle svg{width:.85rem;height:.85rem;fill:currentColor}
.to-dinle:hover{border-color:var(--lapis);background:var(--lapis);color:var(--ivory)}
.lp-ses{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 1rem 0;padding-top:.75rem;border-top:1px solid var(--line)}
.lp-sh{font:700 .68rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.lp-ses select{width:100%;height:2.3rem;padding:0 .6rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:500 .9rem var(--f-body)}
.lp-play{display:flex;align-items:center;justify-content:center;gap:.45rem;height:2.4rem;border:0;border-radius:999px;background:var(--lapis);color:var(--ivory);font:600 .9rem var(--f-body);cursor:pointer}
.lp-play:hover{background:var(--lapis-2)}
.lp-play svg{width:.85rem;height:.85rem;fill:currentColor}
.ap{position:fixed;left:50%;bottom:16px;z-index:40;width:min(780px,calc(100vw - 32px));transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:14px;background:var(--lapis-deep);color:var(--ivory);box-shadow:0 24px 50px -20px rgba(10,16,40,.65);overflow:hidden;animation:apIn .2s ease-out}
.ap[hidden]{display:none}
@keyframes apIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.ap-prog{height:3px;background:rgba(255,255,255,.1)}
.ap-prog i{display:block;width:0;height:100%;background:var(--gilt);transition:width .25s linear}
.ap-in{display:flex;align-items:center;gap:.35rem;padding:.5rem .65rem}
.ap-b{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ivory);cursor:pointer}
.ap-b:hover{background:rgba(255,255,255,.09)}
.ap-b svg{width:1.1rem;height:1.1rem;fill:currentColor}
.ap-pp{width:2.85rem;height:2.85rem;background:var(--gilt);color:#151D3B}
.ap-pp:hover{background:#E6CC8E}
.ap-pp svg{width:1.2rem;height:1.2rem}
html.ap-playing .ap-pp .i-play{display:none}
html.ap-playing .ap-pp .i-pause{display:inline}
.ap-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;padding:0 .45rem;line-height:1.2}
.ap-t b{font:500 1.06rem var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-t small{font-size:.78rem;color:var(--ivory-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-k select{height:2.25rem;max-width:13rem;padding:0 .55rem;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:8px;background:rgba(255,255,255,.06);color:var(--ivory);font:500 .86rem var(--f-body)}
.ap-k select option{color:#151D3B;background:#fff}
.ap-c{flex:none;height:2.25rem;min-width:2.7rem;padding:0 .55rem;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:8px;background:transparent;color:var(--gilt);font:700 .82rem var(--f-body);font-variant-numeric:tabular-nums;cursor:pointer}
.ap-c:hover{border-color:var(--gilt)}
.ap-x svg{width:1.3rem;height:1.3rem}
html.ap-on body{padding-bottom:96px}
@media (max-width:640px){
html:not([data-mode="grup"]) .vplay{top:3.55rem;width:1.75rem;height:1.75rem}
.ap{bottom:0;width:100vw;border-radius:14px 14px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.ap-in{flex-wrap:wrap;row-gap:.45rem}
.ap-t{order:4;flex:1 1 0}
.ap-x{order:5}
.ap-k{order:6;flex:1 1 60%}
.ap-k select{width:100%;max-width:none}
.ap-c{order:7}
html.ap-on .lp,html.ap-on .fab-r{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
html.ap-on .fab-r .lp{bottom:auto}
html.ap-on body{padding-bottom:150px}
}
.lv-am.am-ses{position:relative}
.am-dinle{position:absolute;top:.45rem;right:.6rem;z-index:1;display:inline-flex;align-items:center;gap:.35rem;height:1.9rem;padding:0 .75rem 0 .6rem;border:1px solid color-mix(in srgb,var(--gold) 65%,transparent);border-radius:999px;background:var(--surface);font:600 .82rem var(--f-body);color:var(--gold-ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.am-dinle svg{width:.8rem;height:.8rem;fill:currentColor}
.am-dinle .i-pause{display:none}
.am-dinle.on .i-play{display:none}
.am-dinle.on .i-pause{display:inline}
.am-dinle:hover,.am-dinle:focus-visible,.am-dinle.on{border-color:var(--lapis);background:var(--lapis);color:var(--ivory);outline:none}
html:not([data-txt="n"]) .lv-am.am-ses{padding-top:2.7rem}
.lv-am.am-calar{box-shadow:inset 3px 0 0 var(--lapis)}
::highlight(ik-kelime){background-color:color-mix(in srgb,var(--gold) 38%,transparent);color:var(--ink)}