/* Ortak gorunum (cekirdek). Kullanicinin tasarimi: "Keepa Analiz" tasarim tuvali (v2/tasarim/
 * link.txt), tasarim dosyasi keepa.css. Kurallar:
 *   yazi Roboto (rakamlar esit genislikte), kodlar Roboto Mono (static/yazi/, bu bilgisayardan)
 *   yazi boyutu sadece 12 · 14 · 18 · 28 px (satir 16 · 20 · 24 · 36); kalinlik 400 ve 500
 *   bosluk 4 · 8 · 12 · 16 · 24 · 32 px
 *   kontroller tam yuvarlak (kapsul), 36 px (telefonda 44); kart 16, pencere 24, kucuk kutu 8-12
 *   kart kenarliksiz: beyaz kart gri zeminde; tablo satiri 48 px (iki satirli 56)
 *   renkler Pantone karsiliklari; turuncu sadece gercek uyari (eski veri, eksik kolon)
 *
 * Tasarimin sinif adlari -> uygulamadaki karsiliklari (bolumler bunlari kullanir):
 *   .btn .dugme | .btn-primary .dugme.ana | .btn-ghost .dugme.hafif | .btn-danger .dugme.tehlike.emin
 *   .icon-btn .simge-dugme | .pill .pil (+ .iyi .kotu .uyari .notr .ana .amazon .cizgi)
 *   .card .kart | .modal dialog | .drawer .detay | .popover .acilir | .menu-i .menu-oge
 *   .banner .serit (+ .uyari .kotu .bilgi) | .switch input.anahtar | .cb input[type=checkbox]
 *   .seg .bolumlu | .chip .cip | .field .alan | .label .alan-ad | .help .yardim
 *   .msg-err .hata-metin | .msg-ok .iyi-metin | .muted .soluk | .faint .alt (12 px)
 *   .page-head .sayfa-bas | .page-title .sayfa-ad | .actions .eylemler | .toolbar .arac-cubugu
 *   .dt-foot .tablo-alt | .prod .urun-hucre | .thumb .kucuk-resim | .kv .ad-deger
 *   .step-n .adim-no | .ic .ikon (cekirdek.js: K.ikon(ad))
 * Bolumlerin kendi siniflari kendi dosyalarinda, kendi onekleriyle: veri.css (vr-),
 * filtre.css (fl-), tablo.css (tb-), klasor.css (kl-). Bolum dosyalari bundan sonra yuklenir.
 */

/* ---------------- yazi tipi (Google Fonts'tan indirildi; lisans static/yazi/OFL-*.txt) ---------------- */
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/static/yazi/roboto-latin-ext.woff2") format("woff2");
  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: "Roboto"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/static/yazi/roboto-latin.woff2") format("woff2");
  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: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/yazi/roboto-mono-latin-ext.woff2") format("woff2");
  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: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/yazi/roboto-mono-latin.woff2") format("woff2");
  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;
}

/* ---------------- renkler: acik tema (Pantone Cool Gray 1 C, Black 6 C; 348 C, 485 C, 1525 C, 285 C) ---------------- */
:root {
  --bg: #F2F2F1; --surface: #FFFFFF; --surface-2: #F2F2F1; --surface-3: #E6E6E4; --raised: #FFFFFF;
  --border: #ECECEA; --border-strong: #D9D9D6;
  --text: #101820; --text-2: #53565A; --text-3: #63666A;
  --ok: #00843D;   --ok-bg: #E0F0E8;
  --bad: #DA291C;  --bad-bg: #FBE5E4;
  --na: #63666A;   --na-bg: #F2F2F1;
  --warn: #B94700; --warn-bg: #F7E9E0;
  --link: #0072CE; --link-bg: #E0EEF9;
  --primary: #0072CE; --on-primary: #FFFFFF;
  --danger: #DA291C;  --on-danger: #FFFFFF;
  --on-status: #FFFFFF;
  --amz: #101820;     --on-amz: #FFFFFF;
  --tip-bg: #101820;  --tip-text: #F2F2F1;
  --hl: #FFF1C2;
  --star: #B98A00;
  --shadow: 0 12px 32px rgba(16, 24, 32, .14);
  --overlay: rgba(16, 24, 32, .40);
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --pill: 999px; --r-card: 16px; --r-win: 24px; --r-sm: 8px; --r-md: 12px;
  --kontrol: 36px;
  --ust-yukseklik: 56px;
  color-scheme: light;
}

