/* --- gonye.css (YENİ DOSYA) --- */

/* Gönye Konteyneri (Ana Kutu) */
.gonye-container {
    position: fixed;
    /* 30-60-90 oranını koru (h = w * 1.732) */
    width: 200px;
    height: 346px; /* 200 * 1.732 */
    
    /* Başlangıç konumu */
    top: 50%;
    left: 50%;
    
    /* DÜZELTME: Görsel stiller ve clip-path buradan kaldırıldı */
    /* (Artık taşıyıcıyı değil, gövdeyi kesiyoruz) */
    background: transparent;
    border: none;
    backdrop-filter: none;
    box-shadow: none;
    clip-path: none; 
    
    z-index: 5; /* Panel (10) altında, Kanvas (0) üstünde */
    display: flex;
    transform-origin: center center; 
}

/* 3. Madde: Sürükleme için gövde */
.gonye-body {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: grab;
    
    /* DÜZELTME: Görsel stiller ve clip-path buraya taşındı */
    background: rgba(0, 100, 200, 0.7); /* Yarı saydam mavi */
    border: 2px solid #00ffff;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px #00ffff;
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
    
    /* 2. Madde: Cetvelle aynı desen */
    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;
    overflow: hidden; 
}
.gonye-body:active {
    cursor: grabbing;
}

/* 6. Madde: İşaretler (Dikey) */
.gonye-markings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}
.gonye-tick {
    position: absolute;
    left: 0;
    height: 2px;
    background: #00ffff;
}
.gonye-tick.small { width: 10px; }
.gonye-tick.medium { width: 15px; }
.gonye-tick.large { width: 25px; }

.gonye-label {
    position: absolute;
    left: 28px;
    font-size: 14px;
    font-weight: bold;
    color: #00ffff; 
    transform: translateY(-50%);
}

/* 5. Madde: Köşe Etiketleri */
.gonye-corner-label {
    position: absolute;
    color: #f0f;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 5px #000;
}
#gonye-label-a { top: 5px; left: 5px; }
#gonye-label-b { bottom: 5px; left: 5px; }
#gonye-label-c { bottom: 5px; right: 5px; }

/* 7. Madde: Döndürme Butonu */
.gonye-rotate-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(0, 255, 0, 0.8); /* Yeşil */
    border: 2px solid #0f0;
    border-radius: 50%;
    cursor: crosshair;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    
    /* DÜZELTME: Konum: Hipotenüsün ortası (DIŞARIDA) */
    top: 50%;
    left: 50%;
    
    /* Butonu (20px/2 = 10px) merkezler VE 
       hipotenüsten 15px DIŞARI (top-right) iter */
    transform: translate(5px, -25px); 
}


/* 8. Madde: Çizim Tutamacı */
.gonye-draw-handle {
    position: absolute;
    left: -10px; /* 10px Dışarıda (solda) */
    top: 0; /* JS ile pozisyonu değişecek */
    width: 8px; 
    height: 20px; /* Tutma alanı */
    background: rgba(255, 0, 0, 0.8); /* Kırmızı */
    border: 1px solid #ffaaaa;
    border-radius: 2px;
    cursor: n-resize; /* Dikey hareket */
    z-index: 1002;
    transition: top 0.05s ease-out; /* 0'a dönüş animasyonu */
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.gonye-draw-handle::before {
    content: '✎';
    color: #fff;
    font-size: 10px;
    line-height: 8px;
}
.gonye-draw-label {
    position: absolute;
    left: -60px; /* Etiket solda */
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #000;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    display: none; /* Sadece sürüklerken JS ile gösterilecek */
}
.gonye-rotate-handle::before {
    content: '↺';
    color: #0f0;
    text-shadow: 0 0 5px #000;
    font-size: 14px;
    font-weight: bold;
}

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

/* Yeniden Boyutlandırma Tutamacı */
.gonye-resize-handle {
    position: absolute;
    /* Sağ alt köşeye yerleştir (90 derece köşesi) */
    bottom: 5px;
    right: 5px;
    
    width: 24px;
    height: 24px;
    
    background: rgba(255, 0, 255, 0.8); /* Pembe */
    border: 2px solid #f0f;
    border-radius: 50%;
    
    cursor: nwse-resize; /* Çapraz ok imleci */
    z-index: 1002;
    
    /* İçine simge koymak için */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gonye-resize-handle::before {
    content: '↔';
    color: #f0f;
    text-shadow: 0 0 5px #000;
    font-size: 14px;
    font-weight: bold;
    transform: rotate(-45deg); /* Simgeyi çapraz yap */
}