/* BloggerSL v3 design system (2026-11-09, owner-approved panel sketch): calm warm-grey ground, white cards with a hairline and
   a soft shadow, one violet accent, Geist. Light and dark from the same tokens: data-theme on <html>, else the OS setting. */
@font-face{font-family:Geist;src:url(fonts/geist-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist;src:url(fonts/geist-latin-ext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono-latin.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--bg:#f6f5f3;--bg2:#efede9;--panel:#fff;--side:#fbfaf8;--line:#e8e5e0;--line2:#d9d5ce;--ink:#17151a;--muted:#5f5b64;--dim:#8a8590;
 --brand:#5b3df5;--brand-ink:#fff;--brand-soft:#efebff;--brand-line:#d9d0ff;--ok:#16794f;--ok-soft:#e5f4ec;--warn:#a85b00;--warn-soft:#fdf1df;--bad:#c4321f;--bad-soft:#fde9e6;
 --sh:0 1px 2px rgba(23,21,26,.04),0 2px 8px -2px rgba(23,21,26,.06);--sh-lg:0 2px 4px rgba(23,21,26,.04),0 24px 60px -24px rgba(23,21,26,.22);
 --r:12px;--r-s:8px;--font:Geist,system-ui,-apple-system,'Segoe UI','Hiragino Sans','Yu Gothic UI',sans-serif;--mono:'Geist Mono',ui-monospace,monospace;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#111013;--bg2:#17161a;--panel:#19181c;--side:#141316;--line:#26242b;--line2:#34313a;--ink:#f1eff4;--muted:#a8a3b0;--dim:#7b7684;
 --brand:#8b74ff;--brand-ink:#0f0b24;--brand-soft:#221c3d;--brand-line:#3a3166;--ok:#4fd39a;--ok-soft:#14281f;--warn:#f0a845;--warn-soft:#2b2112;--bad:#ff7a66;--bad-soft:#2e1714;--sh:0 0 0 0 transparent;--sh-lg:0 30px 80px -30px rgba(0,0,0,.8);color-scheme:dark}}
:root[data-theme=dark]{--bg:#111013;--bg2:#17161a;--panel:#19181c;--side:#141316;--line:#26242b;--line2:#34313a;--ink:#f1eff4;--muted:#a8a3b0;--dim:#7b7684;
 --brand:#8b74ff;--brand-ink:#0f0b24;--brand-soft:#221c3d;--brand-line:#3a3166;--ok:#4fd39a;--ok-soft:#14281f;--warn:#f0a845;--warn-soft:#2b2112;--bad:#ff7a66;--bad-soft:#2e1714;--sh:0 0 0 0 transparent;--sh-lg:0 30px 80px -30px rgba(0,0,0,.8);color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:15px/1.55 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--brand);color:var(--brand-ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;border-radius:8px;z-index:99}.skip:focus{left:8px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-s);font:500 14px var(--font);border:0;cursor:pointer;white-space:nowrap;transition:filter .15s,box-shadow .15s,background .15s}
.btn.lg{height:46px;padding:0 22px;font-size:15px;border-radius:10px}
.btn.pri{background:var(--brand);color:var(--brand-ink);box-shadow:0 1px 2px rgba(40,20,140,.25),inset 0 1px 0 rgba(255,255,255,.14)}.btn.pri:hover{filter:brightness(1.08)}
.btn.sec{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2),0 1px 1px rgba(0,0,0,.03)}.btn.sec:hover{box-shadow:inset 0 0 0 1px var(--dim)}
.btn.ghost{background:transparent;color:var(--muted)}.btn.ghost:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.ib{width:36px;height:36px;border-radius:var(--r-s);display:inline-grid;place-items:center;color:var(--muted);background:transparent;border:0;cursor:pointer}.ib:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
/* bits */
.card{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh),inset 0 0 0 1px var(--line)}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.warn{background:var(--warn-soft);color:var(--warn)}.tag.bad{background:var(--bad-soft);color:var(--bad)}.tag.mut{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted)}.tag.br{background:var(--brand-soft);color:var(--brand)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px;flex:none;background:linear-gradient(135deg,#c9b8ff,#7d62f5)}
.kbd{font:500 11px var(--mono);padding:1px 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--dim)}
.muted{color:var(--muted)}.dim{color:var(--dim)}
/* public header */
.ph{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.ph.scrolled{border-bottom-color:var(--line)}
.ph .wrap{display:flex;align-items:center;gap:8px;height:64px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.02em;margin-right:18px}
.logo .mk{width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:-.04em}
.logo b{color:var(--brand);font-weight:600}
.ph nav{display:flex;gap:2px}.ph nav a{padding:7px 11px;border-radius:var(--r-s);color:var(--muted);font-weight:500;font-size:14px}.ph nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.ph .sp{flex:1}
.lang{position:relative}.lang summary{list-style:none;cursor:pointer;height:36px;padding:0 10px;border-radius:var(--r-s);display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500;font-size:13px}.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.lang ul{position:absolute;right:0;top:42px;list-style:none;margin:0;padding:6px;min-width:160px;background:var(--panel);border-radius:10px;box-shadow:var(--sh-lg),inset 0 0 0 1px var(--line);z-index:30}
.lang li a{display:flex;justify-content:space-between;padding:7px 10px;border-radius:6px;font-size:14px;color:var(--muted)}.lang li a:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}.lang li a[aria-current]{color:var(--ink);font-weight:600}
.menu-b{display:none}
.ph nav.mnav{display:none}
@media(max-width:860px){.ph nav,.ph .hide-s{display:none}.menu-b{display:inline-grid}.ph nav.mnav{display:block;border-top:1px solid var(--line);padding:8px 16px 16px}.ph nav.mnav[hidden]{display:none}.mnav a{display:block;padding:11px 8px;font-weight:500;border-radius:8px}.mnav a:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}}
/* public footer */
.pf{border-top:1px solid var(--line);margin-top:96px;padding:40px 0 48px;color:var(--muted);font-size:14px}
.pf .wrap{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.pf h4{font-size:13px;color:var(--ink);margin-bottom:10px;letter-spacing:0}
.pf ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}.pf a:hover{color:var(--ink)}
.pf .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;font-size:12px;color:var(--dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.pf .wrap{grid-template-columns:1fr 1fr}.pf .wrap>div:first-child{grid-column:1/-1}}
/* forms (shared by every page) */
.fld{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--ink)}
.fld>span{color:var(--muted)}
.fld-row{display:flex;justify-content:space-between;align-items:center}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],input[type=url],select,textarea{width:100%;height:42px;padding:0 12px;border-radius:var(--r-s);border:0;background:var(--panel);color:var(--ink);font:15px var(--font);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .15s}
textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:hover,select:hover,textarea:hover{box-shadow:inset 0 0 0 1px var(--dim)}
input:focus,select:focus,textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--brand),0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.fld-err{color:var(--bad);font-weight:500}
.lnk{background:none;border:0;padding:0;font:500 13px var(--font);color:var(--brand);cursor:pointer}.lnk:hover{text-decoration:underline;text-underline-offset:3px}
.lnk.center{display:block;margin:4px auto 0}
.btn.wide{width:100%}
.btn:disabled{opacity:.6;cursor:progress}
.seg{display:flex;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,transparent);gap:2px}
.seg button{flex:1;height:34px;border:0;border-radius:8px;background:none;color:var(--muted);font:500 14px var(--font);cursor:pointer}
.seg button[aria-selected=true],.seg button[aria-pressed=true]{background:var(--panel);color:var(--ink);box-shadow:var(--sh),0 0 0 1px var(--line)}
.alert{display:grid;gap:3px;padding:11px 13px;border-radius:10px;font-size:14px;line-height:1.45}
.alert.bad{background:var(--bad-soft);color:var(--bad)}.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.info{background:var(--brand-soft);color:var(--brand)}
.alert span{color:var(--ink);opacity:.8;font-size:13px}
[hidden]{display:none!important}
/* ---- light motion (owner 2026-11-10: "hafif animasyon, mantıklı yerlerde") ---- */
@keyframes m-up{from{opacity:0;transform:translateY(10px)}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-pop{from{opacity:0;transform:scale(.96)}}
@keyframes m-spin{to{transform:rotate(360deg)}}
.btn.busy{position:relative;pointer-events:none;opacity:.85}
.btn.busy:after{content:"";width:14px;height:14px;margin-left:2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:m-spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}
/* public header / footer icons */
.ph nav a{display:inline-flex;align-items:center;gap:6px}.ph nav a .i{width:15px;height:15px;opacity:.7}
.mnav a{display:flex;align-items:center;gap:10px}.mnav a .i{width:17px;height:17px;opacity:.75}
.pf h4{display:flex;align-items:center;gap:8px}.pf h4 .i{width:15px;height:15px;opacity:.7}
.btn .i{flex:none}
.sh-i{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand-soft,color-mix(in srgb,var(--brand) 12%,transparent));color:var(--brand)}.sh-i .i{width:20px;height:20px}
.sh-i.sm{width:32px;height:32px;border-radius:10px}.sh-i.sm .i{width:17px;height:17px}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:7px}.seg button .i{width:15px;height:15px}
/* page changes (2026-11-10): a short cross-fade between pages; the panel sidebar/top bar and the public header stay put */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
.app>.side{view-transition-name:bsl-side}.app .top{view-transition-name:bsl-top}#ph{view-transition-name:bsl-head}
::view-transition-group(bsl-side),::view-transition-group(bsl-top),::view-transition-group(bsl-head){animation:none}
::view-transition-old(bsl-side),::view-transition-old(bsl-top),::view-transition-old(bsl-head){display:none}
::view-transition-new(bsl-side),::view-transition-new(bsl-top),::view-transition-new(bsl-head){animation:none}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media(max-width:960px){.app>.side{view-transition-name:none}}