@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(/radio/assets/fonts/fredoka-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(/radio/assets/fonts/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
:root {
  --night: #14112f; --dusk: #2b2366; --cream: #fff3dd; --paper: #fff8ec; --ink: #2a2140; --bmo: #74e0c0; --gum: #ff7ab6; --sun: #ffd54a; --red: #e2475b;
  --soft: rgba(255,243,221,.74); --muted: rgba(255,243,221,.5); --line: rgba(255,243,221,.1); --line2: rgba(255,243,221,.18);
  --card: rgba(36,30,86,.5); --field: rgba(12,10,32,.6);
  --font: 'Fredoka', ui-rounded, 'Nunito', system-ui, sans-serif; --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; } html, body { overflow-x: clip; }
body { font-family: var(--font); color: var(--cream); line-height: 1.45; background: var(--night); -webkit-font-smoothing: antialiased; min-height: 100vh;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,243,221,.8) 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, rgba(255,243,221,.6) 50%, transparent 51%), radial-gradient(1px 1px at 88% 58%, rgba(255,243,221,.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 26% 72%, rgba(255,243,221,.45) 50%, transparent 51%); background-size: 520px 520px; background-attachment: fixed; }
button, input, select { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 4vw, 40px); padding-top: max(12px, env(safe-area-inset-top)); background: rgba(20,17,47,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; color: inherit; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sun); color: var(--night); font-weight: 700; box-shadow: 0 4px 0 var(--dusk); }
.nav-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sun); padding: 6px 12px; border-radius: 999px; background: rgba(255,213,74,.1); }
.city-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); font-weight: 600; transition: border-color .15s; }
.city-btn:hover { border-color: var(--bmo); } .city-btn svg { width: 18px; height: 18px; color: var(--bmo); }
@media (max-width: 600px) { .brand-name { display: none; } .nav-title { font-size: .9rem; } }

.wrap { max-width: 1140px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px) 90px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: clamp(18px, 2.6vw, 24px); }
h2 { font-size: 1.4rem; font-weight: 700; } h3 { font-size: 1rem; font-weight: 600; }
.eyebrow { color: var(--bmo); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; }
.note { color: var(--muted); font-size: .82rem; } .center { text-align: center; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mini { padding: 7px 14px; border-radius: 999px; border: 1px solid currentColor; font-size: .85rem; font-weight: 600; opacity: .8; transition: opacity .15s; } .mini:hover { opacity: 1; }

/* Selam ve sonraki vakit */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: stretch; }
.today { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 6px 0 4px; text-shadow: 0 .06em 0 var(--dusk); }
.hijri { color: var(--sun); font-weight: 500; }
.saved { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.saved button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); color: var(--soft); font-weight: 500; font-size: .9rem; }
.saved button.on { background: var(--cream); color: var(--night); border-color: var(--cream); }
.saved button em { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; opacity: .55; }
.saved button em:hover { opacity: 1; background: rgba(0,0,0,.12); }
.saved .add { padding: 7px 14px; border-style: dashed; color: var(--bmo); }
.next { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(150deg, rgba(116,224,192,.18), rgba(43,35,102,.6)); }
.next-top { display: flex; justify-content: space-between; color: var(--soft); } .next-top b { color: var(--bmo); font-size: 1.1rem; }
.count { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; margin: 4px 0 10px; }
.nbar { height: 7px; border-radius: 7px; background: rgba(255,243,221,.1); overflow: hidden; } .nbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bmo), var(--sun)); border-radius: inherit; transition: width 1s var(--ease); }
.next-sub { color: var(--muted); font-size: .88rem; margin-top: 8px; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }

