/* ═══════════════════════════════════════════════════════════════════
   parent-shell.css — Okulu Bul veli hesabı "app shell" (sol menü) düzeni
   Doris'ten ilham alan YERLEŞİM, Okulu Bul'un kendi renk/tipografisiyle.
   hesabim.html ve forum.html tarafından <link> ile paylaşılır.
   2026-09
   ═══════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}

:root{
  --navy:#0F2044; --navy2:#1A3A7A; --blue:#1A56C4; --blue-h:#1245A8;
  --accent:#F5A623; --accent-h:#E5960F; --green:#16A34A; --green-h:#15803D;
  --purple:#7C3AED; --red:#DC2626; --pink-soft:#FDECEF; --pink-line:#FBD0D8; --pink-ic:#E11D48;
  --sky:#EEF4FF; --sky-border:#C7D7F5; --hero-muted:#A8BFDF;
  --gray50:#F9FAFB; --gray100:#F3F4F6; --gray200:#E5E7EB; --gray400:#9CA3AF; --gray600:#4B5563; --gray800:#1F2937; --white:#FFF;
  --ok-bg:#DCFCE7; --ok-fg:#166534; --warn-bg:#FEF3C7; --warn-fg:#92400E; --err-bg:#FEE2E2; --err-fg:#991B1B;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-serif:'Merriweather',Georgia,serif;
  --r-badge:5px; --r-btn:8px; --r-btn-lg:10px; --r-card:12px; --r-panel:16px; --r-pill:999px;
  --shadow:0 4px 24px rgba(15,32,68,.10);
  --focus-ring:0 0 0 3px rgba(26,86,196,.35); --tap:44px; --ease:.18s ease;
  --pshell-w:260px; --pshell-bp:900px;
}

/* ── genel sayfa iskeleti ── */
.pshell-wrap{display:flex;min-height:100vh;background:var(--gray50)}
.pshell-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pshell-main > .pshell-page-content{flex:1}

/* ── sol menü (HER zaman çekmece — varsayılan kapalı, hamburger ile açılır) ── */
.pshell-sidebar{
  width:var(--pshell-w);background:#fff;border-right:1px solid var(--gray200);
  display:flex;flex-direction:column;overflow-y:auto;z-index:60;
  position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform .22s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
html.pshell-open .pshell-sidebar{transform:translateX(0);box-shadow:0 12px 40px rgba(0,0,0,.25)}
html.pshell-open .pshell-backdrop{display:block}
.pshell-brand{display:flex;align-items:center;gap:8px;padding:18px 20px 14px;text-decoration:none;flex:0 0 auto}
.pshell-brand img{height:28px;width:auto}
.pshell-brand b{font-family:var(--font-serif);font-size:19px;color:var(--navy)}
.pshell-brand b span{color:var(--blue)}
.pshell-brand .pshell-beta{font-size:9.5px;font-weight:800;letter-spacing:1px;background:var(--accent);color:var(--navy);padding:2px 6px;border-radius:5px;margin-left:2px}

.pshell-nav{flex:1 1 auto;padding:6px 12px}
.pshell-group-label{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--gray400);text-transform:uppercase;margin:18px 10px 8px}
.pshell-group-label:first-child{margin-top:6px}
.pshell-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-btn-lg);
  color:var(--gray800);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:2px;
  min-height:var(--tap);transition:background var(--ease),color var(--ease);border:none;background:none;width:100%;text-align:left;cursor:pointer;
}
.pshell-item .ic{width:20px;text-align:center;font-size:16px;flex:0 0 auto}
.pshell-item:hover{background:var(--gray100);color:var(--navy)}
.pshell-item.active{background:var(--navy);color:#fff}
.pshell-item.active:hover{background:var(--navy)}
.pshell-item.soon{color:var(--gray400);cursor:default}
.pshell-item.soon:hover{background:none;color:var(--gray400)}
.pshell-item .soon-badge{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.4px;background:var(--pink-soft);color:var(--pink-ic);border:1px solid var(--pink-line);padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap}

/* ── alt kısım: misafir kartı / hesap kartı ── */
.pshell-sidebar-bottom{flex:0 0 auto;padding:14px 16px 18px;border-top:1px solid var(--gray200)}
.pshell-guestcard{background:var(--pink-soft);border:1px solid var(--pink-line);border-radius:var(--r-panel);padding:14px}
.pshell-guestcard b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:4px}
.pshell-guestcard p{font-size:12.5px;color:var(--gray600);line-height:1.5;margin-bottom:10px}
.pshell-guestcard .btn-cta{display:block;text-align:center;background:var(--navy);color:#fff;border:none;border-radius:var(--r-btn);padding:10px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;min-height:var(--tap);width:100%}
.pshell-guestcard .btn-cta:hover{background:var(--navy2)}

.pshell-accountcard{display:flex;align-items:center;gap:10px;border-radius:var(--r-panel);padding:8px}
.pshell-accountcard .avatar{width:36px;height:36px;border-radius:50%;background:var(--sky);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto}
.pshell-accountcard .who{min-width:0;flex:1}
.pshell-accountcard .who b{display:block;font-size:13px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pshell-accountcard .who span{display:block;font-size:11.5px;color:var(--gray600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pshell-accountcard button{flex:0 0 auto;background:none;border:none;color:var(--gray400);cursor:pointer;font-size:16px;padding:6px;border-radius:8px}
.pshell-accountcard button:hover{color:var(--red);background:var(--gray100)}

/* ── misafir üst şeridi (içerik alanının en üstünde) ── */
.pshell-topstrip{background:var(--sky);border-bottom:1px solid var(--sky-border);color:var(--navy);padding:10px 24px;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;font-size:13.5px;font-weight:600}
.pshell-topstrip .btn-cta{background:var(--navy);color:#fff;border:none;border-radius:var(--r-btn);padding:8px 16px;font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.pshell-topstrip .btn-cta:hover{background:var(--navy2)}

/* ── üst çubuk (hamburger) — HER zaman görünür, sidebar'ı açıp kapatan tek yol ── */
.pshell-mobilebar{display:flex;position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--gray200);
  align-items:center;gap:10px;padding:0 10px;min-height:54px}
.pshell-hamburger{background:none;border:none;font-size:22px;line-height:1;padding:8px;cursor:pointer;color:var(--navy);border-radius:8px}
.pshell-hamburger:hover{background:var(--gray100)}
.pshell-mobilebar .pshell-brand{padding:0;flex:1}
.pshell-mobilebar .pshell-brand b{font-size:17px}

.pshell-backdrop{display:none;position:fixed;inset:0;background:rgba(15,32,68,.45);z-index:55}

@media (max-width:900px){
  .pshell-topstrip{padding:9px 14px;font-size:12.5px}
}
@media (max-width:640px){
  .pshell-sidebar{width:82vw;max-width:300px}
}