/* =====================================================================
   Portal (veli, öğrenci, personel) — mobil öncelikli PWA kabuğu.
   Portal, panelden bilerek farklı bir yüzeydir: çok açık mavi-gri zemin, öne çıkan beyaz kartlar,
   yumuşak ofsetli gölge, yuvarlak köşe ve ölçülü hareket. Bu görünüm yalnızca `body.portal` altındadır;
   panel ve app.css sade kalır. Renkler app.css değişkenlerinden gelir; portal bunları kendi gövdesinde
   yeniden tanımlar (açık ve karanlık tema). Tema: <html data-theme="dark">.
   Alt sekme çubuğu: en çok 5 sekme, 44px hedef, çentikli ekranda env(safe-area-inset-*) boşluğu.
   ===================================================================== */

:root {
    --tabbar-h: 64px;
    --portal-w: 640px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Portal değişkenleri: açık tema ---------- */
body.portal {
    --bg: #edf1f8;
    --surface: #ffffff;
    --surface-2: #f2f5fb;
    --border: #dde4ef;
    --border-strong: #c6cfdf;
    --muted: #586070;
    --primary-soft: #e9ecfc;
    --radius: 18px;
    --radius-sm: 12px;
    --seg-track: #e3e9f3;
    --shadow-card: 0 1px 2px rgba(28, 42, 88, .06), 0 8px 24px -8px rgba(28, 42, 88, .16);
    --shadow-lift: 0 2px 4px rgba(28, 42, 88, .08), 0 16px 32px -10px rgba(28, 42, 88, .26);
    --shadow-btn: 0 1px 2px rgba(43, 59, 192, .30), 0 8px 16px -6px rgba(43, 59, 192, .50);
    --shadow-bar: 0 -10px 28px -14px rgba(28, 42, 88, .30);
    --shadow-top: 0 8px 24px -16px rgba(28, 42, 88, .35);
    --edge: inset 0 0 0 transparent;
    --shadow-seg: 0 1px 2px rgba(28, 42, 88, .10), 0 4px 10px -4px rgba(28, 42, 88, .25);
    --hue-violet: #5b34b8; --hue-violet-bg: #efe9fc;
    --hue-teal: #0a6f6a;   --hue-teal-bg: #dff3f1;
    --hue-sky: #17609f;    --hue-sky-bg: #e1eefa;
    --hue-rose: #a8205a;   --hue-rose-bg: #fbe6ef;
    --hue-indigo: #3342b5; --hue-indigo-bg: #e7eafb;
    background: var(--bg);
    caret-color: var(--primary);
}
body.portal ::selection { background: var(--primary-soft); color: var(--text); }

/* ---------- Portal değişkenleri: karanlık tema (aynı derinlik: açık kenar + koyu gölge) ---------- */
:root[data-theme="dark"] body.portal {
    --bg: #0d111a;
    --surface: #171c28;
    --surface-2: #202737;
    --border: #2b3347;
    --border-strong: #3b455c;
    --control-border: #707a90;
    --muted: #a3acbf;
    --primary-soft: #1d2a45;
    --seg-track: #0d111a;
    --shadow-card: 0 10px 26px -10px rgba(0, 0, 0, .75);
    --shadow-lift: 0 18px 34px -12px rgba(0, 0, 0, .85);
    --shadow-btn: 0 8px 18px -8px rgba(143, 184, 255, .45);
    --shadow-bar: 0 -12px 30px -14px rgba(0, 0, 0, .8);
    --shadow-top: 0 10px 26px -16px rgba(0, 0, 0, .8);
    --edge: inset 0 1px 0 rgba(255, 255, 255, .07);
    --shadow-seg: 0 4px 10px -4px rgba(0, 0, 0, .7);
    --hue-violet: #c3aaff; --hue-violet-bg: #2a2147;
    --hue-teal: #72dad2;   --hue-teal-bg: #12302f;
    --hue-sky: #8fc6ff;    --hue-sky-bg: #15283d;
    --hue-rose: #ff9fc2;   --hue-rose-bg: #3a1a2b;
    --hue-indigo: #a8b3ff; --hue-indigo-bg: #1f2548;
}

body.portal { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.portal-skip:focus { position: fixed; z-index: 100; left: .5rem; top: .5rem; width: auto; height: auto; clip: auto; padding: .5rem .75rem; background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius-sm); }

/* ---------- Üst şerit ---------- */
.portal-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    min-height: var(--topbar-h);
    padding: var(--safe-t) max(1rem, var(--safe-r)) 0 max(1rem, var(--safe-l));
    background: var(--surface);
    box-shadow: var(--edge), var(--shadow-top);
}
.portal-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; min-height: 44px; color: var(--text); font-weight: 600; font-size: var(--fs-md); }
.portal-brand:hover { text-decoration: none; }
.portal-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-top-actions { display: flex; align-items: center; gap: .25rem; flex: none; min-width: 0; }
.portal-top .btn-icon { min-width: 44px; min-height: 44px; border-radius: 14px; }
.portal-student select { max-width: 11rem; height: 44px; font-size: var(--fs-sm); }
.js .portal-student noscript { display: none; }

