/* lyeli kabugunun (shell.css, uretilmis) veli sitesine uyarlamasi. Elle yazilir. */

/* Icerik, sol cubugun yanindan baslar (lyeli'deki #app-page/#footer gibi). */
main, #footer { margin-left: var(--side-w); }
body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); }

/* Karolar/dugmeler baglanti (<a>): lyeli'de <button>. */
a.stile, a.sbtn, a.lysearch__item { text-decoration: none; color: inherit; }
a.sbtn { color: var(--ink-soft); }
a.stile[hidden], a.sbtn[hidden] { display: none; }

/* lyeli'deki gibi sticky ust cubugun altinda bosluk; eski veli ust cubugu yok. */
.wrap { width: min(1080px, 100% - 40px); }
@media (max-width: 880px) { main, #footer { margin-left: 0; } }

/* ---- sol cubuk: alt yigin (lyeli'ye git / destek / abonelik) + profil + dil ---- */
.sidebar__stack { display: grid; gap: 6px; flex: 0 0 auto; padding-bottom: 8px; }
.stile--wide { min-height: 44px; }
.sidebar__grid[hidden] { display: none; }
.sidebar__foot > .menu { min-width: 0; }
.vavatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 .8rem var(--font-display); }
.sidebar .sbtn[hidden] { display: none; }

/* ---- logo: koyu temada beyaz (acik temada kendi koyu rengi) ---- */
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .brand__mark, html:not([data-theme="light"]) .brand:hover .brand__mark { filter: brightness(0) invert(1); } }
html[data-theme="dark"] .brand__mark, html[data-theme="dim"] .brand__mark, html[data-theme="dark"] .brand:hover .brand__mark, html[data-theme="dim"] .brand:hover .brand__mark { filter: brightness(0) invert(1); }

