/* Vitrolo HQ v2 — yön A "Gece kontrol kulesi" (yonler/A-gece-kulesi) + yön C'nin editoryal başlık tipografisi.
   İlkeler: renk yalnız durumu anlatır (yeşil/amber/kırmızı/gri), vurgu mavisi yalnız etkileşim ve marka; HUD etiketleri (mono, geniş aralık); kahraman = sistem haritası;
   hareket yalnız transform/opacity/clip-path; satır içi stil yok (CSP). Tokenlar :root'ta; karanlık varsayılan, aydınlık tam eşdeğer. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plusjakarta-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plusjakarta-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Instrument Serif"; src: url("/fonts/instrumentserif-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --blue: #2F5BEA; --sky: #6B93FF;
  --r-kart: 14px; --r-buyuk: 20px; --r-alan: 10px;
  --e-cikis: cubic-bezier(.16, 1, .3, 1); --e-keskin: cubic-bezier(.7, 0, .2, 1); --e-akis: cubic-bezier(.37, 0, .63, 1);
  --gecis: var(--e-cikis);
  --yan-g: 248px; --akis-g: 340px; --ust-y: 64px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:root[data-theme="dark"] {
  --zemin: #060914; --zemin2: #0A0F1F; --yuzey: #0B1124; --yuzey2: #101833; --yuzey3: #16203F;
  --cizgi: rgba(140, 165, 230, .13); --cizgi2: rgba(140, 165, 230, .26); --nokta: rgba(140, 165, 230, .10);
  --yazi: #EEF2FF; --yazi2: #B3BDDC; --yazi3: #8D99BF;
  --vurgu: #7EA2FF; --vurgu-zemin: rgba(126, 162, 255, .12); --vurgu-yazi: #060914;
  --ok: #4ADE8B; --uyari: #FFC24D; --hata: #FF6B6E; --soluk: #5B6584;
  --ok-zemin: rgba(74, 222, 139, .1); --uyari-zemin: rgba(255, 194, 77, .09); --hata-zemin: rgba(255, 107, 110, .1);
  --golge: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 24px 60px -32px rgba(0, 0, 0, .8);
  --isik: radial-gradient(1100px 520px at 72% -14%, rgba(47, 91, 234, .17), transparent 62%), radial-gradient(800px 480px at -8% 108%, rgba(107, 147, 255, .07), transparent 60%);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --zemin: #F3F1EA; --zemin2: #ECE9E0; --yuzey: #FFFFFF; --yuzey2: #F7F6F1; --yuzey3: #EEF1FA;
  --cizgi: rgba(22, 33, 62, .11); --cizgi2: rgba(22, 33, 62, .22); --nokta: rgba(22, 33, 62, .09);
  --yazi: #16213E; --yazi2: #39456A; --yazi3: #55607C;
  --vurgu: #2F5BEA; --vurgu-zemin: #E6EDFF; --vurgu-yazi: #FFFFFF;
  --ok: #127A45; --uyari: #8A5A00; --hata: #B4232A; --soluk: #9AA1B4;
  --ok-zemin: rgba(18, 122, 69, .09); --uyari-zemin: rgba(160, 110, 0, .1); --hata-zemin: rgba(180, 35, 42, .08);
  --golge: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 40px -28px rgba(22, 33, 62, .3);
  --isik: radial-gradient(1100px 520px at 80% -14%, rgba(107, 147, 255, .16), transparent 60%);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background-color: var(--zemin); background-image: radial-gradient(circle at 1px 1px, var(--nokta) 1px, transparent 0), var(--isik); background-size: 28px 28px, auto; background-attachment: fixed; color: var(--yazi); font-size: 15px; line-height: 1.5; min-height: 100vh; overflow-x: hidden; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea, select { font-size: 16px; }
a { color: var(--vurgu); }
svg { display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--vurgu); color: var(--vurgu-yazi); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; }
.atla:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; border-radius: 8px; }
kbd { font: 600 11px/1 var(--mono); border: 1px solid var(--cizgi2); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; color: var(--yazi2); background: var(--zemin2); }
.hud { font: 600 11px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--yazi3); margin: 0; }
.hud b { color: var(--yazi2); font-weight: 700; }
.sayi-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.kimlik { font: 500 12.5px var(--mono); color: var(--yazi2); word-break: break-all; }
mark { background: var(--vurgu-zemin); color: var(--yazi); border-radius: 3px; }

/* ---------- düğmeler: dokunsal (basınca ışık izi + yay) ---------- */
.dugme { position: relative; overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 11px; border: 0; background: var(--vurgu); color: var(--vurgu-yazi); font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .25s var(--e-cikis), box-shadow .25s var(--e-cikis), background-color .2s; }
.dugme:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -14px var(--vurgu); }
.dugme:active { transform: translateY(0) scale(.965); transition-duration: .08s; }
.dugme[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.dugme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dugme.bekliyor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform-origin: left; animation: yukle 1.1s var(--e-akis) infinite; opacity: .6; }
.dugme-genis { width: 100%; }
.dugme-cizgi { background: transparent; color: var(--yazi); box-shadow: inset 0 0 0 1px var(--cizgi2); }
.dugme-cizgi:hover { box-shadow: inset 0 0 0 1px var(--vurgu); }
.dugme-tehlike { background: var(--hata); color: #fff; }
.dugme-kucuk { min-height: 36px; padding: 0 13px; font-size: 13px; border-radius: 9px; }
.dugme-sade { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; background: none; border: 0; color: var(--yazi2); border-radius: 9px; cursor: pointer; font-weight: 600; text-decoration: none; }
.dugme-sade:hover { color: var(--yazi); background: var(--vurgu-zemin); }
.dugme-sade svg, .ikon-dugme svg, .ust-ara svg, .palet-giris svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ikon-dugme { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: transparent; border: 1px solid var(--cizgi); color: var(--yazi2); cursor: pointer; transition: color .2s, border-color .2s, transform .25s var(--e-cikis); }
.ikon-dugme:hover { color: var(--yazi); border-color: var(--cizgi2); }
.ikon-dugme:active { transform: scale(.94); }
.ikon-dugme.donuyor svg { animation: don .8s linear infinite; }
.isik-izi::before { content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 60%); pointer-events: none; animation: isik .55s var(--e-cikis) forwards; }
.zil b { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--hata); color: #fff; font: 700 11px/19px var(--mono); text-align: center; box-shadow: 0 0 0 3px var(--zemin); }
.zil.titresim svg { animation: titre .6s var(--e-cikis); transform-origin: 50% 10%; }
.muhur { position: fixed; z-index: 90; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--ok); pointer-events: none; }

