:root {
    --bg: #05080f;
    --panel: rgba(255, 255, 255, .06);
    --panel2: rgba(255, 255, 255, .04);
    --border: rgba(255, 255, 255, .10);
    --text: rgba(255, 255, 255, .92);
    --muted: rgba(255, 255, 255, .62);

    --shadow: 0 18px 55px rgba(0, 0, 0, .65);
    --r: 18px;

    --blue: #6ea8fe;
    --mint: #34d399;
    --yellow: #fbbf24;
}

html,
body {
    height: 100%
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    overflow-x: hidden;
}

a{
text-decoration:none !important;
}

a:hover{
text-decoration:none !important;
}

a:focus{
text-decoration:none !important;
}

a:active{
text-decoration:none !important;
}

/* Outer frame */
.frame {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    box-shadow: var(--shadow);
    margin: 18px;
    padding: 14px;
}

/* Glass */
.glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .04));
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
}

.sidebar {
    height: calc(100vh - 36px);
    position: sticky;
    top: 18px;
    padding: 18px 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 16px;
}

.logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(110, 168, 254, .55), rgba(255, 255, 255, .03) 60%),
        radial-gradient(circle at 70% 70%, rgba(52, 211, 153, .35), transparent 55%);
    border: 1px solid rgba(255, 255, 255, .12);
    font-weight: 800;
    letter-spacing: .3px;
}

.brand .title {
    font-weight: 800;
    font-size: 20px;
    line-height: 1
}

.brand .sub {
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px
}

.navitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    color: rgba(255, 255, 255, .80);
    text-decoration: none;
    border: 1px solid transparent;
    transition: .15s ease;
    margin: 4px 0;
}

.navitem i {
    opacity: .9
}

.navitem:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .95);
}

.navitem.active {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .95);
}

.exit {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 18px;
    opacity: .85;
}

.main {
    padding: 12px 10px 18px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.page-title {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .2px;
}

.searchbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    min-width: 420px;
}

.searchbar input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 255, 255, .86);
    font-size: 14px;
}

.chip-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .12);
}

.chip-user .name {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.1
}

.kpi {
    padding: 16px;
    height: 110px;
}

.kpi .label {
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    margin-bottom: 6px;
}

.kpi .value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.kpi .subtxt {
    color: var(--muted);
    font-size: 13px;
    margin-top: 6px;
}

.kpi-unit {
    font-size: 18px;
    color: rgba(255, 255, 255, .72);
    font-weight: 700;
    margin-left: 2px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.pill.green {
    border-color: rgba(52, 211, 153, .28);
    background: rgba(52, 211, 153, .12)
}

.pill.blue {
    border-color: rgba(110, 168, 254, .28);
    background: rgba(110, 168, 254, .12)
}

.pill.yellow {
    border-color: rgba(251, 191, 36, .25);
    background: rgba(251, 191, 36, .12)
}

.pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(52, 211, 153, .95);
    display: inline-block;
}

.progress-mini {
    height: 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    overflow: hidden;
}

.progress-mini>div {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(52, 211, 153, .9), rgba(110, 168, 254, .9), rgba(251, 191, 36, .85));
}

.section-title {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .2px;
}

.dots {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .75);
}

.panel-pad {
    padding: 16px;
}

.msgrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    margin-top: 10px;
}

.who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.who .pic {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08));
    border: 1px solid rgba(255, 255, 255, .12);
}

.pic-img {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .08);
}

.who .meta {
    line-height: 1.1
}

.who .meta .t1 {
    font-weight: 600
}

.who .meta .t2 {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px
}

.when {
    color: var(--muted);
    font-size: 13px;
    min-width: 90px;
    text-align: right
}

.btn-soft {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .86) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.btn-soft:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: rgba(255, 255, 255, .95) !important;
}

.rightStat .label {
    color: rgba(255, 255, 255, .75);
    font-weight: 800
}

.rightStat .big {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .2px
}

.tiny {
    color: var(--muted);
    font-size: 13px
}

.chartBox {
    height: 120px;
    border-radius: 14px;
    background: radial-gradient(circle at 10% 60%, rgba(110, 168, 254, .18), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
    position: relative;
}

.chartLine {
    position: absolute;
    inset: 14px 14px 18px 14px;
    border-radius: 10px;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 60px 100%,
        linear-gradient(to top, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 100% 34px;
    opacity: .65;
}

.chartSvg {
    position: absolute;
    inset: 0;
    opacity: .75;
}

/* ring */
.ring {
    width: 140px;
    height: 140px;
    border-radius: 999px;
    background:
        conic-gradient(rgba(52, 211, 153, .95) 0 266deg, rgba(255, 255, 255, .10) 266deg 360deg);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .10);
}

.ring-inner {
    width: 108px;
    height: 108px;
    border-radius: 999px;
    background: rgba(5, 8, 15, .85);
    border: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    text-align: center;
}

.ring-val {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}

.mini {
    width: 52px;
    height: 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .75);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset;
}

.avatar-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .15);
}

/* responsive */
@media (max-width: 1200px) {
    .searchbar {
        min-width: 320px;
    }
}

@media (max-width: 992px) {
    .sidebar {
        height: auto;
        position: relative;
        top: auto
    }

    .frame {
        margin: 10px
    }

    .searchbar {
        min-width: 0;
        width: 100%;
    }

    .topbar {
        flex-direction: column;
        align-items: stretch
    }

    .chip-user {
        justify-content: space-between
    }

    .exit {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 12px
    }
}

