:root {
  --cyan: #00eaff;
  --magenta: #ff2fb2;
  --white: #eaf6ff;

  --glow-strong: 0 0 8px currentColor, 0 0 16px currentColor, 0 0 28px currentColor;
  --glow-soft: 0 0 6px currentColor, 0 0 12px currentColor;

  --leg-width: 14px;
  --joint-size: 32px;
  --tip-size: 14px;
}

#compass-container.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#compass-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -40%);
  width: 240px;
  height: 300px;
  z-index: 5;
background-color: rgba(0, 0, 0, 0.0);
  --angle-left: -14deg;
  --angle-right: 18deg;
}

/* Tutamaç */
.handle-top {
  position: absolute;
  top: -60px; /* menteşenin üstünde */
  left: 50%;
  width: 25px;
  height: 50px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #00ffff 50%, #00ffff 100%);
  box-shadow: 0 0 8px var(--cyan), 0 0 16px var(--magenta);
}

/* Menteşe / kafa */
.rotate-head {
  position: absolute;
  top: 12px; /* Menteşeyi bacakların yeni üst konumuna çek */
  left: 50%;
  transform: translateX(-50%);
  width: 24px; /* Bacakların genişliği ile uyumlu hale getir */
  height: 24px;
  border-radius: 50%;
  background-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  z-index: 2;
}

/* Ortak bacak ayarları */
.pergel-leg {
  position: absolute;
  
  /* Bacağın kendisini %8 aşağıdan başlat (Pivot noktası) */
  top: 8%; /* */
  
  left: 50%;
  width: var(--leg-width);
  
  /* Yüksekliği %8 azalt (aşağıdan başladığı için) */
  height: 80%; /* */
  
  /* Artık kendi en tepesinden (50% 0%) dönebilir */
  transform-origin: top center; /* */
  
  /* ...diğer stiller... */
}
/* Sol bacak */
.left-leg {
  transform: translateX(-50%) rotate(var(--angle-left));
  
  /* 1. Değişiklik: 'background' -> 'background-color' yapıldı */
  background-color: rgba(0, 100, 200, 0.7); 
  
  color: #00ffff; 
  box-shadow: var(--glow-strong);

  /* 2. Değişiklik: Cetvelden kopyalanan 3 satır */
  background-image: linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 255, 0.1) 75%),
                    linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 255, 0.1) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

/* Sağ bacak */
.right-leg {
  transform: translateX(-50%) rotate(var(--angle-right));
  
  /* 1. Değişiklik: 'background' -> 'background-color' yapıldı */
  background-color: rgba(0, 100, 200, 0.7); 
  
  color: #00ffff; 
  box-shadow: var(--glow-strong);

  /* 2. Değişiklik: Cetvelden kopyalanan 3 satır */
  background-image: linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 255, 0.1) 75%),
                    linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 255, 255, 0.1) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}


/* İğne ucu */
.needle-tip {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: var(--tip-size);
  height: var(--tip-size);
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 35% 35%, 35% 75%, 50% 100%, 65% 75%, 65% 35%);
  background: #00ffff;
  box-shadow: var(--glow-soft);
}

/* Kalem ucu */
.pen-tip {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: var(--tip-size);
  height: var(--tip-size);
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 38% 30%, 38% 75%, 50% 100%, 62% 75%, 62% 30%);
  background: #00ffff;
  box-shadow: var(--glow-soft);
}

/* Kalem ucu detay çizgisi */
.pen-tip::after {
  content: "";
  position: absolute;
  bottom: 22%;
  left: 50%;
  width: 2px;
  height: 58%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
  border-radius: 2px;
}

/* YENİ: Bacaklara ve iğne ucuna sürükleme imleci ekle */
.pergel-leg,
.needle-tip {
    cursor: grab;
}

.pergel-leg:active,
.needle-tip:active {
    cursor: grabbing;
}

/* YENİ: Diğer tutamaçlara da doğru imleçleri verelim */
.pen-tip {
    cursor: pointer; /* Veya 'crosshair' */
}

.handle-top {
    cursor: crosshair;
}

/* YENİ: Kalem Bacağı Yeniden Boyutlandırma Tutamacı */
.pen-resize-handle {
  position: absolute;
  /* Kalem ucunun (dışarıda) biraz üstünde (bacağın içinde) */
  bottom: 10px; 
  left: 50%;
  transform: translateX(-50%);
  
  width: 24px;  /* Daha kolay tıklanabilir */
  height: 24px;
  
  background: rgba(255, 0, 255, 0.8); /* Magenta */
  border: 2px solid #f0f;
  border-radius: 50%; /* Yuvarlak */
  
  cursor: nwse-resize; /* Çapraz yeniden boyutlandırma imleci */
  z-index: 1001;
  
  /* İçine simge ekleyelim */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pen-resize-handle::before {
  content: '↔'; /* Cetveldekiyle aynı simge */
  color: #f0f;
  text-shadow: 0 0 5px #000;
  font-size: 14px;
  font-weight: bold;
}

/* Bacakların, iğne ucunun ve kalem ucunun tamamı SÜRÜKLEME yapar */
.pergel-leg,
.needle-tip,
.pen-tip {
    cursor: grab;
}

.pergel-leg:active,
.needle-tip:active,
.pen-tip:active {
    cursor: grabbing;
}

/* Sadece üst tutamaç ÇİZİM yapar */
.handle-top {
    cursor: crosshair;
}

/* --- pergel.css EN SONA EKLEYİN --- */

/* Pergelin Kendisini Büyütme/Küçültme Tutamacı (Turuncu) */
.pergel-scale-handle {
    position: absolute;
    /* Konum: Sol Üst Köşe (İğne tarafına yakın ama yukarıda) */
    top: 0;
    left: 0;
    
    width: 24px;
    height: 24px;
    
    background: rgba(255, 165, 0, 0.9); /* Turuncu */
    border: 2px solid #FFA500;
    border-radius: 50%;
    
    cursor: nwse-resize; /* Çapraz ok */
    z-index: 1002;
    
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px #000;
}

.pergel-scale-handle::before {
    content: '↔';
    color: #fff;
    text-shadow: 0 0 3px #000;
    font-size: 14px;
    font-weight: bold;
    transform: rotate(45deg);
}

/* (Yeni butonun imleci zaten yukarıda 'pen-resize-handle' içinde ayarlandı) */