/* VEKTORX Saha v2.0 — tablet ve telefon düzeni (belgeler/tasarim_v2/saha.css dilinde; dokunma alanları ≥ 44 px) */
html, body { font-size: 16px; }
.ust-cubuk { background: #fff; color: var(--murekkep); border-bottom: 1px solid var(--cizgi); padding: 12px 16px 10px; position: sticky; top: 0; z-index: 5; }
.ust-cubuk img { height: 26px; background: transparent; padding: 0; border-radius: 0; }
.ust-cubuk .ust-k { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ust-cubuk h1 { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--murekkep); }
.ust-cubuk .ust-alt { font-size: 12.5px; color: var(--gri); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cevrim { font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 4px 9px; white-space: nowrap; background: #EEF1F5; color: var(--gri); }
.cevrim[data-durum="cevrimici"] { background: var(--yesil-acik); color: var(--yesil); }
.cevrim[data-durum="cevrimdisi"] { background: #FFF4DD; color: var(--sari); }

.icerik { padding: 14px 14px 110px; gap: 12px; }
h1 { font-size: 20px; font-weight: 600; margin: 4px 0 2px; letter-spacing: -.01em; }
.baslik-satir { display: flex; align-items: center; gap: 10px; }
.baslik-satir h1, .baslik-satir h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
.geri { min-width: var(--dokunma); padding: 0 12px; font-size: 22px; }
.alt { color: var(--gri); font-size: 13.5px; }
.kirmizi { color: var(--kirmizi); }
.bolum-baslik { margin: 8px 0 0; font-size: 13px; letter-spacing: .04em; color: var(--gri); font-weight: 700; }
.ilerleme { height: 6px; border-radius: 99px; background: #E6ECF3; margin: 4px 0 8px; overflow: hidden; }
.ilerleme > i { display: block; height: 100%; width: var(--w, 0%); background: var(--gecis); border-radius: 99px; transition: width .25s; }
.kart { padding: 14px; }
.kart h2 { font-size: 14.5px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kart h2 small { font-weight: 500; color: var(--gri); font-size: 12px; text-align: right; }
.kart > .kart { margin-top: 10px; }
.liste { display: flex; flex-direction: column; gap: 10px; }
.satir { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 12px 14px; min-height: 60px; text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.satir .alt { font-size: 13.5px; }
.satir.vurgulu { border: 2px solid var(--amber); }
.satir.vurgulu-yesil { border: 2px solid var(--yesil-logo); }
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.aile { border: 0; border-radius: 14px; padding: 14px; min-height: 100px; color: #fff; text-align: left; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.aile small { font-weight: 400; font-size: 13px; opacity: .95; }
.cipler { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.cipler-sade { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cip { flex-shrink: 0; border: 1px solid var(--cizgi); background: #fff; border-radius: 999px; padding: 0 16px; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer; color: var(--lacivert); }
.cip[aria-pressed="true"] { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.cip.tamam { border-color: var(--yesil-logo); }
.cip.kucuk { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.cip.genis { min-height: 56px; text-align: left; }
.soru { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.25; }
.ipucu { color: var(--gri); font-size: 14px; }
.ipucu.kucuk { font-size: 12.5px; }
.dugme { font-weight: 600; font-size: 15px; }
.dugme.buyuk { min-height: 60px; font-size: 18px; }
.dugme.kucuk { min-height: 40px; padding: 0 12px; font-size: 13.5px; background: #fff; border: 1px solid var(--cizgi); color: var(--lacivert); }
.dugme.kucuk[aria-pressed="true"] { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.dugme.kucuk.sil { color: var(--kirmizi); min-width: 44px; }
.dugme.yesil { background: var(--yesil-logo); color: #fff; }
.dugme.baglanti { text-decoration: none; }
.dugme[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.alt-eylemler { display: flex; gap: 10px; flex-wrap: wrap; }
.alt-eylemler .dugme { flex: 1 1 140px; min-height: 50px; }
.bos { text-align: center; color: var(--gri); padding: 24px; border: 2px dashed var(--cizgi); border-radius: var(--yaricap); }
.onay-kutusu { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-top: 8px; }
.onay-kutusu input[type=checkbox] { width: 26px; height: 26px; }

/* yazı alanları: kalemle (Scribble / S Pen) ve eldivenle rahat yazılacak boy */
.icerik input[type=text], .icerik input[type=url], .icerik input[type=date], .icerik select { font: inherit; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; color: var(--yazi); font-size: 17px; }
.icerik input[list]::-webkit-calendar-picker-indicator { opacity: .5; }

/* ---- tek sayfa form: iki sütunlu alan ızgarası ---- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alan.tam { grid-column: 1 / -1; }
.alan > label { font-size: 12.5px; font-weight: 600; color: var(--gri); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alan .zorunlu { color: var(--kirmizi); }
.etiket-rozet { font-size: 10.5px; font-weight: 600; color: var(--mavi); background: #F3F9FD; border: 1px solid #B9DDF4; border-radius: 99px; padding: 1px 7px; margin-left: auto; }
.etiket-rozet.okundu { color: var(--yesil); background: var(--yesil-acik); border-color: #C5E6AE; }
.etiket-rozet.olculemedi { color: var(--sari); background: var(--sari-acik); border-color: #F3DFAF; }
.etiket-rozet.eksik { color: var(--kirmizi); background: var(--kirmizi-acik); border-color: #F2C2C2; }
.alan[data-kaynak="etiket"] input { background: #F9FBFE; }
.deger-satir { display: flex; align-items: center; gap: 6px; }
.deger-satir input { flex: 1 1 120px; min-width: 0; font-weight: 600; }
.deger-satir .birim { font-size: 14px; font-weight: 600; color: var(--gri); }
.kalem-dugme { min-height: 44px; min-width: 44px; padding: 0 10px; flex: 0 0 auto; }
.alan-ekler { display: flex; gap: 6px; flex-wrap: wrap; }
.uyari-alani { display: flex; flex-direction: column; gap: 6px; }
.uyari-alani .uyari { padding: 10px 12px; font-size: 13.5px; }
.secim { display: flex; gap: 6px; flex-wrap: wrap; }
.secim button { flex: 1 1 110px; min-height: 44px; border: 1px solid var(--cizgi); border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--gri); background: #fff; cursor: pointer; padding: 0 10px; }
.secim button[aria-pressed="true"] { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.ikili { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.ikili select { min-width: 84px; }
.mahal-alani { grid-column: 1 / -1; }
.foto-dugme { display: flex; align-items: center; gap: 12px; width: 100%; border: 2px dashed var(--mavi); background: var(--mavi-acik); border-radius: 12px; padding: 12px; color: var(--lacivert); text-align: left; font: inherit; cursor: pointer; min-height: 70px; }
.foto-dugme .ik { width: 46px; height: 46px; border-radius: 12px; background: var(--lacivert); display: grid; place-items: center; color: #fff; flex: none; font-size: 22px; }
.foto-dugme b { display: block; font-size: 15px; }
.foto-dugme > span:last-child > span { display: block; font-size: 12.5px; color: var(--gri); }
.foto-kucuk { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.foto-kucuk img, .foto-kucuk .foto-merkezde.kucuk { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--cizgi); }
.foto-kucuk img.var { position: relative; }
.etiket-durum { min-height: 18px; }
.foto-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.foto-liste .rozet { background: #EEF1F5; color: var(--gri); font-size: 12.5px; }
.foto-liste .rozet.uygun { background: var(--yesil-acik); color: var(--yesil); }
#foto-cek { width: 100%; margin-bottom: 10px; }
.sesli-notlar { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* RCD testi ✓ / ✗ / test edilemedi — tek dokunuş */
.test-secenekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.test-dugme { font: inherit; font-weight: 700; font-size: 17px; min-height: 52px; border-radius: 12px; border: 2px solid var(--gri); background: #fff; color: var(--gri); cursor: pointer; padding: 0 10px; }
.test-dugme.test-evet { border-color: var(--yesil); color: var(--yesil); } .test-dugme.test-evet[aria-pressed="true"] { background: var(--yesil); color: #fff; }
.test-dugme.test-hayir { border-color: var(--kirmizi); color: var(--kirmizi); } .test-dugme.test-hayir[aria-pressed="true"] { background: var(--kirmizi); color: #fff; }
.test-dugme.test-yok[aria-pressed="true"] { background: var(--gri); color: #fff; }
.test-ikili { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.test-ikili .test-dugme { min-height: 48px; font-size: 22px; padding: 0 8px; }
.test-ikili .test-dugme.kucuk { font-size: 16px; min-width: 44px; }
.tik { color: var(--yesil); font-weight: 700; } .carpi { color: var(--kirmizi); font-weight: 700; }

/* el yazısı alanı ve küçük resmi */
.elyazisi-tuval { display: block; width: 100%; height: 260px; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; touch-action: none; cursor: crosshair; }
.elyazisi-kutu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; padding: 6px 10px; }
.elyazisi-kutu img { width: 150px; max-width: 100%; height: 54px; object-fit: contain; background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; }
.elyazisi-kutu .alt { flex: 1 1 140px; font-size: 13px; }
.elyazisi-isaret { color: var(--lacivert); font-weight: 700; }

/* ölçüm noktaları — satır satır */
.nokta-liste { display: flex; flex-direction: column; gap: 8px; }
.nokta-satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; position: relative; border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px 10px 10px 34px; background: #FBFCFE; }
.nokta-satir .no { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; color: var(--gri); }
.nokta-satir .alan { flex: 1 1 130px; min-width: 110px; }
.nokta-satir .alan:first-of-type { flex: 2 1 180px; }
.nokta-eylem { flex: 0 0 auto; margin-left: auto; }
.nokta-satir .alan > label { font-size: 11.5px; }
.nokta-satir input, .nokta-satir select { min-height: 44px; font-size: 15px; padding: 6px 10px; }
.nokta-eylem { display: flex; gap: 6px; align-items: flex-end; }
.nokta-satir .test-ikili { grid-template-columns: 44px 44px 40px; }
.ekle { width: 100%; min-height: 48px; border: 2px dashed #B9C6D6; border-radius: 12px; background: transparent; color: var(--lacivert); font: inherit; font-weight: 600; font-size: 14.5px; display: grid; place-items: center; margin-top: 8px; cursor: pointer; }

/* kontrol maddeleri */
.dikkat { background: #FFF8E8; border: 1px solid #F3DFAF; border-radius: 12px; padding: 12px; font-size: 13.5px; }
.dikkat b { display: block; margin-bottom: 4px; }
.dikkat ul { margin: 0; padding-left: 18px; } .dikkat li { margin: 2px 0; }
.madde { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid #EEF2F7; }
.madde:last-child { border: 0; }
.madde-ust { display: flex; align-items: center; gap: 10px; }
.madde .m { flex: 1; font-size: 14px; min-width: 0; }
.madde .m small { display: block; color: var(--gri); font-size: 11.5px; }
.madde .m .kr { color: var(--kirmizi); font-weight: 700; }
.uc { display: flex; gap: 4px; flex: none; }
.uc button { width: 46px; height: 44px; border: 1px solid var(--cizgi); border-radius: 8px; display: grid; place-items: center; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--gri); background: #fff; cursor: pointer; padding: 0; }
.uc button.u[aria-pressed="true"] { background: var(--yesil-acik); color: var(--yesil); border-color: #C5E6AE; }
.uc button.ud[aria-pressed="true"] { background: var(--kirmizi-acik); color: var(--kirmizi); border-color: #F2C2C2; }
.uc button.na[aria-pressed="true"] { background: #EEF1F5; color: var(--gri); border-color: #C9D3E0; }
.ud-not { display: flex; gap: 6px; align-items: center; }
.ud-not input { font-size: 14px; min-height: 44px; }
.onay-dugme { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--cizgi); background: #fff; font: inherit; font-size: 20px; font-weight: 700; color: var(--yesil); cursor: pointer; flex: none; }
.onay-dugme[aria-pressed="true"] { background: var(--yesil-logo); border-color: var(--yesil-logo); color: #fff; }
.proje-madde input { margin-left: 54px; width: calc(100% - 54px); font-size: 14px; min-height: 42px; }
.proje-madde[data-tamam="true"] .m b { color: var(--yesil); }
.rozet.proje { background: #EEE8FB; color: #5B3FA0; }

/* elektrik panolar */
.pano { background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px; margin-bottom: 10px; position: relative; }
.pano[data-durum="eksik"] { border-color: #F3DFAF; }
.pano .no { position: absolute; left: -1px; top: -1px; background: var(--lacivert); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 14px 0 10px 0; padding: 3px 9px; }
.pano .sat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.pano .sat input, .pano .sat select { min-height: 44px; font-size: 15px; padding: 6px 10px; }
.pano .pano-foto { position: absolute; right: 10px; top: 8px; min-width: 44px; height: 44px; border-radius: 10px; background: var(--mavi-acik); border: 1px solid #B9DDF4; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--lacivert); font: inherit; font-size: 18px; cursor: pointer; padding: 0 8px; }
.pano .pano-foto.var { background: var(--yesil-logo); color: #fff; border-color: var(--yesil-logo); }
.pano .pano-foto small { font-size: 12px; font-weight: 700; }
.pano-alt { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pano-alt .rozet { flex: 1 1 100%; font-size: 12px; }
.rozet.ok { background: var(--yesil-acik); color: var(--yesil); } .rozet.eksik { background: #FDF3E1; color: #A66B00; }
.pano .uyari { font-size: 12.5px; padding: 8px 10px; margin-top: 8px; }
.pano .kart { border: 0; padding: 0; margin-top: 10px; }

/* görevler ve yapılacak kontroller */
.gorev { display: flex; flex-direction: column; gap: 8px; }
.gorev.bugun { border: 2px solid var(--lacivert); } .gorev.yarin { border: 2px solid var(--mavi); }
.gorev-ust { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.gorev-ad { font-size: 17px; }
.kontrol-listesi { display: flex; flex-direction: column; }
.kontrol-satir { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--cizgi); }
.kontrol-satir-ust { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.kontrol-listesi .kontrol-satir:first-of-type { border-top: 0; }
.kontrol-listesi.kart-ici { padding: 6px 10px; background: var(--mavi-acik); border-radius: 10px; }
.kontrol-listesi.kart-ici .kontrol-satir { padding: 6px 0; }
.kayit-satiri .eksik-nedeni { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.program-satir { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid #EEF2F7; }
.program-satir:last-child { border: 0; }

/* alt çubuk, alt sayfa, bildirim */
.alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--cizgi); padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 10px; z-index: 8; }
.alt-cubuk .dugme { flex: 1; min-height: 50px; border-radius: 12px; border: 1px solid var(--cizgi); background: #fff; color: var(--lacivert); font-size: 15px; }
.alt-cubuk .dugme.ana { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.alt-cubuk .dugme.yesil { background: var(--yesil-logo); color: #fff; border-color: var(--yesil-logo); }
.alt-sayfa { position: fixed; inset: 0; background: rgba(20,33,61,.45); display: flex; align-items: flex-end; z-index: 20; }
.alt-sayfa > .kart { width: 100%; max-width: 760px; margin: 0 auto; border-radius: 22px 22px 0 0; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.alt-sayfa .dugme { min-height: 50px; }
.bildirim { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--lacivert); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; z-index: 30; max-width: 90vw; font-size: 14.5px; }

/* ---- kamera ---- */
.kamera { position: fixed; inset: 0; background: #000; z-index: 50; color: #fff; }
.kamera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera.flas::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .6; }
.k-ust { position: absolute; top: 0; left: 0; right: 0; padding: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.k-mesaj { background: rgba(0,0,0,.6); padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 17px; }
.k-mesaj[data-durum="hazir"] { background: #2e8b3a; }
.k-mesaj[data-durum="bulanik"], .k-mesaj[data-durum="karanlik"], .k-mesaj[data-durum="parlak"] { background: #c77700; }
.k-sablon { width: 120px; height: 120px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4); border-radius: 10px; flex-shrink: 0; }
.k-sablon .k-govde * { fill: rgba(255,255,255,.25); stroke: rgba(255,255,255,.8); stroke-width: 1.5; }
.k-sablon circle { fill: rgba(0,0,0,.6); stroke: #fff; stroke-width: 1; }
.k-sablon circle.simdi { fill: #3bd16f; } .k-sablon circle.tamam { fill: #fff; }
.k-sablon text { font-size: 7px; font-weight: 700; fill: #fff; }
.k-talimat { position: absolute; left: 14px; right: 14px; top: 150px; background: rgba(0,0,0,.55); border-radius: 12px; padding: 10px 14px; font-size: 16px; line-height: 1.35; }
.k-alt { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(10,14,18,.8); padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.k-liste { display: flex; gap: 6px; overflow-x: auto; }
.k-cip { flex-shrink: 0; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.15); }
.k-cip.simdi { background: #fff; color: #14213D; } .k-cip.tamam { background: #ddf3e4; color: #1b6e3a; }
.k-dugmeler { display: flex; justify-content: space-between; align-items: center; }
.k-dugmeler button.k-atla, .k-dugmeler button.k-bitir { font: inherit; font-weight: 700; color: #fff; background: rgba(255,255,255,.15); border: 0; border-radius: 12px; min-width: 96px; min-height: 48px; }
.k-cek { width: 84px; height: 84px; border-radius: 50%; border: 6px solid #fff; background: rgba(255,255,255,.3); }
.k-cek[data-hazir="1"] { background: #3bd16f; }
.foto-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.foto-izgara figure { margin: 0; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; }
.foto-izgara img { width: 100%; height: 100px; object-fit: cover; display: block; }
.foto-izgara figcaption { font-size: 12px; padding: 5px 8px; color: var(--gri); }
.k-bitis { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.k-bitis-kart { background: #fff; color: #14213D; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; max-width: 420px; width: 100%; font-size: 18px; }
.k-bitis-kart button { font: inherit; font-weight: 700; min-height: 56px; border-radius: 12px; border: 0; }
.k-bitis-kart .k-evet { background: #1b6e3a; color: #fff; } .k-bitis-kart .k-ek { background: #e6f2fa; color: #002A5B; }
.foto-merkezde { height: 100px; display: grid; place-items: center; background: var(--mavi-acik); color: var(--lacivert); font-weight: 700; font-size: 13px; }
.foto-merkezde.kucuk { height: 64px; width: 64px; font-size: 11px; }
.tablo { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: 15px; }
.tablo th, .tablo td { padding: 8px 10px; border-bottom: 1px solid var(--cizgi); text-align: left; }
.tablo-kap { overflow-x: auto; }

/* ---- çizim defteri (sonsuz tuval) ---- */
.cizim { position: fixed; inset: 0; background: var(--kagit); z-index: 40; display: flex; flex-direction: column; color: var(--murekkep); }
.cizim-ust { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; background: #fff; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.cizim-ust-grup { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cizim-ust-dugme { font: inherit; font-size: 13px; font-weight: 600; min-height: 44px; min-width: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--cizgi); background: #fff; color: var(--lacivert); cursor: pointer; }
.cizim-ust-dugme[aria-pressed="false"] { opacity: .55; }
.cizim-ust-dugme.ana { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.cizim-sayfa { font: inherit; font-size: 13.5px; min-height: 44px; border-radius: 10px; border: 1px solid var(--cizgi); padding: 0 8px; background: #fff; max-width: 140px; }
.cizim-govde { flex: 1; display: flex; min-height: 0; }
.cizim-araclar { width: 76px; background: #fff; border-right: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; overflow-y: auto; }
.cizim-arac { font: inherit; min-height: 52px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--murekkep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.cizim-arac .cizim-simge { font-size: 20px; line-height: 1; }
.cizim-arac small { font-size: 10.5px; color: var(--gri); }
.cizim-arac[aria-pressed="true"] { background: var(--mavi-acik); border-color: #B9DDF4; }
.cizim-renkler { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.cizim-renk { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cizgi); cursor: pointer; justify-self: center; }
.cizim-renk[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--mavi); }
.cizim-kalinliklar { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cizim-kalinlik { min-height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent; display: flex; align-items: center; padding: 0 8px; cursor: pointer; }
.cizim-kalinlik i { display: block; width: 100%; background: var(--murekkep); border-radius: 4px; }
.cizim-kalinlik[aria-pressed="true"] { background: var(--mavi-acik); border-color: #B9DDF4; }
.cizim-tuval-kap { flex: 1; position: relative; min-width: 0; }
.cizim-tuval { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; background: #fff; cursor: crosshair; }
.cizim-tuval[data-arac="el"] { cursor: grab; }
.cizim-tuval[data-arac="silgi"] { cursor: cell; }
.cizim-tuval[data-arac="metin"] { cursor: text; }
.cizim-alt { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--cizgi); font-size: 12.5px; color: var(--gri); flex-wrap: wrap; }
.cizim-durum { font-weight: 600; color: var(--murekkep); }
.cizim-soru { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px; width: min(92vw, 420px); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px rgba(20,33,61,.2); z-index: 45; }
.cizim-soru input { font: inherit; font-size: 17px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 10px; }
.cizim-soru-dugmeler { display: flex; gap: 8px; justify-content: flex-end; }
.cizim-soru-dugmeler .dugme { min-height: 44px; }

@media (max-width: 480px) {
  .grid, .pano .sat { grid-template-columns: 1fr; }
  .alt-eylemler .dugme { flex-basis: 100%; }
  .cizim-araclar { width: 64px; }
  .cizim-ust-dugme { font-size: 12.5px; padding: 0 8px; }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; }
  .pano .sat { grid-template-columns: 1fr 1fr 1fr; }
}