/* sağ alan container */
.msg-right{
  height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* küçük panel bg */
.glass2{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}

/* top header */
.msg-right__top{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.mr-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}

.mr-name{
  font-weight: 800;
  font-size: 18px;
  display:flex;
  align-items:center;
  gap:10px;
}

.mr-badge{
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.22);
  color: rgba(255,255,255,.85);
  letter-spacing:.3px;
}

.mr-sub{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  margin-top: 2px;
}

.mr-iconbtn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.80);
}

/* body scroll */
.msg-right__body{
  flex:1;
  padding: 16px;
  overflow:auto;
}

/* rows */
.mr-row{ display:flex; margin-bottom: 14px; }
.mr-row--right{ justify-content:flex-end; }
.mr-row--left{ justify-content:flex-start; }

/* bubbles */
.mr-bubble{
  max-width: 72%;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  position: relative;
}

.mr-bubble--customer{
  background: rgba(255,255,255,.05);
}

.mr-time{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-align:right;
}

/* AI wrap + dot */
.mr-aiwrap{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.mr-ai-dot{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.22);
  color: rgba(255,255,255,.85);
  margin-top: 6px;
}

/* file card */
.mr-file{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.mr-file-ic{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
}

.mr-file-name{ font-weight: 800; }
.mr-file-sub{ font-size: 12px; color: rgba(255,255,255,.55); margin-top:2px; }
.mr-file-go{ margin-left:auto; color: rgba(255,255,255,.55); }

/* tags row under file */
.mr-tags{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap:wrap;
}

.mr-tag{
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  display:inline-flex;
  gap: 8px;
  align-items:center;
}

.mr-tag--time{
  margin-left:auto;
  color: rgba(255,255,255,.55);
}

/* sections */
.mr-section{
  padding: 14px;
  margin-top: 14px;
}

.mr-section__title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 12px;
}