/* ---------- giriş: radar sahnesi ---------- */
.giris { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.giris-sahne { position: relative; display: grid; place-items: center; padding: 48px; overflow: hidden; border-right: 1px solid var(--cizgi); }
.radar { position: absolute; width: min(720px, 120%); aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
.r-halka { position: absolute; border: 1px solid var(--cizgi); border-radius: 50%; }
.r1 { inset: 0; } .r2 { inset: 17%; border-style: dashed; } .r3 { inset: 34%; }
.r-tarama { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 300deg, rgba(126, 162, 255, .16) 352deg, rgba(126, 162, 255, .32) 360deg); }
.mo .r-tarama { animation: don 7s linear infinite; }
.r-nokta { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.n1 { left: 22%; top: 30%; } .n2 { right: 26%; top: 58%; background: var(--uyari); box-shadow: 0 0 12px var(--uyari); } .n3 { left: 46%; bottom: 18%; }
.mo .r-nokta { animation: blip 7s linear infinite; } .mo .n2 { animation-delay: -2.4s; } .mo .n3 { animation-delay: -4.6s; }
.giris-halka { position: relative; width: min(340px, 56%); height: auto; }
.gh-p { fill: none; stroke-width: 26; stroke-linecap: round; stroke-dasharray: 1 1; }
.gh-p1 { stroke: var(--blue); } .gh-p2 { stroke: var(--sky); } .gh-p3 { stroke: var(--yazi); }
.mo .gh-p { stroke-dashoffset: 1; animation: ciz 1.1s var(--e-cikis) forwards; } .mo .gh-p2 { animation-delay: .12s; } .mo .gh-p3 { animation-delay: .24s; }
.mo .gh-don { transform-origin: 200px 200px; animation: don 40s linear infinite; }
.gh-nokta { fill: #fff; }
.gh-v { fill: none; stroke: var(--yazi); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.mo .gh-v { stroke-dashoffset: 1; animation: ciz .8s .5s var(--e-cikis) forwards; }
.giris-yazi { position: absolute; left: 48px; bottom: 44px; }
.giris-baslik { margin: 10px 0 4px; font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.giris-baslik em, .marka b em { font-family: var(--serif); font-weight: 400; color: var(--vurgu); letter-spacing: -.01em; }
.giris-alt { margin: 0; color: var(--yazi2); font-size: 17px; }
.giris-kart { display: grid; align-content: center; padding: 48px clamp(24px, 6vw, 88px); }
#giris-adimlar form { display: grid; gap: 16px; max-width: 420px; }
#giris-adimlar h1 { font-size: 34px; letter-spacing: -.035em; }
.acik { margin: 0; color: var(--yazi2); }
.giris-dip { margin-top: 28px; color: var(--yazi3); font-size: 13px; }
.alan { display: grid; gap: 6px; }
.alan label { font-size: 13px; font-weight: 700; color: var(--yazi2); }
.alan input, .alan textarea, .alan select, .arama-kutu { min-height: 46px; padding: 10px 13px; border-radius: var(--r-alan); border: 1px solid var(--cizgi2); background: var(--yuzey); transition: border-color .2s, box-shadow .2s; }
.alan textarea { min-height: 92px; resize: vertical; }
.alan input:focus, .alan textarea:focus, .alan select:focus, .arama-kutu:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-zemin); }
.kod-giris { font: 600 22px var(--mono) !important; letter-spacing: .3em; }
.hata-yazi { margin: 0; color: var(--hata); font-weight: 600; min-height: 1.5em; }
.salla { animation: salla .42s var(--e-keskin); }
.qr-kutu { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--cizgi); border-radius: var(--r-kart); }
.qr-kutu img { width: 140px; height: 140px; border-radius: 8px; background: #fff; }
.gizli-anahtar { font: 600 14px var(--mono); word-break: break-all; margin: 4px 0 0; }
.yedek-kodlar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; margin: 0; list-style: none; }
.yedek-kodlar li { font: 600 15px var(--mono); padding: 10px; border: 1px dashed var(--cizgi2); border-radius: 8px; text-align: center; }

/* ---------- kabuk ---------- */
.kabuk { display: grid; grid-template-columns: var(--yan-g) minmax(0, 1fr); grid-template-rows: var(--ust-y) 1fr; min-height: 100vh; background: linear-gradient(90deg, color-mix(in srgb, var(--zemin) 70%, transparent) 0 calc(var(--yan-g) - 1px), var(--cizgi) calc(var(--yan-g) - 1px) var(--yan-g), transparent var(--yan-g)); }
.yan { grid-row: 1 / 3; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; scrollbar-width: thin; }
.marka { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; color: var(--yazi); text-decoration: none; }
.marka-halka { width: 32px; height: 32px; flex: none; }
.marka-halka path { fill: none; stroke-linecap: round; } .mh1 { stroke: var(--blue); stroke-width: 11; } .mh2 { stroke: var(--sky); stroke-width: 11; } .mh3 { stroke: var(--yazi); stroke-width: 11; } .mhv { stroke: var(--yazi); stroke-width: 8; stroke-linejoin: round; } .mhn { fill: var(--zemin); }
.marka b { display: block; font-size: 17px; letter-spacing: -.02em; }
.marka small { display: block; font-size: 9.5px; margin-top: 3px; }
.menu { position: relative; display: grid; gap: 1px; }
.menu h3 { margin: 16px 10px 6px; font-size: 10px; }
.menu a { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: var(--yazi2); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .2s, background-color .2s; }
.menu a:hover { color: var(--yazi); background: var(--vurgu-zemin); }
.menu a[aria-current="page"] { color: var(--yazi); }
.menu a svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-ad { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu kbd { display: none; }
.menu a:hover kbd, .menu a:focus-visible kbd { display: inline-block; }
.menu a:hover .m-durum { display: none; }
.m-sayi { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--uyari-zemin); color: var(--uyari); font: 700 11px/20px var(--mono); text-align: center; }
.m-durum { width: 7px; height: 7px; border-radius: 50%; background: var(--soluk); flex: none; }
.m-durum.d-ok { background: var(--ok); } .m-durum.d-eski, .m-durum.d-bekliyor { background: var(--uyari); } .m-durum.d-erisilemiyor { background: var(--hata); }
.m-durum.d-kurulmadi { background: none; box-shadow: inset 0 0 0 1px var(--soluk); }
.menu-isaret { position: absolute; left: 0; right: 0; top: 0; height: var(--ih, 38px); border-radius: 8px; background: var(--vurgu-zemin); box-shadow: inset 2px 0 0 var(--vurgu); transform: translateY(var(--iy, 0)); opacity: 0; pointer-events: none; z-index: 0; }
.menu-isaret.hazir { opacity: 1; }
.mo .menu-isaret.hazir { transition: transform .45s var(--e-cikis), height .3s var(--e-cikis); }
.yan-dip { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.ust { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--cizgi); background: color-mix(in srgb, var(--zemin) 86%, transparent); backdrop-filter: blur(10px); }
.ust-ara { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--yazi3); cursor: pointer; text-align: left; transition: border-color .2s; }
.ust-ara:hover { border-color: var(--cizgi2); }
.ust-ara span { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust-sag { display: flex; align-items: center; gap: 10px; }
.canli { display: flex; align-items: center; gap: 7px; padding: 0 6px; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.canli svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.cz { fill: none; stroke: color-mix(in srgb, var(--ok) 25%, transparent); stroke-width: 2.5; }
.cg { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.mo .canli.sayiyor .cg { animation: geriSay 30s linear forwards; }
.canli.durgun { color: var(--hata); } .canli.durgun .cg { stroke: var(--hata); }
.saat { font: 500 13px var(--mono); color: var(--yazi2); font-variant-numeric: tabular-nums; min-width: 8ch; text-align: right; }
.sahne { padding: 28px 28px 64px; min-width: 0; outline: none; view-transition-name: sahne; }
.akis-yan { display: none; }
@media (min-width: 1680px) {
  .kabuk { grid-template-columns: var(--yan-g) minmax(0, 1fr) var(--akis-g); }
  .ust { grid-column: 2 / 4; }
  .akis-yan { display: block; grid-column: 3; grid-row: 2; position: sticky; top: var(--ust-y); height: calc(100vh - var(--ust-y)); overflow-y: auto; border-left: 1px solid var(--cizgi); padding: 22px 20px; }
  .genel-akis-kart { display: none; }
}
.akis-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.akis-canli { display: flex; align-items: center; gap: 6px; font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.akis-canli i, .nabiz-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.mo .akis-canli i, .mo .nabiz-nokta { animation: nabizN 2s var(--e-cikis) infinite; }
.alt { display: none; }

/* ---------- sayfa başı ---------- */
.sayfa-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.sb-sol { min-width: 0; max-width: 980px; }
.sayfa-baslik { font-size: clamp(30px, 3.4vw, 48px); font-weight: 750; letter-spacing: -.04em; line-height: 1.04; margin: 10px 0 8px; view-transition-name: sayfa-baslik; }
.sayfa-baslik em { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; color: var(--vurgu); }
.lede { margin: 0; color: var(--yazi2); font-size: 16px; max-width: 76ch; }
.lede b { color: var(--yazi); }
.alt-yazi { color: var(--yazi2); margin: 0; }
.bas-sag { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.secim { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 3px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--yuzey); }
.secim button { position: relative; overflow: hidden; min-height: 34px; padding: 0 13px; border: 0; border-radius: 7px; background: none; color: var(--yazi2); font-weight: 700; font-size: 13px; cursor: pointer; transition: background-color .25s var(--e-cikis), color .2s; }
.secim button[aria-pressed="true"] { background: var(--yuzey3); color: var(--yazi); box-shadow: inset 0 0 0 1px var(--cizgi2); }
.kaynak-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -6px 0 18px; color: var(--yazi2); font-size: 13px; }
.cip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--cizgi2); font: 700 11.5px/1 "Plus Jakarta Sans", sans-serif; color: var(--yazi2); white-space: nowrap; }
.cip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cip-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-zemin); }
.cip-uyari, .cip-eski, .cip-bekliyor { color: var(--uyari); border-color: color-mix(in srgb, var(--uyari) 40%, transparent); background: var(--uyari-zemin); }
.cip-hata, .cip-erisilemiyor { color: var(--hata); border-color: color-mix(in srgb, var(--hata) 40%, transparent); background: var(--hata-zemin); }
.cip-kurulmadi, .cip-kapali { color: var(--yazi3); border-style: dashed; }
.cip-kapali { opacity: .75; }
.cip-sahte, .cip-concept { color: var(--yazi2); border-style: dashed; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.cip-vurgu { color: var(--vurgu); border-color: color-mix(in srgb, var(--vurgu) 45%, transparent); }
.uyari-kutu { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: var(--r-kart); border: 1px solid color-mix(in srgb, var(--hata) 45%, transparent); background: var(--hata-zemin); }
.uyari-kutu.sari { border-color: color-mix(in srgb, var(--uyari) 45%, transparent); background: var(--uyari-zemin); }
.uyari-kutu svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--hata); stroke-width: 2; stroke-linecap: round; }
.uyari-kutu.sari svg { stroke: var(--uyari); }
.uyari-kutu p { margin: 2px 0 8px; color: var(--yazi2); }

