:root {
    --murekkep: #252525;
    --marka: #252525;
    --markaUstu: #fff;
    --kagit: #faf8f5;
    --kum: #f5f1eb;
    --kumKoyu: #ebe4d9;
    --cizgi: #e5dfd6;
    --cizgiAcik: #efeae3;
    --soluk: #6f6b66;
    --markaAcik: color-mix(in oklab, var(--marka) 14%, white);
    --markaCizgi: color-mix(in oklab, var(--marka) 45%, white);
    --markaKoyu: color-mix(in oklab, var(--marka) 84%, black);
    --murekkepAcik: color-mix(in oklab, var(--murekkep) 82%, white);
    --yesil50: oklch(97.9% .021 166.113);
    --yesil200: oklch(90.5% .093 164.15);
    --yesil600: oklch(59.6% .145 163.225);
    --yesil800: oklch(43.2% .095 166.913);
    --amber50: oklch(98.7% .022 95.277);
    --amber200: oklch(92.4% .12 95.746);
    --amber500: oklch(76.9% .188 70.08);
    --amber800: oklch(47.3% .137 46.201);
    --kirmizi50: oklch(97.1% .013 17.38);
    --kirmizi200: oklch(88.5% .062 18.334);
    --kirmizi600: oklch(57.7% .245 27.325);
    --kirmizi700: oklch(50.5% .213 27.518);
    --kirmizi800: oklch(44.4% .177 26.899);
    --gri100: oklch(97% .001 106.424);
    --gri200: oklch(92.3% .003 48.717);
    --gri700: oklch(37.4% .01 67.558);
    --golgePop: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --gecis: .15s cubic-bezier(.4, 0, .2, 1);

    --zemin: var(--kagit);
    --kart: #fff;
    --metin: var(--murekkep);
    --vurgu: var(--marka);
    --vurguAcik: var(--markaAcik);
    --tehlike: var(--kirmizi600);
    --uyari: var(--amber800);
    --basari: var(--yesil600);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kagit); color: var(--murekkep); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 15px; line-height: 22.5px; font-weight: 600; }
p { margin: 0; }
input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }

.ikon { width: 16px; height: 16px; flex: none; }
.ikon.buyuk { width: 40px; height: 40px; color: var(--soluk); }
.soluk { color: var(--soluk); }
.kucuk { font-size: 12px; line-height: 16px; }
.kalin { font-weight: 600; }
.sag { text-align: right; }
.nowrap { white-space: nowrap; }
.num, .sag { font-variant-numeric: tabular-nums; }
.link { font-weight: 600; font-size: 14px; }
.link:hover { text-decoration: underline; }
.icerigeGec { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--murekkep); color: #fff; padding: 8px 12px; border-radius: 6px; }
.icerigeGec:focus { left: 8px; }

