/* ============================================================ tablet.css — TABLET DÜZENİ v1 ------------------------------------------------------------ VARSAYILAN KAPALI. Açmak için . NEDEN VAR Yüzen araç paleti dokunmatik modda 1584px genişlik istiyor. Kırılma noktası 720px'de; tabletler 744-820px portre. Yani hedef cihazların HİÇBİRİ kırılma noktasına girmiyor ve hepsi masaüstü sarma davranışı alıyor: Samsung Tab A9+ portre → 3 satır (~178px yüksek yüzen blok) iPad mini portre → 3 satır iPad 10.9" portre → 2 satır iPad yatay → 2 satır Öğretmen tuvalin üstünde üç katlı bir blokla çiziyor. ÇÖZÜM Tablet genişliğinde palet tek satıra indirilir: [seç][kalem][fosforlu][silgi][şekiller] │ [4 renk][+] │ [geri][ileri] │ [⋯] │ [katla] Az kullanılan araçlar (çizgi/dikdörtgen/daire/ok/metin), kalınlık, temizle ve PNG "⋯" açılırına taşınır. Yakınlaştırma sağ alta ayrı bir kümeye alınır. Hesaplanan genişlik: ~648px — en dar tablette (732px) sığar. ============================================================ */ /* ── Tablet modu: dokunmatik VE 1100px altı ── pointer:coarse şartı masaüstü dar pencereyi dışarıda bırakır. */ @media (min-width: 721px) and (pointer: coarse) { html[data-tablet="v1"] .toolbar { flex-wrap: nowrap; gap: 10px; padding: 7px 10px; border-radius: 16px; } /* Az kullanılan araçlar paletten çıkar, "⋯" açılırına gider */ html[data-tablet="v1"] #tools > .tool[data-tool="line"], html[data-tablet="v1"] #tools > .tool[data-tool="rect"], html[data-tablet="v1"] #tools > .tool[data-tool="ellipse"], html[data-tablet="v1"] #tools > .tool[data-tool="arrow"], html[data-tablet="v1"] #tools > .tool[data-tool="text"] { display: none; } /* "Şekiller" yazısı gizlenir, ikon kalır — 58px kazanç */ html[data-tablet="v1"] #sh-open span { display: none; } html[data-tablet="v1"] #sh-open { min-width: 46px; padding: 0 } /* Kalınlık ve yakınlaştırma ana paletten çıkar */ html[data-tablet="v1"] .toolbar > div:has(> #width), html[data-tablet="v1"] .toolbar > .zoom, html[data-tablet="v1"] .toolbar > #b-png, html[data-tablet="v1"] .toolbar > .sp { display: none; } /* Temizle düğmesi de açılıra iner — yanlışlıkla basma riski yüksek */ html[data-tablet="v1"] .toolbar .group > #clear { display: none; } /* Renkler: ilk 4 görünür, gerisi "+" açılırında */ html[data-tablet="v1"] #swatches .sw:nth-child(n+5) { display: none; } html[data-tablet="v1"] #swatches { gap: 6px } /* En dar tablet (iPad mini portre 744px) 4 renkle 2px taşıyordu. 800px altında 3 renk göster — 36px kazanç. */ @media (max-width: 799px) { html[data-tablet="v1"] #swatches .sw:nth-child(n+4) { display: none; } } /* ── "⋯" ve "+" açılırları ── */ html[data-tablet="v1"] .tm-pop-btn { min-width: 46px; height: 46px; flex: none; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: 700 18px var(--font); color: var(--text-2); } html[data-tablet="v1"] .tm-pop-btn:active { background: #eef1f4 } html[data-tablet="v1"] .tm-pop { position: fixed; z-index: 47; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(16,24,40,.18); padding: 10px; display: none; } html[data-tablet="v1"] .tm-pop.on { display: block } html[data-tablet="v1"] .tm-pop .tm-satir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 320px; } html[data-tablet="v1"] .tm-pop .tm-satir + .tm-satir { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } html[data-tablet="v1"] .tm-pop .tool { min-width: 46px; height: 46px } html[data-tablet="v1"] .tm-pop .sw { width: 34px; height: 34px } html[data-tablet="v1"] .tm-pop .lbl { font-size: 12px; min-width: 52px } html[data-tablet="v1"] .tm-pop input[type=range] { width: 150px } /* ── Yakınlaştırma: sağ alta ayrı küme ── */ html[data-tablet="v1"] #tm-zoom-kume { position: fixed; z-index: 44; right: calc(12px + env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 18px rgba(16,24,40,.12); } /* ── Kalem FAB'ı SOLA ── Kalemi sağ elde tutan öğretmenin eli sağ üst köşeyi kapatıyor. */ html[data-tablet="v1"] #tb-fab { right: auto; left: calc(12px + env(safe-area-inset-left)); } /* ── Şekil paneli: portre tablette ALT SAYFA ── 380px sabit panel portre tablette ekranın %46-51'ini kaplıyordu. */ html[data-tablet="v1"] .shp { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 66vh; max-width: none; border-left: 0; border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; transform: translateY(105%); } html[data-tablet="v1"] .shp.on { transform: none } html[data-tablet="v1"] .shp-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 16px; } html[data-tablet="v1"] .shp-item canvas { width: 72px; height: 72px } html[data-tablet="v1"] .shp-item .nm { font-size: 11.5px } html[data-tablet="v1"] .shp-tab { padding: 9px 16px; font-size: 13.5px } /* Yatay tablette yandan panel daha mantıklı — geniş ekranda alt sayfa tuvalin çoğunu kaplar. 900px üstü + yatay → yan panel. */ @media (min-width: 900px) and (orientation: landscape) { html[data-tablet="v1"] .shp { top: 0; left: auto; right: 0; bottom: 0; width: 420px; height: auto; border-top: 0; border-left: 1px solid var(--border); border-radius: 0; transform: translateX(105%); } html[data-tablet="v1"] .shp.on { transform: none } html[data-tablet="v1"] .shp-grid { grid-template-columns: repeat(3, 1fr) } } /* Sayfa göstergesi yakınlaştırma kümesiyle çakışmasın */ html[data-tablet="v1"] .pager { left: calc(50% - 30px) } } /* ── Karanlık tema uyumu ── */ @media (min-width: 721px) and (pointer: coarse) and (prefers-color-scheme: dark) { html[data-tablet="v1"] #tm-zoom-kume { background: rgba(20,24,32,.94) } }