/* ---------- ızgara + paneller ---------- */
.izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.izgara + .izgara { margin-top: 16px; }
.k2 { grid-column: span 2; } .k3 { grid-column: span 3; } .k4 { grid-column: span 4; } .k5 { grid-column: span 5; } .k6 { grid-column: span 6; } .k7 { grid-column: span 7; } .k8 { grid-column: span 8; } .k9 { grid-column: span 9; } .k12 { grid-column: 1 / -1; }
.esit { align-self: stretch; }
.kart { position: relative; min-width: 0; border: 1px solid var(--cizgi); border-radius: var(--r-kart); background: linear-gradient(180deg, color-mix(in srgb, var(--yuzey2) 92%, transparent), color-mix(in srgb, var(--yuzey) 94%, transparent)); box-shadow: var(--golge); padding: 18px 20px; }
.kart.hud-kose::before, .kart.hud-kose::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--cizgi2); pointer-events: none; }
.kart.hud-kose::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-kart); }
.kart.hud-kose::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r-kart); }
.p-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; min-height: 18px; }
.hud-sag { display: flex; align-items: center; gap: 7px; }
.kart-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.kart-bas h2 { font-size: 16px; font-weight: 750; }
.kart-bas p { margin: 3px 0 0; color: var(--yazi3); font-size: 13px; }
.kart.tik { cursor: pointer; transition: border-color .2s, transform .35s var(--e-cikis); }
.kart.tik:hover { border-color: var(--cizgi2); transform: translateY(-2px); }
.soluk-izgara { opacity: .55; filter: saturate(.5); }
.grup-baslik { margin: 26px 0 12px; font: 600 11px var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--yazi3); }

