/*
 * Body Background — Ham Beton Zemin (Tileable Pattern)
 * Küçük 512×512 beton tile'ı yanyana döşenerek zemin oluşturuluyor.
 * Büyük tek resim yerine pattern: daha hızlı yükleme, sonsuz çözünürlük.
 */

body {
    background-color: #c0c0c0;
    overflow-x: hidden;
}

/* 
 * Donanım Hızlandırmalı Zemin Katmanı (GPU Accelerated Background)
 * background-attachment: fixed yerine position: fixed ve translate3d(0,0,0) kullanarak
 * tarayıcının sayfayı 60fps/120fps hızında, hiç kasmadan ve titremeden kaydırmasını sağlar.
 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9999;
    background-image: url('../../../images/bckg/concrete-tile.png');
    background-size: 320px 320px;
    background-position: top left;
    background-repeat: repeat;
    pointer-events: none;
    transform: translate3d(0, 0, 0); /* GPU tetikler */
    will-change: transform;
}

/* Derginin etrafına z-index — açıldığında objelerin üstünde kalsın */
.rm-container {
    z-index: 100;
}

/* WORKSPACE PROPS */
.workspace-props {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; /* Derginin (.rm-container) arkasında, arkaplanın önünde */
}

.workspace-props > div {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* Orijinal gerçekçi gölge */
    filter: drop-shadow(15px 25px 20px rgba(0,0,0,0.65));
    transition: all 0.5s ease-out;
    will-change: transform; /* Sadece bu kural nesneleri GPU katmanına taşıyarak kasmayı önler */
}

/* Green Leather Notebook */
.prop-notebook {
    background-image: url('../../../images/bckg/notebook.png');
    width: 320px;
    height: 320px;
    top: 5%;
    right: 5%;
    transform: rotate(8deg);
    filter: drop-shadow(8px 12px 15px rgba(0,0,0,0.6));
    z-index: 1; /* Altta dursun */
}

/* Fuji X-H2 Camera */
.prop-camera {
    background-image: url('../../../images/bckg/camera.png');
    width: 380px;
    height: 380px;
    top: 5%;
    left: 2%;
    transform: rotate(-10deg);
    z-index: 2;
}

/* Green Caliper */
.prop-caliper {
    background-image: url('../../../images/bckg/caliper.png');
    width: 550px;
    height: 550px;
    bottom: 5%;
    left: 0%;
    transform: rotate(20deg);
    z-index: 2;
}

/* Pencil */
.prop-pencil {
    background-image: url('../../../images/bckg/pencil.png');
    width: 350px;
    height: 350px;
    top: 30%;
    right: 8%;
    transform: translateY(-50%) rotate(-12deg);
    z-index: 3;
}

/* Cigar & Ashtray */
.prop-cigar {
    background-image: url('../../../images/bckg/cigar.png');
    width: 380px;
    height: 380px;
    bottom: 3%;
    right: 12%;
    transform: rotate(-5deg);
    z-index: 2;
}

/* Cigar Cutter */
.prop-cutter {
    background-image: url('../../../images/bckg/cutter.png');
    width: 200px;
    height: 200px;
    bottom: 15%;
    right: 6%;
    transform: rotate(-35deg);
    z-index: 2;
}

/* RESPONSIVE AYARLAR */
@media screen and (max-width: 1600px) {
    .prop-notebook { width: 280px; height: 280px; right: 2%; }
    .prop-cigar { right: 8%; width: 300px; height: 300px; }
    .prop-cutter { right: 2%; width: 160px; height: 160px; }
    .prop-caliper { width: 450px; height: 450px; bottom: 5%; left: -2%; }
    .prop-camera { width: 320px; height: 320px; }
}

@media screen and (max-width: 1100px) {
    /* Masa daha dar, objeleri derginin arkasına veya köşelere itelim */
    .prop-camera { left: 10px; top: 5%; width: 240px; height: 240px; }
    .prop-caliper { left: 10px; width: 350px; height: 350px; }
    .prop-pencil { right: 120px; top: 48%; width: 220px; height: 220px; opacity: 0.8; } /* Kalem çakışmasın diye sola kaydırıldı */
    .prop-notebook { right: 20px; top: 5%; width: 220px; height: 220px; }
    .prop-cigar { right: 140px; bottom: 3%; width: 240px; height: 240px; } /* Işık ölçer sola kaydırılarak pusuladan ayrıldı */
    .prop-cutter { right: 20px; bottom: 10%; width: 160px; height: 160px; opacity: 0.9; } /* Pusula sağ köşede tek başına */
}

@media screen and (max-width: 900px) {
    /* Kalem ve pusula ASLA yok olmamalı, dar ekranda sadece boyutları küçülüp yerleri korunmalı */
    .prop-camera { left: 5px; top: 5%; width: 180px; height: 180px; }
    .prop-caliper { left: 5px; width: 260px; height: 260px; }
    
    .prop-notebook { right: 10px; top: 5%; width: 180px; height: 180px; opacity: 0.9; }
    .prop-pencil { right: 90px; top: 48%; width: 180px; height: 180px; opacity: 0.9; display: block !important; }
    .prop-cigar { right: 100px; bottom: 3%; width: 200px; height: 200px; opacity: 0.9; } /* Işık ölçer sola kaydırıldı */
    .prop-cutter { right: 15px; bottom: 8%; width: 130px; height: 130px; opacity: 0.95; display: block !important; } /* Pusula sağ köşede tek başına */
}

@media screen and (max-width: 768px) {
    /* Mobilde temizlik: Çok karışıklık olmaması için gizle veya opaklığı azalt */
    .prop-camera { left: 5px; top: 2%; width: 180px; height: 180px; opacity: 0.3; }
    .prop-notebook { right: 5px; top: 5%; width: 180px; height: 180px; opacity: 0.3; } /* Pantone mobilde de soluk kalsın */
    .prop-caliper { left: 5px; bottom: 2%; width: 280px; height: 280px; opacity: 0.3; } /* Kumpas mobilde de soluk kalsın */
    .prop-pencil { right: 5px; top: 55%; width: 180px; height: 180px; opacity: 0.3; } /* Kalem mobilde de soluk kalsın */
    .prop-cigar { right: 5px; bottom: 25%; width: 200px; height: 200px; opacity: 0.3; }
    .prop-cutter { right: 5px; bottom: 5%; width: 120px; height: 120px; opacity: 0.5; } /* Pusula mobilde de soluk kalsın */
}

/* Sayfa scroll çubuğu — açık beton tema */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #d0d0d0; }
::-webkit-scrollbar-thumb { background: #999; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #777; }


/* =====================================================
   MOBİL SCROLL PERFORMANSI — KÖK NEDEN DÜZELTMESİ
   background-attachment: fixed mobilde scroll lag yapar.
   ===================================================== */
@media screen and (max-width: 767px) {
    body {
        background-attachment: scroll !important;
    }
}