/* ===============================================
   🔹 Transform Frame Styles (Tam İzole)
   =============================================== */
#transform-frame {
    position: absolute;
    border: 1.5px dashed #1e90ff;
    display: block !important; /* 🟢 Başta açık */
    z-index: 9999;
    pointer-events: none;
}

    /* Ortak handle stili */
    #transform-frame .tf-handle {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #fff;
        pointer-events: auto;
    }

    /* 🔹 Köşe handle'ları (rotate) */
    #transform-frame .tf-corner {
        background: #ffa500; /* turuncu */
    }

    /* 🔹 Kenar handle'ları (scale) */
    #transform-frame .tf-side {
        background: #1e90ff; /* mavi */
    }

    /* 🔸 Köşe konumları */
    #transform-frame .tf-corner-tl {
        top: -6px;
        left: -6px;
        cursor: grab;
    }

    #transform-frame .tf-corner-tr {
        top: -6px;
        right: -6px;
        cursor: grab;
    }

    #transform-frame .tf-corner-bl {
        bottom: -6px;
        left: -6px;
        cursor: grab;
    }

    #transform-frame .tf-corner-br {
        bottom: -6px;
        right: -6px;
        cursor: grab;
    }

    /* 🔸 Kenar konumları */
    #transform-frame .tf-side-top {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        cursor: ns-resize;
    }

    #transform-frame .tf-side-bottom {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        cursor: ns-resize;
    }

    #transform-frame .tf-side-left {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: ew-resize;
    }

    #transform-frame .tf-side-right {
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: ew-resize;
    }

#btnPreview{

    display:none !important;
}

/* Sidebar varsayılan sabit genişlik (md ve üstü) */
.sidebar {
    width: 250px;
    background-color: #343a40;
    color: #fff;
    flex-shrink: 0;
}

    /* Offcanvas genişliği (md altı) */
    .sidebar.offcanvas-start {
        --bs-offcanvas-width: 260px;
    }

    /* Linkler */
    .sidebar a {
        color: #ddd;
        text-decoration: none;
        display: block;
        padding: 12px 20px;
    }

        .sidebar a:hover {
            background-color: #495057;
            color: #fff;
        }

        .sidebar a.active {
            background-color: #0d6efd;
            color: #fff;
            border-left: 4px solid #0a58ca;
            padding-left: 16px;
        }



/* Küçük ekran düzeni */
@media (max-width: 767.98px) {
    body {
        flex-direction: column;
    }

    .content {
        padding: 12px;
    }

    .navbar {
        border-bottom: 1px solid #dee2e6;
        padding-left: 8px;
        padding-right: 8px;
    }

    .card {
        border-radius: 12px;
    }

    .form-label {
        font-size: .95rem;
    }

    .form-control, .form-select {
        font-size: .95rem;
    }

    /* Uzun inputların taşmasını engelle */
    .card .card-body {
        padding: 14px;
    }

    #imageEditorModal .modal-dialog {
        max-width: 100% !important;
    }
}

/* iPhone SE gibi dar ekranlarda yan boşlukları kıs */
@media (max-width: 375px) {
    .content .container-fluid {
        padding-left: 6px;
        padding-right: 6px;
    }
}

#imgPreviewModal #transform-frame{
    display:none !important;
}