/* ---------- sayı kartları (rulo) ---------- */
.k-sar { min-width: 0; }
.sayi-kart { display: flex; flex-direction: column; min-height: 152px; padding: 15px 16px 12px; }
.sk-ad { display: flex; align-items: center; gap: 7px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--yazi3); }
.sk-ad svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-deger { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 4px; font-size: 50px; line-height: 1; height: 1em; }
.sk-deger.uzun { font-size: 40px; }
.sk-deger .birim { font: 700 14px "Plus Jakarta Sans", sans-serif; font-style: normal; color: var(--yazi2); }
.sk-alt { font-size: 12.5px; color: var(--yazi2); min-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-alt b { color: var(--ok); }
.sk-iz { margin-top: auto; padding-top: 8px; height: 34px; color: var(--vurgu); }
.sk-iz svg { width: 100%; height: 26px; overflow: visible; }
.iz-cizgi { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; }
.mo .iz-cizgi { stroke-dashoffset: 1; animation: ciz 1.1s .25s var(--e-cikis) forwards; }
.iz-son { fill: currentColor; }
.sayi-kart.vurgu .sk-deger { color: var(--vurgu); }
.sayi-kart.alarm-var { border-color: color-mix(in srgb, var(--hata) 45%, transparent); }
.sayi-kart.alarm-var .sk-deger { color: var(--hata); }
.bos-deger { color: var(--yazi3); }
.hata-renk { color: var(--hata); }
.rulo { display: inline-flex; height: 1em; overflow: hidden; line-height: 1; }
.hane { display: inline-block; height: 1em; overflow: hidden; }
.hane-s { display: block; will-change: transform; }
.hane-s b { display: block; height: 1em; font-weight: 400; text-align: center; }
.ayrac { display: inline-block; }
.parla { animation: parla 1.1s var(--e-cikis); }

/* ---------- önem şeridi (K87 gecikmeler, alarmlar, onaylar) ---------- */
.serit { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.s-oge { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--cizgi2); background: var(--yuzey); color: var(--yazi); text-decoration: none; font-size: 14px; max-width: 100%; transition: transform .3s var(--e-cikis), border-color .2s; }
.s-oge:hover { transform: translateY(-1px); }
.s-oge .s-ikon { font-size: 11px; width: 14px; text-align: center; }
.s-oge.s-uyari { border-color: color-mix(in srgb, var(--uyari) 45%, transparent); background: var(--uyari-zemin); } .s-uyari .s-ikon { color: var(--uyari); }
.s-oge.s-hata { border-color: color-mix(in srgb, var(--hata) 45%, transparent); background: var(--hata-zemin); } .s-hata .s-ikon { color: var(--hata); }
.s-oge.s-ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-zemin); } .s-ok .s-ikon { color: var(--ok); }
.s-metin { min-width: 0; } .s-metin b { font-weight: 750; } .s-metin small { display: block; font: 600 10.5px var(--mono); letter-spacing: .08em; color: var(--yazi3); text-transform: uppercase; }
.sla { position: relative; flex: none; width: 92px; height: 5px; border-radius: 3px; background: var(--cizgi); overflow: hidden; }
.sla i { position: absolute; inset: 0; background: var(--uyari); transform-origin: left; }
.s-hata .sla i { background: var(--hata); }
.sla::after { content: ""; position: absolute; top: -2px; bottom: -2px; width: 1.5px; left: var(--sinir, 50%); background: var(--yazi2); }
.mo .s-oge.ilk-kez { animation: dikkat 1.6s var(--e-cikis) 1; }

