/* ═══════════════════════════════════════════════════════════
   ABMATO — UI Components
   Navbar, butonlar, kartlar, formlar, modal, Beceri Köprüsü
═══════════════════════════════════════════════════════════ */

/* ── Navbar ──────────────────────────────────────────────── */
.navbar{
  background:rgba(242,248,247,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:0.5px solid var(--border);
  padding:.6rem .875rem;
  padding-top:calc(.6rem + env(safe-area-inset-top));
  display:flex;align-items:center;gap:.5rem;
  position:sticky;top:0;z-index:200;
  min-height:48px;flex-shrink:0;overflow:hidden;
}
.navbar-title{font-size:1.0625rem;font-weight:700;color:var(--text);letter-spacing:-.01em}
.nav-action-btn{
  width:44px;height:44px;border-radius:11px;
  background:var(--raised);border:0.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  position:relative;transition:opacity var(--dur-fast);
}
.nav-action-btn svg{width:18px;height:18px;stroke-width:2;flex-shrink:0}
.nav-action-btn:active{opacity:.6}

/* ── Tab bar (Bottom Nav) ────────────────────────────────── */
.bottom-nav{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(242,248,247,.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:0.5px solid rgba(13,148,136,.12);
  display:flex;justify-content:space-around;align-items:center;
  padding:.3rem 0 calc(.45rem + env(safe-area-inset-bottom));
  z-index:200;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.12rem;
  font-size:.58rem;font-weight:700;color:var(--hint);
  cursor:pointer;padding:.3rem .25rem;
  min-height:48px;border:none;background:transparent;
  position:relative;letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color var(--dur-fast);
}
.nav-btn .nav-icon{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  transition:all var(--dur-fast) var(--spring);
}
.nav-btn .nav-icon svg{
  width:20px;height:20px;stroke-width:1.75;
  transition:all var(--dur-fast);flex-shrink:0;display:block;
}
.nav-btn.active{color:var(--teal)}
.nav-btn.active .nav-icon{background:rgba(13,148,136,.1)}
.nav-btn.active .nav-icon svg{stroke:var(--teal);stroke-width:2.25}
.nav-btn:active .nav-icon{transform:scale(.8)}
.nav-dot{position:absolute;top:2px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:1.5px solid var(--bg)}

/* ── Kartlar ─────────────────────────────────────────────── */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  border:0.5px solid var(--border);overflow:hidden;
  box-shadow:var(--sh-xs);
}
.card-interactive{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.card-interactive:active{transform:scale(.975);opacity:.88}
.card-body{padding:1rem}
.card-sm .card-body{padding:.75rem .875rem}
.card-primary{border-color:var(--border2);background:#EDF8F6}
.card-green{border-color:var(--border2);background:#EDF8F6}
.card-amber{border-color:rgba(245,158,11,.2);background:#FFFBEB}

/* ── Butonlar ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.8rem 1.375rem;min-height:48px;
  font-family:var(--ff-body);font-size:.9375rem;font-weight:800;
  border-radius:14px;border:none;cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
  user-select:none;letter-spacing:.01em;line-height:1;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn:active{transform:scale(.95);opacity:.88}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-primary{background:var(--teal-d);color:#fff;box-shadow:var(--sh-btn);font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.22);letter-spacing:.02em}
.btn-primary:active{box-shadow:none}
.btn-orange,.btn-cta{background:var(--orange);color:#fff;box-shadow:var(--sh-cta)}
.btn-soft{background:var(--teal-a);color:var(--teal-d);border:1px solid rgba(13,148,136,.2)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border2)}
.btn-ghost:active{background:var(--raised)}
.btn-icon{padding:.45rem;border-radius:var(--r-sm);background:var(--raised);border:0.5px solid var(--border);color:var(--muted);min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center}
.btn-danger{background:rgba(220,38,38,.08);color:var(--danger);border:1px solid rgba(220,38,38,.2)}
.btn-green{background:var(--teal-a);color:var(--teal-d);border:1px solid rgba(13,148,136,.2)}
.btn-blue{background:var(--blue-a);color:var(--blue);border:1px solid rgba(26,127,166,.2)}
.btn-xs{padding:.26rem .55rem;font-size:var(--t-xs);min-height:28px;border-radius:8px}
.btn-sm{padding:.4rem .8rem;font-size:var(--t-sm);min-height:36px;border-radius:10px}
.btn-lg{padding:.9rem 1.75rem;font-size:var(--t-lg)}
.btn-block{width:100%}

/* ── Chip ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:.2rem;padding:.18rem .5rem;border-radius:var(--r-full);font-size:var(--t-xs);font-weight:700;line-height:1.4;letter-spacing:.02em}
.chip-orange{background:var(--orange-a);color:var(--orange-d)}
.chip-green {background:var(--teal-a);color:var(--teal-d)}
.chip-blue  {background:var(--blue-a);color:var(--blue)}
.chip-yellow{background:var(--amber-a);color:#92400E}
.chip-red   {background:rgba(220,38,38,.1);color:var(--danger)}
.chip-muted {background:var(--raised);color:var(--muted);border:0.5px solid var(--border2)}
.chip-purple{background:var(--purple-a);color:var(--purple)}

/* ── Bölüm başlıkları ────────────────────────────────────── */
.sec-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6rem}
.sec-title{font-size:.6875rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

/* ── Hero banner ─────────────────────────────────────────── */
.hero-banner{
  background:linear-gradient(135deg,var(--teal),var(--teal-d));
  color:#fff;border-radius:var(--r-xl);padding:1.2rem 1.25rem;
  position:relative;overflow:hidden;
}
.hero-banner::before{content:'';position:absolute;top:-40%;right:-20%;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}

/* ── List row ────────────────────────────────────────────── */
.list-row{display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all var(--dur-fast);box-shadow:var(--sh-xs);touch-action:manipulation}
.list-row:active{transform:scale(.985);opacity:.88}
.list-row-icon{font-size:1.5rem;flex-shrink:0;line-height:1}
.list-row-body{flex:1;min-width:0}
.list-row-title{font-size:var(--t-md);font-weight:700;color:var(--text)}
.list-row-sub{font-size:var(--t-xs);color:var(--muted);margin-top:.1rem}
.list-row-arrow{flex-shrink:0;opacity:.25;font-size:.8rem}

/* ── Info box ────────────────────────────────────────────── */
.info-box{border-radius:var(--r-md);padding:.8rem .9rem;font-size:var(--t-sm);line-height:1.6;border-left:3px solid}
.info-box-primary{background:var(--teal-a);border-color:var(--teal);color:var(--text2)}
.info-box-green{background:var(--teal-a);border-color:var(--teal-d)}
.info-box-blue{background:var(--blue-a);border-color:var(--blue)}
.info-box-yellow{background:var(--amber-a);border-color:var(--amber)}
.info-box-purple{background:var(--purple-a);border-color:var(--purple)}

/* ── Metrik ──────────────────────────────────────────────── */
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.metric-cell{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-md);padding:.7rem .4rem;text-align:center;box-shadow:var(--sh-xs)}
.metric-val{font-size:1.5rem;font-weight:900;font-family:var(--ff-mono);color:var(--teal);line-height:1}
.metric-label{font-size:.6rem;color:var(--muted);margin-top:.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.metric-icon{font-size:1.4rem;margin-bottom:.2rem}

/* ── Input ───────────────────────────────────────────────── */
.input{
  width:100%;background:var(--raised);border:1px solid var(--border2);
  border-radius:var(--r-md);padding:.85rem 1rem;
  font-family:var(--ff-body);font-size:1rem;color:var(--text);outline:none;
  -webkit-appearance:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.input:focus{background:var(--surface);border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-a)}
.input::placeholder{color:var(--hint)}
.field{margin-bottom:.85rem}
.field label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:.3rem;letter-spacing:.02em}

/* ── Modal / Bottom Sheet ────────────────────────────────── */
.modal-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.5);
  z-index:300;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .15s;
  pointer-events:auto;          /* #modals container pointer-events:none — burada geri açıyoruz */
}
.modal{
  background:var(--surface);
  border-radius:20px 20px 0 0;
  padding:0;
  width:100%;
  max-height:92%;
  overflow:hidden;             /* modal kendisi kaymaz, modal-body kayar */
  animation:slideUp var(--dur-med) var(--spring);
  position:relative;
  display:flex;
  flex-direction:column;
}
.modal-handle{
  width:36px;height:5px;background:rgba(0,0,0,.13);
  border-radius:99px;margin:.7rem auto .35rem;display:block;
  flex-shrink:0;
}
.modal-body{
  padding:.5rem 1.1rem 1rem;
  flex:1 1 auto;
  min-height:0;                /* flex-child overflow için şart */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.modal-footer{
  flex-shrink:0;
  padding:.75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom));
  background:var(--surface);
  border-top:0.5px solid var(--border);
  box-shadow:0 -4px 12px rgba(0,0,0,.04);
}
.modal-footer-row{
  display:flex;gap:.55rem;align-items:center;
}
.modal-footer-row > .btn{flex:1;min-height:48px}
.modal-footer-row > .btn-primary,
.modal-footer-row > .btn-orange{flex:2}
.modal-done-pill{
  flex:2;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.85rem;background:var(--teal-d);
  border-radius:14px;border:1px solid var(--teal-d);
  color:#fff;font-weight:900;font-size:.95rem;
  letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  box-shadow:0 3px 10px rgba(27,94,32,.3);
}
.backdrop{position:absolute;inset:0;z-index:280;background:rgba(0,0,0,.5);animation:fadeIn .15s}

/* ── Progress ────────────────────────────────────────────── */
.progress{width:100%;height:5px;background:var(--raised);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal-l),var(--teal));border-radius:99px;transition:width .6s var(--ease)}

/* ── Skeleton ────────────────────────────────────────────── */
.skeleton{border-radius:var(--r-md);background:linear-gradient(90deg,var(--border) 25%,var(--raised) 50%,var(--border) 75%);background-size:600px 100%;animation:shimmer 1.4s infinite linear}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state{text-align:center;padding:3rem 1.5rem;color:var(--muted)}
.empty-state-icon{font-size:2.8rem;margin-bottom:.75rem;opacity:.5}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:.3rem;font-size:var(--t-xs);color:var(--muted);margin-bottom:.7rem;flex-wrap:wrap}
.breadcrumb-item{cursor:pointer;font-weight:700}
.breadcrumb-item:hover{color:var(--teal)}
.breadcrumb-sep{opacity:.4}

/* ── Step dots / Onboarding ──────────────────────────────── */
.steps{display:flex;gap:.35rem;align-items:center}
.step-dot{width:7px;height:7px;border-radius:99px;background:var(--border2);transition:all var(--dur-med) var(--spring)}
.step-dot.active,.step-dot.cur{width:20px;background:var(--teal)}
.step-dot.done{background:rgba(13,148,136,.35)}
.ob-progress{display:flex;gap:.4rem;align-items:center;flex:1;padding:0 .5rem}
.ob-progress-dot{flex:1;height:3.5px;border-radius:99px;background:var(--border2);transition:background var(--dur-med)}
.ob-progress-dot.done{background:var(--teal)}
.ob-progress-dot.active{background:var(--teal-l)}

/* ── Toast ───────────────────────────────────────────────── */
.toast{
  position:absolute;bottom:calc(5.5rem + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);
  background:rgba(17,31,30,.96);
  color:#ffffff !important;
  padding:.75rem 1.25rem;border-radius:var(--r-full);
  font-size:.95rem;font-weight:900;z-index:400;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  white-space:nowrap;opacity:1;
  pointer-events:none;max-width:85%;text-align:center;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:opacity .22s ease, transform .22s ease;
}
.toast.ok{background:rgba(27,94,32,.96);color:#ffffff !important}
.toast.err{background:rgba(176,28,28,.96);color:#ffffff !important}
.toast.hide{opacity:0;transform:translateX(-50%) translateY(14px)}

/* ── PWA Install Banner ──────────────────────────────────── */
.pwa-install-banner{
  position:absolute;
  left:12px;right:12px;
  bottom:calc(env(safe-area-inset-bottom) + 12px);
  z-index:500;
  background:var(--surface);
  border:1.5px solid var(--teal-l);
  border-radius:var(--r-lg);
  padding:.85rem .95rem;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  display:flex;align-items:center;gap:.7rem;
  transform:translateY(140%);
  transition:transform .28s var(--spring), opacity .2s ease;
  opacity:0;
}
.pwa-install-banner.visible{transform:translateY(0);opacity:1}
.pwa-install-banner[hidden]{display:none}
.pwa-install-icon{font-size:1.7rem;flex-shrink:0;line-height:1}
.pwa-install-text{flex:1;min-width:0;line-height:1.3}
.pwa-install-text strong{display:block;font-size:.92rem;color:var(--text);font-weight:800}
.pwa-install-text span{display:block;font-size:.72rem;color:var(--muted);margin-top:.1rem}
.pwa-install-dismiss,.pwa-install-go{
  flex-shrink:0;min-height:40px;padding:.5rem .8rem;
  border-radius:10px;border:none;cursor:pointer;
  font-family:var(--ff-body);font-size:.82rem;font-weight:800;
  -webkit-tap-highlight-color:transparent;
}
.pwa-install-dismiss{background:transparent;color:var(--muted);padding:.5rem .5rem}
.pwa-install-go{background:var(--teal);color:#fff;box-shadow:0 3px 10px rgba(46,125,50,.3)}
.pwa-install-go:active{transform:scale(.96)}

/* ── SW Update Banner ───────────────────────────────────── */
.sw-update-banner{
  position:absolute;
  left:12px;right:12px;
  bottom:calc(env(safe-area-inset-bottom) + 12px);
  z-index:550;
  background:var(--surface);
  border:1.5px solid var(--blue);
  border-radius:var(--r-lg);
  padding:.85rem .95rem;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  display:flex;align-items:center;gap:.7rem;
  transform:translateY(140%);
  transition:transform .28s var(--spring), opacity .2s ease;
  opacity:0;
}
.sw-update-banner.visible{transform:translateY(0);opacity:1}
.sw-update-icon{font-size:1.6rem;flex-shrink:0;line-height:1;animation:swIconSpin 2.2s linear infinite}
@keyframes swIconSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.sw-update-text{flex:1;min-width:0;line-height:1.3}
.sw-update-text strong{display:block;font-size:.92rem;color:var(--text);font-weight:800}
.sw-update-text span{display:block;font-size:.72rem;color:var(--muted);margin-top:.1rem}
.sw-update-dismiss,.sw-update-go{
  flex-shrink:0;min-height:40px;padding:.5rem .8rem;
  border-radius:10px;border:none;cursor:pointer;
  font-family:var(--ff-body);font-size:.82rem;font-weight:800;
  -webkit-tap-highlight-color:transparent;
}
.sw-update-dismiss{background:transparent;color:var(--muted);padding:.5rem .5rem}
.sw-update-go{background:var(--blue);color:#fff;box-shadow:0 3px 10px rgba(26,127,166,.3)}
.sw-update-go:active{transform:scale(.96)}

/* ── Diskalkuli Screener (Tıklamalı Kontrol Listesi) ─── */
.screener-item{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.7rem .85rem;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.screener-item:hover{border-color:var(--teal-l)}
.screener-item input[type="checkbox"]{
  flex-shrink:0;
  width:22px;height:22px;
  accent-color:var(--teal);
  margin-top:1px;
  cursor:pointer;
}
.screener-item input[type="checkbox"]:checked + span{color:var(--teal-d);font-weight:700}
.screener-item span{
  flex:1;font-size:.92rem;line-height:1.45;color:var(--text);
}
.screener-result{
  margin-top:1.2rem;
  padding:1rem 1.1rem;
  border-radius:var(--r-md);
  text-align:center;
  border:1.5px solid var(--border);
  background:var(--raised);
}
.screener-result-empty{font-size:.85rem;color:var(--muted);font-style:italic;border-style:dashed}
.screener-result-low{background:rgba(46,125,50,.08);border-color:var(--teal-l)}
.screener-result-mid{background:rgba(191,106,58,.1);border-color:var(--amber)}
.screener-result-high{background:rgba(220,38,38,.06);border-color:var(--danger)}

/* ── Scroll top ──────────────────────────────────────────── */
.scroll-top-btn{position:absolute;bottom:calc(5.5rem + env(safe-area-inset-bottom));right:.875rem;width:38px;height:38px;background:var(--surface);border:0.5px solid var(--border2);border-radius:50%;box-shadow:var(--sh-sm);font-size:.9rem;color:var(--muted);cursor:pointer;opacity:0;transition:opacity var(--dur-med);display:flex;align-items:center;justify-content:center}
.scroll-top-btn.visible{opacity:1}

/* ── Kategori şeridi ─────────────────────────────────────── */
.cat-scroll{display:flex;gap:.35rem;overflow-x:auto;padding:.5rem .875rem;scrollbar-width:none;-ms-overflow-style:none}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.38rem .8rem;border-radius:var(--r-full);font-size:var(--t-xs);font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid var(--border2);background:var(--surface);color:var(--muted);transition:all var(--dur-fast);touch-action:manipulation}
.cat-chip.sel,.cat-chip.cur{background:var(--teal);color:#fff;border-color:transparent}

/* ── Likert ──────────────────────────────────────────────── */
.likert{display:flex;gap:.35rem;margin:.5rem 0}
.likert-btn{flex:1;padding:.5rem .2rem;border-radius:var(--r-sm);border:1px solid var(--border2);background:var(--surface);font-size:1.1rem;cursor:pointer;transition:all var(--dur-fast);min-height:48px}
.likert-btn.sel{border-color:var(--teal);background:var(--teal-a);transform:scale(1.06)}

/* ── Beceri Köprüsü ──────────────────────────────────────── */
.sb-filters{display:flex;gap:.35rem;overflow-x:auto;padding:.5rem .875rem;scrollbar-width:none}
.sb-filter-btn{padding:.35rem .75rem;border-radius:var(--r-full);font-size:var(--t-xs);font-weight:700;white-space:nowrap;cursor:pointer;border:1px solid var(--border2);background:var(--surface);color:var(--muted);transition:all var(--dur-fast);font-family:inherit}
.sb-filter-btn.active{background:var(--teal);color:#fff;border-color:transparent}
.sb-root{width:100%;padding:.5rem .875rem calc(5rem + env(safe-area-inset-bottom));flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.sb-card{background:var(--surface);border-radius:var(--r-lg);border:0.5px solid var(--border);box-shadow:var(--sh-xs);overflow:hidden;margin-bottom:.6rem;transition:all var(--dur-fast)}
.sb-card:active{transform:scale(.975);opacity:.88}
.sb-card--locked{opacity:.55;pointer-events:none}
.sb-card--done{border-color:var(--border2);background:#EDF8F6}
.sb-card-body{padding:.875rem}
.sb-card-emoji{font-size:1.75rem;margin-bottom:.35rem}
.sb-card-title{font-size:var(--t-xl);font-weight:800;margin-bottom:.18rem;letter-spacing:-.01em}
.sb-card-sub{font-size:var(--t-sm);color:var(--muted)}
.sb-card-bolum{font-size:var(--t-xs);font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:.3rem}
.sb-card-meta{display:flex;align-items:center;gap:.45rem;margin-top:.45rem;flex-wrap:wrap}
.sb-card-sure{font-size:var(--t-xs);color:var(--muted);background:var(--raised);padding:.12rem .4rem;border-radius:99px}
.sb-card-siniflar{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.25rem}
.sb-card-state{margin-left:auto;font-size:var(--t-xs);font-weight:800;padding:.18rem .5rem;border-radius:99px}
.sb-done-badge{font-size:var(--t-xs);background:var(--teal-a);color:var(--teal);padding:.18rem .5rem;border-radius:99px;font-weight:800}
.sb-done-chip{display:inline-flex;align-items:center;gap:.2rem;font-size:var(--t-xs);font-weight:700;color:var(--teal)}
.sb-lock-icon{font-size:1.1rem}
.sb-lock-notice{font-size:var(--t-xs);color:var(--muted);padding:.35rem .55rem;background:var(--raised);border-radius:var(--r-sm);margin-top:.35rem;display:flex;align-items:center;gap:.35rem}
.sb-header{padding:.7rem .875rem .25rem;font-weight:800;font-size:var(--t-xl)}
.sb-subtitle{font-size:var(--t-sm);color:var(--muted);margin-top:.1rem}
.sb-module-list{display:flex;flex-direction:column;gap:.55rem}
.sb-section{margin-bottom:1.1rem}
.sb-title{font-size:var(--t-2xl);font-weight:900;letter-spacing:-.02em}
.sb-progress-bar{height:4px;background:var(--raised);border-radius:99px;overflow:hidden;margin:.35rem 0}
.sb-progress-fill{height:100%;background:linear-gradient(90deg,var(--teal-l),var(--teal));border-radius:99px;transition:width .6s var(--ease)}
.sb-progress-text{font-size:var(--t-xs);color:var(--muted);font-weight:700}
.sb-hedef{font-size:var(--t-md);line-height:1.65;margin:.5rem 0}
.sb-steps{display:flex;flex-direction:column;gap:.55rem}
.sb-step{display:flex;gap:.65rem;align-items:flex-start}
.sb-step-no{width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem}
.sb-step-body{flex:1}
.sb-step-eylem{font-size:var(--t-md);font-weight:700;line-height:1.5}
.sb-step-ipucu{font-size:var(--t-sm);color:var(--muted);margin-top:.2rem;line-height:1.6}
.sb-araclar,.sb-sorular,.sb-dikkatler{margin:.65rem 0}
.sb-d-list,.sb-q-list{display:flex;flex-direction:column;gap:.35rem;margin-top:.3rem}
.sb-sinif-chip{font-size:var(--t-xs);padding:.15rem .45rem;border-radius:99px;background:var(--raised);color:var(--muted);border:0.5px solid var(--border2);font-weight:700}
.sb-tymm{margin:.45rem 0}
.sb-tymm-chips{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.2rem}
.sb-tymm-chip{font-size:var(--t-xs);padding:.15rem .45rem;border-radius:99px;font-weight:800}
.sb-tymm-oo{background:rgba(124,61,159,.1);color:var(--purple)}
.sb-tymm-il{background:rgba(26,127,166,.1);color:var(--blue)}
.sb-tymm-tema{background:rgba(245,158,11,.1);color:var(--amber)}
.sb-actions{display:flex;gap:.5rem;margin-top:.9rem}
.sb-back-btn,.sb-btn,.sb-btn-primary,.sb-btn-ghost{padding:.6rem .9rem;border-radius:var(--r-md);font-weight:700;font-size:var(--t-md);cursor:pointer;font-family:inherit;border:none;transition:all var(--dur-fast)}
.sb-btn-primary{background:var(--teal);color:#fff}
.sb-btn-ghost,.sb-back-btn{background:var(--raised);color:var(--muted);border:1px solid var(--border2)}
.sb-btn{background:var(--raised);color:var(--text)}
.sb-ev-yapimi{font-size:var(--t-sm);color:var(--muted);padding:.375rem .6rem;background:var(--raised);border-radius:var(--r-sm);margin-top:.3rem;line-height:1.6}
.sb-sesalt{font-size:var(--t-sm);line-height:1.6}
.sb-muted{color:var(--muted)}
.sb-not-input{width:100%;background:var(--raised);border:1px solid var(--border2);border-radius:var(--r-sm);padding:.5rem .7rem;font-size:var(--t-sm);color:var(--text);outline:none;font-family:inherit}
.sb-not-input:focus{border-color:var(--teal)}

/* ── SMS ─────────────────────────────────────────────────── */
.sms-header{display:flex;align-items:center;gap:.7rem;padding:.7rem .875rem;border-bottom:0.5px solid var(--border)}
.sms-body{flex:1;overflow-y:auto;padding:.7rem .875rem;display:flex;flex-direction:column;gap:.55rem}
.sms-msg{max-width:80%;padding:.6rem .875rem;border-radius:16px;font-size:var(--t-md);line-height:1.5}
.msg-in{background:var(--raised);border-radius:4px 16px 16px 16px;align-self:flex-start}
.msg-out{background:var(--teal);color:#fff;border-radius:16px 4px 16px 16px;align-self:flex-end}
.msg-bubble{background:var(--raised);border-radius:var(--r-xl);padding:.8rem .9rem}
.msg-time{font-size:var(--t-xs);color:var(--muted);text-align:center;margin:.2rem 0}

/* ── Admin panel ─────────────────────────────────────────── */
.adm-tab{padding:.55rem .9rem;border:none;background:none;color:var(--muted);font-size:var(--t-sm);font-weight:700;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;font-family:inherit;transition:all .15s}
.adm-tab:hover{color:var(--text)}
.adm-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.adm-inp{width:100%;background:var(--raised);border:1px solid var(--border2);border-radius:var(--r-sm);padding:.5rem .7rem;color:var(--text);font-size:var(--t-sm);outline:none;font-family:inherit;margin-top:.2rem}
.adm-inp:focus{border-color:var(--teal)}
.adm-lbl{font-size:var(--t-xs);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.adm-fld{margin-bottom:.6rem}
.adm-btn{padding:.38rem .75rem;border-radius:var(--r-sm);border:none;font-size:var(--t-xs);font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.adm-btn-primary{background:var(--teal);color:#fff}
.adm-btn-ghost{background:var(--raised);color:var(--muted);border:0.5px solid var(--border2)}
.adm-btn-danger{background:rgba(220,38,38,.1);color:var(--danger);border:0.5px solid rgba(220,38,38,.2)}
.adm-btn-success{background:var(--teal-a);color:var(--teal-d)}
.adm-btn-warn{background:var(--amber-a);color:var(--amber)}
.adm-card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-md);padding:.8rem .9rem;margin-bottom:.6rem;transition:background .15s}
.adm-card:hover{background:var(--raised)}
.adm-stat{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--r-md);padding:.7rem .8rem;text-align:center}
.adm-stat-num{font-size:1.35rem;font-weight:800;font-family:var(--ff-mono)}
.adm-stat-lbl{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.1rem}
.adm-tag{display:inline-flex;align-items:center;padding:.1rem .4rem;border-radius:99px;font-size:var(--t-xs);font-weight:700}

/* ── Düzenleme modu ──────────────────────────────────────── */
.edit-bar{display:flex;gap:.3rem;margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--border2)}
.edit-bar-btn{flex:1;padding:.3rem .45rem;border-radius:8px;border:1px solid var(--border2);background:var(--raised);font-size:var(--t-xs);cursor:pointer;font-family:inherit;color:var(--muted);transition:all var(--dur-fast)}
.edit-bar-btn:hover{background:var(--teal-a);border-color:var(--teal);color:var(--teal)}
.edit-bar-del{padding:.3rem .5rem;border-radius:8px;border:1px solid rgba(220,38,38,.25);background:rgba(220,38,38,.05);font-size:var(--t-xs);cursor:pointer;font-family:inherit;color:var(--danger)}