/* Koyu tema: ayni degiskenlerin ikinci takimi (zemin Black 6 C; 7479 C, 178 C, 1495 C, 292 C).
   Isletim sistemi koyuysa (acikca "acik" secilmediyse) ya da sag ustteki ay simgesiyle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101820; --surface: #18212A; --surface-2: #202A34; --surface-3: #2B3641; --raised: #3A4652;
    --border: #24303A; --border-strong: #3A4652;
    --text: #F4F4F2; --text-2: #D9D9D6; --text-3: #B1B3B3;
    --ok: #26D07C;   --ok-bg: #1A3D37;
    --bad: #FF585D;  --bad-bg: #3D2A32;
    --na: #B1B3B3;   --na-bg: #202A34;
    --warn: #FF8F1C; --warn-bg: #3D3328;
    --link: #69B3E7; --link-bg: #253848;
    --primary: #69B3E7; --on-primary: #101820;
    --danger: #FF585D;  --on-danger: #101820;
    --on-status: #101820;
    --amz: #F4F4F2;     --on-amz: #101820;
    --tip-bg: #F4F4F2;  --tip-text: #101820;
    --hl: #3D3A1E;
    --star: #F2C94C;
    --shadow: 0 12px 32px rgba(0, 0, 0, .5);
    --overlay: rgba(0, 0, 0, .58);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101820; --surface: #18212A; --surface-2: #202A34; --surface-3: #2B3641; --raised: #3A4652;
  --border: #24303A; --border-strong: #3A4652;
  --text: #F4F4F2; --text-2: #D9D9D6; --text-3: #B1B3B3;
  --ok: #26D07C;   --ok-bg: #1A3D37;
  --bad: #FF585D;  --bad-bg: #3D2A32;
  --na: #B1B3B3;   --na-bg: #202A34;
  --warn: #FF8F1C; --warn-bg: #3D3328;
  --link: #69B3E7; --link-bg: #253848;
  --primary: #69B3E7; --on-primary: #101820;
  --danger: #FF585D;  --on-danger: #101820;
  --on-status: #101820;
  --amz: #F4F4F2;     --on-amz: #101820;
  --tip-bg: #F4F4F2;  --tip-text: #101820;
  --hl: #3D3A1E;
  --star: #F2C94C;
  --shadow: 0 12px 32px rgba(0, 0, 0, .5);
  --overlay: rgba(0, 0, 0, .58);
  color-scheme: dark;
}

/* ---------------- temel ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* Yapiskan ust cubuk: klavyeyle (Tab) odaklanan ya da kaydirilarak gosterilen alan onun altinda
   kalmasin (9 Ekim 2026) */
html { scroll-padding-top: var(--ust-yukseklik); }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 20px; font-weight: 400;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, ul, ol, fieldset, legend { margin: 0; padding: 0; }
h1 { font-size: 28px; line-height: 36px; font-weight: 500; }
h2, h3 { font-size: 18px; line-height: 24px; font-weight: 500; }
h4 { font-size: 14px; line-height: 20px; font-weight: 500; }
b, strong { font-weight: 500; }
ul, ol { padding-left: 20px; }
a { color: var(--link); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); font-size: 12px; line-height: 16px; }
.alt { color: var(--text-3); font-size: 12px; line-height: 16px; }
.soluk { color: var(--text-2); }
.iyi-renk { color: var(--ok); } .kotu-renk { color: var(--bad); } .uyari-renk { color: var(--warn); }
.na-renk { color: var(--na); }
.sag { text-align: right; }
.tasma { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* simge: tek set, 16 px (K.ikon) */
.ikon {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex: none; display: block;
}

/* ---------------- ust cubuk ---------------- */
.ust {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  height: var(--ust-yukseklik); display: flex; align-items: center; gap: 32px; padding: 0 24px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--text); text-decoration: none; }
/* Logo: kullanicinin isareti (9 Ekim 2026; v2/tasarim/logo.svg). Bir birim 2 px: cizgiler esit kalin */
.logo-isaret { width: 25px; height: 28px; display: grid; place-items: center; color: var(--text); }
.logo-isaret svg { display: block; width: 25px; height: 22px; fill: currentColor; }
.logo-ad { font-size: 18px; line-height: 24px; font-weight: 500; }
.logo .pazar { font-size: 12px; line-height: 16px; color: var(--text-3); }
.ust-menu { display: flex; gap: 4px; align-items: center; }
.ust-menu a {
  display: flex; align-items: center; height: var(--kontrol); padding: 0 16px; border-radius: var(--pill);
  color: var(--text-2); text-decoration: none; white-space: nowrap;
}
.ust-menu a:hover { color: var(--text); background: var(--surface-2); }
.ust-menu a.secili { color: var(--text); background: var(--surface-3); font-weight: 500; }
.menu-dugme {
  display: none; align-items: center; gap: 4px; height: var(--kontrol); padding: 0 12px; border: 0;
  border-radius: var(--pill); background: var(--surface-3); color: var(--text); font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.menu-dugme span { overflow: hidden; text-overflow: ellipsis; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--text-2); white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: var(--pill); background: var(--surface-3); color: var(--text);
  display: grid; place-items: center; font-size: 12px; line-height: 16px; font-weight: 500; flex: none;
}