.mr-minihead{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* suggestion card */
.mr-suggest{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.mr-suggest-ic{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(251,191,36,.14);
  border: 1px solid rgba(251,191,36,.22);
  color: rgba(255,255,255,.85);
  font-weight: 900;
}

.mr-suggest-title{ font-weight: 900; }
.mr-suggest-sub{ font-size: 12px; color: rgba(255,255,255,.55); margin-top:2px; }
.mr-suggest-go{ margin-left:auto; color: rgba(255,255,255,.55); }

/* file line */
.mr-fileline{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

/* bottom input */
.msg-right__bottom{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
}

.mr-chips{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.mr-chip{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
}

.mr-inputbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.mr-plus, .mr-mic{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.80);
}

.mr-input{
  flex:1;
  border:0;
  outline:0;
  background: transparent;
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

.ml-left{
  height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* üst */
.ml-top{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ml-dd{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(52,211,153,.12);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 13px;
}

.ml-topsearch{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  min-width: 140px;
}
.ml-topsearch input{
  width:70px;
  border:0; outline:0;
  background: transparent;
  color: rgba(255,255,255,.80);
  font-weight: 700;
}

.ml-searchrow{
  display:flex;
  gap: 10px;
  align-items:center;
}

.ml-search{
  flex:1;
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ml-search input{
  flex:1;
  border:0; outline:0;
  background: transparent;
  color: rgba(255,255,255,.80);
  font-weight: 700;
}
.ml-filter{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  font-weight: 800;
  font-size: 13px;
}

.ml-pills{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.ml-pill{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.ml-pill-teal{
  background: rgba(110,168,254,.12);
  border-color: rgba(110,168,254,.22);
}
.ml-pill-dark{
  background: rgba(255,255,255,.04);
}

/* liste scroll */
.ml-list{
  flex:1;
  overflow:auto;
  padding: 10px 8px 10px;
}

/* item */
.ml-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
}
.ml-item:hover{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}
.ml-item.active{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* avatar + online dot */
.ml-ava{
  position:relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.ml-ava img{
  width:44px; height:44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
.ml-dot{
  position:absolute;
  left: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(52,211,153,.95);
  border: 2px solid rgba(5,8,15,.95);
}

/* middle */
.ml-mid{
  flex:1;
  min-width: 0;
}
.ml-name{
  font-weight: 900;
  font-size: 15px;
  line-height: 1.1;
}
.ml-sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* right */
.ml-right{
  text-align:right;
  min-width: 90px;
}
.ml-time{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.ml-ic{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:inline-grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
}
.ml-ic-plus{
  background: rgba(52,211,153,.12);
  border-color: rgba(52,211,153,.22);
}

/* alt bar */
.ml-bottom{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ml-bottomsearch{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ml-bottomsearch input{
  flex:1;
  border:0; outline:0;
  background: transparent;
  color: rgba(255,255,255,.80);
  font-weight: 800;
}
/* topbar profil */
.avatar-img{
  width: 32px; height: 32px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}

/* layout */
.msg-layout{
  display:flex;
  gap: 14px;
  height: calc(100vh - 170px); /* topbar dahil hissiyat */
}

/* SOL PANEL */
.ml-left{
  width: 380px;
  min-width: 360px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.glass2{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}

/* üst */
.ml-top{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ml-dd{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(52,211,153,.12);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 13px;
}
.ml-topsearch{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ml-topsearch input{
  width: 52px;
  border:0; outline:0;
  background: transparent;
  color: rgba(255,255,255,.80);
  font-weight: 800;
}

.ml-searchrow{ display:flex; gap:10px; align-items:center; }
.ml-search{
  flex:1;
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ml-search input{
  flex:1;
  border:0; outline:0;
  background: transparent;
  color: rgba(255,255,255,.80);
  font-weight: 700;
}
.ml-filter{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  font-weight: 800;
  font-size: 13px;
}

.ml-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.ml-pill{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.ml-pill-teal{ background: rgba(110,168,254,.12); border-color: rgba(110,168,254,.22); }
.ml-pill-dark{ background: rgba(255,255,255,.04); }

/* liste */
.ml-list{
  flex:1;
  overflow:auto;
  padding: 10px 8px 10px;
}
.ml-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
}
.ml-item:hover{ background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
.ml-item.active{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

.ml-ava{ position:relative; width:44px; height:44px; flex:0 0 44px; }
.ml-ava img{
  width:44px; height:44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
.ml-dot{
  position:absolute;
  left: 2px; bottom: 2px;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(52,211,153,.95);
  border: 2px solid rgba(5,8,15,.95);
}

.ml-mid{ flex:1; min-width:0; }
.ml-name{ font-weight: 900; font-size: 15px; line-height:1.1; }
.ml-sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.ml-right{ text-align:right; min-width: 90px; }
.ml-time{ font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.ml-ic{
  width: 28px; height: 28px;
  border-radius: 10px;
  display:inline-grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
}
.ml-ic-plus{ background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.22); }

/* alt */
.ml-bottom{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ml-bottomsearch{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ml-bottomsearch input{
  flex:1;
  border:0; outline:0;
  background: transparent;
  color: rgba(255,255,255,.80);
  font-weight: 800;
}
.ml-replybar{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.ml-plus, .ml-send{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.80);
}
.ml-replyph{
  flex:1;
  color: rgba(255,255,255,.55);
  font-weight: 800;
}

/* SAĞ PANEL */
.mr-right{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.mr-top{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mr-avatar{
  width: 40px; height: 40px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}
.mr-name{
  font-weight: 900;
  font-size: 18px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.mr-badge{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.22);
  color: rgba(255,255,255,.85);
}
.mr-sub{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  margin-top: 2px;
}
.mr-iconbtn{
  width: 36px; height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.80);
}

/* chat body */
.mr-body{
  flex:1;
  padding: 16px;
  overflow:auto;
}
.mr-row{ display:flex; margin-bottom: 14px; }
.mr-row--right{ justify-content:flex-end; }
.mr-row--left{ justify-content:flex-start; }

.mr-bubble{
  max-width: 72%;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.mr-bubble--customer{ background: rgba(255,255,255,.05); }
.mr-time{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-align:right;
}

/* AI bubble left */
.mr-aiwrap{ display:flex; align-items:flex-start; gap:10px; }
.mr-ai-dot{
  width: 30px; height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(52,211,153,.14);
  border: 1px solid rgba(52,211,153,.22);
  color: rgba(255,255,255,.85);
  margin-top: 6px;
}

/* file card */
.mr-file{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.mr-file-ic{
  width: 40px; height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
}
.mr-file-name{ font-weight: 900; }
.mr-file-sub{ font-size: 12px; color: rgba(255,255,255,.55); margin-top:2px; }
.mr-file-go{ margin-left:auto; color: rgba(255,255,255,.55); }

.mr-tags{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap:wrap;
}
.mr-tag{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  display:inline-flex;
  gap: 8px;
  align-items:center;
}
.mr-tag--time{ margin-left:auto; color: rgba(255,255,255,.55); }

/* sections */
.mr-section{ padding: 14px; margin-top: 14px; }
.mr-section__title{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.mr-info{
  width: 18px; height: 18px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  font-size: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
}
.mr-minihead{ font-size: 12px; color: rgba(255,255,255,.55); }

.mr-suggest{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.mr-suggest-ic{
  width: 26px; height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(251,191,36,.14);
  border: 1px solid rgba(251,191,36,.22);
  color: rgba(255,255,255,.85);
  font-weight: 900;
}
.mr-suggest-title{ font-weight: 900; }
.mr-suggest-sub{ font-size: 12px; color: rgba(255,255,255,.55); margin-top:2px; }
.mr-suggest-go{ margin-left:auto; color: rgba(255,255,255,.55); }

.mr-fileline{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

/* bottom */
.mr-bottom{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
}
.mr-chips{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.mr-chip{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
}

.mr-inputbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.mr-input{
  flex:1;
  border:0; outline:0;
  background: transparent;
  color: rgba(255,255,255,.86);
  font-weight: 900;
}
.mr-mic{
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.80);
}

/* responsive */
@media (max-width: 1200px){
  .ml-left{ width: 340px; min-width: 320px; }
}
@media (max-width: 992px){
  .msg-layout{ flex-direction:column; height:auto; }
  .ml-left{ width:100%; min-width:0; }
}
/* TOPBAR avatar */
.avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .14);
}

/* EKRAN LAYOUT: alt hizaları eşitleyen ana yapı */
.wa-layout {
    display: flex;
    gap: 14px;
    height: calc(100vh - 110px);
    /* topbar dahil düzgün otursun */
}

.wa-ic {
    margin-left: auto;
}

/* SOL */
.wa-left {
    width: 410px;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* SAĞ */
.wa-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* SOL ÜST */
.wa-left__top {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.wa-dd {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(52, 211, 153, .12);
    color: rgba(255, 255, 255, .86);
    font-weight: 500;
    font-size: 13px;
}

.wa-miniSearch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    min-width: 140px;
}

.wa-miniSearch input {
    width: 60px;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-weight: 900;
}

.wa-searchRow {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wa-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}

.wa-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 255, 255, .80);
    font-weight: 600;
}

.wa-filter {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .80);
    font-weight: 600;
    font-size: 13px;
}

.wa-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wa-pill {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wa-pill--blue {
    background: rgba(110, 168, 254, .12);
    border-color: rgba(110, 168, 254, .22);
}

/* SOL LİSTE: sadece burası scroll */
.wa-left__list {
    flex: 1;
    overflow: auto;
    padding: 10px 8px;
}

.wa-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 16px;
    border: 1px solid transparent;
}

.wa-item:hover {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .06);
}

.wa-item.active {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .10);
}

.wa-ava {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.wa-ava img {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .14);
}

.wa-dot {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(52, 211, 153, .95);
    border: 2px solid rgba(5, 8, 15, .95);
}

.wa-mid {
    flex: 1;
    min-width: 0;
}

.wa-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.1;
}

.wa-sub {
    margin-top: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.wa-right {
    text-align: right;
    min-width: 92px;
}

.wa-time {
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 6px;
}

.wa-ic {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .70);
}

.wa-ic--plus {
    background: rgba(52, 211, 153, .12);
    border-color: rgba(52, 211, 153, .22);
}

/* SOL ALT: SADECE arama */
.wa-left__bottom {
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.wa-bottomSearch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}

.wa-bottomSearch input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 255, 255, .80);
    font-weight: 900;
}

/* SAĞ ÜST */
.wa-right__top {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wr-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .14);
}

.wr-name {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wr-badge {
    font-size: 11px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(52, 211, 153, .14);
    border: 1px solid rgba(52, 211, 153, .22);
    color: rgba(255, 255, 255, .85);
}

.wr-sub {
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    margin-top: 2px;
}

.wr-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .80);
}

/* SAĞ ORTA: sadece burası scroll */
.wa-right__body {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

/* Chat bubbles */
.wr-row {
    display: flex;
    margin-bottom: 14px;
}

.wr-row--right {
    justify-content: flex-end;
}

.wr-row--left {
    justify-content: flex-start;
}

.wr-bubble {
    max-width: 72%;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
}

.wr-bubble--customer {
    background: rgba(255, 255, 255, .05);
}

.wr-time {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    text-align: right;
}

.wr-aiwrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.wr-aiDot {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(52, 211, 153, .14);
    border: 1px solid rgba(52, 211, 153, .22);
    color: rgba(255, 255, 255, .85);
    margin-top: 6px;
}

.wr-file {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

.wr-fileIc {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
}

.wr-fileName {
    font-weight: 600;
}

.wr-fileSub {
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    margin-top: 2px;
}

.wr-fileGo {
    margin-left: auto;
    color: rgba(255, 255, 255, .55);
}

.wr-tags {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.wr-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* SAĞ ALT: chip + input */
.wa-right__bottom {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .20);
}

.wr-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.wr-chip {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .80);
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 12px;
}

.wr-inputbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
}

.wr-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 255, 255, .86);
    font-weight: 900;
}

.wr-mic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .80);
}

/* responsive */
@media (max-width: 1200px) {
    .wa-left {
        width: 360px;
        min-width: 340px;
    }
}

@media (max-width: 992px) {
    .wa-layout {
        flex-direction: column;
        height: auto;
    }

    .wa-left {
        width: 100%;
        min-width: 0;
    }
}

.ai-page {
  padding-top: 4px;
}

.ai-minirow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 12px;
}

.ai-pill {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .86);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.ai-pill--green {
  background: rgba(52, 211, 153, .12);
  border-color: rgba(52, 211, 153, .22);
}

.ai-dotline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-greenDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(52, 211, 153, .95);
  box-shadow: 0 0 0 2px rgba(5, 8, 15, .85);
}

.ai-minitext {
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  font-size: 13px;
}

.ai-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 20px;
  min-height: 210px;
  overflow: hidden;
  position: relative;
}

.ai-hero__left {
  max-width: 540px;
}

.ai-h1 {
  font-weight: 700;
  font-size: 36px;
  margin: 6px 0 6px;
  letter-spacing: .2px;
}

.ai-sub {
  color: rgba(255, 255, 255, .62);
  font-weight: 400;
  font-size:14px;
  line-height: 1.45;
  margin: 0 0 14px;
}

.ai-btn {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .86);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ai-btn--ghost {
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  font-weight: 500;
}

.ai-btn:hover {
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .95);
}

.ai-hero__right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.ai-robot {
  width: 260px;
  max-width: 100%;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .55));
}

/* kartlar */
.ai-card {
  padding: 16px;
}

.ai-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ai-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
}

.ai-ic {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .86);
}

.ai-ic--yellow {
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .22);
}

.ai-ic--teal {
  background: rgba(110, 168, 254, .10);
  border-color: rgba(110, 168, 254, .20);
}

.ai-iconbtn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .78);
}

.ai-chip {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  font-size: 12px;
}

/* list */
.ai-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

.ai-li__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-li__name {
  font-weight: 600;
  font-size:14px;
}

.ai-li__right {
  display: flex;
  gap: 14px;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  font-size: 12px;
}

.ai-li__meta {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* bullets */
.ai-bullet {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.ai-bullet--yellow {
  background: rgba(251, 191, 36, .95);
}

.ai-bullet--green {
  background: rgba(52, 211, 153, .95);
}

/* suggestions */
.ai-suggest {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-sug {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

.ai-sug__left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ai-sug__name {
  font-weight: 600;
}

.ai-sug__sub {
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  font-size: 12px;
  margin-top: 2px;
}

.ai-sug__right {
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  font-size: 12px;
}

/* file row */
.ai-fileRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

.ai-fileIc {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .80);
}

.ai-fileMid {
  flex: 1;
  min-width: 0;
}

.ai-fileName {
  font-weight: 600;
}

.ai-fileSub {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-fileRight {
  color: rgba(255, 255, 255, .55);
  font-weight: 500;
  font-size: 12px;
}

/* pool */
.ai-poolHead {
  margin-bottom: 8px;
}

.ai-poolCount {
  color: rgba(255, 255, 255, .62);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ai-pool {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-poolRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

.ai-poolName {
  font-weight: 600;
  flex: 1;
}

.ai-poolNum {
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
}

.settings-wrap {
  padding: 30px 40px;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 30px;
}

/* grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* card */
.set-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  transition: all .25s ease;
  min-height: 170px;
}

.set-card:hover {
  border-color: rgba(110, 168, 254, .4);
  background: rgba(110, 168, 254, .05);
}

.set-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

.set-icon.whatsapp {
  background: rgba(37, 211, 102, .15);
  color: #25D366;
}

.set-icon.circle {
  background: radial-gradient(circle at center, #6ea8fe, transparent 70%);
}

.set-body h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.set-body p {
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  margin: 0;
}

.set-btn {
  position: absolute;
  right: 22px;
  bottom: 20px;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  transition: .2s;
}

.set-btn:hover {
  background: rgba(110, 168, 254, .25);
  border-color: rgba(110, 168, 254, .5);
}

/* settings.css */
.settings-wrap {
  padding: 30px 40px;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 30px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.set-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 26px;
  position: relative;
  transition: all .25s ease;
  min-height: 170px;
}

.set-card:hover {
  border-color: rgba(110, 168, 254, .4);
  background: rgba(110, 168, 254, .05);
}

.set-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.set-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 0;
  flex: 0 0 46px;
}

.set-icon.whatsapp {
  background: rgba(37, 211, 102, .15);
  color: #25D366;
}

.set-icon.circle {
  background: radial-gradient(circle at 35% 35%, rgba(110, 168, 254, .9), rgba(110, 168, 254, .08) 60%, transparent 70%);
  border: 1px solid rgba(110, 168, 254, .20);
}

.set-text h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.set-text p {
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  margin: 0;
  line-height: 1.35;
}

.set-btn {
  position: absolute;
  right: 22px;
  bottom: 20px;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  transition: .2s;
}

.set-btn:hover {
  background: rgba(110, 168, 254, .25);
  border-color: rgba(110, 168, 254, .5);
}

/* responsive (istersen kaldır) */
@media (max-width: 1200px) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.pr-page{ padding: 18px 26px; }

.pr-head{ margin-bottom: 14px; }
.pr-title{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 6px;
}
.pr-sub{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-weight: 500;
  max-width: 900px;
}

.pr-billingToggle{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 14px 0 18px;
}
.pr-tx{
  color: rgba(255,255,255,.62);
  font-weight: 600;
}
.pr-tx--active{ color: rgba(255,255,255,.88); }

.pr-save{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.22);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 12px;
}

.pr-switch{ position:relative; width: 54px; height: 28px; display:inline-block; }
.pr-switch input{ display:none; }
.pr-slider{
  position:absolute; inset:0;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.pr-slider:before{
  content:"";
  position:absolute;
  width: 22px; height: 22px;
  border-radius: 999px;
  left: 3px; top: 3px;
  background: rgba(255,255,255,.85);
}
.pr-switch input:checked + .pr-slider:before{ transform: translateX(26px); }
.pr-switch input:checked + .pr-slider{
  background: rgba(52,211,153,.18);
  border-color: rgba(52,211,153,.26);
}

/* grid */
.pr-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pr-col{ display:flex; flex-direction:column; gap: 16px; }

.pr-card{ padding: 18px; }
.pr-card-padTop{ padding-top: 22px; }
.pr-cardTitle{
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}
.pr-cardTitle-lg{ font-size: 20px; }

.pr-muted{ color: rgba(255,255,255,.62); font-weight: 400; }
.pr-muted-sm{ font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55); }

.pr-cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.pr-badge{
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-weight: 600;
  font-size:13px;
  letter-spacing: .6px;
}

.pr-priceRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin-top: 2px;
}
.pr-price{
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}
.pr-price span{
  font-size: 16px;
  color: rgba(255,255,255,.60);
  font-weight: 600;
  margin-left: 6px;
}
.pr-tag{
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.22);
  color: rgba(255,255,255,.86);
  font-weight: 600;
  font-size: 12px;
}

.pr-line{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

.pr-feats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.pr-feats li{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.80);
  font-weight: 600;
}
.pr-feats i{
  color: rgba(52,211,153,.85);
}

.pr-actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}

.pr-btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
}
.pr-btn-ghost{
  background: rgba(255,255,255,.04);
}
.pr-btn-primary{
  background: rgba(110,168,254,.14);
  border-color: rgba(110,168,254,.26);
}

.pr-billRow{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.pr-billItem{
  flex:1;
  min-width: 180px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.pr-billStrong{
  margin-top: 4px;
  font-weight: 600;
  color: rgba(255,255,255,.86);
}

/* usage */
.pr-usage .pr-actions{ justify-content:flex-end; }
.pr-usageTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.pr-usageBig{
  font-size: 30px;
  font-weight: 700;
  margin-top: 6px;
}
.pr-usageBig span{
  font-size: 16px;
  color: rgba(255,255,255,.62);
  font-weight: 900;
}

/* gauge (basit ama görseldeki gibi) */
.pr-gauge{
  width: 170px; height: 120px;
  position: relative;
  margin-top: 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.pr-gaugeArc{
  position:absolute;
  width: 220px; height: 220px;
  left: -26px; top: -120px;
  border-radius: 999px;
  border: 16px solid rgba(255,255,255,.08);
  border-right-color: rgba(52,211,153,.40);
  border-top-color: rgba(52,211,153,.22);
}
.pr-gaugeNeedle{
  position:absolute;
  width: 3px; height: 78px;
  left: 84px; top: 32px;
  background: rgba(255,255,255,.72);
  border-radius: 10px;
  transform-origin: bottom center;
  transform: rotate(35deg);
}
.pr-gaugeDot{
  position:absolute;
  width: 10px; height: 10px;
  border-radius: 999px;
  left: 80px; top: 102px;
  background: rgba(255,255,255,.85);
}

/* support card */
.pr-support{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap: 14px;
  min-height: 170px;
}
.pr-supportLeft{ flex:1; }
.pr-supportRight{
  width: 220px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
.pr-robot{
  width: 210px;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.55));
}

/* portal */
.pr-portal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 18px;
}
.pr-portalLeft{
  display:flex;
  align-items:center;
  gap: 12px;
}
.pr-portalIc{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
}

/* responsive */
@media (max-width: 1200px){
  .pr-grid{ grid-template-columns: 1fr; }
  .pr-supportRight{ width: 180px; }
  .pr-robot{ width: 180px; }
}

.raporlar{
padding:30px;
color:#fff;
}

.rapor-header{
background:#15181f;
padding:25px;
border-radius:12px;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.rapor-header p{
color:#aaa;
margin-top:5px;
}

.rapor-img{
height:100px;
}

.rapor-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
}

.card{
background:#15181f;
border-radius:12px;
padding:20px;
}

.big{
height:260px;
}

.card h1{
font-size:22px;
margin:10px 0;
}

.small{
color:#888;
font-size:13px;
}

.card-top{
display:flex;
justify-content:space-between;
color:#bbb;
}

.topic{
display:flex;
font-size: 12px;
justify-content:space-between;
padding:10px;
border-radius:6px;
background:#2a2a2a;
margin-top:10px;
}

.center{
display:flex;
justify-content:space-between;
align-items:center;
}

canvas{
margin-top:15px;
}

.raporlar,
.raporlar *{
  color: #fff;
}

.rapor-header h2,
.card h1,
.card h3,
.card span,
.card p,
.topic span,
.topic b{
  color: #fff !important;
}

.small{
  color: rgba(255,255,255,.65) !important;
}

.topic{
  color: #fff;
  background: #2a2a2a;
}

canvas{
  width: 100% !important;
  height: 160px !important;
  display: block;
}

.card.big{
height:400px;
position:relative;
overflow:hidden;
}

.card.big canvas{
position:absolute;
left:0;
bottom:0;
width:100% !important;
height:240px !important;
}

.support-page{
  padding: 24px;
  color: #fff;
}

.support-hero{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.support-hero-left h2{
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.support-hero-left p{
  margin: 0;
  color: rgba(255,255,255,.65);
  font-size: 15px;
}

.support-hero-right img{
  max-height: 100px;
  width: auto;
  object-fit: contain;
}

.support-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}

.support-card{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
}

.support-icon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #fff;
  font-size: 15px;
}

.support-card h4{
  font-size: 22px;
  margin: 0 0 10px;
  font-weight: 600;
}

.support-card p{
  margin: 0 0 18px;
  color: rgba(255,255,255,.65);
  font-size: 14px;
  line-height: 1.5;
}

.support-btn{
  margin-top: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.support-btn:hover{
  color: #fff;
  background: rgba(255,255,255,.09);
}

.faq-wrapper{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px;
}

.faq-wrapper h3{
  font-size: 24px;
  margin: 0 0 18px;
  font-weight: 600;
}

.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-item{
  background: transparent;
  border: none;
  margin-bottom: 12px;
}

.accordion-button{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 500;
}

.accordion-button:not(.collapsed){
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

.accordion-button::after{
  filter: brightness(0) invert(1);
}

.accordion-body{
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.06);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 16px 18px;
  margin-top: -4px;
}

/* responsive */
@media (max-width: 992px){
  .support-cards{
    grid-template-columns: 1fr;
  }

  .support-hero{
    flex-direction: column;
    align-items: flex-start;
  }

  .support-hero-right{
    align-self: flex-end;
  }
}

.company-settings-page{
  padding: 14px;
}

.company-page-title{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 18px;
}

.company-grid{
  display: grid;
  grid-template-columns: 225px 1fr;
  gap: 20px;
  align-items: start;
}

.company-card{
  background: #2b2f36;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
}

/* SOL ÜST LOGO */
.company-logo-card{
  text-align: center;
  min-height: 150px;
}

.company-logo-box{
  width: 78px;
  height: 78px;
  margin: 0 auto 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.02);
}

.company-logo-box img{
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}

.company-logo-title{
  color: #fff;
  font-size: 15px;
  margin-bottom: 14px;
}

/* Butonlar */
.company-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: #3a3f47;
  color: #fff;
  text-decoration: none !important;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.08);
}

.company-btn:hover{
  color: #fff;
  text-decoration: none !important;
  background: #444a53;
}

.company-btn-center{
  min-width: 140px;
}

.company-mini-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #3a3f47;
  color: #fff;
  text-decoration: none !important;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.08);
}

