/* ============================================================
   GeoSaha — Tasarım sistemi ekleri
   Kaynak: docs/design-handoff/geosaha/styles-ek.css, birebir kopya (app/src/stiller/ekler.css ile aynı). Elle düzenlenmez; paket güncellenince yeniden kopyalanır.
   ============================================================ */

/* ---------- 0. Türetilmiş simgeler (iki tema) ---------- */
:root,[data-theme="light"]{--link:var(--accent-press);--link-hover:var(--accent-ink);--link-visited:color-mix(in oklch,var(--accent-ink) 55%,var(--text-2));--focus-ring:var(--accent);--sk-base:var(--surface-3);--sk-shine:var(--surface);--ekip-bg:color-mix(in oklch,var(--accent-soft) 65%,var(--surface));--ekip-border:color-mix(in oklch,var(--accent) 35%,var(--border))}
[data-theme="dark"]{--link:var(--accent);--link-hover:var(--accent-ink);--link-visited:color-mix(in oklch,var(--accent-ink) 60%,var(--text-2));--focus-ring:var(--accent);--sk-base:var(--surface-3);--sk-shine:var(--border-strong);--ekip-bg:color-mix(in oklch,var(--accent-soft) 70%,var(--surface));--ekip-border:color-mix(in oklch,var(--accent) 40%,var(--border))}
.input,.select{color-scheme:light}
[data-theme="dark"] .input,[data-theme="dark"] .select{color-scheme:dark}

/* ---------- 1. Klavye odak halkası (yalnızca klavyeyle gezinirken) ---------- */
:where(a,button,summary,[role="button"],[role="combobox"],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.input:focus-visible,.select:focus-visible{outline:none}

/* ---------- 2. Bağlantı (a) ---------- */
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 40%,transparent);transition:color .12s,text-decoration-color .12s}
a:visited{color:var(--link-visited)}
a:hover,a:visited:hover{color:var(--link-hover);text-decoration-color:currentColor}
a.link-plain,a.link-plain:visited{color:inherit;text-decoration:none}

/* ---------- 3. Kart içi başlık ölçeği ve paragraf ---------- */
.h2{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:19px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;line-height:1.15;color:var(--text)}
.h3{font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--text)}
.prose{font-size:14.5px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.prose p+p{margin-top:10px}
.prose .h2+p,.prose .h3+p{margin-top:6px}
.prose p+.h2{margin-top:22px}
.prose p+.h3{margin-top:16px}

/* ---------- 4. Düğme ekleri: tehlikeli, yumuşak tehlikeli, tam genişlik ---------- */
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:var(--shadow-sm)}
.btn-danger:hover{background:color-mix(in oklch,var(--danger) 84%,var(--text));border-color:color-mix(in oklch,var(--danger) 84%,var(--text))}
.btn-danger-soft{color:var(--danger);border-color:color-mix(in oklch,var(--danger) 40%,var(--border))}
.btn-danger-soft:hover{background:var(--danger-soft)}
.btn-block{width:100%;justify-content:center}

/* ---------- 5. Form alanı durumları (.field) ---------- */
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.label-opt{font-size:11.5px;color:var(--text-3);font-family:'IBM Plex Mono',monospace}
.field.req>.label::after,.field.req>.label-row>.label::after{content:" *";color:var(--danger);font-weight:700}
.field-msg{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;line-height:1.4;color:var(--text-3)}
.field-msg svg{flex:none;margin-top:1px}
.field.err .field-msg{color:var(--danger)}
.field.err .input,.field.err .select,.field.err .ms-ctl{border-color:var(--danger)}
.field.err .input:focus,.field.err .select:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.field.dis .label{color:var(--text-3)}
.input:disabled,.select:disabled{background:var(--surface-2);color:var(--text-3);border-color:var(--border);cursor:not-allowed;opacity:.75}
.input[readonly]:not(.auto){background:var(--surface-2);border-color:transparent}
.input[readonly]:not(.auto):focus{border-color:var(--border-strong);box-shadow:none}