/* ---------- sistem haritası ---------- */
.harita-kart { padding-bottom: 14px; overflow: hidden; }
.harita-kap { position: relative; }
.harita-svg { width: 100%; height: auto; overflow: visible; }
.harita-svg.dikey { max-width: 420px; margin: 0 auto; }
.k-taban { fill: none; stroke: var(--cizgi2); stroke-width: var(--kalin, 1.5px); stroke-dasharray: 1 1; transition: stroke .3s, opacity .3s; }
.k-paket { fill: none; stroke: var(--vurgu); stroke-width: calc(var(--kalin, 1.5px) + 1px); stroke-linecap: round; stroke-dasharray: 2 34; opacity: .9; }
.k-paket2 { stroke-dasharray: 1 61; opacity: .55; }
.mo .k-paket { animation: akis 1.8s linear infinite; } .mo .k-paket2 { animation-duration: 2.9s; }
.k-etiket rect { fill: var(--yuzey); stroke: var(--cizgi2); } .k-etiket text { fill: var(--yazi2); font: 700 11px var(--mono); text-anchor: middle; }
.h-dugum { cursor: pointer; outline: none; }
.hd-zemin { fill: var(--yuzey); }
.hd-halka { fill: none; stroke-width: 2.2; stroke: var(--soluk); transition: stroke-width .25s; }
.hd-nabiz { fill: none; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.mo .hd-nabiz { animation: nabiz 2.6s var(--e-cikis) infinite; }
.d-ok .hd-halka, .d-ok .hd-nabiz { stroke: var(--ok); } .d-uyari .hd-halka, .d-uyari .hd-nabiz { stroke: var(--uyari); } .d-hata .hd-halka, .d-hata .hd-nabiz { stroke: var(--hata); }
.d-bekliyor .hd-halka { stroke: var(--uyari); stroke-dasharray: 3 4; }
.d-kurulmadi .hd-halka { stroke-dasharray: 4 5; }
.mo .d-uyari .hd-nabiz { animation-duration: 1.6s; }
.hd-ikon { fill: none; stroke: var(--yazi2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.d-kurulmadi .hd-ikon { stroke: var(--soluk); }
.hd-rol { fill: var(--yazi3); font: 600 9.5px var(--mono); letter-spacing: .12em; }
.hd-ad { fill: var(--yazi); font: 750 13.5px "Plus Jakarta Sans", sans-serif; }
.hd-olcu { fill: var(--yazi2); font: 500 12px "Plus Jakarta Sans", sans-serif; }
.d-uyari .hd-olcu { fill: var(--uyari); } .d-hata .hd-olcu { fill: var(--hata); }
.harita-svg.odakli .h-kenar:not(.bagli) .k-taban, .harita-svg.odakli .h-kenar:not(.bagli) .k-paket { opacity: .18; }
.harita-svg.odakli .h-dugum:not(.secili) { opacity: .45; }
.h-kenar.bagli .k-taban { stroke: var(--vurgu); }
.h-dugum.secili .hd-halka, .h-dugum:focus-visible .hd-halka { stroke-width: 3.4; }
.h-dugum:focus-visible .hd-zemin { stroke: var(--vurgu); stroke-width: 6; stroke-opacity: .35; }
.h-dugum, .h-dugum * { transition: opacity .3s var(--e-cikis); }
.h-uydular { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.h-uydu { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--cizgi); color: var(--yazi2); text-decoration: none; font-size: 13px; font-weight: 650; }
.h-uydu:hover { border-color: var(--cizgi2); color: var(--yazi); }
.h-uydu i { width: 7px; height: 7px; border-radius: 50%; background: var(--soluk); }
.h-uydu.d-ok i { background: var(--ok); } .h-uydu.d-uyari i, .h-uydu.d-bekliyor i { background: var(--uyari); } .h-uydu.d-hata i { background: var(--hata); } .h-uydu.d-kurulmadi i { background: none; box-shadow: inset 0 0 0 1px var(--soluk); }
.h-uydu small { font: 600 10px var(--mono); color: var(--yazi3); letter-spacing: .06em; text-transform: uppercase; }

/* KPI paneli: 2×3 nabız ızgarası (sayı kartları tek yüzey üstünde) */
.nabiz-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--r-kart); overflow: hidden; }
.nabiz-izgara .sayi-kart { border: 0; border-radius: 0; box-shadow: none; background: var(--yuzey); min-height: 0; height: 100%; }
.nabiz-izgara .k-sar { min-height: 0; }

/* ---------- grafik ---------- */
.grafik { position: relative; color: var(--vurgu); }
.grafik svg { width: 100%; height: auto; overflow: visible; }
.grafik svg:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; }
.g-eksen { stroke: var(--cizgi); }
.g-yazi { fill: var(--yazi3); font: 500 10.5px var(--mono); }
.g-alan1 { fill: url(#gDeg1); }
.g-cizgi1 { fill: none; stroke: var(--vurgu); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; }
.g-cizgi2 { fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; }
.mo .g-cizim { stroke-dashoffset: 1; animation: ciz 1.4s .15s var(--e-cikis) forwards; }
.mo .g-cizgi2 { animation-delay: .35s; }
.mo .g-alan1 { animation: belir .9s .5s var(--e-cikis) backwards; }
.g-imlec { stroke: var(--cizgi2); stroke-dasharray: 3 3; }
.g-nokta { fill: var(--zemin); stroke: var(--vurgu); stroke-width: 2.5; }
.g-ipucu { position: absolute; left: 0; top: 0; transform: translate(calc(var(--gx, 0px) - 50%), calc(var(--gy, 0px) - 120%)); padding: 7px 10px; border-radius: 8px; background: var(--yuzey3); border: 1px solid var(--cizgi2); color: var(--yazi); font-size: 12.5px; white-space: nowrap; pointer-events: none; box-shadow: var(--golge); }
.g-ipucu b { display: block; font-size: 11px; color: var(--yazi3); font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.lejant { display: flex; gap: 14px; font: 600 11px var(--mono); color: var(--yazi3); letter-spacing: .06em; text-transform: uppercase; }
.lejant span::before { content: ""; display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--vurgu); }
.lejant .l2::before { background: var(--ok); }

/* ---------- sağlık kadranı ---------- */
.halka-kap { container-type: inline-size; }
.halka-kart { display: grid; grid-template-columns: minmax(0, 170px) 1fr; gap: 16px; align-items: center; }
@container (max-width: 440px) { .halka-kart { grid-template-columns: 1fr; justify-items: center; } .halka-svg { max-width: 168px; } .halka-lejant { width: 100%; grid-template-columns: 1fr 1fr; column-gap: 14px; } .halka-lejant a { grid-template-columns: 8px minmax(0, 1fr); } .halka-lejant small { display: none; } }
.halka-svg { width: 100%; height: auto; max-width: 190px; }
.hk-cetvel line { stroke: var(--cizgi2); stroke-width: 1; }
.hk-iz { fill: none; stroke: var(--cizgi); stroke-width: 10; }
.hk-p { fill: none; stroke-width: 10; stroke: var(--soluk); stroke-linecap: butt; }
.hk-ok { stroke: var(--ok); } .hk-eski, .hk-bekliyor, .hk-uyari { stroke: var(--uyari); } .hk-erisilemiyor { stroke: var(--hata); } .hk-kurulmadi { stroke: var(--cizgi2); stroke-dasharray: 2 4; }
.hk-tarama path { fill: var(--vurgu); opacity: .09; }
.hk-tarama { transform-origin: 100px 100px; }
.mo .hk-tarama { animation: don 6s linear infinite; }
.hk-sayi { fill: var(--yazi); font: italic 400 40px var(--serif); text-anchor: middle; }
.hk-alt { fill: var(--yazi3); font: 600 9.5px var(--mono); letter-spacing: .16em; text-anchor: middle; }
.halka-lejant { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.halka-lejant a { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; min-height: 26px; color: var(--yazi2); text-decoration: none; font-size: 12.5px; }
.halka-lejant a:hover { color: var(--yazi); }
.halka-lejant i { width: 7px; height: 7px; border-radius: 50%; background: var(--soluk); }
.halka-lejant i.d-ok { background: var(--ok); } .halka-lejant i.d-eski, .halka-lejant i.d-bekliyor { background: var(--uyari); } .halka-lejant i.d-erisilemiyor { background: var(--hata); } .halka-lejant i.d-kurulmadi { background: none; box-shadow: inset 0 0 0 1px var(--soluk); }
.halka-lejant small { font: 600 10px var(--mono); color: var(--yazi3); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- listeler, akış ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cizgi); min-width: 0; }
.liste > li:first-child { border-top: 0; }
.l-ana { flex: 1; min-width: 0; }
.l-bas { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.l-alt { margin: 2px 0 0; font-size: 12.5px; color: var(--yazi3); }
.liste > li > b { font: 600 15px var(--mono); }
.liste-ikon { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--yazi3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--soluk); flex: none; display: inline-block; }
.nokta.d-ok { background: var(--ok); } .nokta.d-eski { background: var(--uyari); } .nokta.d-erisilemiyor { background: var(--hata); }
.liste li.cikiyor, .onay.cikiyor { animation: cik .42s var(--e-keskin) forwards; }
.akis { list-style: none; margin: 0; padding: 0; position: relative; }
.akis > li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 9px 0 9px; border-top: 1px solid var(--cizgi); content-visibility: auto; contain-intrinsic-size: auto 54px; }
.akis > li:first-child { border-top: 0; }
.a-zaman { font: 500 11px var(--mono); color: var(--yazi3); padding-top: 3px; }
.a-metin { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.a-metin::before { content: "●"; margin-right: 7px; font-size: 9px; vertical-align: 2px; color: var(--vurgu); }
.o-iyi .a-metin::before { color: var(--ok); } .o-uyari .a-metin::before { content: "▲"; color: var(--uyari); } .o-hata .a-metin::before { content: "■"; color: var(--hata); }
.a-alt { margin: 3px 0 0; font-size: 10px; }
.a-kac { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--vurgu-zemin); color: var(--vurgu); font: 700 10px var(--mono); }
.akis > li.yeni { background: linear-gradient(90deg, var(--vurgu-zemin), transparent 70%); }
.akis-bos { color: var(--yazi3); padding: 10px 0; list-style: none; }
.akis-sik > li { padding: 7px 0; }
.bos-kutu { display: grid; gap: 4px; place-items: center; text-align: center; padding: 22px 12px; color: var(--yazi3); border: 1px dashed var(--cizgi); border-radius: 10px; font-size: 13.5px; }
.bos-kutu b { color: var(--yazi2); }

/* huni (satış hattı) */
.hat { display: grid; gap: 4px; }
.hat-satir { display: grid; grid-template-columns: minmax(0, 1.3fr) 1.7fr auto; gap: 12px; align-items: center; min-height: 34px; font-size: 13.5px; }
.hat-satir > span:first-child { min-width: 0; color: var(--yazi2); }
.hat-satir b { font: 700 14px var(--mono); min-width: 2ch; text-align: right; }
.hat-satir small { display: block; font: 600 10px var(--mono); color: var(--yazi3); letter-spacing: .05em; }
.l-ana > .cubuk { margin-top: 8px; height: 5px; }
.huni-satir small { display: block; margin-top: 2px; font-size: 9.5px; }
.cubuk { position: relative; height: 8px; border-radius: 4px; background: var(--cizgi); overflow: hidden; }
.cubuk i { position: absolute; inset: 0; border-radius: 4px; background: var(--vurgu); transform-origin: left; transform: scaleX(0); }
.mo .cubuk i { transition: transform .9s var(--e-cikis); }
.cubuk.c-uyari i { background: var(--uyari); }
.huni { display: grid; gap: 10px; }
.huni-satir { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.huni-cubuk { position: relative; height: 8px; border-radius: 4px; background: var(--cizgi); overflow: hidden; }
.huni-cubuk i { position: absolute; inset: 0; background: var(--vurgu); transform-origin: left; transform: scaleX(0); }
.mo .huni-cubuk i { transition: transform .9s var(--e-cikis); }
.yigin { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--cizgi); gap: 2px; margin-bottom: 12px; }
.yigin i { flex: 0 1 0; min-width: 0; background: var(--soluk); }
.yigin .y-ok { background: var(--ok); } .yigin .y-uyari { background: var(--uyari); } .yigin .y-hata { background: var(--hata); }
.mo .yigin i { transition: flex-grow .9s var(--e-cikis); }
.cubuklar { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.cubuklar i { flex: 1; height: 100%; border-radius: 3px 3px 0 0; background: var(--vurgu); transform-origin: bottom; transform: scaleY(0); opacity: .85; }
.mo .cubuklar i { transition: transform .8s var(--e-cikis); }
.basamak { display: flex; align-items: flex-end; gap: 10px; height: 170px; }
.basamak div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.basamak i { width: 100%; flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--vurgu), color-mix(in srgb, var(--vurgu) 30%, transparent)); transform-origin: bottom; transform: scaleY(0); }
.mo .basamak i { transition: transform .9s var(--e-cikis); }
.basamak b { font-size: 26px; } .basamak small { font: 600 10.5px var(--mono); color: var(--yazi3); }
.mini-cubuk { display: inline-block; position: relative; width: 44px; height: 4px; margin-left: 8px; border-radius: 2px; background: var(--cizgi); vertical-align: middle; overflow: hidden; }
.mini-cubuk i { position: absolute; inset: 0; background: var(--vurgu); transform-origin: left; transform: scaleX(0); }