.company-mini-btn:hover{
  color: #fff;
  text-decoration: none !important;
}

/* Sağ üst */
.company-info-card{
  min-height: 150px;
}

.company-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.company-form-group{
  margin-bottom: 16px;
}

.company-form-group.full{
  width: 100%;
}

.company-form-group label{
  display: block;
  color: #d7d7d7;
  font-size: 12px;
  margin-bottom: 8px;
}

.company-form-group input,
.company-form-group select{
  width: 100%;
  height: 38px;
  border: none;
  outline: none;
  background: #3a3f47;
  color: #fff;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
}

.company-select-wrap{
  position: relative;
}

.company-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Alt kart başlık */
.company-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.company-card h3{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 14px;
}

.company-card-head h3{
  margin: 0;
}

/* Sol alt adresler */
.company-address-card{
  min-height: 250px;
}

.company-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-list-item{
  height: 40px;
  background: #3a3f47;
  border-radius: 6px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.company-list-left{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eaeaea;
  font-size: 13px;
}

.company-list-left i{
  font-size: 12px;
  opacity: .85;
}

.company-edit-btn{
  color: #fff;
  text-decoration: none !important;
  font-size: 14px;
  opacity: .85;
}

.company-edit-btn:hover{
  color: #fff;
  text-decoration: none !important;
  opacity: 1;
}

/* Sağ alt sosyal */
.company-social-card{
  min-height: 250px;
}

.company-social-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-social-item{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
}

.company-social-icon{
  width: 42px;
  height: 38px;
  border-radius: 6px;
  background: #3a3f47;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.company-social-item input{
  width: 100%;
  height: 38px;
  border: none;
  outline: none;
  background: #3a3f47;
  color: #fff;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 992px){
  .company-grid{
    grid-template-columns: 1fr;
  }

  .company-form-row{
    grid-template-columns: 1fr;
  }
}

.user-manage-page{
  padding: 14px;
}

/* Header */
.user-page-header{
display:flex;
align-items:center;
justify-content:space-between;
background:#15181f;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:18px 20px;
margin-bottom:22px;
}

.user-page-header{
display:flex;
align-items:center;
justify-content:space-between;
background:#15181f;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:18px 20px;
margin-bottom:22px;
}

.user-back-btn{
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 16px;
}

.user-back-btn:hover{
  color: #fff;
  background: #444a53;
}

.user-page-header h2{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
}

.user-page-header p{
  color: rgba(255,255,255,.65);
  font-size: 14px;
  margin: 0;
}

/* Stat cards */
.user-stats-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 22px;
}

