/* ============================================================
   ŞEKİL EDİTÖRÜ — Samsung Notes Tarzı Maksimum Alan
   ----------------------------------------------------------
   sekil-editor-max.css — mevcut draw-* yapısını BOZMADAN
   maksimum çizim alanı + yüzen araçlar + daraltılabilir panel.
   JS (Fabric.js, fe* fonksiyonları, canvas ID'leri) DEĞİŞMEZ.
   Mevcut modül CSS'inden SONRA yüklenir, override eder.
   ============================================================ */

/* ── Modal: tam ekran, koyu zemin ── */
#draw-modal {
  background: #0a0e12 !important;
  flex-direction: column !important;
}
#draw-editor {
  flex-direction: column !important;
  position: relative;
}

/* ── Üst araç çubuğu: ince, yüzen, cam efektli ── */
#draw-toolbar {
  position: absolute !important;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: rgba(20, 26, 32, .82) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  padding: 8px 12px !important;
  max-width: calc(100vw - 140px);
  transition: opacity .25s, transform .25s;
}

/* ── Sol şekil paneli: yüzen, daraltılabilir ── */
#draw-sidebar {
  position: absolute !important;
  top: 0; left: 0; bottom: 0;
  width: 230px !important;
  z-index: 25;
  background: rgba(15, 20, 26, .92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 4px 0 24px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  padding: 56px 10px 10px !important;
}
/* Daraltılmış durum — .collapsed sınıfı JS ile eklenir/çıkarılır */
#draw-sidebar.collapsed {
  transform: translateX(-230px);
}

/* Panel aç/kapa düğmesi (JS ile eklenir) */
#draw-sidebar-toggle {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 35;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(20, 26, 32, .82);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  color: #eaf3f4;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#draw-sidebar-toggle:hover {
  background: var(--accent, #14b8a6);
  transform: scale(1.05);
}

/* ── Canvas alanı: TÜM EKRAN ── */
#draw-canvas-area {
  flex: 1 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 52px 0 8px !important;
  background:
    radial-gradient(1200px 700px at 50% 40%, #141c22, #0a0e12) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: auto;
}

/* Canvas konteyner: gölge + hafif kenar, ortada yüzer */
#draw-canvas-container,
#fe-canvas-container {
  box-shadow: 0 20px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05) !important;
  border-radius: 4px;
  transition: transform .2s;
}

/* ── Kapatma düğmesi: sağ üst, belirgin ── */
#draw-modal .draw-close,
#draw-modal [onclick*="feClose"] {
  position: absolute !important;
  top: 14px; right: 14px;
  z-index: 35;
}

/* ── Şekil paneli kategorileri: kompakt grid ── */
#draw-sidebar .dcat-title,
#draw-sidebar .dshape-cat-title {
  position: sticky; top: 0;
  background: rgba(15,20,26,.96);
  padding: 6px 2px;
  letter-spacing: .5px;
}

/* Şekil butonları: hover'da markalı parlama */
#draw-sidebar .dshape,
#draw-sidebar .draw-shape-btn,
#draw-sidebar [onclick*="feS("] {
  transition: all .18s cubic-bezier(.34,1.56,.64,1) !important;
}
#draw-sidebar .dshape:hover,
#draw-sidebar .draw-shape-btn:hover,
#draw-sidebar [onclick*="feS("]:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--accent, #14b8a6) !important;
  box-shadow: 0 4px 14px rgba(20,184,166,.3);
}

/* ── Araç butonları (toolbar): yuvarlak, dokunmatik dostu ── */
#draw-toolbar .tbtn,
#draw-toolbar button {
  min-width: 38px; min-height: 38px;
  border-radius: 10px !important;
  transition: all .18s !important;
}
#draw-toolbar .tbtn:hover,
#draw-toolbar button:hover {
  background: var(--accent, #14b8a6) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ── Mobil/tablet: panel tam gizlenebilir, dokunmatik öncelik ── */
@media (max-width: 768px) {
  #draw-sidebar { width: 200px !important; }
  #draw-sidebar.collapsed { transform: translateX(-200px); }
  #draw-toolbar {
    top: auto; bottom: 16px;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }
}

/* ── Kalem modu imleci ── */
#fe-canvas, #draw-canvas { touch-action: none; }

