/*
    =================================================
    12. ÇİZİM ALANI (VIEWPORT)
    =================================================
*/

.cizimBolumu {
    flex: 1;

    min-width: 0;
    min-height: 0;

    position: relative;
    z-index: 1;

    overflow: hidden;

    background:
        var(--renk-zemin);
}


#cizimAlani,
.cizimAlani {
    width: 100%;
    height: 100%;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fbfcfe,
            #e8edf4
        );

    /*
        Görünüm alanı panellerin arasına
        gömülmüş gibi durur.
    */
    box-shadow:
        inset 0 0 0 1px
        rgba(15, 23, 42, 0.06);
}


#cizimAlani canvas,
.cizimAlani canvas,
.threeCanvas {
    display: block;

    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    z-index: 1;
}


/*
    Üç boyutlu alanda fare imleci taşıma
    imlecine döner.
*/
.threeCanvas {
    cursor: crosshair;
}


/*
    -------------------------------------------------
    ÇALIŞMA MODU SEKMELERİ

    Görünüm alanının sol üstünde duran
    bölümlü düğme (segmented control).
    -------------------------------------------------
*/

.calismaModSekmeleri {
    position: absolute;

    top: 8px;
    left: 8px;

    z-index: 6;

    display: flex;
    align-items: center;

    padding: 0;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    overflow: hidden;

    background:
        var(--renk-alan);

    box-shadow:
        var(--golge-yuzen);
}


.calismaModSekmesi {
    min-width: 96px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        12px;

    border: 0;

    border-right:
        1px solid
        var(--renk-kenarlik-acik);

    border-radius: 0;

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);

    font-weight: 600;

    letter-spacing: 0.03em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.1s linear,
        color 0.1s linear;
}


.calismaModSekmesi:last-child {
    border-right: 0;
}


.calismaModSekmesi:hover:not(:disabled):not(.aktif) {
    background:
        var(--renk-ana-acik);

    color:
        var(--renk-yazi);
}


.calismaModSekmesi.aktif {
    background:
        var(--renk-ana);

    color: #ffffff;
}


.calismaModSekmesi:disabled {
    cursor: not-allowed;

    opacity: 0.4;
}


/*
    -------------------------------------------------
    GÖRÜNÜM HUD'U

    Görünüm alanının sağ üstünde duran
    kamera açısı düğmeleri.
    -------------------------------------------------
*/

.gorunumHud {
    position: absolute;

    top: 8px;
    right: 8px;

    z-index: 6;

    display: flex;
    align-items: center;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-kucuk);

    overflow: hidden;

    background:
        var(--renk-alan);

    box-shadow:
        var(--golge-yuzen);
}


.gorunumHudBtn {
    min-width: 34px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        9px;

    border: 0;

    border-right:
        1px solid
        var(--renk-kenarlik-acik);

    background: transparent;

    color:
        var(--renk-yazi-ikincil);

    font-size:
        var(--yazi-mini);

    font-weight: 600;

    letter-spacing: 0.03em;

    cursor: pointer;

    transition:
        background 0.1s linear,
        color 0.1s linear;
}


.gorunumHudBtn:last-child {
    border-right: 0;
}


.gorunumHudBtn:hover {
    background:
        var(--renk-ana-acik);

    color:
        var(--renk-ana-hover);
}


.gorunumHudBtn:active {
    background:
        var(--renk-ana);

    color: #ffffff;
}


/*
    Sığdır butonu diğerlerinden ayrılır.
*/
.gorunumHudBtn[data-gorunum="sigdir"] {
    border-left:
        1px solid
        var(--renk-kenarlik);

    color:
        var(--renk-ana);
}


/*
    -------------------------------------------------
    BOŞ DURUM BİLGİSİ
    -------------------------------------------------
*/

.cizimAlaniBosDurum {
    width:
        min(
            320px,
            calc(100% - 32px)
        );

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 2;

    transform:
        translate(
            -50%,
            -50%
        );

    padding: 18px;

    border:
        1px solid
        var(--renk-kenarlik);

    border-radius:
        var(--radius-orta);

    background:
        rgba(255, 255, 255, 0.9);

    color:
        var(--renk-yazi-ikincil);

    text-align: center;

    pointer-events: none;
}


.cizimAlaniBosDurum h3 {
    margin:
        0
        0
        6px;

    color:
        var(--renk-yazi);

    font-size: 13px;
    font-weight: 700;
}


.cizimAlaniBosDurum p {
    margin: 0;

    font-size:
        var(--yazi-kucuk);

    line-height: 1.5;
}


#cizimAlani:has(canvas)
.cizimAlaniBosDurum,
.cizimAlani:has(canvas)
.cizimAlaniBosDurum {
    display: none;
}


/*
    Eski mod bilgisi rozeti.

    Artık durum çubuğu bu bilgiyi
    gösterdiği için gizlenir.
*/
.calismaModBilgisi {
    display: none;
}