/* ---------- 6. İkonlu girdi sarmalayıcısı (arama, parola, tarih) ---------- */
.inp{position:relative;display:flex;align-items:center;width:100%}
.inp>.inp-ic{position:absolute;left:12px;color:var(--text-3);pointer-events:none}
.inp>.inp-ic.r{left:auto;right:12px}
.inp.l>.input{padding-left:38px}
.inp.r>.input{padding-right:42px}
.inp-btn{position:absolute;right:4px;width:34px;height:34px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.inp-btn:hover{background:var(--surface-3);color:var(--text)}

/* ---------- 7. Tarih / saat / tarih-saat ---------- */
.input.dt{position:relative;font-family:'IBM Plex Mono',monospace;font-size:14.5px}
.input.dt::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:42px;height:100%;opacity:0;cursor:pointer}
.input.dt::-webkit-datetime-edit-text{color:var(--text-3);padding:0 2px}
@supports (-moz-appearance:none){.dt-cal>.inp-ic{display:none}}

/* ---------- 8. Onay kutusu ve radyo ---------- */
.chk{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14.5px;line-height:20px;color:var(--text);user-select:none;position:relative}
.chk>input{position:absolute;left:0;top:0;width:20px;height:20px;margin:0;opacity:0;cursor:pointer}
.chk-box{flex:none;width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border-strong);background:var(--inset);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .12s,border-color .12s}
.chk-box svg{opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s}
.chk>input:checked+.chk-box,.chk>input:indeterminate+.chk-box{background:var(--accent);border-color:var(--accent)}
.chk>input:checked+.chk-box svg,.chk>input:indeterminate+.chk-box svg{opacity:1;transform:none}
.chk.radio .chk-box{border-radius:50%}
.chk.radio .chk-box::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .12s}
.chk.radio>input:checked+.chk-box::after{transform:scale(1)}
.chk:hover>input:not(:disabled)+.chk-box{border-color:var(--accent)}
.chk>input:focus-visible+.chk-box{outline:2px solid var(--focus-ring);outline-offset:2px}
.chk>input:disabled~*{opacity:.45}
.chk:has(>input:disabled){cursor:not-allowed}
.chk.err .chk-box{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.chk-txt{display:flex;flex-direction:column}
.chk-sub{font-size:12.5px;line-height:1.4;color:var(--text-3)}

/* ---------- 9. Anahtar (switch) ---------- */
.sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px;color:var(--text);position:relative;user-select:none}
.sw>input{position:absolute;left:0;top:50%;width:38px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}
.sw-track{flex:none;width:38px;height:22px;border-radius:11px;background:var(--border-strong);position:relative;transition:background .15s}
.sw-track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.sw>input:checked+.sw-track{background:var(--accent)}
.sw>input:checked+.sw-track::after{transform:translateX(16px)}
.sw>input:focus-visible+.sw-track{outline:2px solid var(--focus-ring);outline-offset:2px}
.sw>input:disabled~*{opacity:.45}
.sw:has(>input:disabled){cursor:not-allowed}
.sw.err .sw-track{box-shadow:0 0 0 2px var(--danger)}

/* ---------- 10. Çip ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:5px;background:var(--surface-3);color:var(--text);font-size:13px;font-weight:500;max-width:100%;white-space:nowrap}
.chip>span{overflow:hidden;text-overflow:ellipsis}
.chip.no-x{padding-right:10px}
.chip.accent{background:var(--accent-soft);color:var(--accent-ink)}
.chip-x{flex:none;width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.chip-x:hover{background:var(--border);color:var(--text)}

/* ---------- 11. Çoklu seçim ---------- */
.ms{position:relative}
.ms-ctl{min-height:42px;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 38px 6px 7px;background:var(--inset);border:1px solid var(--border);border-radius:6px;cursor:pointer;position:relative;transition:border-color .12s,box-shadow .12s}
.ms-ctl:hover{border-color:var(--border-strong)}
.ms.open .ms-ctl{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}
.ms.dis .ms-ctl{background:var(--surface-2);cursor:not-allowed;opacity:.75}
.ms-ph{color:var(--text-3);font-size:15px;padding-left:6px}
.ms-car{position:absolute;right:12px;top:50%;margin-top:-8px;color:var(--text-3)}
.ms-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;box-shadow:var(--shadow-lg);overflow:hidden}
.ms-search{padding:8px;border-bottom:1px solid var(--border)}
.ms-list{max-height:232px;overflow-y:auto;padding:4px}
.ms-opt{border-radius:5px}
.ms-opt:hover{background:var(--surface-2)}
.ms-opt .chk{display:flex;width:100%;padding:8px 10px}
.ms-opt .chk>input{left:10px;top:8px}
.ms-bos{padding:18px 10px;text-align:center;font-size:13px;color:var(--text-3)}
.ms-foot{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-top:1px solid var(--border);background:var(--surface-2)}
.ms-say{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-2);margin-right:auto;text-transform:uppercase;letter-spacing:.05em}