/* tablo */
.tablo-sar { overflow-x: auto; margin: 0 -4px; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tablo th { text-align: left; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--yazi3); padding: 8px 8px; border-bottom: 1px solid var(--cizgi2); white-space: nowrap; }
.tablo td { padding: 10px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo .sag { text-align: right; font-variant-numeric: tabular-nums; }
.tablo tbody tr { transition: background-color .15s; }
.tablo tbody tr:hover { background: var(--vurgu-zemin); }

/* ---------- onaylar ---------- */
.yigin-liste { display: grid; gap: 10px; }
.onay { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.onay-ikon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--vurgu-zemin); color: var(--vurgu); }
.onay-ikon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.onay h3 { font-size: 15.5px; font-weight: 750; }
.onay .alt-yazi { font-size: 13px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dosyalar { margin: 6px 0 0; font: 500 12px var(--mono); color: var(--yazi3); overflow-wrap: anywhere; }
.onay-dugmeler { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.onay-gecmis { grid-column: 2 / -1; margin: 0; padding: 8px 0 0; list-style: none; border-top: 1px dashed var(--cizgi); font-size: 12.5px; color: var(--yazi3); }
.onay-form { grid-column: 2 / -1; display: grid; gap: 8px; }
.onay-form textarea { min-height: 76px; padding: 10px 12px; border-radius: var(--r-alan); border: 1px solid var(--cizgi2); background: var(--yuzey); }
.onay.karar-onay { border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.onay.karar-revize { border-color: color-mix(in srgb, var(--uyari) 35%, transparent); }

/* ---------- order işletmeleri ---------- */
.isletmeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.isletme { display: grid; gap: 12px; }
.isletme-bas { display: flex; gap: 12px; align-items: center; }
.isletme-avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 11px; font: italic 400 26px var(--serif); background: var(--vurgu-zemin); color: var(--vurgu); }
.isletme-avatar.a2 { background: var(--ok-zemin); color: var(--ok); } .isletme-avatar.a3 { background: var(--uyari-zemin); color: var(--uyari); }
.isletme h3 { font-size: 15.5px; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.isletme-alt { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--yazi3); }

/* ---------- bekçiler ---------- */
.bekci { display: grid; gap: 12px; }
.bekci-bas { display: flex; gap: 12px; align-items: center; }
.bekci-bas .bas-sag { margin-left: auto; }
.bekci h3 { font-size: 15.5px; }
.kure { position: relative; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--soluk); }
.kure.ok { background: var(--ok); } .kure.uyari { background: var(--uyari); } .kure.hata { background: var(--hata); }
.kure::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; }
.kure.ok { color: var(--ok); } .kure.uyari { color: var(--uyari); } .kure.hata { color: var(--hata); }
.mo .kure::after { animation: nabizK 2.4s var(--e-cikis) infinite; }
.ozet { margin: 0; color: var(--yazi2); }
.olcu { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--yazi3); }
.olcu b { color: var(--yazi); }
.ekg { height: 54px; color: var(--ok); }
.ekg svg { width: 100%; height: 54px; overflow: visible; }

/* kurallar */
.kural { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--cizgi); }
.kural-kod { font: 700 13px var(--mono); color: var(--vurgu); padding-top: 2px; }
.kural h3 { font-size: 14.5px; }
.kural p { margin: 4px 0 0; color: var(--yazi2); font-size: 13.5px; }
.kural .kaynak { font: 500 11.5px var(--mono); color: var(--yazi3); }
.arama-kutu { width: min(300px, 100%); }
.oneri-form { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 10px; align-items: end; padding: 8px 0; }

/* ---------- Gez (K91) ---------- */
.gez-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.gez-kart { display: grid; gap: 14px; scroll-margin-top: 90px; }
.gez-kart.hedef { border-color: var(--vurgu); }
.gez-bas { display: flex; gap: 14px; align-items: flex-start; }
.gez-isaret { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--cizgi2); color: var(--yazi2); }
.gez-isaret svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gez-bas h2 { font-size: 19px; letter-spacing: -.025em; }
.gez-bas p { margin: 3px 0 0; color: var(--yazi3); font-size: 13px; }
.gez-bas .cipler { margin-left: auto; justify-content: flex-end; }
.surum-kiyas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 10px; background: var(--zemin2); border: 1px solid var(--cizgi); }
.surum-kiyas > div { min-width: 0; }
.surum-kiyas .hud { font-size: 9.5px; }
.surum-kiyas code { display: block; margin-top: 4px; font: 600 12px var(--mono); color: var(--yazi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surum-kiyas .ok-ok { color: var(--yazi3); font: 700 14px var(--mono); }
.surum-kiyas.farkli { border-color: color-mix(in srgb, var(--uyari) 45%, transparent); }
.surum-kiyas.farkli .ok-ok { color: var(--uyari); }
.goz-dugmeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.goz-dugme { position: relative; overflow: hidden; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 8px 12px; border-radius: 11px; border: 1px solid var(--cizgi2); background: var(--yuzey); color: var(--yazi); text-align: left; text-decoration: none; cursor: pointer; font-weight: 700; font-size: 13.5px; transition: border-color .2s, transform .3s var(--e-cikis), background-color .2s; }
.goz-dugme:hover { border-color: var(--vurgu); transform: translateY(-1px); }
.goz-dugme:active { transform: scale(.975); transition-duration: .08s; }
.goz-dugme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--vurgu); }
.goz-dugme small { display: block; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--yazi3); margin-top: 2px; }
.goz-dugme .gd-ok { width: 16px; height: 16px; color: var(--yazi3); }
.goz-dugme[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; color: var(--yazi3); background: transparent; transform: none; }
.goz-dugme[aria-disabled="true"] svg { color: var(--yazi3); }
.goz-dugme.canli-d { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.goz-dugme.staging-d { border-color: color-mix(in srgb, var(--uyari) 40%, transparent); }
.gez-alt { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--yazi3); }
.gez-alt b { color: var(--yazi2); font-family: var(--mono); font-weight: 600; }
.sozlesme { font-size: 13.5px; color: var(--yazi2); }
.sozlesme ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.sozlesme code { font: 600 12px var(--mono); color: var(--yazi); }