/* Okul logosu ya da nötr simge: yumuşak zeminli yuvarlak kare */
.portal-logo { display: grid; place-items: center; flex: none; overflow: hidden; background: var(--primary-soft); color: var(--primary); }
.portal-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.portal-logo-sm { width: 36px; height: 36px; border-radius: 12px; }
.portal-logo-sm .icon { width: 20px; height: 20px; }
.portal-logo-sm img { padding: 3px; }

/* Giriş ekranında okul adı kartın başlığıdır; şeritte yinelenmez, şerit zeminle bütünleşir. */
body.portal-bare .portal-top { background: transparent; box-shadow: none; justify-content: flex-end; }
body:has(.portal-login-head) .portal-brand { display: none; }

.portal-netbar { padding: .45rem 1rem; text-align: center; font-size: var(--fs-sm); background: var(--warning-soft); color: var(--warning); }
.portal-netbar[hidden] { display: none; }

/* ---------- İçerik: tek kolon ---------- */
.portal-main {
    flex: 1; width: 100%; max-width: var(--portal-w); margin: 0 auto;
    padding: 1.25rem max(1rem, var(--safe-r)) 1.5rem max(1rem, var(--safe-l));
}
body.has-tabbar .portal-main { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 1.5rem); }
.portal-h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.012em; margin: 0 0 .25rem; }
.portal-greeting { margin-bottom: 1.25rem; }
.portal-greeting p { margin: 0; }
.portal-main .card {
    margin-bottom: 1rem; padding: 1.35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--edge), var(--shadow-card);
}
.portal-main .card.empty { padding: 2rem 1rem; }
.portal-main .card-title { gap: .65rem; font-size: var(--fs-lg); }
.portal-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.portal-code { font-family: var(--mono); font-size: var(--fs-xl); letter-spacing: .3em; text-align: center; }

/* Her kart türünün kendi yumuşak renkli simgesi */
.portal-ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--hue-sky-bg); color: var(--hue-sky); }
.portal-ico .icon { width: 20px; height: 20px; }
.portal-ico-violet { background: var(--hue-violet-bg); color: var(--hue-violet); }
.portal-ico-teal { background: var(--hue-teal-bg); color: var(--hue-teal); }
.portal-ico-sky { background: var(--hue-sky-bg); color: var(--hue-sky); }
.portal-ico-rose { background: var(--hue-rose-bg); color: var(--hue-rose); }
.portal-ico-indigo { background: var(--hue-indigo-bg); color: var(--hue-indigo); }
.portal-ico-lg { width: 56px; height: 56px; border-radius: 18px; margin-bottom: .75rem; }
.portal-ico-lg .icon, .portal-ico .icon-lg { width: 28px; height: 28px; opacity: 1; margin: 0; }
.portal-main .empty .icon-lg { opacity: 1; }
.portal-main .card-title .icon { color: currentColor; }

.portal-list { list-style: none; margin: 0 -.75rem; padding: 0; }
.portal-list-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-bottom: 1px solid var(--border); min-height: 56px; }
.portal-list-item:last-child { border-bottom: 0; }
.portal-list-item.is-active { background: var(--primary-soft); border-radius: var(--radius-sm); border-bottom-color: transparent; }
.portal-list-item.is-active .avatar { background: var(--surface); }
.portal-list-text { display: flex; flex-direction: column; min-width: 0; font-weight: 600; line-height: 1.3; }
.portal-list-text small { font-weight: 400; font-size: var(--fs-xs); }
.portal-main .avatar { width: 40px; height: 40px; border-radius: 14px; background: var(--hue-indigo-bg); color: var(--hue-indigo); font-size: var(--fs-md); }
.portal-steps { margin: .25rem 0 .75rem; padding-left: 1.25rem; }
.portal-steps li { margin-bottom: .35rem; }
.portal-prefs { margin-top: 1rem; }
.portal-ios-help, .portal-install { font-size: var(--fs-sm); }
.portal-ios-help[hidden], .portal-install[hidden], [data-push-prefs][hidden], .portal-main [hidden] { display: none; }