.user-stat-card{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 92px;
}

.user-stat-title{
  display: block;
  color: #e6e6e6;
  font-size: 14px;
  margin-bottom: 10px;
}

.user-stat-card strong{
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}

/* Table card */
.user-table-card{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
}

/* Top bar */
.user-table-top{
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.user-search-box{
  flex: 1;
  position: relative;
}

.user-header-left{
display:flex;
align-items:center;
gap:14px;
}

.user-search-box input{
  width: 100%;
  height: 42px;
  background: #15181f;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 0 42px 0 14px;
  outline: none;
}

.user-search-box input::placeholder{
  color: rgba(255,255,255,.45);
}

.user-search-box i{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.6);
  font-size: 15px;
}

.user-filter-box{
  width: 170px;
}

.user-filter-box select{
  width: 100%;
  height: 42px;
  background: #15181f;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  padding: 0 14px;
  outline: none;
}

/* Table */
.user-table-wrap{
  width: 100%;
}

.user-table{
  width: 100%;
  border-collapse: collapse;
}

.user-table thead th{
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.user-table tbody td{
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
  font-size: 14px;
  vertical-align: middle;
}

.user-name-box{
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-radio{
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: 50%;
  display: inline-block;
}

.user-contact{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.user-contact span{
  color: rgba(255,255,255,.82);
  font-size: 12px;
  line-height: 1.3;
}

.user-action{
  text-align: right;
}

.user-action a{
  color: #fff;
  text-decoration: none !important;
  font-size: 15px;
  opacity: .85;
}

.user-action a:hover{
  color: #fff;
  opacity: 1;
}

/* Responsive */
@media (max-width: 992px){
  .user-stats-row{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .user-table-top{
    flex-direction: column;
  }

  .user-filter-box{
    width: 100%;
  }

  .user-table{
    min-width: 700px;
  }

  .user-table-wrap{
    overflow-x: auto;
  }
}

.user-add-page{
  padding: 14px;
}

/* üst alan */
.user-add-hero{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 26px;
}

.user-add-hero-left{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.user-add-back{
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none !important;
  font-size: 18px;
  margin-top: 2px;
}

.user-add-back:hover{
  color: #fff;
}

.user-add-hero h2{
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
}

.user-add-hero p{
  color: rgba(255,255,255,.60);
  font-size: 14px;
  margin: 0;
}

/* form kartı */
.user-add-card{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 26px 18px 140px;
  min-height: 370px;
}

/* grid */
.user-add-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px 40px;
}

.user-form-group{
  display: flex;
  flex-direction: column;
}

.user-form-group-wide{
  grid-column: span 2;
}

.user-form-group label{
  color: #f1f1f1;
  font-size: 13px;
  margin-bottom: 9px;
  font-weight: 500;
}

.user-form-group label span{
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 400;
}

/* inputlar */
.user-input,
.user-select{
  width: 100%;
  height: 50px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.12);
  background: #232730;
  color: #fff;
  font-size: 13px;
  padding: 0 10px;
  outline: none;
}

.user-input:focus,
.user-select:focus{
  border-color: rgba(255,255,255,.22);
}

.user-select{
  cursor: pointer;
}

/* buton */
.user-add-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.user-save-btn{
  height: 32px;
  padding: 0 16px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.08);
  background: #3a3f47;
  color: #fff;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.user-save-btn:hover{
  background: #464c56;
}

/* responsive */
@media (max-width: 992px){
  .user-add-grid{
    grid-template-columns: 1fr;
  }

  .user-form-group-wide{
    grid-column: span 1;
  }

  .user-add-card{
    padding-bottom: 30px;
    min-height: auto;
  }
}

.security-page{
  padding: 14px;
}

/* üst alan */
.security-hero{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 24px;
}

.security-hero-left{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.security-back-btn{
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none !important;
  font-size: 18px;
  margin-top: 3px;
}

.security-back-btn:hover{
  color: #fff;
}

.security-hero h2{
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.security-hero p{
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin: 0;
}

/* kart */
.security-card{
  background: #15181f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 26px 22px;
  margin-bottom: 22px;
}

.security-section{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.security-icon-box{
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  background: rgba(255,255,255,.02);
}

.security-content{
  flex: 1;
}

.security-content h3{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 16px;
}

/* form */
.security-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 20px;
}

.security-form-group input{
  width: 100%;
  height: 50px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  background: #232730;
  color: #fff;
  font-size: 11px;
  padding: 0 10px;
  outline: none;
}

.security-form-group input::placeholder{
  color: rgba(255,255,255,.48);
}

.security-actions{
  display: flex;
  justify-content: flex-end;
}

.security-btn{
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 7px;
  background: #3d424a;
  color: #fff;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
}

.security-btn:hover{
  background: #4a4f58;
}

/* switch */
.security-switch-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.security-switch{
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}

.security-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.security-slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #3e434b;
  border-radius: 20px;
  transition: .2s;
}

.security-slider:before{
  content: "";
  position: absolute;
  height: 12px;
  width: 12px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .2s;
}

.security-switch input:checked + .security-slider{
  background-color: #6b7280;
}

.security-switch input:checked + .security-slider:before{
  transform: translateX(16px);
}

.security-switch-label{
  color: rgba(255,255,255,.78);
  font-size: 11px;
}

.security-note{
  color: rgba(255,255,255,.42);
  font-size: 10px;
  margin: 0;
}

/* responsive */
@media (max-width: 992px){
  .security-form-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .security-section{
    flex-direction: column;
  }
}

.wa-settings-page{
padding:14px;
}


/* HERO */

.wa-hero{

background:#15181f;
border-radius:18px;
padding:22px;
margin-bottom:22px;

border:1px solid rgba(255,255,255,0.08);

}

.wa-hero-left{
display:flex;
gap:12px;
align-items:flex-start;
}

.wa-back{
color:white;
text-decoration:none;
font-size:20px;
}

.wa-hero h2{

color:white;
font-size:18px;
margin-bottom:4px;
}

.wa-hero p{
color:rgba(255,255,255,.55);
font-size:13px;
}


/* CARD */

.wa-card{
background:#15181f;
border-radius:18px;
padding:24px;
margin-bottom:20px;
border:1px solid rgba(255,255,255,0.08);
}


/* ROW */

.wa-row{
display:flex;
gap:14px;
align-items:flex-start;
}


.wa-icon{

width:38px;
height:38px;
border-radius:10px;
border:1px solid rgba(255,255,255,.12);
display:flex;
align-items:center;
justify-content:center;
color:white;
}


.wa-content{
flex:1;
}

.wa-content h3{
color:white;
font-size:16px;
margin-bottom:12px;

}


/* API BOX */

.wa-api-box{
display:flex;
align-items:center;
background:#232730;
border:1px solid rgba(255,255,255,0.10);
border-radius:6px;
overflow:hidden;
}

.wa-api-box input{
flex:1;
background:none;
border:none;
color:white;
padding:8px 10px;
height: 50px;
font-size:13px;
outline:none;
}


.wa-copy{
background:#3a3f47;
border:none;
color:white;
padding:6px 12px;
font-size:12px;
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
}


/* NUMARA */

.wa-number-row{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:8px;
}


.wa-number{
color:white;
font-size:14px;
font-weight:500;
}

.wa-status{
color:rgba(255,255,255,.55);
font-size:12px;
margin-top:4px;
display:flex;
gap:6px;
align-items:center;
}


.wa-dot{
width:6px;
height:6px;
background:#22c55e;
border-radius:50%;
}


.wa-actions{
display:flex;
gap:10px;
}

.wa-btn{
background:#3a3f47;
border:none;
color:white;
padding:7px 12px;
font-size:12px;
border-radius:6px;
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
}

.wa-note{
margin-top:12px;
font-size:11px;
color:rgba(255,255,255,.45);
}