.times { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 16px; }
.vakit { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px; text-align: center; transition: transform .2s, border-color .2s; }
.vakit .vi { font-size: 1.4rem; } .vakit span { display: block; color: var(--soft); font-size: .88rem; margin-top: 2px; }
.vakit b { display: block; font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vakit.past { opacity: .55; }
.vakit.now { border-color: var(--sun); background: linear-gradient(160deg, rgba(255,213,74,.22), rgba(43,35,102,.6)); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.vakit.now::after { content: 'Şu an'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 700; background: var(--sun); color: var(--night); padding: 1px 8px; border-radius: 99px; }
#calcNote { margin-top: 10px; }
@media (max-width: 760px) { .times { grid-template-columns: repeat(3, 1fr); } }

/* Takvim yaprağı */
.grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-top: 26px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
.leaf { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line2);
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,122,182,.14), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(116,224,192,.12), transparent 60%), linear-gradient(170deg, #2e2670, #1c1747 70%); box-shadow: 0 24px 50px rgba(0,0,0,.3); }
.leaf::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--gum), var(--sun), var(--bmo)); }
.leaf-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--line2); flex-wrap: wrap; }
.leaf-date { display: flex; align-items: center; gap: 14px; }
.leaf-date b { display: grid; place-items: center; min-width: 1.6em; padding: .12em .14em .08em; border-radius: 22px; font-size: clamp(3.4rem, 9vw, 4.6rem); line-height: 1; color: var(--night); background: var(--sun); font-weight: 700; box-shadow: 0 6px 0 #c99a1c, 0 14px 26px rgba(0,0,0,.3); }
.leaf-date span { display: block; font-size: 1.5rem; font-weight: 700; } .leaf-date em { font-style: normal; color: var(--bmo); font-weight: 600; }
.leaf-side { display: flex; flex-direction: column; gap: 2px; text-align: right; font-size: .88rem; color: var(--soft); }
.leaf-side span:first-child { color: var(--sun); font-weight: 600; }
.leaf-block { padding: 18px 0 4px; }
.leaf h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gum); margin-bottom: 6px; }
.leaf blockquote { font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.45; font-weight: 500; color: var(--cream); }
.leaf blockquote::before { content: '“'; color: var(--gum); } .leaf blockquote::after { content: '”'; color: var(--gum); }
.leaf cite { display: block; font-style: normal; color: var(--muted); font-size: .85rem; margin-top: 6px; }
.leaf-block.alt h3 { color: var(--bmo); } .leaf-block.alt blockquote::before, .leaf-block.alt blockquote::after { color: var(--bmo); }
/* Alt sahne: iki karakter, aralarında günün menüsü */
.leaf-stage { position: relative; display: grid; grid-template-columns: 120px 1fr 120px; align-items: end; gap: 6px; margin-top: 14px; }
.leaf-stage::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,243,221,.22), transparent); }
.leaf-pal { position: relative; height: 190px; }
.leaf-pal .char-host { position: absolute; left: -14px; right: -14px; bottom: 0; top: 0; }
.char-host canvas { display: block; width: 100%; height: 100%; }
.char-host::after { content: ''; position: absolute; left: 50%; bottom: 1%; width: 56%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); z-index: -1; opacity: 0; transition: opacity .8s; }
.char-host.ready::after { opacity: 1; }
.char-host.no3d { display: none; }
.leaf-menu { align-self: center; padding: 14px 16px; border-radius: 18px; background: var(--field); border: 1px solid var(--line); }
.leaf-menu h3 { color: var(--sun); } .leaf-menu ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: .95rem; }
.leaf-menu li::before { content: '• '; color: var(--sun); }
.leaf-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; color: var(--cream); }
@media (max-width: 600px) {
  .leaf-stage { grid-template-columns: 1fr 1fr; grid-template-areas: 'menu menu' 'l r'; }
  .leaf-menu { grid-area: menu; } .leaf-pal.l { grid-area: l; } .leaf-pal.r { grid-area: r; } .leaf-pal { height: 170px; }
}