/* ---------- Form alanları ve düğmeler: daha yuvarlak, 44px üstü hedefler ---------- */
.portal-main input[type=text], .portal-main input[type=email], .portal-main input[type=password],
.portal-main input[type=tel], .portal-main input[type=number], .portal-main select {
    height: 48px; font-size: 16px; padding: .5rem .85rem; border-radius: var(--radius-sm);
    transition: box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.portal-main input:focus, .portal-main select:focus { outline: 2px solid var(--primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--primary-soft); }
.portal-main .field { margin-bottom: 1rem; }
.portal-main .field label { display: block; margin-bottom: .35rem; }
.portal-main .check { min-height: 44px; margin-bottom: .5rem; font-size: var(--fs-md); }
.portal-main .check input { width: 22px; height: 22px; }
.portal-main .btn { min-height: 44px; border-radius: var(--radius-sm); }
.portal-main .btn-lg { min-height: 48px; }
.portal-main .btn-primary, .portal-main .btn-lg.btn-primary { box-shadow: var(--shadow-btn); }
.portal-main .btn-secondary { box-shadow: var(--shadow-card); }
.portal-main .btn { transition: background-color .15s ease-out, box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.portal-main .alert { border-radius: var(--radius-sm); }

/* ---------- Giriş / aktivasyon sayfaları: ortalanmış dar kolon ---------- */
body.portal-bare .portal-main { max-width: 440px; padding-top: 1rem; }
body.portal-bare .portal-main > .portal-login { margin-top: .5rem; }
.portal-offline { padding-top: 3rem; }
body.portal .portal-login {
    padding: 1.75rem 1.5rem 1.25rem; margin-bottom: 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 26px;
    box-shadow: var(--edge), var(--shadow-card);
}
.portal-login-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; margin-bottom: 1.5rem; }
.portal-login-head .portal-logo { width: 72px; height: 72px; border-radius: 22px; margin-bottom: .5rem; box-shadow: var(--edge), var(--shadow-card); }
.portal-login-head .portal-logo .icon { width: 36px; height: 36px; }
.portal-login-head .portal-logo img { padding: 8px; }
.portal-login-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.012em; line-height: 1.25; text-wrap: balance; }
.portal-login-welcome { margin: 0; color: var(--text-2); }
.portal-login .btn-lg { margin-top: .25rem; min-height: 48px; }
.portal-login .small a { display: inline-flex; align-items: center; min-height: 44px; }
.portal-login p.small { margin: .25rem 0 0; }

