/* ===== SHARED LAYOUT — Tüm modüllerde ortak ===== */
/* ===== TOP BAR ===== */
.topbar{
  position:sticky;top:0;z-index:200;
  background:rgba(10,12,18,0.85);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 16px;
  height:60px;gap:16px;
}
[data-theme="light"] .topbar{
  background:rgba(255,255,255,0.9);
  border-bottom:1px solid rgba(0,0,0,0.1);
}
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;flex-shrink:0;cursor:pointer;
}
.logo-icon{font-size:1.8rem;filter:drop-shadow(0 0 12px rgba(20,184,166,.6))}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{font-size:var(--fs-xs,.72rem);font-weight:600;color:var(--text2);letter-spacing:1px;text-transform:uppercase}
.logo-brand{
  font-size:var(--fs-base,.85rem);font-weight:800;letter-spacing:-.3px;
  background:linear-gradient(135deg,var(--text) 0%,var(--text2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.logo-brand span{
  background:linear-gradient(135deg,var(--accent) 0%,var(--blue) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.topbar .user-badge{
  display:flex;align-items:center;gap:8px;margin-left:auto;
  font-size:var(--fs-sm,.8rem);color:var(--text2);
}
.topbar .user-badge img{width:28px;height:28px;border-radius:50%;border:2px solid var(--accent)}
.topbar .user-badge .uname{font-weight:600;color:var(--text)}
.topbar .logout-btn{
  background:none;border:1px solid var(--border);color:var(--text2);
  padding:4px 10px;border-radius:6px;cursor:pointer;font-size:var(--fs-xs,.72rem);
  transition:all .2s;
}
.topbar .logout-btn:hover{border-color:var(--red);color:var(--red)}

/* ===== THEME TOGGLE ===== */
.theme-toggle{
  width:56px;height:28px;border-radius:20px;
  background:var(--bg2);border:1px solid var(--border);
  position:relative;cursor:pointer;transition:all .3s;
  display:flex;align-items:center;padding:0 3px;
}
.theme-toggle:hover{border-color:var(--border2)}
.theme-toggle-track{
  width:20px;height:20px;border-radius:50%;
  background:var(--blue);
  position:absolute;left:3px;top:3px;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs,.72rem);box-shadow:0 2px 6px rgba(0,0,0,.3);
}
[data-theme="light"] .theme-toggle-track{
  left:31px;background:var(--amber);
}
.theme-icon{position:absolute;top:50%;transform:translateY(-50%);font-size:var(--fs-sm,.8rem);transition:opacity .2s}
.theme-icon-moon{left:7px;opacity:1}
.theme-icon-sun{right:7px;opacity:0.3}
[data-theme="light"] .theme-icon-moon{opacity:0.3}
[data-theme="light"] .theme-icon-sun{opacity:1}

/* ===== MODULE NAV ===== */
.module-breadcrumb{
  display:flex;align-items:center;gap:8px;padding:8px 0;
  font-size:var(--fs-sm,.8rem);color:var(--text2);
}
.module-breadcrumb a{
  color:var(--accent);text-decoration:none;font-weight:600;
}
.module-breadcrumb a:hover{color:var(--accent2)}

/* ===== MODULE CONTAINER ===== */
.module-container{
  padding:24px 32px;max-width:1440px;margin:0 auto;
  animation:fadeUp .3s cubic-bezier(.4,0,.2,1);
}
@media(max-width:768px){
  .module-container{padding:16px}
  .topbar{height:52px;padding:0 10px}
  .logo-brand{font-size:var(--fs-sm,.8rem)}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* F5: Webapp hissi — geri/aşağı çekince sayfa kapanmasın (tüm modüller) */
html, body { overscroll-behavior: none; }