/* ---------- Müşteriler (K91) ---------- */
.firma-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 18px; }
.firma { position: relative; padding-top: 26px; margin-top: 12px; cursor: pointer; transition: transform .35s var(--e-cikis), border-color .2s; color: var(--yazi); text-decoration: none; display: grid; gap: 12px; }
.firma::before { content: ""; position: absolute; left: -1px; top: -13px; width: 42%; height: 14px; border: 1px solid var(--cizgi); border-bottom: 0; border-radius: 10px 14px 0 0; background: var(--yuzey2); }
.firma:hover { transform: translateY(-3px); border-color: var(--cizgi2); }
.firma h2 { font-size: 22px; letter-spacing: -.03em; }
.firma-satir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.firma-satir div { padding: 8px 10px; border-radius: 9px; background: var(--zemin2); border: 1px solid var(--cizgi); min-width: 0; }
.firma-satir small { display: block; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--yazi3); }
.firma-satir b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klasor-bas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.klasor-izgara { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.kalan { margin-top: 10px; }
.kalan .cubuk i { background: var(--ok); }
.kalan.az .cubuk i { background: var(--uyari); } .kalan.cok-az .cubuk i { background: var(--hata); }
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.dl dt { color: var(--yazi3); font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.acil-kart { border-color: color-mix(in srgb, var(--hata) 35%, transparent); background: linear-gradient(180deg, var(--hata-zemin), transparent); }
.acil-kart h2 { color: var(--hata); }
.mudahale-form { display: grid; gap: 12px; }
.mudahale-form .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- kurulmadı ---------- */
.kurulmadi-sahne { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; align-items: center; }
.km-svg { width: 100%; max-width: 240px; }
.km-iz { fill: none; stroke: var(--cizgi2); stroke-width: 1.5; stroke-dasharray: 4 6; }
.km-p { fill: none; stroke: var(--vurgu); stroke-width: 3; stroke-linecap: round; }
.km-don { transform-origin: 100px 100px; }
.mo .km-don { animation: don 9s linear infinite; }
.km-dugum { fill: var(--yuzey); stroke: var(--soluk); stroke-width: 1.5; stroke-dasharray: 3 3; }
.km-ic { fill: none; stroke: var(--yazi3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan { padding: 12px 14px; border-left: 2px solid var(--vurgu); background: var(--vurgu-zemin); border-radius: 0 10px 10px 0; color: var(--yazi2); font-size: 14px; }
.adimlar { list-style: none; counter-reset: a; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.adimlar li { counter-increment: a; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 14px; color: var(--yazi2); }
.adimlar li::before { content: counter(a, decimal-leading-zero); font: 700 12px var(--mono); color: var(--vurgu); padding-top: 2px; }
.hayalet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.hayalet div { height: 74px; border: 1px dashed var(--cizgi2); border-radius: 10px; display: grid; place-items: center; font: 600 10.5px var(--mono); color: var(--yazi3); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 6px; }

/* ---------- sabah özeti ---------- */
.ozet-kart .ozet-rakam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cizgi); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.ozet-rakam div { background: var(--yuzey); padding: 10px; }
.ozet-rakam b { display: block; font: italic 400 32px/1 var(--serif); }
.ozet-rakam small { font: 600 9.5px var(--mono); letter-spacing: .1em; color: var(--yazi3); text-transform: uppercase; }
.ozet-cumle { margin: 0; color: var(--yazi2); font-size: 14px; }

/* ---------- palet, yardım, pencere, bildirimler, tost ---------- */
.palet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgba(3, 6, 14, .55); backdrop-filter: blur(4px); }
:root[data-theme="light"] .palet { background: rgba(22, 33, 62, .22); }
.palet-kutu { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--cizgi2); background: var(--yuzey); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7); overflow: hidden; }
.palet-giris { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); }
.palet-giris input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 17px; }
.palet-liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.palet-liste li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 9px; cursor: pointer; }
.palet-liste li svg { width: 18px; height: 18px; fill: none; stroke: var(--yazi3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.palet-liste li[aria-selected="true"] { background: var(--vurgu-zemin); box-shadow: inset 2px 0 0 var(--vurgu); }
.palet-liste li[aria-selected="true"] svg { stroke: var(--vurgu); }
.p-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-tur { font-size: 9.5px; }
.palet-dip { margin: 0; padding: 10px 16px; border-top: 1px solid var(--cizgi); color: var(--yazi3); font-size: 12px; }
.yardim-kutu, .pencere-kutu { padding: 22px; gap: 14px; overflow-y: auto; }
.yardim-liste { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; }
.yardim-liste dd { margin: 0; color: var(--yazi2); }
.pencere-kutu h2 { font-size: 22px; letter-spacing: -.03em; }
.pencere-kutu .acik { font-size: 14px; }
.bildirimler { position: fixed; z-index: 50; right: 16px; top: calc(var(--ust-y) + 8px); width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cizgi2); background: var(--yuzey); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.bil-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.bil-bas h2 { font-size: 16px; }
.tostlar { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.tost { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--cizgi2); background: var(--yuzey3); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7); font-size: 14px; }
.mo .tost { animation: tostGir .45s var(--e-cikis); }
.tost.gidiyor { animation: tostCik .3s var(--e-keskin) forwards; }

/* ---------- iskelet ---------- */
.iskelet-kap { display: grid; gap: 16px; }
.iskelet { position: relative; overflow: hidden; height: 152px; border-radius: var(--r-kart); background: var(--yuzey); border: 1px solid var(--cizgi); }
.iskelet.ib { height: 90px; background: transparent; border: 0; }
.iskelet.iy { height: 360px; }
.iskelet::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--vurgu-zemin), transparent); }
.mo .iskelet::after { animation: parilti 1.3s var(--e-akis) infinite; }