/* ── "Tam alan" hissi: gövde taşmasını engelle ── */
body:has(#draw-modal) { overflow: hidden; }

/* ============================================================
   İKON TOOLBAR — GoodNotes / Samsung Notes tarzı temiz butonlar
   (emoji+yazı yerine SVG ikonlar; tüm fe* işlevleri aynı)
   ============================================================ */
#draw-toolbar{ gap:5px !important; align-items:center !important; }
#draw-toolbar .dtb-colors{ display:flex; align-items:center; gap:5px; }
#draw-toolbar .dtb-c{
  width:22px; height:22px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.16); box-shadow:0 1px 2px rgba(0,0,0,.4);
  transition:transform .12s, border-color .12s;
}
#draw-toolbar .dtb-c:hover{ transform:scale(1.15); border-color:rgba(255,255,255,.5); }
#draw-toolbar .dtb-c.active{ border-color:#fff; }
#draw-toolbar .dtb-c-pick{ position:relative; overflow:hidden; display:inline-flex; padding:0;
  background:conic-gradient(from 0deg,#e11d48,#ca8a04,#16a34a,#2563eb,#9333ea,#e11d48); }
#draw-toolbar .dtb-c-pick input{ position:absolute; inset:-6px; width:160%; height:160%; border:0; padding:0; cursor:pointer; opacity:0; }

#draw-toolbar .dtb-stroke{
  height:34px; padding:0 8px; border-radius:9px; outline:none; cursor:pointer; font-size:12px;
  background:rgba(255,255,255,.06); color:#e7eef0; border:1px solid rgba(255,255,255,.12);
}
#draw-toolbar .dtb-stroke option{ background:#1a232a; color:#e7eef0; }

#draw-toolbar .dtb-sep{ width:1px; height:24px; background:rgba(255,255,255,.14); margin:0 3px; flex:0 0 auto; }
#draw-toolbar .dtb-spacer{ flex:1 1 auto; }
#draw-toolbar .dtb-zoom{ color:#9fb0b6; font-size:11px; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }

/* ikon butonu */
#draw-toolbar .tbtn-ico{
  width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important;
  padding:0 !important; display:inline-flex !important; align-items:center; justify-content:center;
  border-radius:9px !important; background:transparent !important; cursor:pointer;
  border:1px solid transparent !important; color:#c4d0d4 !important;
  transition:background .14s, color .14s, transform .1s !important;
}
#draw-toolbar .tbtn-ico svg{ width:18px; height:18px; display:block; }
#draw-toolbar .tbtn-ico:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; transform:none !important; }
#draw-toolbar .tbtn-ico:active{ transform:scale(.92) !important; }

/* küçük metin butonu (Tümü, 1:1) */
#draw-toolbar .tbtn-txt{
  height:36px; padding:0 10px !important; min-width:0 !important; min-height:36px !important;
  border-radius:9px !important; background:transparent !important; cursor:pointer;
  border:1px solid rgba(255,255,255,.12) !important; color:#c4d0d4 !important;
  font-size:12px; font-weight:600; transition:all .14s !important;
}
#draw-toolbar .tbtn-txt:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; transform:none !important; }

/* sil (kırmızı), iptal, kaydet (yeşil birincil) */
#draw-toolbar .tbtn-del:hover{ background:rgba(239,68,68,.18) !important; color:#f87171 !important; }
#draw-toolbar .tbtn-cancel{
  width:36px; height:36px; min-width:36px !important; min-height:36px !important; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:9px !important; background:transparent !important;
  border:1px solid rgba(255,255,255,.12) !important; color:#c4d0d4 !important; transition:all .14s !important;
}
#draw-toolbar .tbtn-cancel svg{ width:18px; height:18px; }
#draw-toolbar .tbtn-cancel:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; transform:none !important; }
#draw-toolbar .tbtn-save{
  height:36px; padding:0 16px !important; min-width:0 !important; min-height:36px !important;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border-radius:9px !important; border:0 !important; color:#fff !important;
  background:linear-gradient(135deg,#16a34a,#0ea5a4) !important;
  font-size:13px; font-weight:700; box-shadow:0 4px 14px rgba(16,163,74,.4);
  transition:transform .1s, box-shadow .12s !important;
}
#draw-toolbar .tbtn-save svg{ width:17px; height:17px; }
#draw-toolbar .tbtn-save:hover{ transform:translateY(-1px) !important; box-shadow:0 7px 20px rgba(16,163,74,.5); color:#fff !important; }