/* ---------------- dugmeler (36 px, kapsul) ---------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--kontrol); padding: 0 16px; border-radius: var(--pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  white-space: nowrap; cursor: pointer; flex: none; text-decoration: none; font-weight: 400;
}
.dugme:hover { background: var(--surface-2); }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dugme.ana { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 500; }
.dugme.ana:hover { background: var(--primary); filter: brightness(1.08); }
.dugme.hafif { background: transparent; border-color: transparent; color: var(--link); padding: 0 12px; }
.dugme.hafif:hover { background: var(--link-bg); }
.dugme.tehlike { color: var(--bad); }
.dugme.hafif.tehlike:hover { background: var(--bad-bg); }
.dugme.tehlike.emin, .dugme.tehlike-dolu {
  background: var(--danger); border-color: var(--danger); color: var(--on-danger); font-weight: 500;
}
.dugme.kucuk { height: 28px; padding: 0 12px; }
.dugme.hafif.kucuk { padding: 0 8px; }
.dugme.tam { width: 100%; }
.simge-dugme {
  width: var(--kontrol); height: var(--kontrol); display: grid; place-items: center; border-radius: var(--pill);
  border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; flex: none;
  padding: 0; text-decoration: none;
}
.simge-dugme:hover { background: var(--surface-2); color: var(--text); }
.simge-dugme.cizgili { border-color: var(--border-strong); background: var(--surface); }

/* ---------------- alanlar (36 px, kapsul) ---------------- */
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  height: var(--kontrol); padding: 0 16px; width: 100%; min-width: 0;
  border: 1px solid var(--border-strong); border-radius: var(--pill);
  background: var(--surface); color: var(--text); font-weight: 400;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=search]:focus,
select:focus, textarea:focus { outline: 2px solid var(--link); outline-offset: -1px; border-color: var(--link); }
input[type=number] { text-align: right; }
textarea {
  height: auto; padding: 8px 16px; resize: vertical; border-radius: var(--r-card);
  font-family: var(--mono); font-size: 12px; line-height: 16px;
}
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding: 0 36px 0 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363666A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
  text-overflow: ellipsis; white-space: nowrap;
}
select:disabled, input:disabled { opacity: .45; cursor: not-allowed; }
/* kutu (18 px, 6 px kose) */
input[type=checkbox]:not(.anahtar) {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none;
  border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--surface);
  position: relative; cursor: pointer; vertical-align: middle;
}
input[type=checkbox]:not(.anahtar):checked { background: var(--link); border-color: var(--link); }
input[type=checkbox]:not(.anahtar):checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* anahtar: iOS orani, tam yuvarlak */
input.anahtar {
  appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: var(--pill);
  background: var(--border-strong); position: relative; flex: none; margin: 0; cursor: pointer;
  transition: background .15s; border: 0;
}
input.anahtar::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--pill);
  background: #FFFFFF; transition: left .15s; box-shadow: 0 1px 2px rgba(16, 24, 32, .2);
}
input.anahtar:checked { background: var(--link); }
input.anahtar:checked::after { left: 18px; }
input.anahtar:disabled { opacity: .45; cursor: not-allowed; }

