/* KarPOS Yönetim Paneli — ortak tasarım. Renkler masaüstü programın satış ekranıyla aynıdır (SatisModul\MpArayuz.cs).
   Bileşenler: .dugme  .kart  .tablo  .alan/.girdi  .rozet  .ozet  .arac  .sekmeler  .pencere (dialog)  .bos  .sayfalama */

:root {
  --ana: #6c5cff; --ana-koyu: #5546e0; --ana-acik: #efedff; --ana-kenar: #cfc9ff;
  --murekkep: #14162e; --murekkep-2: #1d2042; --murekkep-cizgi: rgba(255,255,255,.08);
  --zemin: #f4f5fa; --yuzey: #ffffff; --cizgi: #e6e8f1; --cizgi-koyu: #d5d8e6;
  --metin: #1c1f36; --soluk: #6b7190; --soluk-2: #9aa0b8;
  --yesil: #17a567; --yesil-acik: #e6f7ef; --kirmizi: #e5484d; --kirmizi-acik: #fdecec;
  --mavi: #2b7de9; --mavi-acik: #e8f1fd; --turuncu: #f0843f; --turuncu-acik: #fef1e6;
  --camgobegi: #12a5b8; --camgobegi-acik: #e3f6f8; --sari: #e0a100; --sari-acik: #fdf5dc;
  --yaricap: 14px; --yaricap-kucuk: 10px;
  --golge: 0 1px 2px rgba(20,22,46,.04), 0 6px 20px rgba(20,22,46,.05);
  --golge-buyuk: 0 24px 64px rgba(20,22,46,.24);
  --yan-en: 264px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.45;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--ana-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.sayi, .tablo td.sag, .tablo th.sag { font-variant-numeric: tabular-nums; }
.soluk { color: var(--soluk); } .kucuk { font-size: .87rem; } .kalin { font-weight: 600; }
.yesil-yazi { color: var(--yesil); } .kirmizi-yazi { color: var(--kirmizi); } .mor-yazi { color: var(--ana-koyu); }
.sag { text-align: right; } .orta { text-align: center; } .tek-satir { white-space: nowrap; }
.gizli { display: none !important; }

/* ---------- Kabuk: yan menü + üst şerit ---------- */
.kabuk { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; }
/* Üst şeritteki menü düğmesi yan menüyü gizler / gösterir (tercih tarayıcıda saklanır: html.menu-kapali) */
html.menu-kapali .yan { margin-left: calc(-1 * var(--yan-en)); visibility: hidden; }
.yan {
  position: sticky; top: 0; height: 100vh; width: var(--yan-en); display: flex; flex-direction: column; color: #fff;
  transition: margin-left .22s ease, visibility .22s;
  background: radial-gradient(520px 320px at -10% -5%, rgba(108,92,255,.42), transparent 70%),
              radial-gradient(420px 300px at 120% 105%, rgba(240,132,63,.16), transparent 70%), var(--murekkep);
}
.marka { display: flex; align-items: center; gap: 12px; padding: 22px 22px 18px; color: #fff; }
.marka:hover { text-decoration: none; }
.marka-simge {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem;
  background: linear-gradient(135deg, #8f83ff, var(--ana)); box-shadow: 0 8px 20px rgba(108,92,255,.45);
}
.marka-ad { font-size: 1.16rem; font-weight: 700; letter-spacing: .2px; line-height: 1.15; }
.marka-alt { font-size: .78rem; color: rgba(255,255,255,.55); }
.menu-liste { flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.menu-grup { margin: 18px 12px 6px; font-size: .7rem; font-weight: 700; letter-spacing: 1.1px; color: rgba(255,255,255,.38); }
.menu-oge {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 2px 0; border-radius: 11px;
  color: rgba(255,255,255,.74); font-weight: 500; transition: background .15s, color .15s;
}
.menu-oge i { font-size: 1.1rem; width: 20px; text-align: center; opacity: .9; }
.menu-oge:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.menu-oge.secili { background: linear-gradient(135deg, rgba(143,131,255,.95), var(--ana)); color: #fff; box-shadow: 0 8px 20px rgba(108,92,255,.35); }
.yan-alt { padding: 14px 16px 18px; border-top: 1px solid var(--murekkep-cizgi); display: flex; align-items: center; gap: 11px; }
.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff;
  background: linear-gradient(135deg, #a79dff, var(--ana));
}
.yan-kisi { min-width: 0; flex: 1; }
.yan-kisi b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yan-kisi span { font-size: .78rem; color: rgba(255,255,255,.5); }
.yan-cikis { border: 0; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; }
.yan-cikis:hover { background: var(--kirmizi); color: #fff; }

.govde { min-width: 0; display: flex; flex-direction: column; }
.ust {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px;
  background: rgba(244,245,250,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi);
}
.ust-baslik { font-size: 1.12rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-bosluk { flex: 1; }
.ust-tarih { color: var(--soluk); font-size: .9rem; white-space: nowrap; }
.menu-ac { display: inline-grid; place-items: center; flex: none; color: var(--soluk); border: 0; background: var(--yuzey); width: 40px; height: 40px; border-radius: 11px; font-size: 1.25rem; cursor: pointer; box-shadow: var(--golge); }
.icerik { padding: 18px 16px 40px; width: 100%; }
.perde { display: none; }

/* ---------- Sayfa başlığı ---------- */
.sayfa-bas { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.sayfa-bas h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.2px; }
.sayfa-bas p { color: var(--soluk); margin-top: 2px; }
.sayfa-bas .eylemler { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.geri { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); font-weight: 500; margin-bottom: 8px; }

/* ---------- Düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--cizgi-koyu); background: var(--yuzey); color: var(--metin); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.dugme:hover { background: #fafbff; border-color: var(--ana-kenar); text-decoration: none; }
.dugme:active { transform: translateY(1px); }
.dugme:focus-visible, .girdi:focus-visible, .menu-oge:focus-visible { outline: 3px solid rgba(108,92,255,.3); outline-offset: 1px; }
.dugme.ana { background: linear-gradient(135deg, #8073ff, var(--ana-koyu)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(108,92,255,.3); }
.dugme.ana:hover { background: linear-gradient(135deg, #8c80ff, #5d4eea); }
.dugme.yesil { background: var(--yesil); border-color: transparent; color: #fff; }
.dugme.tehlike { background: var(--kirmizi); border-color: transparent; color: #fff; }
.dugme.tehlike-acik { color: var(--kirmizi); }
.dugme.tehlike-acik:hover { background: var(--kirmizi-acik); border-color: #f5b5b7; }
.dugme.hayalet { border-color: transparent; background: transparent; color: var(--soluk); }
.dugme.hayalet:hover { background: #eceef6; color: var(--metin); }
.dugme.kucuk { height: 32px; padding: 0 11px; border-radius: 9px; font-size: .9rem; }
.dugme.kare { width: 34px; height: 34px; padding: 0; border-radius: 9px; }
.dugme[disabled] { opacity: .5; pointer-events: none; }
.dugme.genis { width: 100%; }
/* İşlem sürerken: dönen halka + parlayarak geçen ışık (ör. "Giriş yapılıyor…") */
.dugme.mesgul { position: relative; overflow: hidden; pointer-events: none; opacity: .92; }
.dugme.mesgul::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-100%); animation: dugme-isik 1.3s ease-in-out infinite; }
.donen { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: donen .7s linear infinite; }
.noktalar::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: noktalar 1.2s steps(1) infinite; }
@keyframes donen { to { transform: rotate(360deg); } }
@keyframes dugme-isik { to { transform: translateX(100%); } }
@keyframes noktalar { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .dugme.mesgul::after { animation: none; } .donen { animation-duration: 1.6s; } }

/* ---------- Kartlar ---------- */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); }
.kart-bas { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.kart-bas h2 { font-size: 1.05rem; font-weight: 700; }
.kart-bas .eylemler { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kart-govde { padding: 20px; }
.kart + .kart, .ozetler + .kart, .kart + .ozetler { margin-top: 18px; }
.ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ikili > .kart { margin-top: 0; }
.uclu-bir { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.uclu-bir > .kart { margin-top: 0; }

/* ---------- Özet kutuları ---------- */
.ozetler { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ozet { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 18px 18px 16px; display: flex; gap: 14px; align-items: flex-start; }
.ozet-simge { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.25rem; background: var(--ana-acik); color: var(--ana-koyu); }
.ozet-ad { color: var(--soluk); font-size: .86rem; font-weight: 600; }
.ozet-deger { font-size: 1.5rem; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ozet-alt { color: var(--soluk); font-size: .82rem; margin-top: 2px; }
.ozet.yesil .ozet-simge, .simge-yesil { background: var(--yesil-acik); color: var(--yesil); }
.ozet.kirmizi .ozet-simge, .simge-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.ozet.mavi .ozet-simge, .simge-mavi { background: var(--mavi-acik); color: var(--mavi); }
.ozet.turuncu .ozet-simge, .simge-turuncu { background: var(--turuncu-acik); color: var(--turuncu); }
.ozet.camgobegi .ozet-simge, .simge-camgobegi { background: var(--camgobegi-acik); color: var(--camgobegi); }

/* ---------- Araç çubuğu (arama + filtreler) ---------- */
.arac { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); }
.arac .bosluk { flex: 1; }
.ara { position: relative; flex: 1 1 260px; max-width: 420px; }
.ara i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--soluk-2); pointer-events: none; }
.ara .girdi { padding-left: 38px; }

/* ---------- Form ---------- */
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan > label, .alan > .etiket { font-size: .84rem; font-weight: 600; color: var(--soluk); }
.alan .ipucu { font-size: .8rem; color: var(--soluk-2); }
.alan .hata, .field-validation-error { font-size: .82rem; color: var(--kirmizi); }
.girdi {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cizgi-koyu); background: var(--yuzey);
  transition: border-color .15s, box-shadow .15s;
}
textarea.girdi { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
select.girdi { padding-right: 30px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236b7190' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.girdi:hover { border-color: var(--ana-kenar); }
.girdi:focus { outline: 0; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(108,92,255,.16); }
.girdi::placeholder { color: var(--soluk-2); }
.girdi[readonly], .girdi:disabled { background: var(--zemin); color: var(--soluk); }
.girdi.dar { width: auto; min-width: 150px; }
.girdi.buyuk { height: 48px; font-size: 1.15rem; font-weight: 600; }
.form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-izgara.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-izgara.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-izgara .tam { grid-column: 1 / -1; }
.onay { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 500; }
.onay input { width: 18px; height: 18px; accent-color: var(--ana); cursor: pointer; }
/* Aç / kapa anahtarı: <label class="anahtar"><input type="checkbox"><span></span> Metin</label> */
.anahtar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar span { flex: none; width: 40px; height: 23px; border-radius: 12px; background: var(--cizgi-koyu); position: relative; transition: background .15s; }
.anahtar span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.anahtar input:checked + span { background: var(--ana); }
.anahtar input:checked + span::after { transform: translateX(17px); }
.anahtar input:focus-visible + span { outline: 3px solid rgba(108,92,255,.3); }
/* Dilimli seçim: <div class="dilim"><label><input type="radio" name=".."><span>Metin</span></label>…</div> */
.dilim { display: inline-flex; padding: 4px; gap: 4px; background: #eceef6; border-radius: 12px; }
.dilim label { cursor: pointer; }
.dilim input { position: absolute; opacity: 0; }
.dilim span, .dilim a { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-weight: 600; color: var(--soluk); white-space: nowrap; }
.dilim a:hover { text-decoration: none; color: var(--metin); }
.dilim input:checked + span, .dilim a.secili { background: var(--yuzey); color: var(--ana-koyu); box-shadow: 0 1px 3px rgba(20,22,46,.14); }
.dilim input:focus-visible + span { outline: 3px solid rgba(108,92,255,.3); }

/* ---------- Tablo ---------- */
.tablo-sar { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; }
.tablo th {
  text-align: left; font-size: .76rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--soluk);
  padding: 11px 16px; background: #fafbfe; border-bottom: 1px solid var(--cizgi); white-space: nowrap;
}
.tablo th a { color: inherit; }
.tablo th.sag, .tablo td.sag { text-align: right; }
.tablo th.orta, .tablo td.orta { text-align: center; }
.tablo td { padding: 12px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: #fafbff; }
.tablo tfoot td { background: #fafbfe; font-weight: 700; border-top: 1px solid var(--cizgi); border-bottom: 0; }
.tablo .islem { width: 1%; white-space: nowrap; text-align: right; }
.tablo .islem > * { vertical-align: middle; }
.tablo .islem form { display: inline; }
.tablo .sec { width: 44px; text-align: center; }
.tablo .sec input { width: 17px; height: 17px; accent-color: var(--ana); cursor: pointer; }
.tablo.sik td { padding: 8px 16px; }
.tablo tr.tikla { cursor: pointer; }
.iki-satir b { display: block; font-weight: 600; }
.iki-satir span { color: var(--soluk); font-size: .85rem; }

/* ---------- Liste sayfası: sayfa kaymaz, yalnızca liste kayar ----------
   site.js sayfadaki ana listeyi (.tablo-sar) bulur ve body'ye "liste-sayfa" sınıfını ekler: başlık, özet kutuları ve filtreler yerinde
   durur; tablo başlığı sabit kalır, satırlar kendi alanında kayar; sayfalama listenin altında sabittir. Listeye yeterli yer
   kalmıyorsa (alçak ekran) ya da sayfa zaten ekrana sığıyorsa uygulanmaz. Telefonda uygulanmaz. Kapatmak için: <div class="tablo-sar" data-liste="yok"> */
@media (min-width: 901px) {
  body.liste-sayfa .kabuk { height: 100vh; min-height: 0; }
  body.liste-sayfa .govde { height: 100vh; min-height: 0; }
  body.liste-sayfa .icerik { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding-bottom: 16px; }
  body.liste-sayfa .ls-esnek { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  body.liste-sayfa .ls-izgara { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body.liste-sayfa .ls-izgara > * { min-height: 0; }
  body.liste-sayfa .icerik > *, body.liste-sayfa .ls-esnek > * { flex-shrink: 0; }
  body.liste-sayfa .ls-liste { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cizgi-koyu) transparent; }
  body.liste-sayfa .ls-liste thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--cizgi); }
  body.liste-sayfa .ls-liste tfoot td { position: sticky; bottom: 0; z-index: 2; box-shadow: inset 0 1px 0 var(--cizgi); }
  body.liste-sayfa .ls-liste::-webkit-scrollbar { width: 10px; height: 10px; }
  body.liste-sayfa .ls-liste::-webkit-scrollbar-thumb { background: var(--cizgi-koyu); border-radius: 5px; border: 2px solid var(--yuzey); }
  body.liste-sayfa .ls-liste::-webkit-scrollbar-thumb:hover { background: var(--soluk-2); }
  body.liste-sayfa .ls-liste::-webkit-scrollbar-track { background: transparent; }
}
/* Kayan alan: sayfanın üst kısmı (başlık, dönem, özet) sabit kalır, <div class="kayan-alan"> içindeki bölüm kendi içinde kayar.
   Alçak ekranda ve telefonda uygulanmaz (sayfa bütün olarak kayar). */
@media (min-width: 901px) and (min-height: 720px) {
  body:has(.icerik > .kayan-alan) .kabuk, body:has(.icerik > .kayan-alan) .govde { height: 100vh; min-height: 0; }
  .icerik:has(> .kayan-alan) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  .icerik:has(> .kayan-alan) > * { flex-shrink: 0; }
  .icerik > .kayan-alan { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 14px -16px 0 -6px; padding: 0 16px 20px 6px;
    border-top: 1px solid var(--cizgi); scrollbar-width: thin; scrollbar-color: var(--cizgi-koyu) transparent; }
  .icerik > .kayan-alan > :first-child { margin-top: 16px !important; }
}
@media print { .icerik > .kayan-alan { overflow: visible !important; } }
.ls-gizli { display: none !important; }
.ls-ozet-dugme { color: var(--ana-koyu); border-color: var(--ana-kenar); background: var(--ana-acik); }
@media (max-width: 900px) { .ls-ozet-dugme { display: none; } }
@media print {
  body.liste-sayfa .kabuk, body.liste-sayfa .govde, body.liste-sayfa .icerik { height: auto !important; display: block !important; }
  body.liste-sayfa .ls-liste { overflow: visible !important; }
}

/* ---------- Rozet ---------- */
.rozet { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: .78rem; font-weight: 700; background: #eceef6; color: var(--soluk); white-space: nowrap; }
.rozet.yesil { background: var(--yesil-acik); color: var(--yesil); }
.rozet.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet.mavi { background: var(--mavi-acik); color: var(--mavi); }
.rozet.mor { background: var(--ana-acik); color: var(--ana-koyu); }
.rozet.turuncu { background: var(--turuncu-acik); color: var(--turuncu); }
.rozet.camgobegi { background: var(--camgobegi-acik); color: var(--camgobegi); }
.rozet.sari { background: var(--sari-acik); color: #9a6f00; }

/* ---------- Sekmeler ---------- */
.sekmeler { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--cizgi); overflow-x: auto; }
.sekme { display: inline-flex; align-items: center; gap: 8px; padding: 14px 12px 12px; font-weight: 600; color: var(--soluk); border-bottom: 3px solid transparent; white-space: nowrap; }
.sekme:hover { color: var(--metin); text-decoration: none; }
.sekme.secili { color: var(--ana-koyu); border-bottom-color: var(--ana); }
.sekme .rozet { height: 20px; padding: 0 7px; }

/* ---------- Boş durum, sayfalama ---------- */
.bos { padding: 56px 20px; text-align: center; color: var(--soluk); }
.bos i { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--ana-acik); color: var(--ana-koyu); font-size: 1.7rem; margin-bottom: 12px; }
.bos b { display: block; color: var(--metin); font-size: 1.05rem; margin-bottom: 2px; }
.sayfalama { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--cizgi); }
.sayfalama .bilgi { color: var(--soluk); font-size: .88rem; margin-right: auto; }
.sayfalama a, .sayfalama span.no { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; font-weight: 600; color: var(--metin); }
.sayfalama a:hover { background: #eceef6; text-decoration: none; }
.sayfalama .secili { background: var(--ana); color: #fff; }
.sayfalama .pasif { color: var(--soluk-2); pointer-events: none; }

/* ---------- Pencere (dialog) ---------- */
dialog.pencere {
  border: 0; padding: 0; border-radius: 20px; background: var(--yuzey); color: var(--metin); box-shadow: var(--golge-buyuk);
  width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: hidden;
}
dialog.pencere.genis { width: min(820px, calc(100vw - 28px)); }
dialog.pencere.dar { width: min(430px, calc(100vw - 28px)); }
dialog.pencere[open] { display: flex; flex-direction: column; animation: pencere-ac .18s ease-out; }
dialog.pencere > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
dialog.pencere::backdrop { background: rgba(20,22,46,.5); backdrop-filter: blur(3px); }
@keyframes pencere-ac { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.pencere-bas { display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px; }
.pencere-bas .ozet-simge { width: 46px; height: 46px; }
.pencere-bas h3 { font-size: 1.15rem; font-weight: 700; }
.pencere-bas p { color: var(--soluk); font-size: .88rem; }
.pencere-bas .kapat { margin-left: auto; align-self: flex-start; }
.pencere-govde { padding: 6px 22px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.pencere-alt { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; background: #fafbfe; border-top: 1px solid var(--cizgi); }

/* ---------- Bilgi kutusu, bildirim ---------- */
.uyari { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--mavi-acik); color: #1c5db8; font-size: .92rem; }
.uyari.kirmizi { background: var(--kirmizi-acik); color: #b3272c; }
.uyari.sari { background: var(--sari-acik); color: #7d5a00; }
.uyari.yesil { background: var(--yesil-acik); color: #0d7a4a; }
.uyari i { font-size: 1.1rem; line-height: 1.3; }
.bildirimler { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.bildirim {
  display: flex; align-items: center; gap: 11px; min-width: 260px; max-width: 420px; padding: 13px 16px; border-radius: 14px; color: #fff;
  background: var(--murekkep); box-shadow: var(--golge-buyuk); animation: bildirim-gir .25s ease-out; font-weight: 500;
}
.bildirim i { font-size: 1.2rem; color: #4ade80; }
.bildirim.hata i { color: #ff8a8a; }
.bildirim.cikiyor { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
@keyframes bildirim-gir { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Açılır menü: <details class="acilir"><summary class="dugme">…</summary><div class="acilir-liste">…</div></details> ---------- */
.acilir { position: relative; display: inline-block; }
.acilir > summary { list-style: none; }
.acilir > summary::-webkit-details-marker { display: none; }
.acilir-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge-buyuk); }
.acilir-liste.sol { right: auto; left: 0; }
.acilir-liste a, .acilir-liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: none; border-radius: 9px; color: var(--metin); font-weight: 500; cursor: pointer; text-align: left; }
.acilir-liste a:hover, .acilir-liste button:hover { background: var(--zemin); text-decoration: none; }
.acilir-liste .tehlike { color: var(--kirmizi); }
.acilir-liste hr { border: 0; border-top: 1px solid var(--cizgi); margin: 5px 0; }
.acilir-liste i { color: var(--soluk); width: 18px; text-align: center; }
.acilir-liste .tehlike i { color: inherit; }

/* ---------- Çubuk grafik (yalnızca CSS): <div class="cubuklar"><div class="cubuk" style="--oran:.6" title="…"><span>Pzt</span></div>…</div> ---------- */
.cubuklar { display: flex; align-items: stretch; gap: 8px; height: 200px; padding-top: 8px; }
.cubuk { flex: 1; min-width: 6px; position: relative; }
.cubuk::before { content: ""; position: absolute; left: 50%; bottom: 24px; width: 100%; max-width: 44px; transform: translateX(-50%); height: calc(var(--oran, 0) * (100% - 24px)); min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #9a90ff, var(--ana)); transition: filter .15s; }
.cubuk:hover::before { filter: brightness(1.12); }
.cubuk span { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: .74rem; color: var(--soluk); white-space: nowrap; }
/* Yatay oran çubuğu: <div class="oran"><i style="width:40%"></i></div> */
.oran { height: 8px; border-radius: 4px; background: #eceef6; overflow: hidden; }
.oran i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #9a90ff, var(--ana)); }

/* ---------- Giriş sayfası ---------- */
.giris { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--yuzey); }
.giris-sahne {
  position: relative; overflow: hidden; color: #fff; padding: 44px 48px; display: flex; flex-direction: column;
  background: radial-gradient(640px 460px at 8% 12%, rgba(108,92,255,.55), transparent 70%),
              radial-gradient(520px 420px at 105% 62%, rgba(240,132,63,.26), transparent 70%),
              radial-gradient(520px 420px at 30% 110%, rgba(34,195,238,.2), transparent 70%), linear-gradient(160deg, #171a36, var(--murekkep));
}
.giris-sahne::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; }
.giris-sahne > * { position: relative; }
.giris-saat { font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 700; letter-spacing: -2px; line-height: 1; margin-top: auto;
  background: linear-gradient(100deg, #fff 0%, #c9c2ff 45%, #ffb49e 72%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.giris-tarih { color: rgba(255,255,255,.6); font-size: 1.1rem; margin-top: 10px; }
.giris-ozellikler { margin: 34px 0 auto; display: grid; gap: 12px; max-width: 460px; }
.giris-ozellik { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 16px; background: rgba(26,28,58,.72); border: 1px solid rgba(255,255,255,.09); }
.giris-ozellik i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: linear-gradient(135deg, var(--ana), #8f83ff); }
.giris-ozellik b { display: block; font-weight: 600; }
.giris-ozellik span { color: rgba(255,255,255,.55); font-size: .86rem; }
.giris-telif { color: rgba(255,255,255,.42); font-size: .84rem; }
.giris-form { display: grid; place-items: center; padding: 32px 24px; }
.giris-kutu { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; }
.giris-kutu h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.4px; }
.giris-cip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--ana-acik); color: var(--ana-koyu); font-size: .84rem; font-weight: 600; }
.sifre-kutu { position: relative; }
.sifre-kutu .girdi { padding-right: 46px; }
.sifre-kutu button { position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; border: 0; border-radius: 9px; background: none; color: var(--soluk); cursor: pointer; }
.sifre-kutu button:hover { background: var(--zemin); color: var(--ana-koyu); }
.giris-destek { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--cizgi); background: #fff; font-size: .92rem; }
.giris-destek b i { color: var(--ana); margin-right: 4px; }
.giris-destek > div { display: flex; flex-wrap: wrap; gap: 8px; }
.giris-destek > div:empty { display: none; }
.lisans-serit { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 11px 16px; border-radius: 14px; background: var(--sari-acik); color: #7d5a00; font-size: .92rem; }
.lisans-serit i { font-size: 1.1rem; }
.lisans-serit.kirmizi { background: var(--kirmizi-acik); color: #b3272c; }
.salla { animation: salla .42s; }
@keyframes salla { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------- Dar ekran ---------- */
@media (max-width: 1100px) {
  .ikili, .uclu-bir { grid-template-columns: minmax(0, 1fr); }
  .form-izgara.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .yan, html.menu-kapali .yan { position: fixed; left: 0; top: 0; z-index: 60; margin-left: 0; visibility: visible; transform: translateX(-100%); transition: transform .22s ease; }
  body.menu-acik .yan { transform: none; }
  body.menu-acik .perde { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(20,22,46,.5); }
  .ust-tarih { display: none; }
}
@media (max-width: 640px) {
  .form-izgara, .form-izgara.uc, .form-izgara.dort { grid-template-columns: minmax(0, 1fr); }
  .sayfa-bas h1 { font-size: 1.35rem; }
  .sayfa-bas .eylemler { margin-left: 0; width: 100%; }
  .tablo th, .tablo td { padding-left: 12px; padding-right: 12px; }
  .ozet-deger { font-size: 1.3rem; }
  .cubuklar { gap: 4px; }
  .cubuk:nth-child(even) span { visibility: hidden; }
}
@media print {
  .yan, .ust, .arac, .sayfalama, .eylemler, .islem, .bildirimler, .geri, dialog { display: none !important; }
  .kabuk { display: block; } .icerik { padding: 0; } .kart { box-shadow: none; }
}