/* Fiş Kayıt: bilgisayar (web) ekranlarının stilleri. Yalnız geniş ekranda (min-width: 1024px) etkili olur;
 * telefon görünümü app.css'te kalır. Renk ve yazı tipi değişkenleri app.css'teki :root'tan gelir. */
@media (min-width: 1024px) {
  :root { --w-ust: 64px; --w-menu: 240px; --w-yan: 32px; --w-icerik: 1440px; --w-hover: #FAF8F3; --w-baslik-zemin: #F7F4EE; --w-golge: 0 1px 2px rgba(26, 28, 30, 0.05); }

  /* ------------------------------------------------------------ odak halkası (klavye) */
  body.panelli :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
  body.panelli .w-tablo tbody tr:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }

  /* ------------------------------------------------------------ sol menü eklemeleri */
  .alt-menu .ic-menu { align-items: stretch; }
  .alt-menu .ic-menu > a[href="#/profil"] { margin-top: auto; }
  .alt-menu a > span:last-child { display: flex; align-items: center; flex: 1; min-width: 0; }
  .alt-menu .menu-sayac { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--pri); color: #FFF;
    font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
  .alt-menu .fab .rozet { display: none; }   /* süren yükleme sayısı "Toplu yükle" satırında görünür */
  .alt-menu .fab:hover { background: var(--pri-dark); }

  /* ------------------------------------------------------------ üst çubuk */
  /* İçerik en çok --w-icerik genişliğinde bir sütunda durur (geniş ekranda ortada). Üst çubuğun iç boşluğu aynı
     sütuna göre hesaplanır: başlık içeriğin sol kenarıyla, kullanıcı düğmesi sağ kenarıyla hizalı kalır (100% = sayfa genişliği). */
  .w-ust { position: sticky; top: 0; z-index: 18; height: var(--w-ust); margin-left: var(--w-menu); display: flex; align-items: center; gap: 20px;
    padding: 0 max(var(--w-yan), calc((100% - var(--w-menu) - var(--w-icerik)) / 2 + var(--w-yan))); background: var(--bg); border-bottom: 1px solid var(--line); }
  .w-ust[hidden] { display: none; }
  .w-ust-baslik { margin: 0; min-width: 150px; font-family: var(--disp); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
  .w-ara { position: relative; flex: 1 1 auto; max-width: 480px; display: flex; align-items: center; }
  .w-ara > svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
  .w-ara input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--field); background: var(--card); padding: 0 40px 0 38px; font-size: 14px; }
  .w-ara input:hover { border-color: #C4BCAE; }
  .w-ara input:focus { outline: 2px solid var(--pri); outline-offset: 0; border-color: var(--pri); }
  .w-ara kbd { position: absolute; right: 10px; font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--muted); border: 1px solid var(--line);
    border-radius: 6px; padding: 0 6px; background: var(--bg); pointer-events: none; }
  .w-ara input:focus ~ kbd, .w-ara input:not(:placeholder-shown) ~ kbd { display: none; }
  .w-ust-sag { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
  .w-firma { display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 300px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--field);
    background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink); }
  .w-firma:hover { border-color: #BDB5A6; background: var(--w-hover); }
  .w-firma > svg { color: var(--muted); }
  .w-firma .kod { font-family: var(--mono); font-size: 12.5px; color: var(--pri); background: var(--pri-soft); border-radius: 6px; padding: 2px 6px; }
  .w-firma .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .w-kullanici { position: relative; }
  .w-avatar { width: 40px; height: 40px; border-radius: 20px; border: 0; background: var(--pri-soft); color: var(--pri); font-weight: 700; font-size: 14px; }
  .w-avatar:hover, .w-avatar[aria-expanded="true"] { background: #D2E1EC; }
  .w-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(26, 28, 30, 0.16); padding: 6px; display: flex; flex-direction: column; z-index: 30; animation: belir 0.12s ease-out; }
  .w-menu[hidden] { display: none; }
  .w-menu-bas { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .w-menu-bas b { display: block; font-size: 14.5px; }
  .w-menu-bas small { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
  .w-menu [role=menuitem] { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; background: none; border-radius: 8px;
    font-size: 14px; font-weight: 500; text-align: left; color: var(--ink); }
  .w-menu [role=menuitem] svg { color: var(--muted); }
  .w-menu [role=menuitem]:hover, .w-menu [role=menuitem]:focus-visible { background: var(--sand); outline: none; }
  .w-menu .kirmizi, .w-menu .kirmizi svg { color: var(--red); }

  /* ------------------------------------------------------------ sayfa iskeleti ve ortak parçalar */
  body.panelli #uyg { min-height: calc(100dvh - var(--w-ust)); }
  .w-sayfa { max-width: var(--w-icerik); margin: 0 auto; padding: 24px var(--w-yan) 104px; display: flex; flex-direction: column; gap: 20px; }
  .w-sayfa-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .w-h1 { margin: 0; font-family: var(--disp); font-size: 28px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
  .w-alt-yazi { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
  .w-bas-sag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .w-soluk { color: var(--muted); }
  .w-gorunmez { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .w-sayfa .amber { color: var(--amb); }
  .w-sayfa .kirmizi { color: var(--red); }
  .w-sayfa .yesil { color: var(--grn); }
  .w-sayfa .mavi { color: var(--pri); }

  .w-kart { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--w-golge); min-width: 0; }
  .w-kart h2 { margin: 0; font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
  .w-kart h2 svg { color: var(--pri); }
  .w-kart p { margin: 0; }
  .w-kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
  .w-kart-eylem { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .w-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; font-size: 13.5px; font-weight: 600; color: var(--pri); white-space: nowrap; }
  .w-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .w-izgara { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .w-izgara.iki { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Düğmeler */
  .w-btn { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid #CFC8BB; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: background 0.12s, border-color 0.12s; text-decoration: none; }
  .w-btn:hover:not(:disabled) { background: var(--w-hover); border-color: #BDB5A6; }
  .w-btn:active:not(:disabled) { transform: translateY(1px); }
  .w-btn:disabled { opacity: 0.5; cursor: default; }
  .w-btn .yuvak { display: inline-flex; }
  .w-btn.birincil { background: var(--pri); border-color: var(--pri); color: #FFF; }
  .w-btn.birincil:hover:not(:disabled) { background: var(--pri-dark); border-color: var(--pri-dark); }
  .w-btn.tehlike { color: var(--red); border-color: var(--red-line); }
  .w-btn.tehlike:hover:not(:disabled) { background: var(--red-soft); border-color: var(--red-line); }
  .w-btn.hayalet { border-color: transparent; background: transparent; color: var(--pri); }
  .w-btn.hayalet:hover:not(:disabled) { background: var(--pri-soft); border-color: transparent; }
  .w-btn.w-kucuk { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 6px; }
  .w-ikon-btn { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
  .w-ikon-btn:hover { background: var(--sand); color: var(--ink); }
  .w-btn.w-ikon-btn { width: 38px; padding: 0; }

  /* Ay seçici */
  .w-ay { display: inline-flex; align-items: center; height: 38px; border: 1px solid #CFC8BB; border-radius: 10px; background: var(--card); overflow: hidden; }
  .w-ay button { height: 36px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
  .w-ay button:not(.w-ay-ad) { width: 36px; }
  .w-ay button:hover:not(:disabled) { background: var(--w-hover); }
  .w-ay button:disabled { opacity: 0.3; cursor: default; }
  .w-ay-ad { min-width: 130px; padding: 0 8px; font-size: 14px; font-weight: 600; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; }

  /* Durum hapı, sayı, kod */
  .w-durum { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    background: var(--grn-soft); color: var(--grn); }
  .w-durum::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex-shrink: 0; }
  .w-durum.amber { background: var(--amb-soft); color: var(--amb); }
  .w-durum.gri { background: var(--sand); color: var(--muted); }
  .w-durum.mavi { background: var(--pri-soft); color: var(--pri); }
  .w-durum.kirmizi { background: var(--red-soft); color: var(--red); }
  .w-durum.yesil { background: var(--grn-soft); color: var(--grn); }
  .w-sayi { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12.5px; font-weight: 700; }
  .w-sayi.amber { background: var(--amb-soft); color: var(--amb); }
  .w-kod { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--pri-soft); color: var(--pri);
    font-family: var(--mono); font-size: 12px; font-weight: 600; }
  .w-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; vertical-align: -1px; }
  .w-mini-ilerleme { display: inline-block; width: 64px; height: 4px; border-radius: 2px; background: var(--pri-soft); overflow: hidden; margin-left: 10px; vertical-align: middle; }
  .w-mini-ilerleme > span { display: block; height: 4px; border-radius: 2px; background: var(--pri); transition: width 0.4s; }
  td .akan { display: inline-block; width: 56px; margin-left: 10px; vertical-align: middle; }
  .w-iskelet-sayi { display: inline-block; width: 26px; height: 10px; margin: 0; vertical-align: middle; }

  /* Boş durum */
  .w-bos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 16px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
  .w-bos .yuvak { width: 52px; height: 52px; border-radius: 26px; background: var(--sand); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
  .w-bos b { color: var(--ink); font-size: 15.5px; }
  .w-bos span { max-width: 420px; }
  .w-bos .w-btn { margin-top: 8px; }
  #wTablo > .w-bos { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 56px 16px; }

  /* ------------------------------------------------------------ tablolar */
  .w-tablo-kap { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: clip; box-shadow: var(--w-golge); }
  .w-kart .w-tablo-kap { box-shadow: none; border-radius: 10px; }
  .w-tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; }
  .w-tablo th { position: sticky; top: var(--w-ust); z-index: 2; background: var(--w-baslik-zemin); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em; padding: 0 12px; height: 40px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .w-tablo tbody th { position: static; background: none; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); font-weight: 600; height: auto; }
  .w-tablo td, .w-tablo tbody th { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
  .w-tablo tbody tr:last-child td, .w-tablo tbody tr:last-child th { border-bottom: 0; }
  .w-tablo .sag { text-align: right; }
  .w-tablo td.mono { white-space: nowrap; }
  .w-tablo tbody tr { transition: background 0.08s; }
  .w-tablo tbody tr:hover > * { background: var(--w-hover); }
  .w-tablo tfoot td, .w-tablo tfoot th { position: sticky; bottom: 0; background: var(--w-baslik-zemin); font-weight: 700; padding: 11px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
  .w-sirala { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
  .w-sirala:hover { color: var(--ink); }
  .w-sirala .ok { display: inline-flex; opacity: 0; transition: transform 0.12s; }
  .w-sirala:hover .ok { opacity: 0.45; }
  .w-sirala.aktif { color: var(--ink); }
  .w-sirala.aktif .ok { opacity: 1; color: var(--pri); }
  .w-sirala .ok.yukari { transform: rotate(180deg); }
  th.sag .w-sirala { flex-direction: row-reverse; }

  /* Fiş tablosu */
  .w-fis-tablo tbody tr { cursor: pointer; }
  .w-fis-tablo tbody tr.secili > * { background: var(--pri-soft); }
  .w-fis-tablo tbody tr.secili:hover > * { background: #D8E5EF; }
  .w-fis-tablo tbody tr.kontrolde > td:first-child { box-shadow: inset 3px 0 0 #D08A1E; }
  .w-fis-tablo tbody tr.iptal td:not(.s-sec):not(.s-durum) { color: var(--muted); text-decoration: line-through; }
  .w-fis-tablo .s-sec { width: 44px; padding: 0; text-align: center; }
  .w-fis-tablo .s-sec label { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; cursor: pointer; }
  .w-fis-tablo input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--pri); cursor: pointer; }
  .w-fis-tablo .s-tarih { width: 118px; }
  .w-fis-tablo .s-vkn { width: 120px; }
  .w-fis-tablo .s-belge { width: 128px; }
  .w-fis-tablo .s-kat { width: 136px; }
  .w-fis-tablo .s-kdv { width: 104px; }
  .w-fis-tablo .s-toplam { width: 120px; }
  .w-fis-tablo .s-firma { width: 84px; }
  .w-fis-tablo .s-durum { width: 134px; }
  .w-fis-tablo td.s-tarih, .w-fis-tablo td.s-vkn { font-size: 13.5px; }
  .w-fis-tablo td.s-satici { white-space: nowrap; }
  .w-fis-tablo .s-satici .ad { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .w-fis-tablo .s-satici small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
  .w-fis-tablo .s-satici small.amber { color: var(--amb); }
  .w-fis-tablo td.s-vkn.amber { color: var(--amb); }
  .w-fis-tablo tbody td.s-belge, .w-fis-tablo tbody td.s-kat { white-space: nowrap; color: #3E3B36; }
  .w-fis-tablo tfoot td { font-size: 13.5px; }

  /* Araç çubuğu (süzgeçler) */
  .w-arac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .w-arac-sag { margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
  .w-arac-sag b { color: var(--ink); }
  .w-select { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 2px 0 12px; border: 1px solid #CFC8BB; border-radius: 10px; background: var(--card);
    font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
  .w-select:hover { border-color: #BDB5A6; }
  .w-select:focus-within { outline: 2px solid var(--pri); outline-offset: 1px; }
  .w-select select { border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink); height: 36px; padding: 0 6px; cursor: pointer; max-width: 240px; }
  .w-select select:focus-visible { outline: none; }
  .w-segment { display: inline-flex; background: #E9E3D8; border-radius: 10px; padding: 3px; gap: 2px; }
  .w-segment button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font-size: 13.5px; font-weight: 600; color: var(--muted);
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  .w-segment button:hover { color: var(--ink); }
  .w-segment button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(26, 28, 30, 0.14); }
  .w-segment .sayi { font-family: var(--mono); font-size: 11.5px; font-weight: 600; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgba(26, 28, 30, 0.07);
    display: inline-flex; align-items: center; justify-content: center; }
  .w-segment .sayi.amber { background: var(--amb-soft); color: var(--amb); }
  .w-cipler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -8px; }
  .w-cipler[hidden] { display: none; }
  .w-cip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 12px; border-radius: 15px; background: var(--pri-soft); color: var(--pri);
    font-size: 13px; font-weight: 600; max-width: 420px; }
  .w-cip button { width: 24px; height: 24px; border-radius: 12px; border: 0; background: none; color: inherit; display: inline-flex; align-items: center; justify-content: center; }
  .w-cip button:hover { background: #C9DAE8; }
  .w-secim-bant { background: var(--pri-soft); color: var(--pri); border-radius: 10px; padding: 9px 14px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .w-sayfalama { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 14px; font-size: 13.5px; }
  .w-sayfalama > span:first-child { margin-right: auto; }
  .w-sayfalama button { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: none; font-weight: 600; font-size: 13.5px;
    display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
  .w-sayfalama button:hover:not(:disabled) { background: var(--card); border-color: var(--line); }
  .w-sayfalama button[aria-current="page"] { background: var(--ink); color: #FFF; }
  .w-sayfalama button:disabled { opacity: 0.35; cursor: default; }

  .w-klavye { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; }
  .w-klavye kbd { font-family: var(--mono); font-size: 11.5px; line-height: 18px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px;
    border-radius: 6px; background: var(--card); color: var(--ink); }

  /* Bildirim: bilgisayarda sağ altta (arama ve başlığın üstüne binmesin); toplu işlem çubuğu varsa onun üstünde */
  #toast { top: auto; bottom: 24px; left: auto; right: 24px; transform: none; max-width: 420px; }
  body:has(.w-toplu) #toast { bottom: 92px; }

  /* Toplu işlem çubuğu (seçim varken altta yüzer) */
  .w-toplu { position: fixed; bottom: 24px; left: calc(var(--w-menu) + var(--w-yan)); right: var(--w-yan); margin: 0 auto; width: fit-content; max-width: calc(100vw - var(--w-menu) - 2 * var(--w-yan));
    z-index: 25; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 14px; background: var(--ink); color: #FFF;
    box-shadow: 0 14px 36px rgba(26, 28, 30, 0.3); animation: yuksel 0.18s ease-out; }
  .w-toplu-sayi { display: inline-flex; align-items: baseline; gap: 10px; margin-right: 8px; font-size: 14px; white-space: nowrap; }
  .w-toplu-sayi .mono { color: #C9C4BA; font-size: 13.5px; }
  .w-toplu-not { font-size: 12.5px; color: #F6DDB0; margin: 0 4px; white-space: nowrap; }
  .w-toplu .w-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #FFF; }
  .w-toplu .w-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
  .w-toplu .w-btn.birincil { background: #FFF; border-color: #FFF; color: var(--ink); }
  .w-toplu .w-btn.birincil:hover:not(:disabled) { background: #EDE8DF; }
  .w-toplu .w-btn.tehlike { color: #FFB8AE; }
  .w-toplu .w-btn.hayalet { background: transparent; border-color: transparent; color: #C9C4BA; }
  .w-toplu :focus-visible { outline-color: #9CC3E6 !important; }

  /* ------------------------------------------------------------ ana sayfa (panel) */
  .w-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .w-kpi-kart { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
    min-height: 144px; box-shadow: var(--w-golge); min-width: 0; }
  .w-kpi-kart .etiket { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: baseline; gap: 6px; }
  .w-kpi-kart .etiket small { font-weight: 500; font-size: 12px; opacity: 0.8; }
  .w-kpi-kart .deger { font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere; margin-bottom: auto; }
  .w-kpi-kart .alt { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
  .w-kpi-kart .alt b { color: var(--ink); font-weight: 600; }
  .w-kpi-kart .alt.kisalt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .w-kpi-kart .alt.yesil { color: var(--grn); font-weight: 600; }
  .w-kpi-kart.vurgu { background: var(--pri); border-color: var(--pri); color: #FFF; }
  .w-kpi-kart.vurgu .etiket, .w-kpi-kart.vurgu .alt { color: var(--pri-txt); }
  .w-kpi-kart.vurgu .alt b { color: #FFF; }
  .w-kpi-kart.uyari { border-color: var(--amb-mid); background: linear-gradient(180deg, #FFFBF3, var(--card)); }
  .w-kpi-kart.uyari .deger { color: var(--amb); }
  .w-kpi-kart .w-link { margin-top: 2px; }
  .w-oran.oran-cubugu { background: var(--sand); height: 6px; margin-top: 4px; }
  .w-oran.oran-cubugu span { height: 6px; }
  .w-oranlar { flex-wrap: wrap; gap: 4px 12px !important; }
  .w-oranlar > span { display: inline-flex; align-items: center; gap: 5px; }
  .w-oranlar i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

  .w-yigin { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--sand); gap: 2px; }
  .w-yigin span { display: block; height: 12px; min-width: 3px; }
  .w-mini-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
  .w-mini-tablo th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 8px 8px;
    border-bottom: 1px solid var(--line); white-space: nowrap; }
  .w-mini-tablo tbody th, .w-mini-tablo tfoot th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); font-weight: 600; padding: 9px 8px; }
  .w-mini-tablo td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .w-mini-tablo tbody tr:last-child > * { border-bottom: 0; }
  .w-mini-tablo tfoot > tr > * { border-top: 1px solid var(--line); font-weight: 700; padding-top: 10px; }
  .w-mini-tablo .sag { text-align: right; }
  .w-mini-tablo td.mono { white-space: nowrap; }
  .w-mini-tablo tbody tr:hover > * { background: var(--w-hover); }
  .w-is-tablo { table-layout: fixed; }
  .w-is-tablo th:nth-child(1) { width: auto; }
  .w-is-tablo th:nth-child(2) { width: 120px; }
  .w-is-tablo th:nth-child(3) { width: 190px; }
  .w-is-tablo th:nth-child(4) { width: 64px; }
  .w-is-tablo th:nth-child(5) { width: 88px; }
  .w-is-tablo td:first-child .ad { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-is-tablo td small { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-is-tablo td { white-space: nowrap; }
  .w-hizli .w-hedef-not b { color: var(--ink); }
  .w-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .w-liste li + li { border-top: 1px solid var(--line); }
  .w-liste a { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; color: var(--ink); }
  .w-liste a:hover { background: var(--w-hover); }
  .w-liste .orta { flex: 1; min-width: 0; }
  .w-liste b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-liste small { display: block; font-size: 12.5px; color: var(--amb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-liste .mono { font-weight: 600; font-size: 14px; white-space: nowrap; }
  .w-kart .w-bos { padding: 24px 12px; }

  /* ------------------------------------------------------------ bırakma alanı ve toplu yükleme */
  .w-birak { border: 2px dashed #C9C1B2; border-radius: 18px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; padding: 36px 28px; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
  .w-birak:hover { border-color: #9DB6CB; }
  .w-birak.uzerinde { border-color: var(--pri); background: var(--pri-soft); box-shadow: 0 0 0 6px rgba(28, 74, 110, 0.08); }
  .w-birak-ikon { width: 64px; height: 64px; border-radius: 32px; background: var(--pri-soft); color: var(--pri); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
  .w-birak.uzerinde .w-birak-ikon { background: var(--pri); color: #FFF; }
  .w-birak-baslik { font-family: var(--disp); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; max-width: 520px; line-height: 1.2; }
  .w-birak-dugmeler { display: flex; gap: 10px; margin-top: 8px; }
  .w-birak-dugmeler .w-btn { height: 42px; padding: 0 18px; }
  .w-bicimler { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); background: var(--sand); border-radius: 8px; padding: 4px 10px; margin-top: 4px; }
  .w-birak.w-kucuk { padding: 22px 16px; gap: 6px; border-radius: 14px; flex: 1; }
  .w-birak.w-kucuk .w-birak-ikon { width: 48px; height: 48px; border-radius: 24px; }
  .w-birak.w-kucuk b { font-size: 15px; }
  .w-birak.w-kucuk .w-btn { margin-top: 6px; }
  .w-yukle-ust { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: stretch; }
  .w-yukle-ust .w-birak { min-height: 340px; }
  .w-yukle-yan { display: flex; flex-direction: column; gap: 16px; }
  #wHedef { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  #wHedef .kucuk { line-height: 1.45; }
  #wHedef .w-alan { align-self: stretch; }
  .w-alan { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .w-alan select { height: 40px; border-radius: 10px; border: 1px solid #CFC8BB; background: var(--card); padding: 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
  .w-ipucu ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.45; color: #3E3B36; }
  .w-ipucu li::marker { color: var(--pri); }
  .w-kuyruk-ozet { display: flex; flex-direction: column; gap: 10px; }
  .w-sayilar { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
  .w-sayilar b { color: inherit; font-size: 16px; font-variant-numeric: tabular-nums; margin-right: 2px; }
  .w-sayilar > span:not([class]) b { color: var(--ink); }
  .w-kuyruk-tablo .s-no { width: 52px; }
  .w-kuyruk-tablo .s-asama { width: 230px; }
  .w-kuyruk-tablo .s-sayi { width: 84px; }
  .w-kuyruk-tablo .s-islem { width: 132px; text-align: right; }
  .w-kuyruk-tablo td.s-islem { white-space: nowrap; }
  .w-kuyruk-tablo td.s-asama { white-space: nowrap; }
  .w-kuyruk-tablo .s-ad .ad { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w-kuyruk-tablo .s-ad small { display: block; font-size: 12.5px; line-height: 1.35; white-space: normal; margin-top: 2px; }
  .w-kuyruk-tablo .s-ad small.w-soluk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-kuyruk-tablo tr.hatali > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
  .w-kuyruk { scroll-margin-top: calc(var(--w-ust) + 16px); }   /* yükleme başlayınca kaydırılınca üst çubuğun altında kalmasın */

  /* ------------------------------------------------------------ raporlar */
  .w-raporlar .w-mini-tablo .s-pay { width: 34%; }
  .w-pay { display: flex; align-items: center; gap: 10px; }
  .w-pay .cubuk { flex: 1; height: 6px; background: var(--sand); }
  .w-pay .cubuk > span { display: block; height: 6px; border-radius: 3px; }
  .w-pay .mono { width: 52px; text-align: right; font-size: 12.5px; }
  .w-ay-tablo tbody tr.secili > * { background: var(--pri-soft); }
  .w-ay-tablo .s-islem, .w-raporlar .s-islem2 { text-align: right; }
  .w-ay-tablo th.s-islem { width: 110px; }
  /* Firma bazında: sayı ve düğme sütunları içeriği kadar, firma adı kalan yerin tamamını alır (uzun ad … ile kısalır) */
  .w-firma-tablo { table-layout: auto; }
  .w-firma-tablo th, .w-firma-tablo td { width: 1px; white-space: nowrap; }
  .w-firma-tablo th.s-firma, .w-firma-tablo .s-firma-ad { width: 100%; }
  .w-firma-tablo .s-firma-ad { max-width: 0; }
  .w-raporlar td.s-islem2 .w-btn { vertical-align: middle; }   /* simgeli ve simgesiz düğme aynı hizada */
  .w-raporlar td.s-islem2 .w-btn + .w-btn { margin-left: 6px; }
  .w-yakinda { flex-direction: row; align-items: center; gap: 14px; background: transparent; border-style: dashed; box-shadow: none; }
  .w-yakinda .yuvak { width: 40px; height: 40px; border-radius: 12px; background: var(--sand); color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .w-yakinda b { display: block; font-size: 14px; }
  .w-yakinda small { display: block; font-size: 13px; color: var(--muted); }

  /* ------------------------------------------------------------ telefon ekranları panelin içinde (firmalar, profil, yönetim, fiş, okuma geçmişi) */
  /* Kendi genişliği daha dar olan ekran da içerik sütununun sol kenarından başlar (üst çubuktaki başlıkla hizalı) */
  body.panelli .ekran { padding-top: 24px; padding-left: var(--w-yan); padding-right: var(--w-yan);
    margin-left: max(0px, calc((100% - var(--w-icerik)) / 2)); margin-right: auto; }
  body.panelli .ekran.ust-barli { padding-top: 12px; }
  /* Başlık üst çubukta; telefonun üst barında geri düğmesi ve yan eylem kalır */
  body.panelli .ekran > .ust-bar { height: 44px; margin: 0 0 4px -6px; }
  body.panelli .ekran > .ust-bar h1 { visibility: hidden; }
  body.panelli .ekran > .ust-bar > a.yuvarlak { width: auto; padding: 0 12px 0 6px; gap: 4px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--pri); }
  body.panelli .ekran > .ust-bar > a.yuvarlak::after { content: "Geri"; }
  body.panelli .ekran > .ust-bar > a.yuvarlak:hover { background: var(--pri-soft); }
  body.panelli .ekran > .ust-bar .yan { width: auto; min-width: 44px; }
  body.panelli .yuvarlak:hover { background: var(--sand); }
  body.panelli .btn:hover:not(:disabled) { filter: brightness(0.97); }
  body.panelli .satir:hover:not(:disabled), body.panelli .eylem:hover:not(:disabled) { background: var(--w-hover); }
  body.panelli .kart.liste .satir, body.panelli .kart.liste .eylem { margin: 0 -16px; padding-left: 16px; padding-right: 16px; width: calc(100% + 32px); }

  /* Firmalar ve Yönetim bilgisayarda sol menüde: telefondaki "Profil'e geri" düğmesi gereksiz */
  body.panelli:is([data-rota="firmalar"], [data-rota="yonetim"]) .ekran > .ust-bar > a.yuvarlak { visibility: hidden; }
  body.panelli[data-rota="firmalar"] .ekran > .ust-bar .yan .yuvarlak { width: auto; height: 38px; padding: 0 14px 0 10px; gap: 6px; border-radius: 10px;
    border: 1px solid var(--pri); background: var(--pri); color: #FFF; font-size: 14px; font-weight: 600; white-space: nowrap; }
  body.panelli[data-rota="firmalar"] .ekran > .ust-bar .yan .yuvarlak::after { content: "Yeni firma"; }
  body.panelli[data-rota="firmalar"] .ekran > .ust-bar .yan .yuvarlak:hover { background: var(--pri-dark); }

  /* Firmalar: kartlar ızgarada */
  body.panelli[data-rota="firmalar"] .ekran { max-width: var(--w-icerik); display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
  body.panelli[data-rota="firmalar"] .ekran > :not(.firma-kart) { grid-column: 1 / -1; }
  body.panelli[data-rota="firmalar"] .ekran > .ay-secici { width: 320px; justify-self: start; }
  body.panelli[data-rota="firmalar"] .ekran > .btn-hayalet { width: auto; justify-self: start; }
  body.panelli[data-rota="firmalar"] .firma-kart { height: 100%; }
  body.panelli[data-rota="firmalar"] .firma-kart .rakam { margin-top: auto; }

  /* Profil: iki sütun */
  body.panelli[data-rota="profil"] .ekran { max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
  body.panelli[data-rota="profil"] .ekran > :first-child, body.panelli[data-rota="profil"] .ekran > p { grid-column: 1 / -1; }
  body.panelli[data-rota="profil"] .ekran > p { text-align: left !important; }

  /* Yönetim: kişi kartları iki sütun */
  body.panelli[data-rota="yonetim"] .ekran { max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
  body.panelli[data-rota="yonetim"] .ekran > :not(.kisi) { grid-column: 1 / -1; }
  body.panelli[data-rota="yonetim"] .kisi { height: 100%; }

  /* Okuma geçmişi ve son çekim */
  body.panelli:is([data-rota="kuyruk"], [data-rota="son"]) .ekran { max-width: 880px; }
  body.panelli .is-satiri { transition: border-color 0.12s; }
  body.panelli a.is-satiri:hover { border-color: #C4BCAE; }

  /* Fiş ayrıntısı */
  body.panelli[data-rota="fis"] .ekran.genis-ekran { max-width: 1320px; }
  body.panelli .fis-gorsel .gorsel-kutu { height: calc(100vh - var(--w-ust) - 150px); }
  body.panelli .fis-gorsel { top: calc(var(--w-ust) + 16px); }
  body.panelli .kat-cip:hover:not([aria-pressed="true"]) { border-color: #BDB5A6; background: var(--w-hover); }

  /* Alt sayfalar (pencere) biraz daha geniş ve gölgeli */
  .sayfa-alt { box-shadow: 0 24px 60px rgba(20, 22, 24, 0.28); }
}

/* Orta genişlik: fiş tablosunda bazı sütunlar gizlenir (fiş açılınca hepsi görünür), ızgaralar daralır */
@media (min-width: 1024px) and (max-width: 1599px) {
  .w-fis-tablo.firmali .s-belge { display: none; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .w-fis-tablo .s-belge, .w-fis-tablo.firmali .s-vkn { display: none; }
  .w-kpi-kart .deger { font-size: 26px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --w-yan: 24px; --w-menu: 208px; }
  .alt-menu { width: var(--w-menu); }
  body.panelli #uyg { margin-left: var(--w-menu); }
  body.panelli .eylem-cubugu { left: var(--w-menu); }
  .w-fis-tablo .s-vkn, .w-fis-tablo .s-kat { display: none; }
  .w-fis-tablo .s-tarih { width: 106px; }
  .w-fis-tablo .s-kdv { width: 96px; }
  .w-fis-tablo .s-toplam { width: 112px; }
  .w-fis-tablo .s-firma { width: 72px; }
  .w-fis-tablo .s-durum { width: 124px; }
  .w-fis-tablo td, .w-fis-tablo th { padding-left: 10px; padding-right: 10px; }
  .w-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-izgara, .w-izgara.iki { grid-template-columns: minmax(0, 1fr); }
  /* Toplu yükle: bırakma alanı alçalır, yan kartlar yan yana; okuma kuyruğu kısa ekranda da ilk bakışta görünür */
  .w-yukle-ust { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .w-yukle-ust .w-birak { min-height: 0; padding: 24px 24px 22px; gap: 8px; }
  .w-yukle-ust .w-birak-ikon { width: 52px; height: 52px; border-radius: 26px; margin-bottom: 0; }
  .w-yukle-ust .w-birak-baslik { font-size: 20px; }
  .w-yukle-yan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .w-ipucu ul { gap: 5px; font-size: 13px; }
  /* Kuyruk tablosu: ilerleme çubuğu durumun altına iner, dosya adına yer kalır */
  .w-kuyruk-tablo .s-no { width: 44px; }
  .w-kuyruk-tablo .s-asama { width: 180px; }
  .w-kuyruk-tablo td.s-asama { white-space: normal; }
  .w-kuyruk-tablo td.s-asama .w-mini-ilerleme, .w-kuyruk-tablo td.s-asama .akan { display: block; margin: 6px 0 0; }
  .w-kuyruk-tablo .s-sayi { width: 80px; }
  .w-kuyruk-tablo .s-islem { width: 118px; }
  .w-kuyruk-tablo td, .w-kuyruk-tablo th { padding-left: 10px; padding-right: 10px; }
  .w-ust-baslik { min-width: 0; font-size: 20px; }
  .w-firma { max-width: 200px; }
  .w-arac-sag { margin-left: 0; width: 100%; }
}

/* Son kalite denetimi düzeltmeleri: menü sayacı iki haneye çıkınca yazı kırılmasın, kuyruk başlığı sıkışmasın,
 * "Bağlantı bekleniyor" aşaması sığsın, raporlardaki ay adı kesilmesin */
@media (min-width: 1024px) {
  .alt-menu a > span:last-child { white-space: nowrap; gap: 8px; }
  .w-kuyruk .w-kart-bas { flex-wrap: wrap; row-gap: 8px; }
  #wKuyrukBas { white-space: nowrap; }
  .w-ay-tablo tr > :first-child { white-space: nowrap; }
}
@media (min-width: 1280px) {
  .w-kuyruk-tablo .s-asama { width: 262px; }
}

/* Model denemesi: üstte ayarlar ve geçmiş yan yana, altta sonuç tablosu tam genişlikte */
@media (min-width: 1024px) {
  body.panelli[data-rota="model-deneme"] .ekran { max-width: 1240px; }
  .md-giris { max-width: 760px; }
  .md-izgara { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "yeni gecmis" "calisma calisma"; gap: 20px; align-items: start; }
  .md-izgara > .kart { border-radius: 16px; padding: 18px 20px; gap: 14px; box-shadow: var(--w-golge); }
  .md-yeni { grid-area: yeni; }
  .md-gecmis-kart { grid-area: gecmis; }
  .md-calisma { grid-area: calisma; scroll-margin-top: calc(var(--w-ust) + 16px); }
  .md-boru:hover:not(:has(input:disabled)) { background: var(--w-hover); }
  .md-link:hover { background: var(--pri-soft); }
  .md-baslat { width: auto; align-self: flex-start; height: 46px; padding: 0 22px; font-size: 15px; }
  .md-gecmis-ac:hover { background: var(--w-hover); }
  .md-gecmis li.secili .md-gecmis-ac:hover { background: var(--pri-soft); }
  .md-gecmis .btn, .md-dugme .btn, .md-yon-ust .btn, .md-yon-hepsi, .md-izinsiz .btn, .md-izin .btn { height: 36px; border-radius: 10px; }
  .md-tablo-kap { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
  .md-tablo { width: 100%; font-size: 14px; }
  .md-tablo thead th { height: 40px; background: var(--w-baslik-zemin); }
  .md-tablo thead th:first-child { background: var(--w-baslik-zemin); }
  .md-tablo th, .md-tablo td { padding: 9px 12px; }
  .md-tablo tbody th { max-width: none; }
  .md-tablo tbody tr:hover > :not(.en-iyi) { background: var(--w-hover); }
  .md-cubuk { max-width: 720px; }
  /* Yönetimde içerik sütunu dar (1040 px): tablo sığsın diye hücreler sıkı */
  .md-yonetim .md-tablo { font-size: 13.5px; }
  .md-yonetim .md-tablo th, .md-yonetim .md-tablo td { padding: 8px 8px; }
  .md-yonetim .md-tablo thead th { letter-spacing: 0.02em; }
}