/* AytAi — yönetim sayfası (uygulamanın renk ve yazı düzeniyle) */
:root {
  --bg: #ffffff; --bg-2: #f6f8fc; --ink: #141a2e; --ink-2: #3b4560; --mute: #5f6a84;
  --card: #ffffff; --line: #e4e9f2; --line-2: #d3dbe8; --btn: #eef2f9; --btn-h: #e3e9f4;
  --acc: #3558f0; --acc-h: #2a49d6; --on-acc: #ffffff; --acc-soft: color-mix(in srgb, var(--acc) 11%, transparent);
  --warn: #c98200; --bad: #d93d42; --good: #188a4a;
  --r: 14px; --sh: 0 1px 2px rgba(20, 26, 46, .05), 0 8px 24px rgba(20, 26, 46, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f17; --bg-2: #121522; --ink: #eef0f8; --ink-2: #c3c9da; --mute: #929bb3;
    --card: #171a27; --line: #252a3b; --line-2: #343a52; --btn: #1b1f2e; --btn-h: #262c40;
    --acc: #6d8bff; --acc-h: #85a0ff; --on-acc: #0b1020; --warn: #f0b03c; --bad: #ff6b70; --good: #4cc88a;
    --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-2); color: var(--ink); font: 500 15px/1.5 "Plus Jakarta Sans", system-ui, sans-serif; }
a { color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }

.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top__in { max-width: 980px; margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.brand img { border-radius: 8px; }
.brand em { font-style: normal; font-weight: 600; color: var(--mute); font-size: .85rem; padding-left: .55rem; border-left: 1px solid var(--line-2); }

.wrap { max-width: 980px; margin: 0 auto; padding: 1.25rem 16px 4rem; display: grid; gap: 1rem; }
#app { display: grid; gap: 1rem; }
#app[hidden] { display: none; }
.state { margin: 3rem auto; text-align: center; color: var(--ink-2); max-width: 32rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 1.25rem; }
.card__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
h1, h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
h2 { margin-bottom: .9rem; }
.sub { margin: 0; color: var(--mute); font-size: .85rem; }
.limits { margin: .6rem 0 1rem; padding: .55rem .75rem; border-radius: 10px; background: var(--bg-2); color: var(--ink-2); font-size: .82rem; }
.limits span { color: var(--mute); }

.users { display: grid; }
.u { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 12.5rem; align-items: center; gap: .75rem 1.25rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.u__id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.u__id > div { min-width: 0; }
.u__id b { font-weight: 700; }
.u__id small { display: block; color: var(--mute); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--acc-soft); color: var(--acc); font-weight: 700; }
.tag { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 99px; background: var(--acc-soft); color: var(--acc); font-size: .68rem; font-weight: 700; vertical-align: .1em; }
.tag--me { background: var(--btn); color: var(--ink-2); }
.u__use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.m { display: grid; grid-template-columns: 1fr auto; row-gap: .25rem; font-size: .78rem; color: var(--ink-2); }
.m b { font-variant-numeric: tabular-nums; color: var(--ink); }
.m small { grid-column: 1 / -1; color: var(--mute); font-size: .7rem; }
.m i { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: linear-gradient(var(--acc), var(--acc)) 0 0 / var(--p) 100% no-repeat, var(--line); }
.m.is-near i { background: linear-gradient(var(--warn), var(--warn)) 0 0 / var(--p) 100% no-repeat, var(--line); }
.m.is-full i { background: linear-gradient(var(--bad), var(--bad)) 0 0 / var(--p) 100% no-repeat, var(--line); }
.m.is-full b { color: var(--bad); }
.u__act { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: 0 .95rem; border: 0; border-radius: 10px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.btn:disabled { opacity: .55; cursor: default; }
.btn--primary { background: var(--acc); color: var(--on-acc); }
.btn--soft { background: var(--btn); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); }
.btn--danger { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) { background: var(--acc-h); }
  .btn--soft:hover:not(:disabled), .btn--ghost:hover { background: var(--btn-h); }
  .btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 20%, transparent); }
}

.form { display: grid; gap: .85rem; max-width: 30rem; }
.form label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.form label small { font-weight: 500; color: var(--mute); }
.form input { width: 100%; min-height: 2.6rem; padding: 0 .8rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.form input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.pw { display: flex; gap: .4rem; }
.pw input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.hint { margin: 0; color: var(--mute); font-size: .78rem; }
.err { margin: 0; color: var(--bad); font-size: .85rem; min-height: 0; }
.err:empty { display: none; }
.ok { margin: 0; padding: .6rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--ink); font-size: .85rem; overflow-wrap: anywhere; }
.ok[hidden] { display: none; }
.ok code { padding: .05rem .35rem; border-radius: 6px; background: var(--bg); font-size: .85rem; user-select: all; }
.form > .btn--primary { justify-self: start; }
.row { display: flex; justify-content: flex-end; gap: .5rem; }

