/* --- GENEL SAYFA VE KAPSAYICI --- */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    font-family: 'Arial', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    box-sizing: border-box;
}

/* Ana Kapsayıcı */
.oyun-kapsayici {
    width: 100%;
    max-width: 600px; /* Mobilde aşırı yayılmayı önler */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* --- 1. CANVAS (TUVAL ALANI) --- */
.tuval-alani {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

#myCanvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    touch-action: manipulation; /* Zoomlama ve dokunmayı rahat bırakır */
}

/* --- 2. RENK PALETİ ALANI --- */
.palet-alani {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.renkcerceve {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    width: 100%;
    border-radius: 12px;
    background-color: #d7ecc3;
    padding: 6px;
    box-sizing: border-box;
}

/* RENK KUTUCUKLARI (Net Sabit Ölçü - Chrome'u Yormayan Tarz) */
.renkcerceve > div {
    width: 33px !important;  /* Mobil ekranda tam 10 tane yan yana sığar */
    height: 33px !important;
    border-radius: 6px;
    border: 2px solid #777;
    cursor: pointer;
    box-sizing: border-box;
}

.renkcerceve > div:active {
    transform: scale(0.9);
}

/* Renk Kodları */
.rk01 { background-color: #b5e61d; }
.rk02 { background-color: #ffc90e; }
.rk03 { background-color: #ff0e0e; }
.rk04 { background-color: #ffaec9; }
.rk05 { background-color: #22b14c; }
.rk06 { background-color: #b97a57; }
.rk07 { background-color: #000000; }
.rk08 { background-color: #3f48cc; }
.rk09 { background-color: #a349a4; }
.rk10 { background-color: #70a2be; }
.rk11 { background-color: #2baa81; }
.rk12 { background-color: #38d8d8; }
.rk13 { background-color: #88fc07; }
.rk14 { background-color: #fc69c5; }
.rk15 { background-color: #397af2; }
.rk16 { background-color: #ff7f27; }
.rk17 { background-color: #b4001b; }
.rk18 { background-color: #c3c3c3; }
.rk19 { background-color: #880015; }
.rk20 { background-color: #000080; }

.rk21 { background-color: #6b8f01; }
.rk22 { background-color: #ffd43b; }
.rk23 { background-color: #e76363; }
.rk24 { background-color: #790028; }
.rk25 { background-color: #00972d; }
.rk26 { background-color: #ffa676; }
.rk27 { background-color: #918d8d; }
.rk28 { background-color: #00076e; }
.rk29 { background-color: #fb6dfd; }
.rk30 { background-color: #354f5e; }
.rk31 { background-color: #05724f; }
.rk32 { background-color: #43ffff; }
.rk33 { background-color: #c2fc80; }
.rk34 { background-color: #ff32b4; }
.rk35 { background-color: #0a3e9e; }
.rk36 { background-color: #f7985a; }
.rk37 { background-color: #b10000; }
.rk38 { background-color: #f58d04; }
.rk39 { background-color: #42000a; }
.rk40 { background-color: #7070f5; }

.rk41 { background-color: #000818; }
.rk42 { background-color: #ffcba8; }
.rk43 { background-color: #974141; }
.rk44 { background-color: #997648; }
.rk45 { background-color: #ffffff; }

/* Seçilen Renk Göstergesi */
.secilen-renk-kutusu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.secilen-renk-kutusu h2 {
    width: 200px;
    height: 36px;
    font-size: 20px;
    color: #f8e807;
    border: 3px solid #222;
    background: #fc0404;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border-radius: 6px;
}

.seckutu {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 3px solid #222;
    background-color: #ffffff;
}

/* --- 3. BUTONLAR ALANI --- */
.buton-alani {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: #f88383;
    border-radius: 12px;
    padding: 6px;
    box-sizing: border-box;
}

.buton-alani section {
    cursor: pointer;
}

.buton-alani img {
    height: 36px;
    width: auto;
    display: block;
    border-radius: 6px;
}

/* ==========================================================================
   HEM BİLGİSAYAR HEM MOBİL İÇİN KESİNTİSİZ TEK SAYFA YAZDIRMA (PRINT)
   ========================================================================== */
@page {
    size: A4 portrait; /* Standart A4 dikey kağıt formatı */
    margin: 0mm;       /* Tarayıcının üst/alt başlıklarını ve boşluklarını siler */
}

@media print {
    /* 1. Tüm sayfa yapısını sıfırla ve taşmaları engelle */
    html, body {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: hidden !important;
    }

    /* 2. Ekrandaki her şeyi tamamen gizle */
    body * {
        visibility: hidden !important;
    }

    /* 3. Sadece tuval alanını ve canvas resmini görünür kıl */
    .tuval-alani, 
    .tuval-alani *, 
    #myCanvas {
        visibility: visible !important;
    }

    /* 4. Resmi sayfanın ortasına büyükçe yerleştir */
    .tuval-alani {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 10px !important; /* Dış boşluğu azalttık, resme alan açtık */
        box-sizing: border-box !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }

    #myCanvas {
        max-width: 280% !important;  /* Genişlik limitini %90'dan %98'e çıkardık */
        max-height: 240vh !important; /* Yükseklik limitini %85'ten %94'e çıkardık */
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

.renk-kutusu {
    width: clamp(28px, 4vw, 33px) !important;
    height: clamp(28px, 4vw, 33px) !important;
}