/* ---- ust cubuk: cocuk secici (arama kutusunun sagi) ---- */
.header__right { display: block !important; justify-self: start; min-width: 0; padding-left: 4px; }
.kidsel { position: relative; }
.kidsel[hidden] { display: none; }
.kidsel__btn { display: inline-flex; align-items: center; gap: 9px; max-width: min(300px, 40vw); padding: 5px 8px 5px 6px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font: 700 .9rem var(--font-body); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.kidsel__btn:hover, .kidsel__btn[aria-expanded="true"] { border-color: var(--accent); background: var(--surface); box-shadow: 0 6px 18px rgba(30,26,66,.08); }
.kidsel__av { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 .8rem var(--font-display); }
.kidsel__av svg { width: 15px; height: 15px; }
.kidsel__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kidsel__chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); transition: transform .2s var(--ease); }
.kidsel__chev svg { width: 18px; height: 18px; }
.kidsel__btn[aria-expanded="true"] .kidsel__chev { transform: rotate(180deg); }
.kidsel__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(340px, 92vw); padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-2); display: grid; gap: 4px; }
.kidsel__panel[hidden] { display: none; }
.kidsel__label { padding: 6px 8px 2px; font: 800 .64rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kidsel__row { display: flex; align-items: center; gap: 6px; border-radius: 10px; }
.kidsel__row.is-on { background: var(--accent-wash); }
.kidsel__pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: 0; background: none; color: var(--ink); font: 600 .92rem var(--font-body); text-align: left; cursor: pointer; border-radius: 10px; }
.kidsel__pick:hover { background: var(--surface-2); }
.kidsel__pick span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kidsel__rm { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; }
.kidsel__rm:hover { color: var(--berry); background: var(--berry-wash); }
.kidsel__rm svg { width: 16px; height: 16px; }
.kidsel__sep { height: 1px; background: var(--line); margin: 4px 2px; }
.kidsel__add { display: grid; gap: 8px; padding: 6px 8px 8px; }
.kidsel__add p { margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.4; }
.kidsel__add form { display: flex; gap: 8px; }
.kidsel__add input { flex: 1; min-width: 0; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: 700 1rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.kidsel__add input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.kidsel__add button { padding: 0 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 700 .9rem var(--font-body); cursor: pointer; }
.kidsel__msg { font-size: .84rem; }
.kidsel__msg.is-err { color: var(--berry); }
.kidsel__msg.is-ok { color: var(--accent); }
@media (max-width: 640px) { .kidsel__btn { padding: 4px 6px; } .kidsel__name { display: none; } .kidsel__panel { position: fixed; left: 12px; right: 12px; width: auto; top: calc(var(--header-h) + 6px); } }

/* ---- lyeli'ye uygun, ince kaydirma cubugu ---- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); background-clip: content-box; }

/* ---- ana sayfa: sinava kalan sure + raporlar ---- */
.examcard h2 { margin-bottom: .8em; }
.exam--hero { padding: 18px 22px; gap: 10px 18px; background: linear-gradient(135deg, var(--accent-wash), color-mix(in srgb, var(--accent-wash) 40%, var(--surface))); }
.exam--hero b { font-size: clamp(2.4rem, 7vw, 3.6rem); letter-spacing: -.02em; font-family: var(--font-display); }
.exam--hero > span:not(.chip):not(.sep) { font-size: 1.05rem; }
.exam--hero .bar-wrap { flex: 1 1 100%; width: auto; height: 10px; }
.examcard__none { display: grid; gap: 4px; margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--surface-2); }
.examcard__none span { color: var(--muted); }
.repcard h3 { margin: 0; }
.delta { align-self: center; font-weight: 700; font-size: .85rem; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.delta--up { background: var(--accent-wash); color: var(--accent); }
.delta--down { background: var(--berry-wash); color: var(--berry); }
.dash > h2 { margin: .4em 0 -.4em; }

@media print {
  .header, .sidebar, .mobilenav, #footer, .cta, .btn, .kidsel { display: none !important; }
  main { margin-left: 0 !important; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ---- logonun yaninda 3 satirlik "Veli Bilgilendirme Sistemi" ---- */
.brand__tag { display: inline-flex; flex-direction: column; justify-content: center; margin-left: 10px; padding-left: 10px; border-left: 1.5px solid var(--line-strong); font: 800 .6rem/1.12 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.brand__tag span:first-child { color: var(--accent); }
.header .brand { align-items: center; }
@media (max-width: 760px) { .brand__tag { display: none; } }

/* ---- grafikler: puan gidisi, plan izgarasi, test listesi ---- */
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .line { stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }
.chart .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.2; }
.tlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.tlist__row { display: grid; grid-template-columns: 96px 80px 1fr 52px; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.tlist__row:last-child { border-bottom: 0; }
.tlist__row b { text-align: right; }
.tlist__n { color: var(--muted); }
.tlist .bar-wrap { width: auto; background: var(--surface-2); }
.pgrid { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pday { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-weight: 700; font-size: .85rem; border: 1px solid var(--line); }
.pday--hit { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.pday--miss { background: var(--berry-wash); color: var(--berry); border-color: transparent; }
.pday--off { background: var(--surface-2); color: var(--muted); }
.pday--key { width: 16px; height: 16px; border-radius: 5px; display: inline-block; vertical-align: middle; }
.chart__legend { align-items: center; }
@media (max-width: 560px) { .tlist__row { grid-template-columns: 80px 1fr 48px; } .tlist__n { display: none; } }

/* ---- abonelik ---- */
.subpick { display: flex; flex-wrap: wrap; gap: 8px; }
.subpick__b { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font: 700 .92rem var(--font-body); cursor: pointer; }
.subpick__b.is-on { border-color: var(--accent); background: var(--accent-wash); }
.subrow { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); }
.subrow:first-of-type { border-top: 0; }
.subrow__main { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.subrow__act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.subchip { padding: 3px 10px; border-radius: 999px; font: 800 .72rem var(--font-body); background: var(--surface-2); color: var(--muted); }
.subchip--active { background: var(--accent-wash); color: var(--accent); }
.subchip--pending { background: #FFF1D6; color: #9A5B06; }
.subchip--canceled { background: var(--berry-wash); color: var(--berry); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--accent); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.seg__b { padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: 700 .88rem var(--font-body); cursor: pointer; }
.seg__b.is-on { background: var(--accent); color: var(--accent-ink); }
.plans { display: grid; gap: 16px; margin: 14px 0; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { position: relative; display: grid; gap: 10px; align-content: start; box-shadow: none; }
.plan--sat { border-top: 4px solid var(--d-math); }
.plan--english { border-top: 4px solid var(--amber); }
.plan__d { margin: 0; color: var(--muted); }
.plan__tag { position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 999px; background: #FFF1D6; color: #9A5B06; font: 800 .72rem var(--font-body); }
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price b { font: 800 1.8rem var(--font-display); }
.plan__price span { color: var(--muted); }
.plan__price s { color: var(--muted); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .subchip--pending, html:not([data-theme="light"]) .plan__tag { background: #3A2A0C; color: #F3C46B; } }
html[data-theme="dark"] .subchip--pending, html[data-theme="dim"] .subchip--pending, html[data-theme="dark"] .plan__tag, html[data-theme="dim"] .plan__tag { background: #3A2A0C; color: #F3C46B; }

/* ---- raporlar: gezinti, yatay cubuklar, degerlendirme ---- */
.repnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.repnav--end { justify-content: flex-end; }
.hbars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.hbars__row { display: grid; grid-template-columns: 140px 1fr 96px; align-items: center; gap: 12px; font-size: .92rem; }
.hbars__row b { text-align: right; }
.hbars .bar-wrap { width: auto; background: var(--surface-2); height: 10px; }
.evalcard__t { font-size: 1.05rem; line-height: 1.6; margin: .2em 0 1em; }
.mrow { grid-template-columns: 96px 70px 1fr 120px 80px; }
@media (max-width: 640px) { .hbars__row { grid-template-columns: 96px 1fr 70px; } .mrow { grid-template-columns: 80px 60px 1fr; } }

/* ---- yardim merkezi ---- */
.sp2 { display: grid; gap: 22px; padding: 32px 0 64px; }
.sp2__head { display: grid; gap: 10px; }
.sp2__search { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: 1rem var(--font-body); }
.sp2__search:focus { outline: none; border-color: var(--accent); }
.sp2__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp2__chip { padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font: 700 .86rem var(--font-body); cursor: pointer; }
.sp2__chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sp2__list { display: grid; gap: 22px; }
.sp2__group { display: grid; gap: 8px; }
.sp2__group h2 { font-size: 1.15rem; margin: 0 0 4px; }
.sp2__item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.sp2__item summary { padding: 14px 18px; cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sp2__item summary::-webkit-details-marker { display: none; }
.sp2__item summary::after { content: "+"; color: var(--muted); font-weight: 800; }
.sp2__item[open] summary::after { content: "–"; }
.sp2__a { padding: 0 18px 14px; color: var(--ink-soft); }
.sp2__a p { margin: 0 0 .7em; }
.sp2__steps { margin: 0 0 .7em; padding-left: 1.3em; display: grid; gap: 4px; }
.sp2__a code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-family: var(--font-mono); font-size: .88em; }
.sp2__contact { display: grid; gap: 8px; justify-items: start; }

/* kucuk duzeltmeler */
.brand, .brand:hover, .brand__tag { text-decoration: none; }
.sp2__head .eyebrow { justify-self: start; }

/* ---- ziyaretci onizlemesi (ornek veri) ---- */
.demonote { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: #FFF1D6; border-color: #F0D9A6; color: #6B4306; margin: 0; }
.demonote__act { display: inline-flex; gap: 8px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .demonote { background: #3A2A0C; border-color: #5B4417; color: #F3D9A0; } }
html[data-theme="dark"] .demonote, html[data-theme="dim"] .demonote { background: #3A2A0C; border-color: #5B4417; color: #F3D9A0; }

.mailpref { align-items: flex-start; padding: 8px 0; }
.mailpref span { display: grid; gap: 2px; }
.mailpref small { color: var(--muted); font-size: .86rem; }

/* ---- ust cubuk sagi: cocuk secici + tema menusu yan yana ---- */
.header__right { display: flex !important; align-items: center; gap: 8px; }
.themebox { position: relative; }
.themebox .iconbtn svg { width: 20px; height: 20px; }
.themebox .menu__panel { right: 0; left: auto; }

/* ==== sol cubuk: kose isiklari (sag ust + sol alt), her dugmede ==== */
.sbtn { --tile-hue: var(--accent); }
.stile .stile__wash {
  opacity: 1 !important;
  background:
    radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--tile-hue, var(--accent)) 74%, transparent), transparent 64%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--tile-hue, var(--accent)) 52%, transparent), transparent 62%) !important;
}

/* ==== Haber ver: omurgayi dolduran buyuk dugme (acik temada siyah-gri, koyuda beyaz-gri) ==== */
:root { --nf-a: #0F2D21; --nf-b: #1F5A41; --nf-c: #2F8A62; --nf-ink: #FFFFFF; --nf-glow: rgba(120,230,180,.40); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nf-a: #7FD1AB; --nf-b: #4FA683; --nf-c: #2F7D5B; --nf-ink: #06140E; --nf-glow: rgba(255,255,255,.45); } }
:root[data-theme="dark"], :root[data-theme="dim"] { --nf-a: #7FD1AB; --nf-b: #4FA683; --nf-c: #2F7D5B; --nf-ink: #06140E; --nf-glow: rgba(255,255,255,.45); }
.fly { position: relative; min-width: 0; }
.fly--notify { flex: 1 1 auto; min-height: 104px; max-height: 250px; display: flex; margin: 2px 0 8px; }
.notifybtn {
  position: relative; overflow: hidden; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px;
  padding: 16px 16px 14px; border: 0; border-radius: 20px; cursor: pointer; text-align: left;
  background: linear-gradient(145deg, var(--nf-a) 0%, var(--nf-b) 55%, var(--nf-c) 100%); color: var(--nf-ink);
  box-shadow: 0 10px 26px rgba(20,20,30,.22); transition: transform .28s var(--ease-out-back), box-shadow .28s var(--ease);
}
.notifybtn::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 100% 0%, var(--nf-glow), transparent 55%), radial-gradient(110% 110% at 0% 100%, color-mix(in srgb, var(--nf-glow) 60%, transparent), transparent 58%); }
.notifybtn:hover, .notifybtn[aria-expanded="true"] { transform: translateY(-2px) scale(1.015); box-shadow: 0 16px 34px rgba(20,20,30,.3); }
.notifybtn > * { position: relative; }
.notifybtn__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--nf-ink) 14%, transparent); }
.notifybtn__icon svg { width: 24px; height: 24px; }
.notifybtn__t { display: grid; gap: 2px; }
.notifybtn__t b { font: 800 1.15rem var(--font-display); letter-spacing: -.01em; }
.notifybtn__t small { font-size: .78rem; opacity: .78; line-height: 1.25; }

/* ==== disari acilan paneller (fareyle ya da dokunarak) ==== */
.fly__panel {
  position: fixed; z-index: 90; width: 322px; padding: 12px; display: grid; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent);
  animation: fly-in .2s var(--ease);
}
.fly__panel[hidden] { display: none; }
@keyframes fly-in { from { opacity: 0; transform: translateX(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.fly__head { display: grid; gap: 2px; padding: 4px 6px 8px; }
.fly__head b { font: 800 1.05rem var(--font-display); }
.fly__head small { color: var(--muted); }
.fly__guest { margin: 4px 6px; font-size: .88rem; }
.fly__guest[hidden] { display: none; }
.fly__who { padding: 6px 10px 8px; font-weight: 800; color: var(--ink); }
.fly__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 .92rem var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.fly__item:hover { background: var(--surface-2); color: var(--accent); }
.fly__item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.fly__item--danger { color: var(--berry); }
.fly__item--danger:hover { background: var(--berry-wash); color: var(--berry); }
.fly__sep { height: 1px; background: var(--line); margin: 6px 2px; }
.fly__label { padding: 2px 10px; font: 800 .64rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fly__themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 4px 2px; }
.fly__theme { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink-soft); font: 700 .74rem var(--font-body); cursor: pointer; }
.fly__theme svg { width: 18px; height: 18px; }
.fly__theme.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.fly--account > .sbtn[hidden] { display: none; }
@media (max-width: 880px) { .fly__panel { left: 12px !important; right: 12px; width: auto; } }

/* giris/profil + dil dugmeleri: duz (renk/isik yok) */
.fly--account > .sbtn, .sidebar__foot > .menu > .sbtn { background: var(--surface); }

/* ==== Haber ver: sitenin temasi gibi (acik temada acik, koyu temada koyu — diger sol bar dugmeleriyle ayni dil) ==== */
.notifybtn {
  --tile-hue: var(--accent);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.notifybtn::before {
  background:
    radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--tile-hue) 60%, transparent), transparent 64%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--tile-hue) 42%, transparent), transparent 62%);
}
.notifybtn:hover, .notifybtn[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--shadow-2); }
.notifybtn__icon { background: var(--surface); border: 1px solid var(--line); color: var(--accent); box-shadow: var(--shadow-1); }
.notifybtn__t b { color: var(--ink); }
.notifybtn__t small { color: var(--muted); opacity: 1; }

/* Haber ver: zil simgesi butonun bos alanina oturacak sekilde buyur ve ortalanir */
.notifybtn { justify-content: space-between; }
.notifybtn__icon { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; box-shadow: none; background: none; border-radius: 0; }
.notifybtn__icon svg { width: auto; height: 100%; max-height: 74px; min-height: 34px; aspect-ratio: 1; stroke-width: 1.5; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 30%, transparent)); }
.fly--notify { min-height: 124px; }
.notifybtn__icon { overflow: hidden; }
.notifybtn__icon svg { min-height: 0; max-width: 100%; }

/* ==== sol cubuk: hepsi ayni olcu, ayni aralik, ayni hiza ==== */
.sidebar__in { gap: 10px; }
.sidebar__grid, .sidebar__stack, .sidebar__foot { gap: 8px; }
.sidebar__stack { padding-bottom: 0; }
.fly--notify { margin: 0; }
.sidebar__foot { align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sidebar__foot > .fly, .sidebar__foot > .menu { display: flex; min-width: 0; }
.sidebar__foot .sbtn { flex: 1 1 auto; width: 100%; height: 62px; justify-content: center; box-sizing: border-box; font: inherit; }
.sidebar__foot .sbtn__icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; }
.sidebar__foot .sbtn small { display: block; height: 14px; line-height: 14px; font: 700 .64rem/14px var(--font-body); text-align: center; }
.sidebar__foot .sbtn svg.flag, .sidebar__foot .sbtn__icon > svg { width: 22px; height: 22px; }
.sidebar__foot .vavatar { width: 28px; height: 28px; }
.sidebar__foot .sbtn__icon svg.flag { height: 15px; width: 22px; }

/* ==== tum sol bar kisa ekranlarda da kesilmeden gorunsun: olculer ekran yuksekligine gore kisilir ==== */
:root { --row: 62px; --stack-h: 44px; --foot-h: 62px; --nf-min: 118px; --bell: 40px; }
@media (max-height: 880px) { :root { --row: 54px; --stack-h: 40px; --foot-h: 56px; --nf-min: 100px; --bell: 34px; } }
@media (max-height: 770px) { :root { --row: 46px; --stack-h: 36px; --foot-h: 50px; --nf-min: 86px; --bell: 28px; } }
@media (max-height: 670px) { :root { --row: 40px; --stack-h: 32px; --foot-h: 48px; --nf-min: 62px; --bell: 20px; } .notifybtn__t small { display: none; } .notifybtn { padding: 10px 14px; } }
.sidebar__grid { grid-auto-rows: var(--row); }
.stile--wide { min-height: var(--stack-h); height: var(--stack-h); }
.sidebar__foot .sbtn { height: var(--foot-h); }
.fly--notify { min-height: var(--nf-min); }
.notifybtn__icon svg { max-height: var(--bell); min-height: 0; }
.notifybtn { gap: 6px; }
.sidebar { overflow-y: auto; }

/* Yasal ve iletişim sayfaları (main.doc) kenar çubuğunun yanında ortalanır; altına taşmaz. */
main.doc {
  width: min(780px, calc(100% - var(--side-w) - 32px));
  margin-left: calc(var(--side-w) + (100% - var(--side-w) - min(780px, 100% - var(--side-w) - 32px)) / 2);
  margin-right: 0;
}

.cform .flabel { display: block; }