@font-face{font-family:Amiri;src:url(fonts/Amiri-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Amiri;src:url(fonts/Amiri-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:InterVar;src:url(fonts/InterVariable.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#0b0f14; --ink-2:#111823; --ink-3:#18212e;
  --line:#22304228; --line-s:#2b3a4e;
  --text:#e8eef6; --text-2:#9fb0c4; --text-3:#66788d;
  --gold:#d6b25e; --gold-2:#f0d493; --gold-dim:#8d7434;
  --bg:var(--ink); --surface:var(--ink-2); --surface-2:var(--ink-3);

  --sz-ar:32px; --sz-tx:17px; --sz-tr:14px;
  --r:14px; --r-lg:22px;
  --dur:220ms; --ease:cubic-bezier(.16,1,.3,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
[data-theme=kagit]{
  --bg:#f4efe4; --surface:#fbf8f1; --surface-2:#f0e9da;
  --text:#241f18; --text-2:#5f5648; --text-3:#8b8172;
  --line:#241f1818; --line-s:#ddd2bd;
  --gold:#8a6a24; --gold-2:#6d5219; --gold-dim:#c9b689;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:InterVar,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
[data-theme=gece] body{
  background-image:radial-gradient(120% 70% at 50% -10%, #16202e 0%, transparent 60%);
  background-attachment:fixed;
}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
[hidden]{display:none!important}

/* ---------- GATE ---------- */
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:var(--bg)}
.gate-card{width:100%;max-width:360px;text-align:center}
.gate-mark{font-family:Amiri,serif;font-size:56px;color:var(--gold);line-height:1;opacity:.9}
.gate-title{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:14px 0 8px}
.gate-sub{color:var(--text-2);font-size:14.5px;margin-bottom:22px}
#gate-form{display:flex;gap:8px}
#gate-input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-s);color:var(--text);border-radius:12px;padding:13px 15px;outline:none}
#gate-input:focus{border-color:var(--gold)}
#gate-form button{background:var(--gold);color:#12100a;font-weight:650;border-radius:12px;padding:13px 22px}
[data-theme=kagit] #gate-form button{color:#fff}
.gate-err{color:#e07070;font-size:13.5px;margin-top:12px}

/* ---------- HERO ---------- */
.view{min-height:100dvh}
.hero{padding:calc(var(--safe-t) + 44px) 22px 26px;text-align:center;position:relative;overflow:hidden}
.hero-orn{font-family:Amiri,serif;font-size:76px;line-height:1;color:var(--gold);opacity:.22;margin-bottom:-14px}
.hero-eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hero-title{font-family:Amiri,serif;font-size:clamp(40px,13vw,60px);font-weight:700;letter-spacing:-.01em;line-height:1.05;margin:10px 0 22px}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{border-radius:12px;padding:12px 20px;font-size:14.5px;font-weight:600;transition:transform var(--dur) var(--ease),background var(--dur),border-color var(--dur)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gold);color:#12100a}
[data-theme=kagit] .btn-primary{color:#fff}
.btn-primary:hover{background:var(--gold-2)}
.btn-ghost{border:1px solid var(--line-s);color:var(--text-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-danger{border:1px solid #a8484844;color:#d97a7a}
.btn-danger:hover{background:#a8484814}
.wide{width:100%;margin-top:8px}
.hero-progress{margin-top:24px;display:flex;align-items:center;gap:12px;max-width:340px;margin-inline:auto}
.bar{flex:1;height:3px;background:var(--line-s);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width 500ms var(--ease)}
.prog-text{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- TOOLBAR ---------- */
.toolbar{display:flex;gap:10px;padding:0 16px 12px;position:sticky;top:0;z-index:10;background:linear-gradient(var(--bg) 72%,transparent);padding-top:8px}
.search{flex:1;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line-s);border-radius:12px;padding:0 13px;transition:border-color var(--dur)}
.search:focus-within{border-color:var(--gold)}
.search svg{width:17px;height:17px;color:var(--text-3);flex:none}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);padding:11px 0;font-size:15px}
.search input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-s);color:var(--text-2);flex:none;transition:color var(--dur),border-color var(--dur)}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.icon-btn.is-on{color:var(--gold);border-color:var(--gold);background:#d6b25e12}

.chips{display:flex;gap:8px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line-s);border-radius:99px;padding:7px 15px;font-size:13px;color:var(--text-2);transition:all var(--dur)}
.chip.is-on{background:var(--gold);border-color:var(--gold);color:#12100a;font-weight:600}
[data-theme=kagit] .chip.is-on{color:#fff}

/* ---------- LIST ---------- */
.list{list-style:none;padding:0 16px calc(var(--safe-b) + 20px);display:grid;gap:8px}
.row{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;text-align:left;width:100%;
  transition:transform var(--dur) var(--ease),border-color var(--dur),background var(--dur);
}
.row:hover{border-color:var(--gold-dim);background:var(--surface-2)}
.row:active{transform:scale(.985)}
.row-n{
  display:grid;place-items:center;height:44px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line);
  font-family:Amiri,serif;font-size:19px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.row.done .row-n{background:var(--gold);border-color:var(--gold);color:#12100a}
[data-theme=kagit] .row.done .row-n{color:#fff}
.row-txt{display:grid;min-width:0;gap:2px}
.row-ar{font-family:Amiri,serif;font-size:19px;direction:rtl;text-align:right;color:var(--text);
  line-height:1.85;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.row-tr{font-size:12.5px;color:var(--text-3);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Arapçası henüz girilmemiş bâbın satırı: okunuş (Latin) gösterilir */
.row-ar.is-lat{font-family:InterVar,system-ui,sans-serif;font-size:14.5px;direction:ltr;text-align:left;font-weight:600;color:var(--text-2)}
.row-mark{color:var(--gold);opacity:0;transition:opacity var(--dur)}
.row.marked .row-mark{opacity:1}
.row-mark svg{width:15px;height:15px;fill:currentColor;stroke:none}
.empty{text-align:center;color:var(--text-3);padding:48px 20px;font-size:14.5px}
.foot{text-align:center;color:var(--text-3);font-size:11.5px;padding:8px 20px calc(var(--safe-b) + 26px);letter-spacing:.04em}

/* ---------- READER ---------- */
#view-read{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.rhead{position:relative;display:flex;align-items:center;gap:8px;padding:calc(var(--safe-t) + 10px) 12px 10px;border-bottom:1px solid var(--line);background:var(--bg);z-index:5}
.rhead-mid{flex:1;min-width:0;text-align:center;line-height:1.25}
.rhead-title{display:block;font-size:15px;font-weight:650}
.rhead-sub{display:block;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.rprog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--gold);width:0;transition:width 320ms var(--ease)}

.pager{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pager::-webkit-scrollbar{display:none}
.page{flex:0 0 100%;width:100%;scroll-snap-align:center;scroll-snap-stop:always;overflow-y:auto;overflow-x:hidden;padding:16px 20px calc(var(--safe-b) + 88px);-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}

/* filigran bâb yazısı: sayfanın altında, büyük ve iyice soluk */
.bab-mark{
  margin-top:auto;padding-top:20px;text-align:center;
  font-size:40px;font-weight:800;line-height:1;
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
  color:var(--text-3);opacity:.13;
  font-variant-numeric:tabular-nums;
  -webkit-user-select:none;user-select:none;pointer-events:none;
}

.block{margin-bottom:calc(18px * var(--fit,1))}
.block-lbl{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.block-lbl::after{content:'';flex:1;height:1px;background:var(--line-s)}
.ar{
  font-family:Amiri,serif;direction:rtl;text-align:right;
  font-size:calc(var(--sz-ar) * var(--fit,1));line-height:2.05;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:calc(20px * var(--fit,1)) calc(20px * var(--fit,1));
}
[data-theme=gece] .ar{box-shadow:inset 0 1px 0 #ffffff0a}
.ar-line{display:block}
.ar-line+.ar-line{margin-top:4px}
.ar .fin{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-s);color:var(--gold)}
.ok{font-size:calc(var(--sz-tx) * var(--fit,1));line-height:1.85;color:var(--text);font-weight:650;padding:0 2px;white-space:pre-line}
/* okunuş + hemen altında küçük gri meâl satırı */
.okml{display:grid;gap:calc(9px * var(--fit,1));padding:0 2px}
.pair{display:grid;gap:0}
.ok-line{font-size:calc(var(--sz-tx) * var(--fit,1));line-height:1.55;color:var(--text);font-weight:650}
.tr-line{font-size:calc(var(--sz-tr) * var(--fit,1));line-height:1.45;color:var(--text-3)}
.pair-fin{margin-top:8px;padding-top:14px;border-top:1px solid var(--line-s)}
.pair-fin .ok-line{color:var(--gold)}
.hide-ok .ok-line{display:none}
.hide-tr .tr-line{display:none}
.hide-ok.hide-tr .b-okml{display:none}
.tr{font-size:calc(var(--sz-tr) * var(--fit,1));line-height:1.9;color:var(--text);white-space:pre-line;padding:0 2px}
.tr .fin{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-s);color:var(--gold);font-size:var(--sz-tr)}

.rnav{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:10px 14px calc(var(--safe-b) + 12px);
  background:linear-gradient(transparent,var(--bg) 42%);
}
.rnav-btn{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:14px;border:1px solid var(--line-s);background:var(--surface);color:var(--text-2);transition:all var(--dur)}
.rnav-btn:hover:not(:disabled){color:var(--gold);border-color:var(--gold)}
.rnav-btn:disabled{opacity:.3}
.rnav-done{flex:1;height:50px;border-radius:14px;background:var(--surface);border:1px solid var(--line-s);color:var(--text-2);font-size:14.5px;font-weight:600;transition:all var(--dur)}
.rnav-done:active{transform:scale(.98)}
.rnav-done.is-on{background:var(--gold);border-color:var(--gold);color:#12100a}
[data-theme=kagit] .rnav-done.is-on{color:#fff}

/* ---------- SHEET ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:#000a;backdrop-filter:blur(3px);animation:fade var(--dur) var(--ease)}
.sheet-card{
  position:relative;width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-s);border-bottom:0;
  border-radius:26px 26px 0 0;padding:8px 20px calc(var(--safe-b) + 24px);
  animation:up 320ms var(--ease);
}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(18px);opacity:0}}
.sheet-grab{width:38px;height:4px;border-radius:99px;background:var(--line-s);margin:6px auto 14px}
.sheet-card h2{font-size:19px;font-weight:650;margin-bottom:18px}
.set{margin-bottom:20px}
.set>label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.set>label b{color:var(--gold);letter-spacing:0}
.seg{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{flex:1;padding:9px;border-radius:9px;font-size:14px;color:var(--text-2);transition:all var(--dur)}
.seg button.is-on{background:var(--gold);color:#12100a;font-weight:650}
[data-theme=kagit] .seg button.is-on{color:#fff}
.toggles{display:grid;gap:7px}
.tog{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px;color:var(--text-2);transition:all var(--dur)}
.tog::after{content:'';width:38px;height:22px;border-radius:99px;background:var(--line-s);flex:none;transition:background var(--dur)}
.tog::before{content:'';position:absolute;right:32px;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--text-3);transition:transform var(--dur) var(--ease),background var(--dur);z-index:1}
.tog.is-on{color:var(--text);border-color:var(--gold-dim)}
.tog.is-on::after{background:var(--gold)}
.tog.is-on::before{transform:translateX(16px);background:#12100a}
[data-theme=kagit] .tog.is-on::before{background:#fff}
input[type=range]{width:100%;-webkit-appearance:none;background:none;height:26px}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:var(--line-s)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold);margin-top:-8.5px;border:0}
input[type=range]::-moz-range-track{height:3px;border-radius:99px;background:var(--line-s)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--gold)}
.note{font-size:11.5px;color:var(--text-3);line-height:1.55;margin:18px 0 4px}

/* ---------- HATİM DAĞITIMI ---------- */
.icon-btn{position:relative}
.dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg)}
.shead{display:flex;align-items:center;gap:8px;padding:calc(var(--safe-t) + 10px) 12px 10px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.shead-mid{flex:1;min-width:0;text-align:center;line-height:1.25}
.shead-title{display:block;font-size:15px;font-weight:650}
.shead-sub{display:block;font-size:11.5px;color:var(--text-3);min-height:14px}
.shead-spacer{width:44px;flex:none}
.social-body{padding:16px 16px calc(var(--safe-b) + 32px);max-width:560px;margin-inline:auto}
.s-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:14px}
.s-lead{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-bottom:14px}
.s-note{font-size:12.5px;color:var(--text-3);line-height:1.55;margin-top:10px}
.s-pad{padding:6px 4px 16px}
.s-row-form{display:flex;gap:8px}
.s-row-form input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line-s);color:var(--text);border-radius:12px;padding:11px 13px;outline:none;font-size:15px}
.s-row-form input:focus{border-color:var(--gold)}
.s-me-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.s-lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.s-name{font-size:16px;font-weight:650;display:flex;align-items:center;gap:6px;text-align:left}
.s-name svg{width:14px;height:14px;color:var(--text-3)}
.s-code{font-family:ui-monospace,Menlo,monospace;font-size:21px;font-weight:700;letter-spacing:.14em;color:var(--gold);border:1px dashed var(--gold-dim);border-radius:10px;padding:5px 12px}
/* ---------- Cevşen sayfası: bilgi kartı + okuma listeleri ---------- */
.cv-nedir{
  margin:0 16px 18px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-lg);
}
.cv-nedir-t{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:650;margin:0 0 10px;
}
.cv-nedir p{font-size:13.5px;line-height:1.75;color:var(--text-2);margin:0 0 10px}
.cv-nedir p:last-child{margin-bottom:0}
.cv-sets{padding:0 16px;margin-bottom:6px}
.cv-sets:empty{display:none}

.s-sec{display:flex;justify-content:space-between;align-items:baseline;padding:4px 2px 10px}
.s-sec span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.s-sec b{font-size:12px;color:var(--text-2);font-weight:500}
.s-friends{display:grid;gap:7px;margin-bottom:16px}
.s-friend{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 13px}
.s-on{width:8px;height:8px;border-radius:50%;background:var(--line-s);flex:none}
.s-on.is-on{background:#5cc98a;box-shadow:0 0 6px #5cc98a80}
.s-fname{flex:1;min-width:0;font-size:14.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-fcode{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--text-3);letter-spacing:.08em}
.s-del{color:var(--text-3);width:30px;height:30px;border-radius:9px;flex:none;font-size:13px}
.s-del:hover{color:#d97a7a;background:#a8484814}
.s-newbtn{margin:2px 0 18px}
.s-newbtn:disabled{opacity:.4}
.s-panel{border-color:var(--gold-dim)}
.s-picks{display:flex;flex-wrap:wrap;gap:7px}
.s-pick{display:flex;align-items:center;gap:7px;border:1px solid var(--line-s);border-radius:99px;padding:8px 13px;font-size:13.5px;color:var(--text-2);transition:all var(--dur)}
.s-pick.is-on{border-color:var(--gold);color:var(--text);background:#d6b25e14}
.s-pick b{display:grid;place-items:center;min-width:18px;height:18px;border-radius:50%;background:var(--gold);color:#12100a;font-size:10.5px;font-weight:700}
[data-theme=kagit] .s-pick b{color:#fff}
.s-select{width:100%;background:var(--surface-2);border:1px solid var(--line-s);color:var(--text);border-radius:12px;padding:11px 13px;font:inherit;font-size:14.5px;outline:none;margin-top:2px}
.s-panel-btns{display:flex;gap:8px;margin-top:16px}
.s-panel-btns .btn{flex:1}
.s-dist{padding:14px 16px}
.s-dist-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--text-2);margin-bottom:10px}
.s-dist-head b{color:var(--text)}
.s-fin{color:var(--gold);font-weight:600;margin-left:6px}
.s-bar{height:4px;margin-bottom:6px}
.s-dist-sub{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;margin-bottom:12px}
.s-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.s-bab{min-width:38px;height:34px;padding:0 8px;border-radius:9px;border:1px solid var(--line-s);background:var(--surface-2);font-size:13px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;transition:all var(--dur)}
.s-bab:hover{border-color:var(--gold)}
.s-bab.is-done{background:var(--gold);border-color:var(--gold);color:#12100a}
[data-theme=kagit] .s-bab.is-done{color:#fff}
.s-people{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:11px}
.s-person{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);background:var(--surface-2);border-radius:99px;padding:5px 11px}
.s-person b{color:var(--text-3);font-weight:500;font-variant-numeric:tabular-nums}
.s-person.is-done{color:var(--gold)}
.s-person.is-done b{color:var(--gold)}

/* ---------- ANA SAYFA ---------- */
.hero-home{padding:calc(var(--safe-t) + 36px) 22px 18px}
.hero-title-sm{font-size:clamp(34px,10vw,46px);margin:8px 0 6px}
.home-date{font-size:13px;color:var(--text-3);text-transform:capitalize}
.home-body{padding:6px 16px 16px;max-width:560px;margin-inline:auto;display:grid;gap:12px}
.h-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;text-align:left;width:100%;
  transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.h-tap:hover{border-color:var(--gold-dim)}
.h-tap:active{transform:scale(.985)}
.h-gold{border-color:var(--gold-dim)}
.h-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.h-row b{font-size:15.5px;font-weight:650}
.h-num{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.h-arrow{color:var(--text-3);font-size:20px;line-height:1}
.h-badge{background:var(--gold);color:#12100a;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 10px}
[data-theme=kagit] .h-badge{color:#fff}
.h-bar{margin-bottom:12px}
.h-sub{font-size:12.5px;color:var(--text-3);line-height:1.5}
.h-btns{display:flex;gap:8px}
.h-btns .btn{flex:1;padding:11px 10px;font-size:13.5px}
.h-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h-sm{display:grid;gap:5px;padding:14px 16px}
.h-sm b{font-size:14.5px;font-weight:650}

/* ---------- ANA SAYFA: NAMAZ VAKTİ MİHRAP KARTI ---------- */
.v-mihrab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;text-align:center;padding:22px 18px 16px;
  border:1px solid var(--gold-dim);
  border-radius:130px 130px var(--r-lg) var(--r-lg); /* mihrap kemeri */
  background:
    radial-gradient(120% 90% at 50% -20%, #d6b25e14 0%, transparent 55%),
    var(--surface);
  transition:border-color var(--dur),transform var(--dur) var(--ease);
  overflow:hidden;
}
.v-mihrab::before{ /* zarif geometrik doku */
  content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23d6b25e' stroke-width='1'%3E%3Cpath d='M24 4l5.9 14.1L44 24l-14.1 5.9L24 44l-5.9-14.1L4 24l14.1-5.9z'/%3E%3Ccircle cx='24' cy='24' r='7'/%3E%3C/g%3E%3C/svg%3E");
}
.v-mihrab:active{transform:scale(.985)}
.v-hijri{font-size:12px;color:var(--gold);letter-spacing:.06em;margin-bottom:8px}
.v-next-lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.v-next{font-family:Amiri,serif;font-size:30px;font-weight:700;color:var(--text);line-height:1.15}
.v-count{font-size:44px;font-weight:700;line-height:1.1;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.v-next-at{font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums}
.v-loc{margin-top:10px;font-size:12px;color:var(--text-2);border:1px dashed var(--line-s);border-radius:99px;padding:5px 14px}
.v-mihrab.v-empty{border-radius:var(--r-lg);padding:20px 18px}
.v-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.v-tile{
  display:grid;gap:1px;place-items:center;padding:9px 2px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
}
.v-tile .v-tn{font-size:10px;letter-spacing:.04em;color:var(--text-3)}
.v-tile .v-tt{font-size:12.5px;font-weight:650;color:var(--text);font-variant-numeric:tabular-nums}
.v-tile.is-next{background:#d6b25e1a;border-color:var(--gold)}
.v-tile.is-next .v-tn,.v-tile.is-next .v-tt{color:var(--gold)}
.v-tile.is-past{opacity:.45}
@media (max-width:360px){.v-tiles{grid-template-columns:repeat(3,1fr)}}

/* ---------- KIBLE PUSULASI ---------- */
.kb-stage{padding:26px 20px calc(var(--safe-b) + 90px);text-align:center;max-width:420px;margin-inline:auto}
.kb-city{font-size:13px;color:var(--text-2);margin-bottom:18px}
.kb-wrap{position:relative;width:min(78vw,300px);margin-inline:auto}
.kb-top{color:var(--gold);font-size:20px;line-height:1;margin-bottom:6px}
.kb-dial{
  position:relative;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, var(--surface) 92%, transparent 92%);
  border:1px solid var(--line-s);
  transition:transform 200ms linear;
  will-change:transform;
}
.kb-dial svg{position:absolute;inset:0;width:100%;height:100%}
.kb-tick{stroke:var(--line-s);stroke-width:1.4}
.kb-tick-M{stroke:var(--text-3);stroke-width:2.2}
.kb-n{fill:var(--gold);font-size:17px;font-weight:700;text-anchor:middle}
.kb-l{fill:var(--text-3);font-size:13px;text-anchor:middle}
.kb-ray{stroke:var(--gold);stroke-width:2;stroke-dasharray:3 4;opacity:.65}
.kb-kaabe-t{font-size:20px;text-anchor:middle;dominant-baseline:central}
.kb-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:Amiri,serif;font-size:22px;color:var(--gold);opacity:.5}
.kb-dial.is-ok{border-color:#3ecf8e;box-shadow:0 0 34px #3ecf8e66}
.kb-info{margin-top:20px;font-size:15px;font-weight:600;color:var(--gold);min-height:22px;transition:color var(--dur)}
.kb-deg{margin-top:6px;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;min-height:16px}
/* kıble bulundu: tüm ekran yeşile döner */
#view-kible{transition:background 400ms var(--ease)}
#view-kible.kb-green{background:radial-gradient(130% 90% at 50% 0%, #1d7a4e55 0%, #12563a22 45%, transparent 75%) var(--bg)}
.kb-green .kb-top{color:#3ecf8e}
.kb-green .kb-info{color:#3ecf8e;font-size:17px}
.kb-green .kb-ray{stroke:#3ecf8e;opacity:.9}
.kb-green .kb-n{fill:#3ecf8e}
.kb-green .kb-center{color:#3ecf8e;opacity:.7}

/* ---------- KÜTÜPHANE: OKUMA LİSTELERİ ---------- */
.lib-newset{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:14px}
.lib-newset-row{display:flex;align-items:center;gap:8px}
.lib-newset-row input{
  width:0;flex:1;background:var(--surface-2);border:1px solid var(--line-s);color:var(--text);
  border-radius:11px;padding:11px 12px;outline:none;font-size:15px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.lib-newset-row input:focus{border-color:var(--gold)}
.lib-tire{color:var(--text-3)}
.lib-set{display:flex;align-items:stretch;gap:8px;margin-bottom:10px}
.lib-set-main{
  flex:1;min-width:0;display:grid;gap:7px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 16px;transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.lib-set-main:active{transform:scale(.985)}
.lib-set-main:hover{border-color:var(--gold-dim)}
.lib-set .s-del{align-self:center}

/* ---------- GÜNCELLEME NOTLARI ---------- */
.news-list{list-style:none;display:grid;gap:12px;margin:4px 0 18px}
.news-list li{
  font-size:14px;line-height:1.6;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;
}

/* ---------- ALT BAR ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;align-items:stretch;
  padding:6px max(8px,env(safe-area-inset-left)) calc(var(--safe-b) + 6px);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-s);
}
.tab{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px 4px;border-radius:12px;color:var(--text-3);
  font-size:10px;font-weight:550;letter-spacing:.02em;
  transition:color var(--dur);max-width:88px;
}
.tab svg{width:22px;height:22px}
.tab.is-on{color:var(--gold)}
.tab:active{transform:scale(.94)}
.tab .dot{top:4px;right:calc(50% - 15px)}
/* alt bar görünen sayfalarda içerik barın altında kalmasın */
#view-home,#view-list,#view-social,#view-library,#view-zikir{padding-bottom:calc(var(--safe-b) + 78px)}

/* ---------- KÜTÜPHANE ---------- */
.lib-body{padding:16px;max-width:560px;margin-inline:auto}
.lib-book{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.lib-book:hover{border-color:var(--gold-dim)}
.lib-book:active{transform:scale(.985)}
.lib-cover{
  display:grid;place-items:center;width:64px;height:86px;flex:none;border-radius:10px;
  background:linear-gradient(160deg,var(--surface-2),var(--ink-3,var(--surface-2)));
  border:1px solid var(--gold-dim);color:var(--gold);
  font-family:Amiri,serif;font-size:30px;
}
[data-theme=kagit] .lib-cover{background:linear-gradient(160deg,#f0e9da,#e6dcc6)}
.lib-info{flex:1;min-width:0;display:grid;gap:3px}
.lib-info b{font-size:16.5px;font-weight:650}
.lib-info i{font-size:12.5px;color:var(--text-3);font-style:normal}
.lib-prog{font-size:11.5px;color:var(--gold);font-variant-numeric:tabular-nums}
.lib-book svg{width:18px;height:18px;color:var(--text-3);flex:none}

/* ---------- KİTAPLIK + MARKET ---------- */
#kitaplik-body{padding-top:2px}
.bk-row{display:flex;align-items:stretch;gap:8px;margin-bottom:10px}
.bk-main{
  flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 14px;transition:border-color var(--dur),transform var(--dur) var(--ease);
}
button.bk-main:hover{border-color:var(--gold-dim)}
button.bk-main:active{transform:scale(.985)}
.bk-static{cursor:default}
.bk-cov{
  width:52px;height:74px;flex:none;border-radius:8px;object-fit:cover;
  border:1px solid var(--line);background:var(--surface-2);
}
.bk-cov-txt{
  display:grid;place-content:center;gap:3px;padding:6px 5px;text-align:center;
  background:linear-gradient(155deg,var(--surface-2),color-mix(in oklab,var(--gold) 14%,var(--surface-2)));
  border-color:var(--gold-dim);
}
.bk-cov-txt i{font-family:Amiri,serif;font-style:normal;font-size:26px;line-height:1;color:var(--gold)}
.bk-cov-txt b{font-size:6.5px;font-weight:600;line-height:1.25;color:var(--text-3);
  letter-spacing:.02em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.bk-info{flex:1;min-width:0;display:grid;gap:3px}
.bk-info b{font-size:15.5px;font-weight:650;line-height:1.3}
.bk-info i{font-size:12px;color:var(--text-3);font-style:normal}
.bk-desc{font-size:12.5px;color:var(--text-2);line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bk-sub{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.bk-info .h-bar{margin-top:5px}
.bk-main>svg{width:17px;height:17px;color:var(--text-3);flex:none}
.bk-mkt{align-items:center}
.bk-btn{flex:none;align-self:center;padding:10px 14px;font-size:13px;white-space:nowrap}
.bk-empty{text-align:center;padding:26px 18px 20px;border:1px dashed var(--line);
  border-radius:var(--r-lg);background:var(--surface)}
.bk-empty-orn{display:block;font-family:Amiri,serif;font-size:32px;color:var(--gold);opacity:.8;margin-bottom:8px}
.bk-empty b{display:block;font-size:15px;margin-bottom:6px}
.bk-empty p{font-size:13px;color:var(--text-3);line-height:1.6;max-width:34ch;margin-inline:auto}

/* kitap okuyucu */
#view-book{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.bk-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 20px calc(var(--safe-b) + 88px);max-width:620px;margin-inline:auto;width:100%}
.bk-toc{list-style:none;display:grid;gap:6px}
.bk-toc-i{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.bk-toc-i:hover{border-color:var(--gold-dim)}
.bk-toc-i:active{transform:scale(.99)}
.bk-toc-i.is-on{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 8%,var(--surface))}
.bk-toc-n{font-size:11.5px;color:var(--text-3);min-width:26px;font-variant-numeric:tabular-nums;flex:none}
.bk-toc-t{font-size:14px;line-height:1.45;min-width:0}
.bk-text{font-size:var(--sz-bk,16px);line-height:1.85;color:var(--text)}
.bk-text p{margin:0 0 1em}
.bk-text h1,.bk-text h2,.bk-text h3,.bk-text h4{
  font-size:calc(var(--sz-bk,16px) + 2px);font-weight:650;color:var(--gold);
  margin:1.6em 0 .7em;line-height:1.4;
}
.bk-text h1:first-child,.bk-text h2:first-child,.bk-text h3:first-child{margin-top:0}
.bk-text blockquote{margin:1em 0;padding:2px 0 2px 14px;border-left:2px solid var(--gold-dim);color:var(--text-2)}
.bk-text ul,.bk-text ol{margin:0 0 1em 1.3em}
.bk-text li{margin-bottom:.4em}
.bk-text hr{border:none;border-top:1px solid var(--line);margin:1.6em 0}
.bk-text b,.bk-text strong{font-weight:650}

/* ---------- DUA & ZİKİR ---------- */
.zikir-body{padding:14px 16px;max-width:560px;margin-inline:auto}
.z-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:12px;margin:0 -16px;padding-inline:16px}
.z-chips::-webkit-scrollbar{display:none}
.z-stage{text-align:center;padding:18px 0 22px}
.z-ar{font-family:Amiri,serif;font-size:30px;color:var(--text);direction:rtl;line-height:1.9;margin-bottom:22px;min-height:56px}
.z-ar-lat{font-family:inherit;direction:ltr;font-size:21px;font-weight:600;display:flex;align-items:center;justify-content:center}
.z-tap{
  position:relative;width:min(64vw,240px);aspect-ratio:1;border-radius:50%;
  margin-inline:auto;display:grid;place-content:center;gap:2px;
  background:
    radial-gradient(closest-side, var(--surface) calc(100% - 7px), transparent calc(100% - 7px)),
    conic-gradient(var(--gold) calc(var(--p,0)*1%), var(--line-s) 0);
  border:none;transition:transform 120ms var(--ease);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}
.z-tap:active{transform:scale(.965)}
.z-count{font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.z-target{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.z-stats{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px;font-size:13px;color:var(--text-3)}
.z-stats b{color:var(--gold);font-weight:650;font-variant-numeric:tabular-nums}
.z-sep{width:4px;height:4px;border-radius:50%;background:var(--line-s)}
.z-targets{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 6px}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 84px);transform:translateX(-50%);z-index:70;
  background:var(--surface-2);border:1px solid var(--gold-dim);color:var(--text);
  padding:10px 18px;border-radius:99px;font-size:13.5px;white-space:nowrap;
  animation:toast 260ms var(--ease);box-shadow:0 8px 26px #0006}
@keyframes toast{from{transform:translate(-50%,8px);opacity:0}}

@media (min-width:720px){
  .list{grid-template-columns:1fr 1fr}
  .page{padding-inline:max(20px,calc((100% - 660px)/2))}
  .rnav{padding-inline:max(14px,calc((100% - 660px)/2))}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============ NAMAZ VAKİTLERİ ============ */
/* ana sayfa kartı */
.h-namaz{border-color:var(--gold-dim)}
.nz-home-row{display:flex;gap:12px;margin-top:12px}
.nz-home-next,.nz-home-count{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.nz-home-next span,.nz-home-count span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.nz-home-next b{font-size:20px;font-weight:700;color:var(--gold)}
.nz-home-count b{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

/* görünüm */
#view-namaz{min-height:100dvh;background:var(--bg)}
.nz-head{position:sticky;top:0;z-index:5;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.nz-body{padding:0 18px calc(var(--safe-b) + 90px)}
.nz-hero{text-align:center;padding:14px 8px 22px;position:relative;overflow:hidden}
.nz-hero .hero-orn{font-family:Amiri,serif;font-size:70px;line-height:1;color:var(--gold);opacity:.16;margin-bottom:-18px}
.nz-date{font-size:13px;color:var(--text-2);letter-spacing:.02em}
.nz-next-lbl{margin-top:14px;font-size:13px;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.nz-next-lbl b{color:var(--gold);font-weight:700}
.nz-count{font-size:clamp(44px,15vw,64px);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;margin-top:6px}
.nz-next-at{font-size:14px;color:var(--text-3);margin-top:4px}

.nz-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.nz-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;transition:border-color var(--dur),background var(--dur)}
.nz-ad{font-size:15px;font-weight:600;color:var(--text-2)}
.nz-vt{font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.nz-row.is-next{background:linear-gradient(90deg,color-mix(in oklab,var(--gold) 18%,var(--surface)),var(--surface));border-color:var(--gold-dim);box-shadow:inset 3px 0 0 var(--gold)}
.nz-row.is-next .nz-ad{color:var(--gold)}
.nz-row.is-next .nz-vt{color:var(--gold-2)}
[data-theme=kagit] .nz-row.is-next .nz-vt{color:var(--gold)}

.nz-actions{display:flex;gap:10px;margin-top:18px}
.nz-actions .btn{flex:1}
.nz-note{margin-top:16px;font-size:11.5px;color:var(--text-3);line-height:1.55;text-align:center}

/* şehir arama katmanı */
.nz-picker{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;animation:nz-fade var(--dur) var(--ease)}
@keyframes nz-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nz-picker-head{display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 12px) 16px 12px;border-bottom:1px solid var(--line)}
.nz-search-wrap{flex:1;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line-s);border-radius:12px;padding:0 12px;height:44px}
.nz-search-wrap svg{width:18px;height:18px;stroke:var(--text-3);fill:none;stroke-width:2;flex:none}
.nz-search-wrap input{flex:1;background:none;border:0;color:var(--text);font-size:15px;outline:none}
.nz-results{flex:1;overflow-y:auto;padding:8px 12px calc(var(--safe-b) + 16px)}
.nz-hint{color:var(--text-3);font-size:13px;text-align:center;padding:28px 12px}
.nz-res{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid transparent;transition:background var(--dur),border-color var(--dur)}
.nz-res:hover{background:var(--surface);border-color:var(--line)}
.nz-res b{font-size:15px;font-weight:600;color:var(--text)}
.nz-res span{font-size:12px;color:var(--text-3)}

/* yöntem seçimi */
#nz-method-body h3{font-size:17px;font-weight:650;margin-bottom:14px}
.nz-mopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.nz-mopt{padding:11px 12px;border:1px solid var(--line-s);border-radius:12px;color:var(--text-2);font-size:13.5px;font-weight:600;text-align:center;transition:all var(--dur)}
.nz-mopt.is-on{background:var(--gold);color:#12100a;border-color:var(--gold)}
[data-theme=kagit] .nz-mopt.is-on{color:#fff}
.nz-asr{display:flex;gap:8px}
.nz-asr .nz-mopt{flex:1}
.kb-fixrow{margin-top:14px}
.kb-fixrow .btn{padding:9px 18px;font-size:13px}