/* Kabuk */
.uygulama { min-height: 100vh; }
.ustBant { position: sticky; top: 0; z-index: 40; height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 24px 0 20px; background: var(--murekkep); }
.marka { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.markaIsaret { width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--murekkep); display: grid; place-items: center; }
.markaIsaret .ikon { width: 17px; height: 17px; }
.ustMenu { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ustMenuOge { position: relative; }
.ustMenuLink { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: rgb(255 255 255 / .7); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background var(--gecis), color var(--gecis); }
.ustMenuLink:hover, .ustMenuLink[aria-expanded=true] { color: #fff; background: rgb(255 255 255 / .08); }
.ustMenuLink.aktif { color: #fff; background: rgb(255 255 255 / .12); }
.ustMenuLink .ok { width: 14px; height: 14px; opacity: .7; }

.acilirKap { position: relative; }
.acilirMenu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 208px; padding: 4px 0; background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; box-shadow: var(--golgePop); color: var(--murekkep); }
.acilirMenu.sag { left: auto; right: 0; }
.acilirMenu.genis { display: flex; padding: 4px 6px; }
.acilirMenu.genis[hidden] { display: none !important; }
.acilirMenu.coklu { display: flex; }
.acilirMenu.coklu[hidden] { display: none !important; }
.menuSutun { min-width: 200px; }
.acilirMenu.genis .menuSutun { min-width: 180px; }
.menuBaslik { padding: 10px 14px 4px; font-size: 11px; line-height: 16.5px; font-weight: 600; color: var(--soluk); }
.menuAltLink { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; background: none; font-size: 14px; line-height: 20px; color: var(--murekkep); text-align: left; white-space: nowrap; }
.menuAltLink span:first-child, .menuAltLink .menuEtiket { flex: 1; }
.menuAltLink:hover { background: var(--kagit); }
.menuAltLink.guclu { font-weight: 600; }
.menuAltLink.aktif { font-weight: 600; background: var(--kum); }
.menuAltLink.yakinda { color: var(--soluk); }
.menuAltLink .ikon { color: var(--soluk); }
.menuSayi { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--kum); font-size: 11px; line-height: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.menuAyrac { height: 1px; margin: 4px 0; background: var(--cizgiAcik); }

.ana { min-width: 0; }
.baslikBant { position: sticky; top: 56px; z-index: 30; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--cizgi); }
.baslikArama { position: relative; flex: 1; max-width: 352px; }
.baslikArama > .ikon { position: absolute; left: 12px; top: 12px; color: var(--soluk); pointer-events: none; }
.baslikArama input { width: 100%; height: 40px; padding: 0 64px 0 36px; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; font-size: 14px; outline: none; }
.baslikArama input:focus { border-color: var(--murekkep); box-shadow: 0 0 0 3px var(--markaAcik); }
.kbd { position: absolute; right: 9px; top: 9px; display: flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--kagit); color: var(--soluk); font-size: 11px; font-weight: 600; font-family: var(--font); }
.baslikIslemler { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.canliTakip { gap: 8px; }
.canliNokta { width: 8px; height: 8px; border-radius: 999px; background: var(--yesil600); box-shadow: 0 0 0 3px color-mix(in oklab, var(--yesil600) 20%, transparent); }
.canliDurum { height: 20px; padding: 0 6px; border-radius: 4px; background: var(--yesil50); color: var(--yesil800); font-size: 11px; line-height: 20px; font-weight: 600; }
.canliTakip[aria-pressed=false] .canliNokta { background: var(--soluk); box-shadow: none; }
.canliTakip[aria-pressed=false] .canliDurum { background: var(--kum); color: var(--soluk); }
.kullaniciDugme { display: flex; align-items: center; gap: 8px; height: 44px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; }
.kullaniciDugme:hover { background: var(--kagit); }
.avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--murekkep); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.kullaniciYazi b { display: block; font-size: 14px; line-height: 16.8px; font-weight: 600; }
.kullaniciYazi small { display: block; font-size: 12px; line-height: 14.4px; color: var(--soluk); }
.kullaniciDugme .ok { width: 14px; height: 14px; color: var(--soluk); }
.mobilMenuDugme { display: none !important; }
.icerik { padding: 32px 32px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.gorunumPanel { width: 300px; padding: 0; }
.gorunumBolum { padding: 12px 14px; border-top: 1px solid var(--cizgiAcik); display: flex; flex-direction: column; gap: 8px; }
.gorunumBolum:first-child { border-top: 0; }
.gorunumBaslik { font-size: 11px; font-weight: 600; color: var(--soluk); }
.segmentli { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; background: var(--kum); border-radius: 6px; }
.segmentli button { height: 30px; border: 0; border-radius: 4px; background: transparent; font-size: 13px; font-weight: 600; color: var(--soluk); }
.segmentli button[aria-pressed=true] { background: #fff; color: var(--murekkep); box-shadow: 0 1px 2px #0000001a; }
.renkOrnekleri { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.renkOrnegi { height: 26px; padding: 0; border: 1px solid var(--cizgi); border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: none; }
.renkOrnegi[aria-pressed=true] { outline: 2px solid var(--murekkep); outline-offset: 1px; }
.renkSatiri { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.renkSatiri > span { flex: 1; }
.renkSatiri small { display: block; font-size: 11px; font-weight: 400; color: var(--soluk); }
.renkSatiri input[type=color] { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; }
.renkSatiri .hexGirdi { width: 84px !important; height: 30px !important; font-family: ui-monospace, Consolas, monospace; font-size: 12px !important; text-transform: uppercase; }
.kontrastUyari { font-size: 12px; color: var(--amber800); }

.yanMenu { display: none; }
.perde { display: none; }

/* Yan menü yerleşimi */
.yanYerlesim .ustBant { display: none; }
.yanYerlesim .yanMenu, .yanMenu.acik { display: flex; }
.yanMenu { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: 256px; flex-direction: column; background: var(--murekkep); color: #fff; overflow-y: auto; }
.yanYerlesim .ana { margin-left: 256px; }
.yanYerlesim .baslikBant { top: 0; }
.yanMenuMarka { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; flex: none; }
.yanMenuKapat { display: none; color: #fff; background: none; border: 0; }
.yanNav { flex: 1; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.yanLink { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 6px; color: rgb(255 255 255 / .7); font-size: 14px; font-weight: 500; list-style: none; cursor: pointer; user-select: none; }
.yanLink::-webkit-details-marker { display: none; }
.yanLink span { flex: 1; }
.yanLink:hover { color: #fff; background: rgb(255 255 255 / .08); }
.yanLink.aktif { color: #fff; background: rgb(255 255 255 / .12); }
.yanGrup[open] > .yanLink { color: #fff; }
.yanGrup[open] > .yanLink .ok { transform: rotate(180deg); }
.yanLink .ok { width: 14px; height: 14px; transition: transform var(--gecis); }
.yanPanel { padding: 2px 0 8px 22px; display: flex; flex-direction: column; }
.yanGrupBaslik { padding: 8px 12px 2px; font-size: 11px; font-weight: 600; color: rgb(255 255 255 / .45); }
.yanAltLink { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; font-size: 13.5px; line-height: 18.9px; color: rgb(255 255 255 / .62); }
.yanAltLink span:first-child { flex: 1; }
.yanAltLink:hover { color: #fff; background: rgb(255 255 255 / .06); }
.yanAltLink.aktif, .yanAltLink.guclu { color: #fff; }
.yanAltLink.aktif { background: rgb(255 255 255 / .1); }
.yanAltLink.yakinda { color: rgb(255 255 255 / .38); }
.yanAltLink .menuSayi { background: rgb(255 255 255 / .12); color: #fff; }

/* Sayfa başlığı */
.sayfaBaslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sayfaBaslik > div:first-child { min-width: 0; }
.sayfaBaslik h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sayfaBaslik h1 + p, .sayfaBaslik p.soluk { margin-top: 4px; color: var(--soluk); }
.ustYazi { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; font-size: 14px; line-height: 20px; color: var(--soluk); }
.ustYazi a { color: var(--soluk); }
.ustYazi a:hover { color: var(--murekkep); }
.baslikIslem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Butonlar */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; color: var(--murekkep); font-size: 13px; line-height: 19.5px; font-weight: 600; white-space: nowrap; transition: background var(--gecis), border-color var(--gecis); }
.btn:hover { background: var(--kagit); border-color: var(--markaCizgi); text-decoration: none; }
.btn.birincil { background: var(--marka); border-color: transparent; color: var(--markaUstu); }
.btn.birincil:hover { background: var(--markaKoyu); }
.btn.koyu { background: var(--murekkep); border-color: transparent; color: #fff; }
.btn.koyu:hover { background: color-mix(in oklab, var(--murekkep) 84%, black); }
.btn.tehlike { color: var(--kirmizi700); border-color: var(--kirmizi200); }
.btn.tehlike:hover { background: var(--kirmizi50); }
.btn.hayalet { border-color: transparent; background: transparent; color: var(--soluk); }
.btn.hayalet:hover { color: var(--murekkep); background: var(--kagit); }
.btn.kucuk { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.buyuk { height: 44px; padding: 0 20px; font-size: 14px; }
.btn.tam { width: 100%; }
.btn.ikon { width: 36px; padding: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .ikon { width: 16px; height: 16px; }
.ikonBtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--soluk); }
.ikonBtn:hover { background: var(--kagit); border-color: var(--cizgi); color: var(--murekkep); }
.ikonBtn .ikon { width: 16px; height: 16px; }

/* Panel / kart */
.kart { background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kart > .kartBaslik:first-child { margin: -20px -20px 0; padding: 14px 20px; border-bottom: 1px solid var(--cizgi); }
.kartBaslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 22px; }
.kartBaslik p { font-size: 14px; line-height: 20px; color: var(--soluk); }
.kartBaslik > a:not(.btn) { font-size: 14px; font-weight: 600; }
.kartBaslik > a:not(.btn):hover { text-decoration: underline; }
.kart.bos, td.bos { text-align: center; color: var(--soluk); padding: 40px 16px; align-items: center; }
.yigin { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.izgara2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.detayIzgara { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.detayIzgara > :only-child { grid-column: 1 / -1; max-width: 980px; }

/* İstatistik kartları */
.kartlar4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kartlar4.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.istatistik { display: block; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; color: var(--murekkep); transition: border-color var(--gecis); }
a.istatistik:hover { border-color: var(--murekkep); }
.istatistik > span { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--soluk); }
.istatistik strong { display: block; margin-top: 4px; font-size: 30px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; }
.istatistik strong.kucukDeger { font-size: 18px; line-height: 28px; padding: 4px 0; }
.istatistik small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--soluk); }
.istatistik small.artis { color: var(--yesil800); }
.istatistik small.azalis { color: var(--kirmizi700); }
.istatistik.dikkat { border-color: var(--murekkep); background: var(--markaAcik); }

/* Grafikler */
.grafikIkili { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.grafikOzet { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.grafikOzet span { color: var(--soluk); font-size: 14px; }
.grafikOzet strong { font-size: 20px; font-weight: 700; }
.grafikOzet small { color: var(--soluk); }
.grafikKutu { position: relative; height: 256px; }

/* Tablolar */
.tabloKap { overflow-x: auto; margin: 0 -20px; }
.kart > .kartBaslik:first-child + .tabloKap { margin-top: -16px; }
.kart > .tabloKap:last-child { margin-bottom: -20px; }
.kart > .tabloKap:last-child .tablo tbody tr:last-child td { border-bottom: 0; }
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tablo th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--soluk); padding: 10px 16px; background: var(--kagit); border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: 12px 16px; border-bottom: 1px solid var(--cizgiAcik); vertical-align: top; }
.tablo th:first-child, .tablo td:first-child { padding-left: 20px; }
.tablo th:last-child, .tablo td:last-child { padding-right: 20px; }
.tablo th.sag { text-align: right; }
.tablo tbody tr:hover { background: var(--kagit); }
.tablo tr.tiklanir { cursor: pointer; }
.tablo a.kalin:hover, .tablo td > a:not(.btn):not(.ikonBtn):hover { text-decoration: underline; }
.kart > .tablo { margin: 0 -20px; width: calc(100% + 40px); }
td.islemler { white-space: nowrap; text-align: right; }
td.islemler form { display: inline; }
.toplamSatir td { font-weight: 600; background: var(--kagit); }

/* Rozetler */
.rozet { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; color: color-mix(in oklab, var(--c) 62%, black); background: color-mix(in oklab, var(--c) 14%, white); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 42%, white); }
.rozet.gri { --c: #84817a; }

/* Uyarılar */
.uyari { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--amber50); border: 1px solid var(--amber200); color: var(--amber800); font-size: 14px; line-height: 20px; }
.uyari.hata { background: var(--kirmizi50); border-color: var(--kirmizi200); color: var(--kirmizi800); }
.uyari.basari { background: var(--yesil50); border-color: var(--yesil200); color: var(--yesil800); }
.uyari.bilgi { background: var(--markaAcik); border-color: var(--markaCizgi); color: var(--murekkep); }
.uyariLink { color: var(--amber800); font-weight: 600; }

/* Formlar */
.alan { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 19.5px; font-weight: 600; color: var(--murekkep); min-width: 0; }
.alan small { font-size: 12px; line-height: 15px; font-weight: 400; color: var(--soluk); }
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), select, textarea) { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; font-size: 15px; font-weight: 400; color: var(--murekkep); outline: none; min-width: 0; transition: border-color var(--gecis), box-shadow var(--gecis); }
:where(select) { appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236F6B66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
:where(textarea) { height: auto; padding: 12px 14px; line-height: 1.625; resize: vertical; }
:where(input, select, textarea):focus { border-color: var(--murekkep); box-shadow: 0 0 0 3px var(--markaAcik); }
:where(input, select, textarea):disabled { background: var(--kagit); color: var(--soluk); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { accent-color: var(--murekkep); width: 18px; height: 18px; }
input[type=file] { font-size: 14px; }
.onay { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.formIzgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.formIzgara .genis { grid-column: 1 / -1; }
.satirForm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.satirForm input, .satirForm select { width: auto; height: 40px; font-size: 14px; }
.satirForm .genisGirdi { flex: 1; min-width: 200px; }
.ekliGirdi { display: flex; align-items: center; gap: 6px; }
.ekliGirdi > span { color: var(--soluk); padding: 0 2px; font-weight: 400; }
.ekliGirdi.kisa input { width: 112px !important; height: 36px; text-align: right; font-size: 14px; }
.ekliGirdi.kisa select { width: 112px; height: 36px; font-size: 14px; }
.kucukGirdi { height: 36px !important; padding: 0 10px !important; font-size: 14px !important; }
.formAlt { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--kagit) 30%); }
.anahtar { width: 44px; height: 24px; border-radius: 999px; border: 0; background: var(--cizgi); position: relative; padding: 0; flex: none; transition: background var(--gecis); }
.anahtar i { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a; transition: left var(--gecis); }
.anahtar.acik { background: var(--murekkep); }
.anahtar.acik i { left: 22px; }
.renkGirdi { width: 40px; height: 36px; padding: 2px; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; cursor: pointer; }

/* Sekmeler */
.sekmeler { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--cizgi); scrollbar-width: none; }
.sekmeler a { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 10px 12px; border-bottom: 2px solid transparent; color: var(--soluk); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.sekmeler a:hover { color: var(--murekkep); }
.sekmeler a.aktif { color: var(--murekkep); border-color: var(--murekkep); }
.sekmeler b { font-weight: 600; color: var(--soluk); }
.sekmeler i { display: none; }
.kucukSekme { border-bottom: 0; flex: 1; }

/* Filtreler ve listeler */
.filtreler { display: flex; flex-direction: column; gap: 12px; }
.filtreAna { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aramaKutu { position: relative; flex: 1; min-width: 220px; display: flex; align-items: center; color: var(--soluk); }
.aramaKutu > .ikon { position: absolute; left: 12px; pointer-events: none; }
.aramaKutu input { padding-left: 36px !important; height: 40px; font-size: 14px; }
.filtreEk { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 14px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 8px; }
.filtreEk select, .filtreEk input { height: 40px; font-size: 14px; }
.filtreEtiketler { display: flex; gap: 6px; flex-wrap: wrap; }
.filtreEtiketler a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; border-radius: 6px; background: var(--kum); font-size: 12px; font-weight: 600; }
.filtreEtiketler .ikon { width: 13px; height: 13px; }
.listeUst { font-size: 14px; color: var(--soluk); }
.listeUst strong { color: var(--murekkep); font-weight: 600; }
.siparisTablo td:nth-child(3) { min-width: 220px; }
.sayfalama { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sayfalama a, .sayfalama span { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--cizgi); font-size: 14px; line-height: 20px; font-weight: 500; background: #fff; color: var(--murekkep); }
.sayfalama a:hover { background: var(--kagit); }
.sayfalama .aktif { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
.sayfalama .bosluk { background: none; border-color: transparent; }
.sayfalama .solOk { transform: rotate(90deg); }
.sayfalama .sagOk { transform: rotate(-90deg); }
.raporFiltre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.raporFiltre input, .raporFiltre select { width: auto; height: 36px; font-size: 14px; }
.donemSec { display: inline-flex; padding: 3px; gap: 3px; background: var(--kum); border-radius: 6px; margin-right: 6px; }
.donemSec a { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 4px; color: var(--soluk); font-size: 13px; font-weight: 600; }
.donemSec a:hover { color: var(--murekkep); }
.donemSec a.aktif { background: #fff; color: var(--murekkep); box-shadow: 0 1px 2px #0000001a; }

/* Genel Bakış parçaları */
.dikkatSatir { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -20px; padding: 12px 20px; border-top: 1px solid var(--cizgiAcik); font-size: 14px; line-height: 20px; }
.kart > .kartBaslik:first-child + .dikkatSatir { margin-top: -16px; border-top: 0; }
.dikkatSatir:hover { background: var(--kagit); }
.dikkatSatir strong { display: block; font-weight: 600; }
.dikkatSatir span { color: var(--soluk); font-size: 12px; line-height: 16px; }
.dikkatSatir b { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--gri700); background: var(--gri100); box-shadow: inset 0 0 0 1px var(--gri200); }
.dikkatSatir.amber b { color: var(--amber800); background: var(--amber50); box-shadow: inset 0 0 0 1px var(--amber200); }
.durumListe { display: flex; flex-direction: column; margin: -16px -20px -20px; }
.durumListe a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--cizgiAcik); font-size: 14px; line-height: 20px; }
.durumListe a:first-child { border-top: 0; }
.durumListe a:hover { background: var(--kagit); }
.durumListe .durumDeger { text-align: right; }
.durumListe .durumDeger b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.durumListe .durumDeger small { display: block; font-size: 12px; line-height: 16px; color: var(--soluk); white-space: nowrap; }
.isiHarita { display: grid; grid-template-columns: 2.5rem repeat(24, minmax(0, 1fr)); gap: 4px; min-width: 720px; }
.saatEtiket { text-align: center; font-size: 11px; color: var(--soluk); }
.gunEtiket { align-self: center; font-size: 12px; font-weight: 500; color: var(--soluk); }
.hucre { height: 28px; border-radius: 4px; background: var(--kagit); }
.isiLejant { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 12px; color: var(--soluk); }
.isiLejant i { width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in oklab, var(--marka) 12%, white), var(--marka)); }
.toplamDeger { text-align: right; }
.toplamDeger p { font-size: 12px; line-height: 16px; color: var(--soluk); }
.toplamDeger strong { display: block; font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grafikUst { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: -4px; }
.grafikUst > p { font-size: 14px; color: var(--soluk); }
.grafikUst .sagGrup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anahtarEtiket { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.anahtarEtiket input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anahtarEtiket input:checked + .anahtar { background: var(--murekkep); }
.anahtarEtiket input:checked + .anahtar i { left: 22px; }
.tarihAraligi { position: relative; }
.tarihAraligi > .ikon { position: absolute; left: 12px; top: 10px; color: var(--soluk); pointer-events: none; z-index: 1; }
.tarihAraligi input { width: 240px; height: 36px; padding-left: 36px; font-size: 14px; cursor: pointer; }
.veriTablosu summary { cursor: pointer; font-size: 14px; color: var(--soluk); }
.veriTablosu summary:hover { color: var(--murekkep); }
.veriTablosu .kart { margin-top: 8px; padding: 0; overflow-x: auto; }

/* Diğer bileşenler (önceki sayfalar) */
.ozetSayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.ozetSayilar div { background: var(--kagit); border: 1px solid var(--cizgiAcik); border-radius: 8px; padding: 8px 4px; }
.ozetSayilar b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.ozetSayilar span { font-size: 11px; color: var(--soluk); }
.ozetSayilar.altili { grid-template-columns: repeat(3, 1fr); }
.gecmisSatir { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cizgiAcik); font-size: 14px; }
.gecmisSatir span { display: block; color: var(--soluk); font-size: 12px; }
.butonSatir { display: flex; gap: 8px; flex-wrap: wrap; }
.bilgiListe { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.bilgiListe dt { color: var(--soluk); }
.bilgiListe dd { margin: 0; word-break: break-word; }
.genisListe { grid-template-columns: 160px 1fr; }
.notForm { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.notSatir, .gecmisKayit { border-top: 1px solid var(--cizgiAcik); padding-top: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.gecmisKayit s { color: var(--soluk); }
.toplamlar { display: flex; flex-direction: column; margin: 0 -20px -20px; font-size: 14px; }
.toplamlar > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--cizgiAcik); }
.toplamlar > div:first-child { border-top: 0; }
.toplamlar strong { font-variant-numeric: tabular-nums; }
.genelToplam { background: color-mix(in oklab, var(--kum) 60%, white); font-size: 15px; }
.genelToplam span { font-weight: 600; }
.genelToplam strong { font-size: 18px; font-weight: 700; }
.dinamikListe { display: flex; flex-direction: column; gap: 12px; }
.dinamikSatir { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 48px 16px 16px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kagit); }
.dinamikSatir input, .dinamikSatir select { height: 40px; font-size: 14px; }
.dinamikSatir .genis2 { grid-column: span 2; }
.dinamikSatir .onaylar { grid-column: 1 / -1; display: flex; gap: 18px; flex-wrap: wrap; }
.varyasyonSatir { grid-template-columns: 1fr 2fr; }
.soruSatir { grid-template-columns: 1fr 2fr auto; }
.satirSil { position: absolute; top: 8px; right: 8px; }
.onaylar { display: flex; gap: 18px; flex-wrap: wrap; }
.urunHucre { display: flex; align-items: center; gap: 10px; }
.urunHucre img, .gorselYok { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--kum); display: grid; place-items: center; color: var(--soluk); flex: none; }
.urunGorsel { width: 100%; border-radius: 8px; border: 1px solid var(--cizgi); }
.akisSatir { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgiAcik); font-size: 14px; }
.akisSatir span small { display: block; color: var(--soluk); font-size: 12px; }
.akisSatir b { font-variant-numeric: tabular-nums; }
.akisSatir.eksi b { color: var(--kirmizi700); }
.akisSatir.toplam { border-bottom: 0; border-top: 2px solid var(--cizgi); font-size: 16px; }
.eksiDeger { color: var(--kirmizi700); }
.cubukSatir { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; overflow: hidden; background: var(--kagit); font-size: 14px; }
.cubukSatir i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--y); background: var(--markaAcik); }
.cubukSatir > div, .cubukSatir b { position: relative; }
.cubukSatir strong { display: block; }
.cubukSatir span { color: var(--soluk); font-size: 12px; }
.mesaiTablo th, .mesaiTablo td { font-size: 12px; }
.ayarIzgara { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.ayarMenu { position: sticky; top: 136px; display: flex; flex-direction: column; gap: 2px; }
.ayarMenu a { padding: 8px 12px; border-radius: 6px; color: var(--soluk); font-size: 14px; font-weight: 600; }
.ayarMenu a:hover { background: #fff; color: var(--murekkep); }
.kart[id] { scroll-margin-top: 136px; }
.secimKartlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.secimKartlari label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 8px; cursor: pointer; font-weight: 400; background: #fff; }
.secimKartlari label:has(input:checked) { border-color: var(--murekkep); background: var(--markaAcik); }
.secimKartlari input { margin-top: 2px; }
.secimKartlari strong { display: block; font-size: 14px; }
.secimKartlari small { color: var(--soluk); font-size: 12px; }
textarea.kod { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.saglikSatir { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--cizgiAcik); font-size: 14px; }
.saglikSatir i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--yesil600); }
.saglikSatir.sorun i { background: var(--amber500); }
.saglikSatir strong { display: block; font-weight: 600; }
.saglikSatir span { color: var(--soluk); font-size: 13px; }
.yorumGorselleri { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.yorumGorselleri img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--cizgi); }
.gorselSec { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.yildiz { color: var(--amber500); letter-spacing: 1px; }
.islemler.sarmali { white-space: normal; min-width: 280px; text-align: left; }
.islemler.sarmali .btn { margin: 2px 0; }
.siteTablo td:nth-child(2) { min-width: 140px; }
.kirinti { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.kisaArama { flex: 0 1 240px; min-width: 180px; }
.pasifSatir td { opacity: .55; }
.sutunListe { display: grid; grid-template-columns: 1fr; gap: 4px; max-height: 420px; overflow: auto; padding: 4px; border: 1px solid var(--cizgi); border-radius: 8px; }
.sutunSatir { display: grid; grid-template-columns: auto 1fr 76px; gap: 8px; align-items: center; font-weight: 400; padding: 2px 4px; }
.alanEtiketleri { display: flex; gap: 6px; flex-wrap: wrap; }
.cevapSatir { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--cizgiAcik); }
.cevapSatir span { color: var(--soluk); font-size: 12px; }
.alanGrubu { border: 0; padding: 0; margin: 0; min-width: 0; }
.alanGrubu.parca { display: contents; }
.yetkiGrup { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.yetkiGrupBaslik { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--cizgiAcik); }
.yetkiSatir { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-weight: 400; }
.yetkiSatir input { margin-top: 2px; flex: none; }
.yetkiSatir strong { display: block; font-size: 13px; }
.yetkiSatir small { color: var(--soluk); font-size: 12px; }

/* Giriş */
.girisSayfa { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--kagit); }
.girisKart { width: min(100%, 400px); background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.girisKart .marka { color: var(--murekkep); }
.girisKart .markaIsaret { background: var(--murekkep); color: #fff; }
.girisKart h1 { font-size: 24px; line-height: 32px; }

.bildirim { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--murekkep); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 100; box-shadow: var(--golgePop); display: flex; align-items: center; gap: 12px; }
.bildirim a { color: #fff; font-weight: 600; text-decoration: underline; }

@media (max-width: 1279px) {
    .izgara2, .detayIzgara, .grafikIkili { grid-template-columns: minmax(0, 1fr); }
    .sepetEkle { grid-template-columns: 1fr 1fr; }
    .ustMenuLink { padding: 0 9px; }
    .ustMenuLink .ikon:not(.ok) { display: none; }
}
@media (max-width: 1023px) {
    .ustBant { display: none; }
    .yanYerlesim .ana { margin-left: 0; }
    .yanYerlesim .yanMenu:not(.acik) { display: none; }
    .yanMenu.acik { display: flex; }
    .yanMenu.acik ~ .perde { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 45; }
    .yanMenuKapat { display: inline-grid; }
    .baslikBant { top: 0; padding: 0 16px; }
    .mobilMenuDugme { display: inline-flex !important; }
    .kartlar4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ayarIzgara { grid-template-columns: minmax(0, 1fr); }
    .ayarMenu { position: static; flex-direction: row; overflow-x: auto; }
    .ayarMenu a { white-space: nowrap; }
}
@media (max-width: 640px) {
    .icerik { padding: 20px 16px 32px; }
    .kullaniciYazi, .kullaniciDugme .ok, .canliYazi, .mobilGizle, .kbd { display: none; }
    .baslikArama input { padding-right: 12px; }
    .kart { padding: 16px; }
    .kart > .kartBaslik:first-child { margin: -16px -16px 0; padding: 12px 16px; }
    .tabloKap, .sepetEkle, .dikkatSatir { margin-left: -16px; margin-right: -16px; }
    .kart > .tabloKap:last-child { margin-bottom: -16px; }
    .durumListe { margin: -16px -16px -16px; }
    .toplamlar { margin: 0 -16px -16px; }
    .kart > .tablo { margin: 0 -16px; width: calc(100% + 32px); }
    .tablo th:first-child, .tablo td:first-child { padding-left: 16px; }
    .tablo th:last-child, .tablo td:last-child { padding-right: 16px; }
    .kartlar4, .kartlar4.uclu, .formIzgara, .dinamikSatir, .varyasyonSatir, .soruSatir, .sepetEkle, .ozetSayilar.altili { grid-template-columns: minmax(0, 1fr); }
    .dinamikSatir .genis2 { grid-column: auto; }
    .ozetSayilar { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: 26px; line-height: 32px; }
}

.sayfaBaslik p .kucukMetin { font-size: 14px; }
.altSatirMetin { display: block; font-size: 12px; line-height: 16px; color: var(--soluk); }
.dikkatSol { display: flex; align-items: flex-start; gap: 12px; }
.dikkatSol > .ikon { margin-top: 2px; color: var(--soluk); }
.dikkatSatir .dikkatSol > span > span { display: block; color: var(--soluk); font-size: 12px; line-height: 16px; }
.dikkatSatir .dikkatSol > span > strong { display: block; font-weight: 600; }
.flatpickr-calendar { font-family: var(--font); box-shadow: var(--golgePop); border: 1px solid var(--cizgi); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--marka); border-color: var(--marka); }
.flatpickr-day.inRange { background: var(--markaAcik); border-color: var(--markaAcik); box-shadow: -5px 0 0 var(--markaAcik), 5px 0 0 var(--markaAcik); }
.listePanel { padding: 0; gap: 0; }
.listePanel .tabloKap { margin: 0; }
.listePanel .tablo th:first-child, .listePanel .tablo td:first-child { padding-left: 16px; }
.listePanel .tablo th:last-child, .listePanel .tablo td:last-child { padding-right: 16px; }
.listePanel .tablo tbody tr:last-child td { border-bottom: 0; }
.listeFiltre { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 12px; border-bottom: 1px solid var(--cizgi); }
.listeFiltre .iki { grid-column: span 2; }
.listeFiltre select, .listeFiltre input { height: 40px; font-size: 14px; }
.listeFiltre .aramaKutu { min-width: 0; }
.listeFiltre .tarihAraligi { position: relative; display: flex; align-items: center; color: var(--soluk); }
.listeFiltre .tarihAraligi > .ikon { position: absolute; left: 12px; pointer-events: none; }
.listeFiltre .tarihAraligi input { padding-left: 36px; }
.filtreDugmeler { grid-column: 5 / span 2; display: flex; gap: 8px; }
.filtreDugmeler .btn { height: 40px; }
.filtreDugmeler .btn.koyu { flex: 1; }
.listeSerit { padding: 10px 16px; border-bottom: 1px solid var(--cizgi); }
.listePanel .listeUst { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--cizgi); }
.listePanel .listeUst .btn[aria-pressed=true] { background: var(--kum); }
.listeAlt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--cizgi); font-size: 14px; line-height: 20px; }
.secimHucre { width: 50px; }
.siparisTablo tbody tr.secili { background: var(--markaAcik); }
.siparisTablo .orta { font-weight: 500; }
.rozetSatir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.gizliMetin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.btn.acik { border-color: transparent; }
.btn.acik:hover { background: var(--kagit); }
.satirIslem { display: inline-block; }
.satirIslem .acilirMenu { top: calc(100% + 4px); text-align: left; }
.secimCubugu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 24px; background: rgb(255 255 255 / .95); border-top: 1px solid var(--cizgi); box-shadow: 0 -10px 30px -18px rgb(23 24 27 / .35); font-size: 14px; line-height: 20px; }
.secimCubugu[hidden] { display: none; }
.secimCubugu .link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--murekkep); }
.secimIslemler { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.secimAcik .icerik { padding-bottom: 96px; }
.diyalog { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 90px 16px 16px; overflow-y: auto; }
.diyalog[hidden] { display: none; }
.diyalogPerde { position: fixed; inset: 0; background: color-mix(in oklab, var(--murekkep) 50%, transparent); }
.diyalogPanel { position: relative; width: 100%; max-width: 512px; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: 0 30px 60px -20px rgb(23 24 27 / .22); }
.diyalogBaslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--cizgi); }
.diyalogBaslik h2 { margin: 0; font-size: 15px; line-height: 22.5px; font-weight: 600; }
.diyalogGovde { padding: 20px; font-size: 14px; line-height: 20px; display: flex; flex-direction: column; gap: 12px; }
.diyalogGovde select { height: 48px; }
.diyalogAlt { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--cizgi); }
.kolonListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kolonListe li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; }
.kolonListe li.tasiniyor { opacity: .5; }
.kolonListe .tutamac { color: var(--soluk); cursor: grab; }
.kolonListe .onay { flex: 1; font-weight: 400; }
.btn.kucukKare { width: 32px; height: 32px; }
.secimCubugu .btn.tehlike { background: var(--kirmizi700); border-color: transparent; color: #fff; }
.secimCubugu .btn.tehlike:hover { background: color-mix(in oklab, var(--kirmizi700) 88%, black); }
@media (max-width: 767px) {
    .listeFiltre { grid-template-columns: 1fr; }
    .listeFiltre .iki, .filtreDugmeler { grid-column: auto; }
    .secimCubugu { padding: 12px 16px; }
}
.panel { background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; min-width: 0; }
.panelBaslik { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--cizgi); }
.panelGovde { padding: 20px; }
.panelMetin { padding: 20px; font-size: 14px; line-height: 20px; color: var(--soluk); }
.panelAlt { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-top: 1px solid var(--cizgi); }
.panelAlt.dikey { flex-direction: column; padding: 16px; }
.panelAlt textarea { font-size: 14px; }
.panelAcilir { border-top: 1px solid var(--cizgi); font-size: 14px; line-height: 20px; }
.panelAcilir > summary { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.panelAcilir > summary::-webkit-details-marker { display: none; }
.panelAcilir > .sepetEkle { border-top: 0; padding-top: 0; }
.normalAgirlik { font-weight: 400; }
.yiginSik { display: flex; flex-direction: column; gap: 12px; }
.yapiskan { position: sticky; top: 136px; align-self: start; }
.ortaMetin { text-align: center; }
.altNot { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--soluk); }
.kirintiOk { width: 14px; height: 14px; transform: rotate(-90deg); }
.etiketSatir { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etiketSatir .link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; }
.onekGirdi { display: flex; }
.onekGirdi > span { display: flex; align-items: center; height: 48px; padding: 0 12px; border: 1px solid var(--cizgi); border-right: 0; border-radius: 6px 0 0 6px; background: var(--kagit); color: var(--soluk); font-size: 14px; font-weight: 400; }
.onekGirdi > input { border-radius: 0 6px 6px 0; }
.telefonIslem { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sepetTablo th, .sepetTablo td { padding-left: 12px; padding-right: 12px; vertical-align: middle; }
.sepetTablo th:first-child, .sepetTablo td:first-child { padding-left: 20px; }
.sepetUrun { min-width: 224px; }
.adetKutu { display: flex; align-items: center; gap: 4px; }
.adetKutu input { width: 48px !important; padding: 0 4px !important; text-align: center; }
.birimGirdi { min-width: 96px; }
.tutarGirdi { width: 96px !important; text-align: right; }
.kisaGirdi { width: 112px !important; }
.genislik12 { width: 48px; }
.kirmiziYazi { color: var(--kirmizi700); }
.toplamListe { margin: 0; font-size: 14px; line-height: 20px; }
.toplamListe > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--cizgiAcik); }
.toplamListe > div:has(input, select) { padding-top: 8px; padding-bottom: 8px; }
.toplamListe > div:last-child { border-bottom: 0; border-radius: 0 0 11px 11px; }
.toplamListe dd { margin: 0; font-variant-numeric: tabular-nums; }
.toplamListe.ustCizgi { border-top: 1px solid var(--cizgi); }
.toplamListe .genelSatir { padding: 12px 20px; background: color-mix(in oklab, var(--kum) 60%, transparent); }
.toplamListe .genelSatir dt { font-weight: 600; }
.toplamListe .genelSatir dd { font-size: 18px; line-height: 28px; font-weight: 700; }
.sepetEkle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 20px; border-top: 1px solid var(--cizgi); }
.sepetEkle .iki { grid-column: span 2; }
.sepetEkle select, .sepetEkle input { height: 40px; font-size: 14px; }
.sepetEkle .varyasyonlar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sepetEkle .varyasyonlar:empty { display: none; }
.ekleDugme { grid-column: span 4; display: flex; align-items: flex-end; }
.ekleDugme .btn { height: 40px; }
.gecmisKutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gecmisKutular > div { padding: 10px 12px; border-radius: 8px; background: var(--kagit); }
.gecmisKutular p { font-size: 12px; line-height: 16px; color: var(--soluk); }
.gecmisKutular b { display: block; font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gecmisListe { margin-top: 16px; }
.ucluBolum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cizgiAcik); border-top: 1px solid var(--cizgi); border-radius: 0 0 11px 11px; overflow: hidden; }
.ucluBolum > div { background: #fff; padding: 20px; min-width: 0; }
.bolumEtiket { margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--soluk); }
.sadeListe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
.sadeListe a:hover { text-decoration: underline; }
.bilgiIzgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 20px; font-size: 14px; line-height: 20px; }
.bilgiIzgara > div { min-width: 0; }
.bilgiIzgara dt { color: var(--soluk); }
.bilgiIzgara dd { margin: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imzaMetin { padding: 0 20px 16px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 16px; color: var(--soluk); word-break: break-all; }
.kayitListe { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 20px; }
.kayitListe > li { padding: 10px 20px; border-bottom: 1px solid var(--cizgiAcik); }
.kayitListe > li:last-child { border-bottom: 0; }
.kayitListe > li.yanYana { display: flex; justify-content: space-between; gap: 12px; }
.kayitListe.kaydirmali { max-height: 288px; overflow-y: auto; }
@media (max-width: 1279px) {
    .yapiskan { position: static; }
}
@media (max-width: 767px) {
    .sepetEkle, .gecmisKutular, .ucluBolum, .bilgiIzgara { grid-template-columns: minmax(0, 1fr); }
    .sepetEkle .iki, .ekleDugme { grid-column: auto; }
    .sepetEkle .varyasyonlar { grid-template-columns: minmax(0, 1fr); }
}