:root{
  --bg:#0c0f16; --muted:#94a3b8; --outline:#e5e7eb1a; --text:#e5e7eb;
  --panel:#0f1623; --brand:#60a5fa;
}
html,body{height:100%}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,"Segoe UI",Arial,sans-serif; color:var(--text)}

.bg{
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(16,185,129,.10), transparent 55%),
    var(--bg);
  min-height:100%;
}

/* ----- Layout ----- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:rgba(12,15,22,.7); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--outline);
}
.brand{display:flex; align-items:center; gap:10px; color:#e2e8f0; font-weight:700}
.brand img{width:32px; height:32px; border-radius:8px; object-fit:cover}
.nav a{color:#cbd5e1; text-decoration:none; margin-left:12px; font-size:14px}
.nav a:hover{color:#fff}
.container{max-width:1100px; margin:24px auto; padding:0 16px}
.footer{padding:20px; text-align:center; color:var(--muted); border-top:1px solid var(--outline)}

/* ----- Genel kart / form ----- */
.card{
  width:100%; max-width:520px; margin:24px auto;
  background:rgba(15,22,35,.75); backdrop-filter:saturate(140%) blur(10px);
  border:1px solid var(--outline); border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card .title{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.card .title img{width:44px; height:44px; border-radius:10px; object-fit:cover}
.card .title h1{font-size:22px; margin:0}
.muted{color:var(--muted); font-size:13px; margin:2px 0 14px}

/* ----- Buton ----- */
.btn{padding:10px 14px; border:0; border-radius:12px; font-weight:600; cursor:pointer;
  text-decoration:none; display:inline-block}
.btn.primary{background:#2563eb; color:#fff}
.btn.ghost{background:transparent; color:#e5e7eb; border:1px solid #e5e7eb1a}

/* ----- Welcome (üst şerit) ----- */
.grid-wrap{max-width:1100px;margin:24px auto;padding:0 16px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.hero-title{margin:0;font-size:22px}
.hero-sub{margin:6px 0 0;color:#94a3b8;font-size:13px}
.hero-right{display:flex;gap:10px;flex-wrap:wrap}

/* ----- K12 benzeri açık tema Login ----- */
.k12-wrap{
  min-height: calc(100vh - 120px);
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; background:#f3f5f9;
}
.k12-card{
  width:100%; max-width:520px; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); padding:20px 20px 16px;
}
.k12-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.k12-logo{width:56px; height:56px; border-radius:10px; object-fit:cover}
.k12-title h1{font-size:18px; margin:0; color:#0f172a}
.k12-sub{margin:2px 0 0; color:#64748b; font-size:13px}
.k12-form{display:grid; gap:12px; margin-top:8px}
.k12-field label{display:block; font-size:12px; color:#334155; margin-bottom:6px}
.k12-field input, .k12-field select{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#0f172a; outline:0;
}
.k12-field input:focus, .k12-field select:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25) }
.k12-row{display:flex; justify-content:space-between; align-items:center}
.k12-remember{display:flex; align-items:center; gap:8px; color:#475569; font-size:13px}
.k12-link{color:#2563eb; text-decoration:none; font-size:13px}
.k12-link:hover{text-decoration:underline}
.k12-btn{width:100%; padding:12px 14px; border:0; border-radius:10px; background:#2563eb; color:#fff; font-weight:600; cursor:pointer;}
.k12-btn:active{transform:translateY(1px)}
.k12-footrow{display:flex; justify-content:space-between; align-items:center; margin-top:6px}
.k12-lang select{padding:6px 8px; border:1px solid #d1d5db; border-radius:8px; background:#fff}
.k12-alert{margin-top:8px; border:1px solid #fecaca; background:#fee2e2; color:#b91c1c; border-radius:10px; padding:10px 12px; font-size:13px}
.k12-footer{margin-top:12px; text-align:center; color:#94a3b8; font-size:12px}

/* ===== Welcome sayfası (tahta zemin + başlıklar) ===== */
.chalk-bg{
  background:
    radial-gradient(800px 500px at 10% 0%, rgba(255,255,255,.03), transparent 60%),
    radial-gradient(600px 400px at 90% 100%, rgba(255,255,255,.025), transparent 60%),
    #14181b url("/images/chalk.jpg") center/cover no-repeat;
  min-height: calc(100vh - 120px);
  border-radius: 10px;
  padding: 18px 14px;
}
.welcome{color:#e5e7eb}
.welcome__top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:10px}
.welcome__title{margin:0 0 8px 0; font-size:18px; letter-spacing:.4px; color:#e8eef7}
.welcome__hello{display:flex; align-items:center; gap:10px}
.hello-badge{display:inline-block; padding:6px 10px; border-radius:8px; background:#0f172a; border:1px solid #e5e7eb1f}
.btn-light{padding:8px 10px; border-radius:8px; background:#e2e8f0; color:#0f172a; text-decoration:none; font-weight:600}
.btn-light:hover{filter:brightness(.95)}
.welcome__right{display:flex; align-items:center; gap:18px}
.welcome__date{color:#cbd5e1; font-size:14px; font-weight:600}
.welcome__brand{display:flex; align-items:center; gap:10px}
.welcome__brand img{width:56px; height:56px; border-radius:10px; object-fit:cover}
.welcome__brand .brand-text{line-height:1.05; font-size:12px; color:#cfd5df}

/* ----- Renkli ikonlu paneller ----- */
.tiles{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:18px;
  margin-top:8px;
}
.tile{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  padding:14px 10px;
  text-decoration:none; color:#e5e7eb;
  box-shadow:0 6px 18px rgba(0,0,0,.20);
  transition:transform .08s ease, box-shadow .18s ease, border-color .2s ease;
}
.tile:hover{transform:translateY(-2px) scale(1.01); border-color:#ffffff66; box-shadow:0 10px 26px rgba(0,0,0,.28)}

.tile__icon{
  width:88px; height:88px; border-radius:16px;
  display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
}
.tile__icon svg{width:44px; height:44px; fill:#fff; opacity:.98}

.tile__title{font-weight:700; letter-spacing:.3px; text-shadow:0 1px 0 rgba(0,0,0,.35)}

/* Degrade tema renkleri */
.grad-student{background:linear-gradient(135deg,#34d399 0%,#059669 100%)}
.grad-class{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%)}
.grad-mail{background:linear-gradient(135deg,#fb7185 0%,#f43f5e 100%)}
.grad-schedule{background:linear-gradient(135deg,#f472b6 0%,#ec4899 100%)}
.grad-assess{background:linear-gradient(135deg,#fde047 0%,#eab308 100%)}
.grad-bus{background:linear-gradient(135deg,#60a5fa 0%,#3b82f6 100%)}
.grad-guidance{background:linear-gradient(135deg,#22d3ee 0%,#06b6d4 100%)}
.grad-appointment{background:linear-gradient(135deg,#2dd4bf 0%,#0ea5e9 100%)}
.grad-activity{background:linear-gradient(135deg,#c4b5fd 0%,#a78bfa 100%)}
.grad-consult{background:linear-gradient(135deg,#b39ddb 0%,#8b5cf6 100%)}
.grad-tutor{background:linear-gradient(135deg,#94a3b8 0%,#64748b 100%)}
.grad-staff{background:linear-gradient(135deg,#c6e48b 0%,#7ebd49 100%)}
.grad-clinic{background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 100%)}
.grad-exam{background:linear-gradient(135deg,#d8b4fe 0%,#a78bfa 100%)}
.grad-finance{background:linear-gradient(135deg,#ff66c4 0%,#ec4899 100%)}
.grad-admin{background:linear-gradient(135deg,#9ca3af 0%,#6b7280 100%)}
.grad-update{background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%)}

/* Footer */
.welcome__footer{display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:#e5e7eb}
.flag{display:inline-flex; align-items:center; gap:6px}

/* Responsive */
@media (max-width:1200px){ .tiles{grid-template-columns: repeat(5, minmax(0,1fr));} }
@media (max-width:980px){ .tiles{grid-template-columns: repeat(4, minmax(0,1fr));} }
@media (max-width:760px){
  .tiles{grid-template-columns: repeat(3, minmax(0,1fr));}
  .welcome__top{flex-direction:column; align-items:flex-start}
}
@media (max-width:540px){ .tiles{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width:380px){ .tiles{grid-template-columns: 1fr;} }

.stu-title{letter-spacing:.3px}

.stu-shell{
  display:grid;
  grid-template-columns: 160px 1fr 160px;
  gap:14px; padding:12px; border-radius:10px;
}

.stu-side{display:flex; flex-direction:column; gap:12px}
.side-tile{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px;
  text-decoration:none; background:#ffffff0f; border:1px solid #ffffff33; color:#e5e7eb;
  transition:.15s ease; box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.side-tile:hover{transform:translateY(-2px); border-color:#ffffff66}
.side-ico{
  width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,#60a5fa,#3b82f6); border:1px solid rgba(255,255,255,.35)
}
.side-ico svg{width:26px;height:26px;fill:#fff}

/* ===== Sekmeler ===== */
.tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.tab{
  padding:8px 10px; border-radius:8px; border:1px solid #e5e7eb33;
  background:#0b1220; color:#cbd5e1; cursor:pointer; font-size:13px
}
.tab.is-active{background:#1e293b; color:#fff; border-color:#60a5fa55}
.tabpanel{display:none}
.tabpanel.is-visible{display:block}

/* ===== Form grid ===== */
.frm{margin-top:4px}
.grid-3{display:grid; grid-template-columns: 1fr 1fr 380px; gap:14px}

.box{
  background:rgba(255,255,255,.06); border:1px solid #e5e7eb2b; border-radius:10px; padding:12px;
}
.box legend{font-weight:700; margin-bottom:8px}
.box legend.sub{font-size:12px; color:#cbd5e1; margin-top:10px}
.sp{border:0; border-top:1px dashed #e5e7eb33; margin:8px 0}

.row{display:grid; grid-template-columns: 140px 1fr; gap:10px; align-items:center; margin:6px 0}
.row.two{grid-template-columns: 1fr 1fr}
.row > label{font-size:13px; color:#e2e8f0}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#0f172a; outline:0;
}
textarea{resize:vertical}
input:focus, select:focus, textarea:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25) }

.field{display:flex; gap:8px; align-items:center}
.field--btn input, .field--btn select{flex:1}
.field--unit{display:flex; align-items:center; gap:6px}
.field--unit .unit{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid #d1d5db; border-radius:8px; background:#f8fafc; color:#0f172a; font-weight:700;
}
.chk{display:inline-flex; align-items:center; gap:6px; color:#0f172a; margin-left:6px}

/* ===== Buton seti ===== */
.btn{padding:10px 12px; border:0; border-radius:10px; cursor:pointer; font-weight:700; color:#fff}
.btn.small{padding:8px 10px; font-weight:700}
.btn.wide{width:100%}
.btn.ghost{background:transparent; color:#fff; border:1px solid #ffffff44}
.btn.purple{background:#7c3aed}
.btn.green{background:#10b981}
.btn.blue{background:#2563eb}
.btn.cyan{background:#06b6d4}
.btn.magenta{background:#db2777}
.btn.red{background:#ef4444}
.btn.red.outline{background:transparent; color:#ef4444; border:1px solid #ef4444}

/* Not kutusu */
.note{
  margin-top:10px; padding:10px; border:1px solid #fcd34d; background:#fef9c3; color:#7c2d12;
  border-radius:10px; font-size:13px
}

/* Yer tutucu sekmeler */
.placeholder{
  min-height:200px; display:grid; place-items:center;
  color:#94a3b8; background:rgba(255,255,255,.06); border:1px dashed #e5e7eb33; border-radius:10px;
}

/* Responsive */
@media (max-width:1200px){
  .grid-3{grid-template-columns:1fr 1fr}
  .stu-shell{grid-template-columns:140px 1fr 140px}
}
@media (max-width:960px){
  .stu-shell{grid-template-columns: 1fr}
  .stu-side--left, .stu-side--right{order:-1; flex-direction:row; flex-wrap:wrap}
  .side-tile{flex:1}
  .grid-3{grid-template-columns:1fr}
}
/* --- Veli Bilgileri: rahat 2 sütun düzeni --- */
.box .grid-two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:16px;
  row-gap:12px;
}
.field-col label{
  display:block;
  font-size:13px;
  color:#e2e8f0;
  margin:0 0 6px 2px;      /* etiketi inputtan ayır */
  white-space:nowrap;      /* tek satır olsun, taşarsa altta kırılır */
}
.field-col input,
.field-col select{
  width:100%;
}

/* kutuyu biraz genişletip nefes aldır */
.box{ padding:14px 16px; border-radius:12px; }

/* dar ekranlarda tek sütuna düşsün */
@media (max-width:960px){
  .box .grid-two{ grid-template-columns: 1fr; }
}
/* Sol alttaki aksiyonlar */
.stu-actions{
  grid-column: 1 / 2;          /* sol sütun */
  display:flex;
  flex-direction:column;
  gap:12px;
  align-self:start;
  margin-top:8px;
}

/* mobilde tek sütunda alta gelsin (zaten grid akışında en sonda) */
@media (max-width:960px){
  .stu-actions{ grid-column: 1; }
}
/* Sol menü ikonlarını da nötr yap */
.side-ico{
  width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,#4b5563,#111827); /* gri ton */
  border:1px solid rgba(255,255,255,.22)
}
.side-ico svg{width:26px;height:26px;fill:#fff}

/* Butonlar – nötr/grayscale */
.btn{
  padding:10px 12px; border:0; border-radius:999px; cursor:pointer; font-weight:700;
  transition:filter .15s ease, transform .05s ease;
}
.btn.small{padding:8px 10px}
.btn.wide{width:100%}

.btn.neutral{
  background:#3a3f4b; color:#f5f7fa; border:1px solid #565d6b;
}
.btn.neutral:hover{filter:brightness(1.05)}
.btn.neutral:active{transform:translateY(1px)}

.btn.outline{
  background:transparent; color:#e5e7eb; border:1px solid #6b7280;
}
.btn.outline:hover{background:#0b1220}

.field--btn input, .field--btn select{flex:1}

/* Tabs, kutular ve form – önceki tanımların üzerine çalışır */
.tab{background:#0b1220; color:#cbd5e1; border:1px solid #2b3442}
.tab.is-active{background:#1e293b; color:#fff; border-color:#3b4252}

.box{ padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid #2b3442; }
.row{display:grid; grid-template-columns: 140px 1fr; gap:10px; align-items:center; margin:6px 0}
.row.two{grid-template-columns: 1fr 1fr}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:12px; background:#fff; color:#0f172a; outline:0;
}

.grid-3{display:grid; grid-template-columns: 1fr 1fr 380px; gap:14px}
.grid-two{display:grid; grid-template-columns: 1fr 1fr; column-gap:16px; row-gap:12px}
.field-col label{display:block; font-size:13px; color:#e2e8f0; margin:0 0 6px 2px}

@media (max-width:1200px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:960px){
  .stu-shell{grid-template-columns: 1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-two{grid-template-columns:1fr}
}
:root{
  --bg:#0c0f16; --muted:#94a3b8; --outline:#e5e7eb1a; --text:#e5e7eb;
}
html,body{height:100%} body{margin:0; font-family:system-ui,"Segoe UI",Arial,sans-serif; color:var(--text)}
.chalk-bg{background:#0e1117; min-height:calc(100vh - 80px)}


.stu-shell{display:grid; grid-template-columns:200px 1fr; gap:16px; padding:16px}
.stu-side{display:flex; flex-direction:column; gap:10px}
.side-item{
  display:block; padding:12px 14px; border:1px solid var(--outline); border-radius:12px;
  background:rgba(255,255,255,.04); color:#e5e7eb; text-decoration:none; font-weight:600;
}
.side-item:hover{background:rgba(255,255,255,.07)}

.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.tab{padding:8px 12px; border-radius:10px; border:1px solid #2b3442; background:#0b1220; color:#cbd5e1; cursor:pointer}
.tab.is-active{background:#1e293b; color:#fff; border-color:#3b4252}
.tabpanel{display:none} .tabpanel.is-visible{display:block}

.frm .grid-3{display:grid; grid-template-columns:1fr 1fr 380px; gap:14px}
.box{padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid #2b3442}
.box legend{font-weight:800}
.box legend.sub{font-size:13px; color:#cbd5e1; margin-top:8px}
.sp{border:0; border-top:1px solid #2b3442; margin:10px 0}

.row{display:grid; grid-template-columns: 140px 1fr; gap:10px; align-items:center; margin:6px 0}
.row.two{grid-template-columns: 1fr 1fr}
.field{display:flex; gap:8px; align-items:center}
.field--btn input,.field--btn select{flex:1}

input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="number"],select,textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:12px; background:#fff; color:#0f172a; outline:0;
}
textarea{resize:vertical}

.btn{padding:10px 12px; border-radius:999px; border:1px solid #565d6b; background:#3a3f4b; color:#f5f7fa; font-weight:700; cursor:pointer}
.btn.small{padding:8px 10px}
.btn.wide{width:100%}
.btn.neutral:hover{filter:brightness(1.05)}
.btn.outline{background:transparent; color:#e5e7eb; border-color:#6b7280}

.grid-two{display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:12px}
.field-col label{display:block; font-size:13px; color:#e2e8f0; margin:0 0 6px 2px}

.field--unit{display:flex; align-items:center; gap:8px}
.field--unit .unit{padding:6px 10px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#0f172a}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#e5e7eb}

.note{margin-top:8px; font-size:12px; color:#cbd5e1}

@media (max-width:1200px){ .frm .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:960px){
  .stu-shell{grid-template-columns:1fr}
  .frm .grid-3{grid-template-columns:1fr}
  .grid-two{grid-template-columns:1fr}
}
/* Sol menü kutuları */
.stu-side{display:flex; flex-direction:column; gap:10px}
.side-tile{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid #e5e7eb1a; border-radius:12px;
  background:rgba(255,255,255,.04); color:#e5e7eb; text-decoration:none; font-weight:600;
}
.side-tile:hover{background:rgba(255,255,255,.07)}

/* İkon kutusu (renkli) */
.side-ico{
  width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.25); flex:0 0 auto;
}
.side-ico svg{width:26px;height:26px; fill:#fff}

/* Renk temaları */
.side-ico.mint   { background:linear-gradient(135deg,#34d399,#10b981) }
.side-ico.amber  { background:linear-gradient(135deg,#fbbf24,#f59e0b) }
.side-ico.pink   { background:linear-gradient(135deg,#f472b6,#ec4899) }
.side-ico.violet { background:linear-gradient(135deg,#a78bfa,#8b5cf6) }
.side-ico.red    { background:linear-gradient(135deg,#ef4444,#dc2626) }
.side-ico.teal   { background:linear-gradient(135deg,#2dd4bf,#14b8a6) }
/* --- Alt orta aksiyon şeridi --- */
.action-bar{
  position: sticky;           /* sayfa alta gelince sabitlenir */
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  margin-top: 18px;
}
.action-bar .btn.lg{
  padding: 12px 20px;
  border-radius: 999px;
  min-width: 200px;
  font-weight: 800;
}

/* Buton stilleri */
.btn{border:1px solid #565d6b; cursor:pointer; transition:filter .15s ease, transform .05s ease}
.btn:active{transform:translateY(1px)}
.btn.dark{background:#3a3f4b; color:#f5f7fa}
.btn.dark:hover{filter:brightness(1.06)}

.btn.red{background:#dc2626; color:#fff; border-color:#dc2626}
.btn.red:hover{filter:brightness(1.08)}

/* (mevcut) form ve grid kurallarınla uyumlu kalır */
/* Alttaki bilgi/not kutusu */
.form-notes{
  max-width: 960px;
  margin: 12px auto 6px;      /* ortala, butonların üstünde biraz boşluk */
  padding: 14px 16px;
  background: #fff8c5;        /* açık sarı */
  color: #1f2937;             /* koyu gri metin, okunur */
  border: 1px solid #facc15;  /* sarı sınır */
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.form-notes p{margin:6px 0; line-height:1.5}
.form-notes p:first-child{margin-top:0}
:root{
  --bg:#0c0f16; --muted:#94a3b8; --outline:#e5e7eb1a; --text:#e5e7eb;
}
html,body{height:100%}
body{margin:0; font-family:system-ui,"Segoe UI",Arial,sans-serif; color:var(--text)}
.chalk-bg{background:#0e1117; min-height:calc(100vh - 80px)}

/* iskelet */
.stu-shell{display:grid; grid-template-columns:200px 1fr; gap:16px; padding:16px}
.stu-side{display:flex; flex-direction:column; gap:10px}

/* sol menü karo + ikonlar */
.side-tile{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid #e5e7eb1a; border-radius:12px;
  background:rgba(255,255,255,.04); color:#e5e7eb; text-decoration:none; font-weight:600;
}
.side-tile:hover{background:rgba(255,255,255,.07)}
.side-ico{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.side-ico svg{width:26px;height:26px; fill:#fff}
.side-ico.mint{background:linear-gradient(135deg,#34d399,#10b981)}
.side-ico.amber{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.side-ico.pink{background:linear-gradient(135deg,#f472b6,#ec4899)}
.side-ico.violet{background:linear-gradient(135deg,#a78bfa,#8b5cf6)}
.side-ico.red{background:linear-gradient(135deg,#ef4444,#dc2626)}
.side-ico.teal{background:linear-gradient(135deg,#2dd4bf,#14b8a6)}

/* sekmeler */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.tab{padding:8px 12px; border-radius:10px; border:1px solid #2b3442; background:#0b1220; color:#cbd5e1; cursor:pointer}
.tab.is-active{background:#1e293b; color:#fff; border-color:#3b4252}
.tabpanel{display:none} .tabpanel.is-visible{display:block}

/* form yerleşim */
.frm .grid-3{display:grid; grid-template-columns:1fr 1fr 380px; gap:14px}
.box{padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid #2b3442}
.box legend{font-weight:800}
.box legend.sub{font-size:13px; color:#cbd5e1; margin-top:8px}
.sp{border:0; border-top:1px solid #2b3442; margin:10px 0}

/* satırlar */
.row{display:grid; grid-template-columns: 140px 1fr; gap:10px; align-items:center; margin:6px 0}
.field{display:flex; gap:8px; align-items:center}
.field--btn input,.field--btn select{flex:1}

input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="number"],select,textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:12px; background:#fff; color:#0f172a; outline:0;
}
textarea{resize:vertical}

/* çift kolonlu mini gridler (veli kutusu) */
.grid-two{display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:12px}
.field-col label{display:block; font-size:13px; color:#e2e8f0; margin:0 0 6px 2px}

/* birim alanı */
.field--unit{display:flex; align-items:center; gap:8px}
.field--unit .unit{padding:6px 10px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#0f172a}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#e5e7eb}

/* alt not alanı */
.form-notes{
  max-width: 960px; margin: 12px auto 6px; padding: 14px 16px;
  background:#fff8c5; color:#1f2937; border:1px solid #facc15; border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.form-notes p{margin:6px 0; line-height:1.5}

/* alt orta aksiyon butonları */
.action-bar{
  position: sticky; bottom:12px; display:flex; justify-content:center;
  gap:12px; padding:10px; margin-top: 8px;
}
.btn{border:1px solid #565d6b; cursor:pointer; transition:filter .15s ease, transform .05s ease}
.btn:active{transform:translateY(1px)}
.btn.dark{background:#3a3f4b; color:#f5f7fa}
.btn.dark:hover{filter:brightness(1.06)}
.btn.red{background:#dc2626; color:#fff; border-color:#dc2626}
.btn.red:hover{filter:brightness(1.08)}
.btn.lg{padding:12px 20px; border-radius:999px; min-width:200px; font-weight:800}

/* responsive */
@media (max-width:1200px){ .frm .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:960px){
  .stu-shell{grid-template-columns:1fr}
  .frm .grid-3{grid-template-columns:1fr}
  .grid-two{grid-template-columns:1fr}
}
/* === Tek tip kontrol ölçüsü === */
:root{
  --ctl-h: 48px;          /* hepsi aynı yükseklik */
  --ctl-radius: 14px;     /* hepsi aynı yuvarlaklık */
  --ctl-pad-x: 14px;      /* yatay iç boşluk */
}

/* Tüm input & select’ler aynı boyut ve görünümde */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select{
  height: var(--ctl-h);
  line-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  border: 1px solid #d1d5db;
  border-radius: var(--ctl-radius);
  background: #fff;
  color: #0f172a;
  width: 100%;
  box-sizing: border-box;
}

/* Date input ikonuna yer aç (taşma olmasın) */
input[type="date"]{ padding-right: 40px; }

/* Gridler içinde de %100 genişlikleri koru */
.row > *:nth-child(2) input,
.row > *:nth-child(2) select,
.grid-two .field-col input,
.grid-two .field-col select{
  width: 100%;
}

/* Metin alanlarını serbest bırak ama görsel tutarlılık için köşe/kenar aynı */
textarea{
  width: 100%;
  min-height: 120px;
  padding: 10px var(--ctl-pad-x);
  border: 1px solid #d1d5db;
  border-radius: var(--ctl-radius);
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}

/* Birimli alanlar: yüzde kapsülü de aynı yükseklikte olsun */
.field--unit{
  display: flex; align-items: center; gap: 8px;
}
.field--unit .unit{
  height: var(--ctl-h);
  display: grid; place-items: center;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--ctl-radius);
  background: #fff;
  color: #0f172a;
}

/* Yanına checkbox geldiyse hizalama */
.chk{ display: inline-flex; align-items: center; gap: 6px; }
/* Kapsayıcıyı ekrana sığdır ve yatay taşıtma */
.stu-shell{max-width:1280px; margin:0 auto; padding:12px 16px; overflow-x:hidden}

/* 3 sütunlu form: 3. sütun esnek ve daha dar olsun */
.frm .grid-3{
  display:grid;
  grid-template-columns: 1fr 1fr minmax(320px, 380px); /* eskiden 460px idi */
  gap:14px;
}
.box{min-width:0} /* içeriğin taşmasını engeller */

/* Ekran biraz dar ise ödeme bloğunu alt satıra indir */
@media (max-width: 1360px){
  .frm .grid-3{ grid-template-columns: 1fr 1fr; }
  .pay-box{ grid-column: 1 / -1; }  /* ödeme bloğu iki sütunun altına genişlesin */
}

/* Daha dar ekranlar için tek sütun */
@media (max-width: 980px){
  .frm .grid-3{ grid-template-columns: 1fr; }
}

/* Alt butonlar taşma yapmasın */
.action-bar{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; max-width:100%}
.action-bar .btn{min-width:220px}

/* % birimli alan esnemesi */
.field--unit{display:flex; align-items:center; gap:10px}
.field--unit input{flex:1}
.field--unit .unit{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#2b2f35; color:#fff;}
/* === GENİŞLİK DÜZENİ === */
.stu-shell{
  max-width: 1440px;   /* eskiden 1100-1200 civarıydı */
  margin: 0 auto;
  padding: 0 16px;
}

:root{
  --topbar-h: 88px;
  --topbar-pad-x: 20px;
}
.chalk-bg .stu-topbar{
  width: 100%;
  min-height: var(--topbar-h) !important;
  display: flex;
  align-items: center;
  padding: 0 var(--topbar-pad-x) !important;
  border-radius: 14px;
  border: 1px solid #2b364a;
  background: linear-gradient(90deg,#2563eb,#14b8a6) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  color: #fff !important;
  z-index: 10;
}
.stu-title{
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff !important;
  line-height: 1;
  text-transform: uppercase;
}

.action-bar--guncelle .action-left{
  display:flex; align-items:center; gap:8px; justify-content:flex-start;
}
.action-bar--guncelle .action-left .lbl{
  color:#e5e7eb; font-weight:600; font-size:14px; white-space:nowrap;
}
.action-bar--guncelle .action-left input{
  width:180px; height:44px; border:1px solid #d1d5db; border-radius:12px; padding:0 12px; background:#fff; color:#0f172a;
}

.action-bar--guncelle .action-center{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}

/* küçük ekranlarda tek satıra sığmıyorsa */
@media (max-width: 960px){
  .action-bar--guncelle{
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .action-bar--guncelle .action-left{ justify-content:center; }
}
/* içerik çubukla çakışmasın */
.stu-shell{ padding-bottom: 96px; }

/* GÜNCELLE sekmesi sabit alt bar – tek satır, geri dön sağda */
.action-bar--guncelle{
  position: fixed;           /* scroll'da sabit */
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* sol - orta - sağ */
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(9,13,20,.85);
  backdrop-filter: saturate(140%) blur(6px);
  border-top: 1px solid #2b364a;
}

/* sol kısım */
.action-bar--guncelle .action-left{
  display:flex; align-items:center; gap:8px; justify-content:flex-start;
}
.action-bar--guncelle .action-left .lbl{
  color:#e5e7eb; font-weight:600; font-size:14px; white-space:nowrap;
}
.action-bar--guncelle .action-left input{
  width: 260px; height: 44px;
  border:1px solid #d1d5db; border-radius:12px; padding:0 12px;
  background:#fff; color:#0f172a;
}

/* orta buton grubu – tek satır */
.action-bar--guncelle .action-center{
  display:flex; justify-content:center; align-items:center; gap:12px;
  flex-wrap: nowrap;                  /* ALTLI ÜSTLÜ OLMASIN */
  overflow-x: auto;                   /* dar ekranda yana kaydırılabilir */
  white-space: nowrap;
}

/* sağ: Geri Dön butonu sağa yaslı */
.action-bar--guncelle .action-right{
  display:flex; justify-content:flex-end;
}

/* küçük ekranlar: yine tek satır, ama kayıt no daralsın */
@media (max-width: 880px){
  .action-bar--guncelle .action-left input{ width: 180px; }
}

/* GÜNCELLE alt bar: sabit/fixed */
section#tab-guncelle .action-bar--guncelle{
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(9,13,20,.85);
  backdrop-filter: saturate(140%) blur(6px);
  border-top: 1px solid #2b364a;
}

/* İçerik, sabit alt çubukla çakışmasın */
.stu-shell{ padding-bottom: 96px !important; }

/* 3 sütun grid’de tek kutunun tüm genişliği kaplaması */
.span-all { grid-column: 1 / -1; }

/* =======================
   ÖĞRENCİ BUL ÇERÇEVESİ
   ======================= */
/* Varsayılan: koyu gri (slate) degrade – diğer kutulardan farklı ton */
.box--search{
  background: linear-gradient(180deg, rgba(17,24,39,.75), rgba(31,41,55,.55)); /* slate-900 → slate-800 */
  border: 1px solid #94a3b855;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.box--search > legend{
  color:#dbeafe;         /* başlık rengi: açık mavi */
  font-weight:800;
}

/* İç düzen: iki sütun yan yana; dar ekranda tek sütun */
.search-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.search-grid .search-col{ min-width:0; } /* taşma olmasın */

/* Dar ekran */
@media (max-width: 980px){
  .search-grid{ grid-template-columns: 1fr; }
}

/* -------------------------------------------------------
   RAPORLAMA (tab-rapor) — TEMİZ VE TUTARLI SÜRÜM
   Bu bloğu tek parça olarak <style> içine ekle.
--------------------------------------------------------*/

/* (İsteğe bağlı) Renk alternatifleri – sadece .box--search üzerine uygula
   MAVİMSİ:
   background: linear-gradient(180deg, rgba(30,58,138,.38), rgba(59,130,246,.16));
   border: 1px solid #60a5fa55;
   YEŞİLİMSİ:
   background: linear-gradient(180deg, rgba(6,95,70,.40), rgba(16,185,129,.14));
   border: 1px solid #10b98155;
   MORUMSU:
   background: linear-gradient(180deg, rgba(76,29,149,.40), rgba(139,92,246,.14));
   border: 1px solid #8b5cf655;
*/

/* Küçük yardımcı grid */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:960px){ .grid-2{ grid-template-columns:1fr; } }

/* ==== ÜST ARAÇ ÇUBUĞU ==== */
#tab-rapor .report-toolbar{
  display:grid;
  grid-template-columns: 1fr;   /* satır 1: filtreler, satır 2: aksiyonlar */
  row-gap:12px;
  margin:8px 0 14px;
}

/* Filtreler */
#tab-rapor .report-filters{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap:12px;
}
#tab-rapor .report-filters .f{ display:flex; align-items:center; gap:8px; min-width:220px; }
#tab-rapor .report-filters label{ font-size:13px; color:#e2e8f0; white-space:nowrap; }

/* Aksiyon butonları – ortala */
#tab-rapor .report-actions{
  display:flex; justify-content:center; align-items:center;
  gap:12px; flex-wrap:wrap;
}

/* Buton presetleri (varsa mevcut .btn ile uyumlu) */
#tab-rapor .btn.report{ border-radius:10px; padding:10px 14px; font-weight:800; }
#tab-rapor .btn.sky{ background:#0ea5e9; }     /* Rapor AL */
#tab-rapor .btn.lime{ background:#65a30d; }    /* Tümünü Seç */
#tab-rapor .btn.amber{ background:#f59e0b; }   /* Excel */
#tab-rapor .btn.gray{ background:#374151; }    /* Temizle */
#tab-rapor .btn.red{ background:#dc2626; }     /* Geri Dön (opsiyonel) */

/* Raporlama ızgarası: 3 → 2 → 1 kolon akışı ve “taşma yok” */
#tab-rapor .report-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* <-- önemli: minmax(0,1fr) */
  gap: 14px;
}

/* Bu ızgara içindeki tüm kutular “taşmayı tetiklemesin” */
#tab-rapor .report-grid > * { min-width: 0; }


/* Kutu (grup) */
#tab-rapor .report-box{
  border:1px solid #2b3442;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  padding:12px 12px 8px;
  min-width:0;   /* taşma engeli */
}

/* Kutunun başlığı + "Hepsini Seç" çipi hizası */
#tab-rapor .report-box .box-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
#tab-rapor .report-box .box-head .sel-all,
#tab-rapor .report-box .box-head .chip{
  position:static !important; transform:none !important; margin-left:auto;
}

/* Checkbox satırları */
#tab-rapor .chkline{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
#tab-rapor .chkline label{ display:flex; align-items:center; gap:8px; font-size:14px; }

/* (Opsiyonel) Arka planı farklı olan kutu */
#tab-rapor .box--search{
  background: linear-gradient(180deg, rgba(17,24,39,.75), rgba(31,41,55,.55));
  border: 1px solid #94a3b855;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
#tab-rapor .box--search .box-head legend,
#tab-rapor .box--search legend{ color:#dbeafe; }

/* --- Kutu ızgarası genişlemesin --- */
#tab-rapor .report-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
#tab-rapor .report-grid > *{ min-width:0; }

/* --- YENİ: Önizleme paneli (grid DIŞINDA) --- */
#tab-rapor .report-preview{
  width:100%;
  margin-top:14px;
  border:1px solid #2b3442;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  contain: layout paint;
  isolation:isolate;
}

#tab-rapor .report-preview .preview-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #2b3442;
  background:#0f1623;
  position:sticky; top:0; z-index:2;
}
#tab-rapor .report-preview .preview-toolbar .spacer{ flex:1 }

#tab-rapor .report-preview .preview-scroll{
  max-width:100%;
  max-height:420px;           /* dilediğin gibi ayarlayabilirsin */
  overflow:auto;              /* yatay/dikey scroll sadece burada */
  -webkit-overflow-scrolling:touch;
}

#tab-rapor .report-preview .report-table{
  width:max-content;          /* çok sütunda genişleyebilsin */
  min-width:100%;             /* az sütunda kutuyu doldursun */
  border-collapse:separate; border-spacing:0;
  table-layout:auto;
}
#tab-rapor .report-preview .report-table th{
  position:sticky; top:0; z-index:1;
  background:#0b1220; text-align:left;
  border-bottom:1px solid #2b3442;
}
#tab-rapor .report-preview .report-table th,
#tab-rapor .report-preview .report-table td{
  padding:10px 12px; white-space:nowrap;
  border-bottom:1px solid #2b3442;
}

/* responsive */
@media (max-width:1200px){ #tab-rapor .report-grid{grid-template-columns:1fr 1fr} }
@media (max-width:800px){ #tab-rapor .report-grid{grid-template-columns:1fr} }
/* === Raporlama: sabit kalan kategori + altta bağımsız önizleme paneli === */
#tab-rapor .report-grid{ min-width:0; }
#tab-rapor .report-preview{
  margin-top:12px;
  border:1px solid #2b3442;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
  contain: layout paint;
}
#tab-rapor .report-preview .preview-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-bottom:1px solid #2b3442;
}
#tab-rapor .report-preview .preview-toolbar .spacer{ flex:1; }

#tab-rapor .report-preview .preview-scroll{
  max-height:420px;
  overflow:auto;                  /* yatay/dikey scroll sadece burada */
  -webkit-overflow-scrolling:touch;
}

/* Tablo: çok sütunda genişleyebilsin, az sütunda yine %100 */
#tab-rapor .report-table{
  width:max-content;
  min-width:100%;
  border-collapse:separate; border-spacing:0;
}
#tab-rapor .report-table th, 
#tab-rapor .report-table td{
  padding:10px 12px; border-bottom:1px solid #2b3442; white-space:nowrap;
}
#tab-rapor .report-table th{
  position:sticky; top:0; z-index:1; background:#111827; text-align:left;
}

/* Listbox tabanlı önizleme */
.report-preview .preview-scroll { 
  max-height: 420px;         /* sadece burada dikey scroll */
  overflow: auto; 
}
.report-listbox{
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: #f3f4f6;        /* açık gri zemin */
  color: #0f172a;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 6px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
}
.report-listbox option{
  background: inherit;
  color: inherit;
  padding: 8px 10px;
  margin: 2px 0;
  white-space: nowrap;
}
.report-listbox option:checked{
  background:#e5e7eb;
  color:#111827;
}
/* ====== TOPLU ÖĞRENCİ KAYDI (tab-toplu) ====== */
#tab-toplu .bulk-wrap{
  display:grid;
  grid-template-columns: 1fr 280px;  /* sol içerik + sağ panel */
  gap:16px;
}

/* Yükleme / önizleme kutuları */
#tab-toplu .upload-drop{
  min-height:420px;
  display:grid; place-items:center;
  border:2px dashed #3b4252;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  text-align:center;
  padding:18px;
  transition: border-color .15s ease, background .15s ease;
}
#tab-toplu .upload-drop.dragover{
  border-color:#60a5fa; background:rgba(96,165,250,.10);
}
#tab-toplu .upload-drop .hint{
  color:#cbd5e1; font-size:14px; margin-top:8px;
}
#tab-toplu .upload-drop .btn{ margin-top:10px; }

#tab-toplu .preview-box{
  margin-top:12px;
  border:1px solid #2b3442; border-radius:14px;
  background:rgba(255,255,255,.04);
  overflow:auto; max-height:420px;
}
#tab-toplu .preview-table{
  width:max-content; min-width:100%;
  border-collapse:separate; border-spacing:0;
}
#tab-toplu .preview-table th, #tab-toplu .preview-table td{
  padding:10px 12px; white-space:nowrap; border-bottom:1px solid #2b3442;
}
#tab-toplu .preview-table thead th{
  position:sticky; top:0; background:#111827; z-index:1; text-align:left;
}

/* Sağ panel */
#tab-toplu .side-panel{
  display:flex; flex-direction:column; gap:12px; align-self:start;
}
#tab-toplu .card{
  border:1px solid #2b3442; border-radius:14px;
  background:rgba(255,255,255,.06);
  padding:14px;
}
#tab-toplu .excel-badge{
  width:88px; height:112px; border-radius:10px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:18px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  margin:6px auto 10px;
}
#tab-toplu .side-panel .btn{ width:100%; border-radius:999px; padding:12px 14px; font-weight:800 }
#tab-toplu .btn.green{ background:#16a34a; border-color:#16a34a }
/* === ACİL İLETİŞİM: mini sekmeler ve log alanı (YALNIZ #tab-acil içinde geçerli) === */
#tab-acil .acil-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  #tab-acil .acil-grid{ grid-template-columns: 1fr; }
}

/* Mini sekmeler */
#tab-acil .mini-tabs{
  display: flex;
  gap: 8px;
  margin: 2px 0 10px;
  flex-wrap: wrap;
}
#tab-acil .mini-tab{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #2b3442;
  background: #0b1220;
  color: #cbd5e1;
  cursor: pointer;
  font-weight: 700;
}
#tab-acil .mini-tab.is-active{
  background: #1e293b;
  color: #fff;
  border-color: #3b4252;
}

/* Paneller */
#tab-acil .mini-panel{ display: none; }
#tab-acil .mini-panel.is-visible{ display: block; }

/* Sağdaki butonlar */
#tab-acil .acil-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#tab-acil .acil-actions .btn{
  width: 100%;
  font-weight: 800;
}

/* Alt log/önizleme alanı (beyaz/gri ton) */
#tab-acil .acil-log{
  margin-top: 10px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;            /* açık beyaz */
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
}
#tab-acil .acil-log .log-list{
  list-style: none;
  margin: 0;
  padding: 10px;
}
#tab-acil .acil-log .log-list li{
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f7;
  color: #111827;
  font-size: 14px;
}
#tab-acil .acil-log .log-list li:last-child{ border-bottom: 0; }
/* MEB listbox — beyaz/gri ton */
.meb-list{
  background:#ffffff;     /* beyaz */
  color:#111827;
  border:1px solid #d1d5db;
  border-radius:10px;
}
.meb-list option{
  padding:8px 10px;
  margin:2px 0;
  white-space:nowrap;
}
/* Sol menü – sekme aktif vurgusu ve erişilebilirlik */
.side-tile{ cursor: pointer; }                    /* buton gibi davransın */
.side-tile.is-active{
  background: rgba(96,165,250,.10);
  border-color: #60a5fa80;
  box-shadow: 0 0 0 2px #60a5fa33 inset;
}
.side-tile.is-active .side-ico{ filter: saturate(1.08); }
.side-tile:focus-visible{
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

/* === Sınıf Listesi sekmesi boşluk & hizalama düzeltmeleri === */

/* Sol formun grid’inde kolon ve satır aralıklarını büyüt */
.form-grid { 
  column-gap: 24px; 
  row-gap: 16px;
}

/* Liste sekmesi için: etiket sabit genişlik + sağda geniş alan */
.form-grid-2cols{
  grid-template-columns: 220px minmax(320px, 1fr);
}

/* Etiketleri sağa hizala, nefes aldır */
.form-grid label{
  justify-self: end;
  text-align: right;
  line-height: 1.2;
  padding-right: 6px;
  font-size: 18px; /* istersen 16 yap */
}

/* Input/select boyutları (pill görünümüyle uyumlu) */
.inp{
  min-height: 46px;
  border-radius: 22px;
  padding: 12px 16px;
}

/* Sol–sağ sütun arası mesafeyi büyüt, sağ görselin min-genişliğini koru */
.grid-2.right-img{
  grid-template-columns: minmax(460px, 1fr) minmax(360px, 480px);
  gap: 28px 36px;
}

/* Sağdaki görsel kutu biraz daha büyük ve nefesli olsun */
.preview-img{
  min-height: 280px;
  padding: 16px;
  border-radius: 20px;
}

/* Buton satırına üst boşluk */
#tab-liste .btn-row{ margin-top: 14px; }

/* Daha dar ekranlarda (<=1200px) biraz sıkıştır ama taşırma olmasın */
@media (max-width: 1200px){
  .grid-2.right-img{
    grid-template-columns: minmax(420px, 1fr) minmax(320px, 440px);
    gap: 24px 28px;
  }
  .form-grid-2cols{
    grid-template-columns: 200px minmax(280px, 1fr);
  }
}

/* Tablet ve altı: tek sütuna düş, boşlukları rahat bırak */
@media (max-width: 1024px){
  .grid-2.right-img{ grid-template-columns: 1fr; }
  .preview-img{ min-height: 220px; }
  .form-grid label{ justify-self:start; text-align:left; padding-right:0; }
  .form-grid-2cols{ grid-template-columns: 1fr; }
}

/* Ortak başlık stili — Öğrenci İşlemleri ile birebir */
.stu-topbar{display:flex;align-items:center;padding:22px 26px;}
.stu-title{
  display:inline-block;
  padding:12px 22px;
  border-radius:26px;
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#fff;
  font-weight:900;
  font-size:32px;              /* büyüklük */
  letter-spacing:.5px;
  text-transform:uppercase;    /* İSLEMLERİ gibi */
  box-shadow:0 10px 30px rgba(37,99,235,.35);
}

/* Daha küçük ekranlarda biraz küçült */
@media (max-width: 640px){
  .stu-title{font-size:24px; padding:10px 18px; border-radius:22px;}
}

/* Şerit (yükseksin) */
.ribbon-inner{
  height: 60px;   /* 72px -> 60px */
  padding: 6px;   /* 8px -> 6px  */
  border-radius: 22px; /* 26px -> 22px */
}

/* Mavi kapsül */
.ribbon-label{
  font-size: 28px;        /* 34px -> 28px */
  padding: 8px 18px;      /* 12px 28px -> 8px 18px */
  border-radius: 18px;    /* 22px -> 18px */
  font-weight: 800;       /* 900 -> 800 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 12px rgba(26,59,151,.28);
}

/* =========================
   SADECE EMAIL SAYFASI
   ========================= */
#email-page .side{display:flex;flex-direction:column;gap:18px}

#email-page .tile{
  display:flex !important;
  flex-direction:row !important;
  align-items:center; justify-content:flex-start;
  gap:18px; padding:20px 22px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid var(--line); box-shadow:var(--shadow);
  cursor:pointer; transition:.18s;
}
#email-page .tile:hover{transform:translateY(-2px); box-shadow:0 20px 60px rgba(0,0,0,.5)}
#email-page .tile.is-active{outline:2px solid #60a5fa66}

/* ikon rozetleri ve svg boyutu (global 40px kuralını bastırır) */
#email-page .tile .icon{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;flex:0 0 56px;
}
#email-page .tile .icon svg{
  width:28px !important; height:28px !important; min-width:28px !important;
}

/* başlık: hem .title hem .ttl için */
#email-page .tile .title,
#email-page .tile .ttl{font-size:20px;font-weight:800;letter-spacing:.2px}

/* renk temaları (ikon arkaplanları) */
#email-page .icon--cyan{  background:#062027; border:1px solid #22d3ee44 }
#email-page .icon--green{ background:#072419; border:1px solid #34d39955 }
#email-page .icon--amber{ background:#261c06; border:1px solid #fbbf2444 }

/* alt açıklamaları gizle (varsa) */
#email-page .tile .sub{ display:none !important; }
/* Email sol menü başlıklarını 12px yap */
#email-page .tile{ padding:14px 18px; }                 /* kartı da biraz incelt */
#email-page .tile .icon{ width:44px; height:44px; }     /* rozet küçülsün */
#email-page .tile .icon svg{ width:20px !important; height:20px !important; }

#email-page .tile .ttl{
  font-size:15px;        /* İSTENEN */
  line-height:1.25;
  letter-spacing:.1px;
  font-weight:800;
}
/* ==== Email menü başlığını 12px'e indir (kesin) ==== */
#email-page .side .tile .ttl{
  font-size:15px !important;
  line-height:1.15 !important;
  letter-spacing:.1px !important;
  font-weight:700 !important;   /* biraz ince dursun */
  margin:0 !important;
}

/* Kart ve ikon oranları da küçülsün */
#email-page .side .tile{ padding:15px 16px !important; gap:14px !important; }
#email-page .side .tile .icon{ width:40px !important; height:40px !important; border-radius:12px !important; }
#email-page .side .tile .icon svg{ width:18px !important; height:18px !important; min-width:18px !important; }

/* --- SOL MENÜYÜ ZORLA YATAY YAP (sadece #social-page) --- */
#social-page .side{ display:flex; flex-direction:column; gap:18px; }

#social-page .tile{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:18px !important;
  padding:20px 22px;
  min-height:88px;               /* daha tok görünsün */
}

/* ikon sabit kutu */
#social-page .tile .icon{
  flex:0 0 56px !important;
  width:56px !important;
  height:56px !important;
  border-radius:16px;
  display:grid; place-items:center;
}
#social-page .tile .icon svg{
  width:28px !important; height:28px !important;
}

/* başlık – tek satır, 15px */
#social-page .tile .ttl{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.2px;
  line-height:1.1;
  white-space:nowrap;             /* iki satıra kırma */
  overflow:hidden; text-overflow:ellipsis;
}
/* === Login tweaks === */
/* Sol panel + form başlığındaki logo görsellerini kaldır */
.brand-mini img,
.k12-head .k12-logo { display: none !important; }

/* Görsel kalkınca boşlukları toparla */
.brand-mini { gap: 0 !important; }
.k12-head { gap: 0 !important; }

/* Başlığı beyaz yap ve okunurluğu arttır */
.k12-title h1 { color: #ffffff !important; }
/* === Sol menü: kart görünümlü, büyük köşe, aktifte mavi ışıma === */
#counsel-page .side{gap:22px}
#counsel-page .tile{
  display:flex; align-items:center; gap:18px;
  padding:22px 24px;
  border-radius:26px;
  background:#121826;                 /* koyu kart */
  border:1px solid #2a3344;            /* ince hat */
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:pointer; transition:.2s;
}
#counsel-page .tile:hover{transform:translateY(-1px)}
#counsel-page .tile.is-active{
  background:linear-gradient(180deg,#141c2b 0%,#121a2a 100%);
  border-color:#3b82f6;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.20) inset,
    0 14px 40px rgba(17,24,39,.55);
}

/* ==== Sol menü kartları: ikon solda, yazı sağda, sabit yükseklik ==== */
#counsel-menu{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Kart */
#counsel-menu .tile{
  display:flex !important;
  flex-direction:row !important;       /* yatay hizalama */
  align-items:center !important;
  gap:14px !important;

  padding:12px 16px !important;
  height:64px !important;               /* tek satır, sabit yükseklik */
  border-radius:18px !important;

  background:#141a24 !important;
  border:1px solid #2a3344 !important;
  box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
  text-align:left !important;
}

/* İkon “yastığı” */
#counsel-menu .tile .icon{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 40px !important;
}
#counsel-menu .tile .icon svg{
  width:18px !important;
  height:18px !important;
  stroke:#fff !important;
  stroke-width:2 !important;
}

/* Başlık (yazı sağda) */
#counsel-menu .tile .ttl{
  font-size:16px !important;
  font-weight:800 !important;
  color:#e7ecf4 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;        /* tek satırda kalsın */
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Hover/aktif */
#counsel-menu .tile:hover{ transform:translateY(-1px); }
#counsel-menu .tile.is-active{
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 2px rgba(59,130,246,.18) inset,
             0 10px 26px rgba(0,0,0,.32) !important;
}

/* Renk varyantları – ikon arka planı */
#counsel-menu .icon--cyan  { background:#10b981 !important; }
#counsel-menu .icon--green { background:#22c55e !important; }
#counsel-menu .icon--blue  { background:#3b82f6 !important; }
#counsel-menu .icon--amber { background:#f59e0b !important; }
#counsel-menu .icon--pink  { background:#ec4899 !important; }
#personnel #p-side .tile{
  display:grid !important;
  grid-template-columns: 48px 1fr !important;
  align-items:center !important;
  gap:12px !important;
  text-align:left !important;
  width:100%;
  /* border/background'ı dokunma: var olan kart stili kalsın */
}

#personnel #p-side .tile .icon{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;flex:0 0 40px;
}
#personnel #p-side .tile .icon svg{ width:18px;height:18px;stroke:#fff; }

#personnel #p-side .tile .ttl{
  display:block !important;font-size:16px !important;font-weight:800 !important;
  color:#e7ecf4 !important;white-space:nowrap !important;overflow:hidden !important;
  text-overflow:ellipsis !important;opacity:1 !important;visibility:visible !important;
  text-indent:0 !important;transform:none !important;filter:none !important;
}

#personnel .c-teal{background:#10b981;} 
#personnel .c-blue{background:#3b82f6;}
#personnel .c-amber{background:#f59e0b;}
#personnel .c-pink{background:#ec4899;}



/* panel ve sol menü aynı düzlemde dursun; listeler panel dışına taşmasın */
#revir .shell{ align-items: start; }

#revir .side{ position: relative; z-index: 5; }          /* sol menü üste kalır */
#revir .panel-outer{ position: relative; z-index: 1; overflow: hidden; }  /* dışarı taşanı kes */

#revir .scroll-x{ overflow-x: auto; overflow-y: hidden; width: 100%; padding-bottom: 8px; }

/* sağlık listesi: geniş kolon seti, ama yatay scroll içinde */
#healthHead{
  display: grid;
  grid-template-columns: 90px 110px 80px 90px 1fr 120px 80px 150px 120px;
  min-width: 1050px;    /* kolon toplamına uygun */
}
#sOgrRows{ min-width: 1050px; }
/* Sadece dikey kaydırma: iç listedeki yatay scroll'u kapat */
#revir .rows{
  overflow-y: auto;
  overflow-x: hidden;   /* <-- ekledik */
}
#tab-pay .actions{
  margin-top:26px;    /* sadece bu sekmede boşluk büyür */
}
/* ===========================
   DAPROS RESPONSIVE FORM PAKETİ
   (Masaüstü + Tablet + Mobil)
   =========================== */

/* --- GENEL FORM SHELL --- */
.dp-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Form satırı: masaüstünde 2 kolon (label + input) */
.dp-form .row{
  display: grid;
  grid-template-columns: 1.1fr minmax(0, 260px);
  align-items: center;
  column-gap: 22px;
}

/* Label kısmı */
.dp-form .row > label{
  font-size: 14px;
  font-weight: 500;
  color: #e5e7eb;
  margin-bottom: 0;
}

/* Input kapsayıcısı */
.dp-form .field{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Input, select, textarea’lar: genişlik yönetimi */
.dp-form .field input,
.dp-form .field select,
.dp-form .field textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;             /* TAŞMAYI ÖNLEYEN ANA SATIR */
  box-sizing: border-box;
}


/* ===========================
   DAPROS RESPONSIVE FORM (SADECE MOBİL)
   =========================== */

/* --- Mobil (<= 768px) --- */
@media (max-width: 768px){

  /* Form kabuğu */
  .dp-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Her satır tek kolon olsun */
  .dp-form .row{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  /* Label */
  .dp-form .row > label{
    font-size: 14px;
    font-weight: 500;
    color: #e5e7eb;
    margin-bottom: 0;
    width: 100%;
    text-align: left;
  }

  /* Input kapsayıcısı */
  .dp-form .field{
    width: 100%;
    display: flex;
  }

  /* === KUTULAR: TAM GENİŞLİK + KOYU TEMA === */
  .dp-form .field input,
  .dp-form .field select,
  .dp-form .field textarea,
  .dp-form .row > input,
  .dp-form .row > select,
  .dp-form .row > textarea{
    width: 100% !important;      /* önceki sabit width’leri ez */
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;

    height: 46px !important;     /* kutu yüksekliği */
    line-height: 46px;
    font-size: 14px;

    padding: 0 14px;
    border-radius: 14px !important;
    background: #0f172a;         /* beyaz yerine koyu kutu */
    border: 1px solid #1e293b;
    color: #e5e7eb;

    box-shadow: none;

    /* UYARIYI KESEN SATIRLAR */
    appearance: none;            /* standart */
    -webkit-appearance: none;    /* iOS / Safari için */
  }

  /* textarea daha yüksek olsun */
  .dp-form .field textarea,
  .dp-form .row > textarea{
    height: auto !important;
    min-height: 72px;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Sağ üst köşe butonları (Ana Sayfa / Çıkış) alta insin */
  .corner-actions{
    position: static !important;
    margin: 8px auto 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}

/* Küçük mobil (<= 480px) – padding sıkılaştır */
@media (max-width: 480px){

  .dp-form,
  .dp-form-container,
  .form-box,
  .card{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dp-form .row{
    gap: 6px;
  }
}