/* etiket + alan + yardim / hata satiri */
.alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alan-ad, .alan > label:first-child { font-size: 12px; line-height: 16px; color: var(--text-2); padding-left: 16px; font-weight: 400; }
.yardim { font-size: 12px; line-height: 16px; color: var(--text-3); padding-left: 16px; }
.hata-metin { font-size: 12px; line-height: 16px; color: var(--bad); display: flex; gap: 4px; align-items: center; }
.hata-metin:empty { display: none; }
.iyi-metin { font-size: 12px; line-height: 16px; color: var(--ok); display: flex; gap: 4px; align-items: center; }
.alan .hata-metin, .alan .iyi-metin { padding-left: 16px; }
/* bolumlu secici: gri kapsul ray, secili parca beyaz kapsul */
.bolumlu { display: inline-flex; align-items: stretch; height: var(--kontrol); padding: 4px; border-radius: var(--pill); background: var(--surface-3); flex: none; }
.bolumlu button { padding: 0 12px; border: 0; border-radius: var(--pill); background: transparent; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.bolumlu button.secili { background: var(--raised); color: var(--text); font-weight: 500; }
/* cip: secilebilir sayili kapsul */
.cip {
  display: inline-flex; align-items: center; gap: 8px; height: var(--kontrol); padding: 0 16px;
  border-radius: var(--pill); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); cursor: pointer; white-space: nowrap; flex: none;
}
.cip .n { color: var(--text); }
.cip:hover { background: var(--surface-2); }
.cip.secili { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 500; }
.cip.secili .n { color: var(--surface); }

/* ---------------- sayfa ---------------- */
main {
  padding: 24px; max-width: 1600px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}