/* ---------- 12. Dosya ekleme ---------- */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 20px;text-align:center;border:1.5px dashed var(--border-strong);border-radius:8px;background:var(--surface-2);color:var(--text-2);cursor:pointer;transition:border-color .12s,background .12s}
.drop:hover{border-color:var(--accent);background:var(--surface)}
.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.drop.dis{opacity:.5;cursor:not-allowed}
.drop-ic{width:44px;height:44px;border-radius:10px;background:var(--surface-3);color:var(--text-2);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.drop.over .drop-ic{background:var(--accent);color:#fff}
.drop-t{font-size:14px;font-weight:600;color:var(--text)}
.drop-t b{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.drop-s{font-size:12px;color:var(--text-3);font-family:'IBM Plex Mono',monospace}
.files{display:flex;flex-direction:column;gap:8px}
.file{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.file.err{border-color:color-mix(in oklch,var(--danger) 50%,var(--border));background:var(--danger-soft)}
.file-ic{flex:none;width:38px;height:38px;border-radius:8px;background:var(--surface-3);color:var(--text-2);display:flex;align-items:center;justify-content:center}
.file.err .file-ic{background:var(--surface);color:var(--danger)}
.file-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.file-ad{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap}
.file.err .file-meta{color:var(--danger)}
.file .bar{height:5px}
.file-acts{flex:none;display:flex;gap:2px}
.play{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .12s}
.play:hover{background:var(--accent-press)}

/* ---------- 13. Sayfalama çubuğu (tablo kartının altında) ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:10px 14px;border-top:1px solid var(--border)}
.pager-per{display:flex;align-items:center;gap:8px}
.pager .select{height:32px;width:auto;padding-left:10px;font-size:13px;font-family:'IBM Plex Mono',monospace}
.pager-r{display:flex;align-items:center;gap:6px;margin-left:auto}
.pager-range{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text);margin-right:6px;white-space:nowrap}
.pager-range span{color:var(--text-3)}

/* ---------- 14. Yükleniyor: iskelet + sayfa ortası gösterge ---------- */
.sk{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,var(--sk-base) 0 35%,var(--sk-shine) 50%,var(--sk-base) 65% 100%);background-size:300% 100%;animation:skKay 1.4s ease-in-out infinite}
@keyframes skKay{from{background-position:100% 0}to{background-position:0 0}}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 20px;color:var(--text-3)}
.loading-ring{width:36px;height:36px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--accent);animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.sk,.loading-ring{animation-duration:3s}}

/* ---------- 15. Tablo ekleri: seçim, işlem sütunu, toplu işlem çubuğu ---------- */
.tbl td.mono,.tbl td.nw{white-space:nowrap}
.tbl .sel{width:44px;padding-right:0}
.tbl .act{width:52px;padding-left:0;text-align:right}
.tbl tbody tr.secili{background:color-mix(in oklch,var(--accent-soft) 55%,transparent)}
.bulk{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px 8px 14px;background:var(--accent-soft);border-bottom:1px solid var(--ekip-border)}
.bulk-n{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);margin-right:auto}

/* ---------- 16. Satır işlem menüsü ---------- */
.menu{position:fixed;z-index:180;min-width:188px;padding:5px;background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;box-shadow:var(--shadow-lg);animation:menuIn .14s ease-out}
.menu.statik{position:relative;z-index:auto;animation:none;display:inline-block}
@keyframes menuIn{from{transform:translateY(-4px)}}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:5px;font-size:13.5px;color:var(--text);text-align:left;white-space:nowrap}
.menu-item svg{color:var(--text-3)}
.menu-item:hover,.menu-item:focus-visible{background:var(--surface-2);outline:none}
.menu-item.danger,.menu-item.danger svg{color:var(--danger)}
.menu-item.danger:hover,.menu-item.danger:focus-visible{background:var(--danger-soft)}
.menu-item:disabled{opacity:.45;cursor:not-allowed}
.menu-sep{height:1px;background:var(--border);margin:5px 2px}

