/* ------------------------------------------------------------------------------------------
   DWG OfficeZip — kabuk stili (v4)
   Token'lar: tema (body[data-theme]) · --fs yazı ölçeği · --tile karo boyu · güvenli alanlar
   ------------------------------------------------------------------------------------------ */
:root {
  --bg: #161c25; --bar: #1f2a37; --fg: #e6eaf0; --muted: #94a3b8; --accent: #f5b342; --accent-fg: #1a1a1a;
  --panel: #1b2430; --cad-hi: #46cdf2; --cad-dim: #9bb8d2; --line: #2c3a4b; --btn: #2a3646; --btn-on: #3b4d63; --danger: #ff453a; --ok: #30d158;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
  /* --cmd-h: komut çubuğunun gerçek yüksekliği; editor.syncCmd onu #viewport'a yazar ve
     ResizeObserver tazeler. Buradaki değer YALNIZ ilk karedeki yedektir (yoğun boş çubuk). */
  --cmd-h: 29px;
  --fs: 1; --tile: 58px; --tb-h: 56px; --radius: 10px; --shadow: 0 6px 24px rgba(0,0,0,.45);
  /* Paket kimlik renkleri: kartın şeridi, rozeti ve onay imleri bunu alır. Vurgu renginden
     AYRI tutulur, çünkü üç paket yan yana durduğunda birbirinden ayrılmaları gerekir. */
  --t-adfree: #4aa3df; --t-premium: #f5b342; --t-super: #a97bf0; --t-ink: #10151c;
  /* Satın alma çağrısı (.btn.cta): sıcak amber degrade + koyu yazı; tema başına yeniden tanımlanır, karşıtlık ≥ 4.5:1 */
  --cta-a: #ffc85a; --cta-b: #f59e0b; --cta-ink: #1c1303; --cta-shadow: 0 6px 18px -6px rgba(245,158,11,.55);
}
/* tema token'ları: tuval temasıyla uyumlu arayüz renkleri */
body[data-theme="light"], .light { --cad-hi: #0a7ea4; --cad-dim: #5b7a93; --bg: #ffffff; --bar: #f1f3f6; --fg: #1a2230; --muted: #5b6776; --panel: #ffffff; --line: #d6dbe2; --btn: #e3e7ed; --btn-on: #cfd6df; --shadow: 0 6px 24px rgba(0,0,0,.18);  --t-adfree: #1d7fc0; --t-premium: #9a6208; --t-super: #7d4fd1; --t-ink: #ffffff;
  --cta-a: #ffc445; --cta-b: #f28c00; --cta-shadow: 0 6px 16px -6px rgba(200,110,0,.5); }
body[data-theme="blueprint"] { --cad-hi: #7fe3ff; --cad-dim: #a9c6ee; --bg: #0b2a5b; --bar: #0e3268; --fg: #dfe9ff; --muted: #9db4dc; --panel: #10366f; --line: #2a5aa0; --btn: #1a4685; --btn-on: #2a5aa0; --accent: #ffd166;  --t-adfree: #7fc4ff; --t-premium: #ffd166; --t-super: #c9a7ff; }
body[data-theme="sepia"] { --cad-hi: #b3541e; --cad-dim: #7a6748; --bg: #f3e9d2; --bar: #eadfc4; --fg: #3a2a14; --muted: #7a6748; --panel: #f6efdd; --line: #d9c9a5; --btn: #e6d9b8; --btn-on: #d9c9a5; --accent: #b3541e; --accent-fg: #fff; --shadow: 0 6px 24px rgba(60,40,10,.2);  --t-adfree: #2f6f9f; --t-premium: #b3541e; --t-super: #7b4ea8; --t-ink: #ffffff;
  --cta-a: #f5b545; --cta-b: #e2800c; --cta-shadow: 0 6px 16px -6px rgba(150,80,10,.45); }
body[data-theme="hicontrast"] { --cad-hi: #0033cc; --cad-dim: #000000; --bg: #ffffff; --bar: #ffffff; --fg: #000000; --muted: #333333; --panel: #ffffff; --line: #000000; --btn: #f0f0f0; --btn-on: #d0d0d0; --accent: #0033cc; --accent-fg: #fff; --shadow: 0 0 0 2px #000;  --t-adfree: #0033cc; --t-premium: #8a4b00; --t-super: #5b1a8a; --t-ink: #ffffff;
  --cta-a: #ffd21f; --cta-b: #ffb000; --cta-ink: #000000; --cta-shadow: 0 0 0 2px #000; }
body.contrast { --line: #8fa3bb; --muted: #c5d0dc; }
body.contrast.light, body.contrast[data-theme="light"], body.contrast[data-theme="sepia"] { --line: #3a4a5c; --muted: #2c3a4b; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
/* Uygulama kabuğu metin gibi seçilmez (v8.9.16): Mac'te (iPad uygulaması) fareyle sürükleme ya da Düzen › Tümünü seç sayfayı
   seçip tuvalin üstüne MAVİ seçim örtüsü çekiyordu; Android'de uzun basış da aynı yoldan seçim açabilir. Yazı alanları ve
   belge görüntüleyici (kopyalanacak metin) seçilebilir kalır. */
#app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#app input, #app textarea, #app [contenteditable], #app [contenteditable] *, #app .docview { -webkit-user-select: text; user-select: text; }   /* .docview'in içi bunu MİRAS alır: alt öğeye yazılmaz, yoksa Word / Excel düzenleyicinin kendi user-select kuralları (sayfa kesmesi, içindekiler, formül çubuğu) ezilir */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font: calc(14px * var(--fs))/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { transition: none !important; animation-duration: .001s !important; }
/* simgeler dolgulu piktogramdır: fill currentColor; çizgi gereken parçalar sembol içinde satır içi stroke taşır */
svg.ic { width: 22px; height: 22px; fill: currentColor; stroke: none; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.btn svg.ic, .menu svg.ic { width: 20px; height: 20px; }
.btn.icon svg.ic { width: 24px; height: 24px; }

/* --- yerleşim ızgarası: dikeyde şerit altta; yatayda (alçak ekran) şerit sağda ray --- */
#app { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "top" "tabs" "main" "tb" "st"; --fs: 1; }
#topbar { grid-area: top; } #layoutTabs { grid-area: tabs; } #main { grid-area: main; } #toolbar { grid-area: tb; } #statusbar { grid-area: st; }

#topbar { display: flex; align-items: center; gap: 6px; padding: calc(6px + var(--safe-top)) calc(8px + var(--safe-right)) 6px calc(8px + var(--safe-left)); background: var(--bar); border-bottom: 1px solid var(--line); min-height: 48px; }
.filewrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.filename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-size: calc(13px * var(--fs)); }
.filesub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: calc(11px * var(--fs)); }
.filesub:empty { display: none; }
.btn { border: 0; border-radius: var(--radius); background: var(--btn); color: var(--fg); padding: 8px 10px; font-size: calc(15px * var(--fs)); line-height: 1; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px; }   /* min-width: kısa etiketli düğme ("Git", "All") de 40 px hedef */
.btn:active { filter: brightness(1.25); }
.btn.primary { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn.primary.big { font-size: calc(17px * var(--fs)); padding: 14px 20px; margin: 14px 0 10px; }
.btn.icon { width: 40px; height: 40px; padding: 0; font-size: 18px; }
.btn.icon.active { outline: 2px solid var(--accent); }
.btn.small { font-size: calc(12px * var(--fs)); padding: 6px 10px; min-height: 40px; }
.btn.accent { background: var(--accent); color: var(--accent-fg); }
.btn.close { background: transparent; }
.btn:disabled { opacity: .4; }
button:disabled { cursor: default; }
/* Klavye odağı (v8.9.9): yalnız klavyeyle gezilince görünen, her temada aynı vurgu halkası (tarayıcının ince mavi
   halkası koyu zeminde seçilmiyordu). Kaydırılan şeritlerin içindeki düğmelerde halka içe çizilir, kap kesmesin. */
:where(button, [role="button"], a[href], select, summary, input[type="checkbox"], input[type="radio"]):where(:focus-visible:not(#docView *)) { outline: 2px solid var(--accent); outline-offset: 2px; }   /* :where → özgüllük 0: bileşenin kendi odak kuralı varsa o kazanır */
.tb-row button:focus-visible, .tb-tabs button:focus-visible, .st-quick button:focus-visible, .menu button:focus-visible, .home-nav button:focus-visible,
.open-panel button:focus-visible, .panel-body button:focus-visible, #layerList button:focus-visible { outline-offset: -2px; }
.tabs { display: flex; gap: 6px; padding: 4px 8px; overflow-x: auto; background: var(--bar); border-bottom: 1px solid var(--line); }
.tabs button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 20px; padding: 6px 12px; font-size: calc(12px * var(--fs)); white-space: nowrap; min-height: 40px; }
.tabs button.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
#main { min-height: 0; display: flex; }
#viewport { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; touch-action: none; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ov { pointer-events: none; }
.side { flex: 0 0 400px; border-left: 1px solid var(--line); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.side-tabs { display: flex; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.side-tabs button { flex: 1 1 0; border: 0; background: transparent; color: var(--muted); padding: 10px; font-weight: 600; min-height: 44px; border-bottom: 2px solid transparent; font-size: calc(13px * var(--fs)); }
.side-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.fab { position: absolute; right: 12px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 14px rgba(0,0,0,.4); z-index: 5; color: var(--fg); }
.fab.on { outline: 2px solid var(--ok); }
.hud { z-index: 6; }

/* --- durum çubuğu --- */
#statusbar { display: flex; align-items: center; gap: 8px; padding: 2px calc(8px + var(--safe-right)) calc(2px + var(--safe-bottom)) calc(8px + var(--safe-left)); background: var(--bar); border-top: 1px solid var(--line);
  font-size: calc(12px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; min-height: 44px; }
.st-quick { display: flex; gap: 2px; flex: 0 0 auto; }
.st-quick button { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; }   /* flex: 0 0 auto — şerit daralınca düğmeler İNCELMEZ, kayar (dokunma hedefi 40 px'in altına inmez) */
.st-quick button svg.ic { width: 20px; height: 20px; }
.st-quick button.on { color: var(--accent); background: var(--btn); }
.st-quick button { position: relative; }
.st-quick button:disabled { opacity: .4; }
.st-quick button .st-ct { position: absolute; top: 3px; right: 3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: var(--accent-fg); font-size: 9px; line-height: 14px; font-weight: 700; text-align: center; font-style: normal; }
body.compact-status .st-quick { display: none; }
#stCoord { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; min-width: 92px; line-height: 40px; cursor: copy; }   /* line-height: kopyalama dokunuşunun hedefi çubuk yüksekliğinde (40 px), yalnız yazı satırı değil */
.st-chip { padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); background: transparent; font: inherit; flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; }
span.st-chip { min-height: 26px; }
button.st-chip { cursor: pointer; }
button.st-chip:empty { display: none; }
/*
 * BİLGİ ÇİPLERİ KISALMAZ. Eskiden kip çipi ile varlık sayacı esnekti (flex: 0 1 auto): çubuk
 * dolunca "3B · Paralel" kırpılıp "3B" kalıyor, sayaç "2917" yerine "291" yazıyordu — yarım
 * yazılmış bir bilgi, hiç yazılmamış bilgiden kötüdür. Artık çipler ya tam görünür ya da
 * yerleşim geçişinde (statusFit) bütünüyle düşer; esneyen tek öğe koordinattır.
 */
.st-mode { color: var(--accent); border-color: var(--accent); flex: 0 0 auto; max-width: 48%; display: block; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stGps { color: var(--ok); }
#stCount { flex: 0 0 auto; }
/* Yerleşim geçişleri: önce sıkışık kip, sonra düğme şeridinin kayması, en son bilgi düşmesi */
#statusbar .st-squeeze { display: none !important; }
/* Sıkışık kip yalnız BOŞLUKLARI alır: dokunma hedefi (40 px) hiçbir zaman küçültülmez */
body.st-tight #statusbar { gap: 5px; padding-left: calc(5px + var(--safe-left)); padding-right: calc(5px + var(--safe-right)); }   /* yatayda çentik / köşe yuvarlaması altında düğme kalmasın */
body.st-tight .st-quick { gap: 0; }
body.st-tight .st-chip { padding: 0 7px; }
body.st-tight #stCoord { min-width: 76px; }
.st-quick.st-scroll { flex: 0 1 auto; min-width: 72px; max-width: 42%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent); }
.st-quick.st-scroll::-webkit-scrollbar { display: none; }
/*
 * İKİ KATLI DURUM ÇUBUĞU (v8.9.10, kullanıcı isteği: "çizgi kalınlığı, object snap, pan tuşları gizli kalmış; koordinat ve
 * ölçek yazılarını bir üste çok ince koy"). Tek satıra sığmayan dar ekranda bilgi öğeleri (#stInfo) düğmelerin üstünde
 * 24 px'lik ince bir satır olur; düğme şeridi çubuğun tam genişliğini alır ve dokuz düğmenin hepsi görünür. Düğmeler
 * 40 px genişliğin altına ancak ekran 360 px'ten darsa iner (flex küçülmesi, en az 34 px). Bilgi satırının denetimleri
 * (ölçek çipi, koordinat) 24 px yüksekliktedir — komut çubuğunun yoğun kipiyle aynı gerekçe (WCAG 2.2 AA 24 px tabanı);
 * genişlik 40 px'in altına inmez.
 */
.st-info { display: contents; }
body.st-two #statusbar { flex-direction: column; align-items: stretch; gap: 0; padding-top: 0; }
body.st-two .st-info { order: 1; display: flex; align-items: center; gap: 6px; height: 24px; min-width: 0; overflow: hidden; font-size: calc(11px * var(--fs)); }
body.st-two .st-quick { order: 2; width: 100%; justify-content: space-between; gap: 0; }
body.st-two .st-quick button { flex: 0 1 40px; min-width: 34px; }
body.st-two #stCoord { line-height: 24px; min-width: 60px; }
body.st-two .st-chip { min-height: 20px; padding: 0 8px; border-radius: 10px; }
body.st-two button.st-chip { min-height: 24px; min-width: 40px; justify-content: center; }
body.st-two .st-mode { line-height: 18px; }
/*
 * 3B'de DURUM ÇUBUĞU. Izgara, çizgi kalınlığı, yazı ve 2B nesne yakalama anahtarları üç boyutta
 * anlamsızdır; 2B imleç koordinatı da öyle (3B'de imleç yoktur, dokunulan nokta vardır). Bunlar
 * gizlenir, yer çipe ve varlık sayacına kalır.
 *
 * GERİ AL / YİNELE GİZLENMEZ. Eskiden bütün .st-quick satırı kapatılıyordu; o karar 3B yalnız
 * BAKILAN bir görünümken doğruydu. v7.81 ile 3B'de çizgi çiziliyor, taşınıyor, döndürülüyor,
 * ölçekleniyor — geri alınamayan bir düzenleme kipi olmaz. İki düğme (ve adım sayısı rozetleri)
 * üç boyutta da el altında durur.
 */
body.mode3d .st-quick [data-quick="grid"], body.mode3d .st-quick [data-quick="lw"],
body.mode3d .st-quick [data-quick="text"], body.mode3d .st-quick [data-quick="osnap"],
body.mode3d #stCoord { display: none; }
/*
 * 2B ÖLÇEĞİ VE 2B IZGARASI 3B'DE GİZLENİR. İkisi de 2B görünümün kendi değerleridir: "1:118"
 * üç boyutlu bir görünüşte karşılığı olmayan bir sayıdır (ve 3B'de güncellenmediği için bayat
 * kalır), "Izgara 1 m" ise 3B'nin kendi zemin ızgarasıyla (HUD: "Izgara 2.000 mm") çelişir.
 * İkisini de göstermek hem yanıltıcıydı hem çubuğu taşırıyordu.
 */
body.mode3d #stGrid, body.mode3d #stScale, body.mode3d #stSnap { display: none; }
body.compact-status #stCount { display: none; }

/* --- ana ekran (home.js): çizim / belge yokken #main'i kaplar; alt gezinme Ev · Dosya · Bulut · Araçlar --- */
.home { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }
/* Ana ekranın üst şeridi: her ekranda geri ve ana sayfa düğmesi bulunsun diye eklendi.
   Boşken (iki düğme de gizliyken) yer kaplamaz — Ev sekmesinde marka bloğu yukarıda kalır. */
.home-top { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: calc(4px + var(--safe-top)) calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left)); min-height: 0; touch-action: none; }
.home-top:not(:has(.btn:not([hidden]))) { padding-top: var(--safe-top); }
.home-top-title { color: var(--fg); font-size: calc(17px * var(--fs)); font-weight: 600; margin-inline-start: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Başlık tek yerde (v8.9.9): Ev dışındaki sekmede sayfa adı üst şeritte Geri / Ana sayfa'nın yanında durur; sayfanın içindeki
   aynı büyük başlık ("Dosya", "Bulut", "Araçlar") ikinci kez yazılmaz. */
.home-top:has(#homeTopTitle:not(:empty)) + .home-pages .home-head { display: none; }
.home-top + .home-pages { padding-top: 6px; }
/* Uygulamayla gelen örnek çizimler: iki kart, dar ekranda alt alta */
.samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sample { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); text-align: start; min-height: 64px; }
.sample .s-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--btn); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.sample .s-ic svg.ic { width: 20px; height: 20px; }
.sample .s-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sample .s-tx strong { font-size: calc(13px * var(--fs)); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: break-word; }   /* kart adı iki satıra sığar ("2+1 daire planı (2B ve 3B)"); tek satırda yarım kalıyordu: "2+1 daire pla…" */
.sample .s-tx small { color: var(--muted); font-size: calc(11px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* uzun dosya adı (MARFEN_YUZER_TERFI_3D.dwg) kartı taşırıp harf ortasında kesiliyordu */
/* Bellekteki çizime dönüş kartı: ana ekranın en üstünde, açık dosya varken */
.home-resume { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--panel); }
.home-resume .hr-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--btn); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.home-resume .hr-ic svg.ic { width: 22px; height: 22px; }
.home-resume .hr-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.home-resume .hr-tx strong { font-size: calc(13px * var(--fs)); }
.home-resume .hr-tx small { color: var(--muted); font-size: calc(12px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Yalnız düşey kaydırma: overflow:auto her iki eksende de sürüklemeye izin veriyordu, dosya
   açılmadan önce ana ekranda sağa/sola çekiştirmede yatay lastik-bant (rubber-band) sıçraması
   oluyordu — touch-action:pan-y jestin kendisini düşeye kilitler, overscroll-behavior:contain
   sınıra dayanınca zıplamayı keser. İçindeki .samples/.recent ızgara (grid) olduğu için (bkz.
   satır 137, 245) yatay kaydırılacak bir alt öğe yok; kısıtlama hiçbir işlevi kesmez. */
.home-pages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: calc(8px + var(--safe-top)) calc(12px + var(--safe-right)) 16px calc(12px + var(--safe-left)); }
.home-page { max-width: 640px; margin: 0 auto; }
.home-brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0 4px; }
.home-brand h1 { font-size: calc(20px * var(--fs)); margin: 0; }
.app-mark { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 11px; box-shadow: 0 2px 8px rgba(0,0,0,.35); display: block; }   /* uygulama simgesiyle aynı görsel (img/appmark.png) */
.home-head { display: flex; align-items: center; justify-content: center; padding: 8px 0 4px; }
.home-head h2 { font-size: calc(18px * var(--fs)); margin: 0; font-weight: 600; }
.home-text { color: var(--muted); margin: 6px 0 10px; text-align: center; font-size: calc(13px * var(--fs)); }
.home-sec { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.home-sec h3 { font-size: calc(14px * var(--fs)); margin: 0; color: var(--muted); font-weight: 600; }
.home-quick { justify-content: flex-start; }
.home-quick .btn { flex: 1 1 auto; min-height: 44px; }
.home #btnOpen2 { display: flex; width: 100%; margin: 6px 0 4px; }
.home #btnNew2 { display: flex; width: 100%; margin: 0 0 4px; min-height: 48px; font-size: calc(16px * var(--fs)); }   /* "Dosya aç"ın altında aynı genişlikte ikincil düğme (sola yaslı küçük düğme kalmıştı) */
.home-body { padding: 4px 0; }
.home-seg { display: flex; border-bottom: 1px solid var(--line); margin: 0 0 8px; }
.home-seg button { flex: 1 1 0; border: 0; background: transparent; color: var(--muted); padding: 10px; font-weight: 600; min-height: 44px; border-bottom: 2px solid transparent; font-size: calc(14px * var(--fs)); }
.home-seg button.on { color: var(--accent); border-bottom-color: var(--accent); }
/* ---- Satın alma çağrısı (.btn.cta) ------------------------------------------------------------
   Paketlere götüren ve satın alan TEK birincil düğme biçimi: sıcak amber degrade, kalın koyu yazı,
   48 px+ yükseklik, basınca hafif çökme. Renkler --cta-* belirteçlerinden gelir (tema başına yeniden
   tanımlanır); yazı / zemin karşıtlığı altı temada da ≥ 4.5:1'dir (test_odeme sınar). */
.btn.cta { background: var(--cta-b); background-image: linear-gradient(180deg, var(--cta-a), var(--cta-b));
  color: var(--cta-ink); font-weight: 800; box-shadow: var(--cta-shadow); transition: transform .08s ease-out, box-shadow .08s ease-out; }
.btn.cta:active { transform: translateY(1px) scale(.985); box-shadow: none; filter: brightness(.97); }
body.reduce-motion .btn.cta, body.reduce-motion .btn.cta:active { transform: none; transition: none; }
.btn.cta:disabled { background: var(--btn); background-image: none; color: var(--fg); box-shadow: none; }

/* ---- Ana ekran tanıtım kartı (#proLine) --------------------------------------------------------
   Tek güçlü cümle + tek düğme; ince paket renkli çerçeve. "Dosya aç / Yeni dosya" çiftinin ALTINDA durur
   (ana ekranın asıl işi dosya açmaktır). Cümle en çok iki satır; yer kalmazsa (dar ekran, büyük yazı,
   uzun dil) düğme cümlenin altına iner ve yine tek satır kalır. */
.pro-line { --t: var(--t-premium); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 8px; padding: 8px 8px 8px 10px;
  border: 1px solid var(--t); border: 1px solid color-mix(in srgb, var(--t) 55%, var(--line)); border-radius: 12px;
  background: var(--panel); background: linear-gradient(90deg, color-mix(in srgb, var(--t) 12%, var(--panel)), var(--panel));
  font-size: calc(13px * var(--fs)); color: var(--fg); text-align: start; }
.pro-line .pl-ic { flex: 0 0 auto; width: calc(28px * var(--fs)); height: calc(28px * var(--fs)); border-radius: 8px; display: grid; place-items: center;
  background: var(--t); color: var(--t-ink); }
.pro-line .pl-ic svg.ic { width: calc(17px * var(--fs)); height: calc(17px * var(--fs)); }
.pro-line .pl-tx { flex: 1 1 13em; min-width: 0; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pro-line .btn { white-space: nowrap; min-height: 40px; padding: 8px 12px; margin-inline-start: auto; }
/* dar telefonda (≤ 400 px) düğme her dilde cümlenin altına iner: cümle tam genişlikte iki satıra sığar */
@media (max-width: 400px) { .pro-line .pl-tx { flex-basis: calc(100% - 40px * var(--fs)); } }
body.glove .pro-line .btn { min-height: 52px; }

/* ---- Paket sayfası -------------------------------------------------------------------------
   Sıra: bağlama duyarlı başlık → güven şeridi → üç kart → abonelik alt bilgisi → tam döküm.
   Her kartın kendi kimlik rengi (--t) var: üstte şerit, başlıkta simge rozeti, onay imleri. Satın
   alma düğmesi ise her kartta aynı amber çağrıdır (.btn.cta): kimlik kartta, eylem düğmede. Renkler
   tema belirteçlerinden gelir, hiçbiri kartın içine yazılmaz. */
.pro-hero { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 2px 0 8px;
  border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--t, var(--accent)) 40%, var(--line)); border-radius: calc(var(--radius) + 4px);
  background: var(--panel);
  background: linear-gradient(135deg, color-mix(in srgb, var(--t, var(--accent)) 20%, var(--panel)), var(--panel) 78%); }
.pro-hero-ic { flex: 0 0 auto; width: calc(38px * var(--fs)); height: calc(38px * var(--fs)); border-radius: 11px;
  display: grid; place-items: center; background: var(--t, var(--accent)); color: var(--t-ink); }
.pro-hero-ic svg.ic { width: calc(22px * var(--fs)); height: calc(22px * var(--fs)); }
.pro-hero-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pro-hero-tx strong { font-size: calc(16px * var(--fs)); font-weight: 800; line-height: 1.25; }
.pro-hero-tx .pro-hero-h { font-size: calc(16.5px * var(--fs)); letter-spacing: -.2px; text-wrap: balance; }
.pro-hero-tx small { color: var(--muted); font-size: calc(12.5px * var(--fs)); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pro-hero.owned { border-color: var(--accent); }
/* Güven şeridi: üç eşit hücre TEK sırada (simge + en çok iki satır söz) — telefonda da tek sıra kalır,
   başlıkla birlikte öne çıkan kartın çağrısı ilk bakışta görünsün diye; yalnız doğrulanabilir sözler */
.pro-trust { list-style: none; margin: 0 0 2px; padding: 0 2px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pro-trust li { display: flex; align-items: flex-start; gap: 5px; font-size: calc(11px * var(--fs)); line-height: 1.25; font-weight: 600; color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.pro-trust svg.ic { flex: 0 0 auto; width: calc(15px * var(--fs)); height: calc(15px * var(--fs)); color: var(--ok); }
body[data-theme="light"] .pro-trust svg.ic, body[data-theme="sepia"] .pro-trust svg.ic, body[data-theme="hicontrast"] .pro-trust svg.ic { color: var(--fg); }
.tier-intro { margin: 8px 0 0; font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--fg); }

.pro-features { margin: 6px 0 4px; padding-left: 0; list-style: none; font-size: calc(13px * var(--fs)); }
.pro-features li { break-inside: avoid; padding: 2px 0; display: flex; align-items: flex-start; gap: 7px; }
.pro-features .fic { width: calc(15px * var(--fs)); height: calc(15px * var(--fs)); flex: 0 0 auto;
  margin-top: calc(2px * var(--fs)); fill: var(--t, var(--accent)); }
/* "+N özellik daha": ilk beş madde görünür, kalanı düğmeyle açılır (maddeler DOM'da durur) */
.pro-features li.more { display: none; }
.tier-card.open .pro-features li.more { display: flex; }
.tier-more { align-self: flex-start; background: transparent; border: 0; color: var(--fg); font: inherit; font-size: calc(12.5px * var(--fs)); font-weight: 700;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; min-height: 40px; min-width: 40px; padding: 0 2px; margin: 0 0 6px; cursor: pointer; }
.pro-status { border-radius: 10px; margin: 4px 0; }
/* Paket kartları: telefonda tek sütun, genişte yan yana. Önerilen kart (ücretsizde Premium, sahipken bir
   üst paket) kalın paket renkli çerçeve ve hafif yükseltilmiş gölgeyle öne çıkar; sahip olunandan düşük
   paketler soluk kalır — bilgi olarak durur ama satın alınamaz. */
.tier-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 6px 0 2px; }
@media (min-width: 640px) { .tier-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
/* iOS: Ad-Free satılmaz, iki kart (edition.js data-n) */
@media (min-width: 640px) { .tier-grid[data-n="2"] { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } }
/* Telefonda (tek sütun) öne çıkan kart (.lead: odaklanan, yoksa önerilen) İLK sırada çizilir; DOM sırası
   adfree → premium → super kalır. Böylece panel kaydırılmadan başlık + güven + asıl teklif birlikte görünür. */
@media (max-width: 639px) { .tier-grid .tier-card.lead { order: -1; } }
.tier-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  padding: 14px 13px 12px; background: var(--panel); display: flex; flex-direction: column; scroll-margin-top: 8px;
  background-image: linear-gradient(180deg, var(--btn-on), transparent 96px); background-image: linear-gradient(180deg, color-mix(in srgb, var(--t) 10%, transparent), transparent 96px); }
/* color-mix desteklemeyen eski WebView: kart yine de panel zemininde ve kimlik şeridiyle okunur kalır */
.tier-card.t-adfree { --t: var(--t-adfree); }
.tier-card.t-premium { --t: var(--t-premium); }
.tier-card.t-super { --t: var(--t-super); }
/* Üstteki renk şeridi kartın kimliğidir; kenarlıkla değil kendi katmanıyla çizilir ki köşelerde kırılmasın */
.tier-strip { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--t, var(--accent)); }
.tier-card.owned { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tier-card.dim { opacity: .55; }
.tier-card.pop { border: 2px solid var(--t, var(--line)); padding: 13px 12px 11px;
  box-shadow: 0 10px 26px -12px var(--t); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--t) 70%, transparent); }
@media (min-width: 640px) { .tier-card.pop { transform: translateY(-3px); } }
/* Kurdele sağ üstte ("Önerilen" / "Önerilen yükseltme"); RTL'de sola geçer */
.tier-ribbon { position: absolute; top: calc(10px * var(--fs)); right: 0; background: var(--t, var(--accent)); color: var(--t-ink);
  font-size: calc(10.5px * var(--fs)); font-weight: 800; letter-spacing: .2px; padding: 3px 9px 3px 10px;
  border-radius: 99px 0 0 99px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[dir="rtl"] .tier-ribbon { right: auto; left: 0; border-radius: 0 99px 99px 0; }
.tier-head { display: flex; align-items: center; gap: 9px; margin: 2px 0 4px; }
/* Kurdele başlığın üstüne binmesin: kurdeleli kartta başlık satırı sağından boşluk bırakır */
.tier-card.pop .tier-head { padding-right: calc(104px * var(--fs)); }
html[dir="rtl"] .tier-card.pop .tier-head { padding-right: 0; padding-left: calc(104px * var(--fs)); }
.tier-ic { flex: 0 0 auto; width: calc(30px * var(--fs)); height: calc(30px * var(--fs)); border-radius: 9px;
  display: grid; place-items: center; background: var(--btn);
  background: color-mix(in srgb, var(--t) 22%, var(--panel)); color: var(--fg); }
.tier-ic svg.ic { width: calc(18px * var(--fs)); height: calc(18px * var(--fs)); }
.tier-name { font-weight: 800; font-size: calc(18px * var(--fs)); letter-spacing: .1px; }
.tier-badge { background: var(--accent); color: var(--accent-fg); font-size: calc(10px * var(--fs)); font-weight: 800; padding: 2px 7px; border-radius: 8px; }
.tier-card .pro-features { columns: 1; flex: 0 1 auto; }
/* Satın alma: DOM sırası yıllık → aylık (görsel sıra = odak sırası). Paneldeki TEK amber çağrı öne çıkan
   kartın yıllığıdır (.buy-y.cta); öteki kartların yıllığı paket renginde çerçeveli ikincil düğmedir (.buy-y.alt). */
.tier-buy { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 4px; }
.tier-buy .btn { width: 100%; text-align: start; border-radius: 12px; line-height: 1.15; }
.tier-buy .buy-y { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "trial trial" "pl pp" "eq eq";
  align-items: center; justify-content: stretch; gap: 3px 10px; padding: 10px 14px; min-height: calc(58px * var(--fs)); }
.tier-buy .buy-m { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; min-height: calc(48px * var(--fs));
  background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 45%, var(--line)); }
.tier-buy .buy-y.alt { background: var(--btn); background: color-mix(in srgb, var(--t) 14%, var(--panel)); color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--t, var(--line)); }
.tier-buy .trial { grid-area: trial; font-size: calc(16px * var(--fs)); font-weight: 800; }
.tier-buy .pl { grid-area: pl; font-size: calc(14px * var(--fs)); font-weight: 800; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.tier-buy .pp { grid-area: pp; display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 0 2px; }
.tier-buy .pr { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; font-size: calc(16px * var(--fs)); }
.tier-buy .buy-y .pr { font-size: calc(20px * var(--fs)); }
.tier-buy .per { font-size: calc(12px * var(--fs)); font-weight: 700; }
.tier-buy .buy-m .per { color: var(--muted); }
.tier-buy .then { font-size: calc(12px * var(--fs)); font-weight: 700; margin-inline-end: 4px; }
.tier-buy .eq { grid-area: eq; font-size: calc(12px * var(--fs)); font-weight: 600; }
.tier-buy .btn:disabled { opacity: .6; }
.tier-buy .buy-m:disabled .per { color: inherit; }
/* Tasarruf hapı: yalnız yıllıkta ve yalnız fiyatlar okunabildiğinde çizilir; çağrı rengini tersler */
.tier-buy .save { font-style: normal; font-weight: 800; font-size: calc(11px * var(--fs));
  background: var(--cta-ink); color: var(--cta-a); border-radius: 99px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.tier-buy .buy-y.alt .save { background: var(--t); color: var(--t-ink); }
.tier-buy .btn:disabled .save { background: var(--line); color: var(--fg); }
/* Düğmelerin hemen altındaki yenileme / iptal satırı: karar anında görünür (politika), sade ve okunur */
.tier-renew { margin: 6px 2px 0; font-size: calc(11.5px * var(--fs)); line-height: 1.4; color: var(--muted); }
body.glove #proPanel .tier-buy .btn, body.glove #proPanel .pro-link, body.glove #proPanel .tier-more { min-height: 52px; }
/* Abonelik alt bilgisi: otomatik yenileme ve iptal yolu her zaman yazar; bağlantılar metin görünümlü,
   dokunma alanı yine ≥ 40 px (eldivende 52 px) */
.pro-legal { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: calc(11.5px * var(--fs)); color: var(--muted); line-height: 1.45; }
.pro-legal p { margin: 0 0 6px; }
.pro-links { display: flex; flex-wrap: wrap; gap: 0 2px; margin-inline-start: -8px; }
.pro-link { background: transparent; border: 0; color: var(--fg); font: inherit; font-size: calc(12px * var(--fs)); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; min-height: 40px; min-width: 40px; padding: 0 8px; cursor: pointer; }
.pro-link:disabled { opacity: .5; text-decoration: none; }
.pro-note { margin-top: 8px; }
/* Satın alma tanılaması (edition.js): kartların altında küçük metin düğmesi; pencere dialog.js'in askText kutusudur */
.pro-diag { margin: 4px 0 0; text-align: center; }
.modal.ask.billdiag .ask-card { max-width: 560px; }
.billdiag-title { font-weight: 800; font-size: calc(17px * var(--fs)); line-height: 1.25; }
.billdiag-pre { margin: 0; padding: 10px 12px; max-height: min(46vh, 340px); overflow: auto; white-space: pre; tab-size: 4; text-align: left;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; font-size: calc(11.5px * var(--fs)); line-height: 1.45;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; overscroll-behavior: contain;
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.billdiag-pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hint { font-size: calc(12px * var(--fs)); color: var(--muted); margin: 14px 0 0; }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* son dosyalar: küçük resimli ızgara (en çok 8) */
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.recent .item { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; text-align: left; cursor: pointer; min-height: 48px; background: var(--panel); }
.recent img, .recent .noimg { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; background: #0f141b; flex: 0 0 auto; }
.light .recent .noimg, body[data-theme="light"] .recent .noimg, body[data-theme="sepia"] .recent .noimg { background: var(--btn); }
.recent .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px * var(--fs)); }
.recent .meta { font-size: calc(10.5px * var(--fs)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
/* alt gezinme */
.home-nav { flex: 0 0 auto; display: flex; border-top: 1px solid var(--line); background: var(--bar); padding: 2px 0 var(--safe-bottom); touch-action: none; }
.home-nav button { flex: 1 1 0; min-height: 56px; border: 0; background: transparent; color: var(--muted); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: calc(11px * var(--fs)); font-weight: 600; padding: 4px 2px; }
.home-nav button svg.ic { width: 26px; height: 26px; }
.home-nav button.on { color: var(--accent); }
body.glove .home-nav button { min-height: 64px; }
/* bulut hizmet kartları: simge + ad + sağda durum düğmesi */
.cloud-list { display: flex; flex-direction: column; gap: 10px; }
.cloud-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-height: 64px; }
.cloud-card .cloud-ic { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; }
.cloud-card .cloud-ic svg.ic { width: 26px; height: 26px; }
.cloud-card .cloud-nm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cloud-card .cloud-nm b { font-size: calc(15px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cloud-card .cloud-nm small { color: var(--muted); font-size: calc(11.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-card .cloud-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.cloud-card .btn.link { background: transparent; color: var(--accent); font-weight: 600; padding: 8px 6px; }
.cloud-card .btn.icon.link { padding: 0; }
.cloud-empty { text-align: center; padding: 24px 12px; color: var(--muted); }
.cloud-explorer { margin: 10px 0 0; }
.cloud-explorer .doc-crumbs .chip { height: 40px; }
.cloud-explorer .doc-crumbs .sp { flex: 1 1 auto; }
.cloud-explorer .doc-crumbs .lbtn { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
/* araçlar ızgarası: 4 sütun, renkli yuvarlatılmış simge kutusu + ad, ücretsizde PRO rozeti */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; padding: 8px 0; }
.tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--fg); padding: 4px 2px; min-height: 48px; cursor: pointer; }
.tool .tool-ic { width: 56px; height: 56px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.tool .tool-ic svg.ic { width: 30px; height: 30px; }
.tool .lb { font-size: calc(11.5px * var(--fs)); line-height: 1.15; text-align: center; max-width: 100%; }
.tool.dim .tool-ic { opacity: .55; }
.tool-c1 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .tool-c2 { background: linear-gradient(135deg, #14b8a6, #0f766e); } .tool-c3 { background: linear-gradient(135deg, #f59e0b, #d97706); } .tool-c4 { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.tool-c5 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); } .tool-c6 { background: linear-gradient(135deg, #22c55e, #15803d); } .tool-c7 { background: linear-gradient(135deg, #06b6d4, #0e7490); } .tool-c8 { background: linear-gradient(135deg, #64748b, #334155); }
body[data-theme="hicontrast"] .tool .tool-ic, body[data-theme="hicontrast"] .cloud-card .cloud-ic { background: #000; color: #fff; box-shadow: 0 0 0 2px #000; }
body.sun .tool .tool-ic, body.sun .cloud-card .cloud-ic { box-shadow: 0 0 0 2px var(--line); }
@media (max-width: 360px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }
/* ana ekran kipi: üst çubuk, şerit, durum çubuğu, sayfa sekmeleri ve yan yuva gizli; başlık ana ekranın içindedir */
body.homemode #topbar, body.homemode #toolbar, body.homemode #statusbar, body.homemode #layoutTabs, body.homemode #side { display: none !important; }
/* belge kipi (PDF / Word / Excel / arşiv / resim / metin): çizime ait şerit, durum çubuğu, sayfa sekmeleri ve üst çubuk çizim düğmeleri gizli; yalnız Aç ve Diğer kalır */
body.docmode #toolbar, body.docmode #statusbar, body.docmode #layoutTabs, body.docmode #side, body.docmode #btnSearch, body.docmode #btnExtents, body.docmode #btnLayers, body.docmode #btnMeasure, body.docmode #btnDisplay { display: none !important; }
body.docmode #topbar .filewrap { visibility: hidden; }   /* belge kipinde bellekteki çizimin adı yanıltır; belge adı belge başlığındadır */
/* Belge kipinde üst çubuk görünür ve Geri / Ana ekran düğmelerini zaten taşır: belge başlığındaki aynı iki düğme hemen
   altında İKİNCİ bir ev ve geri simgesi oluyordu (aynı işlev: Docs.back / goHome). Yalnız görünümden kalkarlar (v8.9.9). */
body.docmode #docView .doc-head > [data-doc="home"], body.docmode #docView .doc-head > [data-doc="back"] { display: none; }
/* Masaüstü kipi: çizim alanında CAD artı imleci. Ok imleci "bu bir belgedir" der; artı imleç
   "buraya nokta konur" der ve fareyle çalışan kullanıcı ilk saniyede farkı görür. */
body.has-mouse #viewport { cursor: crosshair; }
body.has-mouse #viewport .fab, body.has-mouse #viewport .notesbar, body.has-mouse #viewport .cmdbar,
body.has-mouse #viewport .hud, body.has-mouse #viewport .home { cursor: default; }
/* Belge görünümü (docmode): ok imleci yalnız KROM'da (başlık, araç satırı, düğmeler); belge gövdesinin imleci tarayıcıya kalır — metin üstünde
   I-ışını (auto), PDF sayfasında el (grab), düzenleyicinin kendi imleçleri (col-resize, text...) olduğu gibi. Eskiden bütün .docview "default"
   olunca çizim bellekteyken (has-mouse) seçilebilir metin üstünde de ok görünüyordu (çizim yokken auto'ydu). Çizim görünümü kuralları aynı. */
body.has-mouse #viewport .docview { cursor: auto; }
body.has-mouse #viewport .docview .doc-head, body.has-mouse #viewport .docview .doc-tools, body.has-mouse #viewport .docview button,
body.has-mouse #viewport .docview .doc-tabs { cursor: default; }
body.has-mouse.docmode #viewport { cursor: default; }
.docview .wd-doc, .docview .docx-text, .docview .doc-pre { cursor: text; }
.doc-body.kind-pdf .pdf-page { cursor: grab; }   /* masaüstü: sol tuşla sürükleme PDF'i kaydırır (docs.js panDown) */
/* KLAVYE VE FARE KİPİ (body.kbm; app.js kbmOn, docs/klavye-fare-kipi.md §3.1). Kipin görünür izi:
   - 2B çizim alanında sistem imleci gizlenir; imleç kaplamaya çizilen AutoCAD artısıdır (app.js drawPenHover).
     Yalnız çizim tuvalinde (#cv; kaplama #ov olay almaz): #viewport'a konsaydı içindeki komut önerisi, yakalama
     seçici gibi kutulara da kalıtımla geçer, onların üstünde imleç kaybolurdu. O kutularda olağan ok imleci vardır.
     3B görünümde kaplama artısı yoktur, orada has-mouse'un artı imleci kalır. Düğme ve çubukların imleci değişmez.
   - Şerit yoğunlaşır (kullanıcı kararı 6: bugünkü karolar, yoğun boyutta): fare parmaktan küçük hedefe isabet eder.
   - Yakınlaştırma sütunu (FAB) ve seçim rozeti kalkar: tekerlek, orta tuş ve sağ tık onların işini görür. GPS
     düğmesi (display.js onu sütunun İÇİNE taşır) kalır: konum izlemenin açık olduğunu gösterir ve tek tıkla durdurur.
   Sınıf belge kipinde (docmode) konmaz; mobil kipte hiçbir kural devreye girmez. */
body.kbm:not(.mode3d) #viewport > #cv { cursor: none; }
/* orta tuş kaydırması: basılı olduğu sürece tutan el (AutoCAD); iOS'ta sistem imleci gizli, el bindirmede çizilir */
body.orta-pan #viewport, body.orta-pan #viewport > #cv { cursor: grabbing !important; }
/* belgede orta tuş / PDF sol tuş sürüklemesi (docs.js panDown aynı sınıfı koyar): bütün belge ve içindeki her öğe tutan el olur */
body.orta-pan .docview, body.orta-pan .docview * { cursor: grabbing !important; }
body.kbm #viewport .cmd-sug, body.kbm #viewport .snappick, body.kbm #viewport .cmdshow { cursor: default; }
body.kbm #toolbar { --tile: 46px; --tb-h: 42px; }
body.kbm #toolbar .tb-row button { padding: 2px 5px; }
body.kbm #toolbar .tb-row button .ic { width: calc(22px * var(--fs)); height: calc(22px * var(--fs)); }
body.kbm #toolbar .tb-tabs button, body.kbm #toolbar .tb-pin { height: 42px; }
body.kbm #toolbar .tb-tabs button svg.ic, body.kbm #toolbar .tb-pin svg.ic { width: 20px; height: 20px; }
body.kbm #navFabs > :not(#gpsBtn), body.kbm #selBadge { display: none !important; }
/* Komut satırı (Faz 3): geçmişin son üç satırı istemin üstünde, istemdeki [seçenekler] tıklanır; F2 bütün geçmiş. Yalnız bu kipte.
   Geçmiş AutoCAD'in yüzen komut satırındaki gibi çubuğun ÜSTÜNDE, yarı saydam durur: çubuğu büyütüp çizim alanını daraltmaz,
   tıklamaları yutmaz (pointer-events: none; altındaki çizime tıklanır). */
.cmd-log { display: none; }
body.kbm .cmd-log:not([hidden]) { display: block; position: absolute; left: 0; right: 0; bottom: 100%; padding: 2px 8px; pointer-events: none; background: var(--bar); background: color-mix(in srgb, var(--bar) 72%, transparent); border-top: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: calc(11.5px * var(--fs)); line-height: 1.3; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
body.kbm .cmd-log > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Komut satırı araması (Faz 3b): klavyeyle seçilen öneri, yazım düzeltmesi (italik), katman / blok satırı (girdi araması) */
body.kbm .cmd-sug button.on { background: var(--btn-on); background: color-mix(in srgb, var(--accent) 22%, transparent); }
body.kbm .cmd-sug button.duz b { font-style: italic; }
body.kbm .cmd-sug button.girdi .ic { width: 14px; height: 14px; flex: 0 0 auto; align-self: center; opacity: .7; }
/* Özellikler paleti (Ctrl+1; editor.js paletAc): dar ekranda alttan, geniş ekranda çizim alanının sağına yaslı. Kenarları editor.js
   paletYerlestir verir: alt kenar her ekranda komut satırının üstü, geniş ekranda üst kenar şeridin altı ve yan kenar çizim alanının
   kenarı (sağa yerleşmiş katman panelini örtmez). İmleç yanı menüler (#docPanel, z 30) üstünde açılır. */
#propPalette { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; max-height: 50%; border-radius: 12px 12px 0 0; }
#propPalette[hidden] { display: none; }
#propPalette .panel-head { flex-wrap: nowrap; padding: 4px 6px 4px 12px; }
#propPalette .panel-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(13.5px * var(--fs)); }
#propPalette .pal-kisa { font-size: calc(11px * var(--fs)); white-space: nowrap; }
#propPalette .panel-body { flex: 1 1 auto; }
#propPalette .pal-bos { padding: 10px 2px; }
@media (min-width: 900px) {
  #propPalette { left: auto; right: 0; top: 0; width: min(30vw, 340px); max-height: none; border-radius: 10px 0 0 10px; }
  body.left-hand #propPalette { right: auto; left: 0; border-radius: 0 10px 10px 0; }
}
/* Komut önerileri açıkken geçmiş satırları gizlenir: liste çubuğun hemen üstünde durur, yarı saydam satırlar alt önerilerin üstüne binerdi */
body.kbm #cmdSug:not([hidden]) ~ #cmdBar .cmd-log { display: none; }
body.kbm #cmdText .cmd-opt { color: var(--fg); text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; border-radius: 3px; }
body.kbm #cmdText .cmd-opt:hover { background: var(--btn-on); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.cmd-log-all { font-family: ui-monospace, Consolas, monospace; font-size: calc(12px * var(--fs)); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
/* İmleç yanında açılan sağ tık menüsü (app.js docYerlestir; docs §3.8): aynı #docPanel, alttan çekmece yerine imlecin
   yanında küçük açılır menü. Yer satır içi left / top ile verilir; tutamak (sheet-handle) ve geçiş canlandırması yoktur.
   Seçim menüsünün kartları (os-card) satıra döner: simge + ad, fareyle taranan dar bir liste. */
body.kbm #docPanel.imlec-menu { left: 0; right: auto; bottom: auto; width: min(290px, 92vw); max-height: min(72vh, 620px); border-radius: 8px; padding-bottom: 0; transition: none; z-index: 30; }
body.kbm #docPanel.imlec-menu .sheet-handle { display: none; }
body.kbm #docPanel.imlec-menu .panel-head { padding: 2px 4px 2px 10px; flex-wrap: nowrap; }
body.kbm #docPanel.imlec-menu .panel-head strong { min-width: 0; font-size: calc(12.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.kbm #docPanel.imlec-menu .panel-head .btn.icon { min-width: 28px; min-height: 28px; padding: 2px; }
body.kbm #docPanel.imlec-menu .panel-body { padding: 4px; }
body.kbm #docPanel.imlec-menu .list .item { min-height: 30px; padding: 3px 8px; gap: 8px; }
body.kbm #docPanel.imlec-menu .list .item:hover, body.kbm #docPanel.imlec-menu .sel-grid .os-card:hover { background: var(--btn-on); background: color-mix(in srgb, var(--accent) 16%, transparent); }
body.kbm #docPanel.imlec-menu .ctx-menu .item svg.ic, body.kbm #docPanel.imlec-menu .ctx-list .item .os-ic { width: 18px; height: 18px; color: var(--muted); }
body.kbm #docPanel.imlec-menu .ctx-list .item .os-ab { min-width: 3.2em; font-size: calc(11.5px * var(--fs)); }
body.kbm #docPanel.imlec-menu .sel-grid { display: flex; flex-direction: column; gap: 0; }
body.kbm #docPanel.imlec-menu .sel-grid .os-card { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 30px; padding: 3px 8px; border: 0; border-radius: 4px; background: transparent; }
body.kbm #docPanel.imlec-menu .sel-grid .os-card svg.ic { width: 18px; height: 18px; }
body.kbm #docPanel.imlec-menu .sel-grid .os-card span { font-size: calc(13px * var(--fs)); text-align: start; }
/* KLAVYE VE FARE KİPİ — Faz 4a: durum çubuğunun AutoCAD düğmeleri ve dinamik giriş kutusu (docs §3.7–3.8).
   Düğmeler yalnız bu kipte görünür (#stKbm; editor.syncQuick hidden'ı kaldırır); açık olan vurgu renginde ve altı çizili (AutoCAD'in
   mavi düğmesi). Simgeli hızlı düğmeler (ızgara, kalınlık, yakalama) yerinde kalır: gizlenseydi kip düğmesi kip değişince imlecin
   altından kayar, ikinci tık başka bir düğmeye gelirdi (iki düğme aynı durumu okur, eşzamanlıdır).
   Dinamik giriş kutusu imlecin sağ altındadır, olay almaz (tıklama çizime gider); etkin alan çerçevelidir, yazılmamış alan imleçteki
   değeri soluk gösterir. */
.st-kbm { display: none; }
body.kbm .st-kbm:not([hidden]) { display: flex; flex: 0 0 auto; gap: 1px; align-items: center; margin-left: auto; }
body.kbm .st-kbm button { flex: 0 0 auto; height: 26px; min-width: 0; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 600 calc(10.5px * var(--fs)) / 1 ui-monospace, Consolas, monospace; cursor: pointer; }
body.kbm .st-kbm button:hover { background: var(--btn); color: var(--fg); }
/* İki katlı düzende (body.st-two: koordinat uzun, ekran dar) düğmeler simgeli düğme şeridiyle AYNI satırdadır: çubuk en çok iki kat
   olur (bilgi satırı + düğmeler), görüntü alanı üçüncü bir kat kadar daralmaz. Şeride sığmazsa grup kendi içinde kayar. */
body.kbm.st-two #statusbar { flex-flow: row wrap; align-items: center; }
body.kbm.st-two .st-info { flex: 1 0 100%; }
body.kbm.st-two .st-quick { width: auto; flex: 0 0 auto; justify-content: flex-start; }
body.kbm.st-two .st-kbm:not([hidden]) { order: 3; flex: 1 1 0; min-width: 0; margin-left: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
body.kbm.st-two .st-kbm::-webkit-scrollbar { display: none; }
body.kbm.st-two .st-kbm button:first-child { margin-left: auto; }
body.kbm .st-kbm button.on { color: var(--accent); background: var(--btn-on); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 -2px 0 var(--accent); }
/* Faz 4b: basılı geçici geçersiz kılma tuşu (Shift, Shift+A …) düğmenin ETKİN durumunu gösterir, kesikli çerçeveyle: kalıcı ayar değil */
body.kbm .st-kbm button.gecici { outline: 1px dashed var(--accent); outline-offset: -2px; }
/* 3B görünümde (Faz 5) 2B çizim yardımcıları iş görmez: grubu 3B'nin kendi düğmesine (3DOSNAP, F4) bırakır; 2B'de 3B düğmesi yoktur */
body.kbm.mode3d #stKbm, body.kbm:not(.mode3d) #stKbm3 { display: none; }
/* Faz 4b: seçim döngüsü listesi (AutoCAD SELECTIONCYCLING): üst üste binen nesneler, imlecin yanında; üzerine gelinen önizlenir */
body.kbm #docPanel.imlec-menu .sc-list .item { display: flex; gap: 8px; align-items: center; }
body.kbm #docPanel.imlec-menu .sc-list .item .sc-kat { margin-left: auto; color: var(--muted); font-size: calc(11.5px * var(--fs)); }
body.kbm #stCoord { cursor: pointer; font-variant-numeric: tabular-nums; }
.dyn-box { position: absolute; z-index: 6; pointer-events: none; max-width: min(420px, 70vw); padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: var(--bar); background: color-mix(in srgb, var(--bar) 92%, transparent); color: var(--fg); font: calc(11.5px * var(--fs)) / 1.35 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.dyn-box .dyn-istem { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.dyn-box .dyn-istem:empty { display: none; }
.dyn-box .dyn-alanlar { display: flex; gap: 6px; margin-top: 2px; }
.dyn-box .dyn-alanlar:empty { display: none; }
.dyn-box .dyn-alan { display: inline-flex; gap: 4px; align-items: baseline; min-width: 5.5em; padding: 1px 5px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 3px; background: var(--bg, transparent); font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.dyn-box .dyn-alan i { font-style: normal; color: var(--muted); }
.dyn-box .dyn-alan.canli b { font-weight: 400; color: var(--muted); }
.dyn-box .dyn-alan.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dyn-box .dyn-alan.on:not(.canli) b::after { content: '|'; margin-left: 1px; color: var(--accent); font-weight: 400; }
/* Klavye ve fare kipi, Faz 6b: imleç rozeti (pickbox'ın sağ üstü; "izin yok" kırmızı kilit), bilgi ipucu ve hızlı özellikler kutusu */
.kbm-rozet { position: absolute; z-index: 6; pointer-events: none; display: flex; align-items: center; justify-content: center; width: calc(18px * var(--fs)); height: calc(18px * var(--fs)); border-radius: 4px; background: var(--bar); background: color-mix(in srgb, var(--bar) 88%, transparent); border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.kbm-rozet[hidden] { display: none; }
.kbm-rozet .ic { width: calc(14px * var(--fs)); height: calc(14px * var(--fs)); }
.kbm-rozet.izin { color: #fff; background: #d93025; border-color: #d93025; }
.kbm-ipucu { position: absolute; z-index: 7; pointer-events: none; max-width: min(320px, 70vw); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: var(--bar); background: color-mix(in srgb, var(--bar) 94%, transparent); color: var(--fg); font: calc(11.5px * var(--fs)) / 1.35 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.kbm-ipucu[hidden] { display: none; }
.kbm-ipucu b { display: block; margin-bottom: 2px; }
.kbm-ipucu table, .qp-box table { border-collapse: collapse; }
.kbm-ipucu td, .qp-box td { padding: 1px 0; vertical-align: baseline; }
.kbm-ipucu td:first-child, .qp-box td:first-child { padding-inline-end: 10px; color: var(--muted); white-space: nowrap; }
.kbm-ipucu td:last-child { font-variant-numeric: tabular-nums; }
.qp-box { position: absolute; z-index: 8; min-width: 200px; max-width: min(300px, 80vw); padding: 2px 6px 6px; border-radius: 6px; border: 1px solid var(--line); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: var(--bar); color: var(--fg); font: calc(11.5px * var(--fs)) / 1.35 system-ui, sans-serif; box-shadow: 0 3px 12px rgba(0,0,0,.35); cursor: default; }
.qp-box[hidden] { display: none; }
.qp-box .qp-head { display: flex; align-items: center; gap: 6px; padding: 2px 0 4px; border-bottom: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); margin-bottom: 3px; }
.qp-box .qp-head b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-box .qp-kapat { flex: 0 0 auto; display: inline-flex; padding: 2px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; }
.qp-box .qp-kapat:hover { background: var(--btn-on); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); }
.qp-box .qp-kapat .ic { width: 14px; height: 14px; }
.qp-box table { width: 100%; }
.qp-box select { width: 100%; max-width: 170px; font: inherit; padding: 1px 2px; }
.qp-box [data-qpv] { font-variant-numeric: tabular-nums; }
/* Komut listesi tablosu: komut adı tek aralıklı, kısaltma soluk, açıklama sağda */
.cmd-list { width: 100%; border-collapse: collapse; margin-block-end: calc(10px * var(--fs)); }
.cmd-list td { padding: calc(5px * var(--fs)) 6px; border-block-end: 1px solid var(--line, #2a3340); vertical-align: baseline; font-size: calc(12px * var(--fs)); }
.cmd-list td:first-child { width: 1%; white-space: nowrap; }
.cmd-list td:nth-child(2) { width: 1%; white-space: nowrap; opacity: .6; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(11px * var(--fs)); }
.cmd-list code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: .02em; }
.cmd-list i { opacity: .6; font-style: normal; }
/* Komut önerisi: komut çubuğunun HEMEN ÜSTÜNDE durur, çubuğu yukarı itmez (mutlak konum),
   yoksa yazarken çizim alanı zıplardı. Yükseklik sınırlıdır; taşarsa kendi içinde kayar. */
.cmd-sug { position: absolute; inset-inline: 0; bottom: var(--cmd-h); z-index: 6; max-height: min(40vh, calc(100% - var(--cmd-h, 0px) - 4px)); overflow-y: auto;
  background: var(--panel, #141a22); border-block-start: 1px solid var(--line, #2a3340); display: flex; flex-direction: column; }
.cmd-sug[hidden] { display: none; }
.cmd-sug button { display: flex; gap: 8px; align-items: baseline; width: 100%; padding: calc(9px * var(--fs)) 12px; background: none; border: 0;
  border-block-end: 1px solid var(--line, #2a3340); color: var(--fg, #e6edf3); font: inherit; text-align: start; cursor: pointer; }
.cmd-sug button:last-child { border-block-end: 0; }
.cmd-sug button:hover, .cmd-sug button:focus-visible { background: var(--hover, #1d2632); }
.cmd-sug b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(13px * var(--fs)); letter-spacing: .02em; }
.cmd-sug i { font-style: normal; opacity: .6; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(11px * var(--fs)); }
.cmd-sug button.son .ic { width: 14px; height: 14px; flex: 0 0 auto; align-self: center; opacity: .55; }
.cmd-sug span { margin-inline-start: auto; opacity: .65; font-size: calc(11px * var(--fs)); }
/* tanınan ama bulunmayan komut: listede kalır, soluk durur (yazım hatası sanılmasın) */
.cmd-sug button.na, .cmd-list tr.na { opacity: .55; }
/* belge görünümü #viewport içindedir; çizim tuvalinin touch-action:none kuralı belge kipinde kaldırılır, yoksa bazı WebView sürümlerinde belge içinde parmakla kaydırma çalışmaz */
body.docmode #viewport { touch-action: auto; }
/* Belge kipinde durum çubuğu ve şerit gizlidir; belge görünümü ekranın kenarına kadar iner. Android'in gezinme tuşları
   (kenardan kenara, targetSdk 35+) ve iPhone'un ana ekran çizgisi / yatay çentiği o kenarı örter: alttaki bölge seçimi
   çubuğu (Bölgeyi PDF yap), Word düzenleme araç çubuğu ve sayfanın sonu tuşların altında kalıyordu (v8.9.17). */
body.docmode #docView { padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left); }
body.docmode .toast { bottom: calc(20px + var(--safe-bottom)); }
.open-mount { min-height: 120px; }
.open-mount .open-tools { padding: 4px 0 6px; }

.modal { position: absolute; inset: 0; background: rgba(10,14,20,.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 40; color: #e6eaf0; }
.modal .sub { color: #94a3b8; font-size: 12px; }
.modal video { max-width: 92vw; max-height: 60vh; border-radius: 12px; background: #000; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: spin 1s linear infinite; }
/* Yükleme ilerlemesi: çubuk + yüzde. Yalnız gerçek bir ölçü varken görünür; ölçülemeyen aşamada gizlenir,
   dönen gösterge tek başına kalır. Genişlik yüzdeyle doğrudan verilir. */
.lprog { display: flex; align-items: center; gap: 10px; width: min(260px, 70vw); margin-top: 10px; }
.lbar { flex: 1 1 auto; height: 6px; border-radius: 99px; background: var(--btn); overflow: hidden; }
.lbar > i { display: block; height: 100%; width: 0%; border-radius: 99px; background: var(--accent); transition: width .18s linear; }
.lpct { font-variant-numeric: tabular-nums; font-size: calc(12.5px * var(--fs)); color: var(--muted); min-width: 3.2em; text-align: right; }
@media (prefers-reduced-motion: reduce) { .lbar > i { transition: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* uygulama içi giriş / onay kutusu (dialog.js): tema ve --fs #app'ten gelir, eldivende düğmeler büyür */
.modal.ask { z-index: 60; background: rgba(10,14,20,.55); padding: 16px; }
.ask-card { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 14px; padding: 16px; width: 100%; max-width: 420px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; max-height: 100%; min-height: 0; }
/* Kutu ekrandan uzunsa (yatay telefonda çok alanlı Tarama deseni kutusu) alanlar kendi içinde kayar, Tamam / Vazgeç hep
   görünür kalır (v8.9.9; kart ortalandığı için düğmeler ekranın altından taşıyor, ulaşılamıyordu) */
.ask-field { min-height: 0; overflow-y: auto; flex: 0 1 auto; }
.ask-label { font-size: calc(15px * var(--fs)); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.ask-field:empty { display: none; }
/* Hazır ifade çipleri: giriş kutusunun üstünde iki satıra kadar, tabanı kaydırılabilir */
.ask-words { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; max-height: 104px; overflow-y: auto; }
.ask-words .chip { height: 40px; padding: 0 12px; font-size: calc(12px * var(--fs)); }
body.glove .ask-words .chip { height: 44px; }
.ask-field .opt-text { width: 100%; box-sizing: border-box; font-size: calc(16px * var(--fs)); }
.ask-field textarea.opt-text { resize: vertical; min-height: 72px; font-family: inherit; }
.ask-btns { justify-content: flex-end; }
.ask-btns .btn { min-width: 96px; min-height: 44px; }
body.glove .ask-btns .btn { min-height: 52px; min-width: 120px; }
body.glove .ask-field .opt-text { min-height: 52px; }
.ask-head:empty { display: none; }
/* Kilit kutusunun SATIŞ kipi (dialog.js kip:'sale', edition.js upgradeDialog). Düz onay kutusu değişmez.
   Sıra: paket renginde bant (simge + ad) → fayda başlığı → üç madde + fiyat ipucu → "…paketinde bulunur.
   Paketler açılsın mı?" → Vazgeç / Paketlere bak. Bant yazısı panel zemininde durur (karşıtlık temadan gelir). */
.modal.ask.sale .ask-card { padding: 0 0 16px; overflow: hidden; gap: 10px; }
.modal.ask.sale .ask-head { order: 0; }
.modal.ask.sale .ask-field { order: 1; padding: 0 16px; }
.modal.ask.sale .ask-label { order: 2; padding: 0 16px; font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.modal.ask.sale .ask-btns { order: 3; padding: 0 16px; }
.sale-band { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--btn);
  background: linear-gradient(135deg, color-mix(in srgb, var(--t) 30%, var(--panel)), color-mix(in srgb, var(--t) 8%, var(--panel)));
  border-bottom: 3px solid var(--t); }
.sale-ic { width: calc(34px * var(--fs)); height: calc(34px * var(--fs)); border-radius: 10px; display: grid; place-items: center; background: var(--t); color: var(--t-ink); flex: 0 0 auto; }
.sale-ic svg.ic { width: calc(20px * var(--fs)); height: calc(20px * var(--fs)); }
.sale-tier { font-weight: 800; font-size: calc(17px * var(--fs)); color: var(--fg); letter-spacing: .1px; }
.sale-h { padding: 4px 16px 0; font-size: calc(18px * var(--fs)); font-weight: 800; line-height: 1.25; color: var(--fg); text-wrap: balance; }
.sale-s { padding: 2px 16px 0; font-size: calc(13px * var(--fs)); line-height: 1.35; color: var(--muted); }
.sale-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: calc(14px * var(--fs)); }
.sale-list li { display: flex; align-items: flex-start; gap: 8px; }
.sale-list .fic { width: calc(17px * var(--fs)); height: calc(17px * var(--fs)); flex: 0 0 auto; margin-top: 1px; fill: var(--t, var(--accent)); }
.sale-foot { margin-top: 10px; font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.sale-foot b { color: var(--fg); font-variant-numeric: tabular-nums; }
.modal.ask.sale #askOk { background: var(--cta-b); background-image: linear-gradient(180deg, var(--cta-a), var(--cta-b)); color: var(--cta-ink); font-weight: 800;
  min-height: 48px; box-shadow: var(--cta-shadow); }
.modal.ask.sale #askOk:active { transform: translateY(1px) scale(.985); filter: brightness(.97); }
body.reduce-motion .modal.ask.sale #askOk:active { transform: none; }
.modal.ask.sale #askNo { background: transparent; box-shadow: inset 0 0 0 1px var(--line); min-height: 48px; }
body.glove .modal.ask.sale #askOk, body.glove .modal.ask.sale #askNo { min-height: 52px; }

/* --- paneller ve alt sayfalar --- */
.panel { position: absolute; z-index: 10; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: var(--shadow); }
.panel.right { top: calc(52px + var(--safe-top)); right: 0; bottom: calc(46px + var(--safe-bottom)); width: calc(min(86vw, 340px) + var(--safe-right)); padding-right: var(--safe-right); border-radius: 12px 0 0 12px; }   /* alt pay durum çubuğu kadar: 30 px'te ölçek çipinin yarısını örtüyordu */
.panel.bottom { left: 0; right: 0; bottom: 0; max-height: 58%; border-radius: 14px 14px 0 0; padding-bottom: var(--safe-bottom); transition: transform .18s ease-out, max-height .18s ease-out; }
.panel.bottom[data-detent="full"] { max-height: 92%; }
.panel.bottom.dragging { transition: none; }
.sheet-handle { flex: 0 0 auto; height: 18px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.sheet-handle::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.panel-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-head strong { flex: 1 1 auto; font-size: calc(15px * var(--fs)); }
/* Ölçü paneli: ipucu metni uzun dillerde kapat düğmesini ikinci satıra itmesin; ipucu kısalır (…), düğmeler tek satırda kalır */
/* Katman paneli başlığı: sayaç başlığın ALTINA küçük satır olarak iner, düğmeler tek satırda kalır.
   Yan yanayken Türkçede ('Katmanlar · 10 katman · Tümü · Hiçbiri · Ters çevir') kapatma düğmesi ikinci satıra düşüyordu. */
#layerPanel .panel-head { gap: 4px; }
#layerPanel .ph-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
#layerPanel .ph-title strong { flex: none; }
#layerCount { font-size: calc(11.5px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#measurePanel .panel-head { flex-wrap: nowrap; }
#measurePanel .panel-head strong { flex: 0 0 auto; }
#measureHint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#measurePanel .panel-head .btn { flex: 0 0 auto; }
.panel-head input[type=search] { flex: 1 1 auto; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-width: 0; min-height: 40px; }
.panel-body { overflow: auto; padding: 6px 12px; min-height: 0; -webkit-overflow-scrolling: touch; }
.muted { color: var(--muted); font-size: calc(12px * var(--fs)); }
.layer-tools { display: flex; gap: 6px; align-items: center; padding: 8px 12px 0; flex-wrap: wrap; }
#layerFilter { flex: 1 1 120px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; }
#layerSort { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(13px * var(--fs)); min-height: 40px; }
#layerOnlyVis { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--fs)); color: var(--muted); min-height: 40px; }
#layerOnlyVis input { width: 20px; height: 20px; accent-color: var(--accent); }
/* ---- Katman yöneticisi: AutoCAD Layer Properties Manager düzeni ----------------------------
   Sütunlar: Durum (geçerli ✓) · Ad · Açık (ampul) · Dondur (güneş / kar tanesi) · Kilit · Renk ·
   Çizgi tipi · Kalınlık · Sayı. Dar panelde (telefon) her katman iki satırdır: üstte durum + ad +
   sayı, altta altı denetim; panel 600 px'ten genişse (aşağıdaki kap sorgusu) tek satır ve başlık
   satırı görünür — masaüstü tablosu. Renk kuralı AutoCAD'deki gibi: "olağan" durum soluk (açık,
   çözük, kilitsiz), "olağan dışı" durum renkli (kapalı ampul koyu, donuk kar tanesi mavi, kilit vurgu). */
.lhead, .lrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "cur name ct" "ctl ctl ctl"; align-items: center; column-gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(128,128,128,.14); }
.lhead { display: none; color: var(--muted); font-size: calc(11px * var(--fs)); text-transform: uppercase; letter-spacing: .3px; }
.lrow.sel { background: var(--btn-on); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lrow.cur .lc-name { font-weight: 700; }
.lrow.hid .lc-name { color: var(--muted); }
.lrow.frozen .lc-name { text-decoration: line-through; }
.lrow.faded .lc-name { opacity: .55; }
.lc-cur { grid-area: cur; width: 40px; height: 40px; border: 0; background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.lc-cur svg.ic { width: 20px; height: 20px; }
.lc-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--fs)); padding: 6px 0; cursor: pointer; }
.lc-ct { grid-area: ct; color: var(--muted); font-size: calc(12px * var(--fs)); font-variant-numeric: tabular-nums; padding-right: 8px; }
.lctl { grid-area: ctl; display: flex; align-items: center; gap: 4px; padding: 0 0 2px 8px; min-width: 0; }
.lctl .lc { width: 40px; height: 40px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
.lctl .lc svg.ic { width: 22px; height: 22px; }
.lctl .lc.st-on { color: var(--accent); }                 /* ampul yanıyor */
.lctl .lc.st-off { color: var(--muted); opacity: .55; }    /* ampul sönük */
.lctl .lc.st-frozen { color: #7fc4ff; }                   /* kar tanesi */
.lctl .lc.st-locked { color: var(--accent); }
.lctl .lc-sw .sw { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(128,128,128,.5); display: block; }
.lctl .lc-lt, .lctl .lc-lw { width: auto; padding: 0 8px; font-size: calc(12px * var(--fs)); color: var(--fg); background: var(--btn); border-color: var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lctl .lc-lt { flex: 1 1 auto; min-width: 56px; max-width: 120px; }   /* 340 px panelde daralır, ad kesilirse üç nokta */
/* Yazı blok düzende: inline-flex içinde üç nokta çalışmıyor, ortalanmış taşan ad ('CONTINUOUS') İKİ yandan kırpılıyordu */
.lctl .lc-lt, .lctl .lc-lw { display: block; line-height: 38px; text-align: center; }
.lctl .lc-lw { flex: 0 0 auto; min-width: 48px; }
.lctl .lc:active { filter: brightness(1.2); }
/* Tek satırlı (AutoCAD cetveli) düzen görüntü alanına değil PANELİN genişliğine bakar: 340 px'lik
   panelde tek satır sığmaz ve ad sütunu sıfıra iner; kap sorgusu desteklenmeyen eski WebView'da iki
   katlı düzen kalır (zarif düşüş). */
#layerList { container-type: inline-size; container-name: layerlist; }
@container layerlist (min-width: 600px) {
  .lhead, .lrow { grid-template-columns: 40px minmax(120px, 1fr) auto auto; grid-template-areas: "cur name ctl ct"; }
  .lhead { display: grid; }
  .lhead .lctl > span { width: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .lhead .lctl > span svg.ic { width: 18px; height: 18px; }
  .lhead .lctl > span.hl-lt, .lhead .lctl > span.hl-lw { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .lhead .lctl > span.hl-lt { width: 120px; } .lhead .lctl > span.hl-lw { width: 84px; }   /* 64 px'te EN 'LINEWEIGHT' 'LINEWEI…' oluyordu */
  .lctl { padding-left: 0; }
  .lctl .lc-lt { flex: 0 0 120px; } .lctl .lc-lw { flex: 0 0 84px; }
  .lc-ct { width: 44px; text-align: right; }   /* sabit genişlik: sayı 1 ya da 3 haneli olsun sütunlar satırdan satıra kaymaz */
}
.layer-actions { display: flex; gap: 6px; align-items: center; padding: 8px 12px 0; flex-wrap: wrap; }
.layer-actions .btn { min-height: 44px; }
.layer-actions .btn.icon { width: 44px; height: 44px; }
/* seçili ad HER ZAMAN kendi satırında ve sabit yükseklikte: seçim değişince şerit yeniden akmaz, liste sıçramaz (çift dokunuşun ikinci dokunuşu aynı öğeye iner) */
.layer-actions #layerSelName { flex: 1 0 100%; min-height: 18px; line-height: 18px; font-size: calc(12px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Renk seçici: 255 ACI rengi AutoCAD "Select Color › Index Color" ızgarası gibi; 1-9 standart, 250-255 griler ayrı satır */
.aci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 3px; }
.aci-grid button { aspect-ratio: 1; min-width: 26px; min-height: 26px; border: 1px solid rgba(128,128,128,.35); border-radius: 4px; padding: 0; }
.aci-grid button.active { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 1; }
.aci-std { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.aci-std button { width: 44px; height: 44px; border: 1px solid rgba(128,128,128,.45); border-radius: 8px; color: #fff; text-shadow: 0 0 3px #000; font-weight: 700; }
.aci-std button.active { outline: 3px solid var(--accent); outline-offset: 1px; }
.pick-list .item { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.pick-list .item.active { color: var(--accent); font-weight: 700; }
.pick-list .item .lw-bar { display: inline-block; width: 90px; background: currentColor; border-radius: 2px; }
.pick-list .item .lt-prev { display: inline-block; width: 90px; height: 0; border-top: 2px solid currentColor; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: calc(13px * var(--fs)); align-content: start; }
.kv .k { color: var(--muted); }
/* Ölçü panelinde anahtar sütunu en çok 9em: uzun anahtar ("Geschlossener Umfang", "Замкнутый периметр") kendi sütununda
   kırılır; değer satırları (parça uzunluğu ve ΔX / ΔY / açı) dar telefonda da tek satırda kalır */
#measureBody.kv { grid-template-columns: fit-content(9em) 1fr; }
.kv .v { word-break: break-word; font-variant-numeric: tabular-nums; white-space: pre-wrap; }
.kv .full { grid-column: 1 / -1; }
.kv .full.btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.kv input, .kv select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; }
.kv input[type=color] { min-height: 40px; padding: 2px; }
/* onay kutusu ve seçim düğmesi metin kutusu gibi %100 genişlik / 40 px almaz (boş beyaz kare görünüyordu) */
/*
 * Form içi onay kutusu ve seçim düğmesi: dokunma alanı 40 × 40 px (sınama: dokunma hedefleri ≥ 40 px),
 * görünen kutu 22 px. Eskiden metin kutusu kuralı (%100 genişlik, 40 px) yerel kutuyu dev bir BEYAZ kare
 * olarak çizdiriyordu. Renk temaya uyar: çerçeve --muted, işaretli dolgu --accent (maskeyle boyanır).
 */
.kv input[type=checkbox], .kv input[type=radio] { -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='9.5' y='9.5' width='21' height='21' rx='4.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / 40px 40px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='9.5' y='9.5' width='21' height='21' rx='4.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / 40px 40px no-repeat; }
.kv input[type=checkbox]:checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M13.5 20.5l4.5 4.5 9-10' fill='none' stroke='%231a1a1a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 40px 40px no-repeat, var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='8.3' y='8.3' width='23.4' height='23.4' rx='5' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='8.3' y='8.3' width='23.4' height='23.4' rx='5' fill='%23000'/%3E%3C/svg%3E"); }
.kv input[type=radio] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='10.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='10.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); }
.kv input[type=radio]:checked { background: var(--accent); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='10.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='10.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23000'/%3E%3C/svg%3E"); }
.kv input[type=checkbox]:disabled, .kv input[type=radio]:disabled { opacity: .45; cursor: default; }
.kv input[type=checkbox]:focus-visible, .kv input[type=radio]:focus-visible { outline: none; background-color: var(--fg); }
.kv label.chk { display: flex; align-items: center; gap: 8px; min-height: 40px; }
/* Tek satırda iki alan (özel kâğıt G × Y) ya da düğme + bilgi (PDF pencere seçimi) */
.kv .pair { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.kv .pair input, .kv .pair select { flex: 1 1 0; min-width: 0; width: auto; }
.kv .pair button { flex: 0 0 auto; }
.kv .pair small { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Yön seçimi en uzun seçeneği kadar geniş kalır: yanındaki ölçü yazısı onu daraltıp 'Landscape'i kesiyordu */
.kv .pair #pOrient { flex: 0 0 auto; }
.list { display: flex; flex-direction: column; }
.list .item { padding: 10px 4px; border-bottom: 1px solid rgba(128,128,128,.12); cursor: pointer; font-size: calc(13px * var(--fs)); min-height: 44px; }
.list .item small { color: var(--muted); display: block; }
.cam-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cam-item .cam-thumb { border-radius: 6px; background: #000; flex: 0 0 auto; }
.cam-item .nm { flex: 1 1 auto; }
.cam-add { gap: 8px; }
.cam-add input { flex: 1 1 auto; min-width: 0; }
.opt-text, .opt-num { padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; }
.opt-num { width: 110px; }
/* ---- Nesne yakalama (OSNAP) ---------------------------------------------------------------
   Ölçü panelindeki çip şeridi tek satırdır ve yana kayar (14 kip + dişli, üç satıra yayılsaydı ölçü
   sonuçlarına yer kalmazdı). Ayar kutusundaki kartlar AutoCAD Drafting Settings düzeninde: glif +
   kısaltma + ad; açık kip vurgu renkli. Glifler osnap.js'ten gelir, tuvaldeki işaretle aynıdır. */
.snapbar { display: flex; gap: 4px; padding: 6px 10px; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.snapbar::-webkit-scrollbar { display: none; }
.os-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .2px; }
.os-chip.on { color: var(--accent); border-color: var(--accent); background: var(--btn-on); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.os-chip.os-gear { width: 40px; padding: 0; justify-content: center; color: var(--fg); }
.os-chip .os-ic { width: 18px; height: 18px; }
.os-ic { width: 22px; height: 22px; display: block; }
.os-head .opt-note { padding: 0 0 6px; }
.os-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.os-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--btn); color: var(--fg); font: inherit; }
.os-card .os-ic { width: 26px; height: 26px; color: var(--muted); }
.os-card b { font-size: calc(12px * var(--fs)); letter-spacing: .3px; }
.os-card span { font-size: calc(10.5px * var(--fs)); color: var(--muted); text-align: center; line-height: 1.15; }
.os-card.on { border-color: var(--accent); background: var(--btn); background: color-mix(in srgb, var(--accent) 16%, var(--btn)); }
.os-card.on .os-ic, .os-card.on b { color: var(--accent); }
.os-once .os-card { min-height: 68px; }
.os-btns { margin: 6px 0 2px; }
/* ---- Seçim: rozet (sayı + kalem), seçim menüsü kartları, komut çubuğunda açık kip düğmesi ---- */
.sel-badge { position: absolute; z-index: 6; min-width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 14px; font: inherit; font-weight: 800; font-size: calc(15px * var(--fs)); box-shadow: var(--shadow); cursor: pointer; }
.sel-badge svg.ic { width: 18px; height: 18px; }
.sel-grid .os-card { min-height: 72px; }
.sel-grid .os-card svg.ic { width: 26px; height: 26px; color: var(--fg); }
.sel-grid .os-card span { color: var(--fg); }
.cmd-in button.on, #cmdBtns button.on { border-color: var(--accent); color: var(--accent); background: var(--btn); background: color-mix(in srgb, var(--accent) 14%, var(--btn)); }
.info-actions, .meas-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.meas-big { font-size: calc(20px * var(--fs)); font-weight: 700; padding: 8px 12px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.ctx-list .item { min-height: 44px; display: flex; align-items: center; }
.ctx-menu .item { gap: 12px; }
.ctx-menu .item svg.ic { width: 20px; height: 20px; color: var(--muted); }
.ctx-menu .item.off { opacity: .45; cursor: default; }
.ctx-menu .item .lk { margin-inline-start: auto; }
.ctx-menu .item .cmd-ad { min-width: 7.5em; font-variant-numeric: tabular-nums; }
.ctx-menu .sep { height: 6px; background: var(--line); background: color-mix(in srgb, var(--line) 55%, transparent); margin: 0; }   /* grup bandı: satırların alt çizgisiyle çift çizgi olmasın */
/* Hızlı seçim (QSELECT) penceresi: uygulama biçiminin iki seçeneği yan yana, sarar */
.qs-radio { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.menu { position: absolute; top: calc(50px + var(--safe-top)); right: 6px; z-index: 15; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; min-width: 260px; max-height: calc(100vh - 120px); overflow: auto; box-shadow: var(--shadow); }
.menu button { border: 0; background: transparent; color: var(--fg); text-align: left; padding: 10px 14px; font-size: calc(14px * var(--fs)); display: flex; align-items: center; gap: 12px; min-height: 44px; }
.menu button:active { background: var(--btn); }
.menu button svg.ic { color: var(--muted); }
.menu button.accent { color: var(--accent); font-weight: 600; }
.menu button.accent svg.ic { color: var(--accent); }
/* Paket satırı: paket renginde yıldız ve hafif sıcak zemin; yazı tema rengindedir (karşıtlık temadan) */
.menu button[data-act="pro"] { color: var(--fg); font-weight: 800; background: var(--btn-on); background: color-mix(in srgb, var(--t-premium) 12%, transparent); }
.menu button[data-act="pro"] svg.ic { color: var(--t-premium); }
/* grup ayırıcısı (v8.9.9): dosya · paneller · ekran · çıktı · araçlar · uygulama — sıra değişmedi, yalnız otuz satırlık
   menü göz gezdirilebilir oldu */
#moreMenu > :is([data-act="save"], [data-act="layouts"], [data-act="display"], [data-act="png"], [data-act="server"], [data-act="settings"]) { border-top: 1px solid var(--line); }
/* aç / kapa satırı (aria-pressed): sonda şerit karosundaki gibi durum noktası — boş halka kapalı, dolu vurgu açık */
.menu button[aria-pressed]::after { content: ""; flex: 0 0 auto; margin-inline-start: auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.menu button[aria-pressed="true"]::after { background: var(--accent); border-color: var(--accent); }
.menu button[aria-pressed="true"] svg.ic { color: var(--accent); }
.menu button[aria-pressed]:has(> .lk-pill)::after { margin-inline-start: 8px; }
.notesbar { position: absolute; left: 8px; right: 8px; bottom: 44px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; z-index: 6; }
/* Geniş ekranda not çubuğu düğmeleri kadar geniş, ortada (tablette 1264 px'lik yarı saydam şerit çizimin üstünü örtüyordu) */
@media (min-width: 900px) { .notesbar { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); } }
.notesbar button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--btn); color: var(--fg); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.notesbar button svg.ic { width: 20px; height: 20px; }
.notesbar button.active { outline: 2px solid var(--accent); }
.notesbar input[type=color] { width: 40px; height: 40px; border: 0; background: transparent; padding: 0; }
.toast { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); pointer-events: none; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; z-index: 50; width: max-content; max-width: 92vw; font-size: calc(13px * var(--fs)); display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); }
/* left: 50% ile konumlanan kutu, genişlik verilmezse kapsayıcının YARISINA sığdırılıyordu: uzun ileti dar bir sütuna
   dökülüyor, eylem düğmesinin yazısı ("Koordinat sistemi seç") düğmeden taşıyordu (v8.9.10) */
.toast .tx { flex: 1 1 auto; min-width: 0; }
.toast .act { flex: 0 0 auto; white-space: nowrap; pointer-events: auto; margin-inline-start: 4px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg); padding: 8px 12px; font-weight: 600; font-size: calc(13px * var(--fs)); min-height: 40px; min-width: 40px; }
.cmdbar:not([hidden]) ~ .toast { bottom: calc(var(--cmd-h) + 12px); }
.notesbar:not([hidden]) ~ .toast { bottom: 150px; }
.toast.error { border-left: 4px solid var(--danger); } .toast.warn { border-left: 4px solid var(--accent); } .toast.ok { border-left: 4px solid var(--ok); }
.legend { display: flex; gap: 12px; font-size: calc(12px * var(--fs)); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }

/* --- düzenleyici tuval katmanları ve komut satırı --- */
#cv3d { z-index: 3; touch-action: none; }
#ov { z-index: 4; }
/* İNCE ÇUBUK (v7.79). Kazanç iki yerden gelir: (1) BOŞTAKİ çubukta istem satırı girişle aynı satıra
   iner (96 px → ~48 px), (2) iç boşluk, yazı ve köşe yarıçapları daralır. Denetimler 44 px'ten 40 px'e
   iner ama DAHA AŞAĞI İNMEZ: 40 px uygulamanın kendi dokunma hedefi sözleşmesidir (test_shell 46).
   Eldiven kipi (body.glove) eski 44 px'lik hedefleri korur. */
.cmdbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bar); opacity: .97; border-top: 1px solid var(--line); font-size: calc(12px * var(--fs)); flex-wrap: wrap; }
/* İstem satırı: metin solda, İz noktası (TT) ve Ortho düğmeleri sağda (40 px: iki düğmeyle 296 px metin kalır, "Çizgi: İkinci noktayı seçin (devam eder)" 289 px tek satırda durur; Yakalama izi anahtarı karodadır — üçüncü düğme istemi sarıp çubuğu büyütüyordu) — giriş satırına düğme eklemek Bitir · Geri · İptal'i üçüncü satıra taşırıp
   tuvalden 50 px yiyordu (v7.61–7.62 kusuru); istem satırında zaten boş yer vardır, ek satır maliyeti yoktur */
.cmd-head { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; line-height: 1.25; }
/* BOŞTAKİ ÇUBUK TEK SATIR (v7.79). Komut çalışırken istem uzundur ve kendi satırını hak eder;
   boştayken ise yalnız "Komut:" yazar — girişle aynı satıra alınca çubuk 81 px'ten 49 px'e indi;
   v7.82 yoğun kipi onu 29 px'e çekti (aşağıdaki body.dense-bars bloğu).
   Dar ekranda flex-wrap yine devreye girer, metin sıkışmaz. */
.cmdbar.idle .cmd-head { flex: 0 1 auto; }
.cmdbar.idle #cmdText { flex: 0 1 auto; white-space: nowrap; }
.cmdbar #cmdText { flex: 1 1 auto; min-width: 0; color: var(--accent); font-weight: 600; font-size: calc(12.5px * var(--fs)); }
#cmdOrtho, #cmdTt, #cmdHide, #cmdHelp { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--btn); color: var(--fg); cursor: pointer; }
#cmdOrtho svg.ic, #cmdTt svg.ic, #cmdHide svg.ic, #cmdHelp svg.ic { width: 20px; height: 20px; }
/* Gizle: çubuğu kapatan tek dokunuşluk kaçış. Nötr ve sönük durur, istem metnini bastırmaz. */
#cmdHide, #cmdHelp { color: var(--muted); border-color: transparent; background: transparent; }
#cmdHide:active, #cmdHelp:active { background: var(--btn); }
#cmdOrtho.on, #cmdTt.on { border-color: var(--accent); color: var(--accent); background: var(--btn); background: color-mix(in srgb, var(--accent) 14%, var(--btn)); }
#cmdOrtho:active, #cmdTt:active { filter: brightness(1.2); }
body.glove #cmdOrtho, body.glove #cmdTt, body.glove #cmdHide, body.glove #cmdHelp { height: 38px; width: 48px; }
/* Komut çubuğu düğmeleri. Eskiden ↵ ve ? yazı tipinin ince karakterleriyle çizilen 40 px'lik yassı
   kutulardı ve telefonda güç okunuyordu. Şimdi: 44 px, 10 px köşe, 1 px kenarlık, 22 px SVG simge;
   Enter vurgu renginde BİRİNCİL düğmedir (çubuğun tek onay eylemi), ötekiler nötr. Simgeli metin
   düğmeleri (Bitir, Geri, İptal…) aynı yükseklik ve kenarlıkla dizilir; Bitir de birincildir. */
/* Giriş 84 px'e kadar daralabilir: yazılan koordinat kısadır ("1000,1000", "@500<45"); böylece Bitir · Geri ·
   İptal 412 px telefonda girişle AYNI satıra sığar ve çubuk iki satırda kalır (üçüncü satır çizim alanının
   %20'sini örter ve alt köşelere yapılan dokunuşları yutar). */
.cmd-in { display: flex; gap: 6px; flex: 1 1 0; min-width: 134px; }   /* taban 0: satır kırma kararı en küçük genişliğe (84 + 6 + 44) bakar, sonra artan yeri giriş alır */
.cmd-in input { flex: 1 1 0; min-width: 84px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; }
.cmd-in input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--btn-on); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.cmd-in button, #cmdBtns button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--btn); color: var(--fg); padding: 0 9px; font-size: calc(12.5px * var(--fs)); font-weight: 600; line-height: 1; min-height: 40px; min-width: 40px; cursor: pointer; white-space: nowrap; }
.cmd-in button svg.ic, #cmdBtns button svg.ic { width: 20px; height: 20px; }
/* Eldiven kipi eski (büyük) hedefleri korur. Yükseklik AŞAĞIDA tek yerde (52 px) verilir; burada
   bir zamanlar 44 px'lik ikinci bir kural daha vardı ve sonraki 52 px onu eziyordu — ölü kural
   kaldırıldı, yoksa yoğun kip eklenince üç katmanlı bir karışıklık oluyordu. */
body.glove .cmd-in button, body.glove #cmdBtns button { min-width: 44px; }
.cmd-in button.icon, #cmdBtns button.icon { padding: 0; width: 44px; }
.cmd-in button.primary, #cmdBtns button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.cmd-in button:active, #cmdBtns button:active { filter: brightness(1.2); }
body.glove .cmd-in input, body.glove .cmd-in button, body.glove #cmdBtns button { min-height: 52px; }
body.glove .cmd-in button.icon, body.glove #cmdBtns button.icon { width: 52px; }
#cmdBtns { display: flex; gap: 4px; flex-wrap: wrap; }
/* Faz 7e: mobilde çizim komutlarının seçenekleri tek satırlık, yana kayan şerittedir (editor.js cmdBtnsHtml); bugünkü düğmelerin satırı yükselmez */
#cmdBtns .cmd-sec { display: flex; gap: 4px; flex: 1 1 0; min-width: 48px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
#cmdBtns .cmd-sec::-webkit-scrollbar { display: none; }
#cmdBtns .cmd-sec button { flex: none; }
/*
 * YOĞUN ÇUBUK (v7.82) — body.dense-bars. Kullanıcının isteği: "komut satırı ... %50 küçültelim,
 * ekranda daha çok yer kalsın". v7.79'da boştaki çubuk iki satırdan bire indi (81 → 49 px); geriye
 * kalan yüksekliğin tamamı DENETİMLERİN kendisidir (40 px) — yani çubuğu daha da inceltmenin tek
 * yolu düğmeleri küçültmektir.
 *
 * NEREYE DOKUNULUR, NEREYE DOKUNULMAZ. Küçülen şeyler istem satırı (#cmdText, Ortho, İz noktası,
 * Gizle), giriş kutusu ve Enter'dır — boştaki çubuğu oluşturan ve kullanıcının şikâyet ettiği
 * satır budur: 49 px → 29 px (%41). #cmdBtns'teki EYLEM DÜĞMELERİ (Bitir · Geri · İptal ·
 * Pencere · Çokgen) DOKUNULMADAN 40 px'te kalır: onlar komut ortasında, çoğu zaman acele ve
 * sahada basılır; uygulamanın 40 px'lik dokunma hedefi sözleşmesi (test_shell 46) onlar içindir
 * ve bir yerleşim isteği uğruna gevşetilmez.
 *
 * TABAN 24 PX'TİR. Küçülen denetimlerde bile 24 px, WCAG 2.2 AA "Target Size (Minimum)"
 * ölçütünün sayısal tabanıdır; altına inilmez. Eldiven kipi (body.glove) her şeyi geri büyütür:
 * eşit özgüllükte kaynak sırası karar verdiği için glove geçersiz kılmaları bu bloğun ALTINDA
 * ve iki sınıflı (body.dense-bars.glove) yazılmıştır.
 */
body.dense-bars .cmdbar { padding: 1px 6px; gap: 4px; font-size: calc(11px * var(--fs)); }
body.dense-bars .cmdbar #cmdText { font-size: calc(11.5px * var(--fs)); }
/* Kırılma eşiği de daralır: düğmeler küçülünce 360 px telefonda Bitir · Geri · İptal girişle aynı
   satıra sığar ve ÜÇÜNCÜ satır kalkar — çizim alanından 30 px daha kazanılır. */
body.dense-bars .cmd-in { gap: 4px; min-width: 104px; }
body.dense-bars .cmd-in input { min-width: 64px; }
body.dense-bars .cmd-in input { min-height: 26px; padding: 2px 8px; border-radius: 7px; font-size: calc(12.5px * var(--fs)); }
body.dense-bars .cmd-in button { min-height: 26px; min-width: 40px; border-radius: 7px; padding: 0 7px; font-size: calc(11.5px * var(--fs)); }
body.dense-bars .cmd-in button svg.ic { width: 17px; height: 17px; }
body.dense-bars .cmd-in button.icon { width: 40px; }
/* v8.9.9: yükseklik yoğun kipte 24 px kalır (kullanıcı isteği), GENİŞLİK 40 px'e çıktı: yatayda yer var, hedef büyür */
body.dense-bars #cmdOrtho, body.dense-bars #cmdTt, body.dense-bars #cmdHide, body.dense-bars #cmdHelp { width: 40px; height: 24px; border-radius: 7px; }
body.dense-bars #cmdOrtho svg.ic, body.dense-bars #cmdTt svg.ic, body.dense-bars #cmdHide svg.ic, body.dense-bars #cmdHelp svg.ic { width: 17px; height: 17px; }
/* Eldiven kipi yoğun kipi EZER: büyük hedefe ihtiyacı olan kullanıcı ayarı açık unutmuş olabilir */
body.dense-bars.glove .cmd-in input, body.dense-bars.glove .cmd-in button { min-height: 52px; }
body.dense-bars.glove .cmd-in button { min-width: 44px; }
body.dense-bars.glove .cmd-in button.icon { width: 52px; }
body.dense-bars.glove #cmdOrtho, body.dense-bars.glove #cmdTt, body.dense-bars.glove #cmdHide, body.dense-bars.glove #cmdHelp { height: 38px; width: 48px; }
body.dense-bars.glove .cmdbar { padding: 4px 8px; gap: 6px; }
body.dense-bars.glove .cmd-in button svg.ic,
body.dense-bars.glove #cmdOrtho svg.ic, body.dense-bars.glove #cmdTt svg.ic, body.dense-bars.glove #cmdHide svg.ic, body.dense-bars.glove #cmdHelp svg.ic { width: 20px; height: 20px; }

/* --- şerit (araç çubuğu): sekmeler + gruplu karolar --- */
#toolbar { background: var(--bar); border-top: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.tb-tabs { display: flex; flex: 0 0 auto; overflow-x: auto; scrollbar-width: none; }
.tb-tabs::-webkit-scrollbar { display: none; }
.tb-tabs button { flex: 1 0 auto; min-width: 56px; border: 0; background: transparent; color: var(--muted); padding: 4px 6px 2px; height: 54px; font-size: calc(11px * var(--fs)); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.1; }
.tb-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tb-tabs button svg.ic { width: 24px; height: 24px; }
.tb-tabs button.tab-fav svg.ic { color: var(--accent); }
@media (max-width: 560px) { .tb-tabs button { padding: 4px 4px 2px; min-width: 44px; font-size: calc(10.5px * var(--fs)); } }
.tb-row { display: flex; gap: 8px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; align-items: flex-start; scroll-snap-type: x proximity; scroll-padding-inline: 8px; }   /* pay: yaslanan grubun ilk karosu ekran kenarına yapışmasın */
.tb-row::-webkit-scrollbar { display: none; }
/* Yaslanma KAROYADIR, gruba değil (v8.9.9): ekrandan geniş bir grubun (Ekran › Yardımcılar, sekiz karo) ortasındaki karo
   grup başına yaslanan kaydırmada ekranın 2 px dışında kalıyordu — klavye odağı ve scrollIntoView ona hiç ulaşamıyordu. */
.tb-group { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.tb-row button { scroll-snap-align: start; }
.tb-group + .tb-group { border-left: 1px solid var(--line); padding-left: 8px; }
.tb-tiles { display: flex; gap: 4px; }
.tb-caption { display: none; font-size: calc(9.5px * var(--fs)); color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.tb-row button { flex: 0 0 auto; min-width: var(--tile); min-height: var(--tb-h); border: 0; border-radius: var(--radius); background: var(--btn); color: var(--fg); padding: 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; touch-action: pan-x; }
.tb-row button .ic { width: calc(28px * var(--fs)); height: calc(28px * var(--fs)); }
.tb-row button .lb { font-size: calc(10px * var(--fs)); line-height: 1.1; white-space: nowrap; color: var(--muted); max-width: 100%; }
.tb-row button.active, .tb-row button.on { background: var(--btn-on); box-shadow: inset 0 0 0 2px var(--accent); }
.tb-row button.active .lb, .tb-row button.on .lb { color: var(--fg); }
.tb-row button.on::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tb-row button.dirty .ic { color: var(--accent); }
.tb-row button:disabled { opacity: .4; }
.tb-row button.fav-mark::before { content: ""; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7; }
.tb-row .tb-empty { color: var(--muted); font-size: calc(12px * var(--fs)); padding: 12px; align-self: center; }
#toolbar.collapsed .tb-row { display: none; }
/* KALICI SEÇ DÜĞMESİ (v7.93): sekme şeridinin başına YAPIŞIR, sekmeler altından kayar.
   Zemin opak olmak ZORUNDA: .tb-tabs overflow-x:auto'dur, saydam kalsaydı kayan sekmeler
   düğmenin altından görünürdü. Ölçüsü sekme karosuyla aynıdır (44 x 54), yani şerit büyümez. */
.tb-tabs .tb-pin { position: sticky; inset-inline-start: 0; z-index: 2; flex: 0 0 auto; min-width: 44px; height: 54px;
  border: 0; border-inline-end: 1px solid var(--line); background: var(--bar); color: var(--muted);
  padding: 4px 6px 2px; font-size: calc(11px * var(--fs)); font-weight: 600; white-space: nowrap;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.1; }
.tb-pin svg.ic { width: 24px; height: 24px; }
.tb-pin.active { color: var(--accent); }
/* Eldiven kipinde sekme şeridi için kural YOKTU (bulgu): karolar 44 px'te kalıyordu. İkisi birden büyür. */
body.glove .tb-tabs button, body.glove .tb-pin { min-width: 52px; height: 60px; }
#toolbar .tb-tabs .tb-collapse { flex: 0 0 auto; min-width: 40px; color: var(--muted); }
#toolbar .tb-tabs .tb-collapse svg.ic { transition: transform .18s; }
#toolbar.collapsed .tb-tabs .tb-collapse svg.ic { transform: rotate(180deg); }
/*
 * DOKUNMA PARILTISI (v8.6).
 *
 * Kullanıcı bildirimi: "Ekrandaki Seç komutunu tıkladığım anlaşılmıyor; tıkladığımda seçim
 * parıltısı gelsin." Haklı: şerit düğmelerinin, sekmelerin ve kalıcı Seç düğmesinin HİÇBİR
 * :active durumu yoktu; dokunuş ile komutun çalışması arasında geçen sürede ekran sessiz
 * kalıyordu, kullanıcı ikinci kez basıyordu. İki katman eklendi:
 *   (1) BASILI TUTARKEN — anlık parlaklık artışı (:active), gecikmesiz.
 *   (2) DOKUNUŞ ANINDA — 340 ms'lik vurgu halkası (.tap-flash, app.js her düğmeye takar).
 * Halka `outline` ile çizilir: düzeni bozmaz, komşu düğmeye taşmaz (offset -1px) ve mevcut
 * box-shadow'lu "açık" durumlarının (şerit karosu, seçili çip) üstünü örtmez.
 */
@keyframes tapFlash { 0% { outline-color: var(--accent); } 100% { outline-color: transparent; } }
.tap-flash { outline: 3px solid var(--accent); outline-offset: -1px; animation: tapFlash .34s ease-out forwards; }
.tb-row button:active, .tb-tabs button:active, .tb-pin:active, .st-quick button:active,
.btn:active, .fab:active, .chip:active, .ask-cell:active { filter: brightness(1.35); }
body.reduce-motion .tap-flash { animation-duration: 1ms; }
@media (prefers-reduced-motion: reduce) { .tap-flash { animation-duration: 1ms; } }
body.sun .tb-row button { border: 2px solid var(--line); }
body.glove { --tile: 64px; --tb-h: 64px; }
body.glove .tb-row button .lb { font-size: calc(11px * var(--fs)); }
body.glove .tb-row button .ic { width: calc(32px * var(--fs)); height: calc(32px * var(--fs)); }
body.glove .btn.icon { width: 48px; height: 48px; }
body.glove .st-quick button { width: 48px; height: 48px; }

/* açılır kutu (uzun basış ipucu · seçenek bölümü) */
.tb-pop { position: absolute; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; max-width: min(92vw, 380px); min-width: 200px; font-size: calc(13px * var(--fs)); }
/* Seçenek bölümü (Kesit, Z abartı…) alçak ekranda ekrandan taşıyordu: gövde kendi içinde kayar (v8.9.9). Kutunun kendisine
   overflow verilmez — alttaki ok (::after) kırpılırdı. */
.tb-pop .pop-body { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.tb-pop::after { content: ""; position: absolute; left: var(--arrow-x, 50%); bottom: -7px; width: 12px; height: 12px; background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.tb-pop.side::after { display: none; }
.tb-pop .pop-title { font-weight: 700; margin-bottom: 2px; }
.tb-pop .pop-hint { color: var(--muted); margin-bottom: 8px; }
.tb-pop .pop-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-pop .opt-sec { border-bottom: 0; padding-bottom: 0; }

/* --- widget'lar (Ekran sheet'i, 3B seçenekleri, erişilebilirlik) --- */
.opt-wrap { display: block; }
.opt-sec { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.opt-sec:last-child { border-bottom: 0; }
.opt-title { font-weight: 700; font-size: calc(12px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 4px; }
.opt-row { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.opt-row.opt-row-lb { min-height: 28px; }
.opt-row.focus { outline: 2px solid var(--accent); border-radius: 8px; }
.opt-lb { flex: 1 1 120px; font-size: calc(14px * var(--fs)); }
.opt-note { color: var(--muted); font-size: calc(12px * var(--fs)); padding: 4px 0; }
.opt-more summary { cursor: pointer; color: var(--accent); min-height: 40px; display: flex; align-items: center; font-size: calc(13px * var(--fs)); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 2px; background: var(--bg); max-width: 100%; }
.seg button { min-width: 64px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); padding: 0 10px; font-size: calc(13px * var(--fs)); white-space: nowrap; }
.seg button.on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
#displaySeg { margin-right: 4px; } #displaySeg button { min-width: 52px; height: 40px; }
.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .knob { position: absolute; inset: 0; border-radius: 16px; background: var(--btn); transition: background .15s; pointer-events: none; }
.switch .knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.switch input:checked + .knob { background: var(--accent); }
.switch input:checked + .knob::after { transform: translateX(20px); background: var(--accent-fg); }
.slider { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 0; }
.slider input[type=range] { flex: 1 1 auto; min-width: 80px; accent-color: var(--accent); height: 44px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -19px; border-radius: 50%; background: var(--accent); border: 10px solid var(--panel); box-shadow: 0 0 0 1px var(--line); }
.slider input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.slider input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 0; }
.slider output { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-size: calc(13px * var(--fs)); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.slider .dec, .slider .inc { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--btn); color: var(--fg); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.slider .dec svg.ic, .slider .inc svg.ic { width: 22px; height: 22px; }
.slider .dec:active, .slider .inc:active { filter: brightness(1.2); }
.range2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 4px 0; }
.range2 input[type=range] { grid-column: 1 / -1; accent-color: var(--accent); height: 40px; margin: 0; }
.range2 output { font-size: calc(12px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; }
.range2 .hi-v { text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.chip { height: 40px; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--muted); padding: 0 14px; font-size: calc(13px * var(--fs)); display: inline-flex; align-items: center; gap: 4px; }
.chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.chip .ct { font-weight: 600; opacity: .75; }
.preset-grid .chip { min-width: 84px; justify-content: center; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); color: var(--fg); font-weight: 700; font-size: calc(10px * var(--fs)); }
.swatches button.active { outline: 2px solid var(--accent); outline-offset: 1px; }
/* KATMANDAN karosu artık katmanın gerçek rengiyle boyanır; 'K' harfi her zemin üstünde okunsun */
.swatches button.bylayer { text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 2px var(--bg); }
.opt-color { width: 44px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: transparent; padding: 2px; }
.opt-sel { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; max-width: 100%; }
.v3opts .opt-sec.dim { opacity: .55; }
.a11y-sec .opt-row .btn { min-height: 40px; }

/* Renk tablosu (çizim stili) satırı: kaynak renk · ad · sayı · basılacak renk */
.ctb-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ctb-row .sw { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line); flex: 0 0 auto; }
.ctb-row b { font-weight: 600; }
.ctb-row .ar { margin-left: auto; color: var(--muted); }
.ctb-row input[type=color] { width: 52px; flex: 0 0 auto; }

/* PDF kutusundaki canlı sayfa önizlemesi: gerçek kâğıt oranı, kenar boşluğu, künye ve çizimin küçük resmi */
.pdf-prev { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 6px; }
.pdf-prev canvas { position: static; inset: auto; width: 100%; max-width: 340px; height: 150px; display: block; border-radius: 8px; background: rgba(127,127,127,.12); }
.pdf-prev .muted { font-size: 12px; }

/* --- gezinti FAB kümesi, yön tuşları, görünüm küpü, tur --- */
.navfabs { position: absolute; right: 12px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 5; transition: opacity .3s; }
.navfabs.idle { opacity: .45; }
/* Sıkışık kip: küme altıdan fazla düğme taşıyınca (PDF düğmesi açıkken) 44 px'e iner —
   yedi düğme, altı düğmenin kapladığı yere sığar ve çizimin sağ şeridi kapanmaz. */
.navfabs.dense { gap: 6px; }
.navfabs.dense .fab { width: 44px; height: 44px; font-size: 21px; }
.navfabs .fab { position: static; width: 48px; height: 48px; padding: 0; font-size: 22px; cursor: pointer; color: var(--fg); }
.navfabs .fab:disabled { opacity: .35; }
/* Sohbete gönderme düğmesi: FAB sütununun tek RENKLİ düğmesidir, aranmadan bulunsun diye.
   Yeşil, gönderilen yerin rengini çağrıştırır; işaret bizimdir (bkz. #i-send-chat). */
.navfabs .fab.send { background: #1faa53; border-color: #178e44; color: #fff; }
.navfabs .fab.send:active { background: #178e44; }
body[data-theme="hicontrast"] .navfabs .fab.send { background: #0b6b33; border-color: #000; }
.ic-wa { color: #1faa53; }
.btn.icon.wa svg { color: #1faa53; }
.navfabs .ic, .dpad .ic { width: 24px; height: 24px; }
.dpad { position: absolute; left: 12px; bottom: 16px; display: grid; grid-template-columns: 44px 44px 44px; grid-template-rows: 44px 44px 44px; gap: 2px; z-index: 5; }
.dpad button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font-size: 16px; display: flex; align-items: center; justify-content: center; }
.dpad [data-pan=up] { grid-column: 2; grid-row: 1; } .dpad [data-pan=left] { grid-column: 1; grid-row: 2; } .dpad [data-pan=right] { grid-column: 3; grid-row: 2; } .dpad [data-pan=down] { grid-column: 2; grid-row: 3; }
body.left-hand .navfabs { right: auto; left: 12px; }
body.left-hand .dpad { left: auto; right: 12px; }
.cmdbar:not([hidden]) ~ .navfabs, .cmdbar:not([hidden]) ~ .dpad { bottom: calc(var(--cmd-h) + 12px); }
/* GÖRÜNÜM KÜPÜ SAĞ ÜST KÖŞEDEDİR — AMA KÖŞE BOŞSA (v7.91).
   Zoom sütunu (#navFabs) ALTTAN YUKARI büyür: altı düğme (sohbete gönder · yakınlaştır ·
   uzaklaştır · sığdır · önceki görünüm · konum) 328 px eder. Komut çubuğu KAPALIYKEN sütunun
   tepesi köşeye ulaşmaz, orası boş kalır — küpün yeri orasıdır, çizimin üstünü örtmez.
   Komut çubuğu AÇILINCA sütun --cmd-h kadar yukarı kayar ve köşeye dayanır; o durumda küp
   sütunun soluna çekilir (body.cmd-open, editor.syncCmd ekler). Alçak görüntü alanında sütun
   zaten hep tepeye ulaşır, orada da sola çekilir. Pusula küpün yerini okuduğu için
   (view3d.js) kendiliğinden birlikte kayar; küpün ALTINDA değil YANINDA durur, çünkü köşede
   küpün altı doğrudan sütunun ilk düğmesidir. */
.cube { position: absolute; right: 10px; top: 10px; width: 100px; padding: 4px; border-radius: 12px; background: var(--panel); background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--line); color: var(--fg); touch-action: none; }
.cube .cube-svg { width: 76px; height: 76px; margin: 0 auto; overflow: visible; }
/* HUD açıkken küp kutunun HEMEN altına oturur: yükseklik view3d'den gelir (--hud3-h).
   Eski 62 px, iki satırlı HUD'dan kalmaydı; yoğun HUD 16 px'e inince arada boş şerit kalıyordu. */
.cube.below-hud { top: calc(var(--hud3-h, 24px) + 6px); }
.cube [data-face] { cursor: pointer; }
.cube [data-face]:hover, .cube [data-corner]:hover { fill-opacity: .6; }
body.cmd-open .cube { right: 72px; }
body.left-hand .cube { right: auto; left: 10px; }
body.left-hand.cmd-open .cube { right: auto; left: 72px; }
/* Karşılama turu çizim ekranına aittir ve z-index'i 20'dir, yani ana ekranın (9) ÜSTÜNDEdir:
   ana ekrana geçildiğinde turun kartı ana ekranın düğmelerini engelliyordu (sınama yakaladı).
   Ana ekran kipinde gizlenir; çizime dönüldüğünde kaldığı yerden devam eder. */
body.homemode #tour { display: none; }
.tour { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 12px; background: transparent; z-index: 20; pointer-events: none; }
.tour-card { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; max-width: 420px; width: 100%; box-shadow: var(--shadow); }
.tour-card p { margin: 8px 0 10px; color: var(--muted); font-size: calc(14px * var(--fs)); line-height: 1.45; }
.tour-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.tour-dots i.on { background: var(--accent); }
.tour .row { justify-content: flex-end; }

/* --- yatay / alçak ekran: şerit sağda dikey ray --- */
/* Eşik 640: 7" tablet yatayda (1024 × 600) yığılı telefon düzeni çizime 340 px bırakıyor, yakınlaştırma sütunu
   tepeden kesiliyordu (büyük ekran araştırması P2/P3). Ray düzeninde çizim alanı tam yüksekliktir. */
@media (orientation: landscape) and (max-height: 640px) {
  #app { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top top" "main tabs" "main tb" "st st"; }
  body.left-hand #app { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "top top" "tabs main" "tb main" "st st"; }
  /* Alçak ekranda da dokunma hedefi 40 px (v8.9.9; önceden 36 / 32 px): yükseklik iç boşluktan alınır — üst çubuk yine 40 px */
  #topbar { padding-top: var(--safe-top); padding-bottom: 0; min-height: 40px; }
  #topbar .btn.icon { width: 40px; height: 40px; } #topbar .btn { min-height: 40px; }
  #layoutTabs { width: 116px; flex-wrap: nowrap; max-height: 48px; border-bottom: 0; border-left: 1px solid var(--line); padding: 4px; gap: 4px; overflow-x: auto; }
  #layoutTabs button { min-height: 40px; padding: 4px 8px; flex: 1 1 auto; }
  body.left-hand #layoutTabs { border-left: 0; border-right: 1px solid var(--line); }
  #statusbar { min-height: 40px; padding-top: 0; padding-bottom: calc(0px + var(--safe-bottom)); }
  .st-quick button { width: 40px; height: 40px; } .st-chip { min-height: 32px; } button.st-chip { min-height: 40px; }
  #toolbar { flex-direction: row; border-top: 0; border-left: 1px solid var(--line); width: 116px; min-height: 0; }
  body.left-hand #toolbar { border-left: 0; border-right: 1px solid var(--line); }
  .tb-tabs { flex-direction: column; overflow-y: auto; overflow-x: hidden; width: 44px; flex: 0 0 44px; border-right: 1px solid var(--line); }
  .tb-tabs button { flex: 0 0 auto; min-width: 0; width: 44px; height: 50px; padding: 2px 0; border-bottom: 0; border-right: 2px solid transparent; flex-direction: column; gap: 2px; font-size: calc(9px * var(--fs)); font-weight: 600; }
  .tb-tabs .tb-pin { position: sticky; inset-inline-start: auto; top: 0; width: 44px; height: 50px; min-width: 0; padding: 2px 0; border-inline-end: 0; border-bottom: 1px solid var(--line); font-size: calc(9px * var(--fs)); }
  body.glove .tb-tabs button, body.glove .tb-pin { min-width: 0; height: 56px; }
  .tb-tabs button.active { border-right-color: var(--accent); }
  .tb-tabs button svg.ic { width: 24px; height: 24px; }
  .tb-tabs button span { max-width: 42px; overflow: hidden; text-overflow: ellipsis; }
  #toolbar .tb-tabs .tb-collapse { display: none; }
  .tb-row { flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 6px 6px; flex: 1 1 auto; min-height: 0; gap: 6px; }
  .tb-group + .tb-group { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 6px; }
  .tb-tiles { flex-direction: column; }
  .tb-row button { width: 58px; min-width: 58px; touch-action: pan-y; }
  /* Rayda karo 58 px'te KALIR (v8.9.9): 900 px'ten geniş telefonlarda (915 × 412) aşağıdaki geniş ekran kuralı en küçük
     genişliği 64 px'e çekiyordu; ray 60 px bıraktığı için karolar ekranın sağ kenarından kesiliyordu. Uzun etiket
     ("Doğrusal ölçü", "Yakalama ayarları") iki satıra sarar; sığmayanı üç noktayla biter, tam adı ipucundadır. */
  #toolbar .tb-row button { width: 58px; min-width: 58px; padding-inline: 2px; }
  #toolbar .tb-row button .lb { font-size: calc(9.5px * var(--fs)); white-space: normal; text-align: center; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
  #toolbar.collapsed { width: 44px; }
  #toolbar.collapsed .tb-tabs { border-right: 0; }
  .panel.bottom { left: auto; width: calc(min(60vw, 420px) + var(--safe-right)); right: 0; max-height: 100%; border-radius: 12px 0 0 0; padding-right: var(--safe-right); }
  body.left-hand .panel.bottom { right: auto; left: 0; border-radius: 0 12px 0 0; width: calc(min(60vw, 420px) + var(--safe-left)); padding-right: 0; padding-left: var(--safe-left); }
  .toast { bottom: 20px; }
  .cmdbar:not([hidden]) ~ .navfabs { flex-direction: row; left: 50%; right: auto; transform: translateX(-50%); }   /* alçak ekranda sütun sığmaz: ortada satır (küp/pusula ve yön tuşlarından uzak) */
  body.left-hand .cmdbar:not([hidden]) ~ .navfabs { left: 50%; right: auto; }
  .notesbar { left: 8px; right: 72px; transform: none; width: auto; } body.left-hand .notesbar { left: 72px; right: 8px; }   /* geniş ekran ortalamasını geri al: ray yanında tam boy */
  /* güvenli alan rayın 116 / 44 px'ine EKLENİR (box-sizing: border-box): eskiden dolgu genişlikten yiyordu ve yatay iPhone'da
     (çentik 47 px) karolar kesilip dokunulamıyordu */
  #toolbar { padding-right: var(--safe-right); width: calc(116px + var(--safe-right)); } #toolbar.collapsed { width: calc(44px + var(--safe-right)); }
  body.left-hand #toolbar { padding-right: 0; padding-left: var(--safe-left); width: calc(116px + var(--safe-left)); } body.left-hand #toolbar.collapsed { width: calc(44px + var(--safe-left)); }
}

/* --- alçak görüntü alanı: zoom sütunu hep tepeye ulaşır, küp ve pusula onun soluna --- */
@media (max-height: 720px) {
  .cube { right: 72px; } body.left-hand .cube { right: auto; left: 72px; }
}

/* --- dar ekran (telefon dikey): üst çubuk sıkışmasın, dosya adı okunsun --- */
@media (max-width: 560px) {
  /* Dokunma hedefi 40 px'in altına inmez (v8.9.9; önceden 36 px genişlikteydi): yer, düğmeler arasındaki
     boşluktan alınır — yedi düğme + dosya adı 360 px'te de sığar (7 × 40 + 7 × 2 + 12 + 4 = 310, ada 50 px). */
  #topbar { gap: 2px; padding-left: calc(6px + var(--safe-left)); padding-right: calc(6px + var(--safe-right)); }
  body:not(.glove) #topbar .btn.icon { width: 40px; height: 40px; }
  #btnDisplay { display: none; }   /* Ekran ayarları şeritte ve Diğer menüsünde var */
  /* Geri ve Ana sayfa eklenince üst çubuk sekiz düğmeye çıktı: Aç yalnız simge kalır
     (etiketi ana ekranda ve Diğer menüsünde yazıyla duruyor), böylece 360 px'te de sığar. */
  #btnOpen span { display: none; }
  #btnOpen { width: 40px; height: 40px; padding: 0; }
  #topbar .filewrap { margin-inline: 2px; }
  .filewrap { min-width: 48px; }
  .filesub { display: none; }
}

/* --- geniş ekran (tablet): grup başlıkları, yan panel yuvası --- */
@media (min-width: 900px) {
  .tb-caption { display: block; }
  .tb-row button { min-width: 64px; }
  .panel.right { position: static; width: 100%; height: 100%; flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  #side .panel.bottom { position: static; max-height: none; flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; width: auto; }   /* width: yatay telefonun .panel.bottom genişliği (420 px) 400 px'lik yuvada Kapat düğmesini kesiyordu */
  #side .sheet-handle { display: none; }
  .side.docked { display: flex; }
}
/* --- çok geniş ekran (büyük tablet yatay, DeX, masaüstü): yan sütun 640 px — katman yöneticisi tek satırlı
   AutoCAD cetveline geçer (kap sorgusu 600 px), çizim alanına yine en az 640 px kalır --- */
@media (min-width: 1280px) {
  .side { flex-basis: 640px; }
}
/* --- geniş ekranda ALT SAYFALAR SAĞDAN AÇILIR (ölçüm, bilgi, belge, ayarlar…). Tam genişlikte alttan açıldığında
   1280 px'lik ekranda yüksekliğin %57'sini kaplıyor, şeridi, durum çubuğunu ve yandaki katman sütununu örtüyor,
   sağ üçte ikisi boş kalıyordu; ölçüm sırasında dördüncü köşeye dokunuş panelin üstüne düşüyordu (büyük ekran
   araştırması P1). Yan sütuna yerleşmiş paneller (#side içindekiler) bundan etkilenmez. --- */
@media (min-width: 900px) {
  #app > .panel.bottom { left: auto; right: 0; width: min(44vw, 520px); max-height: calc(100% - 56px); border-radius: 14px 0 0 0; }
  body.left-hand #app > .panel.bottom { right: auto; left: 0; border-radius: 0 14px 0 0; }
  html[dir="rtl"] #app > .panel.bottom { right: auto; left: 0; border-radius: 0 14px 0 0; }
  html[dir="rtl"] body.left-hand #app > .panel.bottom { left: auto; right: 0; border-radius: 14px 0 0 0; }
  /* komut öneri listesi girişin altında, okunur genişlikte (1920 px'e yayılınca ad solda, açıklama en sağda kalıyordu) */
  .cmd-sug { max-width: 640px; }
}
/* fare ile üzerine gelme geri bildirimi (dokunmatikte :hover yapışır, yalnız gerçek işaretçide) */
@media (hover: hover) and (pointer: fine) {
  .tb-row button:hover, .tb-tabs button:hover, .btn:hover, .st-quick button:hover, #topbar .btn:hover { background: var(--btn); background: color-mix(in srgb, var(--btn) 80%, var(--fg) 20%); }
  .menu button:not(:disabled):hover, .home-nav button:hover, .fab:not(:disabled):hover { background: var(--btn); background: color-mix(in srgb, var(--btn) 70%, transparent); }
  .tb-row button:disabled:hover, .btn:disabled:hover { background: var(--btn); } .st-quick button:disabled:hover { background: transparent; }
  /* Kendi zemini olan düğmeler: genel ".btn:hover" (aynı özgüllük, sonra gelir) onların zeminini ezip gri-lacivert yapıyordu (ana "Dosya aç" amberi
     ~#4f5a68, yazı koyu kalınca karşıtlık ~2,4:1 ve düğme devre dışı görünüyordu; ".cta" degradesi "background" kısaltmasıyla silinirdi).
     Burada marka zemini korunur, yalnız hafifçe aydınlanır. */
  .btn.primary:not(:disabled):hover, .btn.accent:not(:disabled):hover { background: var(--accent); background: color-mix(in srgb, var(--accent) 88%, #fff); }
  .btn.cta:not(:disabled):hover { background: var(--cta-b); background-image: linear-gradient(180deg, var(--cta-a), var(--cta-b)); filter: brightness(1.07); }
  .btn.on:not(:disabled):hover, .btn.icon.on:not(:disabled):hover { background: var(--accent-bg, rgba(0, 120, 212, .15)); filter: brightness(1.15); }
  .btn.icon.on:not(:disabled):hover { background: var(--btn-on); }
}

/* --- belge görünümü (PDF / Word / Excel / arşiv / resim / metin) --- */
.docview { position: absolute; inset: 0; z-index: 8; background: var(--bg); display: flex; flex-direction: column; }
/*
 * BELGE BAŞLIĞI İKİ SATIRA SARAR. Başlık tek bir flex satırıydı: geri düğmesi, dosya adı,
 * beş eylem düğmesi, ana ekran ve kapat. Yedi düğme 40'ar piksel yer kaplar; 360 piksellik
 * bir telefonda ada yer kalmıyor, `flex: 1 1 auto` + `min-width: 0` onu sıfıra kadar
 * eziyordu. Sonuç sahada görüldü: "2025-1811648_Birim_Fiyat_Teklif_Cetveli.pdf" ekranda
 * yalnız "2" olarak, boyut satırı da üç parçaya bölünmüş çıkıyordu.
 *
 * Çözüm satır kırmaktır: başlık `flex-wrap` olur ve ada satırın en az %60'ı ayrılır.
 * Sığmayınca eylem düğmeleri (ve arkalarındaki ana ekran / kapat) kendiliğinden ALT
 * SATIRA geçer; ad birinci satırın tamamını alır. Ad artık kesilmez, sarar — en çok üç
 * satır (absürt uzunlukta bir ad belge gövdesini aşağı itmesin), tamamı `title`
 * özniteliğinde de durur.
 */
.doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bar); flex: 0 0 auto; }
.doc-title { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.doc-title strong { font-size: calc(14px * var(--fs)); white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.doc-title small { color: var(--muted); font-size: calc(11px * var(--fs)); white-space: nowrap; }
.doc-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.doc-tools { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--line); background: var(--bar); flex: 0 0 auto; flex-wrap: wrap; min-height: 0; }
.doc-tools:empty { display: none; }
.doc-tools .sp { flex: 1 1 auto; }
.doc-page { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: calc(13px * var(--fs)); }
.doc-page input { width: 56px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); text-align: center; min-height: 40px; }
.doc-search { flex: 1 1 160px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; min-width: 0; }
.doc-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-gutter: stable; }   /* klasik çubuklu tarayıcıda çubuk payı baştan ayrılır: sayfa "genişliğe sığdır" ölçümü çubuk belirince 15 px taşmaz */
.doc-body.kind-xlsx, .doc-body.grid-edit, .doc-body.editing-text { scrollbar-gutter: auto; }   /* kaydırma bu türlerde iç öğededir: boş çubuk payı bırakma */
/* docs.js belge açılınca odağı kaydırıcıya verir (tabindex=-1): klavyeyle kaydırmak için gerekir, odak çizgisi gerekmez */
.doc-body:focus, .doc-body:focus-visible, .xlsx-wrap:focus, .xlsx-wrap:focus-visible { outline: none; }
/* Ctrl+A / Ctrl+C belge başlığını ve araç satırı yazısını seçmesin (belge içeriği seçilebilir kalır; #app .docview user-select:text miras alınır) */
.doc-head, .doc-tools, #docTools { -webkit-user-select: none; user-select: none; }
.doc-body.kind-pdf, .doc-body.paged { background: #3a3f47; padding: 8px 8px 40px; }   /* yakınlaştırılmış sayfada yatay kaydırma da gerekir: pan-x pan-y (.doc-body); .paged = Word sayfa görünümü */
.light .doc-body.kind-pdf, body[data-theme="sepia"] .doc-body.kind-pdf, .light .doc-body.paged, body[data-theme="sepia"] .doc-body.paged { background: #cfd4db; }
.doc-loading { color: var(--muted); padding: 20px; text-align: center; }
.pdf-pages { margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.pdf-page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.pdf-page img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }   /* sayfa resmi sürüklenip bırakılmaz (hayalet resim); sol sürükleme kaydırmadır */
.pdf-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-select: none; user-select: none; }   /* web: PDF.js sayfası (docs.js › pdfJsCiz) */
.pdf-page .pdf-no { position: absolute; left: 8px; top: 8px; font-size: 11px; color: #888; -webkit-user-select: none; user-select: none; }
.pdf-page.ready .pdf-no { display: none; }
.doc-embed { display: block; width: 100%; height: 100%; border: 0; }   /* satır içi öğe taban çizgisi boşluğu dış kapta 6 px taşma ve ikinci kaydırma çubuğu yapıyordu */
.docx-page { margin: 0 auto; background: #fff; padding: 28px 24px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.35); max-width: 100%; }   /* akış görünümü */
/* Word sayfa görünümü: .docx-stack sarmalayıcı (ölçekli boyut → kaydırma alanı), .docx-pages yığın (transform: scale, sol üst köken), .docx-sheet sayfa (belgedeki boyut + kenar boşlukları, sığmayan blokla uzar) */
.docx-stack { position: relative; margin: 0 auto; }
.docx-pages { transform-origin: 0 0; display: flex; flex-direction: column; gap: 10px; }
.docx-sheet { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); box-sizing: border-box; }
.docx-sheet-in { position: relative; display: flow-root; }   /* flow-root: ilk/son bloğun kenar boşluğu dışarı sızmasın (sayfa boyu ve offsetTop ölçümü sabit kalır) */
.docx-sheet .docx-no { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 10px system-ui, sans-serif; color: #999; pointer-events: none; }
.docx-more { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.docx-more:empty { display: none; }
/* --- PDF düzenleme (Pro): sayfa yığını + SVG açıklama katmanı --- */
.pdfe-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 24px; }
.pdfe-page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); flex: 0 0 auto; max-width: 100%; }
.pdfe-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; transform-origin: 50% 50%; pointer-events: none; }
.pdfe-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdfe-stack[data-tool="pan"] .pdfe-layer { pointer-events: none; touch-action: pan-y; }   /* el aracı: parmakla kaydırma serbest */
.pdfe-stack:not([data-tool="pan"]) .pdfe-layer { touch-action: none; cursor: crosshair; }
.pdfe-stack[data-tool="erase"] .pdfe-layer { cursor: pointer; }
.pdfe-stack[data-tool="erase"] .pdfe-ann:hover { outline: 2px dashed var(--danger, #d94b4b); }
.pdfe-hit { pointer-events: stroke; }
.pdfe-stack[data-tool="pan"] .pdfe-hit { pointer-events: none; }
.pdfe-page.on { outline: 2px solid var(--accent); outline-offset: 2px; }   /* etkin sayfa: döndürme ve silme buna uygulanır */
.pdfe-no { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font: 10px system-ui, sans-serif; color: var(--muted); pointer-events: none; }
.pdfe-colors, .pdfe-ws { display: inline-flex; gap: 4px; align-items: center; }
.pdfe-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.pdfe-color.on { border-color: var(--fg); box-shadow: 0 0 0 2px var(--panel); }
/* renk paletinin "biçimi kaldır" hücresi: boş, kesik çizgili yuvarlak */
.pdfe-color.grid-nofill { background: transparent; border: 2px dashed var(--muted); }
/* araç çubuğundaki açılır seçimler (paragraf biçemi / punto) */
.doc-sel { height: 30px; max-width: 108px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--fg); font: 12px system-ui, sans-serif; padding: 0 4px; }
.pdfe-w { width: 26px; height: 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); display: grid; place-items: center; padding: 0; cursor: pointer; }
.pdfe-w.on { border-color: var(--accent); }
.pdfe-w i { display: block; width: 14px; background: var(--fg); border-radius: 4px; }
.doc-tools .btn.on { border-color: var(--accent); color: var(--accent); }
/* --- Word düzenleme: yerinde metin düzenleme --- */
.docx-page.doc-editing { outline: 2px solid var(--accent); outline-offset: 3px; caret-color: var(--accent); }
.docx-page.doc-editing:focus { outline-color: var(--accent); }
body.editmode #docContent { touch-action: auto; }
.doc-warn { font-size: calc(11px * var(--fs)); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* .doc çözümleyici uyarısı (araç satırı) */
.docx-text { color: #111; font-family: "Times New Roman", Georgia, serif; font-size: 11pt; line-height: 1.35; overflow-wrap: break-word; }
.docx-text p { margin: 0 0 6pt; } .docx-text h1, .docx-text h2, .docx-text h3, .docx-text h4 { font-family: system-ui, sans-serif; color: #1f3b6e; margin: 14pt 0 6pt; line-height: 1.2; }
.docx-text h1 { font-size: 18pt; } .docx-text h2 { font-size: 15pt; } .docx-text h3 { font-size: 13pt; } .docx-text h4 { font-size: 12pt; }
.docx-text .li { text-indent: -14pt; padding-left: 14pt; } .docx-text .bul { display: inline-block; min-width: 14pt; white-space: nowrap; margin-right: 2pt; }   /* uzun numara (2.2.2.1.) im kutusunda kırılmasın */
.docx-text .tab { display: inline-block; width: 24pt; } .docx-text img { max-width: 100%; height: auto; }
.docx-text .pagebreak { border-top: 1px dashed #bbb; margin: 16pt -24px; }
.docx-text a { color: #0645ad; }
.docx-tbl { border-collapse: collapse; margin: 6pt 0; max-width: 100%; }
.docx-tbl td { border: 1px solid #999; padding: 3pt 5pt; vertical-align: top; }
.docx-tbl td p { margin: 0; }
/* Excel: kaydırılan kutu .xlsx-wrap'tır (iki eksen birden). Gövde kaydırılmaz, yoksa dikey kaydırma dışarıya
   kaçar ve başlık satırı ile satır numarası sütunu ekranda kalamaz (position: sticky en yakın kaydırıcıya bakar).
   Yakınlaştırma yazı boyuyladır; dolgu ve en büyük hücre genişliği bu yüzden em cinsindendir. */
.doc-body.kind-xlsx, .doc-body.grid-edit { overflow: hidden; display: flex; flex-direction: column; }
.doc-body.kind-xlsx .xlsx-wrap, .doc-body.grid-edit .xlsx-wrap { flex: 1 1 auto; min-height: 0; }
.xlsx-wrap { overflow: auto; background: #fff; color: #111; border-radius: 4px; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* border-collapse: separate — çökertilmiş kenarlıklar tabloya aittir, yapışkan hücrenin katmanına girmez ve
   donmuş başlığın altından ince çizgi/metin sızar (Chromium'da bilinen davranış). Ayrı kenarlıkta her hücre
   kendi çizgisini taşır: sağ + alt verilir, ilk satır ve ilk sütuna üst/sol eklenir; ızgara çift çizgisiz çıkar. */
.xlsx-tbl { border-collapse: separate; border-spacing: 0; font-size: 12px; font-family: system-ui, sans-serif; }
.xlsx-tbl th, .xlsx-tbl td { border-right: 1px solid #d7dbe2; border-bottom: 1px solid #d7dbe2; }
.xlsx-tbl tr:first-child th { border-top: 1px solid #c9ced6; }
.xlsx-tbl tr > *:first-child { border-left: 1px solid #c9ced6; }
.xlsx-tbl th { background: #eef1f5; color: #445; font-weight: 600; border-right-color: #c9ced6; border-bottom-color: #c9ced6; padding: .25em .5em; text-align: center; position: sticky; }
/* Katman sırası önemli: satır numarası sütunu başlık satırının ALTINDA kalmalı, yoksa kaydırırken numaralar
   başlığın üzerine biner. Özgüllükleri eşit olduğundan başlık kuralı sonra gelir ve z-index'i o belirler. */
.xlsx-tbl tr th:first-child { left: 0; z-index: 1; }        /* satır numarası sütunu solda donar */
.xlsx-tbl tr:first-child th { top: 0; z-index: 2; }         /* sütun başlığı satırı üstte donar */
.xlsx-tbl tr:first-child th:first-child { z-index: 3; }     /* köşe hücresi ikisinin de üstünde */
.xlsx-tbl td { padding: .25em .5em; white-space: nowrap; max-width: 27em; overflow: hidden; text-overflow: ellipsis; }
/* Izgara düzenleyici: hücreler contenteditable; kırpma yerine kaydırma (yazarken metnin sonu görünsün) */
.xlsx-tbl.grid-ed td { min-width: 4.5em; overflow: visible; text-overflow: clip; cursor: text; }
.xlsx-tbl.grid-ed td:focus { outline: 2px solid #2d7ff9; outline-offset: -2px; background: #fffbe6; position: relative; z-index: 4; }
/* Düz metin düzenleyici: gövdeyi doldurur, tek başına kaydırılır */
.doc-body.kind-text.editing-text { overflow: hidden; display: flex; }
.doc-edit-txt { flex: 1 1 auto; width: 100%; min-height: 60vh; box-sizing: border-box; resize: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; background: var(--panel); color: var(--fg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(13px * var(--fs)); line-height: 1.5; white-space: pre; overflow: auto; }
/* Yeni dosya seçicisi: tür başına bir karo (simge, ad, uzantı) */
.new-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 0; }
.new-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--btn); color: var(--fg); cursor: pointer; }
.new-item:active { background: var(--btn-on); }
.new-item svg.ic { width: 26px; height: 26px; color: var(--accent); }
.new-item span { font-size: calc(12.5px * var(--fs)); text-align: center; line-height: 1.15; }
.new-item small { color: var(--muted); font-size: calc(10.5px * var(--fs)); }
@media (max-width: 340px) { .new-grid { grid-template-columns: repeat(2, 1fr); } }
.xlsx-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Hizayı artık sayı biçimi söyler (xlfmt): sayı ve tarih sağa, mantık ve hata ortaya, metin sola. */
.xlsx-tbl td.ctr { text-align: center; }
.doc-tabs { padding: 0; border: 0; background: transparent; flex: 1 1 auto; }
.doc-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: calc(12px * var(--fs-doc, 1))/1.45 ui-monospace, "Roboto Mono", monospace; color: var(--fg); }   /* --fs-doc: docs.js textZoom (Ctrl+tekerlek / Ctrl +/-) */
.doc-body.nowrap .doc-pre { white-space: pre; }
.doc-img { display: block; margin: 0 auto; max-width: none; }
/*
 * BÖLGEYİ PDF YAP (bolge.js): belge gövdesinin üstünde seçim katmanı. Katman docView'e göre konumlanır (bolge.js
 * yerlestir), dokunuşu belgeye geçirmez (touch-action: none) — kaydırmak için "Kaydır" düğmesi katmanı geçirgen yapar.
 * Seçimin dışı box-shadow ile karartılır; köşe tutamakları 44 px dokunma alanlıdır (görünen nokta 16 px). Çubuk altta durur.
 */
.bolge-kat { position: absolute; z-index: 6; overflow: hidden; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.bolge-kat.kaydir { pointer-events: none; cursor: auto; }
.bolge-kat.kaydir .bolge-cubuk, .bolge-kat.kaydir .bolge-tut { pointer-events: auto; }
.bolge-alan { position: absolute; inset: 0; }
.bolge-sec { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 200vmax rgba(10,14,20,.42); cursor: move; box-sizing: border-box; }
.bolge-kat.kaydir .bolge-sec { box-shadow: 0 0 0 200vmax rgba(10,14,20,.25); }
.bolge-tut { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; touch-action: none; }
.bolge-tut::after { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); box-sizing: border-box; }
.bolge-tut[data-k="nw"] { left: 0; top: 0; cursor: nwse-resize; } .bolge-tut[data-k="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.bolge-tut[data-k="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .bolge-tut[data-k="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.bolge-sec.ic-etiket .bolge-olcu { bottom: auto; top: 4px; left: 4px; margin: 0; }   /* seçim katmanın üst kenarına yakınsa ölçü içeride */
.bolge-olcu { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: var(--accent-fg); font: 600 11px system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.bolge-cubuk { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--bar); border-top: 1px solid var(--line); cursor: auto; }   /* altta: başparmağa yakın, sayfanın üst kenarını örtmez */
.bolge-cubuk .sp { flex: 1 1 auto; }
.bolge-ipucu { font-size: calc(12px * var(--fs)); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolge-cubuk .btn.on { border-color: var(--accent); color: var(--accent); }
.bolge-onizle .pdf-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.doc-card { max-width: 480px; margin: 24px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.doc-card svg.ic { width: 40px; height: 40px; color: var(--accent); }
.doc-card p { margin: 0; color: var(--muted); font-size: calc(13px * var(--fs)); }
.doc-card.pick { flex-direction: row; justify-content: space-between; text-align: left; margin: 4px 0 8px; padding: 10px 12px; }
.doc-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 0 8px; color: var(--muted); }
.doc-crumbs .chip { height: 36px; padding: 0 10px; }
.arc-list .arc-item { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.arc-item svg.ic { color: var(--muted); flex: 0 0 auto; }
.arc-item .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-item small { flex: 0 0 auto; display: inline; }
.arc-item .lbtn { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
/* --- Google Drive --- */
.drive-account { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.drive-account .avatar { width: 32px; height: 32px; border-radius: 50%; }
.drive-account .acc { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.drive-account .acc b { font-size: calc(13px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-account .acc small { color: var(--muted); font-size: calc(11px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-tools { padding: 6px 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.drive-tools input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; }
.drive-tools .btn { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 40px; }
.drive-tools .btn.gez { flex: 1 1 100%; }
.drive-tools .gez-ipucu { flex: 1 1 100%; margin: 0; font-size: calc(12px * var(--fs)); }
.drive-crumbs { padding: 4px 12px 0; }
.drive-crumbs .chips { padding: 2px 0; }
body.docmode #navFabs, body.docmode #dpad, body.docmode #cube3d { display: none !important; }
/*
 * KOMUT SATIRINI GERİ GETİREN DÜĞME (v7.85). Gizle düğmesi çubuğu kapatıyor ve yalnız
 * 3,2 saniyelik bir ileti geri dönüş yolunu söylüyordu; ileti geçince ekranda hiçbir iz
 * kalmıyordu ve kullanıcı çubuğu geri açamıyordu. Düğme çubuğun DURDUĞU yerde, durum
 * çubuğunun hemen üstünde ve ORTADA durur: solda yön tuşları (dpad), sağda zoom düğmeleri
 * vardır, orta boştur. Yazılıdır — yalnız simge "daha belirgin olsun" isteğini karşılamazdı.
 * Yoğun kip bu düğmeyi KÜÇÜLTMEZ: bulunması gereken tek çıkış yolu odur, 40 px'te kalır.
 */
.cmdshow { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 7;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 21px;
  background: var(--bar); color: var(--accent); font-size: calc(12.5px * var(--fs)); font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); cursor: pointer; }
.cmdshow .ic { width: 20px; height: 20px; }
.cmdshow:active { background: var(--btn); }
body.glove .cmdshow { min-height: 52px; padding: 0 20px; border-radius: 26px; }
body.glove .cmdshow .ic { width: 24px; height: 24px; }
body.docmode .cmdshow { display: none !important; }
/*
 * YAKALAMA ADAY SEÇİCİ (v7.87). Parmakla nişan alıp bırakınca, açıklık içinde birden çok aday
 * varsa bu çip sırası çıkar. Numaralar tuvaldeki işaretlerle AYNIDIR: kullanıcı hangi çipin
 * hangi noktaya karşılık geldiğini renkten değil SAYIDAN okur. Çipler 40 px dokunma hedefinde
 * kalır — bu aparatın bütün amacı parmakla rahat seçebilmektir, küçültülmez.
 */
.snappick { position: absolute; z-index: 8; display: flex; gap: 6px; max-width: calc(100% - 16px);
  overflow-x: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: 0 4px 16px rgba(0, 0, 0, .45); scrollbar-width: none; }
.snappick::-webkit-scrollbar { display: none; }
.snappick button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--btn); color: var(--fg); font-size: calc(12px * var(--fs)); cursor: pointer; }
.snappick button.on { border-color: var(--accent); color: var(--accent); }
.snappick button.x { color: var(--muted); padding: 0 12px; }
.snappick .no { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--accent); color: #0b1020; font-size: calc(11px * var(--fs)); font-weight: 700; }
.snappick .os-ic { width: 18px; height: 18px; }
body.glove .snappick button { min-height: 52px; padding: 0 14px; }
body.docmode .snappick { display: none !important; }

/*
 * Yön tuşları (dpad) açıkken alt şerit kalabalıktır: dpad bir yanda, zoom düğmeleri öteki yanda.
 * Ortada duran pil dpad'in üstüne biniyordu (eldiven kipinde ölçüldü: 133-279 ile 12-148 çakışıyor).
 * Pil, iki öbeğin arasındaki boş koridora kaydırılır; sol el kipinde dpad ile zoom yer değiştirdiği
 * için kaydırma da ters yöne olur.
 */
body.dpad-on .cmdshow { left: auto; right: 76px; transform: none; }
body.dpad-on.left-hand .cmdshow { left: 76px; right: auto; }


/* --- Dosya Aç merkezi (open.js) --- */
.open-panel { max-height: 70%; }
/* Dikey esnek kutuda başlık, sekme (chip) ve araç satırı küçülmez; yer daralırsa yalnız dosya listesi (#openBody) kaydırılır.
   .open-chips overflow-x:auto olduğundan en küçük yüksekliği 0'dı ve liste uzayınca sekme düğmeleri yarıya kadar ezilip kesiliyordu. */
.open-panel > .panel-head, .open-panel > .open-chips, .open-panel > .open-tools { flex: 0 0 auto; }
.open-panel > #openBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.open-chips { padding: 6px 12px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.open-chips::-webkit-scrollbar { display: none; }
.open-chips .chip { flex: 0 0 auto; padding: 0 12px; }
.open-tools { display: flex; gap: 6px; align-items: center; padding: 6px 12px 0; }
.open-tools input[type=search] { flex: 1 1 90px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(14px * var(--fs)); min-height: 40px; }
.open-tools select { flex: 0 1 auto; max-width: 30%; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: calc(12px * var(--fs)); min-height: 40px; }
.open-tools .btn.icon.on { color: var(--accent); background: var(--btn-on); }
.open-sec { font-weight: 700; font-size: calc(12px * var(--fs)); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 2px; }
.open-roots { padding: 4px 0 6px; }
.open-roots .chip { max-width: 100%; }
.open-roots .chip.dim { opacity: .5; }
.open-crumbs .chip { height: 40px; }   /* .doc-crumbs 36 px verir; dokunma hedefi ≥ 40 px */
.open-crumbs .sp { flex: 1 1 auto; }
.open-crumbs .lbtn { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.open-item { min-height: 48px; }
.open-item .nm { display: flex; flex-direction: column; line-height: 1.2; white-space: normal; }
.open-item .nm > svg.ic { display: none; }
.open-item.fav .nm > svg.ic { display: inline-block; width: 14px; height: 14px; color: var(--accent); position: absolute; }
.open-item .nm { position: relative; }
.open-item.fav .nm { padding-right: 18px; }
.open-item.fav .nm > svg.ic { right: 0; top: 2px; }
.open-meta { display: block; color: var(--muted); font-size: calc(11px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-item.dim { opacity: .5; }
.open-item .open-chev { transform: rotate(-90deg); color: var(--muted); }
.open-thumb { width: 48px; height: 36px; border-radius: 6px; object-fit: cover; background: #0f141b; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.light .open-thumb, body[data-theme="sepia"] .open-thumb, body[data-theme="light"] .open-thumb { background: var(--btn); }
.open-thumb.noimg svg.ic { color: var(--muted); }
.open-acts { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 8px; border-bottom: 1px solid rgba(128,128,128,.12); }
.open-acts .chip { height: 40px; }
.open-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; padding: 6px 0; }
.open-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; min-height: 48px; }
.open-tile .open-thumb { width: 96px; height: 72px; }
.open-tile .nm, .open-tile .open-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(11px * var(--fs)); }
.open-tile > svg.ic { position: absolute; left: 6px; top: 6px; width: 14px; height: 14px; color: var(--accent); }
.open-tile .lbtn { position: absolute; right: 0; top: 0; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.open-tile.dim { opacity: .5; }
.open-pick { margin: 6px 0 4px; }
.open-warn { color: var(--accent); font-size: calc(12px * var(--fs)); padding: 2px 0 6px; }
body.glove .open-item { min-height: 56px; }

/* çoklu seçim (ZIP yapma): satır başındaki onay kutusu ve seçim şeridi */
.selbox { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; }
.selbox.on { background: var(--accent); border-color: var(--accent); }
.selbox svg.ic { width: 14px; height: 14px; color: #fff; }
.open-item.sel-on, .open-tile.sel-on { background: var(--btn-on); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 10px; }
.open-tile .selbox { position: absolute; left: 6px; bottom: 6px; }
.open-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.open-sel .sel-msg { flex: 1 1 auto; min-width: 0; }
#openSel.on { color: var(--accent); }
body.glove .selbox { width: 24px; height: 24px; }

/* görsel stil ızgarası (açılır kutu) */
.vs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 8px; }
.vs-grid button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; min-height: 56px; border: 1px solid var(--line); border-radius: 10px; background: var(--btn); color: var(--fg); padding: 6px 2px; }
.vs-grid button svg.ic { width: 28px; height: 28px; }
/* Etiket iki satıra sarar: 412 dp'de beş sütunlu ızgarada 'Shaded with edges', 'Schattiert mit Kanten' gibi
   adlar tek satıra sığmıyor, karonun iki yanından taşıyordu. */
.vs-grid button span { font-size: calc(9.5px * var(--fs)); color: var(--muted); white-space: normal; text-align: center; line-height: 1.15; overflow-wrap: break-word; max-width: 100%; }
.vs-grid button.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--btn-on); }
.vs-grid button.on span { color: var(--fg); }
@media (max-width: 400px) { .vs-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------------------
 * Sağdan sola diller (Arapça). <html dir="rtl"> gelince satır akışı, esnek
 * kutular ve ızgaralar kendiliğinden aynalanır; burada yalnız mutlak konumlu
 * öğeler, fiziksel kenarlıklar ve fiziksel hizalamalar düzeltilir.
 * Çizim tuvali ile belge yüzeyleri (PDF, Word, Excel sayfaları) soldan sağa
 * kalır: onların içeriği kâğıdın kendi düzenidir, arayüz yönüyle dönmez.
 * ------------------------------------------------------------------------- */
html[dir="rtl"] .side { border-left: 0; border-right: 1px solid var(--line); }
/* Ölçü okumaları (sayı, birim, Δ, açı, "X ; Y" koordinatı) teknik metindir: sağdan sola düzende de soldan
   sağa akar. Yalıtılmazsa çift yönlü metin kuralı birimi sayının önüne alır ve koordinatı "Y ; X" gösterir. */
html[dir="rtl"] #measureBig,
html[dir="rtl"] #measureBody .v { direction: ltr; unicode-bidi: isolate; text-align: right; }
html[dir="rtl"] .pro-features { padding-left: 0; padding-right: 0; }   /* onay imi flex öğesidir: iki yönde de girinti yok */
html[dir="rtl"] .recent .item,
html[dir="rtl"] .menu button,
html[dir="rtl"] .doc-card.pick { text-align: right; }
html[dir="rtl"] .slider output,
html[dir="rtl"] .range2 .hi-v { text-align: left; }
html[dir="rtl"] .fab { right: auto; left: 12px; }
html[dir="rtl"] .panel.right { right: auto; left: 0; border-radius: 0 12px 12px 0; }
html[dir="rtl"] .menu { right: auto; left: 6px; }
html[dir="rtl"] .toast .act { margin-left: 0; margin-right: 4px; }
html[dir="rtl"] .toast.error, html[dir="rtl"] .toast.warn, html[dir="rtl"] .toast.ok { border-left-width: 1px; border-right-width: 4px; }
html[dir="rtl"] .toast.error { border-right-color: var(--danger); }
html[dir="rtl"] .toast.warn { border-right-color: var(--accent); }
html[dir="rtl"] .toast.ok { border-right-color: var(--ok); }
html[dir="rtl"] .legend i { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .tb-group + .tb-group { border-left: 0; padding-left: 0; border-right: 1px solid var(--line); padding-right: 8px; }
html[dir="rtl"] .tb-row button.on::after { right: auto; left: 5px; }
html[dir="rtl"] .tb-row button.fav-mark::before { left: auto; right: 4px; }
html[dir="rtl"] #displaySeg { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .switch .knob::after { left: auto; right: 3px; }
html[dir="rtl"] .switch input:checked + .knob::after { transform: translateX(-20px); }
html[dir="rtl"] .navfabs { right: auto; left: 12px; }
html[dir="rtl"] body.left-hand .navfabs { left: auto; right: 12px; }
html[dir="rtl"] .dpad { left: auto; right: 12px; }
html[dir="rtl"] body.left-hand .dpad { right: auto; left: 12px; }
html[dir="rtl"] .cube { right: auto; left: 10px; }
html[dir="rtl"] body.cmd-open .cube { right: auto; left: 72px; }
html[dir="rtl"] body.left-hand .cube { left: auto; right: 10px; }
html[dir="rtl"] body.left-hand.cmd-open .cube { left: auto; right: 72px; }
html[dir="rtl"] .open-item.fav .nm { padding-right: 0; padding-left: 18px; }
html[dir="rtl"] .open-item.fav .nm > svg.ic { right: auto; left: 0; }
html[dir="rtl"] .open-tile > svg.ic { left: auto; right: 6px; }
html[dir="rtl"] .open-tile .lbtn { right: auto; left: 0; }
/* Yön bildiren gezinme simgeleri aynalanır (v8.9.9): sağdan sola arayüzde "Geri" sağı, önceki / sonraki görünüm okuma
   yönünü gösterir. Yön tuşları (#dpad) çizim tuvalinin yönüne bağlıdır ve tuval soldan sağa kalır: ızgara aynalanınca
   "sola kaydır" düğmesi sağa düşüyordu, bu yüzden küme soldan sağa dizilir. */
html[dir="rtl"] :is(#btnBack, #homeBack, #openPanel [data-open="close"], #docView [data-doc="back"]) svg.ic,
html[dir="rtl"] svg.ic:has(> use[href="#i-prev"]), html[dir="rtl"] svg.ic:has(> use[href="#i-next"]) { transform: scaleX(-1); }
html[dir="rtl"] .dpad { direction: ltr; }
@media (orientation: landscape) and (max-height: 640px) {
  html[dir="rtl"] #layoutTabs { border-left: 0; border-right: 1px solid var(--line); }
  html[dir="rtl"] body.left-hand #layoutTabs { border-right: 0; border-left: 1px solid var(--line); }
  html[dir="rtl"] #toolbar { border-left: 0; border-right: 1px solid var(--line); padding-right: 0; padding-left: var(--safe-left); width: calc(116px + var(--safe-left)); }
  html[dir="rtl"] #toolbar.collapsed { width: calc(44px + var(--safe-left)); }
  html[dir="rtl"] body.left-hand #toolbar { border-right: 0; border-left: 1px solid var(--line); padding-left: 0; padding-right: var(--safe-right); width: calc(116px + var(--safe-right)); }
  html[dir="rtl"] body.left-hand #toolbar.collapsed { width: calc(44px + var(--safe-right)); }
  html[dir="rtl"] .tb-tabs { border-right: 0; border-left: 1px solid var(--line); }
  html[dir="rtl"] .tb-tabs button { border-right: 0; border-left: 2px solid transparent; }
  html[dir="rtl"] #toolbar.collapsed .tb-tabs { border-left: 0; }
  html[dir="rtl"] .tb-group + .tb-group { border-right: 0; padding-right: 0; }
  html[dir="rtl"] .panel.bottom { right: auto; left: 0; border-radius: 0 12px 0 0; }
  html[dir="rtl"] body.left-hand .panel.bottom { left: auto; right: 0; border-radius: 12px 0 0 0; }
  html[dir="rtl"] .notesbar { left: 8px; right: 72px; }
  html[dir="rtl"] body.left-hand .notesbar { left: 72px; right: 8px; }
}
/* Belge yüzeyleri kâğıdın kendi yönünde kalır: sayfa numarası, sütun donması ve
   sayı hizalaması arayüz aynalanınca bozulmasın. Metnin kendi iki yönlü akışı
   (Arapça bir Word belgesi) tarayıcının bidi algoritmasıyla zaten doğru çıkar. */
html[dir="rtl"] .pdf-page, html[dir="rtl"] .docx-page, html[dir="rtl"] .docx-sheet,
html[dir="rtl"] .pdfe-stack, html[dir="rtl"] .xlsx-tbl, html[dir="rtl"] .txt-body,
html[dir="rtl"] #cv, html[dir="rtl"] #cv3d, html[dir="rtl"] #ov, html[dir="rtl"] .stage { direction: ltr; }   /* #ov: kaplama tuvali (ölçek çubuğu "1 km", ölçü etiketleri) RTL'de metni sağa hizalayıp kesiyordu */

/* Drive kurulum kartı: paket adı / imza SHA-1 / yönlendirme adresi — dokununca panoya kopyalanır */
.kv-copy { display: block; width: 100%; text-align: left; margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); }
.kv-copy small { display: block; color: var(--muted); font-size: calc(11px * var(--fs)); }
.kv-copy code { display: block; font-size: calc(12px * var(--fs)); word-break: break-all; line-height: 1.35; }
html[dir="rtl"] .kv-copy { text-align: right; }

/* Sayım panelindeki oransal çubuk: değerin yanında, satır yüksekliğini bozmadan */
.cnt-h { margin: 10px 0 2px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.cnt-h span { color: var(--muted); font-variant-numeric: tabular-nums; }
.cbar { display: inline-block; vertical-align: middle; width: 84px; height: 6px; margin-left: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cbar i { display: block; height: 100%; background: var(--accent); }
/* Çok alanlı giriş kutusu (askForm): etiket solda, alan sağda; dar ekranda alt alta */
.ask-form { display: grid; gap: 8px; }
.ask-form .ask-row { display: grid; grid-template-columns: minmax(96px, 40%) 1fr; gap: 8px; align-items: center; }
.ask-form .ask-lb { color: var(--muted); font-size: calc(13px * var(--fs)); }
.ask-form input, .ask-form select { width: 100%; box-sizing: border-box; font-size: calc(15px * var(--fs)); }
.ask-form .chk { display: flex; align-items: center; gap: 8px; }
.ask-hint { margin-top: 8px; font-size: calc(12px * var(--fs)); }
.ask-form .ask-row-grid { grid-template-columns: 1fr; gap: 4px; }
.ask-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ask-grid .ask-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 1px solid var(--line, #3a4250); border-radius: 8px; background: transparent; color: var(--fg, #e6e8ee); font-size: calc(11px * var(--fs)); cursor: pointer; }
.ask-grid .ask-cell svg { width: 44px; height: 44px; display: block; color: var(--fg, #e6e8ee); }
.ask-grid .ask-cell.on { border-color: var(--accent, #ff9f0a); box-shadow: inset 0 0 0 1px var(--accent, #ff9f0a); color: var(--accent, #ff9f0a); }
.ask-grid .ask-cell.on svg { color: var(--accent, #ff9f0a); }
@media (max-width: 360px) { .ask-form .ask-row { grid-template-columns: 1fr; gap: 2px; } }
/* Tablo çıkarma önizlemesi: dar ekranda yatay kaydırılır, gövde asla taşmaz */
.tbl-prev { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.tbl-prev table { border-collapse: collapse; font-size: calc(12px * var(--fs)); }
.tbl-prev td { border: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; }


/* ==========================================================================================
   DWG OfficeZip — BEKLEME ANİMASYONLARI (#loading örtüsü)
   ------------------------------------------------------------------------------------------
   NE ZAMAN HANGİ SINIF
     #loading.modal            → sınıf yoksa var olan .spinner görünür (geri uyumluluk).
     #loading.modal.load-cad   → çizim çözümleniyor / DXF kuruluyor / sahne hazırlanıyor.
                                 (kalem planı çizer, sonra kıvrılıp gülen surata döner)
     #loading.modal.load-doc   → PDF · DOCX · XLSX · TXT belgesi açılıyor, sayfa dizgisi.
     #loading.modal.load-out   → dışa aktarma, yazdırma, PDF üretme, toplu çıktı.
     #loading.modal.load-d3    → 3B sahne kurulumu, katı model, görünüm küpü hazırlığı.
     #loading.modal.load-cloud → bulut indirme / yükleme, paylaşım, eşitleme.
   app.js YALNIZ kapsayıcının sınıfını değiştirir; beş çeşidin işaretlemesi HTML'de durur ve
   görünmeyen çeşit display:none ile kapalıdır (hiç canlandırılmaz, pil yakmaz).

   NEDEN BU SÜRELER
     Bekleme örtüsü dakikalarca açık kalabilir (büyük DWG). Göz, saniyenin altındaki ritmi
     "acele" olarak okur ve yorar; 2,5 sn'nin altı huzursuz eder, 4 sn'nin üstü "takıldı"
     izlenimi verir. Bu yüzden tek olaylı döngüler 3,0-4,0 sn arasındadır; iki perdeli 'cad'
     görseli tek istisnadır (perde başına 3 sn'nin altında kalır):
       cad 6,0s (kalem planı çizer, sonra kıvrılıp surata döner — iki perdeli tek anlatı
                 olduğu için ötekilerden uzun; uzun döngü tekrar yorgunluğunu da azaltır,
                 gerekçesi kendi bölümünde)
       doc 3,2s (satır dizilmesi; satırlar 0,13s aralıkla basamaklanır)
       out 3,0s (iki sayfa 1,5s faz farkıyla → kesintisiz akış, görünür ritim 1,5s)
       d3  4,0s (tam tur; 90°/s'nin altı, baş döndürmeyen ağırlıkta bir dönüş)
       cloud 3,2s (nokta akışı; üç nokta 1,07s aralıkla, boşluksuz kolon)
     İlerleme çubuğu: gerçek dolumda 0,28s yumuşama (app.js sıçramalı yüzde verse de göz
     kaymayı sürekli görür), üstünde gezen ışık şeridi 2,6s.

   DURGUN KİP (body.reduce-motion · prefers-reduced-motion)
     Her parçanın CANLANDIRILMAMIŞ (statik) CSS değeri, döngünün TAMAMLANMIŞ hâli olacak
     şekilde seçilmiştir: plan tam çizilmiş, belge satırları dolu, sayfa yarı çıkmış, küp
     izometrik açıda durur, noktalar kolon boyunca eşit aralıklı dizilir. Bu yüzden durgun
     kipte tek yapılan `animation:none` demektir — donmuş bir kare değil, bitmiş bir resim
     çıkar.

   BİÇİM KURALLARI
     Sabit renk yok: her şey :root belirteçlerinden (currentColor = var(--fg)). CSS ölçüleri
     calc(<px> * var(--fs)); tek istisna 1 px kıl çizgilerdir (kenarlık, ızgara), onlar app.css
     gibi ölçeklenmez. SVG içindeki px değerleri KULLANICI BİRİMİdir (viewBox 0 0 120 120),
     --fs ile çarpılmaz — ölçeği kapsayıcının --la boyu verir. Yalnız transform / opacity /
     stroke-dashoffset canlandırılır; width · height · top · left · filter canlandırılmaz.
     Metin gömülmez.
   ========================================================================================== */


/* ---- 1. ÖRTÜNÜN ZEMİNİ: temaya uyan yer + çok soluk milimetrik kâğıt ızgarası ------------- */
/* .modal'ın sabit koyu zemini #loading'de temaya devredilir; iki katman da negatif z-index
   ile örtünün KENDİ yığın bağlamında kalır (z-index:40 + position:absolute), içeriğin altına
   girer, tuvale taşmaz. Yarı saydamlık ayrı katmanın opacity'siyle verilir — böylece
   color-mix() gerekmez (eski WebView sürümleri için). */
#loading {
  background: none;
  color: var(--fg);
  --la: min(calc(148px * var(--fs)), 48vw);   /* bekleme görselinin kenar uzunluğu */
}
#loading::before {                                  /* yer rengi */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--bg); opacity: .93;
}
#loading::after {                                   /* milimetrik kâğıt: 8 px ince, 40 px kalın */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .15;
  background:
    repeating-linear-gradient(to right,  var(--line) 0 calc(1.4px * var(--fs)), transparent calc(1.4px * var(--fs)) calc(40px * var(--fs))),
    repeating-linear-gradient(to bottom, var(--line) 0 calc(1.4px * var(--fs)), transparent calc(1.4px * var(--fs)) calc(40px * var(--fs))),
    repeating-linear-gradient(to right,  var(--line) 0 1px, transparent 1px calc(8px * var(--fs))),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(8px * var(--fs)));
}
/* açık temalarda aynı opaklık daha çok göze çarpar, kısılır; yüksek karşıtlıkta desen
   okumayı zorlaştırmasın diye en aza iner */
body[data-theme="light"] #loading::after,
body[data-theme="sepia"] #loading::after { opacity: .11; }
body[data-theme="hicontrast"] #loading::after { opacity: .07; }
#loading .sub { color: var(--muted); }
#loading > * { position: relative; }                 /* içerik iki dokunun üstünde kalır */


/* ---- 2. GÖRSEL LEVHASI ve ÇEŞİT SEÇİMİ --------------------------------------------------- */
.loadart {
  display: none;                                     /* sınıf yoksa: klasik .spinner çalışır */
  width: var(--la); height: var(--la);
  flex: 0 0 auto; align-items: center; justify-content: center;
  padding: calc(12px * var(--fs));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.8);
  box-shadow: var(--shadow);
}
.la { display: none; width: 100%; height: 100%; overflow: visible; }

#loading.load-cad   .loadart, #loading.load-doc   .loadart, #loading.load-out .loadart,
#loading.load-d3    .loadart, #loading.load-cloud .loadart { display: flex; }
/* zengin görsel varken dönen daire ikinci bir bekleme işareti olur; kaldırılır */
#loading.load-cad   .spinner, #loading.load-doc   .spinner, #loading.load-out .spinner,
#loading.load-d3    .spinner, #loading.load-cloud .spinner { display: none; }

#loading.load-cad   .la-cad   { display: block; }
#loading.load-doc   .la-doc   { display: block; }
#loading.load-out   .la-out   { display: block; }
#loading.load-cloud .la-cloud { display: block; }
#loading.load-d3    .la-d3    { display: grid; place-items: center; }

/* ortak çizim kalemi: her çeşit currentColor ile çizer, vurgu yalnız anlam taşıyan parçada */
.la-cad, .la-doc, .la-out, .la-cloud {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* eldiven kipinde örtü de büyür: uzaktan / kalın parmakla bakılıyor demektir */
body.glove #loading { --la: min(calc(172px * var(--fs)), 54vw); }
body.glove #loading .btn { min-height: calc(52px * var(--fs)); min-width: calc(120px * var(--fs)); }


/* ---- 3. 'cad' — açılış anlatısı: baştan sona akan TEK DÖNGÜ (9,0 s) ------------------------
   NEDEN DÖNGÜ, NEDEN AŞAMAYA BAĞLI DEĞİL
     Görsel bir aralık önce gerçek yüzdeye bağlanmıştı: yüzde hangi banda düşerse o resim
     görünüyordu. Doğru bilgiyi veriyordu ama ANLATIYI BOZUYORDU — hızlı açılan bir dosyada
     resimler sıçrayarak geçiyor, yavaş bir aşamada tek kare donup kalıyordu; hiçbir hareket
     baştan sona görülmüyordu. Artık çizim kendi zamanında, kesintisiz ve sürekli tekrar
     ederek akar; nerede olunduğunu BAŞLIK, ALT YAZI, ÇUBUK ve AŞAMA NOKTALARI söyler.
     Böylece iki iş ayrılır: görsel anlatır, metin bilgilendirir.

   DÖNGÜNÜN BEŞ PERDESİ (yüzdeler 9,0 s'nin yüzdesidir)
       0 → 22   pafta açılıyor: kıvrık köşeli sayfa, üstünden iki kez tarayan ışık
      24 → 42   katmanlar: dört levha birlikte açılır
      44 → 60   geometri: dikmeler ve çatı taban çizgisinden yükselir
      62 → 86   plan: dış duvar ile orta bölme TEK KALEM DARBESİYLE (Euler yolu — hiçbir
                duvar iki kez geçilmez), sonra iç bölmeler, en sonda kırpma imleri
      88 → 100  onay imi ve sönüş; döngü başa döner
     Perdeler 2 %'lik (0,18 s) opaklık geçişleriyle devredilir, yani sıçrama olmaz. Her
     parçanın keyframe'i aynı 9 s'lik saati kullandığı için perdeler ayrışamaz.

   DİKİŞ
     Her perdenin opaklığı hem 0 %'de hem 100 %'de sıfırdır (0. perde ilk 2 %'de açılır), yani
     döngü başa dönerken görünür hiçbir parça sıçramaz.

   RENKLER
     İki belirteç: --cad-hi (vurgu: tarama, dikmeler, kırpma imi, onay) ve --cad-dim (yapı
     çizgisi). Tema başına tanımlıdır; bölüm içinde tek bir sabit renk yoktur.

   DURGUN KİP
     Animasyonlar kapanır ve statik değerler devreye girer. Statik hâl BİLGİ VEREN karedir:
     plan perdesi görünür ve plan TAM ÇİZİLİdir; pafta, katmanlar, geometri ve onay gizli.
     Süs yerine işin resmi kalır. */

#loading.load-cad { --la: min(calc(196px * var(--fs)), 62vw); }   /* anlatı görseli daha büyük okunur */
body.glove #loading.load-cad { --la: min(calc(216px * var(--fs)), 68vw); }

.la-cad { --cadT: 9s; }                                           /* bütün perdelerin ortak saati */
.la-cad .halo { fill: var(--cad-hi); stroke: none; opacity: .07;
                transform-box: view-box; transform-origin: 60px 60px;
                animation: cadPulse 1.8s ease-in-out infinite alternate; }
.la-cad .rim  { fill: none; stroke: var(--cad-dim); stroke-width: 1.2; opacity: .5; }

/* perde görünürlüğü — statik hâl: yalnız plan perdesi açık (durgun kipte kalan kare) */
.la-cad .st { opacity: 0; }
.la-cad .s0 { animation: cadS0 var(--cadT) linear infinite; }
.la-cad .s1 { animation: cadS1 var(--cadT) linear infinite; }
.la-cad .s2 { animation: cadS2 var(--cadT) linear infinite; }
.la-cad .s3 { opacity: 1; animation: cadS3 var(--cadT) linear infinite; }
.la-cad .s4 { animation: cadS4 var(--cadT) linear infinite; }

/* 0) pafta */
.la-cad .sheet { fill: var(--bg); stroke: var(--cad-dim); stroke-width: 2.2; }
.la-cad .fold  { fill: none; stroke: var(--cad-dim); stroke-width: 2.2; }
.la-cad .ln    { fill: none; stroke: var(--cad-dim); stroke-width: 1.6; opacity: .55; }
.la-cad .badge { fill: var(--cad-hi); stroke: none; opacity: .9; }
.la-cad .tick  { fill: none; stroke: var(--bg); stroke-width: 2.2; }
.la-cad .scan  { fill: none; stroke: var(--cad-hi); stroke-width: 2.6; stroke-linecap: round;
                 opacity: 0;                                      /* statik: tarama gizli */
                 transform-box: view-box; transform-origin: 60px 32px;
                 animation: cadScan var(--cadT) linear infinite; }

/* 1) katmanlar — dördü birlikte açılır (kaynak tasarımda da tek bir oran kullanılır) */
.la-cad .ply { fill: none; stroke: var(--cad-dim); stroke-width: 2; opacity: .55;
               transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(1);
               animation: cadPly var(--cadT) cubic-bezier(.2,.7,.3,1) infinite; }
.la-cad .ply.on { stroke: var(--cad-hi); opacity: 1; }

/* 2) geometri — taban ile eksen sabit, dikmeler taban çizgisinden yükselir */
.la-cad .base { fill: none; stroke: var(--cad-dim); stroke-width: 2; }
.la-cad .axis { fill: none; stroke: var(--cad-dim); stroke-width: 1.4; opacity: .5; }
.la-cad .rise { transform-box: view-box; transform-origin: 60px 82px; transform: scaleY(1);
                animation: cadRise var(--cadT) cubic-bezier(.2,.7,.3,1) infinite; }
.la-cad .col  { fill: none; stroke: var(--cad-hi); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.la-cad .roof { fill: none; stroke: var(--cad-hi); stroke-width: 2.2; stroke-linejoin: round; }

/* 3) plan — pathLength=100 olduğu için dashoffset doğrudan "yüzde kaç çizilmedi" demektir.
   Statik değerler 0'dır: durgun kipte plan TAM ÇİZİLİ kalır, bilgi kaybolmaz. */
.la-cad .w1, .la-cad .w2 { fill: none; stroke: var(--cad-dim); stroke-width: 2.2;
                 stroke-linejoin: round; stroke-linecap: round;
                 stroke-dasharray: 100; stroke-dashoffset: 0; }
.la-cad .w1 { animation: cadW1 var(--cadT) cubic-bezier(.4,0,.25,1) infinite; }
.la-cad .w2 { animation: cadW2 var(--cadT) cubic-bezier(.4,0,.25,1) infinite; }
.la-cad .crop { fill: none; stroke: var(--cad-hi); stroke-width: 2.2; stroke-linecap: round;
                opacity: 1; animation: cadCrop var(--cadT) linear infinite; }

/* 4) onay */
.la-cad .okhalo { fill: var(--cad-hi); stroke: none; opacity: .1;
                  transform-box: view-box; transform-origin: 60px 60px;
                  animation: cadPulse 1.8s ease-in-out infinite alternate; }
.la-cad .okring { fill: none; stroke: var(--cad-hi); stroke-width: 3.6; opacity: .85; }
.la-cad .okmark { fill: none; stroke: var(--cad-hi); stroke-width: 5; stroke-linecap: round;
                  stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0;
                  animation: cadOk var(--cadT) cubic-bezier(.4,0,.25,1) infinite; }

/* Perdeler. Dikiş kuralı: 0 %'deki değer 100 %'deki değere EŞİT olmalı, yoksa döngü başa
   dönerken sıçrar. Bu yüzden 0. perde (pafta) %97'den itibaren yeniden açılır ve son perde
   %96-99 arasında sönerken onunla ÇAKIŞIR — dikiş bir kesme değil, bir geçiş olur. Ortadaki
   perdeler zaten iki uçta da sönüktür.
   İkinci kural: GELEN perde, GİDEN perde sönerken ve BİREBİR AYNI pencerede açılır. Pencereler
   kaydırılırsa iki perde de yarı sönük kalır ve toplam görünürlük 1'in altına düşer — ölçüldü
   (dikişte 0,66'ya iniyordu), düzeltildi. Ayrı
   pencerelere konursa aralarında bir kare boş kalır ve döngü "takılıyor" gibi görünür —
   ölçüldü ve düzeltildi. Perdenin içindeki çizim de perdeyle AYNI anda başlar. */
@keyframes cadS0 { 0%, 20% { opacity: 1 } 22%, 97% { opacity: 0 } 99.5%, 100% { opacity: 1 } }
@keyframes cadS1 { 0%, 20% { opacity: 0 } 22%, 40% { opacity: 1 } 42%, 100% { opacity: 0 } }
@keyframes cadS2 { 0%, 40% { opacity: 0 } 42%, 58% { opacity: 1 } 60%, 100% { opacity: 0 } }
@keyframes cadS3 { 0%, 58% { opacity: 0 } 60%, 84% { opacity: 1 } 86%, 100% { opacity: 0 } }
@keyframes cadS4 { 0%, 84% { opacity: 0 } 86%, 97% { opacity: 1 } 99.5%, 100% { opacity: 0 } }
/* tarama: pafta perdesinde iki kez yukarıdan aşağı geçer */
@keyframes cadScan {
  0%     { transform: translateY(0);    opacity: 0 }
  2%     { opacity: .9 }
  9%     { transform: translateY(56px); opacity: .9 }
  10%    { transform: translateY(56px); opacity: 0 }
  10.01% { transform: translateY(0);    opacity: 0 }
  12%    { opacity: .9 }
  19%    { transform: translateY(56px); opacity: .9 }
  20%    { transform: translateY(56px); opacity: 0 }
  20.01%, 100% { transform: translateY(0); opacity: 0 }
}
@keyframes cadPly  { 0%, 20% { transform: scaleY(.06) } 38%, 100% { transform: scaleY(1) } }
@keyframes cadRise { 0%, 40% { transform: scaleY(.05) } 57%, 100% { transform: scaleY(1) } }
@keyframes cadW1   { 0%, 54% { stroke-dashoffset: 100 } 74%, 100% { stroke-dashoffset: 0 } }
@keyframes cadW2   { 0%, 72% { stroke-dashoffset: 100 } 82%, 100% { stroke-dashoffset: 0 } }
@keyframes cadCrop { 0%, 77% { opacity: 0 } 83%, 100% { opacity: 1 } }
@keyframes cadOk   { 0%, 84% { stroke-dashoffset: 100 } 93%, 100% { stroke-dashoffset: 0 } }
@keyframes cadPulse { from { transform: scale(.92); opacity: .05 } to { transform: scale(1); opacity: .12 } }

/* ---- 4. 'doc' — çok sayfalı belge dizgisi (3,2 s) ------------------------------------------ */
/* Sayfa KALIR, içerik yeniden dizilir: satırlar soldan açılır, arkadaki ikinci sayfa dışarı
   kayar, ön sayfanın köşesi hafifçe kalkar. Satırlar tek bir keyframe'i 0,13 s gecikmeyle
   paylaşır; gecikme boyunca 0% durumu görünsün diye fill-mode: backwards verilir. */
/* sayfalar OPAK (--panel) doldurulur: levhayla aynı renk olduğu için görünmez, ama arkadaki
   sayfanın kenarı ön sayfanın içinden geçmez — yalnız sağ üstten dışarı taşan payı görünür */
.la-doc .page { fill: var(--panel); stroke-width: 2.2; }
.la-doc .back { fill: var(--panel); stroke-width: 1.6; transform: translate(9px, -9px); opacity: .5;
                animation: docBack 3.2s cubic-bezier(.4,0,.2,1) infinite; }
.la-doc .fold { fill: currentColor; fill-opacity: .16; stroke-width: 1.6;
                transform-box: fill-box; transform-origin: 0% 100%;
                transform: rotate(-7deg);
                animation: docFold 3.2s cubic-bezier(.4,0,.2,1) infinite; }
.la-doc .ln   { fill: currentColor; stroke: none; opacity: .85;
                transform-box: fill-box; transform-origin: 0% 50%;
                animation: docLn 3.2s cubic-bezier(.3,0,.2,1) infinite backwards; }
.la-doc .ln2 { animation-delay: .13s } .la-doc .ln3 { animation-delay: .26s }
.la-doc .ln4 { animation-delay: .39s } .la-doc .ln5 { animation-delay: .52s }

@keyframes docBack { 0%, 10% { opacity: 0;  transform: translate(0, 0) }
                     26%, 84% { opacity: .5; transform: translate(9px, -9px) }
                     100%     { opacity: 0;  transform: translate(0, 0) } }
@keyframes docFold { 0%, 52% { transform: rotate(0deg) }
                     68%, 86% { transform: rotate(-11deg) }
                     100%     { transform: rotate(0deg) } }
@keyframes docLn   { 0%, 8%  { transform: scaleX(0); opacity: 0 }
                     22%, 86% { transform: scaleX(1); opacity: .85 }
                     100%     { transform: scaleX(1); opacity: 0 } }


/* ---- 5. 'out' — dışa aktarma / yazdırma (3,0 s, kesintisiz) --------------------------------- */
/* İki özdeş sayfa aynı yolu 1,5 s faz farkıyla yürür: biri yukarıdan çıkarken öteki yarıktan
   belirir, akış hiç kesilmez. Sayfa yarığın ALTINDA doğar; clipPath yalnız cihazın üstünü
   açık bırakır, böylece çizim izleri sayfa çıktıkça satır satır ortaya çıkar — ayrı bir
   "belirme" animasyonuna gerek kalmaz. Cihaz gövdesi opak (--panel), kalan payı örter. */
.la-out .sh   { animation: outSheet 3s linear infinite; }
.la-out .sh1  { transform: translateY(4px); }        /* statik: sayfa yarı çıkmış durur */
.la-out .sh2  { opacity: 0; animation-delay: -1.5s; }
.la-out .pg   { fill: var(--panel); stroke-width: 1.8; }
.la-out .tr   { stroke-width: 1.4; opacity: .6; }
.la-out .tr2  { stroke-width: 1.4; opacity: .45; }
.la-out .dev  { fill: var(--panel); stroke-width: 2.4; }
.la-out .slot { stroke-width: 2.6; opacity: .65; }
.la-out .feet { stroke-width: 2.4; opacity: .55; }
.la-out .led  { fill: var(--accent); stroke: none; animation: outLed 2.4s ease-in-out infinite; }

@keyframes outSheet { 0%   { transform: translateY(68px); opacity: 1 }
                      72%  { opacity: 1 }
                      100% { transform: translateY(-78px); opacity: 0 } }
@keyframes outLed   { 0%, 100% { opacity: 1 } 50% { opacity: .22 } }


/* ---- 6. 'd3' — tel kafes küp (4,0 s) -------------------------------------------------------- */
/* Saf CSS 3B: altı yüz yalnız kenarlıktan ibarettir, dolgusuz oldukları için arka kenarlar
   görünür ve tel kafes okunur. CANLANDIRILAN TEK ÖĞE .cube3'tür — altı yüz onun 3B
   bağlamında taşınır, tarayıcı tek katman döndürür. Öndeki yüz vurgu renginde: dönüş yönü
   ve derinlik sırası böyle okunur. Durgun kipte izometrik açıda durur. */
.la-d3  { --c: min(calc(64px * var(--fs)), 30vw);
          perspective: calc(340px * var(--fs)); }
.cube3  { position: relative; width: var(--c); height: var(--c);
          transform-style: preserve-3d;
          transform: rotateX(-22deg) rotateY(-32deg);   /* statik = izometrik duruş */
          animation: d3spin 4s linear infinite; }
.cube3 > i { position: absolute; inset: 0; display: block;
             border: calc(1.6px * var(--fs)) solid currentColor; border-radius: calc(2px * var(--fs));
             opacity: .85; }
.cube3 > i:nth-child(1) { transform: translateZ(calc(var(--c) / 2)); border-color: var(--accent); opacity: 1; }
.cube3 > i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.cube3 > i:nth-child(3) { transform: rotateY(90deg)  translateZ(calc(var(--c) / 2)); }
.cube3 > i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.cube3 > i:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--c) / 2)); }
.cube3 > i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }

@keyframes d3spin { from { transform: rotateX(-22deg) rotateY(-32deg) }
                    to   { transform: rotateX(-22deg) rotateY(328deg) } }


/* ---- 7. 'cloud' — bulut aktarımı (3,2 s) ---------------------------------------------------- */
/* İki kolon: solda yukarı (yükleme), sağda aşağı (indirme). Her kolonda üç nokta aynı
   keyframe'i NEGATİF gecikmeyle paylaşır — negatif gecikme ilk turda da kolonu dolu gösterir,
   boşluk oluşmaz. Noktaların statik konumları elle basamaklandırılmıştır ki durgun kipte
   üst üste yığılmasınlar. Bulut çok hafif nefes alır (scale 1 → 1,035): sabit bir siluetten
   canlı, ama göz almayan bir ritim. */
.la-cloud .cloudbody { stroke-width: 2.4;
                       transform-box: fill-box; transform-origin: 50% 50%;
                       animation: clBreathe 3.2s ease-in-out infinite; }
.la-cloud .arw { stroke: var(--accent); stroke-width: 2.2; opacity: .9; }
.la-cloud .dot { fill: var(--accent); stroke: none; }
.la-cloud .up  { animation: clUp 3.2s linear infinite; }
.la-cloud .dn  { animation: clDn 3.2s linear infinite; }
.la-cloud .up1 { transform: translateY(-4px)  } .la-cloud .dn1 { transform: translateY(4px)  }
.la-cloud .up2 { transform: translateY(-13px); animation-delay: -1.07s }
.la-cloud .dn2 { transform: translateY(13px);  animation-delay: -1.07s }
.la-cloud .up3 { transform: translateY(-22px); animation-delay: -2.13s }
.la-cloud .dn3 { transform: translateY(22px);  animation-delay: -2.13s }

@keyframes clBreathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.035) } }
@keyframes clUp { 0%   { transform: translateY(2px);   opacity: 0 }
                  22%  { opacity: 1 } 74% { opacity: 1 }
                  100% { transform: translateY(-28px); opacity: 0 } }
@keyframes clDn { 0%   { transform: translateY(-2px);  opacity: 0 }
                  22%  { opacity: 1 } 74% { opacity: 1 }
                  100% { transform: translateY(28px);  opacity: 0 } }


/* ---- 8. İLERLEME ÇUBUĞU — yalnız gerçek dolum ----------------------------------------------- */
/* Çubuk yalnız ölçülebilen aşamada (indirmede bayt/toplam, DXF ve sahne kurmada işçinin
   bildirdiği oran) görünür; ölçülemeyen aşamada app.js onu gizler. Belirsiz (kayan şeritli)
   bir çubuk EKLENMEDİ: bekleme görseli zaten "çalışıyor" bilgisini veriyor, ikinci bir
   belirsiz gösterge aynı şeyi tekrar söylerdi. Uydurma yüzde de gösterilmez. */
#loading .lprog { width: min(calc(280px * var(--fs)), 74vw); }
#loading .lbar  { position: relative; height: calc(8px * var(--fs));
                  border: 1px solid var(--line); background: var(--btn); }
body.glove #loading .lbar { height: calc(11px * var(--fs)); }

#loading .lbar > i { position: relative; overflow: hidden;
                     transition: width .28s cubic-bezier(.22,.61,.36,1); }
#loading .lbar > i::after {                      /* dolumun üstünde gezen ışık */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 18%, var(--fg) 50%, transparent 82%);
  opacity: .26; transform: translateX(-100%);
  animation: lSheen 2.6s ease-in-out infinite;
}

/* Açılan dosyanın adı görselin üstünde; aşama başlığı ile karışmasın diye küçük ve soluktur */
#loading .lfile { font-size: calc(12.5px * var(--fs)); color: var(--muted); margin-bottom: calc(10px * var(--fs));
                  max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dolumun ucunda gezen ışıklı nokta: çubuğun nerede olduğu bir bakışta görünür */
/* Çubuğun dolumu görselle aynı iki renkten: bakış, çizimden çubuğa geçerken renk değiştirmez */
#loading .lbar > i { background: linear-gradient(90deg, var(--cad-dim), var(--cad-hi)); }
#loading .lbar > i::before {
  content: ""; position: absolute; right: 0; top: 50%; width: calc(9px * var(--fs)); height: calc(9px * var(--fs));
  transform: translate(45%, -50%); border-radius: 50%;
  background: var(--cad-hi); box-shadow: 0 0 0 calc(3px * var(--fs)) transparent; box-shadow: 0 0 0 calc(3px * var(--fs)) color-mix(in srgb, var(--cad-hi) 30%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { #loading .lbar > i::before { box-shadow: none; } }

/* Aşama noktaları — dört iş aşaması; etkin olan büyür ve vurgu rengini alır */
#loading .ldots { display: flex; gap: calc(7px * var(--fs)); margin-top: calc(12px * var(--fs)); }
#loading .ldots > i { width: calc(6px * var(--fs)); height: calc(6px * var(--fs)); border-radius: 50%;
                      background: var(--line); transition: background .2s linear, transform .2s linear; }
#loading[data-cad="0"] .ldots > i:nth-child(1),
#loading[data-cad="1"] .ldots > i:nth-child(2),
#loading[data-cad="2"] .ldots > i:nth-child(3),
#loading[data-cad="3"] .ldots > i:nth-child(4),
#loading[data-cad="4"] .ldots > i { background: var(--cad-hi); transform: scale(1.25); }

@keyframes lSheen { 0% { transform: translateX(-100%) } 55%, 100% { transform: translateX(220%) } }


/* ---- 9. RTL — Arapça arayüzde bozulmama --------------------------------------------------- */
/* Çizimler yön taşımaz; yalnız okuma yönü taşıyan iki şey çevrilir: belge sayfasının kıvrık
   köşesi (sağ üstten sol üste geçer) ve ilerleme hareketlerinin yönü. Dolumun sağdan
   büyümesi blok kutunun kendi direction'ından gelir, ayrıca kural gerekmez. */
html[dir="rtl"] #loading .la-doc .mir { transform: scaleX(-1); transform-origin: 50% 50%; }
html[dir="rtl"] #loading .lbar > i::after { animation-direction: reverse; }
html[dir="rtl"] #loading .lpct { text-align: left; }


/* ---- 9b. YÜKSEK KARŞITLIK — soluk kalan sabit opaklıklar okunur seviyeye çekilir ---------- */
/* hicontrast teması ve body.contrast ince ayarı zayıf tonu değil, KESKİN ayrımı ister; .7/.45
   gibi opaklıklar siyah-beyazda çizgiyi kaybettirir. Yalnız opaklığı CANLANDIRILMAYAN parçalar
   düzeltilir — .ln, .back ve ışık şeridi kendi keyframe'inde opacity taşıdığı için elleşilmez. */
body[data-theme="hicontrast"] #loading .arw,  body.contrast #loading .arw,
body[data-theme="hicontrast"] #loading .slot, body.contrast #loading .slot,
body[data-theme="hicontrast"] #loading .feet, body.contrast #loading .feet,
body[data-theme="hicontrast"] #loading .tr,   body.contrast #loading .tr,
body[data-theme="hicontrast"] #loading .tr2,  body.contrast #loading .tr2,
body[data-theme="hicontrast"] #loading .cube3 > i,
body.contrast #loading .cube3 > i { opacity: 1; }
body[data-theme="hicontrast"] #loading .la-doc .fold,
body.contrast #loading .la-doc .fold { fill-opacity: .3; }


/* ---- 10. DURGUN KİP — hareket yok, ama resim tamamlanmış --------------------------------- */
/* Her parçanın statik değeri zaten döngünün bitmiş hâli olduğu için burada tek iş
   animasyonları kapatmaktır. app.css'in `animation-duration:.001s` kuralı tek başına
   son kareye atlatır ve sönmeyle biten döngülerde görseli YOK eder; bu blok onu önler. */
body.reduce-motion #loading .la, body.reduce-motion #loading .la *,
body.reduce-motion #loading .cube3, body.reduce-motion #loading .cube3 > i,
body.reduce-motion #loading .lbar > i::after {
  animation: none !important;
}
body.reduce-motion #loading .lbar > i { transition: none; }

@media (prefers-reduced-motion: reduce) {
  #loading .la, #loading .la *, #loading .cube3, #loading .cube3 > i,
  #loading .lbar > i::after {
    animation: none !important;
  }
  #loading .lbar > i { transition: none; }
}


/* ------------------------------------------------------------------------------------------
   DWG OfficeZip — iskelet (skeleton) ve boş durum biçemleri
   Bekleme yüzeyleri: liste satırı yüklenirken 'skel-item', çizim önizlemesi hazırlanırken
   'skel-thumb', belge gövdesi çözümlenirken 'skel-doc'; hiç içerik yokken 'empty' kartları
   (empty-cad · empty-search · empty-cloud · empty-folder).

   Renk: yalnız app.css :root belirteçleri. Gri tonlar sabit yazılmaz, color-mix ile
   --fg'nin --panel içine karışımından türetilir; böylece altı temanın hepsinde (koyu, light,
   blueprint, sepia, hicontrast, body.contrast) kendiliğinden doğru kontrastı verir.
   color-mix desteklemeyen eski WebView'de bildirim düşer ve önceki satırdaki --btn / --line
   yedeği geçerli olur — iskelet düz bir blok olarak yine görünür, yalnız parıltı kalmaz.

   Ölçü: her uzunluk calc(<px> * var(--fs)); kullanıcı yazı ölçeğini büyütünce iskelet de büyür.
   Hareket: yalnız transform ve opacity canlandırılır. Parıltı, satırın üstünde kayan TEK bir
   ::after katmanıdır (background-position değil) — satır başına bir bileşik katman, filtre yok.
   body.reduce-motion ve prefers-reduced-motion altında parıltı durur ama KAYBOLMAZ: kayan bant
   yerini ince, düz bir örtüye bırakır, plan izleri de son (görünür) hâlinde donar.
   RTL: yerleşim mantıksal özelliklerle kurulur; parıltının yönü html[dir="rtl"] altında çevrilir.
   ------------------------------------------------------------------------------------------ */

/* ==============================================================================================
   KİLİT ROZETİ (.lk) — kilitli özellik gizlenmez, işaretlenir.
   SÖZLEŞME: data-need YALNIZ kilitli DENETİMDE bulunur; rozetin kendisi, şeritteki çağrı karosu
   ve paket panelindeki döküm rengini data-tier ile alır. Super pakette ikisinden de tek bir tane
   kalmaz — "kilitli ⇔ rozetli" tek satırla sınanır.
   BİÇİM KURALI: kilit işareti ASLA yuvarlak değildir ve ASLA köşeye konmaz. Şeritte yuvarlak +
   köşe zaten iki OLUMLU anlam taşıyor: .tb-row button.on::after (sağ üst, "etkin") ve
   .tb-row button.fav-mark::before (sol üst, "sık kullanılan"); ikisi de var(--accent) ile
   çizilir ve --accent, dark/blueprint/sepia temalarında --t-premium ile AYNI hex'tir. Ayrımı
   renk değil BİÇİM ve KONUM verir.
   Kilitli denetim SOLDURULMAZ: opacity zaten iki anlam taşıyor (.4 = :disabled, .55 = .tool.dim).
   ============================================================================================== */
/* kimlik rengi — .tier-card.t-* kalıbının öznitelikli eşi */
[data-need="adfree"],  [data-tier="adfree"]  { --t: var(--t-adfree); }
[data-need="premium"], [data-tier="premium"] { --t: var(--t-premium); }
[data-need="super"],   [data-tier="super"]   { --t: var(--t-super); }

.lk { pointer-events: none; flex: 0 0 auto; }   /* dokunuş her zaman ana düğmeye gider: 44 px hedef bozulmaz */

/* --- 1) KİLİT ŞERİDİ: kelime sığmayan yüzeyler ------------------------------------------- */
.lk-bar { position: absolute; border-radius: 99px; background: var(--t, var(--t-premium)); }
/* şerit karosu: inline-end kenarı, dikeyde ortada. .tb-row overflow-x:auto taşıdığı için iki
   eksende birden kırpar; rozet karonun İÇİNDE kalır. Üst iki köşe .on ve .fav-mark'ındır. */
.tb-row button > .lk-bar { inset-inline-end: calc(3px * var(--fs)); inset-block-start: 30%; inset-block-end: 30%; width: calc(3px * var(--fs)); }
body.glove .tb-row button > .lk-bar { width: calc(4px * var(--fs)); }
/* şerit sekmesi: konumlandırma kabı yoktu — açılmazsa rozet #app'e (position:fixed) kaçar.
   Etkin göstergesi dikey şeritte block-end, yatay rayda inline-end kenarındadır; üst kenar boştur. */
.tb-tabs button { position: relative; }
/* Kalıcı Seç düğmesinin kuralları .tb-tabs .tb-pin özgüllüğündedir (0,2,0) (v8.9.9): .tb-pin (0,1,0) iken bu kural
   (.tb-tabs button, 0,1,1) onun position: sticky'sini, opak zeminini ve ayırıcı kenarını eziyordu; sekme şeridi kayınca
   (uzun dillerde, 360 px'te) Seç de kayıp ekrandan çıkıyor, yatay rayda sekmeler saydam düğmenin altından görünüyordu. */
.tb-tabs button > .lk-bar { inset-block-start: calc(3px * var(--fs)); inset-inline-start: 34%; inset-inline-end: 34%; height: calc(3px * var(--fs)); }
/* simge-yalnız düğmeler (Drive'a yükle): .btn'de konumlandırma yok, hedefli açılır */
[data-drive="upload"], [data-doc="drive"] { position: relative; }
[data-drive="upload"] > .lk-bar, [data-doc="drive"] > .lk-bar { inset-inline-end: calc(4px * var(--fs)); inset-block-start: 26%; inset-block-end: 26%; width: calc(3px * var(--fs)); }

/* --- 2) HAP: yer olan yüzeyler, paket ADI yazılır ------------------------------------------
   Zemin paket rengi DEĞİLDİR: açık temada renk üstüne beyaz yazı AA'yı düşürür. Yazı tema
   zemininde kalınca kontrast altı temanın kendi güvencesine devredilir. */
.lk-pill { display: inline-flex; align-items: center; min-width: 0; max-width: 100%;
  height: calc(16px * var(--fs)); padding: 0 calc(7px * var(--fs));
  border: 1px solid var(--t, var(--t-premium)); border-radius: 99px; background: transparent; color: var(--fg);
  font-size: calc(10.5px * var(--fs)); font-weight: 700; line-height: 1; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; }
.lk-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ana ekran araç karosu: hap AKIŞTA, etiketin altında (sihirli 38 px ve RTL kopyası kalktı) */
.tool > .lk-pill { margin-top: calc(-1px * var(--fs)); }
/* "Diğer" menüsü: .menu button konumlandırılmamıştır, rozet akışta sona itilir */
.menu button > .lk-pill { margin-inline-start: auto; }
.menu button > span[data-i18n] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* belge "Düzenle", "Yeni dosya", bilgi paneli çipi: akışta, metinden sonra */
.doc-tools [data-doc="edit"] > .lk-pill, .btn.big > .lk-pill, #iaArea > .lk-pill { margin-inline-start: calc(6px * var(--fs)); }
/* uzun basış kutusu: hap + tam cümle */
.tb-pop .pop-lock { display: flex; align-items: center; gap: calc(6px * var(--fs)); margin-bottom: calc(8px * var(--fs)); font-size: calc(12px * var(--fs)); color: var(--muted); }

/* --- 3) satır başındaki / sonundaki tek konuşan karo --------------------------------------- */
.tb-row button.lk-cta { background: transparent; background: color-mix(in srgb, var(--t) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--t, var(--line)); color: var(--fg); }
.tb-row button.lk-cta svg.ic { color: var(--t, var(--accent)); }
.tb-row button.lk-cta .lb { color: var(--fg); font-weight: 700; }
@media (min-width: 900px) { .tb-lockg .tb-caption { color: var(--t, var(--muted)); } }

/* --- 4) paket paneli: kart sayacı, odak, tam yetenek dökümü --------------------------------- */
.tier-count { display: block; margin: calc(-2px * var(--fs)) 0 calc(6px * var(--fs)); font-size: calc(11.5px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; }
.tier-card.focus { border-color: var(--t, var(--accent)); box-shadow: 0 0 0 2px var(--t, var(--accent)); }
.lk-all { margin-top: calc(10px * var(--fs)); }
/* döküm kapalı <details>: başlık satırı açar / kapatır; dokunma alanı ≥ 40 px */
.lk-all > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: calc(6px * var(--fs)); min-height: 40px; margin: 0; }
.lk-all > summary::-webkit-details-marker { display: none; }
.lk-all > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 4px 0; }
.lk-all[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
body.reduce-motion .lk-all > summary::after { transition: none; }
body.glove .lk-all > summary { min-height: 52px; }
.lk-all-g { margin-top: calc(8px * var(--fs)); }
.lk-all-h { display: flex; align-items: center; gap: calc(7px * var(--fs)); font-size: calc(13px * var(--fs)); }
.lk-all-h small { color: var(--muted); font-variant-numeric: tabular-nums; }
.lk-all-d { width: calc(9px * var(--fs)); height: calc(9px * var(--fs)); border-radius: 3px; background: var(--t, var(--accent)); flex: 0 0 auto; }
.lk-all ul { list-style: none; margin: calc(4px * var(--fs)) 0 0; padding: 0; padding-inline-start: calc(14px * var(--fs));
  columns: 2; column-gap: calc(12px * var(--fs)); font-size: calc(12px * var(--fs)); color: var(--muted); }
.lk-all li { break-inside: avoid; }
.lk-all li.owned { color: var(--fg); }
@media (max-width: 380px) { .lk-all ul { columns: 1; } }

/* --- 5) tema ve kip ince ayarları ------------------------------------------------------------
   hicontrast: kenar keskinleşir (1 px kıl çizgi). body.sun karoya 2 px kenarlık ekler; mutlak
   konum dolgu kutusuna göre olduğu için şerit kenarlığın içinde kalır, ek kural gerekmez.
   Rozetin hiçbir animasyonu ve geçişi yoktur: reduce-motion için ek kural gerekmez. */
body[data-theme="hicontrast"] .lk-bar, body[data-theme="hicontrast"] .lk-pill { outline: 1px solid var(--line); }

/* --- 6) RTL: yalnız mantıksal özellikler kullanıldı, YENİ KURAL GEREKMEZ.
   Silinen kural: html[dir="rtl"] .tool .pro-badge. ------------------------------------------- */

/* --- okunur ama görünmez metin --------------------------------------------------------------
   İskeletler ve boş durum çizimleri aria-hidden'dır (süstür, bilgi taşımazlar); bekleme
   bilgisini yanlarındaki .vh metni verir. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); }

/* --- ortak ton belirteçleri (yedek satır önce, color-mix sonra) --- */
.skel-item, .skel-thumb, .skel-doc, .skel-b {
  --skel-1: var(--btn);                                              /* yedek: blok dolgusu   */
  --skel-1: color-mix(in srgb, var(--fg) 13%, var(--panel));
  --skel-2: var(--line);                                             /* yedek: ızgara çizgisi */
  --skel-2: color-mix(in srgb, var(--fg) 9%, transparent);
  --skel-shine: transparent;                                         /* yedek: parıltı yok    */
  --skel-shine: color-mix(in srgb, var(--fg) 11%, transparent);
  --skel-veil: transparent;                                          /* dingin (hareketsiz) örtü */
  --skel-veil: color-mix(in srgb, var(--fg) 4%, transparent);
}
body.contrast .skel-item, body.contrast .skel-thumb, body.contrast .skel-doc, body.contrast .skel-b { --skel-1: var(--panel); --skel-1: color-mix(in srgb, var(--fg) 20%, var(--panel)); }
body[data-theme="hicontrast"] .skel-b, body[data-theme="hicontrast"] .skel-thumb { --skel-1: var(--panel); --skel-1: color-mix(in srgb, var(--fg) 18%, var(--panel)); outline: 1px solid var(--line); outline-offset: -1px; }

/* --- 1) skel-item: son dosyalar / dosya listesi satırı ---------------------------------------
   .recent ızgarasının ya da .list sütununun içine doğrudan konur; .skel-grid / .skel-list
   sarmalayıcıları bağımsız kullanım içindir. Ölçüler .recent .item ve .open-item ile birebir. */
.skel-grid { display: grid; gap: calc(8px * var(--fs)); width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));                      /* yedek: min() yoksa */
  grid-template-columns: repeat(auto-fill, minmax(min(calc(150px * var(--fs)), 100%), 1fr)); }
.skel-list { display: flex; flex-direction: column; width: 100%; }

.skel-item {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: calc(8px * var(--fs));
  padding: calc(6px * var(--fs)); min-height: calc(48px * var(--fs));
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  min-width: 0; box-sizing: border-box;
}
/* .list içindeki çıplak satır biçimi: çerçeve yerine alt kıl çizgi */
.skel-item.plain { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: calc(10px * var(--fs)) calc(4px * var(--fs)); }

.skel-b { background: var(--skel-1); border-radius: calc(4px * var(--fs)); display: block; flex: 0 0 auto; }
.skel-ic { width: calc(56px * var(--fs)); height: calc(42px * var(--fs)); border-radius: calc(6px * var(--fs)); }
.skel-item.plain .skel-ic { width: calc(48px * var(--fs)); height: calc(36px * var(--fs)); }
.skel-tx { flex: 1 1 auto; min-width: 0; display: block; }
.skel-l1 { height: calc(11px * var(--fs)); width: 64%; }
.skel-l2 { height: calc(9px * var(--fs)); width: 42%; margin-top: calc(7px * var(--fs)); opacity: .72; }
/* satırlar birbirinin kopyası görünmesin: genişlikler dönüşümlü */
.skel-item:nth-child(3n+2) .skel-l1 { width: 52%; } .skel-item:nth-child(3n+2) .skel-l2 { width: 34%; }
.skel-item:nth-child(3n)   .skel-l1 { width: 73%; } .skel-item:nth-child(3n)   .skel-l2 { width: 48%; }
body.glove .skel-item { min-height: calc(56px * var(--fs)); }

/* --- parıltı: satırın üstünden geçen tek katman (transform ile) --- */
.skel-item::after, .skel-thumb::after, .skel-doc::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 8%, var(--skel-shine) 48%, transparent 88%);
  transform: translateX(-100%);
  animation: skel-sweep 1.6s linear infinite;
}
.skel-item:nth-child(3n+2)::after { animation-delay: .13s; }
.skel-item:nth-child(3n)::after   { animation-delay: .26s; }
@keyframes skel-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
html[dir="rtl"] .skel-item::after, html[dir="rtl"] .skel-thumb::after,
html[dir="rtl"] .skel-doc::after { animation-direction: reverse; }

/* --- 2) skel-thumb: çizim önizlemesi hazırlanırken -------------------------------------------
   İnce ızgaralı kart + üzerinde beliren soluk plan izleri (#ill-plan-trace). */
.skel-thumb {
  position: relative; display: block; overflow: hidden; box-sizing: border-box;
  --g: calc(12px * var(--fs));
  width: 100%; max-width: calc(260px * var(--fs)); aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--panel);
  background-image:
    repeating-linear-gradient(to right,  var(--skel-2) 0 1px, transparent 1px var(--g)),
    repeating-linear-gradient(to bottom, var(--skel-2) 0 1px, transparent 1px var(--g));
}
.skel-thumb.sm { width: calc(56px * var(--fs)); height: calc(42px * var(--fs)); aspect-ratio: auto; flex: 0 0 auto; --g: calc(7px * var(--fs)); border-radius: calc(6px * var(--fs)); }
.skel-item.plain .skel-thumb.sm { width: calc(48px * var(--fs)); height: calc(36px * var(--fs)); }
.skel-item .skel-thumb::after { display: none; }   /* satırın kendi parıltısı yeter: iki bant üst üste geçmesin */
.skel-plan {
  position: absolute; inset: 0; margin: auto; width: 76%; height: 76%; z-index: 1;
  fill: none; color: var(--fg); opacity: 0;
  animation: skel-in .8s ease-out .12s forwards;
}
/* tek seferlik açılış: bitiş karesi dinlenme hâlidir, bu yüzden süre kısaltılınca da doğru görünür */
@keyframes skel-in { from { opacity: 0; transform: scale(.96); } to { opacity: .3; transform: none; } }
body[data-theme="hicontrast"] .skel-plan { animation-name: skel-in-hc; }
@keyframes skel-in-hc { from { opacity: 0; transform: scale(.96); } to { opacity: .5; transform: none; } }

/* --- 2b) skel-doc: belge gövdesi (PDF · DOCX · XLSX · metin) çözümlenirken --------------------
   Sayfa biçiminde bir kart: başlık bandı + metin satırları. Beklenen şeyin biçimini önceden
   gösterir, böylece belge açılınca göz yeri hazır bulur. Parıltı .skel-item ile ortaktır. */
.skel-doc {
  position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box;
  width: 100%; max-width: calc(520px * var(--fs)); margin: calc(18px * var(--fs)) auto;
  padding: calc(18px * var(--fs)); display: flex; flex-direction: column; gap: calc(10px * var(--fs));
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.skel-doc .skel-b { height: calc(10px * var(--fs)); width: 100%; }
.skel-doc .skel-h { height: calc(17px * var(--fs)); width: 56%; margin-bottom: calc(4px * var(--fs)); }
.skel-doc .skel-b:nth-child(3n) { width: 84%; }
.skel-doc .skel-b:nth-child(4n) { width: 66%; }
.skel-doc .skel-b:last-child    { width: 38%; }

/* --- durgun kip: parıltı durur, iskelet düz bir ton olarak kalır ------------------------------
   app.css zaten animation-duration'ı .001s'ye indirir; burada adı da sıfırlanır ki kayan bant
   ekran dışında donup kaybolmasın — yerine ince, dingin bir örtü konur. */
body.reduce-motion .skel-item::after, body.reduce-motion .skel-thumb::after,
body.reduce-motion .skel-doc::after {
  animation: none; transform: none; background: var(--skel-veil);
}
body.reduce-motion .skel-plan { animation: none; opacity: .3; transform: none; }
body.reduce-motion[data-theme="hicontrast"] .skel-plan { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .skel-item::after, .skel-thumb::after, .skel-doc::after { animation: none; transform: none; background: var(--skel-veil); }
  .skel-plan { animation: none; opacity: .3; transform: none; }
  body[data-theme="hicontrast"] .skel-plan { animation: none; opacity: .5; }
}

/* --- 3-5) boş durum kartları ------------------------------------------------------------------
   Yazı i18n'den gelir; boş bırakılan başlık/metin kutusu yer kaplamaz. */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(6px * var(--fs)); text-align: center; box-sizing: border-box;
  padding: calc(26px * var(--fs)) calc(14px * var(--fs)); width: 100%; min-width: 0;
}
.empty-ill { width: calc(120px * var(--fs)); max-width: 46%; height: auto; color: var(--muted); opacity: .8; flex: 0 0 auto; }
body[data-theme="hicontrast"] .empty-ill, body.contrast .empty-ill { opacity: 1; }
.empty-title { color: var(--fg); font-size: calc(15px * var(--fs)); font-weight: 600; margin-top: calc(4px * var(--fs)); }
.empty-text { color: var(--muted); font-size: calc(13px * var(--fs)); line-height: 1.45; margin: 0; max-width: 34ch; }
.empty-acts { display: flex; flex-wrap: wrap; gap: calc(8px * var(--fs)); justify-content: center; margin-top: calc(6px * var(--fs)); }
.empty-title:empty, .empty-text:empty, .empty-acts:empty { display: none; }
/* dar telefonda çizim küçülür, başlık yine ilk bakışta okunur */
@media (max-height: 560px) { .empty { padding: calc(14px * var(--fs)) calc(12px * var(--fs)); } .empty-ill { max-width: 28%; } }
/* v7.72 — blok yöneticisi satırları ve blok düzenleyici oturum çubuğu */
.blk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid rgba(128,128,128,.14); }
.blk-name { flex: 1 1 140px; min-width: 0; }
.blk-name b { display: block; font-size: calc(13.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk-name small { color: var(--muted); display: block; font-size: calc(11px * var(--fs)); }
.blk-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.blk-btns .btn.small { min-height: 40px; padding: 4px 10px; font-size: calc(11.5px * var(--fs)); }   /* 34 → 40 px (v8.9.9): uygulamanın dokunma hedefi */
.bedit-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px 8px; max-width: calc(100% - 16px); background: var(--bar); border: 1px solid #4da3ff; border-radius: 14px; box-shadow: var(--shadow); font-size: calc(12px * var(--fs)); }
.bedit-bar .bb-name { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.bedit-bar .bb-name b { color: #4da3ff; margin-inline-end: 4px; }
.bedit-bar .btn.small { min-height: 40px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px; }
.bedit-bar .btn.small svg.ic { width: 16px; height: 16px; }
@media (max-width: 480px) { .bedit-bar .btn.small span { display: none; } .bedit-bar .btn.small svg.ic { width: 18px; height: 18px; } }

/* ---- projeksiyon (dilim) seçici: projsec.js ------------------------------------------------
   Kutu dar telefonda da tek sütun kalır; harita 200 px'lik bir şerittir, sonuç kartları
   iki sütuna sığar. Kart bir DÜĞMEDİR: dokunma hedefi 44 px'in altına inmez. */
.ps { display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; min-width: 0; }   /* #docBody bir .kv ızgarasıdır (max-content | 1fr): kutu tüm genişliği alır, dar telefonda yatay taşmaz */
.ps-seg { width: 100%; }
.ps-map { position: relative; height: 200px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #8ea3b8; }
.ps-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.ps-map-btns { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ps-map-btns .btn { min-width: 40px; min-height: 40px; padding: 0; }
.ps-map-attr { position: absolute; left: 6px; bottom: 4px; font-size: calc(10px * var(--fs)); color: #21303f; background: rgba(255,255,255,.7); border-radius: 4px; padding: 1px 4px; }
.ps-sonuc { display: flex; flex-direction: column; gap: 8px; }
.ps-yer { font-size: calc(13px * var(--fs)); }
.ps-dilim { display: flex; flex-direction: column; gap: 2px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.ps-uyari { font-size: calc(12px * var(--fs)); border-left: 3px solid var(--accent); padding: 4px 8px; background: var(--btn-on); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 0 8px 8px 0; }
.ps-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ps-card { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; min-height: 62px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); }
.ps-card b { font-size: calc(12.5px * var(--fs)); }
.ps-card small, .ps-card em { color: var(--muted); font-size: calc(11px * var(--fs)); font-style: normal; }
.ps-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--panel); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ps-rozet { display: inline-block; font-size: calc(10.5px * var(--fs)); padding: 1px 6px; border-radius: 8px; background: var(--accent); color: #fff; }
.ps-eslesme { font-size: calc(12.5px * var(--fs)); border-left: 3px solid #34c759; padding: 6px 8px; background: transparent; background: color-mix(in srgb, #34c759 12%, transparent); border-radius: 0 8px 8px 0; }
.ps-card:active { background: var(--panel); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
/* Dilim (elle) sekmesi: datum / tür düğmeleri, dilim kartları (kapsadığı iller), seçilince çıkan önizleme */
.ps-z { display: flex; flex-direction: column; gap: 10px; }
.ps-z-satir { display: flex; flex-direction: column; gap: 4px; font-size: calc(12px * var(--fs)); color: var(--muted); }
.ps-z .seg { align-self: flex-start; }
.ps-z .seg button { min-width: 0; height: 44px; }
.ps-z label.chk { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: calc(13px * var(--fs)); }
.ps-z-ipucu { display: flex; flex-direction: column; gap: 4px; }
.ps-z-ipucu:empty { display: none; }
.ps-zk { width: 100%; }
.ps-zk .ps-z-iller { color: var(--muted); font-size: calc(11px * var(--fs)); line-height: 1.3; overflow-wrap: anywhere; }
.ps-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--panel); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ps-zkart { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }   /* telefonda tek sütun: il listesi okunur */
.ps-z-onizle { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--accent); border-radius: 12px; }
.ps-z-bas { font-size: calc(12.5px * var(--fs)); overflow-wrap: anywhere; }
.ps-map-z { height: 160px; flex: none; }
.ps-map-z canvas { touch-action: pan-y; }   /* sürüklenmeyen önizleme: sayfa kaydırması haritanın üstünden de çalışır */
.ps-z-onizle .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-z-onizle .btns .btn { min-height: 44px; }
/* denetim düzeltmeleri: '‹ Geri' (Ayarlar / Altlık formuna dönüş; RTL'de ok aynalanır), rozetsiz TM / UTM'de kartların hemen üstündeki açıklama, karo gizlilik notu */
.ps-geri { align-self: flex-start; min-height: 40px; }
.ps-geri-ok { display: inline-block; font-size: 1.25em; line-height: 1; }
[dir="rtl"] .ps-geri-ok { transform: scaleX(-1); }
.ps-z-ambig { font-size: calc(12px * var(--fs)); border-inline-start: 3px solid var(--accent); padding: 5px 8px; border-radius: 8px; background: var(--btn-on); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ps-tilenot { font-size: calc(11px * var(--fs)); line-height: 1.3; }
.small { font-size: calc(11.5px * var(--fs)); }

/* KAYDET (v8.9.8): kaydedilmemiş değişiklik göstergesi. Dosya adının ÖNÜNDE (ad üç noktayla kırpılsa da görünür),
   durum çubuğundaki disket düğmesinin köşesinde; belge kipinde (PDF / Word…) gösterilmez */
#fileName.unsaved::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
body.docmode #fileName.unsaved::before { display: none; }
.st-quick button[data-quick="save"].unsaved { color: var(--fg); }
.st-quick button[data-quick="save"].unsaved::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bar); }
/* "⋯" menüsündeki kısayol ipucu yalnız fareli / klavyeli düzende (dokunmatik telefonda Ctrl+S anlamsız) */
.menu button > kbd.mk { margin-inline-start: auto; font: inherit; font-size: calc(11px * var(--fs)); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
/* kısayol ipucu görünürken kilit rozeti onun yanında; dokunmatikte ipucu gizli, rozet öteki satırlar gibi sağ uçta */
@media (hover: hover) and (pointer: fine) { .menu button > kbd.mk + .lk-pill { margin-inline-start: 8px; } }
@media not all and (hover: hover) and (pointer: fine) { .menu button > kbd.mk { display: none; } }
/* ---- Farklı kaydet sayfası (v8.9.10): dosya kartı, kapsam, konum kartları ---- */
.sa-sheet { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 4px; }
.sa-file { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(135deg, var(--btn), var(--btn)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--btn)), var(--btn)); }
.sa-doc { position: relative; flex: 0 0 auto; width: 52px; height: 62px; border-radius: 8px 16px 8px 8px; background: var(--accent); color: var(--accent-fg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 12px var(--btn-on); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.sa-doc svg.ic { width: 24px; height: 24px; }
.sa-doc span { font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.sa-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sa-name label { font-size: calc(11px * var(--fs)); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.sa-inrow { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; }
.sa-inrow:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--btn-on); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.sa-inrow input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: calc(16px * var(--fs)); font-weight: 600; padding: 10px 12px; min-height: 44px; }
.sa-ext { flex: 0 0 auto; display: flex; align-items: center; padding: 0 12px; color: var(--muted); font-weight: 700; background: transparent; background: color-mix(in srgb, var(--line) 40%, transparent); }
.sa-meta { color: var(--muted); font-size: calc(11.5px * var(--fs)); line-height: 1.35; }
.sa-h { margin: 4px 2px -2px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.sa-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-seg button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--btn); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; }
.sa-seg button svg.ic { width: 20px; height: 20px; color: var(--muted); }
.sa-seg button.on { border-color: var(--accent); background: var(--btn); background: color-mix(in srgb, var(--accent) 14%, var(--btn)); color: var(--accent); }
.sa-seg button.on svg.ic { color: var(--accent); }
.sa-seg button:disabled { opacity: .45; cursor: default; }
/* biçim düğmeleri (v8.9.10): beş biçim tek satırda; her biri kendi rengiyle (DWG kırmızı, DXF mavi, DGN yeşil, KML/KMZ turuncu) */
.sa-fmts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sa-fmt { --fc: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--btn); color: var(--fg); font: inherit; cursor: pointer; min-width: 0; }
.sa-fmt b { font-size: calc(14px * var(--fs)); font-weight: 800; letter-spacing: .4px; color: var(--fc); }
.sa-fmt small { max-width: 100%; color: var(--muted); font-size: calc(9.5px * var(--fs)); line-height: 1.15; text-align: center; overflow: hidden; padding: 0 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }   /* dar ekranda "AutoCAD 2000" iki satıra sarar, kırpılmaz; "Micro\u00ADStation" yumuşak tireyle bölünür */
.sa-fmt[data-bicim="dwg"] { --fc: #e5484d; }
.sa-fmt[data-bicim="dxf"] { --fc: #4da3ff; }
.sa-fmt[data-bicim="dgn"] { --fc: #30a46c; }
.sa-fmt[data-bicim="kml"], .sa-fmt[data-bicim="kmz"] { --fc: #f5a524; }
.sa-fmt.on { border-color: var(--fc); background: var(--btn); background: color-mix(in srgb, var(--fc) 14%, var(--btn)); box-shadow: inset 0 0 0 1px var(--fc); }
.sa-fmt.off { opacity: .5; }
/* V8 kaynaklı belgede Ctrl+S sessiz yazmaz: uyarı toast değil, sayfanın başında sabit bant (toast biçim düğmelerini örtüyordu) */
.sa-warn { font-size: calc(12.5px * var(--fs)); line-height: 1.45; padding: 9px 12px; border-radius: 10px; border-inline-start: 4px solid var(--accent); background: var(--btn); background: color-mix(in srgb, var(--accent) 14%, var(--btn)); color: var(--fg); }
.sa-fnote { margin-top: -4px; font-size: calc(11.5px * var(--fs)); color: var(--muted); line-height: 1.4; padding: 0 2px; }
.sa-locs { display: flex; flex-direction: column; gap: 8px; }
.sa-loc { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--btn); color: var(--fg); font: inherit; text-align: start; cursor: pointer; }
.sa-loc-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: transparent; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.sa-loc-ic svg.ic { width: 22px; height: 22px; }
.sa-loc[data-yer="dl"] .sa-loc-ic { color: #3ddc84; background: transparent; background: color-mix(in srgb, #3ddc84 16%, transparent); }
.sa-loc[data-yer="pick"] .sa-loc-ic { color: #4da3ff; background: transparent; background: color-mix(in srgb, #4da3ff 16%, transparent); }
.sa-loc[data-yer="klasor"] .sa-loc-ic { color: #b388ff; background: transparent; background: color-mix(in srgb, #b388ff 16%, transparent); }
.sa-loc[data-yer="drive"] .sa-loc-ic { color: #fbbc04; background: transparent; background: color-mix(in srgb, #fbbc04 16%, transparent); }
.sa-loc[data-yer="son"] .sa-loc-ic { color: var(--accent); background: var(--btn-on); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sa-loc-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-loc-tx b { font-size: calc(14px * var(--fs)); }
.sa-loc-tx small { color: var(--muted); font-size: calc(12px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-loc-ok { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; color: transparent; }
.sa-loc-ok svg.ic { width: 14px; height: 14px; }
.sa-loc.on { border-color: var(--accent); background: var(--btn); background: color-mix(in srgb, var(--accent) 10%, var(--btn)); }
.sa-loc.on .sa-loc-ok { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.sa-loc:disabled { opacity: .45; cursor: default; }
.sa-note { font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.45; padding: 8px 10px; border-radius: 10px; background: transparent; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.sa-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 2px; }
.sa-btns .btn { min-height: 48px; justify-content: center; font-weight: 700; }
.sa-btns .btn svg.ic { width: 20px; height: 20px; }
/* ---- LISP konsolu (v8.9.10) ---- */
.lsp { display: flex; flex-direction: column; gap: 8px; }
.lsp-log { margin: 0; min-height: 90px; max-height: 32vh; overflow: auto; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); background: color-mix(in srgb, #000 30%, var(--bg)); color: var(--fg); font: calc(12px * var(--fs))/1.45 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.lsp-in { width: 100%; box-sizing: border-box; min-height: 88px; resize: vertical; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: calc(13px * var(--fs))/1.45 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.lsp-in:focus { outline: 0; border-color: var(--accent); }
.lsp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lsp-h { margin-top: 4px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.lsp-cmds { display: flex; gap: 6px; flex-wrap: wrap; }
.lsp-cmds .chip { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--accent); background: var(--btn); background: color-mix(in srgb, var(--accent) 12%, var(--btn)); color: var(--fg); font: inherit; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; cursor: pointer; }
.lsp-files { display: flex; flex-direction: column; gap: 6px; }
.lsp-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; }
.lsp-ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; }
.lsp-not { font-size: calc(12px * var(--fs)); line-height: 1.45; }

/* ---- Sanal klavye komut satırında (v8.9.12, klavye.js) --------------------------------------------------------
   Şerit durum çubuğunun ÜSTÜNDEDİR; alt boşluğu (klavye dâhil) yalnız en alttaki durum çubuğu öder. Komut satırına
   yazarken şerit, düzen sekmeleri ve durum çubuğu çekilir, #app klavye kadar yukarıdan biter: çubuk klavyenin hemen
   üstünde, öneri listesi onun üstünde, çizim alanı ikisinin arkasında görünür kalır. */
body.kb-cmd #toolbar, body.kb-cmd #statusbar, body.kb-cmd #layoutTabs { display: none !important; }
body.kb-cmd #app { padding-bottom: var(--kb-pad, 0px); }

/* ---- Görünür bekleme satırı (skel.js yukleniyor, v8.9.12) ---------------------------------------------------------
   Dönen halka + metin + üç nokta. Yalnız transform / opacity canlanır. Durgun kipte halka tam daire, noktalar yerinde. */
.yuk { display: flex; align-items: center; gap: 10px; padding: calc(12px * var(--fs)) calc(6px * var(--fs)); color: var(--muted); font-size: calc(13px * var(--fs)); }
.yuk-halka { flex: 0 0 auto; width: calc(20px * var(--fs)); height: calc(20px * var(--fs)); border-radius: 50%; border: 2.5px solid var(--btn-on); border: 2.5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: yuk-don .8s linear infinite; }
.yuk-tx { font-weight: 600; color: var(--fg); }
.yuk-nokta { display: inline-flex; gap: 3px; }
.yuk-nokta i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: yuk-nabiz 1.2s ease-in-out infinite; }
.yuk-nokta i:nth-child(2) { animation-delay: .2s; } .yuk-nokta i:nth-child(3) { animation-delay: .4s; }
@keyframes yuk-don { to { transform: rotate(360deg); } }
@keyframes yuk-nabiz { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .yuk-halka, .yuk-nokta i { animation: none; } .yuk-halka { border-color: var(--accent); } }
body.reduce-motion .yuk-halka, body.reduce-motion .yuk-nokta i { animation: none; } body.reduce-motion .yuk-halka { border-color: var(--accent); }
/* QUICKCALC (Faz 7h): ifade satırı, tuş takımı (düğmeler ≥ 40 px, dokunmaya uygun), birim dönüştürme ve geçmiş */
.qc .qc-satir { display: flex; gap: 6px; align-items: stretch; }
.qc .qc-satir input { flex: 1 1 auto; min-width: 0; min-height: 40px; font-size: calc(16px * var(--fs)); font-family: ui-monospace, monospace; }
.qc .qc-sonuc { min-height: 1.6em; margin: 6px 2px; font-weight: 600; font-family: ui-monospace, monospace; word-break: break-all; }
.qc .qc-tus { display: grid; grid-template-columns: repeat(5, minmax(40px, 1fr)); gap: 6px; margin-bottom: 8px; }
.qc .qc-tus .btn { min-height: 44px; font-family: ui-monospace, monospace; }
.qc .qc-sec { min-height: 40px; }
.qc .qc-bir, .qc .qc-al { align-items: center; flex-wrap: wrap; gap: 6px; }
.qc .qc-gecmis .item { min-height: 40px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* Faz 7i: yazı ve ölçü stili yöneticileri (STYLE / DIMSTYLE): liste, özet, önizleme, düğmeler (≥ 40 px; dokunmatik ve fare) */
.stil-panel .stil-liste { max-height: 36vh; overflow: auto; }
.stil-panel .stil-liste .item { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.stil-panel .stil-liste .item.active { background: var(--accent-bg, rgba(0, 120, 212, .15)); font-weight: 600; }
.stil-panel .stil-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.stil-panel .stil-btns .btn { min-height: 44px; flex: 1 1 auto; }
.stil-onizleme { margin: 8px 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: calc(22px * var(--fs)); text-align: center; }
.stil-onizleme span { display: inline-block; }
.stil-fark { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs)); }
.stil-fark th, .stil-fark td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; }
/* Faz 7j: tablo — yerinde hücre yazısı (klavye-fare kipi), tablo paneli (hücre ızgarası, düzenleme alanı, düğmeler ≥ 44 px); alan ekle düğmesi */
.tablo-hucre { position: absolute; z-index: 30; box-sizing: border-box; margin: 0; padding: 1px 3px; border: 2px solid #4da3ff; border-radius: 2px; background: rgba(255, 255, 255, .92); color: #111; font-family: sans-serif; line-height: 1.25; resize: none; overflow: hidden; outline: none; }
.tb-panel .tb-izgara { display: grid; gap: 2px; max-height: 34vh; overflow: auto; margin-bottom: 8px; }
.tb-panel .tb-h { min-height: 44px; min-width: 56px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: inherit; font-size: calc(12px * var(--fs)); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.tb-panel .tb-h.alan { background: rgba(160, 160, 160, .25); }
.tb-panel .tb-h.on { background: rgba(77, 163, 255, .22); border-color: #4da3ff; }
.tb-panel .tb-h.odak { outline: 2px solid #4da3ff; outline-offset: -2px; }
.tb-panel .tb-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tb-panel .tb-btns .btn { min-height: 44px; flex: 1 1 auto; }
.tb-panel .tb-btns .btn.on { background: var(--accent-bg, rgba(0, 120, 212, .15)); font-weight: 600; }
.tb-panel .tb-duz textarea { width: 100%; box-sizing: border-box; min-height: 64px; }
.ask-alan { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.ask-alan .btn { min-height: 40px; }
/* Faz 7k: çok sekmeli giriş kutusu (tarama: Desen / Katı / Geçiş) ve çoklu çizgi stili önizlemesi */
.ask-sekme { display: flex; margin-bottom: 8px; }
.ask-sekme button { flex: 1 1 0; }
.ml-onizleme svg { width: 100%; max-width: 320px; height: 70px; display: block; color: var(--fg); }
.ask-gridg { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ask-gridg .ask-gcell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; min-height: 44px; border: 1px solid var(--line, #3a4250); border-radius: 8px; background: transparent; color: var(--fg, #e6e8ee); font-size: calc(11px * var(--fs)); cursor: pointer; }
.ask-gridg .ask-gcell svg { width: 44px; height: 44px; display: block; }
.ask-gridg .ask-gcell.on { border-color: var(--accent, #ff9f0a); box-shadow: inset 0 0 0 1px var(--accent, #ff9f0a); color: var(--accent, #ff9f0a); }
.ask-gcell:active { filter: brightness(1.35); }

/*
 * OKUMA KİPİ (v8.9.18, docs.js okumaAyarla). Belge açıkken üstteki araç çubukları (uygulama başlığı, belge başlığı, eylem ve sayfa
 * satırları) ekranın üçte birini yiyordu; okuma kipinde hepsi gizlenir, belge tüm ekranı kaplar. Çıkış için sağ üstte soluk bir düğme
 * durur (dokununca / üzerine gelince belirginleşir); PDF'te kaydırırken altta sayfa göstergesi kısa süre görünür. Android'de sistem
 * çubukları da gizlenir (köprü immersive). Esc / F11 / geri tuşu kipi kapatır.
 */
.doc-okuma-cik { display: none; }
.doc-pill { position: absolute; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%); z-index: 12; padding: 4px 14px; border-radius: 16px; background: rgba(0, 0, 0, .68); color: #fff; font-size: calc(13px * var(--fs)); font-variant-numeric: tabular-nums; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
body.doc-okuma #topbar, body.doc-okuma #docView .doc-head, body.doc-okuma #docView .doc-tools { display: none !important; }
body.doc-okuma #docView { padding-top: var(--safe-top); }
body.doc-okuma .doc-okuma-cik { display: flex; position: absolute; top: calc(8px + var(--safe-top)); right: calc(8px + var(--safe-right)); z-index: 12; width: 40px; height: 40px; min-height: 0; padding: 0; align-items: center; justify-content: center; border-radius: 20px; background: var(--bar); border: 1px solid var(--line); opacity: .4; transition: opacity .2s; }
body.doc-okuma .doc-okuma-cik:hover, body.doc-okuma .doc-okuma-cik:focus-visible, body.doc-okuma .doc-okuma-cik:active { opacity: 1; }
body.doc-okuma .doc-pill.goster { opacity: 1; visibility: visible; }
body.doc-okuma .doc-body { padding-top: 4px; }

/* Web: Paketler panelinde "satış uygulamalarda" bloğu (edition.js renderProPanel) */
.pro-web { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pro-web p { margin: 0; color: var(--muted); font-size: calc(13px * var(--fs)); line-height: 1.45; }
/* Web: ana ekrandaki "Uygulamayı indir" bağlantısı (home.js) */
.home-getapp { display: block; margin: 4px auto 0; font-size: calc(13px * var(--fs)); }
/* WEB: dosya sürüklenirken pencere çerçevelenir (app.js › web bloğu #dropZone; yerli uygulamalarda öğe hiç oluşturulmaz) */
#dropZone { position: fixed; inset: 6px; z-index: 2147482000; display: flex; align-items: center; justify-content: center; pointer-events: none; border: 3px dashed var(--accent); border-radius: 14px; background: var(--bg); background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--fg); font-size: 20px; font-weight: 600; }
#dropZone[hidden] { display: none; }

/* Web: "Son dosyalar" cihazda saklanır → bölümün altında kısa not + Listeyi temizle (app.js › buildRecent, open.js › renderRecent) */
.recent-note, .open-note { margin: 6px 2px 2px; line-height: 1.45; }
.recent-note .btn.link { min-height: 32px; padding: 2px 6px; vertical-align: middle; }

/*
 * WEB SÜRÜMÜ (html.web): tools/web_paket.mjs index.html'e <html class="web"> koyar; Android / iOS paketinde sınıf YOKTUR, aşağıdaki kurallar orada hiçbir öğeyle eşleşmez.
 * Viewport meta'daki maximum-scale=1 + user-scalable=no kilidi web'de kalkar (sayfa yakınlaştırma = erişilebilirlik, Lighthouse "meta-viewport"). Tuval (#viewport none),
 * belge gövdesi (.doc-body pan-x pan-y) ve alt gezinme (none) kendi hareketlerini yönetmeye devam eder; geri kalan yüzeyler tarayıcı yakınlaştırmasına açıktır.
 */
html.web .home-pages { touch-action: pan-y pinch-zoom; }   /* ana ekran metni parmakla büyütülebilir; düşey kaydırma kilidi (pan-y) korunur */
/* iOS Safari: yazı boyu 16 px'ten küçük giriş kutusuna odaklanınca sayfayı kendiliğinden yakınlaştırır (maximum-scale=1 bunu önlüyordu): dokunmatik iOS'ta 16 px alt sınır */
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    html.web input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), html.web select, html.web textarea { font-size: max(16px, 1em); }
  }
}
/* .doc-card svg.ic (40 px, vurgu rengi) kartın İÇİNDEKİ düğme simgesini de eziyordu: amber düğmede amber, görünmez simge. Düğme / çip simgesi kendi boyunda ve düğmenin renginde */
html.web .doc-card .btn svg.ic, html.web .doc-card .chip svg.ic { width: 20px; height: 20px; color: currentColor; }
/* örnek kartında dosya adı ve indirme boyutu ayrı satırlar: dar kartta ad kısalsa da boyut her zaman görünür (home.js › renderSamples) */
.sample .s-tx small.s-sz { color: var(--accent); font-weight: 600; }