/* Ekran cetveli — UYGULAMAYA_EKLENECEKLER 102, 0.3.10 (23.10.2026). Renkler yalnız tema değişkenlerinden (çizgiler --tx). */
.ct-kilit, .ct-kilit body { overflow: hidden; overscroll-behavior: none; }
.ct-yazi { margin: 0; line-height: 1.45; }
.ct-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ct-dugme { min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--ln); background: var(--sf); color: var(--tx); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ct-dugme.ct-ana { background: var(--ac); border-color: var(--ac); color: var(--onac); }
.ct-dugme[aria-pressed="true"] { background: var(--ac); border-color: var(--ac); color: var(--onac); }
.ct-dugme.ct-kare { width: 52px; padding: 10px 0; font-size: 16px; }
.ct-dugme.ct-genis { width: 100%; margin-top: 8px; font-weight: 500; }
.ct-dugme:disabled, .ct-ince:disabled { opacity: .45; cursor: default; }

/* Ayar: kart çerçevesi (dış kenarı kartın kendisi) — ekran kenarına 8 px kalana kadar geniş alan */
.ct-kartalan { margin: 0 -8px 12px; display: flex; justify-content: center; }
.ct-kart { position: relative; box-sizing: border-box; border: 2px solid var(--ac); background: color-mix(in srgb, var(--ac) 7%, var(--sf)); flex: none; }
.ct-cip { position: absolute; left: 50%; top: 14%; width: 22%; height: 9%; margin-left: -11%; border: 1.5px solid var(--mt); border-radius: 6px; }
.ct-kart-yazi { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 13px; color: var(--mt); }
.ct-surgu { display: flex; align-items: center; gap: 10px; }
.ct-aralik { flex: 1; min-width: 0; height: 44px; accent-color: var(--ac); margin: 0; }
.ct-ince { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ln); background: var(--sf); color: var(--tx); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.ct-deger { margin: 6px 0 0; text-align: center; }
.ct-uyari h2 { margin-bottom: 6px; }

/* Cetvel katmanı: bütün ekranı kaplar (alt menünün de üstünde) */
.ct-katman { position: fixed; inset: 0; z-index: 30; background: var(--bg); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; overscroll-behavior: none; cursor: ns-resize; }
.ct-sondaj { position: absolute; top: 0; left: 0; width: 1px; height: env(safe-area-inset-top, 0px); visibility: hidden; pointer-events: none; }
.ct-cetvel { position: absolute; top: 0; display: block; background: var(--sf); color: var(--tx); overflow: visible; }
.ct-sol { left: 0; border-right: 1px solid var(--ln); }
.ct-sag { right: 0; border-left: 1px solid var(--ln); display: none; }
.ct-katman[data-inc="1"] .ct-sag { display: block; }
.ct-t { stroke: currentColor; stroke-width: 1; fill: none; }
.ct-t-cm, .ct-t-in { stroke-width: 1.4; }
.ct-sifir { stroke: var(--ac); stroke-width: 2; }
.ct-cetvel text { fill: currentColor; font-family: var(--sayi); font-size: 13px; font-weight: 600; }
.ct-panel { position: absolute; top: 0; bottom: 0; left: 76px; right: 12px; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
.ct-katman[data-inc="1"] .ct-panel { right: 68px; }
.ct-panel button, .ct-panel .ct-okuma { pointer-events: auto; }
.ct-ust { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.ct-ust h1 { margin: 0; font-family: var(--baslik); font-size: 22px; font-weight: 700; line-height: 1.2; }
.ct-geri { flex: none; width: 44px; height: 44px; margin-left: -8px; border: 0; background: none; color: var(--tx); cursor: pointer; display: grid; place-items: center; }
.ct-ipucu { margin: 4px 0 0; line-height: 1.4; max-width: 34ch; }
.ct-alt { margin-top: auto; }
.ct-okuma { background: var(--sf); border: 1px solid var(--ln); border-radius: 16px; padding: 12px 14px; }
.ct-buyuk { font-size: 34px; font-weight: 700; line-height: 1.1; }
.ct-kucuk { margin-top: 2px; font-size: 15px; }
.ct-panel .ct-dugmeler { margin-top: 10px; }

/* Sürüklenen işaret: --ac renkli ince çizgi + 44 px tutamak */
.ct-isaret { position: absolute; left: 0; right: 0; height: 0; z-index: 2; pointer-events: none; }
.ct-cizgi { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ac); }
.ct-tutamak { position: absolute; right: 18px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: var(--ac); color: var(--onac);
  display: grid; place-items: center; font-size: 20px; font-weight: 700; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,.25); outline-offset: 3px; }
.ct-katman[data-inc="1"] .ct-tutamak { right: 74px; }
.ct-suruk .ct-tutamak { transform: scale(1.08); }