.bos { padding: 48px 24px; text-align: center; color: var(--text-2); }
.kart { background: var(--surface); border-radius: var(--r-card); }
.kart.ic-bosluk { padding: 16px; }
/* sayfa basi: "Kaynaklar /" + baslik + soluk bilgi; sagda eylemler */
.sayfa-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; flex-wrap: wrap; }
.sayfa-ad { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.sayfa-ad h1 { overflow-wrap: anywhere; }
.sayfa-ad .yol { color: var(--text-3); text-decoration: none; white-space: nowrap; }
.sayfa-ad .yol:hover { color: var(--text); }
.sayfa-ad .soluk { min-width: 0; }
.eylemler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* iki kolon: solda dar panel, sagda icerik */
.iki-kolon { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
/* bolum (kart icinde) ve etiket-deger tablosu */
.bolum { display: flex; flex-direction: column; gap: 12px; }
.bolum-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ad-deger { display: grid; grid-template-columns: 192px minmax(0, 1fr); row-gap: 8px; column-gap: 16px; }
.ad-deger dt { color: var(--text-2); }
.ad-deger dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.adim-no {
  width: 28px; height: 28px; border-radius: var(--pill); background: var(--link-bg); color: var(--link);
  display: grid; place-items: center; font-size: 12px; line-height: 16px; font-weight: 500; flex: none;
}

/* uyari satiri (tek satir, kapsul): turuncu = gercek uyari, mavi = bilgi, kirmizi = hata */
.serit {
  display: flex; align-items: center; gap: 8px; min-height: var(--kontrol); padding: 4px 8px 4px 16px;
  border-radius: 18px; color: var(--text); background: var(--link-bg);
}
.serit > .ikon { color: var(--link); }
.serit.uyari { background: var(--warn-bg); } .serit.uyari > .ikon { color: var(--warn); }
.serit.kotu { background: var(--bad-bg); } .serit.kotu > .ikon { color: var(--bad); }
.serit .serit-metin { flex: 1; min-width: 0; }
.serit .dugme { height: 28px; padding: 0 12px; background: transparent; border-color: transparent; color: var(--link); }
.serit .dugme:hover { background: color-mix(in srgb, var(--link) 12%, transparent); }
.seritler { display: flex; flex-direction: column; gap: 8px; }
.seritler:empty { display: none; }

/* ---------------- etiket (24 px, kapsul) ---------------- */
.pil {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: var(--pill);
  font-size: 12px; line-height: 16px; white-space: nowrap; flex: none; vertical-align: middle;
  background: var(--surface-3); color: var(--text-2); font-weight: 400;
}
.pil.iyi { background: var(--ok); color: var(--on-status); font-weight: 500; }
.pil.kotu { background: var(--bad); color: var(--on-status); font-weight: 500; }
.pil.uyari { background: var(--warn); color: var(--on-status); font-weight: 500; }
.pil.amazon { background: var(--amz); color: var(--on-amz); font-weight: 500; }
.pil.notr { background: var(--surface-3); color: var(--text-2); }
.pil.ana { background: var(--link-bg); color: var(--link); }
.pil.cizgi { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); }

.bilgi-i { color: var(--text-3); cursor: pointer; display: inline-flex; vertical-align: -3px; margin-left: 4px; }
.bilgi-i .ikon { width: 14px; height: 14px; }

/* ---------------- tablo tabani: satir 48 px, baslik 40 px ---------------- */
.tablo-sar { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  height: 40px; padding: 0 8px; text-align: left; font-size: 12px; line-height: 16px; font-weight: 400;
  color: var(--text-3); background: var(--surface); border-bottom: 1px solid var(--border);
  white-space: nowrap; user-select: none; vertical-align: middle;
}
td { height: 48px; padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr > :first-child { padding-left: 16px; }
tr > :last-child { padding-right: 16px; }
tbody tr:last-child > td { border-bottom: 0; }
td.sag, th.sag { text-align: right; white-space: nowrap; }

/* Kucuk tablolar: yuklemeler, urun gecmisi, kullanicilar, yedekler */
.kucuk-tablo th { height: 32px; }
.kucuk-tablo td { height: 40px; }
.kucuk-tablo tr > :first-child { padding-left: 0; }
.kucuk-tablo tr > :last-child { padding-right: 0; }

/* ---------------- urun hucresi: kucuk resim + ad + alt satir ---------------- */
.urun-hucre { display: flex; gap: 12px; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.kucuk-resim {
  width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-3);
  display: grid; place-items: center; flex: none; overflow: hidden;
}
.kucuk-resim img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; display: block; }
.kucuk-resim.buyuk { width: 64px; height: 64px; border-radius: var(--r-md); }
.urun-yazi { display: flex; flex-direction: column; min-width: 0; }
.urun-yazi.sag { align-items: flex-end; }
.urun-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urun-alt { font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- cekmece: sagda yuzen, 24 px yuvarlak sayfa (icerigi bolumun) ---------------- */
.detay {
  position: fixed; z-index: 40; top: calc(var(--ust-yukseklik) + 12px); right: 12px; bottom: 12px;
  width: min(576px, calc(100vw - 24px));
  background: var(--surface); border-radius: var(--r-win); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.detay-bas {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; flex: none;
  padding: 0 16px 0 24px; border-bottom: 1px solid var(--border); color: var(--text-2);
}
.detay-bas .detay-dugmeler { display: flex; gap: 4px; margin-left: auto; }
.detay-govde { overflow-y: auto; padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---------------- pencere (dialog): 24 px kose, 24 px ic bosluk ---------------- */
dialog {
  border: 0; border-radius: var(--r-win); padding: 0; width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
dialog.genis { width: min(720px, calc(100vw - 32px)); }
dialog::backdrop { background: var(--overlay); }
.pencere-ic { padding: 24px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.pencere-ic > h2 { padding-right: 40px; }
.pencere-ic > p { color: var(--text-2); }
.pencere-ic label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; color: var(--text-2); }
.pencere-ic label > input, .pencere-ic label > select, .pencere-ic label > textarea { font-size: 14px; line-height: 20px; color: var(--text); }
.pencere-ic label > .ad { padding-left: 16px; }
.pencere-ic label.yan-yana { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text); }
.pencere-kapat { position: absolute; top: 18px; right: 18px; }
.pencere-alt { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pencere-alt .sol { margin-right: auto; }
.birak {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-card); padding: 24px 16px;
  text-align: center; color: var(--text-2); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.birak:hover { background: var(--surface-2); }
.birak.ustunde { border-color: var(--link); background: var(--link-bg); }

/* ---------------- acilir menu ---------------- */
.acilir-kok { position: relative; display: inline-flex; }
.acilir {
  position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 240px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.menu-oge {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; background: transparent;
  border-radius: var(--pill); cursor: pointer; text-align: left; width: 100%; color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.menu-oge:hover { background: var(--surface-2); }
.menu-oge.secili { background: var(--link-bg); color: var(--link); font-weight: 500; }
.menu-oge.tehlike { color: var(--bad); }
.menu-oge .n { margin-left: auto; color: var(--text-3); font-weight: 400; }
.menu-oge:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- bildirim: sag altta, kisa sureli ---------------- */
.bildirim {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none;
}
.bildirim > div {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 24px;
  border-radius: 22px; background: var(--tip-bg); color: var(--tip-text); box-shadow: var(--shadow);
  max-width: min(560px, calc(100vw - 48px));
}
.bildirim > div.iyi > .ikon { color: var(--ok); }
.bildirim > div.hata { background: var(--danger); color: var(--on-danger); }
.bildirim-eylem { border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 500;
  text-decoration: underline; cursor: pointer; white-space: nowrap; }

/* ---------------- ipucu ---------------- */
#ipucu {
  position: fixed; z-index: 60; max-width: min(288px, calc(100vw - 16px)); padding: 8px 12px;
  border-radius: var(--r-md); background: var(--tip-bg); color: var(--tip-text);
  font-size: 12px; line-height: 16px; pointer-events: none; box-shadow: var(--shadow);
}

/* ---------------- giris ve ilk kurulum ---------------- */
.giris-kart {
  width: min(400px, 100%); margin: 8vh auto 0; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.giris-kart .baslik { display: flex; flex-direction: column; gap: 4px; }
.giris-kart .baslik p { color: var(--text-2); }
.giris-kart .alanlar { display: flex; flex-direction: column; gap: 16px; }
.kod { font-family: var(--mono); letter-spacing: .5em; font-size: 18px; line-height: 24px; text-align: center; }

/* ---------------- ayarlar ---------------- */
.ayar-menu { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--ust-yukseklik) + 24px); }
.ayar-bolumler { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ayar-bolum { padding: 24px; display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 24px; }
.ayar-satirlari { display: grid; grid-template-columns: 240px minmax(0, 1fr); row-gap: 24px; column-gap: 16px; align-items: start; }
.ayar-satirlari > .ad { line-height: 36px; }
.ayar-satirlari .deger { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ayar-satirlari .deger .yardim { padding-left: 16px; }
.ayar-satirlari input[type=number] { width: 120px; }
.form-satir { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.form-satir > .alan { flex: 1 1 180px; }
/* Kullanicilar: disaridan acma linki ve kisiye gonderilecek giris bilgisi (paylasim, 9 Ekim 2026) */
.alan .form-satir { gap: 8px; flex-wrap: nowrap; }
.alan .form-satir > input { flex: 1 1 auto; min-width: 0; }
.satir-eylem { display: inline-flex; gap: 8px; justify-content: flex-end; }
.giris-bilgisi { width: 100%; resize: none; margin-top: 16px; }

/* ---------------- dar ekran (telefon): kontroller 44 px ---------------- */
@media (max-width: 900px) {
  .iki-kolon { grid-template-columns: minmax(0, 1fr); }
  .ayar-menu { display: none; }
}
@media (max-width: 700px) {
  :root { --kontrol: 44px; }
  main { padding: 16px; gap: 16px; }
  h1 { font-size: 18px; line-height: 24px; }
  .ust { padding: 0 8px 0 16px; gap: 12px; }
  .logo .pazar, .logo-ad { display: none; }
  /* Telefonda menu sigmaz: logonun yaninda bulunulan sayfanin adiyla dugme (#menuDugme), tiklaninca
     menu asagi acilir (tasarimdaki sol ust acilir menu; 9 Ekim 2026). Once (C, 5 Ekim) menu kendi
     icinde kayiyordu: Ayarlar ekranin disinda kaliyordu. */
  .menu-dugme { display: inline-flex; min-width: 0; }
  .menu-dugme[hidden] { display: none; }
  .ust-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 8px; right: 8px; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 8px;
    background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow);
  }
  .ust.menu-acik .ust-menu { display: flex; }
  .ust-menu a { padding: 0 16px; }
  .ust-sag .kim { display: none; }
  .gizle-dar { display: none; }
  .ad-deger, .ayar-satirlari { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .ad-deger dd { margin-bottom: 8px; }
  .ayar-satirlari > .ad { line-height: 20px; }
  .detay { inset: 0; width: 100vw; border-radius: 0; }
  .serit { flex-wrap: wrap; padding: 8px 8px 8px 16px; }
  /* Yazi satirin tamamini alir, dugmeler altina gecer (yoksa yazi dar bir sutuna sikisiyordu) */
  .serit .serit-metin { flex: 1 1 calc(100% - 32px); }
  .ayar-satirlari .deger { overflow-wrap: anywhere; }
  .bildirim { right: 16px; left: 16px; align-items: stretch; }
  .giris-kart { padding: 24px; margin-top: 4vh; }
  .dugme.kucuk { height: 36px; }
}
/* En dar telefonda (320 px) menu dugmesindeki sayfa adina yer kalsin */
@media (max-width: 400px) {
  .ust-sag .avatar { display: none; }
}