/* ---------- 17. Onay diyaloğu (Modal içinde) ---------- */
.onay{display:flex;gap:16px;align-items:flex-start}
.onay-ic{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.onay-ic.danger{background:var(--danger-soft);color:var(--danger)}
.onay-ic.info{background:var(--info-soft);color:var(--info)}
.modal.statik{animation:none;max-height:none;box-shadow:var(--shadow)}
@media (max-width:520px){.modal-bg{padding:12px;align-items:flex-end}.onay{flex-direction:column;gap:12px}}

/* ---------- 18. Bilgi şeridi (.serit) ---------- */
.serit{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border:1px solid;font-size:13.5px;line-height:1.5;color:var(--text)}
.serit>svg{flex:none;margin-top:1px}
.serit-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.serit-t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.serit-x{flex:none;width:28px;height:28px;margin:-4px -6px -4px 0;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.serit-x:hover{background:color-mix(in oklch,var(--text) 8%,transparent);color:var(--text)}
.serit-info{background:var(--info-soft);border-color:color-mix(in oklch,var(--info) 35%,transparent)}
.serit-ok{background:var(--ok-soft);border-color:color-mix(in oklch,var(--ok) 35%,transparent)}
.serit-warn{background:var(--warn-soft);border-color:color-mix(in oklch,var(--warn) 35%,transparent)}
.serit-danger{background:var(--danger-soft);border-color:color-mix(in oklch,var(--danger) 35%,transparent)}
.serit-mute{background:var(--surface-2);border-color:var(--border)}
.serit-info>svg,.serit-info .serit-t{color:var(--info)}
.serit-ok>svg,.serit-ok .serit-t{color:var(--ok)}
.serit-warn>svg,.serit-warn .serit-t{color:var(--warn)}
.serit-danger>svg,.serit-danger .serit-t{color:var(--danger)}
.serit-mute>svg{color:var(--text-3)}
.serit-mute .serit-t{color:var(--text-2)}

/* ---------- 19. Bildirim (toast) ekleri: info, başlık, kapatma, yığın ---------- */
.toast.info{border-left-color:var(--info)}
.toast{align-items:flex-start}
.toast>svg{margin-top:1px}
.toast-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.45}
.toast-t{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.toast-x{flex:none;width:26px;height:26px;margin:-3px -7px -3px 0;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.toast-x:hover{background:var(--surface-3);color:var(--text)}
.toast.statik{animation:none;min-width:0;max-width:none;box-shadow:var(--shadow)}
.toast-stack{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast-stack .toast{pointer-events:auto;animation:toastKay .26s cubic-bezier(.2,.7,.3,1)}
.toast-stack .toast.out{animation:toastCik .2s ease-in forwards}
@keyframes toastKay{from{transform:translateX(18px)}}
@keyframes toastCik{to{transform:translateX(24px);opacity:0}}
@media (max-width:600px){.toast-stack{left:12px;right:12px;bottom:12px;align-items:stretch}.toast-stack .toast{min-width:0;max-width:none}}

/* ---------- 20. Tam sayfa hata / boş ekranları ---------- */
.durum{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 24px;min-height:380px;text-align:center;overflow:hidden}
.durum::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 62%);mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 62%);opacity:.6;pointer-events:none}
.durum>*{position:relative}
.durum.kucuk{min-height:300px;padding:36px 20px}
.durum-ic{width:68px;height:68px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--text-2);margin-bottom:4px}
.durum-ic.warn{background:var(--warn-soft);color:var(--warn)}
.durum-ic.danger{background:var(--danger-soft);color:var(--danger)}
.durum-ic.info{background:var(--info-soft);color:var(--info)}
.durum-kod{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.durum-t{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;line-height:1.1;color:var(--text)}
.durum-p{max-width:380px;font-size:14.5px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.durum .btn{margin-top:6px}

/* ---------- 21. Detay yerleşimi (sol içerik + sağ 320px panel) ---------- */
.detay-kap{container-type:inline-size}
.detay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.detay-ana,.detay-yan{display:flex;flex-direction:column;gap:14px;min-width:0}
.detay-yan{position:sticky;top:14px}
@container (max-width:860px){.detay{grid-template-columns:minmax(0,1fr)}.detay-yan{position:static}.detay.yan-ust .detay-yan{order:-1}}
.kv{display:flex;flex-direction:column}
.kv-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.kv-row:last-child{border-bottom:none}
.kv-k{flex:none;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.kv-v{min-width:0;text-align:right;color:var(--text);overflow-wrap:anywhere}
.kv-v.mono{font-family:'IBM Plex Mono',monospace;font-size:13px}

/* ---------- 22. Yorum akışı ---------- */
.akis{list-style:none;display:flex;flex-direction:column;gap:14px}
.yorum{display:flex;gap:12px;align-items:flex-start}
.yorum-kart{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.yorum.ekip .yorum-kart{background:var(--ekip-bg);border-color:var(--ekip-border)}
.yorum-bas{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.yorum-ad{font-size:13.5px;font-weight:600}
.yorum-rol{font-size:12px;color:var(--text-3)}
.yorum-zaman{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.yorum-metin{font-size:14.5px;line-height:1.55;color:var(--text);white-space:pre-wrap;text-wrap:pretty}
.yorum-ekler{display:flex;flex-wrap:wrap;gap:8px}
.ek,a.ek,a.ek:visited{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);font-size:12.5px;color:var(--text);text-decoration:none;max-width:100%}
a.ek:hover{border-color:var(--border-strong);color:var(--text)}
.ek svg{color:var(--text-3);flex:none}
.ek .mono{font-size:11px;color:var(--text-3)}
.yorum.sistem{align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:13px;font-style:italic;color:var(--text-3)}
.yorum-sis{flex:none;width:36px;display:flex;justify-content:center}
.yorum-sis-ic{width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--text-3);display:flex;align-items:center;justify-content:center}
.durum-gecis{display:inline-flex;align-items:center;gap:6px;font-style:normal}
.yaz{container-type:inline-size;border:1px solid var(--border);border-radius:8px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.yaz:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.yaz textarea{display:block;width:100%;min-height:84px;padding:12px 14px;border:none;background:transparent;resize:vertical;font-size:14.5px;line-height:1.5;outline:none}
.yaz-ekler{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.yaz-alt{display:flex;align-items:center;gap:8px;padding:8px;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 8px 8px}
.yaz-ipucu{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-3);margin-left:auto}
@container (max-width:480px){.yaz-ipucu{display:none}}

/* ---------- 23. Logo kilidi ---------- */
.gs-mono{display:block;flex:none}
.gs-lockup{display:inline-flex;align-items:center;gap:calc(var(--gs-s) * .32)}
.gs-lockup-t{display:flex;flex-direction:column;gap:calc(var(--gs-s) * .06);line-height:1;white-space:nowrap}
.gs-word{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:calc(var(--gs-s) * .5);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.gs-sub{font-family:'IBM Plex Mono',monospace;font-size:max(9px,calc(var(--gs-s) * .24));font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gs-sub)}

/* ---------- 24. Duyarlı kabuk (≤760px: ray gizli, alt sekme + çekmece) ---------- */
.kabuk{container-type:inline-size;position:relative;display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg);overflow:hidden}
.kabuk-ust{flex:none;height:60px;display:flex;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--border);z-index:5}
.kabuk-logo{flex:none;width:232px;display:flex;align-items:center;padding:0 16px;border-right:1px solid var(--border)}
.kabuk-bar{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 14px 0 20px}
.kabuk-yol{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.kabuk-baslik{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:18px;font-weight:600;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kabuk-ara{width:220px;flex:none}
.kabuk-nokta{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.kabuk-kul{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 5px;border:1px solid var(--border-strong);border-radius:7px;background:var(--surface)}
.kabuk-kul:hover{background:var(--surface-3)}
.kabuk-kul-ad{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.kabuk-govde{flex:1;min-height:0;display:flex}
.kabuk-ray{flex:none;width:232px;padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border)}
.kabuk-icerik{flex:1;min-width:0;overflow-y:auto;padding:24px 28px}
.kabuk .kabuk-alt{display:none}
.kabuk .tel-only{display:none}
.kabuk-yol .kicker{white-space:nowrap;flex:none}
.nav-i{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 12px;border-radius:7px;color:var(--text-2);font-size:13.5px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;text-align:left;transition:background .12s,color .12s}
.nav-i:hover{background:var(--surface-3)}
.nav-i.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-i.on::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)}
.nav-i svg{flex:none}
.nav-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.alt-sekme{flex:none;display:flex;padding:6px 4px;background:var(--surface);border-top:1px solid var(--border)}
.alt-sekme-i{position:relative;flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:8px;color:var(--text-3)}
.alt-sekme-i.on{color:var(--accent)}
.alt-sekme-i span{max-width:100%;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alt-sekme-i .nokta{position:absolute;top:6px;left:calc(50% + 6px);width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.cekmece-bg{position:absolute;inset:0;z-index:60;background:var(--overlay);animation:fade .18s}
.cekmece{position:absolute;top:0;bottom:0;left:0;z-index:61;width:min(300px,86%);display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);box-shadow:var(--shadow-lg);animation:cekmeceIn .24s cubic-bezier(.2,.7,.3,1)}
@keyframes cekmeceIn{from{transform:translateX(-100%)}}
.cekmece-bas{flex:none;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;border-bottom:1px solid var(--border)}
.cekmece-gov{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:2px}
.cekmece-alt{flex:none;padding:10px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border)}
@container (max-width:760px){
  .kabuk-logo,.kabuk-ray,.kabuk .masa-only{display:none}
  .kabuk .tel-only{display:flex}
  .kabuk-ust{height:56px}
  .kabuk-bar{gap:2px;padding:0 6px 0 12px}
  .kabuk-yol{margin-left:8px}
  .kabuk-baslik{font-size:17px}
  .kabuk-kul{border-color:transparent;padding:0 5px;background:transparent}
  .kabuk-icerik{padding:16px 14px}
  .kabuk .kabuk-alt{display:flex}
}
@container (max-width:1000px){
  .kabuk-yol .kicker,.kabuk-yol>svg{display:none}
  .kabuk-ara{width:180px}
}

/* ---------- 25. Duyarlı tablo: kart listesi (≤640px) ve yatay kaydırma ---------- */
.tbl-kap{container-type:inline-size}
@container (max-width:640px){
  .tbl.kartlas thead{display:none}
  .tbl.kartlas,.tbl.kartlas tbody{display:block}
  .tbl.kartlas tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--border)}
  .tbl.kartlas td{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;border:none;min-width:0}
  .tbl.kartlas td[data-k]::before{content:attr(data-k);font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
  .tbl.kartlas td.kt{order:-1;grid-column:1/-1;padding-right:40px;font-size:15px;font-weight:600}
  .tbl.kartlas td.sel{display:none}
  .tbl.kartlas td.act{position:absolute;top:8px;right:8px;width:auto}
  .tbl.kartlas td.num{text-align:left}
  .kaydir-ipucu{display:flex}
}
.tbl-kaydir{overflow-x:auto}
.tbl.yapis{min-width:640px}
.tbl.yapis th:first-child,.tbl.yapis td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--border)}
.tbl.yapis th:first-child{background:var(--surface-2)}
.tbl.yapis tbody tr:hover td:first-child{background:var(--surface-2)}
.kaydir-ipucu{display:none;align-items:center;gap:6px;padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border)}

/* ---------- 26. Süzgeç kartı (≤640px: katlanır) ---------- */
.suzgec{container-type:inline-size;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-sm)}
.suzgec-bas{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--border);color:var(--text-2)}
.suzgec-tgl{display:none}
.suzgec-govde{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:16px}
.suzgec-alt{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
@container (max-width:640px){
  .suzgec-bas{cursor:pointer}
  .suzgec-tgl{display:inline-flex}
  .suzgec:not(.acik) .suzgec-bas{border-bottom-color:transparent}
  .suzgec:not(.acik) .suzgec-govde{display:none}
  .suzgec-govde{grid-template-columns:minmax(0,1fr)}
  .suzgec-alt .btn{flex:1;justify-content:center}
}