/* Üç sekme: veli, öğrenci, personel. JavaScript'siz çalışır (radyo düğmeleri); :has() yoksa üç form alt alta görünür. */
.portal-seg { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; position: relative; }
.portal-seg-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.portal-seg-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--seg-track); }
.portal-seg-labels label {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .5rem;
    border-radius: 12px; cursor: pointer; user-select: none;
    color: var(--text-2); font-size: var(--fs-md); font-weight: 500;
    transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out);
}
.portal-seg-labels label:hover { color: var(--text); }
@supports selector(:has(*)) {
    .portal-seg-panel { display: none; }
    .portal-login:has(#tur-veli:checked) [data-panel="veli"],
    .portal-login:has(#tur-ogrenci:checked) [data-panel="ogrenci"],
    .portal-login:has(#tur-personel:checked) [data-panel="personel"] { display: block; }
    .portal-login:has(#tur-veli:checked) label[for="tur-veli"],
    .portal-login:has(#tur-ogrenci:checked) label[for="tur-ogrenci"],
    .portal-login:has(#tur-personel:checked) label[for="tur-personel"] {
        background: var(--surface); color: var(--text); font-weight: 600;
        box-shadow: var(--edge), var(--shadow-seg);
    }
    :root[data-theme="dark"] .portal-login:has(#tur-veli:checked) label[for="tur-veli"],
    :root[data-theme="dark"] .portal-login:has(#tur-ogrenci:checked) label[for="tur-ogrenci"],
    :root[data-theme="dark"] .portal-login:has(#tur-personel:checked) label[for="tur-personel"] { background: var(--surface-2); }
    .portal-login:has(#tur-veli:focus-visible) label[for="tur-veli"],
    .portal-login:has(#tur-ogrenci:focus-visible) label[for="tur-ogrenci"],
    .portal-login:has(#tur-personel:focus-visible) label[for="tur-personel"] { outline: 2px solid var(--primary); outline-offset: 2px; }
}

/* ---------- Kart sözleşmesi görünümü (veli-portal kartları) ---------- */
.portal-card { display: flex; flex-direction: column; gap: .35rem; color: var(--text); }
a.portal-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); -webkit-tap-highlight-color: transparent; }
a.portal-card:hover { text-decoration: none; }
a.portal-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.portal-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.portal-card-title { display: inline-flex; align-items: center; gap: .65rem; color: var(--text-2); font-size: var(--fs-md); font-weight: 600; }
.portal-card-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.portal-card-hint { color: var(--muted); font-size: var(--fs-xs); }
.portal-card-success .portal-card-value { color: var(--success); }
.portal-card-warning .portal-card-value { color: var(--warning); }
.portal-card-danger .portal-card-value { color: var(--danger); }
.portal-card-info .portal-card-value { color: var(--text); }

/* ---------- Veli portalı (veliportal modülü): öğrenci başlığı, mali özet, taksit satırları, profil ---------- */
.vp-section { margin: 1.5rem 0 .5rem; font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.vp-student .portal-list-item { padding: 0; min-height: 48px; }
.vp-tum { margin: 0 0 1rem; }
.vp-ozet { display: grid; gap: .75rem; margin: 0 0 .75rem; }
.vp-ozet > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.vp-ozet dt { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.vp-ozet dd { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.vp-iyi { color: var(--success); }
.vp-kotu { color: var(--danger); }
.vp-taksit { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .25rem; align-items: center; }
.vp-taksit .portal-list-text { grid-row: 1 / span 2; }
.vp-taksit .vp-tutar { grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.vp-taksit .badge { grid-column: 2; justify-self: end; }
.vp-giris { margin: 0 0 .5rem; padding-left: 1.1rem; font-variant-numeric: tabular-nums; }
.vp-metin { margin-top: .75rem; max-height: 18rem; overflow: auto; font-size: var(--fs-sm); color: var(--text-2); }
.portal-main summary { min-height: 44px; display: flex; align-items: center; gap: .5rem; cursor: pointer; }

/* ---------- Alt sekme çubuğu ---------- */
.portal-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; justify-content: center;
    padding: .25rem max(.5rem, var(--safe-r)) var(--safe-b) max(.5rem, var(--safe-l));
    background: var(--surface);
    border-radius: 22px 22px 0 0;
    box-shadow: var(--edge), var(--shadow-bar);
}
.portal-tab {
    flex: 1 1 0; max-width: 128px; min-width: 0; min-height: 52px; margin: .3rem .1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    padding: .35rem .1rem; border-radius: 16px;
    color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; line-height: 1.2;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.portal-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-tab .icon { width: 22px; height: 22px; color: var(--muted); transition: color .2s var(--ease-out); }
.portal-tab:hover { text-decoration: none; background: var(--surface-2); color: var(--text); }
.portal-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.portal-tab.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.portal-tab.active .icon { color: var(--primary); }

@media (min-width: 720px) {
    .portal-main { padding-top: 1.75rem; }
}
@media (max-width: 380px) {
    .portal-student select { max-width: 8rem; }
    .portal-brand-text { max-width: 9rem; }
    body.portal .portal-login { padding: 1.5rem 1.1rem 1rem; }
}
@media (display-mode: standalone) {
    .portal-top { padding-top: max(var(--safe-t), 0px); }
}

/* ---------- Hareket: kısa, ölçülü; yalnızca azaltma istenmediğinde ----------
   Tüm animasyonlar yalnızca başlangıç anahtar karesi tanımlar; son durum öğenin kendi stilidir,
   yani animasyon çalışmasa da içerik görünür kalır. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes portal-rise { from { opacity: 0; transform: translateY(14px); } }
    @keyframes portal-fade { from { opacity: 0; } }
    .portal-main > * { animation: portal-rise .55s var(--ease-out) backwards; }
    .portal-main > :nth-child(2) { animation-delay: .06s; }
    .portal-main > :nth-child(3) { animation-delay: .12s; }
    .portal-main > :nth-child(4) { animation-delay: .18s; }
    .portal-main > :nth-child(5) { animation-delay: .24s; }
    .portal-main > :nth-child(n+6) { animation-delay: .3s; }
    .portal-seg-panel { animation: portal-fade .3s ease-out backwards; }

    @media (hover: hover) {
        a.portal-card:hover { transform: translateY(-3px); box-shadow: var(--edge), var(--shadow-lift); }
        .portal-main .btn-primary:hover { transform: translateY(-1px); }
    }
    a.portal-card:active { transform: scale(.98); box-shadow: var(--edge), var(--shadow-card); transition-duration: .08s; }
    .portal-main .btn:active { transform: scale(.97); transition-duration: .08s; }
    .portal-tab:active { transform: scale(.94); transition-duration: .08s; }

    /* Sayfa geçişleri: üst şerit ve alt çubuk yerinde kalır, içerik yumuşakça değişir (destekleyen tarayıcılarda). */
    @view-transition { navigation: auto; }
    .portal-top { view-transition-name: portal-top; }
    .portal-tabbar { view-transition-name: portal-tabbar; }
    ::view-transition-old(root) { animation: portal-fade .16s ease-in reverse both; }
    ::view-transition-new(root) { animation: portal-fade .24s ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
    body.portal *, body.portal *::before, body.portal *::after { transition-duration: .01ms !important; animation: none !important; }
}
@media print {
    .portal-tabbar, .portal-top, .portal-netbar { display: none !important; }
    body.has-tabbar .portal-main { padding-bottom: 0; }
    body.portal { background: var(--surface); }
    .portal-main .card { box-shadow: none; }
}