/* Epilyum ERP ortak arayuz katmani — 11.09.2026 */
:root{
  --ep-brand:#2356d8;
  --ep-brand-strong:#173fae;
  --ep-brand-soft:#edf3ff;
  --ep-navy:#12213a;
  --ep-cyan:#13a8b3;
  --ep-success:#16835d;
  --ep-warning:#c77811;
  --ep-danger:#c43d3d;
  --ep-canvas:#f4f7fb;
  --ep-surface:#ffffff;
  --ep-surface-soft:#f8fafc;
  --ep-text:#182234;
  --ep-muted:#697586;
  --ep-line:#e3e9f2;
  --ep-radius:16px;
  --ep-radius-sm:10px;
  --ep-shadow:0 8px 28px rgba(18,33,58,.055);
  --ep-shadow-hover:0 14px 34px rgba(18,33,58,.095);
}

html{color-scheme:light;scroll-behavior:smooth}
body{
  color:var(--ep-text);
  background:
    radial-gradient(circle at 94% 0,rgba(35,86,216,.075),transparent 27rem),
    linear-gradient(180deg,#f9fbff 0,var(--ep-canvas) 28rem)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit}
button,.btn,a.btn{transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
button:not(:disabled):hover,.btn:not(:disabled):hover,a.btn:hover{transform:translateY(-1px)}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(35,86,216,.17)!important;
  outline-offset:2px;
}

/* Ortak uygulama kabugu */
.side{
  background:linear-gradient(180deg,#fff 0,#f9fbff 100%)!important;
  border-right-color:var(--ep-line)!important;
  box-shadow:10px 0 34px rgba(18,33,58,.04)!important;
}
.brand{color:var(--ep-navy)!important;letter-spacing:-.55px!important}
.brand:after{background:linear-gradient(90deg,var(--ep-brand),var(--ep-cyan))!important}
.nav{border-radius:11px!important;color:#334158!important}
.nav:hover{background:#f0f4fb!important;color:var(--ep-brand)!important}
.nav.active{
  background:linear-gradient(90deg,#e8efff,#f6f8ff)!important;
  color:var(--ep-brand)!important;
  border-color:#d9e4ff!important;
  box-shadow:inset 3px 0 0 var(--ep-brand)!important;
}
.nav-group[open]{background:#f8faff!important;border-color:#edf1f7!important}
.top,.topbar,.head{
  background:rgba(255,255,255,.94)!important;
  border-color:var(--ep-line)!important;
  box-shadow:0 5px 22px rgba(18,33,58,.035);
  backdrop-filter:blur(10px);
}
.title,h1,.page-title,.su-title{color:var(--ep-navy)!important;letter-spacing:-.45px}
.sub,.muted,.subtitle{color:var(--ep-muted)!important}
.content{max-width:1720px;width:100%;margin-inline:auto}

/* Moduller ve kartlar */
.card,.panel,.box,.soft-panel,.kpi,.su-kpi,.pricing-card,.stat-card,.module-card{
  background:var(--ep-surface)!important;
  border-color:var(--ep-line)!important;
  border-radius:var(--ep-radius)!important;
  box-shadow:var(--ep-shadow)!important;
}
a.card:hover,a.module-card:hover,.kpi:hover,.su-kpi:hover{
  border-color:#cfdaf0!important;
  box-shadow:var(--ep-shadow-hover)!important;
}
.section,.section-title,.card-title{
  color:var(--ep-navy)!important;
  letter-spacing:-.15px;
}
.metric,.kvalue,.stat-value{font-variant-numeric:tabular-nums;color:var(--ep-navy)!important}

/* Formlar */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  background:#fff!important;
  color:var(--ep-text)!important;
  border-color:#d8e0eb!important;
  border-radius:var(--ep-radius-sm)!important;
  min-height:41px;
}
textarea{min-height:92px}
input:hover,select:hover,textarea:hover{border-color:#b9c7da!important}
input:focus,select:focus,textarea:focus{
  border-color:#7c9fea!important;
  box-shadow:0 0 0 4px rgba(35,86,216,.09)!important;
  outline:none!important;
}
label{color:#3d4a5f}

/* Buton hiyerarsisi */
.btn,.su-btn,button.btn{
  border-radius:10px!important;
  min-height:39px;
  font-weight:800!important;
}
.btn.blue,.btn-blue,.btn.primary,.su-btn.primary,.save{
  color:#fff!important;
  border-color:var(--ep-brand)!important;
  background:linear-gradient(135deg,var(--ep-brand),var(--ep-brand-strong))!important;
  box-shadow:0 6px 14px rgba(35,86,216,.18);
}
.btn-dark{background:var(--ep-navy)!important;color:#fff!important}
.btn-light,.su-btn.soft{background:#fff!important;color:#31415c!important;border-color:#d8e0eb!important}
.btn-danger{background:#fff1f1!important;color:#a92d2d!important;border-color:#f3cccc!important}

/* Tablolar */
.tablewrap,.table-wrap,.table-container{
  background:#fff;
  border:1px solid var(--ep-line)!important;
  border-radius:var(--ep-radius)!important;
  box-shadow:var(--ep-shadow)!important;
}
table{font-variant-numeric:tabular-nums}
table th{
  background:#f6f8fc!important;
  color:#516078!important;
  border-bottom-color:#dfe6f0!important;
  font-size:11px!important;
  letter-spacing:.025em;
}
table td{border-bottom-color:#edf1f6!important}
table tbody tr{transition:background-color .12s ease}
table tbody tr:hover{background:#f8faff!important}

/* Durumlar ve bilgilendirmeler */
.badge,.pill,.status{border-radius:999px!important}
.note,.info,.message{
  border-radius:12px!important;
  box-shadow:none!important;
}
.success,.ok{background:#ecf8f2!important;color:#126849!important;border-color:#c9eadb!important}
.error,.danger{border-color:#f2cece}

/* Satici ve bagimsiz sayfalar */
.page,.wrap{max-width:1560px}
.page>.topbar,.wrap>.head{border-radius:18px!important}

/* Belirgin Epilyum kurumsal gorunum */
@media (min-width:761px){
  .side{
    background:
      radial-gradient(circle at 25% 0,rgba(47,109,246,.22),transparent 230px),
      linear-gradient(180deg,#14233d 0,#0d182b 100%)!important;
    border-right:0!important;
    box-shadow:12px 0 36px rgba(9,20,38,.14)!important;
  }
  .side .brand{color:#fff!important}
  .side .brand-sub{color:#9eabc0!important}
  .side .nav,.side .nav-group-title{color:#cbd5e4!important}
  .side .nav:hover,.side .nav-group-title:hover{
    color:#fff!important;
    background:rgba(255,255,255,.075)!important;
  }
  .side .nav.active{
    color:#fff!important;
    background:linear-gradient(90deg,rgba(47,109,246,.92),rgba(35,86,216,.64))!important;
    border-color:rgba(255,255,255,.09)!important;
    box-shadow:0 7px 18px rgba(20,67,177,.28)!important;
  }
  .side .nav-group[open]{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.07)!important}
  .side .nav-group[open]>.nav-group-title{color:#8fb2ff!important}
  .side .nav-group-title:after{color:#8492a8!important}
  .side .nav.danger{color:#ffaaa7!important}
}

.top{border-bottom:1px solid #e6ebf3!important;box-shadow:0 6px 24px rgba(18,33,58,.045)!important}
.grid>.card,.ff-grid>.card,.su-kpis>.su-kpi{position:relative;overflow:hidden}
.grid>.card:before,.ff-grid>.card:before,.su-kpis>.su-kpi:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--ep-brand);
}
.grid>.card:nth-child(4n+2):before,.ff-grid>.card:nth-child(4n+2):before,.su-kpis>.su-kpi:nth-child(4n+2):before{background:var(--ep-cyan)}
.grid>.card:nth-child(4n+3):before,.ff-grid>.card:nth-child(4n+3):before,.su-kpis>.su-kpi:nth-child(4n+3):before{background:var(--ep-success)}
.grid>.card:nth-child(4n+4):before,.ff-grid>.card:nth-child(4n+4):before,.su-kpis>.su-kpi:nth-child(4n+4):before{background:var(--ep-warning)}
.section{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:22px!important;
}
.section:before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:3px;
  background:linear-gradient(135deg,var(--ep-brand),var(--ep-cyan));
  box-shadow:0 0 0 4px var(--ep-brand-soft);
}
body>.card:first-of-type,.page>.card:first-of-type,.wrap>.card:first-of-type{border-top:3px solid var(--ep-brand)!important}
.logo{color:var(--ep-brand)!important}
body>.card .logo:after{
  content:"";
  display:block;
  width:46px;
  height:4px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ep-brand),var(--ep-cyan));
}

@media (max-width:900px){
  :root{--ep-radius:13px;--ep-radius-sm:9px}
  .content{padding:14px 12px 80px!important}
  .top,.topbar,.head{padding:13px 14px!important}
  .card,.panel,.box,.soft-panel{padding:14px!important}
  .grid,.ff-grid,.su-kpis{gap:9px!important}
}

@media (max-width:640px){
  body{background:#f5f7fb!important}
  .page,.wrap{width:100%!important;margin:0 auto 72px!important;padding:9px!important}
  .topbar,.head{border-radius:13px!important;margin-bottom:9px!important}
  .card,.panel,.box,.tablewrap,.table-wrap{border-radius:12px!important}
  .title,h1,.page-title,.su-title{font-size:21px!important}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.btn,.su-btn,button.btn{min-height:44px}
  .actions,.top-actions,.su-head-actions{width:100%;gap:7px}
  .actions>.btn,.su-head-actions>.su-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}