dialog { width: min(26rem, calc(100vw - 32px)); padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); box-shadow: var(--sh); }
dialog::backdrop { background: rgba(8, 10, 18, .45); }
dialog h2 { margin: 0; }

.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); padding: .65rem 1rem; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: .85rem; font-weight: 600; transition: opacity .2s ease, transform .2s ease; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .u { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .u__act { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .toast, .btn { transition: none; } }
.warn-card h2 { margin-bottom: .6rem; }
#warnList { display: grid; gap: .55rem; }
.w { position: relative; padding: .75rem .9rem; border-radius: 12px; border: 1px solid; overflow: hidden; }
.w > b { display: block; font-size: .92rem; }
.w p { margin: .3rem 0 0; font-size: .84rem; line-height: 1.5; }
.w small { display: block; margin-top: .35rem; font-size: .74rem; opacity: .75; }
.w i { display: block; height: 6px; margin-top: .55rem; border-radius: 99px; background: linear-gradient(90deg, currentColor var(--p), rgba(127,127,127,.2) var(--p)); }
.w--danger { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .35); color: #b91c1c; }
.w--warn { background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .35); color: #b45309; }
.w--info { background: rgba(37, 99, 235, .07); border-color: rgba(37, 99, 235, .3); color: #1d4ed8; }
.w p, .w small { color: inherit; }
@media (prefers-color-scheme: dark) { .w--danger { color: #fca5a5; } .w--warn { color: #fcd34d; } .w--info { color: #93c5fd; } }
.kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .4rem 0 1rem; }
.kpi div { padding: .8rem; border-radius: 12px; background: rgba(127, 127, 127, .08); text-align: center; }
.kpi b { display: block; font-size: 1.5rem; }
.kpi span { font-size: .75rem; opacity: .75; }
.dist { margin-bottom: 1rem; }
.dist h3 { font-size: .85rem; margin: 0 0 .4rem; }
.dist .b { display: grid; grid-template-columns: 9rem 1fr 2rem; align-items: center; gap: .5rem; font-size: .8rem; margin: .25rem 0; }
.dist .b i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, #3558f0 var(--p), rgba(127, 127, 127, .18) var(--p)); }
.dist .b b { text-align: right; }
.svl { display: grid; gap: .6rem; }
.sv { padding: .75rem .9rem; border-radius: 12px; border: 1px solid rgba(127, 127, 127, .25); }
.sv__h { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.sv p { margin: .2rem 0; font-size: .84rem; line-height: 1.5; }
@media (max-width: 560px) { .kpi { grid-template-columns: 1fr 1fr 1fr; } .kpi b { font-size: 1.2rem; } .dist .b { grid-template-columns: 7rem 1fr 1.6rem; } }
.srcl { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.src { padding: .55rem .7rem; border-radius: 10px; border: 1px solid rgba(127,127,127,.22); font-size: .78rem; line-height: 1.45; }
.src b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .74rem; color: #3558f0; }
.src span { opacity: .85; }
.fbm { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.fbm__i { padding: .3rem .65rem; border-radius: 99px; border: 1px solid rgba(127,127,127,.25); font-size: .78rem; }

/* Bugünkü yapay zeka kapasitesi */
.cap { display: grid; gap: .7rem; }
.cap__i { padding: .8rem .9rem; border-radius: 12px; background: var(--soft, rgba(127,127,127,.08)); }
.cap__h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; align-items: baseline; }
.cap__h span { font-size: .85rem; }
.cap__i i { display: block; height: 8px; margin: .55rem 0 .45rem; border-radius: 99px; background: linear-gradient(90deg, var(--c, #22c55e) var(--p), rgba(127,127,127,.18) var(--p)); }
.cap__i--warn i { --c: #f59e0b; } .cap__i--danger i { --c: #ef4444; }
.cap__i small { display: block; font-size: .74rem; opacity: .75; overflow-wrap: anywhere; }.tag--warn { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #f59e0b; }

/* Paketler ve ödemeler */
.tag--plan { background: color-mix(in srgb, #3558f0 14%, transparent); color: #3558f0; }
.shop__osb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 1rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: .85rem; }
.shop__osb code { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; font-size: .82rem; padding: .3rem .5rem; border-radius: 8px; background: var(--btn); }
.shop__grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.shop__it { display: grid; gap: .5rem; margin: 0; padding: .8rem .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.shop__it legend { padding: 0 .3rem; font-weight: 700; font-size: .86rem; }
.shop__it input { width: 100%; box-sizing: border-box; }
.shop__h3 { margin: 1.4rem 0 .6rem; font-size: .95rem; }
.shop__grant { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 6rem auto; gap: .6rem; align-items: end; }
.shop__grant .err { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .shop__grant { grid-template-columns: 1fr 1fr; } }
.tblw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.tblw table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .82rem; }
.tblw th, .tblw td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tblw tr:last-child td { border-bottom: 0; }
.tblw small { display: block; color: var(--mute); }
.form.shop__form, .form.shop__grant { max-width: none; width: 100%; }