/* ===== 1. GENEL RESET VE MASAÜSTÜ (WEB) DÜZENİ ===== */
.uh-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.product-row {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative; /* Mobilde X butonu buna göre konumlanacak */
}

/* Üst Kısım: Resim - Select - Silme Butonu */
.uh-flex-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.uh-col-img img {
    width: 80px;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.uh-col-select {
    flex: 1;
    min-width: 0;
}

/* Select Kutusu - Masaüstü */
.product-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fff;
    color: #333;
    height: 45px; /* Yükseklik sabitleme */
}

/* Kırmızı Silme Butonu - Masaüstü */
.uh-col-remove button {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.uh-col-remove button:hover {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
}

/* --- BEDEN TABLOSU --- */
.uh-size-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.size-label-title {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

.uh-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; 
}

.size-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    min-width: 55px; 
    flex-grow: 1; 
    max-width: 100px;
}

.size-name {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.uh-size-input {
    width: 100%;
    padding: 8px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    height: 38px;
}

/* Baskı Seçenekleri */
.uh-flex-row-options {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.print-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.print-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
}

/* Dosya Önizleme */
.uh-preview-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.preview-item { position: relative; width: 80px; height: 80px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.preview-img { width: 100%; height: 100%; object-fit: cover; }
.preview-file-icon { text-align: center; color: #555; line-height: 1.2; font-size:12px;}
.remove-file { position: absolute; top: 2px; right: 2px; background: rgba(220, 53, 69, 0.9); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }


/* ==============================================
   2. MOBİL DÜZEN (CRITICAL FIX - BURASI ÖNEMLİ)
============================================== */
@media screen and (max-width: 768px) {
    
    .product-row {
        display: block !important; /* Flex'i iptal et, blok yap */
        position: relative !important;
        padding: 15px !important;
        padding-top: 50px !important; /* X butonu için üstte boşluk bırak */
    }

    /* 1. Resim Ortada */
    .uh-col-img {
        text-align: center;
        margin-bottom: 15px;
        display: block !important;
    }
    .uh-col-img img {
        width: 100px !important;
        height: auto !important;
    }

    /* 2. Select Kutusu Fix (Yazı Kesilmemesi İçin) */
    .uh-col-select {
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    .product-select {
        width: 100% !important;
        height: 50px !important;       /* Yüksekliği kesin olarak ver */
        line-height: 50px !important;  /* Yazıyı dikey ortala */
        padding: 0 40px 0 15px !important; /* Sağda ok için boşluk, solda yazı için */
        font-size: 14px !important;
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        box-sizing: border-box !important;
        
        /* Tarayıcı ve Tema stillerini sıfırla */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        
        /* Temiz ok işareti ekle */
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 15px center !important;
        background-size: 12px !important;
    }

    /* 3. X Butonunu Sağ Üst Köşeye Çivile */
    .uh-col-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: auto !important;
        height: auto !important;
        z-index: 100 !important;
        display: block !important;
    }
    
    .uh-col-remove button {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        color: #d32f2f !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    /* Beden Tablosu */
    .uh-size-grid {
        justify-content: space-between;
    }
    .size-box {
        width: 22% !important;
        margin-bottom: 10px;
    }
    
    /* Checkboxlar */
    .print-options {
        flex-direction: column;
        gap: 12px;
    }
    .print-options label {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
    }
}