.esma { background: linear-gradient(160deg, rgba(184,166,255,.18), rgba(36,30,86,.55)); }
.esma h3, .names h3, .qibla h3 { color: var(--soft); margin-bottom: 8px; }
.esma-n { font-size: 1.8rem; font-weight: 700; color: #d9cfff; } .esma-m { font-size: 1.05rem; margin: 2px 0 8px; }
.name { display: grid; grid-template-columns: 74px 1fr; gap: 0 10px; padding: 10px 12px; border-radius: 16px; margin-top: 8px; }
.name span { grid-row: span 2; align-self: center; font-size: .82rem; color: var(--soft); } .name b { font-size: 1.35rem; } .name small { color: var(--soft); font-size: .86rem; }
.girl { background: rgba(255,122,182,.12); } .girl b { color: #ffb3d4; } .boy { background: rgba(116,224,192,.1); } .boy b { color: #a8f0dc; }
.compass { display: grid; place-items: center; padding: 6px 0; }
.dial { position: relative; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,243,221,.06), rgba(12,10,32,.6)); border: 2px solid var(--line2); }
.dial span { position: absolute; font-weight: 700; font-size: .8rem; color: var(--muted); } .dial .n { top: 6px; left: 50%; transform: translateX(-50%); color: var(--gum); } .dial .s { bottom: 6px; left: 50%; transform: translateX(-50%); } .dial .e { right: 9px; top: 50%; transform: translateY(-50%); } .dial .w { left: 9px; top: 50%; transform: translateY(-50%); }
.needle { position: absolute; left: 50%; top: 50%; width: 4px; height: 66px; margin-left: -2px; margin-top: -66px; transform-origin: 50% 100%; background: linear-gradient(var(--sun), rgba(255,213,74,.2)); border-radius: 4px; transition: transform 1s var(--ease); }
.needle i { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 1.4rem; }
.qinfo { text-align: center; color: var(--soft); font-size: .9rem; margin-top: 6px; }

.days { margin-top: 26px; }
.dlist { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dlist li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(12,10,32,.35); border: 1px solid var(--line); }
.dlist .de { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: rgba(255,213,74,.12); flex: none; }
.dlist b { display: block; font-size: .98rem; } .dlist small { color: var(--muted); font-size: .82rem; }
.dlist .dc { margin-left: auto; text-align: right; font-weight: 700; color: var(--sun); white-space: nowrap; font-size: .9rem; }
.dlist li.soon { border-color: rgba(255,213,74,.45); }

.grid2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.zikir select { background: var(--field); border: 1px solid var(--line2); border-radius: 12px; padding: 7px 10px; }
.z-word { text-align: center; font-size: 1.3rem; font-weight: 600; color: var(--sun); min-height: 1.8em; }
.z-btn { position: relative; display: grid; place-items: center; width: 210px; height: 210px; margin: 6px auto 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3180, #1c1745); box-shadow: 0 14px 30px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.08); transition: transform .08s; -webkit-tap-highlight-color: transparent; user-select: none; }
.z-btn:active { transform: scale(.96); }
.z-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.z-bg { stroke: rgba(255,243,221,.1); stroke-width: 6; } .z-fg { stroke: var(--bmo); stroke-width: 6; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .25s; }
.z-btn b { font-size: 3.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .z-btn small { position: absolute; bottom: 52px; color: var(--muted); }
.z-foot { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .88rem; }
.tblwrap { max-height: 430px; overflow: auto; border-radius: 14px; border: 1px solid var(--line); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { position: sticky; top: 0; background: #1d1844; color: var(--soft); font-weight: 600; font-size: .8rem; }
.tbl td:first-child { text-align: left; color: var(--soft); } .tbl tr.cur td { background: rgba(255,213,74,.12); color: var(--cream); font-weight: 600; }
.tbl tr.fri td:first-child { color: var(--bmo); }

.dlg { margin: auto; border: 0; padding: 0; background: transparent; color: inherit; width: min(560px, 94vw); }
.dlg::backdrop { background: rgba(8,6,22,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg-in { background: #1b1640; border: 1px solid var(--line2); border-radius: 26px; padding: 20px; max-height: 84vh; display: flex; flex-direction: column; gap: 12px; }
.dlg-h { display: flex; justify-content: space-between; align-items: center; } .x { width: 36px; height: 36px; border-radius: 10px; background: var(--card); }
.search { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--field); outline: none; }
.search:focus { border-color: var(--bmo); }
.clist { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; padding-right: 4px; }
.clist h4 { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.clist button { text-align: left; padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: .92rem; transition: border-color .15s; }
.clist button:hover { border-color: var(--bmo); } .clist button.on { border-color: var(--sun); color: var(--sun); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 220%); visibility: hidden; z-index: 60; background: var(--cream); color: var(--night); font-weight: 600; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .35s var(--ease); }
.toast.on { transform: translate(-50%, 0); visibility: visible; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }