/* odocore — bilesenler (odoorpc gorsel dili) */

/* ---------- kabuk: odoorpc ile birebir ---------- */
.has-sidebar{display:flex;min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:236px;z-index:60;
  display:flex;flex-direction:column;padding:1.25rem .85rem 1rem;color:#fff;
  background:linear-gradient(165deg,#160d1f 0%,#241634 55%,#301545 100%);
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:1px 0 24px rgba(27,18,32,.22);overflow-y:auto}
.shell{flex:1;min-width:0;margin-left:236px;display:flex;flex-direction:column}
.sidebar .brand{font-family:var(--font-heading);font-weight:700;font-size:1.3rem;
  color:#fff;text-decoration:none;letter-spacing:-.03em;padding:.35rem .7rem 1.35rem}
.sidebar .brand span{background:linear-gradient(90deg,#d65a82,#f0a830);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.nav{display:flex;flex-direction:column;gap:.18rem;flex:1}
.nav a{display:flex;align-items:center;gap:.7rem;color:#c5b3d1;text-decoration:none;
  font-weight:500;font-size:.875rem;padding:.5rem .7rem;border-radius:10px;
  transition:var(--transition);position:relative}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a.active{color:#fff;
  background:linear-gradient(100deg,rgba(96,48,120,.75),rgba(192,48,96,.42))}
.nav a.active::before{content:"";position:absolute;left:-.85rem;top:50%;
  transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;
  background:var(--brand-primary-light)}
.ic{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav a.active .ic{opacity:1}

.side-user{border-top:1px solid rgba(255,255,255,.09);padding-top:.7rem;margin-top:.7rem}
.side-user form{margin:0}
.su-link{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;
  border-radius:10px;text-decoration:none;color:#c5b3d1;font-size:.83rem;
  transition:var(--transition)}
.su-link:hover,.su-link.active{background:rgba(255,255,255,.08);color:#fff}
.su-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .role{font-size:.58rem;padding:.12rem .45rem;border-radius:var(--radius-full);
  font-weight:600;background:var(--surface-100);color:var(--ink-700)}
.side-user .role-admin{background:var(--brand-gradient);color:#fff}
.side-user .role-dev{background:rgba(255,255,255,.14);color:#e6dcec}
.su-cikis{display:flex;align-items:center;gap:.7rem;width:100%;background:transparent;
  border:0;color:#8f7d9c;font:inherit;font-size:.83rem;padding:.55rem .7rem;
  border-radius:10px;cursor:pointer;transition:var(--transition)}
.su-cikis:hover{background:rgba(255,255,255,.07);color:#fff}

.topbar{
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-200);
  padding:.8rem var(--space-lg);display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-sm);
  position:sticky;top:0;z-index:40;
}
.content{width:100%;max-width:var(--container);margin:0 auto;
  padding:var(--space-lg) 2rem 4rem}

/* ---------- kartlar ---------- */
.grid{display:grid;gap:1rem}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{
  background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.card__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}
.card__head h2,.card__head h3{margin:0}

/* istatistik kartlari — yuvarlak, sol kenarda marka seridi */
.grid--4 > .card{position:relative;overflow:hidden;
  border-radius:var(--radius-lg);padding:1.05rem 1.2rem}
.grid--4 > .card::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--ink-300);transition:var(--transition)}
.grid--4 > .card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);
  border-color:var(--ink-300)}
.card--accent::before{background:var(--brand-gradient) !important}
.stat__num{font-family:var(--font-heading);font-size:1.75rem;font-weight:700;
  color:var(--ink-900);line-height:1.15;display:block;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.stat__label{font-size:.72rem;color:var(--ink-500);
  text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.eyebrow{font-size:.67rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--brand-primary);font-weight:700;display:block;margin-bottom:.2rem}

/* ---------- tablo ---------- */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.table th{
  text-align:left;padding:.55rem .7rem;background:var(--surface-100);
  color:var(--ink-600);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.68rem;border-bottom:1px solid var(--ink-200);
}
.table th:first-child{border-radius:var(--radius-sm) 0 0 0}
.table th:last-child{border-radius:0 var(--radius-sm) 0 0}
.table td{padding:.6rem .7rem;border-bottom:1px solid var(--surface-100);
  font-variant-numeric:tabular-nums}
.table tbody tr{transition:background var(--transition)}
.table tbody tr:hover{background:var(--surface-50)}
.table tbody tr:last-child td{border-bottom:0}
.table--fixed{table-layout:fixed}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- rozet ---------- */
.badge{display:inline-block;padding:.2rem .58rem;border-radius:var(--radius-full);
  font-size:.71rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  background:var(--surface-100);color:var(--ink-700);border:1px solid var(--ink-200)}
.badge--ok{background:var(--success-bg);color:var(--success);border-color:var(--success-bd)}
.badge--warn{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-bd)}
.badge--err{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.badge--info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.badge--brand{background:var(--brand-gradient);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-brand)}

/* ---------- buton ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border:0;cursor:pointer;height:42px;padding:0 1.05rem;
  border-radius:var(--radius-sm);font-family:var(--font-body);
  font-size:var(--fs-body);font-weight:600;transition:var(--transition);
  line-height:1.2;text-decoration:none;white-space:nowrap;
}
.btn--primary{background:var(--brand-gradient);color:#fff;box-shadow:var(--shadow-brand)}
.btn--primary:hover{color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 26px -8px rgba(192,48,96,.55)}
.btn--ghost{background:var(--white);color:var(--ink-700);border:1px solid var(--ink-300)}
.btn--ghost:hover{border-color:var(--brand-primary);color:var(--brand-primary);
  box-shadow:var(--shadow-sm)}
.btn--sm{height:30px;padding:0 .7rem;font-size:var(--fs-small)}
.btn--danger{background:var(--danger-bg);color:var(--danger);
  border:1px solid var(--danger-bd)}
.btn--danger:hover{background:var(--danger);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- form ---------- */
.field{margin-bottom:var(--space-sm)}
.field label{display:block;font-size:var(--fs-small);font-weight:600;
  color:var(--ink-700);margin-bottom:.3rem}
/* TEK YUKSEKLIK KURALI (tasarim sistemi §4).
   Olculdu 2026-07-28: input 38px, select 39px, button 35px — kayikti.
   height (min-height degil) verilmezse tarayici varsayilanlari ayrisir. */
.input,select.input,textarea.input{
  width:100%;padding:.5rem .8rem;border:1px solid var(--ink-300);
  border-radius:var(--radius-sm);font-family:var(--font-body);
  font-size:var(--fs-body);color:var(--ink-900);background:var(--white);
  transition:border-color var(--transition),box-shadow var(--transition);
  height:42px;line-height:1.4;
}
select.input{appearance:none;padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7d97' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;
  background-size:16px}
textarea.input{height:auto;min-height:84px;padding-top:.6rem}
.input:focus,.input:focus-visible{outline:0;border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(192,48,96,.16)}
.input::placeholder{color:var(--ink-400)}
/* Odak halkasi TUM etkilesimli ogelerde gorunur olmali */
.btn:focus-visible,a:focus-visible,button:focus-visible,
input[type=checkbox]:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand-primary);outline-offset:2px;border-radius:4px}

/* ---------- uyari ---------- */
.alert{padding:.75rem 1rem;border-radius:var(--radius-sm);
  margin-bottom:var(--space-sm);font-size:var(--fs-small);
  border:1px solid;border-left-width:3px}
.alert--danger{background:var(--danger-bg);border-color:var(--danger-bd);
  border-left-color:var(--danger);color:#8f1c30}
.alert--warning{background:var(--warning-bg);border-color:var(--warning-bd);
  border-left-color:var(--warning);color:#7d4907}
.alert--success{background:var(--success-bg);border-color:var(--success-bd);
  border-left-color:var(--success);color:#146046}
.alert--info{background:var(--info-bg);border-color:var(--info-bd);
  border-left-color:var(--brand-purple);color:var(--ink-700)}

.empty{text-align:center;padding:var(--space-xl) var(--space-md);color:var(--ink-500)}
.muted{color:var(--ink-500)}
.mt{margin-top:var(--space-md)}
pre{border-radius:var(--radius-sm)}

/* ---------- giris ekrani ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--space-md);
  background:linear-gradient(165deg,#160d1f 0%,#241634 45%,#3d1b52 100%)}
.login__card{
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:2.25rem;
  width:100%;max-width:400px;
}
.login__brand{text-align:center;margin-bottom:var(--space-md)}
.login__brand h1{font-size:1.6rem;margin-bottom:.2rem;letter-spacing:-.03em}
.login__brand em{font-style:normal;background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.login__brand p{color:var(--ink-500);font-size:var(--fs-small);margin:0}

/* ---------- mobil: odoorpc ile ayni ---------- */
/* --- Gruplu sol menü --- */
.nav{gap:.1rem}
.nav-grup{display:flex;flex-direction:column;gap:.12rem;margin-top:.55rem}
.nav-grup:first-child{margin-top:0}
.nav-baslik{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:transparent;border:0;cursor:pointer;color:#8f7aa0;font:inherit;
  font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:.35rem .7rem .3rem;border-radius:8px;text-align:left}
.nav-baslik:hover{color:#e6dcec}
.nav-baslik:focus-visible{outline:2px solid var(--brand-primary-light);outline-offset:1px}
.nav-ok{width:12px;height:12px;transition:transform .15s ease;opacity:.75}
.nav-grup.kapali .nav-ok{transform:rotate(-90deg)}
.nav-grup.kapali .nav-icerik{display:none}
.nav-grup.kapali.aktif-grup .nav-baslik{color:#fff}
.nav-icerik{display:flex;flex-direction:column;gap:.12rem}
.menu-ac{display:none}
@media(max-width:860px){
  body.has-sidebar .sidebar{position:relative;overflow:visible}
  .sidebar .side-user{margin-left:0}
  .menu-ac{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;background:rgba(255,255,255,.08);
    color:#fff;border:0;border-radius:10px;padding:.42rem .6rem;font:inherit;font-size:.82rem;cursor:pointer}
  .menu-ac span{display:none}
  .sidebar .nav{display:none}
  .sidebar.acik .nav{display:flex;flex-direction:column;gap:.1rem;position:absolute;left:0;right:0;top:100%;
    z-index:70;padding:.6rem .85rem 1rem;max-height:78vh;overflow-y:auto;overflow-x:hidden;
    background:linear-gradient(165deg,#160d1f,#301545);box-shadow:0 18px 30px rgba(27,18,32,.35)}
  .sidebar.acik .nav a{white-space:normal;padding:.55rem .7rem}
  .sidebar.acik .nav a span{display:inline}
}

@media(max-width:860px){
  .has-sidebar{display:block}
  .sidebar{position:static;width:auto;flex-direction:row;align-items:center;
    gap:.5rem;padding:.7rem 1rem;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:linear-gradient(120deg,#160d1f,#301545)}
  .shell{margin-left:0}
  .sidebar .brand{padding:0 .8rem 0 0;font-size:1.15rem}
  .nav{flex-direction:row;overflow-x:auto;gap:.25rem;flex:1}
  .nav a{white-space:nowrap;padding:.42rem .7rem}
  .nav a span{display:none}
  .nav a.active::before{display:none}
  .ic{width:18px;height:18px;flex-basis:18px}
  .side-user{border-top:0;border-left:1px solid rgba(255,255,255,.09);
    padding:0 0 0 .6rem;margin:0;display:flex;align-items:center;gap:.25rem}
  .su-ad,.su-cikis span{display:none}
  .content{padding:var(--space-sm)}
  .topbar{padding:.7rem var(--space-sm)}
  /* Genis tablo mobilde tasmasin — sarmalayici kaydirilsin */
  .card{overflow-x:auto}
  .table{min-width:560px}
}