/* KarPos lisans paneli. Renkler ve bileşenler MarketPos yönetim paneliyle (MarketPos/wwwroot/css/yonetim.css) aynı dildedir. */
:root {
    --ink: #0e1024;
    --ink-2: #171a36;
    --ink-3: #23274a;
    --ana: #6c5cff;
    --ana-koyu: #5646f0;
    --ana-acik: #efedff;
    --vurgu: #f0643f;
    --vurgu-acik: #ffece6;
    --yesil: #16a34a;
    --yesil-acik: #dcfce7;
    --sari: #d97706;
    --sari-acik: #fef3c7;
    --kirmizi: #e5484d;
    --kirmizi-acik: #fee2e2;
    --mavi: #0284c7;
    --mavi-acik: #e0f2fe;
    --gri-acik: #eef0f5;
    --metin: #1c1f2e;
    --soluk: #6b7085;
    --cizgi: #e4e6ef;
    --zemin: #f4f5fa;
    --golge: 0 1px 2px rgba(14,16,36,.04), 0 8px 24px -16px rgba(14,16,36,.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--metin); background: var(--zemin); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--ana); text-decoration: none; }
a:hover { color: var(--ana-koyu); }
code, .kod { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.soluk { color: var(--soluk); }
.kucuk-yazi { font-size: 12.5px; }
.sag-hiza { text-align: right; }
.gizli { display: none !important; }

/* ---------- İskelet ---------- */
.iskelet { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.yan { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 14px; background: linear-gradient(180deg, var(--ink-2), var(--ink)); color: #c4c7e4; overflow-y: auto; }
.yan .logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; color: #fff; font-weight: 800; font-size: 16.5px; }
.yan .logo img { width: 36px; height: 36px; border-radius: 10px; }
.yan .logo small { display: block; font-size: 11px; font-weight: 600; color: #8e93b8; letter-spacing: .04em; text-transform: uppercase; }
.yan nav { display: grid; gap: 2px; }
.yan nav .baslik { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6f7499; padding: 16px 12px 6px; }
.yan nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; color: #c4c7e4; font-weight: 600; transition: background .15s, color .15s; }
.yan nav a i { font-size: 17px; width: 20px; text-align: center; }
.yan nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.yan nav a.aktif { background: rgba(108,92,255,.22); color: #fff; box-shadow: inset 3px 0 0 var(--ana); }
.yan nav a .sayi { margin-left: auto; font-size: 11.5px; background: rgba(255,255,255,.1); padding: 1px 8px; border-radius: 99px; }
.yan nav a .sayi.uyari { background: var(--vurgu); color: #fff; }
.yan nav a .sayi.hata { background: var(--kirmizi); color: #fff; }
.yan nav a.yeni { margin-top: 6px; background: var(--ana); color: #fff; justify-content: center; box-shadow: 0 10px 24px -14px rgba(108,92,255,.9); }
.yan nav a.yeni:hover { background: var(--ana-koyu); }
.yan .kullanici { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.yan .avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--ink-3); flex: none; }
.yan .kullanici div { min-width: 0; flex: 1; }
.yan .kullanici b { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yan .kullanici small { display: block; font-size: 12px; color: #8e93b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yan .kullanici button { background: none; border: 0; color: #a9aed0; font-size: 18px; cursor: pointer; padding: 4px; border-radius: 8px; }
.yan .kullanici button:hover { color: #fff; background: rgba(255,255,255,.08); }

.icerik { min-width: 0; display: flex; flex-direction: column; }
.ust-bar { display: flex; align-items: center; gap: 14px; padding: 22px 32px 0; }
.ust-bar h1 { font-size: 24px; letter-spacing: -.02em; font-weight: 800; color: var(--ink); line-height: 1.25; }
.ust-bar .alt-yazi { color: var(--soluk); font-size: 13.5px; }
.ust-bar .sag { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.ust-bar .geri { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--cizgi); background: #fff; display: grid; place-items: center; color: var(--metin); font-size: 18px; flex: none; }
.ust-bar .geri:hover { border-color: var(--ana); color: var(--ana); }
.menu-ac { display: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--cizgi); background: #fff; font-size: 20px; cursor: pointer; flex: none; }
.sayfa { padding: 22px 32px 48px; }

/* ---------- Bileşenler ---------- */
.kart { background: #fff; border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: var(--golge); min-width: 0; }
.kart + .kart { margin-top: 18px; }
.kart-baslik { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.kart-baslik h2 { font-size: 15.5px; font-weight: 750; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.kart-baslik h2 i { color: var(--ana); }
.kart-baslik h2 .adet { font-size: 12px; font-weight: 700; color: var(--soluk); background: var(--gri-acik); border-radius: 99px; padding: 1px 9px; }
.kart-baslik .sag { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kart-govde { padding: 20px; }
.kart-govde.sifir { padding: 0; }
.kart-alt { padding: 12px 20px; border-top: 1px solid var(--cizgi); display: flex; justify-content: center; }
.izgara { display: grid; gap: 18px; }
.izgara + .izgara { margin-top: 18px; }
.izgara.iki { grid-template-columns: 1fr 1fr; }
.izgara.ana-yan { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); align-items: start; }
.yigin { display: grid; gap: 18px; align-content: start; }
.yigin > .kart + .kart { margin-top: 0; }

.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 11px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; text-decoration: none; line-height: 1.3; }
.dugme:active { transform: translateY(1px); }
.dugme.ana { background: var(--ana); color: #fff; box-shadow: 0 8px 18px -10px rgba(108,92,255,.9); }
.dugme.ana:hover { background: var(--ana-koyu); color: #fff; }
.dugme.ikincil { background: #fff; color: var(--metin); border-color: var(--cizgi); }
.dugme.ikincil:hover { border-color: #cdd0de; background: #fafbfd; color: var(--metin); }
.dugme.yesil { background: var(--yesil); color: #fff; }
.dugme.yesil:hover { background: #15803d; color: #fff; }
.dugme.wa { background: #1fa855; color: #fff; }
.dugme.wa:hover { background: #178a45; color: #fff; }
.dugme.tehlike { background: #fff; color: var(--kirmizi); border-color: #f5c2c4; }
.dugme.tehlike:hover { background: var(--kirmizi); color: #fff; }
.dugme.tehlike.dolu { background: var(--kirmizi); color: #fff; }
.dugme.kucuk { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; }
.dugme.tam { width: 100%; }
.dugme.simge { padding: 7px; width: 34px; height: 34px; }
.dugme[disabled] { opacity: .55; cursor: not-allowed; }

.rozet { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.rozet i { font-size: 11px; }
.rozet.aktif { background: var(--yesil-acik); color: #15803d; }
.rozet.deneme { background: var(--ana-acik); color: var(--ana-koyu); }
.rozet.bitiyor { background: var(--sari-acik); color: #b45309; }
.rozet.suresi-doldu { background: var(--vurgu-acik); color: #c2410c; }
.rozet.askida { background: var(--gri-acik); color: #475069; }
.rozet.iptal, .rozet.hata { background: var(--kirmizi-acik); color: #b42318; }
.rozet.notr { background: var(--gri-acik); color: var(--soluk); }
.rozet.bilgi { background: var(--mavi-acik); color: var(--mavi); }
.tur { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--soluk); }

/* Çevrimiçi noktası */
.nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c3c7d6; flex: none; }
.nokta.acik { background: var(--yesil); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.nokta.sessiz { background: var(--sari); }

/* İstatistik kutuları */
.ozetler { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ozet { position: relative; display: block; background: #fff; border: 1px solid var(--cizgi); border-radius: 18px; padding: 18px; box-shadow: var(--golge); color: var(--metin); transition: transform .15s, box-shadow .15s; }
a.ozet:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -20px rgba(14,16,36,.35); color: var(--metin); }
.ozet .s { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; margin-bottom: 12px; background: var(--ana-acik); color: var(--ana); }
.ozet .s.yesil { background: var(--yesil-acik); color: var(--yesil); }
.ozet .s.sari { background: var(--sari-acik); color: var(--sari); }
.ozet .s.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.ozet .s.mavi { background: var(--mavi-acik); color: var(--mavi); }
.ozet .s.turuncu { background: var(--vurgu-acik); color: var(--vurgu); }
.ozet b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ozet span { color: var(--soluk); font-size: 13px; font-weight: 600; }
.ozet small { position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 700; color: var(--soluk); }

/* Yığılmış sütun grafiği (son 30 gün) */
.grafik-ust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lejant { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--soluk); }
.lejant span { display: inline-flex; align-items: center; gap: 6px; }
.lejant i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafik-toplam { margin-left: auto; font-size: 12.5px; color: var(--soluk); font-weight: 600; }
.grafik-toplam b { color: var(--ink); font-size: 15px; }
.grafik { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 150px; border-bottom: 1px solid var(--cizgi); }
.grafik .sutun { flex: 1; min-width: 4px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; position: relative; cursor: default; }
.grafik .sutun::before { content: ""; position: absolute; inset: 0 -1.5px; border-radius: 4px; }
.grafik .sutun:hover::before { background: rgba(108,92,255,.07); }
.grafik .dilim { position: relative; width: 100%; }
.grafik .dilim.d1 { background: #6c5cff; }
.grafik .dilim.d2 { background: #f0643f; }
.grafik .dilim:first-child { border-radius: 4px 4px 0 0; }
.grafik .ipucu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; padding: 7px 10px; border-radius: 9px; white-space: nowrap; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .1s; line-height: 1.5; }
.grafik .ipucu b { display: block; font-size: 12px; color: #c4c7e4; font-weight: 600; }
.grafik .ipucu i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.grafik .sutun:hover .ipucu { opacity: 1; }
.grafik .sutun:first-child .ipucu, .grafik .sutun:nth-child(2) .ipucu, .grafik .sutun:nth-child(3) .ipucu { left: 0; transform: none; }
.grafik .sutun:nth-last-child(-n+3) .ipucu { left: auto; right: 0; transform: none; }
.grafik-alt { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--soluk); margin-top: 6px; }
.grafik-bos { position: absolute; inset: 0; display: grid; place-items: center; color: var(--soluk); font-size: 13px; }

/* Tablo */
.tablo-kap { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; }
.tablo th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk); padding: 11px 16px; background: #fafbfd; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo th a { color: inherit; }
.tablo th a.secili { color: var(--ana); }
.tablo td { padding: 13px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: #fafbff; }
.tablo tr.tikla { cursor: pointer; }
.tablo tr.soluk-satir td { opacity: .6; }
.tablo .sag-hiza { text-align: right; }
.tablo .ad b { display: block; color: var(--ink); }
.tablo .ad a b { color: var(--ink); }
.tablo .ad a:hover b { color: var(--ana); }
.tablo .ad small, .tablo .soluk { color: var(--soluk); font-size: 12.5px; }
.tablo .islemler { display: flex; gap: 6px; justify-content: flex-end; }
.tablo .anahtar { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }
.bos-durum { text-align: center; padding: 48px 20px; color: var(--soluk); }
.bos-durum i { font-size: 34px; display: block; margin-bottom: 10px; color: #b8bcd0; }
.bos-durum b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }

/* Koltuk göstergesi (2/3 bilgisayar) */
.koltuk { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.koltuk .cubuk { display: inline-flex; gap: 2px; }
.koltuk .cubuk i { width: 7px; height: 14px; border-radius: 2px; background: var(--gri-acik); }
.koltuk .cubuk i.dolu { background: var(--ana); }

/* Liste (kart içi satırlar) */
.liste { list-style: none; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--cizgi); }
.liste li:last-child { border-bottom: 0; }
.liste a.satir { display: flex; align-items: center; gap: 12px; color: inherit; flex: 1; min-width: 0; }
.liste .s { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gri-acik); color: var(--soluk); flex: none; font-size: 15px; }
.liste .s.basari { background: var(--yesil-acik); color: var(--yesil); }
.liste .s.uyari { background: var(--sari-acik); color: var(--sari); }
.liste .s.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.liste .s.bilgi { background: var(--ana-acik); color: var(--ana); }
.liste .orta { flex: 1; min-width: 0; }
.liste .orta b { display: block; color: var(--ink); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .orta small { color: var(--soluk); font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .zaman { font-size: 12px; color: var(--soluk); white-space: nowrap; text-align: right; }

/* Zaman çizelgesi (işlem kayıtları) */
.cizelge { list-style: none; position: relative; }
.cizelge li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--cizgi); align-items: start; }
.cizelge li:last-child { border-bottom: 0; }
.cizelge .s { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: var(--gri-acik); color: var(--soluk); }
.cizelge .s.basari { background: var(--yesil-acik); color: var(--yesil); }
.cizelge .s.uyari { background: var(--sari-acik); color: var(--sari); }
.cizelge .s.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.cizelge .s.bilgi { background: var(--ana-acik); color: var(--ana); }
.cizelge b { color: var(--ink); font-size: 13.5px; }
.cizelge .aciklama { color: var(--metin); font-size: 13px; word-break: break-word; }
.cizelge .meta { color: var(--soluk); font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.cizelge .meta a { color: var(--soluk); font-weight: 600; }
.cizelge .meta a:hover { color: var(--ana); }
.cizelge .zaman { font-size: 12px; color: var(--soluk); white-space: nowrap; text-align: right; }

/* Filtre çubuğu */
.filtre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); }
.arama { position: relative; flex: 1 1 260px; max-width: 380px; }
.arama i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9aa0b6; }
.arama input { width: 100%; padding: 9px 12px 9px 36px; border-radius: 11px; border: 1px solid var(--cizgi); font: inherit; outline: 0; background: #fff; }
.arama input:focus { border-color: var(--ana); box-shadow: 0 0 0 3px rgba(108,92,255,.12); }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--cizgi); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--soluk); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cip:hover { border-color: #cdd0de; color: var(--metin); }
.cip b { color: var(--metin); font-variant-numeric: tabular-nums; }
.cip.secili { background: var(--ink); border-color: var(--ink); color: #fff; }
.cip.secili b { color: #fff; }
.filtre select { padding: 8px 10px; border-radius: 11px; border: 1px solid var(--cizgi); font: inherit; font-size: 13px; background: #fff; color: var(--metin); }

/* Sayfalama */
.sayfalama { display: flex; align-items: center; gap: 6px; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.sayfalama .bilgi { color: var(--soluk); font-size: 12.5px; }
.sayfalama nav { display: flex; gap: 4px; }
.sayfalama a, .sayfalama span.no { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; display: inline-grid; place-items: center; border: 1px solid var(--cizgi); color: var(--metin); font-weight: 700; font-size: 13px; background: #fff; }
.sayfalama a:hover { border-color: var(--ana); color: var(--ana); }
.sayfalama span.no.secili { background: var(--ink); color: #fff; border-color: var(--ink); }
.sayfalama span.no.pasif { opacity: .4; }

/* Formlar */
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-izgara.uc { grid-template-columns: repeat(3, 1fr); }
.form-izgara .tam { grid-column: 1 / -1; }
.alan label { display: block; font-size: 12.5px; font-weight: 700; color: var(--metin); margin-bottom: 6px; }
.alan label .istege { font-weight: 600; color: var(--soluk); }
.alan .ipucu { font-size: 12px; color: var(--soluk); margin-top: 5px; }
.alan input[type=text], .alan input[type=email], .alan input[type=tel], .alan input[type=password], .alan input[type=number], .alan input[type=date], .alan input[type=search], .alan select, .alan textarea {
    width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--cizgi); font: inherit; background: #fff; color: var(--metin); outline: 0; transition: border-color .15s, box-shadow .15s;
}
.alan textarea { min-height: 84px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--ana); box-shadow: 0 0 0 3px rgba(108,92,255,.12); }
.alan input[disabled] { background: var(--zemin); color: var(--soluk); }
.alan-hata { color: var(--kirmizi); font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.ek-girdi { display: flex; align-items: stretch; }
.ek-girdi input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ek-girdi span { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--cizgi); border-left: 0; background: #fafbfd; color: var(--soluk); font-weight: 600; font-size: 13px; border-radius: 0 11px 11px 0; white-space: nowrap; }
.secenekler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.secenekler.iki { grid-template-columns: 1fr 1fr; }
.secenek { position: relative; display: block; border: 1.5px solid var(--cizgi); border-radius: 14px; padding: 14px 14px 14px 42px; cursor: pointer; transition: border-color .15s, background .15s; }
.secenek input { position: absolute; left: 15px; top: 17px; accent-color: var(--ana); width: 16px; height: 16px; }
.secenek b { display: block; color: var(--ink); }
.secenek span { color: var(--soluk); font-size: 12.5px; }
.secenek:has(input:checked) { border-color: var(--ana); background: #faf9ff; }
.kutu-onay { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; cursor: pointer; font-weight: 600; }
.kutu-onay input { margin-top: 4px; accent-color: var(--ana); width: 16px; height: 16px; }
.form-alt { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; flex-wrap: wrap; }
.ayrac { grid-column: 1 / -1; border-top: 1px dashed var(--cizgi); margin: 4px 0; }
.bolum-baslik { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin-top: 4px; }

/* Bildirim */
.bildirim { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; margin-bottom: 18px; font-weight: 600; border: 1px solid; }
.bildirim i { font-size: 18px; line-height: 1.3; }
.bildirim > div { flex: 1; min-width: 0; }
.bildirim.basari { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.bildirim.hata { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.bildirim.bilgi { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }
.bildirim.uyari { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.bildirim .kapat { margin-left: auto; background: none; border: 0; font-size: 16px; cursor: pointer; color: inherit; opacity: .6; }
.bildirim .anahtar-goster { margin-top: 8px; }

/* Lisans anahtarı */
.anahtar-goster { display: inline-flex; gap: 6px; align-items: center; padding: 8px 8px 8px 14px; border-radius: 12px; background: #fff; border: 1px dashed #c9c2ff; font-family: ui-monospace, Consolas, monospace; font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--ink); max-width: 100%; }
.anahtar-goster span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopyala { border: 0; background: var(--ana-acik); color: var(--ana); cursor: pointer; font-size: 14px; width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; }
.kopyala:hover { background: var(--ana); color: #fff; }
.kopyala.kucuk { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }

/* Lisans / müşteri kartının üstü */
.kunye { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--cizgi); border-radius: 20px; padding: 22px 24px; box-shadow: var(--golge); margin-bottom: 18px; position: relative; overflow: hidden; }
.kunye::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--ana), var(--vurgu)); }
.kunye .harf { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ana), var(--vurgu)); flex: none; }
.kunye .kimlik { flex: 1; min-width: 240px; }
.kunye h2 { font-size: 21px; letter-spacing: -.01em; color: var(--ink); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kunye h2 a { color: inherit; }
.kunye h2 a:hover { color: var(--ana); }
.kunye .alt { color: var(--soluk); font-size: 13.5px; display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.kunye .alt i { margin-right: 4px; }
.kunye .dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.durum-notu { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--gri-acik); font-size: 13px; color: var(--metin); display: inline-flex; gap: 8px; align-items: center; }

.bilgi-tablosu { display: grid; grid-template-columns: 160px 1fr; gap: 0; }
.bilgi-tablosu > * { padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-tablosu > :nth-last-child(-n+2) { border-bottom: 0; }
.bilgi-tablosu dt { color: var(--soluk); font-size: 13px; font-weight: 600; }
.bilgi-tablosu dd { color: var(--metin); font-weight: 600; word-break: break-word; }
.mini-ozetler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-ozet { background: var(--zemin); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.mini-ozet b { display: block; font-size: 19px; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-ozet span { font-size: 12px; color: var(--soluk); font-weight: 600; }
.kalan { font-weight: 800; }
.kalan.az { color: var(--kirmizi); }
.kalan.orta { color: var(--sari); }
.ilerleme-cubugu { height: 8px; border-radius: 99px; background: var(--gri-acik); overflow: hidden; margin-top: 14px; }
.ilerleme-cubugu span { display: block; height: 100%; background: linear-gradient(90deg, var(--ana), var(--vurgu)); border-radius: 99px; }
.ilerleme-yazi { display: flex; justify-content: space-between; font-size: 12px; color: var(--soluk); margin-top: 6px; font-weight: 600; }

.eylem-izgara { display: grid; gap: 10px; }
.eylem { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 14px; background: #fff; width: 100%; font: inherit; text-align: left; cursor: pointer; color: inherit; transition: border-color .15s, background .15s; }
.eylem:hover { border-color: #cfc9ff; background: #fcfbff; }
.eylem .s { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--ana-acik); color: var(--ana); flex: none; font-size: 17px; }
.eylem .s.yesil { background: var(--yesil-acik); color: var(--yesil); }
.eylem .s.sari { background: var(--sari-acik); color: var(--sari); }
.eylem .s.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.eylem .s.mavi { background: var(--mavi-acik); color: var(--mavi); }
.eylem .orta { flex: 1; min-width: 0; }
.eylem .orta b { display: block; font-size: 13.5px; color: var(--ink); }
.eylem .orta small { color: var(--soluk); font-size: 12.5px; }
.eylem > .bi-chevron-right { color: #b8bcd0; }
.eylem.tehlike:hover { border-color: #f5c2c4; background: #fffafa; }

/* Pencere (dialog) */
dialog.pencere { border: 0; border-radius: 20px; padding: 0; width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; box-shadow: 0 40px 80px -30px rgba(14,16,36,.5); color: var(--metin); }
dialog.pencere.genis { width: min(760px, calc(100vw - 32px)); }
dialog.pencere::backdrop { background: rgba(14,16,36,.45); backdrop-filter: blur(3px); }
.pencere-baslik { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--cizgi); }
.pencere-baslik h3 { font-size: 16.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.pencere-baslik h3 i { color: var(--ana); }
.pencere-baslik button { margin-left: auto; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--soluk); }
.pencere-govde { padding: 20px 22px; display: grid; gap: 14px; }
.pencere-govde > p { color: var(--soluk); }
.pencere-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.hizli { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hizli button { padding: 12px 8px; border-radius: 12px; border: 1.5px solid var(--cizgi); background: #fff; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; display: grid; gap: 2px; }
.hizli button small { font-weight: 600; color: var(--soluk); font-size: 11.5px; }
.hizli button:hover { border-color: var(--ana); background: #faf9ff; color: var(--ana); }

/* Giriş ekranı */
.giris-zemin { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(700px 400px at 100% 0%, rgba(108,92,255,.35), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(240,100,63,.22), transparent 60%), linear-gradient(160deg, var(--ink-2), var(--ink)); }
.giris-kart { width: 100%; max-width: 420px; background: #fff; border-radius: 24px; padding: 36px 32px 30px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.giris-kart .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--ink); margin-bottom: 22px; }
.giris-kart .logo img { width: 40px; height: 40px; border-radius: 11px; }
.giris-kart .logo small { display: block; font-size: 11px; font-weight: 700; color: var(--soluk); letter-spacing: .05em; text-transform: uppercase; }
.giris-kart h1 { font-size: 22px; color: var(--ink); letter-spacing: -.01em; }
.giris-kart > p { color: var(--soluk); margin: 4px 0 22px; }
.giris-kart .alan { margin-bottom: 14px; }
.giris-kart .alan input { padding: 12px 14px; }
.giris-alt { margin-top: 18px; text-align: center; color: #8e93b8; font-size: 12px; }

/* Ayarlar: açık anahtar */
.alan textarea.anahtar-metin, .anahtar-metin { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin); resize: vertical; min-height: 110px; word-break: break-all; }

/* Duyarlı */
@media (max-width: 1180px) {
    .izgara.ana-yan, .izgara.iki { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .iskelet { grid-template-columns: 1fr; }
    .yan { position: fixed; z-index: 60; left: 0; top: 0; width: 264px; transform: translateX(-100%); transition: transform .25s ease; }
    .yan.acik { transform: none; box-shadow: 0 0 0 100vmax rgba(14,16,36,.45); }
    .menu-ac { display: grid; place-items: center; }
    .ust-bar { padding: 16px 16px 0; flex-wrap: wrap; }
    .ust-bar .sag { margin-left: 0; width: 100%; }
    .sayfa { padding: 16px 16px 40px; }
    .form-izgara, .form-izgara.uc, .secenekler.iki { grid-template-columns: 1fr; }
    .secenekler { grid-template-columns: 1fr 1fr; }
    .mini-ozetler { grid-template-columns: repeat(2, 1fr); }
    .bilgi-tablosu { grid-template-columns: 120px 1fr; }
    .tablo .gizle-mobil { display: none; }
    .hizli { grid-template-columns: 1fr 1fr; }
    .kunye { padding: 18px; }
    .anahtar-goster { font-size: 13.5px; }
    .ozetler { grid-template-columns: repeat(2, 1fr); }
    .ozet b { font-size: 24px; }
    .cizelge li { grid-template-columns: 34px 1fr; }
    .cizelge .zaman { grid-column: 2; text-align: left; }
}