/* Panel gorunumu. Renkler yalniz buradaki degiskenlerden gelir. */
/* Yazi tipleri bu sunucudan gelir (SIL OFL, lisanslar yazi/ altinda). */
@font-face { font-family: "Public Sans"; src: url("yazi/public-sans-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Public Sans"; src: url("yazi/public-sans-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; src: url("yazi/familjen-grotesk-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: block; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Familjen Grotesk"; src: url("yazi/familjen-grotesk-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: block; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Martian Mono"; src: url("yazi/martian-mono-latin-ext.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: block; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; src: url("yazi/martian-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: block; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  color-scheme: dark;
  --zemin: #050813; --isik: rgba(44, 100, 214, .24);
  --yazi-tipi: "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --baslik-tipi: "Familjen Grotesk", "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Martian Mono", Consolas, ui-monospace, Menlo, monospace;
  --yan: linear-gradient(170deg, rgba(30, 56, 118, .62), rgba(10, 15, 32, .92) 62%);
  --yuzey: #111930; --yuzey-2: #1a2440; --yuzey-3: #222e50;
  --kart: linear-gradient(155deg, rgba(120, 150, 215, .15), rgba(255, 255, 255, .025));
  --kart-ust: rgba(90, 169, 255, .8);
  --cizgi: rgba(148, 170, 220, .17); --cizgi-g: rgba(148, 170, 220, .09);
  --yazi: #eef2f9; --yazi-2: #b3bdd2; --soluk: #8390aa;
  --vurgu: #5aa9ff; --birincil: linear-gradient(180deg, #ffc652, #f59e16); --birincil-yazi: #1c1204;
  --secili: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  --girdi: rgba(3, 7, 20, .55);
  --iyi: #34d399; --uyari: #fbbf24; --kritik: #f87171; --mor: #a78bfa;
  --iyi-z: rgba(52, 211, 153, .14); --uyari-z: rgba(251, 191, 36, .14); --kritik-z: rgba(248, 113, 113, .15); --notr-z: rgba(148, 170, 220, .13); --vurgu-z: rgba(90, 169, 255, .15); --mor-z: rgba(167, 139, 250, .15);
  --seri: #5aa9ff;
  --golge: 0 14px 34px -14px rgba(0, 0, 0, .75);
  --ic-isik: inset 0 1px 0 rgba(255, 255, 255, .05);
}
:root[data-theme="light"] {
  color-scheme: light;
  --zemin: #eef2f8; --isik: rgba(52, 104, 214, .10);
  --yan: #ffffff;
  --yuzey: #ffffff; --yuzey-2: #f3f6fb; --yuzey-3: #e8edf6;
  --kart: #ffffff;
  --kart-ust: #2a78d6;
  --cizgi: #dbe2ee; --cizgi-g: #e9edf5;
  --yazi: #0f1a2e; --yazi-2: #48546b; --soluk: #647087;
  --vurgu: #1b64d4; --birincil: linear-gradient(180deg, #ffc652, #f59e16); --birincil-yazi: #1c1204;
  --secili: linear-gradient(155deg, rgba(27, 100, 212, .14), rgba(27, 100, 212, .04));
  --girdi: #f7f9fc;
  --iyi: #0b8a5f; --uyari: #a86a00; --kritik: #cf3433; --mor: #6d4fd6;
  --iyi-z: #dcf5ea; --uyari-z: #fbf0d3; --kritik-z: #fce4e3; --notr-z: #e9edf4; --vurgu-z: #e0ecfc; --mor-z: #ece7fb;
  --seri: #2a78d6;
  --golge: 0 8px 22px -12px rgba(25, 45, 90, .28);
  --ic-isik: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--yazi); font: 14px/1.5 var(--yazi-tipi);
  background: radial-gradient(1100px 560px at 72% -8%, var(--isik), transparent 70%), var(--zemin); background-attachment: fixed; min-height: 100vh;
}
a { color: inherit; text-decoration-color: var(--soluk); text-underline-offset: 3px; }
a:hover { color: var(--vurgu); }
h1, h2, .marka b, .kutu > b { font-family: var(--baslik-tipi); }
h1 { font-size: 27px; margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
h2 { font-size: 17px; margin: 0 0 14px; font-weight: 600; letter-spacing: -.01em; }
h2 small { color: var(--soluk); font: 400 13px var(--yazi-tipi); letter-spacing: 0; margin-left: 6px; }
small { color: var(--soluk); }
p { margin: 8px 0; }
.sayi { font-variant-numeric: tabular-nums; }
.soluk { color: var(--soluk); }
.not { color: var(--soluk); font-size: 13px; margin: 12px 0 0; }
.sag { text-align: right; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.ik { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* yerlesim */
.kabuk { display: flex; min-height: 100vh; }
.yan { width: 248px; flex: none; margin: 16px 0 16px 16px; background: var(--yan); border: 1px solid var(--cizgi); border-radius: 24px; display: flex; flex-direction: column; padding: 16px 12px 12px; position: sticky; top: 16px; height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--golge), var(--ic-isik); }
.marka { display: flex; align-items: center; gap: 11px; padding: 2px 6px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--cizgi-g); text-decoration: none; color: var(--yazi); }
.marka:hover { color: var(--yazi); }
.marka-isaret { width: 36px; height: 36px; border-radius: 11px; background: var(--birincil); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(47, 127, 238, .8), inset 0 1px 0 rgba(255, 255, 255, .25); flex: none; }
.marka-isaret .ik { width: 20px; height: 20px; }
.marka b { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.marka small { display: block; font-size: 11.5px; line-height: 1.3; }
.menu-grup { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); padding: 16px 12px 6px; }
.menu { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 2px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; color: var(--yazi-2); font-size: 13.5px; font-weight: 500; transition: background .12s, color .12s; }
.menu .ik { color: var(--soluk); transition: color .12s; }
.menu:hover { background: var(--yuzey-2); color: var(--yazi); }
.menu:hover .ik { color: var(--yazi); }
.menu.secili { background: var(--secili); border-color: var(--cizgi); color: var(--yazi); font-weight: 600; box-shadow: var(--ic-isik); }
.menu.secili .ik { color: var(--vurgu); }
.yan-alt { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cizgi-g); }
.hesap-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; text-decoration: none; min-width: 0; }
.hesap-link:hover, .hesap-link.secili { background: var(--yuzey-2); color: var(--yazi); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--vurgu-z); color: var(--vurgu); display: grid; place-items: center; font-weight: 700; flex: none; }
.hesap-link span:last-child { min-width: 0; }
.hesap-link b { display: block; overflow-wrap: anywhere; font-weight: 600; line-height: 1.25; }
.hesap-link small { display: block; line-height: 1.25; }
.yan-dugme { display: flex; gap: 6px; margin-top: 8px; }
.yan-dugme form { flex: 1; display: flex; }
.yan-dugme .dugme { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.yan-dugme .ik { width: 15px; height: 15px; }
.ana { flex: 1; min-width: 0; }
.ust { display: flex; align-items: center; gap: 12px; padding: 22px 28px 0; font-size: 13px; }
.yol { display: flex; align-items: center; gap: 8px; color: var(--yazi-2); min-width: 0; }
.yol a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.yol .ik { width: 15px; height: 15px; }
.yol b { font-weight: 600; color: var(--yazi); }
.tarih { font: 500 12px var(--mono); letter-spacing: .03em; color: var(--yazi-2); background: var(--yuzey-2); border: 1px solid var(--cizgi-g); padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
.ust-avatar { text-decoration: none; }
.ust-avatar .avatar { border-radius: 11px; font-size: 12.5px; }
.bas { display: flex; align-items: center; gap: 14px; padding: 22px 28px 6px; min-width: 0; }
.bas-simge { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; color: var(--vurgu); background: var(--vurgu-z); border: 1px solid var(--cizgi-g); }
.bas-simge .ik { width: 23px; height: 23px; }
.bas p { margin: 3px 0 0; color: var(--yazi-2); font-size: 13.5px; overflow-wrap: anywhere; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dugme.menu-ac { display: none; }
main { padding: 14px 28px 40px; }

/* kart ve kutular */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-top: 2px solid var(--kart-ust); border-radius: 20px; padding: 20px 22px; margin-bottom: 18px; min-width: 0; box-shadow: var(--golge), var(--ic-isik); backdrop-filter: blur(6px); }
.kart.dar { max-width: 480px; }
.kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kart-bas h2 { margin: 0; }
.iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kutu { --k: var(--vurgu); background: var(--kart); border: 1px solid var(--cizgi); border-top: 2px solid var(--k); border-radius: 20px; padding: 15px 17px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; column-gap: 10px; row-gap: 9px; min-width: 0; box-shadow: var(--golge), var(--ic-isik); }
.kutu:has(.yesil) { --k: var(--iyi); } .kutu:has(.sari) { --k: var(--uyari); } .kutu:has(.kirmizi) { --k: var(--kritik); } .kutu:has(.mor) { --k: var(--mor); }
.kutu > span { color: var(--yazi-2); font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.kutu > b { grid-column: 1 / -1; font-size: 27px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; white-space: nowrap; color: var(--k); }
.kutu > b .rozet { font: 550 13px var(--yazi-tipi); letter-spacing: 0; }
.kutu > small { grid-column: 1 / -1; margin-top: -3px; font-size: 12.5px; }
.kutu-simge { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--vurgu-z); color: var(--k); border: 1px solid var(--cizgi-g); }
.kutu-simge.yesil { background: var(--iyi-z); }
.kutu-simge.sari { background: var(--uyari-z); }
.kutu-simge.kirmizi { background: var(--kritik-z); }
.kutu-simge.mor { background: var(--mor-z); }
.baglanti { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 550; color: var(--vurgu); text-decoration: none; }
.baglanti:hover { text-decoration: underline; }

/* bilgi ve rozet */
.bilgi { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; background: var(--notr-z); border: 1px solid var(--cizgi-g); }
.bilgi.iyi { background: var(--iyi-z); border-color: transparent; }
.bilgi.uyari { background: var(--uyari-z); border-color: transparent; }
.bilgi.kritik { background: var(--kritik-z); border-color: transparent; }
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 20px; background: var(--notr-z); font-size: 12.5px; font-weight: 550; color: var(--yazi); white-space: nowrap; }
.rozet i { width: 7px; height: 7px; border-radius: 50%; background: var(--soluk); flex: none; }
.rozet.iyi { background: var(--iyi-z); } .rozet.iyi i { background: var(--iyi); }
.rozet.uyari { background: var(--uyari-z); } .rozet.uyari i { background: var(--uyari); }
.rozet.kritik { background: var(--kritik-z); } .rozet.kritik i { background: var(--kritik); }

/* tablo */
.tablo-kap { overflow: auto hidden; position: relative; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; color: var(--soluk); font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
th.sag { text-align: right; }
td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi-g); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--cizgi-g); }
td a { text-decoration: none; font-weight: 550; }
td a:hover { text-decoration: underline; }
td.bos { color: var(--soluk); text-align: center; padding: 26px; }
tr.soluk td { color: var(--soluk); }
.satir-sorun td:first-child { box-shadow: inset 2px 0 0 var(--kritik); }
.kirp { max-width: 340px; overflow-wrap: anywhere; font-size: 12.5px; color: var(--yazi-2); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 9px 0; border-bottom: 1px solid var(--cizgi-g); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.liste li:last-child { border-bottom: 0; }
.liste a { text-decoration: none; font-weight: 550; }
.liste a:hover { text-decoration: underline; }
.sag-yan { margin-left: auto; color: var(--yazi-2); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.cubuk { display: inline-block; width: 70px; height: 6px; border-radius: 3px; overflow: hidden; vertical-align: middle; }
.c-zemin { fill: var(--cizgi); } .c-dolu { fill: var(--seri); }

/* raf */
table.raf { border-collapse: separate; border-spacing: 7px; width: auto; }
table.raf th { border: 0; padding: 2px 4px; }
table.raf tbody th { position: sticky; left: 0; background: var(--yuzey); border-radius: 8px; z-index: 1; }
table.raf tbody tr:hover td { background: var(--cizgi-g); }
table.raf tbody tr:hover td.goz-yok { background: transparent; }
td.goz { background: var(--cizgi-g); border: 1px solid var(--cizgi); border-radius: 13px; padding: 9px 11px; min-width: 132px; max-width: 176px; vertical-align: top; }
tbody tr:last-child td.goz { border-bottom: 1px solid var(--cizgi); }
td.goz > * { display: block; }
td.goz .rozet { display: inline-flex; margin-top: 5px; }
td.goz b { font-weight: 620; overflow-wrap: anywhere; line-height: 1.25; margin: 1px 0 3px; }
td.goz .sayi { color: var(--yazi-2); font-size: 12.5px; }
td.goz .cubuk { width: 100%; margin-top: 5px; height: 4px; }
td.goz > .goz-alt { display: flex; justify-content: space-between; gap: 8px; }
.goz .etiket { color: var(--soluk); font: 500 11px var(--mono); }
td.goz-yok { background: transparent; border-style: dashed; }
td.goz-uyari { box-shadow: inset 3px 0 0 var(--uyari); }     /* sade: renkli cerceve yerine sol serit (kullanici 2026-11-08) */
td.goz-kritik { box-shadow: inset 3px 0 0 var(--kritik); }
.plan td.goz { min-width: 150px; }
.plan select { width: 100%; margin: 3px 0 5px; padding: 6px 8px; border-radius: 9px; }
td.goz > .goz-girdi { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; }
.goz-girdi label { display: block; font-size: 11.5px; color: var(--soluk); margin: 0; }
.goz-girdi input { width: 100%; margin-top: 1px; padding: 5px 8px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.hata-yazi { color: var(--kritik); margin-top: 3px; }

/* form */
input, select { font: inherit; color: var(--yazi); background: var(--girdi); border: 1px solid var(--cizgi); border-radius: 12px; padding: 9px 12px; min-width: 0; max-width: 100%; transition: border-color .12s, box-shadow .12s; }
input[type="checkbox"] { accent-color: var(--vurgu); width: 15px; height: 15px; margin: 0; }
input:hover, select:hover { border-color: var(--soluk); }
input:focus, select:focus { outline: 0; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-z); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--yazi-2); min-width: 0; }
label.kutucuk { flex-direction: row; align-items: center; gap: 8px; color: var(--yazi); font-weight: 400; }
.form { display: flex; flex-direction: column; gap: 13px; align-items: stretch; }
.form > button { align-self: flex-start; }
.form-iki { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.form-satir { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.form-satir:last-child { margin-bottom: 0; }
.form-satir label { flex: 1 1 130px; }
.form-satir label.genis { flex: 3 1 240px; }
.form-satir.sik label { flex: 0 1 auto; }
.form-satir.sik { margin: 0; align-items: center; }
.form-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.form-alt .not { margin: 0; flex: 1 1 260px; }
fieldset { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 14px 12px; margin: 0; min-width: 0; }
legend { font-size: 13px; font-weight: 500; color: var(--yazi-2); padding: 0 5px; }
.secim-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 7px 14px; }
.dugme { font: inherit; font-weight: 600; display: inline-block; padding: 9px 18px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey-2); color: var(--yazi); cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .12s, border-color .12s, background .12s; }
.dugme:hover { border-color: var(--soluk); color: var(--yazi); }
.dugme.birincil { background: var(--birincil); border-color: transparent; color: var(--birincil-yazi); box-shadow: 0 8px 20px -10px rgba(245, 158, 22, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
.dugme.birincil:hover { filter: brightness(1.07); color: var(--birincil-yazi); }
.dugme.tehlike { color: var(--kritik); border-color: var(--kritik); background: transparent; }
.dugme.hayalet { background: transparent; }
.dugme.kucuk { padding: 5px 12px; font-size: 13px; border-radius: 10px; }

/* sekme */
.sekmeler { display: flex; gap: 4px; overflow: auto hidden; background: var(--cizgi-g); border: 1px solid var(--cizgi-g); border-radius: 14px; padding: 4px; margin-bottom: 18px; }
.sekmeler a { padding: 7px 15px; border-radius: 10px; text-decoration: none; color: var(--yazi-2); font-weight: 500; white-space: nowrap; }
.sekmeler a:hover { color: var(--yazi); }
.sekmeler a.secili { color: var(--yazi); background: var(--secili); box-shadow: var(--ic-isik); font-weight: 600; }
.hap { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.hap a { padding: 5px 13px; border-radius: 10px; font: 500 12px var(--mono); text-decoration: none; color: var(--yazi-2); background: var(--cizgi-g); border: 1px solid var(--cizgi-g); }
.hap a:hover { color: var(--yazi); }
.hap a.secili { background: var(--vurgu-z); color: var(--vurgu); border-color: var(--vurgu); }
.sayfalama { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; }
.tanim { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 0 24px; margin: 0; }
.tanim dt { color: var(--soluk); font-size: 12.5px; margin-top: 9px; }
.tanim dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
.tanim > div { padding-bottom: 7px; border-bottom: 1px solid var(--cizgi-g); min-width: 0; }

/* giris */
.giris { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; max-width: none; }
.giris-kart { width: 100%; max-width: 390px; display: flex; flex-direction: column; gap: 14px; padding: 32px 30px 30px; border-radius: 26px; }
.giris-kart .marka { flex-direction: column; text-align: center; gap: 12px; padding: 0 0 16px; }
.giris-kart .marka-isaret { width: 52px; height: 52px; border-radius: 15px; }
.giris-kart .marka-isaret .ik { width: 28px; height: 28px; }
.giris-kart .marka b { font-size: 23px; }
.giris-kart .marka small { font-size: 13px; margin-top: 3px; }
.giris-kart input { padding: 10px 12px; }
.giris-kart .dugme { text-align: center; padding: 11px; margin-top: 4px; }

/* grafik */
.grafik { position: relative; margin: 0; touch-action: pan-y; }
.grafik svg { display: block; width: 100%; height: auto; }
.gr-dar { display: none !important; }
.g-izgara { stroke: var(--cizgi-g); stroke-width: 1; }
.g-yazi { fill: var(--soluk); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.g-sutun { fill: var(--seri); }
.g-sutun.vurgu { fill: var(--yazi); }
.g-cizgi { fill: none; stroke: var(--seri); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-son, .g-imlec { fill: var(--seri); stroke: var(--yuzey); stroke-width: 2; }
.g-dikey { stroke: var(--soluk); stroke-width: 1; }
.ipucu { position: absolute; top: 0; pointer-events: none; background: var(--yuzey-3); border: 1px solid var(--cizgi); border-radius: 8px; padding: 5px 10px; box-shadow: var(--golge); white-space: nowrap; font-size: 12.5px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.ipucu[hidden] { display: none; }
.ipucu span { color: var(--yazi-2); }

/* telefon */
@media (max-width: 760px) {
  .kabuk { display: block; }
  .yan { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; height: auto; margin: 0; border-radius: 0 20px 20px 0; width: 256px; background: var(--yuzey); transform: translateX(-100%); transition: transform .15s; box-shadow: var(--golge); }
  .yan.acik { transform: none; }
  .dugme.menu-ac { display: inline-block; }
  .ust { padding: 14px 16px 0; }
  .ust .yol { display: none; }
  .bas { padding: 14px 16px 2px; gap: 11px; }
  .bas-simge { width: 40px; height: 40px; }
  h1 { font-size: 22px; }
  main { padding: 10px 16px 28px; }
  .kart { padding: 14px; border-radius: 16px; }
  .kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kutu { padding: 11px 12px; border-radius: 16px; }
  .kutu > b { font-size: 21px; }
  .kutu-simge { width: 28px; height: 28px; border-radius: 9px; }
  .kutu-simge .ik { width: 15px; height: 15px; }
  .kutu > span { font-size: 10px; letter-spacing: .03em; }
  .gr-genis { display: none !important; }
  .gr-dar { display: block !important; }
  .form-iki { grid-template-columns: minmax(0, 1fr); }
  .form-satir label, .form-satir label.genis { flex: 1 1 100%; }
  .form-satir.sik label { flex: 1 1 100%; }
  input, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .yan, .ust-sag, .dugme { display: none; } }

/* Canli gorunum: koyu temada doygun mavi yuzeyler; basliklar sik ve kalin, etiketler genis aralikli daktilo yazisi. Boyutlar butun temalarda buyur. */
:root:not([data-theme="light"]) {
  --zemin: #060b19; --isik: rgba(44, 110, 235, .30);
  --yan: linear-gradient(175deg, #1f448f 0%, #132c63 46%, #0b1a3a 100%);
  --kart: linear-gradient(150deg, rgba(42, 82, 170, .36), rgba(13, 25, 58, .78) 72%);
  --kart-ust: #3f8cff;
  --cizgi: rgba(120, 160, 235, .24); --cizgi-g: rgba(120, 160, 235, .12);
  --yazi: #f2f6fd; --yazi-2: #c5d0e6; --soluk: #96a6c4;
  --vurgu: #62b0ff; --seri: #62b0ff;
  --secili: rgba(255, 255, 255, .13);
  --vurgu-z: rgba(70, 140, 255, .20);
}
body { font-size: 15px; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
h2 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
h2 small { font-size: 13.5px; }
small { font-size: 13px; }
.not { font-size: 14px; }
.bas p { font-size: 14.5px; }
.marka b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.marka small { font-size: 12.5px; }
.menu-grup { font-size: 10.5px; letter-spacing: .1em; padding-top: 18px; }
.menu { font-size: 14px; padding: 9px 12px; }
.menu.secili { box-shadow: inset 3px 0 0 var(--vurgu); border-color: transparent; }
.yol { font-size: 14px; }
.tarih { font-size: 11.5px; letter-spacing: .05em; padding: 6px 14px; }
.kutular { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 26px; }
.kutu { padding: 20px 22px; row-gap: 12px; column-gap: 12px; }
.kutu > span { font-size: 11.5px; letter-spacing: .1em; font-weight: 500; }
.kutu > b { font-size: 29px; font-weight: 600; letter-spacing: -.02em; }
.kutu > small { font-size: 14px; color: var(--yazi-2); }
.kutu-simge { width: 40px; height: 40px; border-radius: 12px; }
.kart { padding: 22px 24px; }
.rozet { font-size: 13.5px; }
th { font-size: 10.5px; letter-spacing: .08em; color: var(--yazi-2); padding: 11px 12px; }
td { padding: 13px 12px; }
td.sayi, td .sayi, .sag-yan.sayi { font-family: var(--mono); font-size: 12px; }
.hap a { font-size: 11.5px; }
.goz .etiket { font-size: 12.5px; }
.goz-girdi label { font-size: 13px; }
.g-yazi { font-size: 12.5px; }

/* Ozet ekrani: karsilama bandi ve bolum basliklari */
.karsilama { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 34px; margin-bottom: 26px; border: 1px solid var(--cizgi); border-top: 3px solid var(--kart-ust); border-radius: 22px; background: var(--kart); box-shadow: var(--golge), var(--ic-isik); }
.karsilama-tarih { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--yazi-2); }
.karsilama h1 { font-size: 34px; margin: 10px 0 14px; }
.karsilama-rol { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px var(--mono); letter-spacing: .03em; color: var(--vurgu); background: var(--vurgu-z); border: 1px solid var(--cizgi); padding: 5px 12px; border-radius: 9px; }
.karsilama-rol .ik { width: 15px; height: 15px; }
.karsilama-simge { width: 92px; height: 92px; flex: none; border-radius: 26px; display: grid; place-items: center; color: var(--birincil-yazi); background: var(--birincil); box-shadow: 0 0 46px rgba(255, 180, 60, .32); }
.karsilama-simge .ik { width: 50px; height: 50px; stroke-width: 1.5; }
.bolum { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; margin: 4px 0 18px; border-bottom: 1px solid var(--cizgi-g); }
.bolum h2 { margin: 0; font-size: 19px; }
.bolum small { margin-left: auto; font-size: 13.5px; }
.bolum .kutu-simge { color: var(--vurgu); }
.bolum .kutu-simge.yesil { color: var(--iyi); } .bolum .kutu-simge.sari { color: var(--uyari); } .bolum .kutu-simge.mor { color: var(--mor); }
@media (max-width: 760px) {
  .karsilama { padding: 20px; }
  .karsilama h1 { font-size: 27px; }
  .karsilama-simge { display: none; }
  h1 { font-size: 25px; }
  .kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kutu { padding: 14px; }
  .kutu > span { font-size: 10px; letter-spacing: .04em; }
  .kutu > b { font-size: 23px; }
}

/* Cam kartlar ve arka isik: yuzeyler yari saydam, renk arkadaki mavi isiktan gelir */
:root:not([data-theme="light"]) {
  --zemin: #050813;
  --yan: linear-gradient(175deg, rgba(44, 90, 190, .58), rgba(9, 15, 36, .78) 58%);
  --kart: linear-gradient(155deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  --cizgi: rgba(255, 255, 255, .13); --cizgi-g: rgba(255, 255, 255, .08);
  --girdi: rgba(3, 7, 20, .42);
  --golge: 0 16px 40px -14px rgba(3, 7, 20, .75);
  --ic-isik: inset 0 1px 0 rgba(255, 255, 255, .10);
  --tutar: #6ff0d0;
}
:root[data-theme="light"] { --tutar: #0b8a5f; }
:root:not([data-theme="light"]) body {
  background: radial-gradient(1000px 640px at 26% -6%, rgba(38, 100, 235, .40), transparent 70%), radial-gradient(820px 620px at 96% 34%, rgba(28, 78, 205, .17), transparent 72%), var(--zemin);
  background-attachment: fixed;
}
.kart, .kutu, .karsilama { border-radius: 22px; }
.kutu > b { font-size: 26px; }
h1 { font-size: 25px; letter-spacing: -.02em; }
h2 { font-size: 17px; }
.karsilama h1 { font-size: 30px; letter-spacing: -.03em; }
.menu { font-size: 13.5px; }
.bas { padding-top: 18px; }
.bas-simge { width: auto; height: auto; background: none; border: 0; color: var(--yazi); }
.bas-simge .ik { width: 26px; height: 26px; }
.bas p { font-size: 13.5px; }
.bas-sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bas-sag:empty { display: none; }

input, select { border-radius: 16px; }
:root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select { border-color: rgba(255, 255, 255, .09); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
label { font-size: 12.5px; }
.dugme.kucuk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 12px; }
.dugme .ik { width: 15px; height: 15px; }
:root:not([data-theme="light"]) .dugme:not(.birincil):not(.tehlike) { background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); }

.kart-bant { display: flex; align-items: center; gap: 10px; margin: -22px -24px 16px; padding: 15px 24px; border-bottom: 1px solid var(--cizgi-g); }
.kart-bant h2 { margin: 0; }
.kart-bant .ik { width: 16px; height: 16px; fill: currentColor; }

.filtre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.filtre input, .filtre select { width: 100%; }
.filtre-alt { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.filtre-kisayol { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--yazi-2); min-width: 0; flex: 0 1 620px; }
.filtre-dugme { display: flex; gap: 8px; }
.filtre .dugme.birincil .ik { fill: currentColor; }

.hap { display: inline-flex; gap: 0; flex-wrap: nowrap; border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .03); }
.filtre-kisayol .hap { display: flex; }
.hap a { flex: 1; text-align: center; padding: 8px 18px; border: 0; border-left: 1px solid var(--cizgi-g); border-radius: 0; background: none; white-space: nowrap; }
.hap a:first-child { border-left: 0; }
.hap a.secili { background: var(--vurgu-z); color: var(--vurgu); border-color: var(--cizgi-g); }

/* satis satirlari */
.satis-bolum { margin-bottom: 18px; }
.satis-liste { display: flex; flex-direction: column; gap: 12px; }
.kart .satis-liste { gap: 9px; }
.satis-satir { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: var(--ic-isik); min-width: 0; }
.satis-satir.sorun { border-color: var(--kritik); }
.satis-satir summary { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; list-style: none; min-width: 0; }
.satis-satir summary::-webkit-details-marker { display: none; }
.satis-satir summary:hover { background: var(--cizgi-g); border-radius: 18px; }
.satis-ok { width: 15px; height: 15px; color: var(--soluk); transition: transform .12s; }
.satis-satir[open] .satis-ok { transform: rotate(90deg); }
.satis-goz { font: 500 11.5px var(--mono); letter-spacing: .04em; color: var(--vurgu); background: var(--vurgu-z); border: 1px solid var(--cizgi); padding: 4px 9px; border-radius: 8px; flex: none; }
.satis-ad { min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.satis-ad b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.satis-ad small { padding: 2px 9px; border: 1px solid var(--cizgi); border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 12px; color: var(--yazi-2); }
.satis-sag { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.satis-rozet { display: inline-flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.satis-tutar { font: 600 14px var(--mono); color: var(--tutar); white-space: nowrap; }
.satis-tutar.soluk { color: var(--soluk); }
.satis-zaman { font: 400 11.5px var(--mono); color: var(--yazi-2); white-space: nowrap; }
.satis-ayrinti { display: flex; flex-wrap: wrap; gap: 8px 34px; margin: 0; padding: 12px 18px 15px 41px; border-top: 1px solid var(--cizgi-g); }
.satis-ayrinti dt { color: var(--soluk); font-size: 12.5px; }
.satis-ayrinti dd { margin: 2px 0 0; font-size: 13.5px; }
.satis-bos { color: var(--soluk); text-align: center; padding: 26px; margin: 0; }
@media (max-width: 1050px) {
  .filtre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .satis-satir summary { flex-wrap: wrap; }
  .satis-sag { margin-left: 25px; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px 12px; }
  .satis-rozet { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .bas { flex-wrap: wrap; }
  .bas-sag { margin-left: 0; width: 100%; justify-content: flex-start; }
  .hap a { padding: 8px 10px; font-size: 10.5px; }
  .kart-bant { margin: -22px -24px 14px; }
  .satis-ayrinti { padding-left: 18px; }
}
.dugme.menu-ac { display: none; }
.bas > div:not(.bas-sag) { flex: 1 1 0; min-width: 0; }
@media (max-width: 760px) {
  .dugme.menu-ac { display: inline-flex; }
  .bas-sag { flex: 1 1 100%; }
}

/* Dolu simgeler */
.ik { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.menu .ik { width: 15px; height: 15px; }
.kutu-simge .ik { width: 16px; height: 16px; }
.satis-ok { width: 11px; height: 11px; }
.bas-simge .ik { width: 24px; height: 24px; }
.karsilama-simge .ik { width: 44px; height: 44px; }

/* Arka isik: cam yuzeylerin arkasinda yavasca kayan bulanik renkler */
.arka-isik { display: none; }
:root:not([data-theme="light"]) .arka-isik { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.arka-isik i { position: absolute; display: block; border-radius: 50%; animation: isik-kay 32s ease-in-out infinite alternate; will-change: transform; }
.arka-isik i:nth-child(1) { width: 78vw; height: 78vw; left: -8vw; top: -42vh; background: radial-gradient(circle, rgba(29, 62, 150, .78), transparent 66%); filter: blur(32px); }
.arka-isik i:nth-child(2) { width: 62vw; height: 62vw; left: -28vw; top: 8vh; background: radial-gradient(circle, rgba(50, 160, 240, .36), transparent 65%); filter: blur(40px); animation-duration: 38s; animation-delay: -9s; }
.arka-isik i:nth-child(3) { width: 56vw; height: 56vw; right: -16vw; top: 30vh; background: radial-gradient(circle, rgba(240, 160, 40, .035), transparent 74%); filter: blur(90px); animation-duration: 30s; animation-delay: -5s; }
.arka-isik i:nth-child(4) { width: 48vw; height: 48vw; right: 8vw; bottom: -30vh; background: radial-gradient(circle, rgba(45, 205, 185, .20), transparent 64%); filter: blur(46px); animation-duration: 42s; animation-delay: -14s; }
@keyframes isik-kay { from { transform: translate(0, 0) scale(1); } to { transform: translate(5vw, 4vh) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .arka-isik i { animation: none; } }

/* Cam yuzeyler */
:root:not([data-theme="light"]) { --yazi: #eef2f9; --yazi-2: rgba(238, 242, 249, .74); --soluk: rgba(238, 242, 249, .58); --kart-ust: #4a9bff; }
:root:not([data-theme="light"]) body { background: var(--zemin); }
:root:not([data-theme="light"]) .yan { background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .14); box-shadow: 0 24px 60px -22px rgba(3, 7, 20, .85), inset 0 1px 0 rgba(255, 255, 255, .26); backdrop-filter: blur(30px) saturate(175%); }
:root:not([data-theme="light"]) .kart, :root:not([data-theme="light"]) .kutu, :root:not([data-theme="light"]) .karsilama, :root:not([data-theme="light"]) .satis-satir { backdrop-filter: blur(22px) saturate(160%); }
:root:not([data-theme="light"]) .menu.secili { background: linear-gradient(155deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); }
:root:not([data-theme="light"]) .menu:hover { background: rgba(255, 255, 255, .06); }
:root:not([data-theme="light"]) .menu .ik { color: var(--yazi-2); }
:root:not([data-theme="light"]) .menu.secili .ik { color: var(--yazi); }
.yan { width: 262px; border-radius: 24px; }
.karsilama h1 { font-size: 28px; letter-spacing: -.03em; }
.kutu > span { color: var(--soluk); }
th { color: var(--soluk); }
.kutu > small { font-size: 12.5px; color: var(--yazi-2); }

/* Daha sakin olculer: kucuk kutular, yumusak ust cizgiler */
.kutular { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kutu { padding: 12px 15px; row-gap: 8px; column-gap: 10px; border-radius: 16px; border-top: 1px solid color-mix(in srgb, var(--k) 38%, var(--cizgi)); }
.kutu-simge { width: 30px; height: 30px; border-radius: 9px; }
.kutu-simge .ik { width: 13px; height: 13px; }
.kutu > span { font-size: 10.5px; letter-spacing: .08em; }
.kutu > b { font-size: 21px; }
.kutu > small { font-size: 12px; margin-top: -2px; }
.kart { border-top: 1px solid color-mix(in srgb, var(--kart-ust) 34%, var(--cizgi)); }
.karsilama { padding: 20px 28px; margin-bottom: 20px; border-top: 1px solid color-mix(in srgb, var(--kart-ust) 38%, var(--cizgi)); }
.karsilama h1 { font-size: 26px; margin: 7px 0 11px; }
.karsilama-simge { width: 54px; height: 54px; border-radius: 15px; box-shadow: 0 0 26px rgba(255, 180, 60, .14); }
.karsilama-simge .ik { width: 25px; height: 25px; }
.bolum { padding-bottom: 11px; margin: 2px 0 14px; }
.bolum .kutu-simge .ik { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kutu { padding: 11px 12px; }
  .kutu > span { font-size: 9.5px; letter-spacing: .04em; }
  .kutu > b { font-size: 19px; }
  .karsilama { padding: 16px 18px; }
  .karsilama h1 { font-size: 23px; }
}

/* Makineler: kart listesi */
.makine-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 14px; margin-bottom: 18px; }
.makine-kart { position: relative; display: flex; flex-direction: column; gap: 13px; padding: 16px 18px; min-width: 0; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: var(--golge), var(--ic-isik); transition: border-color .12s; }
:root:not([data-theme="light"]) .makine-kart { backdrop-filter: blur(22px) saturate(160%); }
.makine-kart:hover { border-color: color-mix(in srgb, var(--vurgu) 55%, var(--cizgi)); }
.makine-kart.iptal { opacity: .55; }
.mk-bas { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mk-bas .kutu-simge { flex: none; color: var(--vurgu); }
.mk-ad { flex: 1; min-width: 0; }
.mk-ad a { text-decoration: none; }
.mk-ad a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.mk-ad a:focus-visible { outline: 0; }
.mk-ad a:focus-visible::after { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.mk-ad b { display: block; font: 600 15.5px/1.25 var(--baslik-tipi); overflow-wrap: anywhere; }
.mk-ad small { display: block; font-size: 12px; line-height: 1.3; color: var(--soluk); overflow-wrap: anywhere; }
.mk-uyari { margin: 0; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; background: var(--notr-z); }
.mk-uyari.uyari { background: var(--uyari-z); }
.mk-uyari.kritik { background: var(--kritik-z); }
.mk-stok { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mk-stok > span { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.mk-stok > b { margin-left: auto; font: 600 15px var(--baslik-tipi); }
.mk-stok > small { font-size: 12px; }
.mk-stok > span + small { margin-left: auto; }
.mk-stok .cubuk { flex: 1 1 100%; width: 100%; height: 5px; }
.cubuk.ton-iyi .c-dolu { fill: var(--iyi); } .cubuk.ton-uyari .c-dolu { fill: var(--uyari); } .cubuk.ton-kritik .c-dolu { fill: var(--kritik); }   /* doluluk: >=60 iyi, >=25 uyari (Stok ozeti ile ayni) */
.mk-stok > b.ton-iyi, .pk-sayilar b.ton-iyi { color: var(--iyi); } .mk-stok > b.ton-uyari, .pk-sayilar b.ton-uyari { color: var(--uyari); } .mk-stok > b.ton-kritik, .pk-sayilar b.ton-kritik { color: var(--kritik); }
.mk-bilgi { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; white-space: nowrap; margin: 0; padding: 11px 0; border-top: 1px solid var(--cizgi-g); border-bottom: 1px solid var(--cizgi-g); }
.mk-bilgi dt { color: var(--soluk); font-size: 11.5px; }
.mk-bilgi dd { margin: 2px 0 0; font: 400 11.5px var(--mono); color: var(--yazi); overflow-wrap: anywhere; }
.mk-bilgi dd.mk-ton-iyi { color: var(--iyi); } .mk-bilgi dd.mk-ton-uyari { color: var(--uyari); } .mk-bilgi dd.mk-ton-kritik { color: var(--kritik); }
.mk-alt { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--soluk); }
@media (max-width: 420px) { .mk-bilgi { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } }

/* Makine sayfasi */
.kutular.alti { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 760px) { .kutular.alti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bas-sag form { display: flex; }
.kart-bant h2 { flex: 1; min-width: 0; }
.kart-bant .dugme .ik { fill: currentColor; }
.sekmeler a { font-size: 13.5px; }
td.goz { background: rgba(255, 255, 255, .035); }
:root[data-theme="light"] td.goz { background: var(--yuzey-2); }
td.goz-yok, :root[data-theme="light"] td.goz-yok { background: transparent; }
table.raf tbody th { background: none; position: static; }
table.raf tbody tr:hover td { background: rgba(255, 255, 255, .035); }
table.raf tbody tr:hover td.goz-yok { background: transparent; }
td.goz b { font-size: 13.5px; }
td.goz .etiket { font-size: 11px; color: var(--vurgu); }
td.goz > .goz-alt { font-family: var(--mono); font-size: 11px; }

/* Kurulum adimlari */
.kurulum-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kurulum-bas h2 { margin: 0; flex: 1; }
.kurulum-bas .sayi { font: 500 12px var(--mono); color: var(--yazi-2); }
.kurulum-bas .cubuk { flex: 1 1 100%; width: 100%; height: 5px; }
.adimlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adim { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--cizgi-g); border-radius: 14px; min-width: 0; flex-wrap: wrap; }
.adim.sirada { border-color: color-mix(in srgb, var(--vurgu) 55%, var(--cizgi)); background: var(--vurgu-z); }
.adim.hata { border-color: var(--kritik); }
.adim-no { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 500 11.5px var(--mono); font-style: normal; color: var(--yazi-2); border: 1px solid var(--cizgi); }
.adim-no .ik { width: 14px; height: 14px; }
.adim.tamam .adim-no { color: var(--iyi); border-color: transparent; }
.adim-yazi { flex: 1 1 220px; min-width: 0; }
.adim-yazi b { display: block; font-weight: 600; font-size: 14px; }
.adim-yazi small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--yazi-2); overflow-wrap: anywhere; }
.adim.tamam .adim-yazi small { color: var(--soluk); }
.kurulum-bant { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kopya { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12.5px; color: var(--yazi-2); }

/* Kurulumu bitmemis kart: yumusak sari ile ayrilir */
.makine-kart.bekleyen-kart { border-color: color-mix(in srgb, var(--uyari) 78%, var(--cizgi)); }
.makine-kart.bekleyen-kart:hover { border-color: var(--uyari); }
.bekleyen-kart .kutu-simge { color: var(--uyari); background: var(--uyari-z); }
.bekleyen-kart .mk-stok > span { color: var(--uyari); font-size: 11.5px; }
.bekleyen-kart .mk-stok > b { color: var(--uyari); font-size: 17px; }
.bekleyen-kart .c-dolu { fill: var(--uyari); }
.mk-sira { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 11px; border-radius: 10px; background: var(--uyari-z); font-size: 13px; color: var(--yazi); }
.mk-sira .ik { width: 10px; height: 10px; flex: none; color: var(--uyari); }
.mk-sira b { font-weight: 600; }

/* Tek ayar formu */
.ayar-form h3 { font: 600 15px var(--baslik-tipi); margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--cizgi-g); }
.ayar-form h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ayar-form h3 small { font: 400 12.5px var(--yazi-tipi); margin-left: 6px; }
@media (min-width: 761px) {
  .ayar-form .form-satir label { flex: 0 1 300px; }
  .ayar-form #kart-ayar + .form-satir label { flex: 0 1 190px; }
}
.soguk-onay { margin-top: 8px; padding: 8px 11px; border-radius: 10px; background: var(--uyari-z); }

/* Kalan sayfalar: tek baslik duzeni, sakin tablolar, ayri sayfada dar kart */
.kart-bant h2 small { font: 400 12.5px var(--yazi-tipi); margin-left: 6px; }
.kart-bant .hap { margin-left: auto; }
.kart-bant { flex-wrap: wrap; }
.kart > .form-alt:only-of-type { margin-top: 0; }
.kart table:not(.raf) th { font-size: 10px; }
.kart table:not(.raf) td { padding: 10px 12px; font-size: 13.5px; }
.kart table:not(.raf) td.sayi, .kart table:not(.raf) td .sayi { font-size: 11.5px; }
table.raf.plan td.goz input, table.raf.plan td.goz select { font-size: 12.5px; }
.plan td.goz label { font-size: 11.5px; color: var(--soluk); }
@media (min-width: 761px) {
  .kart > form.form-satir label { flex: 0 1 220px; }
  .kart > form.form-satir label.genis { flex: 0 1 300px; }
  .kart > form.form > label > input, .kart > form.form > label > select { max-width: 420px; }
}

/* Motor testi */
.motor-islem { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.motor-kart { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 13px 15px; border: 1px solid var(--cizgi-g); border-radius: 14px; }
.motor-kart .not { margin: 0; }
.motor-ozet { margin-left: auto; font: 600 15px var(--baslik-tipi); }
td.motor-goz { min-width: 88px; font-size: 12.5px; }
td.motor-var { border-color: color-mix(in srgb, var(--iyi) 45%, var(--cizgi)); }
td.motor-yok { border-style: dashed; color: var(--soluk); }
td.motor-sorun { border-color: var(--kritik); color: var(--kritik); }
td.motor-bos { color: var(--soluk); }
/* Motor testi sayfasi raf tablosu kadar genis: yazilar genisligi belirlemez, tablo belirler */
.motor-sayfa { width: fit-content; max-width: 100%; min-width: min(620px, 100%); }
.motor-sayfa .motor-islem, .motor-sayfa .kart > .not, .motor-sayfa .kart > .bilgi, .motor-sayfa > .bilgi, .motor-sayfa .kart > .soluk { width: 0; min-width: 100%; }
.motor-sayfa .kart-bant { width: 0; min-width: calc(100% + 48px); }
@media (max-width: 760px) { .motor-sayfa .kart-bant { min-width: calc(100% + 28px); } }
/* Motor sonucu renkleri: var/tur tamam yesil, yok kirmizi, ariza sari. Satir uzerine gelince renk kaybolmaz, yalniz farenin oldugu goz koyulasir. */
table.raf.motor-tablo tbody tr td.motor-goz, table.raf.motor-tablo tbody tr:hover td.motor-goz { color: var(--yazi); transition: background .12s; }
table.raf.motor-tablo tbody tr td.motor-var, table.raf.motor-tablo tbody tr:hover td.motor-var { background: color-mix(in srgb, var(--iyi) 34%, transparent); border: 1px solid var(--iyi); }
table.raf.motor-tablo tbody tr td.motor-yok, table.raf.motor-tablo tbody tr:hover td.motor-yok { background: color-mix(in srgb, var(--kritik) 30%, transparent); border: 1px solid var(--kritik); }
table.raf.motor-tablo tbody tr td.motor-sorun, table.raf.motor-tablo tbody tr:hover td.motor-sorun { background: color-mix(in srgb, var(--uyari) 32%, transparent); border: 1px solid var(--uyari); }
table.raf.motor-tablo tbody tr td.motor-bos, table.raf.motor-tablo tbody tr:hover td.motor-bos { background: transparent; }
table.raf.motor-tablo tbody tr td.motor-goz:hover { background: rgba(3, 7, 20, .45); }
:root[data-theme="light"] table.raf.motor-tablo tbody tr td.motor-goz:hover { background: rgba(27, 36, 54, .55); color: #fff; }
table.raf.motor-tablo td.motor-var .etiket { color: var(--iyi); }
table.raf.motor-tablo td.motor-yok .etiket { color: var(--kritik); }
table.raf.motor-tablo td.motor-sorun .etiket { color: var(--uyari); }

/* Daha koyu zemin: arka isik ve cam yuzeyler kisildi (kullanici: acik mavi goz yoruyor, 2026-11-06) */
:root:not([data-theme="light"]) { --zemin: #03060f; --kart: linear-gradient(155deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)); }
.arka-isik i:nth-child(1) { background: radial-gradient(circle, rgba(22, 46, 112, .55), transparent 66%); }
.arka-isik i:nth-child(2) { background: radial-gradient(circle, rgba(40, 120, 190, .18), transparent 65%); }
.arka-isik i:nth-child(4) { background: radial-gradient(circle, rgba(40, 170, 155, .11), transparent 64%); }
:root:not([data-theme="light"]) .yan { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); }

/* Yan menu: Saha / Satis / Sistem ana baslik, sayfalar onlarin altinda girintili alt baslik */
.yan nav .menu-grup { font: 600 12.5px var(--baslik-tipi); letter-spacing: .04em; text-transform: uppercase; color: var(--yazi); padding: 16px 10px 6px; }
.yan nav .menu-grup:first-child { padding-top: 8px; }
.yan nav .menu { position: relative; margin-left: 16px; padding: 7px 10px; font-size: 13px; }
.yan nav .menu::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 1px; background: var(--cizgi); }
.yan nav .menu.secili::before { background: var(--vurgu); width: 2px; left: -8.5px; }
/* Acilir kapanir menu kumeleri: ana baslik sagda ok */
.menu-kume > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 10px; user-select: none; }
.menu-kume > summary::-webkit-details-marker { display: none; }
.menu-kume > summary:hover { background: rgba(255, 255, 255, .05); }
.menu-kume > summary .ik { width: 10px; height: 10px; color: var(--soluk); transition: transform .15s; }
.menu-kume[open] > summary .ik { transform: rotate(90deg); }
.yan nav .menu-kume:first-child > .menu-grup { padding-top: 8px; }
.menu-kume[open] > summary { margin-bottom: 2px; }
/* Sari isik ortada (onceden sagdaydi); digerleri gibi yavasca kayar */
.arka-isik i:nth-child(3) { right: auto; left: calc(50% - 28vw); top: calc(50vh - 28vw); }

/* Makine basliginin yaninda satis durumu ve belirgin ac/kapat dugmesi */
.bas-baslik { display: flex; align-items: center; gap: 14px 56px; flex-wrap: wrap; }
.bas-ad { min-width: 0; }
.bas-baslik form { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.dugme.satis-dugme { display: inline-flex; align-items: center; gap: 9px; padding: 9px 20px; font-size: 14px; font-weight: 700; border-radius: 12px; border: 0; color: #fff; min-width: 172px; justify-content: center; }
.dugme.satis-dugme i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
:root .dugme.satis-dugme.acik.acik, .dugme.satis-dugme.acik { background: #1fae74; color: #fff; box-shadow: 0 6px 18px -8px rgba(31, 174, 116, .9); }
:root .dugme.satis-dugme.acik.acik:hover { background: #26c483; color: #fff; }
:root .dugme.satis-dugme.kapali.kapali, .dugme.satis-dugme.kapali { background: #d93838; color: #fff; box-shadow: 0 6px 18px -8px rgba(217, 56, 56, .9); }
:root .dugme.satis-dugme.kapali.kapali:hover { background: #ec4545; color: #fff; }
.satis-not { white-space: nowrap; font-size: 12px; color: var(--soluk); }

/* Uzaktan urun ver (servis cikisi, 2026-11-07) */
.servis-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.servis-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--yazi-2); }
.servis-form select { min-width: 240px; }
.servis-form input { min-width: 280px; }
@media (max-width: 760px) { .servis-form select, .servis-form input { min-width: 0; width: 100%; } .servis-form label { flex: 1 1 100%; } }

/* ---- Dolum sayfasi: goz kartlari (2026-11-07, Yutomat duzeni) ---- */
.dolum-ust { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dolum-izgara { display: flex; flex-direction: column; gap: 20px; padding: 4px 0 6px; }
.dolum-sira h3 { margin: 0 0 10px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.dolum-gozler { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.dgoz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 14px 18px; border: 1px solid var(--cizgi); border-radius: 16px;
  background: var(--kart); box-shadow: var(--ic-isik); overflow: hidden; }
.dgoz::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ton, var(--cizgi)); }
.dgoz.ton-iyi { --ton: var(--iyi); } .dgoz.ton-uyari { --ton: var(--uyari); } .dgoz.ton-kritik { --ton: var(--kritik); }
.dgoz.degisti { border-color: var(--vurgu); box-shadow: 0 0 0 1px var(--vurgu) inset, var(--ic-isik); }
.dgoz.dgoz-ariza { border-color: var(--kritik); }
.dgoz-ust { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 20px; position: relative; }
.dgoz-ust .rozet { position: absolute; right: 0; }
.dgoz-no { font: 600 13px var(--mono); color: var(--yazi-2); }
.dgoz-resim { width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center; font: 700 17px var(--yazi-tipi); color: var(--vurgu);
  background: var(--vurgu-z); border: 1px solid var(--cizgi-g); }
.dgoz-ad { width: 100%; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
label.dgoz-sayi { flex-direction: row; align-items: baseline; justify-content: center; gap: 6px; font: 700 19px var(--mono); color: var(--ton, var(--yazi)); white-space: nowrap; }
.dgoz-sayi input, .dgoz-sayi input:hover { flex: none; width: 3ch; padding: 1px 0; text-align: right; font: inherit; color: inherit; background: transparent !important; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; box-shadow: none !important; }
.dgoz-sayi input:hover { border-bottom-color: var(--cizgi); }
.dgoz-sayi input:focus { outline: none; border-bottom-color: var(--vurgu); }
.dgoz-sayi span { color: var(--ton, var(--soluk)); }
.dgoz-cubuk { width: 100%; height: 5px; border-radius: 5px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.dgoz-cubuk i { display: block; height: 100%; width: 0; background: var(--ton, var(--vurgu)); transition: width .15s; }
.dgoz-dugmeler { display: flex; gap: 14px; margin-top: 4px; }
.dgoz-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cizgi); background: rgba(255, 255, 255, .04); color: var(--yazi); font-size: 21px; line-height: 1; cursor: pointer; }
.dgoz-btn:hover:not(:disabled) { border-color: var(--vurgu); color: var(--vurgu); background: var(--vurgu-z); }
.dgoz-doldur { width: 100%; margin-top: 4px; padding: 10px 0; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--cizgi); border-radius: 12px;
  background: rgba(255, 255, 255, .04); color: var(--yazi); font: 600 14px var(--yazi-tipi); cursor: pointer; }
.dgoz-doldur .ik { width: 16px; height: 16px; }
.dgoz-doldur:hover:not(:disabled) { border-color: var(--vurgu); color: var(--vurgu); background: var(--vurgu-z); }
.dgoz-btn:disabled, .dgoz-doldur:disabled { opacity: .35; cursor: not-allowed; }   /* dolu goz: islem yapilamaz imleci */
.dolum-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
/* JS varken: yalniz degisiklik olunca sag altta yuzen kutu (kaydet / kapat) */
.dolum-alt.js { position: fixed; right: 24px; bottom: 24px; z-index: 40; margin: 0; padding: 14px 16px; border: 1px solid var(--vurgu); border-radius: 16px;
  background: var(--yuzey-2); box-shadow: var(--golge), 0 0 0 4px var(--vurgu-z); transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.dolum-alt.js.gorunur { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) { .dolum-alt.js { left: 12px; right: 12px; bottom: 12px; gap: 8px 10px; } .dolum-alt.js .dolum-ozet { flex: 1 1 100%; } .dolum-alt.js .dugme { flex: 1 1 0; } }
.dolum-ozet { font-weight: 600; }
.dolum-ozet.var { color: var(--vurgu); }
.dolum-not { margin: 8px 0 0; }
.dugme:disabled { opacity: .45; cursor: not-allowed; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .dolum-gozler { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .dgoz-resim { width: 46px; height: 46px; } .dolum-ust { margin-left: 0; width: 100%; } }
.dolum-alt.js.ton-iyi { border-color: var(--iyi); box-shadow: var(--golge), 0 0 0 4px var(--iyi-z); }
.dolum-alt.js.ton-iyi .dolum-ozet { color: var(--iyi); }
.dolum-alt.js.ton-kritik { border-color: var(--kritik); box-shadow: var(--golge), 0 0 0 4px var(--kritik-z); }
.dolum-alt.js.ton-kritik .dolum-ozet { color: var(--kritik); }
.dolum-alt .dolum-ozet { max-width: 340px; }
.dolum-alt [hidden] { display: none !important; }
/* dolum cubugu: sunucudan hazir genislik (%5 adim; CSP satir ici stile izin vermez) */
.dgoz-cubuk i.dw-0 { width: 0%; } .dgoz-cubuk i.dw-5 { width: 5%; } .dgoz-cubuk i.dw-10 { width: 10%; } .dgoz-cubuk i.dw-15 { width: 15%; } .dgoz-cubuk i.dw-20 { width: 20%; } .dgoz-cubuk i.dw-25 { width: 25%; } .dgoz-cubuk i.dw-30 { width: 30%; } .dgoz-cubuk i.dw-35 { width: 35%; } .dgoz-cubuk i.dw-40 { width: 40%; } .dgoz-cubuk i.dw-45 { width: 45%; } .dgoz-cubuk i.dw-50 { width: 50%; } .dgoz-cubuk i.dw-55 { width: 55%; } .dgoz-cubuk i.dw-60 { width: 60%; } .dgoz-cubuk i.dw-65 { width: 65%; } .dgoz-cubuk i.dw-70 { width: 70%; } .dgoz-cubuk i.dw-75 { width: 75%; } .dgoz-cubuk i.dw-80 { width: 80%; } .dgoz-cubuk i.dw-85 { width: 85%; } .dgoz-cubuk i.dw-90 { width: 90%; } .dgoz-cubuk i.dw-95 { width: 95%; } .dgoz-cubuk i.dw-100 { width: 100%; }

/* ---- Plan (raf duzeni) sayfasi (2026-11-07, Yutomat duzeni) ---- */
.plan-duzen { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.plan-urunler { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
.plan-ara { width: 100%; margin-bottom: 10px; }
.plan-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.plan-urun { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cizgi-g); border-radius: 12px; background: rgba(255, 255, 255, .03);
  color: var(--yazi); text-align: left; cursor: grab; font: inherit; }
.plan-urun:hover { border-color: var(--cizgi); background: rgba(255, 255, 255, .06); }
.plan-urun.secili { border-color: var(--vurgu); box-shadow: 0 0 0 1px var(--vurgu) inset; background: var(--vurgu-z); }
.plan-urun-resim { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; font: 700 12px var(--yazi-tipi); color: var(--vurgu); background: var(--vurgu-z); }
.plan-urun-yazi { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.plan-urun-yazi b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-urun-yazi small { font-size: 11.5px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-urun-tut { flex: none; width: 10px; height: 16px; opacity: .55; background: radial-gradient(circle, var(--yazi-2) 1.3px, transparent 1.6px) 0 0 / 5px 5.33px; }   /* 2 x 3 nokta tutamak */
.plan-urun:hover .plan-urun-tut { opacity: 1; }
.plan-izgara { display: flex; flex-direction: column; gap: 20px; padding: 4px 0 6px; }
.plan-gozler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pgoz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 12px 14px; border: 1px solid var(--cizgi); border-radius: 16px;
  background: var(--kart); box-shadow: var(--ic-isik); cursor: pointer; min-height: 168px; }
.pgoz:hover, .pgoz:focus-visible { border-color: var(--cizgi); outline: none; box-shadow: 0 0 0 1px var(--soluk) inset, var(--ic-isik); }
.pgoz.pgoz-bos { border-style: dashed; background: transparent; }
.pgoz.degisti { border-color: var(--vurgu); border-style: solid; box-shadow: 0 0 0 1px var(--vurgu) inset, var(--ic-isik); }
.pgoz.pgoz-hata { border-color: var(--kritik); box-shadow: 0 0 0 1px var(--kritik) inset; }
.pgoz.surukle-ustunde { border-color: var(--iyi); border-style: solid; background: var(--iyi-z); }
.pgoz-ust { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.pgoz-no { font: 600 12px var(--mono); color: var(--yazi-2); }
.pgoz-arac { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.pgoz:hover .pgoz-arac, .pgoz:focus-within .pgoz-arac { opacity: 1; }
@media (hover: none) { .pgoz-arac { opacity: 1; } }
.pgoz-ikon { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--cizgi); border-radius: 8px; background: rgba(0, 0, 0, .25); color: var(--yazi-2); font-size: 15px; line-height: 1; cursor: pointer; }
.pgoz-ikon .ik { width: 13px; height: 13px; }
.pgoz-ikon:hover { color: var(--vurgu); border-color: var(--vurgu); }
.pgoz-sil:hover { color: var(--kritik); border-color: var(--kritik); }
.pgoz-bos .pgoz-sil { display: none; }
.pgoz-resim { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; font: 700 15px var(--yazi-tipi); color: var(--vurgu); background: var(--vurgu-z); border: 1px solid var(--cizgi-g); }
.pgoz-bos .pgoz-resim { color: var(--soluk); background: transparent; border-style: dashed; }
.pgoz-ad { width: 100%; text-align: center; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgoz-bos .pgoz-ad { color: var(--soluk); font-weight: 500; }
.pgoz-alt { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pgoz-fiyat { font: 600 13px var(--mono); color: var(--tutar, var(--iyi)); }
.pgoz-kap { font: 500 11.5px var(--mono); color: var(--soluk); padding: 2px 7px; border: 1px solid var(--cizgi-g); border-radius: 10px; }
.pgoz-fiyat:empty, .pgoz-kap:empty { display: none; }
.plan-pencere { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--cizgi); border-radius: 18px; background: var(--yuzey-2); color: var(--yazi); box-shadow: var(--golge); }
.plan-pencere::backdrop { background: rgba(3, 7, 20, .6); backdrop-filter: blur(2px); }
.plan-pencere h3 { margin: 0 0 14px; font-size: 18px; }
.plan-pencere label { margin-bottom: 10px; }
.plan-pencere select, .plan-pencere input { width: 100%; }
.plan-pencere-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-pencere-alt { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
@media (max-width: 900px) { .plan-duzen { grid-template-columns: 1fr; } .plan-urunler { position: static; max-height: 320px; } }
@media (max-width: 760px) { .plan-gozler { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } }
/* plan: her raf tek satirda (genis ekranda sutun sayisi kadar) */
@media (min-width: 1100px) { .plan-gozler.s-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .plan-gozler.s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-gozler.s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan-gozler.s-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plan-gozler.s-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .plan-gozler.s-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .plan-gozler.s-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .plan-gozler.s-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .plan-gozler.s-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .plan-gozler.s-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .plan-gozler.s-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .plan-gozler .pgoz { padding-left: 8px; padding-right: 8px; } }

/* ---- Projeler (2026-11-07) ---- */
.proje-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; }
.proje-kart { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: 18px; background: var(--kart); box-shadow: var(--golge), var(--ic-isik);
  color: var(--yazi); text-decoration: none; transition: border-color .12s, transform .12s; }
.proje-kart:hover { border-color: var(--vurgu); transform: translateY(-1px); }
.proje-kart.projesiz { border-style: dashed; }
.pk-bas { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pk-simge { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 700 15px var(--yazi-tipi); color: var(--vurgu); background: var(--vurgu-z); border: 1px solid var(--cizgi-g); }
.projesiz .pk-simge { color: var(--soluk); background: transparent; border-style: dashed; }
.pk-ad { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pk-ad b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-ad small { color: var(--soluk); font-size: 12.5px; }
.pk-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-sayilar div { display: flex; flex-direction: column; gap: 2px; }
.pk-sayilar span { font-size: 11.5px; color: var(--soluk); text-transform: uppercase; letter-spacing: .05em; }
.pk-sayilar b { font-size: 17px; }
.pk-sablon { display: flex; align-items: center; gap: 6px; color: var(--yazi-2); font-size: 12.5px; }
.pk-sablon .ik { width: 14px; height: 14px; }
.pk-sablon.secilmedi { color: var(--soluk); }
.kirinti { margin: 0 0 12px; font-size: 13px; color: var(--soluk); }
.kirinti a { color: var(--vurgu); }
.secim-liste { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.form-ust-bosluk { margin-top: 16px; }
.satir-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.satir-form label { flex: 1 1 200px; }
.proje-yeni summary { cursor: pointer; list-style: none; }
.proje-yeni summary::-webkit-details-marker { display: none; }
.proje-ekle { align-items: center; justify-content: center; text-align: center; gap: 6px; border-style: dashed; background: transparent; box-shadow: none; cursor: pointer; font: inherit; min-height: 150px; }
.proje-ekle small { color: var(--soluk); font-size: 12.5px; }
.pk-arti { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--vurgu); background: var(--vurgu-z); border: 1px solid var(--cizgi-g); }
.proje-bos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.proje-bos > div { flex: 1 1 320px; }
.proje-bos b { font-size: 16px; }
.proje-bos .not { margin: 4px 0 0; }
.proje-kart.kurulum { border-color: var(--uyari); border-style: dashed; }
.proje-kart.kurulum .pk-simge { color: var(--uyari); border-color: var(--uyari); }
.bolum-baslik { margin: 18px 0 10px; font-size: 15px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.bolum-baslik small { font-size: 12.5px; font-weight: 500; color: var(--soluk); }
.makine-ara { display: flex; gap: 8px; margin: 0 0 14px; max-width: 560px; }
.makine-ara input { flex: 1; }
.bolum-bos { margin: 0 0 6px; padding: 12px 16px; border: 1px dashed var(--cizgi); border-radius: 14px; color: var(--soluk); font-size: 13px; }
.bas-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 36px; }
.plan-pencere .secim-liste { max-height: 50vh; }
.plan-pencere input[type="checkbox"] { width: 15px; flex: none; }
.plan-pencere h3 small { display: block; font-size: 12.5px; font-weight: 500; margin-top: 3px; }
.plan-pencere .form-ust-bosluk { padding-top: 14px; border-top: 1px solid var(--cizgi-g); }
.bas-sablon { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.bas-sablon:hover { color: var(--yazi); }
.sablon-projeler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sablon-projeler li { padding: 6px 12px; border: 1px solid var(--cizgi); border-radius: 999px; background: var(--yuzey-2); font-size: 13px; }
.fiyat-girdi { width: 110px; text-align: right; padding: 6px 10px; }
.fiyat-girdi::placeholder { color: var(--soluk); opacity: .6; }
.fark-art { color: var(--iyi); } .fark-eks { color: var(--kritik); }
.sayfa-not { margin: 4px 0 22px; max-width: 820px; line-height: 1.55; }
.gonder-sonuc { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.pgoz-rozet[hidden] { display: none; }
.pgoz-rozet { display: inline-block; margin-top: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--cizgi); }
.pgoz-rozet.ozel { color: var(--mor); border-color: var(--mor); }
.pgoz-rozet.eski { color: var(--uyari); border-color: var(--uyari); }
.sablon-isaret { color: var(--vurgu); font-weight: 600; }
.fiyat-uyari { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Urunler */
.urun-arac { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.urun-ara { max-width: 460px; }
.kat-filtre { display: flex; flex-wrap: wrap; gap: 8px; }
.kat-cip { font: inherit; font-size: 13px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey-2); color: var(--yazi-2); cursor: pointer; }
.kat-cip small { color: var(--soluk); margin-left: 3px; }
.kat-cip.secili { background: var(--vurgu-z); border-color: var(--vurgu); color: var(--yazi); }
.urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.urun-kart { display: flex; flex-direction: column; border: 1px solid var(--cizgi); border-radius: 18px; background: var(--yuzey); color: var(--yazi); text-decoration: none; overflow: hidden; transition: border-color .12s, transform .12s; }
.urun-kart:hover { border-color: var(--vurgu); color: var(--yazi); transform: translateY(-1px); }
.urun-kart[hidden] { display: none; }
.urun-kart.pasif { opacity: .55; }
.uk-resim { height: 150px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi-g); }
.uk-resim img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.uk-resim span { font: 700 22px var(--yazi-tipi); color: var(--vurgu); }
.uk-govde { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uk-kat { color: var(--soluk); font-size: 11.5px; }
.uk-ad { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uk-fiyat { font-size: 16px; font-weight: 700; margin-top: 3px; }
.uk-alt { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--soluk); font-size: 11.5px; margin-top: 4px; }
.uk-duzenle { color: var(--vurgu); }
.kat-liste { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.kat-satir { display: flex; gap: 8px; align-items: center; }
.kat-form { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.kat-form input[name="ad"] { flex: 1; min-width: 0; width: auto; }
.urun-duzen { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .urun-duzen { grid-template-columns: 1fr; } }
.urun-resim-kart { display: flex; flex-direction: column; gap: 12px; }
.urun-resim-buyuk { aspect-ratio: 1; border-radius: 14px; background: var(--yuzey-2); border: 1px solid var(--cizgi-g); display: grid; place-items: center; overflow: hidden; }
.urun-resim-buyuk img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.urun-resim-buyuk span { font: 700 42px var(--yazi-tipi); color: var(--vurgu); }
.resim-sec { position: relative; align-self: flex-start; }
.resim-sec input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pgoz-resim img, .dgoz-resim img, .plan-urun-resim img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.resim-bul { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cizgi-g); }
.resim-bul-satir { display: flex; gap: 8px; }
.resim-bul-satir input { flex: 1; min-width: 0; }
.barkod-sonuc { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey-2); font-size: 13px; }
.barkod-sonuc[hidden] { display: none; }
.barkod-bilgi { display: flex; flex-direction: column; gap: 2px; }
.barkod-resim { aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 10px; background: var(--yuzey); color: var(--soluk); font-size: 12px; text-align: center; padding: 6px; }
.barkod-resim img { width: 100%; height: 100%; object-fit: contain; }
.barkod-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.resim-kaynak { margin-top: -4px; }
/* Ozet (gosterge paneli) */
.bolum-satir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi-g); }
.bolum-satir .bolum { margin: 0; padding: 0; border: 0; flex: 1 1 220px; min-width: 0; }
.bolum-satir .bolum small { white-space: nowrap; }
.ozet-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: 16px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 900px) { .ozet-izgara { grid-template-columns: 1fr; } }
.ozet-toplam { display: grid; grid-template-columns: 1fr; gap: 14px; align-content: center; }
@media (max-width: 900px) { .ozet-toplam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ozet-toplam div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ozet-toplam span { color: var(--soluk); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ozet-toplam b { font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fark { font: 600 11.5px var(--mono); margin-left: 4px; color: var(--soluk); }
.fark.art { color: var(--iyi); } .fark.eks { color: var(--kritik); }
.oran { display: block; width: 100%; height: 6px; }
.o-zemin { fill: var(--cizgi-g); } .o-dolu { fill: var(--seri); }
.sira-liste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sira-liste li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sl-resim, .sl-no { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--yuzey-2); border: 1px solid var(--cizgi-g); font: 700 13px var(--yazi-tipi); color: var(--vurgu); overflow: hidden; }
.sl-resim img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sl-no { font-family: var(--mono); color: var(--yazi-2); }
.sl-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sl-ust { display: flex; justify-content: space-between; gap: 10px; min-width: 0; font-size: 14px; }
.sl-ust b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sl-ust a { min-width: 0; overflow: hidden; color: var(--yazi); text-decoration: none; }
.sl-ust a:hover { color: var(--vurgu); }
.sl-ust .sayi { flex: none; color: var(--yazi-2); }
.durum-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.durum-liste li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.durum-liste b { text-align: right; font-size: 15px; }
.stok-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--cizgi-g); }
.stok-ozet div { display: flex; flex-direction: column; gap: 3px; }
.stok-ozet span { color: var(--soluk); font-size: 12px; }
.stok-ozet b { font-size: 19px; font-weight: 600; }
/* Uyarilar */
.uyari-suz { margin-left: auto; }
.uyari-proje { display: block; font-size: 12px; }
.kart-bant form { margin-left: 8px; }
@media (max-width: 640px) {
  .uyari-tablo thead { display: none; }
  .uyari-tablo, .uyari-tablo tbody { display: block; }
  .kart table.uyari-tablo tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--cizgi-g); }
  .kart table.uyari-tablo td { display: block; padding: 0; border: 0; }
  .uyari-tablo td:nth-child(1) { grid-column: 1; }
  .uyari-tablo td:nth-child(2) { grid-column: 1; }
  .uyari-tablo td:nth-child(3) { grid-column: 1; color: var(--yazi-2); font-size: 13px; }
  .uyari-tablo td:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .uyari-tablo td.bos { grid-column: 1 / -1; }
  .kart-bant h2 small { display: block; margin: 2px 0 0; }
}
/* Satis analizi */
.analiz-kirilim { margin-left: auto; }
.analiz-ad { display: inline-flex; align-items: center; gap: 10px; }
.analiz-ad img { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; background: var(--yuzey-2); padding: 2px; }
.analiz-cubuk { width: 22%; min-width: 90px; }
.analiz-tablo tfoot th { border-top: 1px solid var(--cizgi); padding-top: 12px; }
@media (max-width: 640px) { .analiz-cubuk, .analiz-cubuk-bas { display: none; } }
/* Ozet: teslim kalitesi, satis ozeti, proje cirosu, mini listeler */
.kutular.kalite { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.kutu.k-iyi { --k: var(--iyi); } .kutu.k-uyari { --k: var(--uyari); } .kutu.k-kritik { --k: var(--kritik); }
.kutu > b small { font-size: 15px; color: var(--soluk); font-weight: 500; }
.satis-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-bottom: 22px; }
.so-kart { display: flex; flex-direction: column; gap: 6px; margin: 0; border-top: 2px solid var(--k, var(--vurgu)); }
.so-bugun { --k: var(--seri); } .so-hafta { --k: var(--iyi); } .so-ay { --k: var(--uyari); }
.so-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.so-ust span { color: var(--yazi-2); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.so-ust em { font: 500 11px var(--mono); font-style: normal; color: var(--yazi-2); background: var(--cizgi-g); border: 1px solid var(--cizgi); padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.so-kart > b { font-size: 26px; font-weight: 600; color: var(--k); white-space: nowrap; }
.so-kart > small { color: var(--soluk); }
.pc-ad { display: inline-flex; align-items: center; gap: 10px; }
.pc-simge { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 11px var(--yazi-tipi); color: var(--vurgu); background: var(--vurgu-z); border: 1px solid var(--cizgi-g); }
.mini-liste, .son-liste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.mini-liste li, .son-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi-g); min-width: 0; }
.mini-liste li:last-child, .son-liste li:last-child { border-bottom: 0; }
.ml-simge { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--cizgi-g); }
.ml-simge .ik { width: 16px; height: 16px; }
.ml-simge.kirmizi { color: var(--kritik); background: color-mix(in srgb, var(--kritik) 14%, transparent); }
.ml-simge.sari { color: var(--uyari); background: color-mix(in srgb, var(--uyari) 14%, transparent); }
.ml-simge.yesil { color: var(--iyi); background: color-mix(in srgb, var(--iyi) 14%, transparent); }
.ml-govde, .son-liste .sl-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ml-govde a { color: var(--yazi); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-govde a:hover { color: var(--vurgu); }
.son-liste .sl-govde b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ml-sag, .son-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.son-sag { flex-direction: row; align-items: center; gap: 10px; }
.kritik-yazi { color: var(--kritik); } .uyari-yazi { color: var(--uyari); } .iyi-yazi { color: var(--iyi); }
@media (max-width: 640px) { .son-sag .rozet { display: none; } }
.uk-gramaj { color: var(--yazi-2); font-size: 12.5px; margin-top: -1px; }
.satir-form.dortlu label { flex: 1 1 120px; }
.uk-satis { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--soluk); margin-top: 2px; }
.uk-satis i { width: 7px; height: 7px; border-radius: 50%; background: var(--soluk); opacity: .6; flex: none; }
.uk-satis.var { color: var(--iyi); }
.uk-satis.var i { background: var(--iyi); opacity: 1; }
.kat-ayrac { width: 1px; align-self: stretch; background: var(--cizgi); margin: 2px 4px; }
.urun-makineler { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cizgi-g); }
.urun-makineler h3 { margin: 0 0 6px; font-size: 15px; }
.uk-satis.var { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.uk-satis.var:hover { filter: brightness(1.2); }
.urun-makine-liste .ml-sag { gap: 3px; }
.um-baglanti { font-size: 12px; }
.um-baglanti a { color: var(--vurgu); }
#urun-makine-pencere { width: min(520px, 94vw); }
#urun-makine-pencere [data-urun-makine-icerik] { max-height: 60vh; overflow-y: auto; }
.um-ozet { margin: 0 0 8px; font-size: 13.5px; }
/* Satislar: alisveris (sepet) satirlari */
.as-resim { width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--yuzey-2); border: 1px solid var(--cizgi-g); overflow: hidden; font: 700 12px var(--yazi-tipi); color: var(--vurgu); }
.as-resim img, .as-kresim img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.as-adet { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey-2); font: 500 11.5px var(--yazi-tipi); color: var(--yazi-2); vertical-align: middle; }
.as-govde { padding: 4px 16px 14px; }
.as-makine { margin: 4px 0 10px; font-size: 13.5px; }
.as-makine a { color: var(--yazi); }
.as-kalemler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.as-kalem { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--yuzey-2); min-width: 0; }
.as-kalem.sorun { box-shadow: inset 3px 0 0 var(--kritik); }
.as-kresim { width: 64px; height: 64px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--yuzey); overflow: hidden; font: 700 15px var(--yazi-tipi); color: var(--vurgu); }
.as-kbilgi { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; }
.as-kbilgi > b:first-child { font-weight: 600; overflow-wrap: anywhere; }
.as-not { margin: 10px 0 0; font-size: 12px; }
/* Satislar: filtre (4 sutun), kutular, alisveris renkleri */
.filtre4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.filtre4 input, .filtre4 select { width: 100%; }
.f-kisayol { grid-column: span 2; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--yazi-2); min-width: 0; }
.f-kisayol small { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; }
.f-kisayol small .ik { width: 13px; height: 13px; }
.hap-blok { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; }
.hap-blok a { border-radius: 0; border: 0; border-right: 1px solid var(--cizgi); text-align: center; padding: 9px 6px; background: var(--girdi); }
.hap-blok a:last-child { border-right: 0; }
.f-dugme { grid-column: span 2; display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .filtre4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .filtre4 { grid-template-columns: 1fr; } .f-kisayol, .f-dugme { grid-column: auto; } }
.kutu.k-yesil { --k: var(--iyi); } .kutu.k-notr { --k: var(--yazi); }
.satis-kutular { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.oran-rozet { font: 600 11px var(--mono); font-style: normal; padding: 1px 6px; border-radius: 6px; vertical-align: middle; background: color-mix(in srgb, var(--k) 18%, transparent); color: var(--k); }
/* Cerceve sade (renkli kalin cerceve gozu yoruyordu, kullanici 2026-11-08): durum yalniz soldaki ince serit ve etiketle. */
details.alisveris.satis-satir { border-color: var(--cizgi); border-width: 1px; }
details.alisveris.as-iyi { box-shadow: inset 3px 0 0 var(--iyi); }
details.alisveris.as-uyari { box-shadow: inset 3px 0 0 var(--uyari); }
details.alisveris.as-mavi { box-shadow: inset 3px 0 0 var(--turuncu); }     /* butun urunler teslim, en az biri sensor gormeden */
details.alisveris.as-kritik { box-shadow: inset 3px 0 0 var(--kritik); background: color-mix(in srgb, var(--kritik) 5%, var(--kart)); }
.as-kalem { align-items: stretch; }
.as-kbilgi { flex: 1; }
.as-kalt { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-krozet { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Sakin koyu tema (2026-11-08): mavi isik gozu yoruyordu (kullanici). Zemin siyaha yakin, arka isik kisik,
   kartlar koyu lacivert ve daha dolgun; durum renkleri (yesil/sari/kirmizi) one ciksin. Acik tema degismedi. */
:root:not([data-theme="light"]) {
  --zemin: #070c18;
  --kart: linear-gradient(160deg, rgba(36, 54, 96, .58), rgba(14, 20, 36, .86) 72%);
  --yuzey: #101829; --yuzey-2: #172136; --yuzey-3: #1f2a43;
  --cizgi: rgba(255, 255, 255, .1); --cizgi-g: rgba(255, 255, 255, .06);
  --girdi: rgba(2, 4, 10, .6);
  --kart-ust: #3d7fd6;
}
:root:not([data-theme="light"]) .arka-isik { opacity: .5; }
:root:not([data-theme="light"]) .yan { background: linear-gradient(165deg, rgba(36, 54, 96, .66), rgba(11, 16, 30, .9) 70%); border-color: rgba(255, 255, 255, .08); }
:root:not([data-theme="light"]) .kart, :root:not([data-theme="light"]) .kutu, :root:not([data-theme="light"]) .karsilama, :root:not([data-theme="light"]) .satis-satir { backdrop-filter: blur(14px); }
.as-yigin { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.as-yigin .as-resim { width: 46px; height: 46px; border-radius: 11px; background: var(--yuzey-2); border: 1px solid var(--cizgi-g); }
.as-yigin .as-resim img { padding: 3px; }
.as-fazla { font: 600 11px var(--mono); color: var(--yazi-2); }
.as-ek { color: var(--yazi-2); font-weight: 500; margin-left: 2px; }
/* Uyarili teslim (sensor gormeden teslim sayildi) acik mavi (kullanici tercihi): "Kismi Basarili" sarisiyla karismasin. Sinif adlari 'turuncu' kaldi. */
:root { --turuncu: #7dd3fc; --turuncu-z: rgba(125, 211, 252, .15); }
:root[data-theme="light"] { --turuncu: #0369a1; --turuncu-z: #e0f2fe; }
.kutu.k-turuncu { --k: var(--turuncu); }
.kutu-simge.turuncu { background: var(--turuncu-z); }
.rozet.turuncu { background: var(--turuncu-z); } .rozet.turuncu i { background: var(--turuncu); }
@media (max-width: 640px) { .as-yigin .as-resim { width: 34px; height: 34px; } .as-yigin { gap: 4px; } }

/* Satis Analizi: muhasebe (2026-11-08) */
.muh-serit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--cizgi); border-radius: 12px;
  background: color-mix(in srgb, var(--iyi) 6%, var(--girdi)); font-size: 13.5px; }
.muh-serit > .ik { width: 16px; height: 16px; color: var(--iyi); }
.muh-serit small { flex: 1 1 260px; }
.muh-kutular { margin: 4px 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.muh-baslik { font-size: 15px; font-weight: 600; margin: 22px 0 6px; }
.muh-baslik small { color: var(--soluk); font-weight: 400; margin-left: 6px; }
.bos-not { color: var(--soluk); font-size: 13px; margin: 6px 0 0; }
.analiz-kutular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .analiz-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .analiz-kutular { grid-template-columns: 1fr; } }
.analiz-en { font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.analiz-en a { color: inherit; }
.analiz-maliyet-not { margin: -6px 0 14px; }

/* raf gorunumu: kucuk urun resmi (2026-11-08) */
td.goz > .goz-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; min-height: 16px; }
.goz-resim { width: 30px; height: 30px; object-fit: contain; margin: -2px -2px 0 0; }
/* uzaktan urun ver: aciklama basligi tek satir, kutular ayni hizada */
.servis-form label small { display: inline; font-size: 12px; }
/* guncelleme: makine listesi (ad, surum, baglanti etiketi ayri) */
.kutucuk .gm-ad { font-weight: 560; }
.kutucuk .gm-surum { color: var(--soluk); font-size: 12px; margin: 0 4px 0 6px; }
.kutucuk .rozet { vertical-align: middle; }
/* pay halkasi (kategori dagilimi): sabit renk sirasi, listede ad ve yuzde */
:root { --h0: #3b82f6; --h1: #0d9488; --h2: #d97706; --h3: #7c3aed; --h4: #db2777; --hd: #94a3b8; }
:root:not([data-theme="light"]) { --h0: #60a5fa; --h1: #2dd4bf; --h2: #fbbf24; --h3: #a78bfa; --h4: #f472b6; --hd: #64748b; }
.halka-kap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 4px 0 18px; }
.halka { width: 150px; height: 150px; flex: none; }
.halka .h-0 { stroke: var(--h0); } .halka .h-1 { stroke: var(--h1); } .halka .h-2 { stroke: var(--h2); }
.halka .h-3 { stroke: var(--h3); } .halka .h-4 { stroke: var(--h4); } .halka .h-diger { stroke: var(--hd); }
.halka-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; min-width: 200px; font-size: 13.5px; }
.halka-liste li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; }
.halka-liste i { width: 12px; height: 12px; border-radius: 4px; }
.halka-liste i.h-0 { background: var(--h0); } .halka-liste i.h-1 { background: var(--h1); } .halka-liste i.h-2 { background: var(--h2); }
.halka-liste i.h-3 { background: var(--h3); } .halka-liste i.h-4 { background: var(--h4); } .halka-liste i.h-diger { background: var(--hd); }
.halka-liste b { font-weight: 600; color: var(--yazi-2); }
.abc { display: inline-block; min-width: 22px; text-align: center; font: 600 11.5px var(--mono); padding: 2px 6px; border-radius: 6px; }
.abc-a { background: var(--iyi-z); color: var(--iyi); } .abc-b { background: var(--notr-z); color: var(--yazi-2); } .abc-c { background: var(--uyari-z); color: var(--uyari); }
.analiz-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: inherit; gap: 18px; }
.analiz-iki > .kart { margin: 0; }
/* muhasebe raporu seridi belirgin yesil (kullanici 2026-11-08); koyu tema kurallarini ezmek icin :root body .kart ile */
:root body .kart .muh-serit { background: linear-gradient(90deg, color-mix(in srgb, var(--iyi) 24%, transparent), color-mix(in srgb, var(--iyi) 9%, transparent));
  border: 1px solid color-mix(in srgb, var(--iyi) 60%, transparent); box-shadow: 0 10px 28px -16px var(--iyi); padding: 12px 16px; }
:root body .kart .muh-serit > .ik { width: 18px; height: 18px; color: var(--iyi); }
:root body .kart .muh-serit > b { color: var(--iyi); font-size: 14.5px; }
:root body .kart .muh-serit .dugme { background: var(--iyi) !important; border-color: transparent !important; color: #04140c !important; font-weight: 650; box-shadow: none; }  /* koyu temanin .dugme:not(.birincil) kurali daha ozgul */
:root body .kart .muh-serit .dugme:hover { filter: brightness(1.08); }
:root body .kart .muh-serit small { color: var(--yazi-2); }
:root body .analiz-kirilim a[href*="k=muhasebe"] { color: var(--iyi); }
:root body .analiz-kirilim a[href*="k=muhasebe"].secili { background: color-mix(in srgb, var(--iyi) 22%, transparent); color: var(--iyi); }
/* muhasebe seridi: kisayol ile ve alttaki kutularla arasi acik (kullanici 2026-11-08) */
:root body .kart .muh-serit { margin-top: 24px; }
.kart:has(.muh-serit) { margin-bottom: 26px; }
/* kullanicilar: proje atamasi (2026-11-08) */
.proje-sec { position: relative; flex: 0 1 auto; }
.proje-sec > summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--girdi); font-size: 13.5px; white-space: nowrap; }
.proje-sec > summary::-webkit-details-marker { display: none; }
.proje-sec[open] > summary { border-color: var(--birincil); }
.proje-sec-liste { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 240px; max-height: 320px; overflow: auto; display: grid; gap: 6px;
  padding: 12px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7); }
.proje-sec-liste label.alt { padding-left: 22px; color: var(--yazi-2); }
.kul-proje { display: block; color: var(--soluk); font-size: 12px; margin-top: 3px; max-width: 280px; }
.rol-acik { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 4px; }
/* sifre goster/gizle dugmesi (2026-11-08) */
.sifre-kap { position: relative; display: block; }
.sifre-kap > input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.sifre-goster { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--soluk); cursor: pointer; padding: 0; }
.sifre-goster:hover, .sifre-goster[aria-pressed="true"] { color: var(--yazi); background: var(--cizgi-g); }
.sifre-goster:focus-visible { outline: 2px solid var(--birincil); outline-offset: 1px; }
.sifre-goster svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* sifre sifirlama (2026-11-08) */
.giris-alt { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--yazi-2); }
.giris-alt:hover { color: var(--yazi); }
.giris-not { margin: 0 0 12px; }
.giris-kart .dugme { display: block; text-align: center; }
/* Hesabim: e-posta kutusu sifre kutulariyla ayni genislikte */
.kart.dar .form label > input:not([type=checkbox]):not([type=radio]), .kart.dar .form label > .sifre-kap { width: 100%; max-width: none; box-sizing: border-box; }
.form-satir.sik input.kul-ad { width: 140px; }
/* Raf ve Stok Yonetimi: urun resmi kutusuz ve daha buyuk; resim yoksa kisaltma kutusu kalir (kullanici 2026-11-08: dikey urun tasiyordu) */
.pgoz-resim:has(img), .dgoz-resim:has(img) { width: 100%; height: 58px; background: transparent; border: 0; border-radius: 0; overflow: hidden; }
.pgoz-resim:has(img) img, .dgoz-resim:has(img) img { width: 100%; height: 58px; max-width: 100%; object-fit: contain; border-radius: 0; display: block; }
@media (max-width: 760px) { .pgoz-resim:has(img), .dgoz-resim:has(img), .pgoz-resim:has(img) img, .dgoz-resim:has(img) img { height: 46px; } }
/* Stok Yonetimi: Arizali etiketi slot numarasinin ustune binmesin (kullanici 2026-11-08) */
.dgoz-ust:has(.rozet) { justify-content: space-between; }
.dgoz-ust .rozet { position: static; flex: none; font-size: 11.5px; padding: 2px 8px; }
.dgoz-ust .dgoz-no { flex: none; }
.kart-bant .bas-dugmeler { margin-left: auto; }

/* Raf gorunumu kartlari (makine Genel sayfasi, 2026-11-08) */
.rafg { display: grid; gap: 16px; }
.rafg-sira h3 { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.rafg-izgara { display: grid; gap: 10px; }
.rg-s1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.rg-s2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg-s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rg-s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rg-s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rg-s6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rg-s7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rg-s8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.rg-s9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.rg-s10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.rg-s11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.rg-s12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (max-width: 900px) { .rafg-izgara { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; } }
.rgoz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 10px 13px; border: 1px solid var(--cizgi);
  border-radius: 14px; background: var(--kart); box-shadow: var(--ic-isik); overflow: hidden; }
.rgoz::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ton, var(--cizgi)); }
.rgoz.ton-iyi { --ton: var(--iyi); } .rgoz.ton-uyari { --ton: var(--uyari); } .rgoz.ton-kritik { --ton: var(--kritik); }
.rgoz.rgoz-ariza { box-shadow: inset 3px 0 0 var(--kritik), var(--ic-isik); }
.rgoz-ust { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 18px; }
.rgoz-ust .etiket { font: 600 12px var(--mono); color: var(--soluk); }
.rgoz-durum { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--notr-z); color: var(--yazi-2); white-space: nowrap; }
.rgoz-durum.rd-kritik { background: var(--kritik-z); color: var(--kritik); } .rgoz-durum.rd-uyari { background: var(--uyari-z); color: var(--uyari); }
.rgoz-resim { width: 100%; height: 48px; display: grid; place-items: center; }
.rgoz-resim img { width: 100%; height: 48px; object-fit: contain; display: block; }
.rgoz-resim span { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font: 700 14px var(--yazi-tipi); color: var(--vurgu); background: var(--vurgu-z); }
.rgoz-ad { width: 100%; text-align: center; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgoz-alt { width: 100%; display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--yazi-2); }
.rgoz-stok { color: var(--ton, var(--yazi-2)); font-weight: 600; }
.rgoz-cubuk { width: 100%; height: 4px; border-radius: 4px; background: var(--cizgi-g); overflow: hidden; }
.rgoz-cubuk i { display: block; height: 100%; background: var(--ton, var(--soluk)); border-radius: inherit; }
.rgoz.rgoz-bos { flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 10px; background: transparent; border-style: dashed; box-shadow: none; opacity: .7; }
.rgoz.rgoz-bos::after { display: none; }
.rgoz-bos .etiket { font: 600 12px var(--mono); color: var(--soluk); }
.rgoz-bosyazi { font-size: 12px; color: var(--soluk); }
.rafg-bos { margin: 0; padding: 8px 12px; border: 1px dashed var(--cizgi); border-radius: 12px; font-size: 13px; color: var(--soluk); }
.rafg-bos b { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.rgoz-cubuk i.dw-0 { width: 0%; } .rgoz-cubuk i.dw-5 { width: 5%; } .rgoz-cubuk i.dw-10 { width: 10%; } .rgoz-cubuk i.dw-15 { width: 15%; } .rgoz-cubuk i.dw-20 { width: 20%; } .rgoz-cubuk i.dw-25 { width: 25%; } .rgoz-cubuk i.dw-30 { width: 30%; } .rgoz-cubuk i.dw-35 { width: 35%; } .rgoz-cubuk i.dw-40 { width: 40%; } .rgoz-cubuk i.dw-45 { width: 45%; } .rgoz-cubuk i.dw-50 { width: 50%; } .rgoz-cubuk i.dw-55 { width: 55%; } .rgoz-cubuk i.dw-60 { width: 60%; } .rgoz-cubuk i.dw-65 { width: 65%; } .rgoz-cubuk i.dw-70 { width: 70%; } .rgoz-cubuk i.dw-75 { width: 75%; } .rgoz-cubuk i.dw-80 { width: 80%; } .rgoz-cubuk i.dw-85 { width: 85%; } .rgoz-cubuk i.dw-90 { width: 90%; } .rgoz-cubuk i.dw-95 { width: 95%; } .rgoz-cubuk i.dw-100 { width: 100%; }
.rgoz.rgoz-bos { flex-direction: column; justify-content: center; gap: 4px; border: 1px dashed var(--cizgi); }

/* Bildirimler: zil ve liste (2026-11-08) */
.zil { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--yazi-2); border: 1px solid var(--cizgi); background: var(--girdi); }
.zil:hover { color: var(--yazi); }
.zil .ik { width: 17px; height: 17px; }
.zil-sayi { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--kritik); color: #fff;
  font: 700 10.5px/18px var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--zemin, #070c18); }
.zil-sayi:empty { display: none; }
.zil.zil-var { color: var(--yazi); border-color: color-mix(in srgb, var(--kritik) 45%, var(--cizgi)); }
.bildirim-suz { margin-bottom: 14px; }
.bildirim-liste { list-style: none; margin: 0; padding: 0; }
.bil { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--cizgi-g); }
.bil:last-child { border-bottom: 0; }
.bil-nokta { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--soluk); }
.bil-kritik .bil-nokta { background: var(--kritik); } .bil-uyari .bil-nokta { background: var(--uyari); } .bil-notr .bil-nokta { background: var(--iyi); } .bil-iyi .bil-nokta { background: var(--iyi); }
.bil-govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bil-govde small { color: var(--soluk); font-size: 12.5px; }
.bil time { color: var(--soluk); font-size: 12px; white-space: nowrap; }
.bil-yeni { background: color-mix(in srgb, var(--vurgu) 6%, transparent); border-radius: 10px; }
.bil-yeni-etiket { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--vurgu-z); color: var(--vurgu); vertical-align: middle; }
.bil-tercih-not { margin: 0 0 4px; }
.form label.kutucuk { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; }
.form label.kutucuk small { grid-column: 2; font-size: 12px; }
.bil-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bas-proje { color: var(--yazi-2); }
.bas-proje-degis { border: 0; background: none; padding: 0 2px; color: var(--vurgu); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Raf Yonetimi urun listesi: dikey urun resmi kutuya sigsin, alttaki satira tasmasin (kullanici 2026-11-08) */
.plan-urun-resim { overflow: hidden; }
.plan-urun-resim:has(img) { background: transparent; }
.plan-urun-resim img { width: 34px; height: 34px; max-width: 34px; max-height: 34px; object-fit: contain; display: block; }
/* Urun resimleri benzer buyuklukte (kullanici 2026-11-08: yatay urun karti dolduruyor, dikey kutu icecek kucuk kaliyordu):
   resim en cok ~kare bir alana sigar; yatay olan eninden, dikey olan boyundan sinirlanir */
.rgoz-resim, .pgoz-resim:has(img), .dgoz-resim:has(img) { height: 62px; }
.rgoz-resim img, .pgoz-resim:has(img) img, .dgoz-resim:has(img) img { width: auto !important; height: auto !important; max-width: min(96px, 100%); max-height: 62px; object-fit: contain; margin: 0 auto; }
@media (max-width: 760px) { .rgoz-resim, .pgoz-resim:has(img), .dgoz-resim:has(img) { height: 50px; }
  .rgoz-resim img, .pgoz-resim:has(img) img, .dgoz-resim:has(img) img { max-width: min(78px, 100%); max-height: 50px; } }
/* Raf ve Stok kartlarinda alt kenar cizgisi stok cubuguyla ayni bilgiyi veriyordu (kullanici 2026-11-08: alt alta iki yesil cizgi); yalniz cubuk kalir */
.rgoz::after, .dgoz::after { display: none; }
.kart.ozet-uyari { border-color: color-mix(in srgb, var(--uyari) 45%, var(--cizgi)); }

/* Dolum (toplama) listesi (2026-11-08) */
.dolum-suz { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.dolum-suz label:not(.kutucuk) { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--yazi-2); min-width: 220px; }
.dolum-kutular { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.toplama-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px 18px; }
.toplama-liste li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cizgi-g); }
.tl-resim { width: 44px; height: 44px; display: grid; place-items: center; font: 700 12px var(--yazi-tipi); color: var(--vurgu); }
.tl-resim img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.tl-ad { display: flex; flex-direction: column; min-width: 0; }
.tl-ad b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-adet { font-size: 20px; }
.dolum-makineler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 14px; }
.dolum-makine { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dm-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dm-bas > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.dm-bas small { font-size: 12px; }
.dm-sag { display: flex; align-items: center; gap: 10px; }
.dm-doluluk { font-weight: 700; }
.dm-toplam { font-size: 18px; font-weight: 700; }
.dm-tablo { width: 100%; font-size: 13px; }
.dm-tablo th { font-size: 11px; }
.dm-ariza td { color: var(--kritik); }
.dolum-makine > .dugme { align-self: flex-start; }
@media print {
  .yan, .ust, .yazdirma-yok, .bas-dugmeler, .zil, .arka-isik { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .kart, .kutu { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; }
  .dolum-makineler { grid-template-columns: 1fr 1fr; }
  a { color: #000 !important; text-decoration: none; }
}
/* Makine Genel sayfasi raf gorunumu kompakt (kullanici 2026-11-08: genel bilgi, goze cok buyuk geliyordu) */
.rafg { gap: 10px; }
.rafg-sira h3 { margin: 0 0 5px; font-size: 11px; }
.rafg-izgara { gap: 6px; }
.rgoz { padding: 6px 7px 8px; gap: 3px; border-radius: 10px; }
.rgoz-ust { min-height: 14px; }
.rgoz-ust .etiket { font-size: 10.5px; }
.rgoz-durum { font-size: 10px; padding: 0 6px; }
.rgoz-resim { height: 36px; }
.rgoz-resim img { max-width: min(60px, 100%) !important; max-height: 36px !important; }
.rgoz-resim span { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }
.rgoz-ad { font-size: 11.5px; }
.rgoz-alt { font-size: 10.5px; }
.rgoz-cubuk { height: 3px; }
.rgoz.rgoz-bos { padding: 5px 7px; }
.rgoz-bosyazi, .rgoz-bos .etiket { font-size: 10.5px; }
.rafg-bos { padding: 5px 10px; font-size: 12px; }
/* Raf gorunumu penceresi de kucuk (kullanici 2026-11-08): slotlar en cok 128px, sola dayali */
@media (min-width: 901px) {
.rafg-izgara.rg-s1 { grid-template-columns: repeat(1, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s2 { grid-template-columns: repeat(2, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s3 { grid-template-columns: repeat(3, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s4 { grid-template-columns: repeat(4, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s5 { grid-template-columns: repeat(5, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s6 { grid-template-columns: repeat(6, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s7 { grid-template-columns: repeat(7, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s8 { grid-template-columns: repeat(8, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s9 { grid-template-columns: repeat(9, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s10 { grid-template-columns: repeat(10, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s11 { grid-template-columns: repeat(11, minmax(0, 128px)); justify-content: start; } .rafg-izgara.rg-s12 { grid-template-columns: repeat(12, minmax(0, 128px)); justify-content: start; }
}
/* Makine sayfasi: raf solda, sogutma ve uzaktan urun ver sagda */
.makine-iki { display: grid; grid-template-columns: auto minmax(320px, 1fr); gap: 16px; align-items: start; }
.makine-iki > div > .kart, .makine-sag > div > .kart { margin-top: 0; }
.makine-sag { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.makine-sag .kart { margin: 0; }
.makine-sag .servis-form select, .makine-sag .servis-form input { min-width: 0; width: 100%; }
.makine-sag .servis-form label { flex: 1 1 100%; }
@media (max-width: 1250px) { .makine-iki { grid-template-columns: 1fr; } }
/* Uzaktan verilen urunler: sag sutunda formun altinda, sikistirilmis liste */
.uzak-liste { list-style: none; margin: 0; padding: 0; }
.uzak-liste li { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; border-bottom: 1px solid var(--cizgi-g); }
.uzak-liste li:last-child { border-bottom: 0; }
.ul-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.ul-ust b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uzak-liste small { font-size: 12px; }
/* Uzaktan verilen urunler listesi uzasa da sag sutun raf gorunumunden asagi sarkmasin: liste kendi icinde kayar (kullanici 2026-11-08) */
.uzak-liste { max-height: 290px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
/* Sag sutun raf gorunumuyle ayni yukseklikte biter: uzaktan verilen urunler kalan boslugu doldurur, liste kendi icinde kayar (kullanici 2026-11-08) */
@media (min-width: 1251px) {
  .makine-iki { align-items: stretch; }
  .makine-sol > .kart { height: 100%; box-sizing: border-box; }
  .makine-sag #makine-uzak { position: relative; flex: 1 1 auto; min-height: 220px; }
  .makine-sag #makine-uzak > .uzak-kart { position: absolute; inset: 0; display: flex; flex-direction: column; margin: 0; }
  .makine-sag #makine-uzak > .uzak-kart .uzak-liste { flex: 1 1 auto; min-height: 0; max-height: none; }
}

/* Kurulum: yapilacaklar ustte, bitenler altta iki sutun kucuk kutucuk (2026-11-08) */
.adim-grup { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--yazi-2); display: flex; align-items: center; gap: 8px; }
.adim-grup small { font: 500 11.5px var(--mono); color: var(--soluk); }
.kurulum-bas + .adim-grup { margin-top: 4px; }
.adim-sag { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.adim.hata { background: color-mix(in srgb, var(--kritik) 7%, transparent); }
.adim.hata .adim-no { color: var(--kritik); border-color: var(--kritik); }
.adim-biten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.adim-biten .adim { padding: 8px 12px; gap: 10px; flex-wrap: nowrap; }
.adim-biten .adim-no { width: 22px; height: 22px; background: color-mix(in srgb, var(--iyi) 14%, transparent); }
.adim-biten .adim-yazi b { font-size: 13px; }
.adim-biten .adim-yazi small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.kurulum-bitti { display: flex; align-items: center; gap: 8px; }
.kurulum-bitti .ik { width: 16px; height: 16px; }
/* Biten adim kutucugu tiklanir, ilgili sayfayi acar (2026-11-08) */
.adim-git { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: -8px -12px; padding: 8px 12px; border-radius: inherit; color: inherit; text-decoration: none; }
.adim-biten .adim { transition: border-color .15s, background .15s; }
.adim-biten .adim:hover { border-color: color-mix(in srgb, var(--vurgu) 55%, var(--cizgi)); background: var(--vurgu-z); }
.adim-git:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.adim-duzenle { flex: none; font-size: 12px; font-weight: 600; color: var(--vurgu); opacity: 0; transition: opacity .15s; }
.adim-git:hover .adim-duzenle, .adim-git:focus-visible .adim-duzenle { opacity: 1; }
@media (hover: none) { .adim-duzenle { opacity: .8; } }
/* Stok Yonetimi: genis ekranda kartlar raftaki slot sayisina bolunur, sagda bosluk kalmaz (Raf Yonetimi ile ayni; 2026-11-08) */
@media (min-width: 1100px) { .dolum-gozler.s-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .dolum-gozler.s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dolum-gozler.s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dolum-gozler.s-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dolum-gozler.s-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dolum-gozler.s-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dolum-gozler.s-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .dolum-gozler.s-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .dolum-gozler.s-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .dolum-gozler.s-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .dolum-gozler.s-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .dolum-gozler .dgoz { padding-left: 8px; padding-right: 8px; } .dolum-gozler .dgoz-cubuk, .dolum-gozler .dgoz-doldur { max-width: 220px; } }
/* Stok Yonetimi iki sutun: solda kucuk kartlar, sagda stok ozeti (2026-11-08). Dar ekranda ozet ustte, eksik listesi yan yana. */
.dolum-iki { display: flex; flex-direction: column; gap: 16px; }
.dolum-iki > .dolum-ozet-kart { margin: 0; }
.so-resim:empty { display: none; }
.dolum-iki > .dolum-form { margin: 0; min-width: 0; }
.so-doluluk { display: flex; align-items: baseline; gap: 10px; }
.so-doluluk b { font-size: 26px; font-weight: 600; color: var(--ton); }
.so-doluluk span { color: var(--yazi-2); font-size: 13px; }
.so-doluluk.ton-iyi, .so-cubuk.ton-iyi { --ton: var(--iyi); } .so-doluluk.ton-uyari, .so-cubuk.ton-uyari { --ton: var(--uyari); } .so-doluluk.ton-kritik, .so-cubuk.ton-kritik { --ton: var(--kritik); }
.so-cubuk { margin: 8px 0 4px; }
.so-baslik { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--yazi-2); display: flex; align-items: baseline; gap: 8px; }
.so-baslik small { font: 500 11.5px var(--mono); color: var(--soluk); }
.so-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; }
.so-liste li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--cizgi-g); min-width: 0; }
.so-resim { width: 34px; height: 26px; flex: none; display: grid; place-items: center; }
.so-resim img { max-width: 34px; max-height: 26px; object-fit: contain; }
.so-ad { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-liste b { flex: none; font: 600 14px var(--mono); color: var(--uyari); }
.so-tamam { display: flex; align-items: center; gap: 8px; color: var(--iyi); font-weight: 600; margin: 14px 0 0; }
.so-tamam .ik { width: 16px; height: 16px; }
@media (min-width: 1500px) {
  .dolum-iki { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .dolum-iki > .dolum-ozet-kart { order: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
  .so-liste { grid-template-columns: 1fr; }
  /* kucuk kartlar */
  .dolum-iki .dolum-gozler { gap: 10px; }
  .dolum-iki .dgoz { gap: 6px; padding: 10px 8px 12px; border-radius: 14px; }
  .dolum-iki .dgoz-ad { font-size: 12.5px; }
  .dolum-iki label.dgoz-sayi { font-size: 16px; }
  .dolum-iki .dgoz-btn { width: 30px; height: 30px; font-size: 17px; }
  .dolum-iki .dgoz-dugmeler { gap: 10px; margin-top: 2px; }
  .dolum-iki .dgoz-doldur { padding: 6px 0; font-size: 12.5px; border-radius: 10px; }
  .dolum-iki .dgoz-resim:has(img), .dolum-iki .dgoz-resim:has(img) img { height: 46px; }
  .dolum-iki .dgoz-resim:has(img) img { height: auto; max-height: 46px; max-width: 100%; }   /* yatay paketler (Probis, Canga) ince kalmasin */
}
/* Makineler listesi: Doldur dugmesi ve stok penceresi (2026-11-08) */
.mk-stok { position: relative; }
.mk-stok-dugme { margin-left: auto; }
.mk-stok-dugme .ik { width: 14px; height: 14px; }
.stok-pencere { width: min(1280px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--cizgi); border-radius: 20px;
  background: var(--yuzey, var(--kart)); color: var(--yazi); box-shadow: var(--golge); overflow: hidden; }
.stok-pencere[open] { display: flex; flex-direction: column; }
.stok-pencere::backdrop { background: rgba(3, 6, 14, .66); backdrop-filter: blur(3px); }
.sp-bas { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi-g); }
.sp-bas h3 { margin: 0; flex: 1; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bas .bas-simge { width: 32px; height: 32px; }
.stok-pencere iframe { flex: 1; width: 100%; border: 0; background: transparent; }
.pencere-ic { padding: 14px 16px 90px; }
@media (max-width: 760px) { .stok-pencere { width: 100vw; height: 100dvh; border-radius: 0; } .sp-bas [data-sp-sayfa] { display: none; } }
/* Motor testi iki sutun: solda dugmeler, sagda sonuc izgaralari (2026-11-08). Dar ekranda alt alta. */
.motor-iki { display: flex; flex-direction: column; gap: 16px; }
.motor-iki > .kart, .motor-sag > .kart, .motor-sag > .bilgi { margin: 0; }
.motor-sag { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.motor-sag table.raf.motor-tablo { width: 100%; }
@media (min-width: 1200px) {
  .motor-iki { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; }
  .motor-sol .motor-islem { grid-template-columns: 1fr; }
  .motor-sol { position: sticky; top: 16px; }
}
/* Makine Genel kutulari: kucuk ve yatay. Simge solda iki satir, ustte baslik, altta deger + aciklama ayni satirda (2026-11-08) */
.makine-kutular { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.makine-kutular .kutu { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; column-gap: 12px; padding: 12px 16px; border-radius: 16px; align-items: center; }
.makine-kutular .kutu > .kutu-simge { grid-row: 1 / 3; width: 38px; height: 38px; }
.makine-kutular .kutu > span { grid-column: 2 / 4; font-size: 10.5px; }
.makine-kutular .kutu > b { grid-column: 2; grid-row: 2; font-size: 21px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.makine-kutular .kutu > small { grid-column: 3; grid-row: 2; margin: 0; font-size: 12px; text-align: right; white-space: nowrap; color: var(--yazi-2); }
.makine-kutular .kutu > small:empty { display: none; }
@media (max-width: 760px) { .makine-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); } .makine-kutular .kutu { padding: 10px 12px; column-gap: 8px; }
  .makine-kutular .kutu > .kutu-simge { width: 30px; height: 30px; } .makine-kutular .kutu > b { font-size: 17px; }
  .makine-kutular .kutu > small { grid-column: 2 / 4; grid-row: 3; text-align: left; } }
/* Sicaklik kutulari Genel ile ayni yatay duzende (makine-kutular); Degistir baglantisi sari (2026-11-08) */
.kutu-git { color: #ffc652; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.kutu-git:hover { color: #f59e16; }
:root[data-theme="light"] .kutu-git { color: #b86e00; }
/* Deger hic kesilmez; uzun aciklama (ornek "05:49 · son 24 saat") gerekirse saga yasli iki satira iner */
.makine-kutular .kutu { grid-template-columns: auto auto minmax(0, 1fr); }
.makine-kutular .kutu > b { overflow: visible; text-overflow: clip; }
.makine-kutular .kutu > small { white-space: normal; min-width: 0; line-height: 1.3; }

/* GSM sayfasi: solda grafik + kopmalar, sagda mudahale + teknik ayrintilar (2026-11-08) */
.gsm-iki { display: flex; flex-direction: column; gap: 16px; }
.gsm-sol, .gsm-sag { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gsm-iki .kart, .gsm-iki .iki { margin: 0; }
@media (min-width: 1200px) { .gsm-iki { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.gsm-islem { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi-g); }
.gsm-islem:last-child { border-bottom: 0; padding-bottom: 0; }
.gsm-islem > div { flex: 1; min-width: 0; }
.gsm-islem b { display: block; font-size: 14px; }
.gsm-islem small { display: block; color: var(--yazi-2); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.gsm-islem .dugme { flex: none; }
.gsm-liste { margin: 0; display: grid; grid-template-columns: 1fr; }
.gsm-liste > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--cizgi-g); }
.gsm-liste dt { color: var(--yazi-2); font-size: 13px; }
.gsm-liste dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.gsm-liste dt { flex: none; }
.gsm-liste dd.sayi { white-space: nowrap; font-size: 12.5px; }

/* Tesis sayfasi GSM duzenini kullanir; uzun kart kimligi tasmasin */
.gsm-liste dd.sayi[title] { overflow: hidden; text-overflow: ellipsis; }
.gsm-liste > div.kotu dt, .gsm-liste > div.kotu dd { color: var(--kritik); }
.fw-iyi { color: var(--iyi); font-weight: 600; } .fw-uyari { color: var(--uyari); font-weight: 700; }

/* Makine Ayarlar: solda bilgi + telefon, sagda tip ve sogutma, altta kaydet cubugu, en altta iptal (2026-11-08) */
.ayar-form { margin: 0 0 16px; }
.ayar-izgara { display: flex; flex-direction: column; gap: 16px; }
.ayar-sol, .ayar-sag { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ayar-izgara .kart { margin: 0; }
@media (min-width: 1100px) { .ayar-sol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }   /* iki kart esit (kullanici 2026-11-08) */
.ayar-alanlar.ayar-iki { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ayar-alanlar { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ayar-alanlar label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--yazi-2); font-weight: 600; }
.ayar-alanlar input, .ayar-alanlar select { width: 100%; }
.ayar-dort { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 12px; }
.ayar-notlar { margin: 12px 0 0; padding-left: 18px; color: var(--yazi-2); font-size: 12.5px; line-height: 1.5; }
.ayar-durum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--cizgi-g); font-size: 12.5px; color: var(--yazi-2); }
.ayar-durum:empty { display: none; }
.ayar-kaydet { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; padding: 14px 18px; }
.ayar-kimlik { margin-left: auto; }
.ayar-tehlike { display: flex; align-items: center; gap: 20px; border-left: 3px solid var(--kritik); }
.ayar-tehlike > div { flex: 1; min-width: 0; }
.ayar-tehlike h2 { margin: 0 0 4px; font-size: 15px; }
.ayar-tehlike .not { margin: 0; }
@media (max-width: 760px) { .ayar-tehlike { flex-direction: column; align-items: flex-start; } .ayar-kimlik { margin-left: 0; } }
.ayar-tehlike-form { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.ayar-tehlike-form .kutucuk { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 760px) { .ayar-tehlike-form { align-items: flex-start; } }

/* Ayarlar: alanlar icerigi kadar genis, sagda musteri ekrani onizlemesi ve sogutmanin anlik durumu (2026-11-08) */
.ayar-govde { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 32px; }
.ayar-govde > div:first-child, .ayar-govde > .ayar-dar:first-child { flex: 1 1 520px; min-width: 0; }
.ayar-alanlar.ayar-dar { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-bottom: 12px; }
.ayar-dar label { flex: none; }
.ayar-dar label small { font-weight: 500; color: var(--soluk); margin-left: 4px; }
.ayar-dar .g-ad { width: min(300px, 100%); }
.ayar-dar .g-tel { width: min(210px, 100%); }
.ayar-dar .g-tip { width: min(220px, 100%); }
.ayar-dar .g-sayi { width: 150px; }
.birimli { display: flex; align-items: center; gap: 8px; }
.birimli input { width: 90px !important; text-align: right; }
.birimli i { font-style: normal; color: var(--yazi-2); font-size: 13px; }
.lcd-onizleme { margin: 0; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.lcd-onizleme figcaption { font-size: 12.5px; font-weight: 600; color: var(--yazi-2); }
.lcd-onizleme .lcd { display: flex; flex-direction: column; width: 230px; padding: 10px 14px; border-radius: 8px; background: #1d3b8f; color: #e8f0ff;
  font: 500 13px/1.45 var(--mono); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), inset 0 0 18px rgba(0, 0, 0, .35); }
.lcd-onizleme .lcd span { min-height: 1.45em; white-space: nowrap; overflow: hidden; }
.lcd-onizleme small { color: var(--soluk); font-size: 11.5px; max-width: 230px; }
.ayar-simdi { flex: 0 0 260px; padding: 14px 16px; border: 1px solid var(--cizgi-g); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.ayar-simdi h3 { margin: 0 0 8px; font-size: 12px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.as-isi { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.as-isi b { font-size: 26px; font-weight: 600; color: var(--uyari); }
.as-isi span { color: var(--yazi-2); font-size: 12.5px; }
.ayar-simdi dl { margin: 0; }
.ayar-simdi dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--cizgi-g); font-size: 13px; }
.ayar-simdi dt { color: var(--yazi-2); }
.ayar-simdi dd { margin: 0; font-weight: 500; }
.as-not { margin: 8px 0 0; font-size: 12px; color: var(--uyari); }
@media (max-width: 760px) { .ayar-simdi, .lcd-onizleme { flex: 1 1 100%; } }

/* Genis ekranda iki kart yan yana: alanlar iki sutun, onizleme / Su an hemen yaninda; ortada bosluk kalmaz (2026-11-08) */
@media (min-width: 1400px) {
  .ayar-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .ayar-izgara > .kart { display: flex; flex-direction: column; }
  .ayar-izgara > .kart > .ayar-durum { margin-top: auto; }
  .ayar-govde { flex-wrap: nowrap; gap: 24px; }
  .ayar-govde > div:first-child, .ayar-govde > .ayar-dar:first-child { flex: 1 1 auto; }
  .ayar-alanlar.ayar-dar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .ayar-dar label, .ayar-dar .g-ad, .ayar-dar .g-tel, .ayar-dar .g-tip, .ayar-dar .g-sayi { width: auto; }
  .ayar-simdi { flex: 0 0 240px; }
}

/* Uyarilar: gruplanan satir adedi, makine suzgeci, islem dugmeleri (2026-11-08) */
.uyari-adet { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 8px; font: 600 11.5px var(--mono); color: var(--yazi); background: var(--cizgi-g); border: 1px solid var(--cizgi); }
.uyari-ilk { display: block; font-size: 11.5px; }
.uyari-islem { white-space: nowrap; }
.uyari-islem form { display: inline-block; margin-left: 6px; }
.uyari-ayr { min-width: 260px; }
.uyari-makine-suz { margin-left: auto; }
.uyari-makine-suz select { min-width: 200px; }
.uyari-makine-suz + .hap { margin-left: 0; }
.uyari-yolunda { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--iyi) 40%, transparent); background: color-mix(in srgb, var(--iyi) 9%, transparent); }
.uyari-yolunda > .ik { width: 26px; height: 26px; color: var(--iyi); flex: none; }
.uyari-yolunda b { display: block; color: var(--iyi); font-size: 15px; }
.uyari-yolunda small { display: block; color: var(--yazi-2); font-size: 13px; margin-top: 2px; }
/* Filtre alanlari (Satislar, Satis Analizi): hepsi ayni yukseklikte, ustten hizali; tarih alani select'ten yuksek kaliyordu (2026-11-09) */
.filtre4 { align-items: start; }
.filtre4 > label { display: flex; flex-direction: column; gap: 6px; }
.filtre4 input, .filtre4 select { height: 42px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.filtre4 .hap-blok { height: 42px; box-sizing: border-box; }
.filtre4 .hap-blok a { display: flex; align-items: center; justify-content: center; }
.filtre4 .f-kisayol, .filtre4 .f-dugme { align-self: end; }

/* Guncelleme: solda makine tablosu, sagda surum ve gonder (2026-11-09) */
.guncel-iki { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.guncel-iki .kart { margin: 0; }
@media (min-width: 1200px) { .guncel-iki { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .guncel-gonder { position: sticky; top: 16px; } }
.guncel-gonder label:not(.kutucuk) { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--yazi-2); margin-bottom: 8px; }
.guncel-gonder select { width: 100%; }
.guncel-gonder .kutucuk { margin: 10px 0 12px; font-size: 13px; }
.guncel-tablo .gt-sec { width: 36px; }
.guncel-tablo .gt-sec .kutucuk { margin: 0; }
.gt-alt { display: block; font-size: 12px; }
.filtre4 .f-dugme .dugme { height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; }   /* Goster/Filtrele + Sifirla kisayol cubuguyla ayni boyda */

/* Sistem Teshis: islem kaydi suzgeci ve tur renkleri (2026-11-09) */
.tesis-suz { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tesis-suz select { min-width: 180px; }
.tk-grup { display: inline-block; padding: 2px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--cizgi); white-space: nowrap; }
.tk-makine { color: var(--vurgu); border-color: color-mix(in srgb, var(--vurgu) 40%, transparent); }
.tk-hesap { color: var(--yazi-2); }
.tk-urun-ve-fiyat { color: var(--iyi); border-color: color-mix(in srgb, var(--iyi) 40%, transparent); }
.tk-proje { color: var(--uyari); border-color: color-mix(in srgb, var(--uyari) 40%, transparent); }
:root body .kart .muh-serit { margin-top: 32px; }   /* kisayol satirindan daha belirgin ayrilsin (kullanici 2026-11-09) */
.fiyat-hepsi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fiyat-hepsi > .ik { width: 18px; height: 18px; flex: none; }
.fiyat-hepsi > span { flex: 1 1 320px; }
/* Makine adresi (goc 028, 2026-11-09): Ayarlar'da genis alan, harita baglantisi; Dolum Listesi'nde makine altinda */
.ayar-dar .g-adres { width: min(620px, 100%); }
@media (min-width: 1400px) { .ayar-dar .g-adres { grid-column: 1 / -1; width: auto; } }
.harita-link, .dl-adres a, .bas-harita { color: var(--vurgu); font-weight: 600; text-decoration: none; }
.harita-link { font-size: 12.5px; margin-top: 2px; }
.harita-link:hover, .dl-adres a:hover, .bas-harita:hover { text-decoration: underline; }
.dl-adres { display: block; font-size: 12px; color: var(--yazi-2); margin-top: 2px; }

/* Hesabim > Telegram (goc 029) */
.tg-bagli { display: flex; align-items: center; gap: 10px; color: var(--iyi); }
.tg-bagli .ik { width: 18px; height: 18px; flex: none; }
.tg-bagli span { color: var(--yazi); }
.tg-adim { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }

/* Hesabim iki sutun (2026-11-09) */
.hesap-izgara { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.hesap-sutun { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hesap-izgara .kart.dar { max-width: none; margin: 0; }
@media (min-width: 1100px) { .hesap-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .hesap-izgara { grid-template-columns: repeat(2, minmax(0, 720px)); } }
.tg-bagla { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.tg-qr-kutu { margin: 0; flex: none; text-align: center; }
.tg-qr-kutu .tg-qr { width: 180px; height: 180px; display: block; border-radius: 12px; background: #fff; padding: 8px; box-sizing: border-box; }
.tg-qr-kutu figcaption { font-size: 12px; color: var(--yazi-2); margin-top: 6px; }

/* Hesabim: profil seridi, QR + adimlar yan yana, bildirim turleri iki sutun kutucuk (2026-11-09) */
.hesap-profil { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 20px; }
.hp-avatar { width: 52px; height: 52px; font-size: 18px; flex: none; }
.hp-kim { display: flex; flex-direction: column; min-width: 180px; }
.hp-kim b { font-size: 17px; }
.hp-kim small { color: var(--yazi-2); font-size: 12.5px; }
.hp-durum { display: flex; gap: 10px 28px; flex-wrap: wrap; margin: 0 0 0 auto; }
.hp-durum > div { display: flex; flex-direction: column; min-width: 0; }
.hp-durum dt { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.hp-durum dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; }
.hp-iyi { color: var(--iyi); } .hp-uyari { color: var(--uyari); }
.hp-durum a { color: var(--vurgu); }
.alan-not { display: block; font-size: 12px; font-weight: 400; margin-top: 2px; }
.tg-bagla { flex-wrap: nowrap; }
.tg-bagla > div { flex: 1; min-width: 0; }
@media (max-width: 760px) { .tg-bagla { flex-wrap: wrap; } .hp-durum { margin-left: 0; } }
.bil-kutular { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.kutucuk.bil-kutu { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--cizgi-g); border-radius: 12px; margin: 0; cursor: pointer; }
.kutucuk.bil-kutu:has(input:checked) { border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); background: var(--vurgu-z); }
.bil-kutu input { margin-top: 2px; flex: none; }
.bil-kutu span { display: flex; flex-direction: column; min-width: 0; }
.bil-kutu b { font-size: 13.5px; }
.bil-kutu small { font-size: 12px; line-height: 1.35; }
/* Makineler: dort kutu tam genislige yayilmasin, her biri en fazla 340 px (kullanici 2026-11-09) */
.makine-kutular.dar-kutular { grid-template-columns: repeat(auto-fill, minmax(220px, 340px)); }
/* Profil seridi: durum bilgileri saga yaslanmasin, adin yaninda ince cizgiyle ayrilsin (kullanici 2026-11-09) */
.hp-durum { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--cizgi); gap: 10px 36px; }
@media (max-width: 760px) { .hp-durum { margin-left: 0; padding-left: 0; border-left: 0; } }
.hesap-orta { max-width: 1240px; margin: 0; }   /* diger sayfalar gibi sola yasli; genislik ayni (kullanici 2026-11-09) */
.hesap-orta .hesap-izgara { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .hesap-orta .hesap-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hesabim tam genislik: kartlarin sag kenari ustteki tarih / zil / bas harflerle ayni hizada; durum bilgileri seridin sag ucunda (kullanici 2026-11-09) */
.hesap-orta { max-width: none; }
@media (min-width: 1700px) { .hesap-orta .hesap-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hesap-orta .hp-durum { margin-left: auto; padding-left: 0; border-left: 0; }
/* Hesabim: once sola yasli en fazla 1240 px duzen (kullanici 2026-11-09 tam genisligi begenmedi); profil seridinin sag yarisi alttaki
   sag sutunla (Telegram karti) ayni yerden baslar: kart ic boslugu 24 px, sutun arasi 16 px -> serit sutun arasi 16 + 2x24 = 64 px */
.hesap-orta { max-width: 1240px; }
.hp-sol { display: flex; align-items: center; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
  .hesap-profil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; padding: 16px 24px; }
  .hesap-orta .hp-durum { margin: 0; padding: 0; border: 0; justify-content: flex-start; }
}
@media (min-width: 1100px) { .hesap-orta .hp-durum { justify-content: flex-end; } }   /* sag yarida, sag uca yasli: Telegram kartinin sag kenariyla biter (kullanici 2026-11-09) */
/* Hesabim sol sutun: sifre ve ad soyad / e-posta alanlari icerigi kadar (en fazla 400 px), kart boyunca uzanmasin (kullanici 2026-11-09) */
.hesap-orta .hesap-sutun:first-child .form label { max-width: 400px; }
.hesap-orta .hesap-sutun:first-child .form input { width: 100%; }
/* Sol sutun kartlari alan genisligi kadar: 400 px alan + 2x24 ic bosluk + kenar = 450 px; kart alanin bittigi yerde biter (kullanici 2026-11-09) */
@media (min-width: 1100px) { .hesap-orta .hesap-izgara { grid-template-columns: 450px minmax(0, 1fr); } }

/* Dolum Listesi yeni duzen (2026-11-09): suzgec satiri, kucuk kutular, solda makineler, sagda depodan alinacaklar */
.dolum-suz { margin: 0 0 14px; align-items: center; }
.dolum-suz label:not(.kutucuk) { flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.dolum-suz select { min-width: 220px; }
.dolum-iki-sutun { display: flex; flex-direction: column; gap: 16px; }
.dolum-sol { min-width: 0; }
.dolum-sol .bolum-baslik { margin-top: 0; }
.dolum-toplama { margin: 0; }
@media (min-width: 1200px) {
  .dolum-iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .dolum-toplama { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
  .dolum-toplama .toplama-liste { grid-template-columns: 1fr; }
}
.dolum-makineler { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.toplama-liste li { padding: 8px 2px; }
.tl-adet { font-size: 20px; color: var(--uyari); }
/* Dolum Listesi: sagdaki kart soldaki ilk makine kartiyla ayni hizada baslasin (baslik 24 px + 10 px bosluk) (kullanici 2026-11-09) */
.dolum-sol .bolum-baslik { height: 24px; margin: 0 0 10px; align-items: center; }
@media (min-width: 1200px) { .dolum-toplama { margin-top: 34px; } }
/* Dolum Listesi B duzeni (kullanici 2026-11-09): once depodan alinacaklar (is sirasi), ustte tam genislik, urunler kutucuk; makineler altinda.
   Telefonda da ayni sira. Onceki sag sutun / yapiskan kurallarini ezer. */
.dolum-iki-sutun, .dolum-iki-sutun[class] { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.dolum-toplama { order: -1; position: static; max-height: none; overflow: visible; margin: 0 !important; }
.dolum-toplama .toplama-liste, .dolum-toplama .toplama-liste[class] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 12px; }
.dolum-toplama .toplama-liste li { border: 1px solid var(--cizgi-g); border-bottom: 1px solid var(--cizgi-g); border-radius: 12px; padding: 8px 12px; }
/* Depodan alinacak karti ustteki uc kutu kadar genis: 3 x 340 + 2 x 12 = 1044 px (kullanici 2026-11-09: sag taraf cok uzundu) */
.dolum-toplama { max-width: 1044px; }
/* Dolum Listesi diger sayfalar gibi (kullanici 2026-11-10): kutular ve kartlar tam genislik, suzgec kart bandinin saginda (Uyarilar gibi).
   Onceki 1044 px / 340 px daraltmalarini ve ayri suzgec satirini ezer. */
.dolum-toplama, .dolum-toplama[class] { max-width: none; margin: 0 0 16px !important; }
.dolum-toplama .kart-bant .dolum-suz { margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.dolum-toplama .kart-bant .dolum-suz select { min-width: 200px; }
.dolum-toplama .kart-bant .dolum-suz .kutucuk { margin: 0; font-size: 13px; }
.dolum-makineler-bolum .bolum-baslik { margin: 0 0 10px; }
@media (max-width: 760px) { .dolum-toplama .kart-bant .dolum-suz { margin-left: 0; width: 100%; } .dolum-toplama .kart-bant .dolum-suz select { flex: 1 1 100%; min-width: 0; } }
/* Dolum Listesi: makine karti tam genislik, slotlar sutunlu liste (kullanici 2026-11-10: tek makine solda, sag taraf bos).
   Sutunlar yukaridan asagi akar (1-1, 1-5 ... ilk sutunda), raf sirasiyla okunur. */
.dolum-makineler, .dolum-makineler[class] { display: flex; flex-direction: column; gap: 14px; }
.dolum-makine .dm-bas { align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi-g); }
.dm-sag { gap: 14px; }
.dm-liste { list-style: none; margin: 0; padding: 0; columns: 4 300px; column-gap: 36px; column-rule: 1px solid var(--cizgi-g); }
.dm-liste li { break-inside: avoid; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--cizgi-g); font-size: 13.5px; }
.dm-slot { color: var(--yazi-2); font-size: 12.5px; }
.dm-urun { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dm-urun > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-urun .rgoz-durum { flex: none; }
.dm-stok { font-size: 12.5px; }
.dm-eksik { text-align: right; }
.dm-liste li.dm-ariza .dm-urun, .dm-liste li.dm-ariza .dm-slot { color: var(--kritik); }
/* Depodan alinacak kutucuklari biraz daha genis: uzun adlar kesilmesin */
.dolum-toplama .toplama-liste, .dolum-toplama .toplama-liste[class] { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
@media (max-width: 760px) { .dolum-makine .dm-bas { flex-wrap: wrap; } }
@media print { .dm-liste { columns: 2; } }