/* ---------- sayfa geçişleri (View Transitions) ---------- */
::view-transition-old(sahne) { animation: vtCik .18s var(--e-keskin) both; }
::view-transition-new(sahne) { animation: vtGir .38s var(--e-cikis) both; }
html[data-vt-yon="geri"]::view-transition-new(sahne) { animation-name: vtGirGeri; }
::view-transition-group(sayfa-baslik) { animation-duration: .42s; animation-timing-function: var(--e-cikis); }
html[data-vt-yon="tema"]::view-transition-old(root) { animation: none; }
html[data-vt-yon="tema"]::view-transition-new(root) { animation: temaPerde .6s var(--e-cikis); }

/* ---------- anahtar kareler ---------- */
@keyframes don { to { transform: rotate(360deg); } }
@keyframes ciz { to { stroke-dashoffset: 0; } }
@keyframes geriSay { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes akis { to { stroke-dashoffset: -36; } }
@keyframes nabiz { 0% { transform: scale(1); opacity: .65; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes nabizN { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes nabizK { 0% { transform: scale(.6); opacity: .8; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes blip { 0%, 60%, 100% { opacity: .15; transform: scale(.7); } 66% { opacity: 1; transform: scale(1.3); } 80% { opacity: .6; transform: scale(1); } }
@keyframes isik { from { transform: scale(.1); opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes titre { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } }
@keyframes parla { 0% { color: var(--vurgu); text-shadow: 0 0 18px var(--vurgu); } 100% { text-shadow: none; } }
@keyframes cik { to { opacity: 0; transform: translateX(24px); clip-path: inset(0 0 0 100%); } }
@keyframes belir { from { opacity: 0; } }
@keyframes salla { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes yukle { from { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: .6; } to { transform: scaleX(1); opacity: 0; } }
@keyframes dikkat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--uyari) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes tostGir { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes tostCik { to { opacity: 0; transform: translateX(30px); } }
@keyframes parilti { to { transform: translateX(100%); } }
@keyframes vtCik { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtGir { from { opacity: 0; transform: translateY(14px); } }
@keyframes vtGirGeri { from { opacity: 0; transform: translateY(-14px); } }
@keyframes temaPerde { from { clip-path: circle(0 at calc(100% - 140px) 32px); } to { clip-path: circle(150% at calc(100% - 140px) 32px); } }

/* ---------- hareket: azalt / az / düşük güç / gizli sekme / ekran dışı ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.hareket-yok *, .hareket-yok *::before, .hareket-yok *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
.hareket-az .k-paket, .az-guc .k-paket, .hareket-az .hd-nabiz, .az-guc .hd-nabiz, .hareket-az .hk-tarama, .az-guc .hk-tarama, .hareket-az .r-tarama, .az-guc .r-tarama, .hareket-az .kure::after, .az-guc .kure::after, .hareket-az .gh-don, .az-guc .gh-don, .hareket-az .km-don, .az-guc .km-don { animation: none !important; }
.hareket-az .k-paket2, .az-guc .k-paket2 { display: none; }
.sahne-durgun *, .ekran-disi *, .ekran-disi::before, .ekran-disi::after { animation-play-state: paused !important; }

/* ---------- duyarlı ---------- */
@media (max-width: 1360px) {
  .izgara > .k4.genel-yan { grid-column: span 5; } .izgara > .k8.genel-ana { grid-column: span 7; }
}
@media (max-width: 1180px) {
  .k2, .k3 { grid-column: span 6; } .k4, .k5, .k7, .k8 { grid-column: 1 / -1; } .k6 { grid-column: 1 / -1; }
  .izgara > .k4.genel-yan, .izgara > .k8.genel-ana { grid-column: 1 / -1; }
  .klasor-izgara > * { grid-column: 1 / -1 !important; }
  .halka-kart { grid-template-columns: 170px 1fr; }
}
@media (max-width: 900px) {
  :root { --ust-y: 56px; }
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .yan { display: none; }
  .ust { padding: 0 14px; gap: 8px; }
  .ust-ara { width: auto; flex: 1; }
  .ust-ara kbd, .saat { display: none; }
  .sahne { padding: 20px 16px 104px; }
  .alt { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); background: color-mix(in srgb, var(--zemin) 90%, transparent); backdrop-filter: blur(12px); }
  .alt a, .alt button { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; background: none; border-radius: 10px; color: var(--yazi3); text-decoration: none; font: 700 11px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
  .alt svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .alt a[aria-current="page"] { color: var(--vurgu); background: var(--vurgu-zemin); }
  .alt .m-sayi { position: absolute; top: 2px; right: 14%; }
  .giris { grid-template-columns: 1fr; }
  .giris-sahne { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--cizgi); padding: 24px; }
  .giris-yazi { left: 24px; bottom: 22px; }
  .giris-halka { width: 150px; }
  .radar { width: 520px; }
  .giris-kart { padding: 28px 20px 40px; }
  .kurulmadi-sahne { grid-template-columns: 1fr; }
  .km-svg { max-width: 150px; }
  .oneri-form { grid-template-columns: 1fr 1fr; }
  /* dokunma hedefleri ≥ 44 px (WCAG 2.5.5 / Apple HIG) */
  .ikon-dugme { width: 44px; height: 44px; }
  .dugme-kucuk, .dugme-sade, .h-uydu, .secim button { min-height: 44px; }
  .halka-lejant a { min-height: 44px; }
  .ust-ara { height: 44px; }
}
@media (max-width: 600px) {
  .k2, .k3 { grid-column: 1 / -1; }
  .izgara { gap: 12px; }
  .nabiz-izgara .sayi-kart { padding: 12px; }
  .sk-deger { font-size: 40px; } .sk-deger.uzun { font-size: 32px; }
  .sayfa-bas { margin-bottom: 16px; }
  .ust-ara span { font-size: 13px; }
  .canli span { display: none; }
  .onay { grid-template-columns: 38px minmax(0, 1fr); }
  .onay-ikon { width: 38px; height: 38px; }
  .onay-dugmeler { grid-column: 1 / -1; justify-content: flex-start; }
  .halka-kart { grid-template-columns: 1fr; justify-items: center; }
  .halka-lejant { width: 100%; }
  .goz-dugmeler { grid-template-columns: 1fr; }
  .firma-satir { grid-template-columns: 1fr 1fr; }
  .mudahale-form .ikili { grid-template-columns: 1fr; }
  .surum-kiyas { grid-template-columns: 1fr; } .surum-kiyas .ok-ok { transform: rotate(90deg); justify-self: start; }
  .s-oge { width: 100%; } .sla { width: 64px; }
  .gez-bas { flex-wrap: wrap; } .gez-bas .cipler { margin-left: 0; justify-content: flex-start; width: 100%; }
  .kural { grid-template-columns: 1fr; gap: 4px; }
  .hat-satir { grid-template-columns: minmax(0, 1.2fr) 1fr auto; }
  .oneri-form { grid-template-columns: 1fr; }
}
@media (min-width: 1900px) { .sahne { padding: 32px 40px 72px; } .izgara { gap: 20px; } }
@media print { .yan, .ust, .alt, .akis-yan { display: none !important; } .kabuk { display: block; } }