/* Modern Inter font ailesini kullan (Tailwind bunu zaten yapar ama garanti olsun) */
body {
    font-family: 'Inter', sans-serif;
}

/* Tüm tablolardaki hücreler için dolguyu ayarla */
.data-table th, .data-table td {
    padding: 8px 12px;
    white-space: nowrap; /* Satırların kaymasını engelle */
    vertical-align: middle; /* Veriyi dikeyde ortala */
}
/* Tablo içindeki seçim kutularının boyutunu ayarla */
.data-table select, .data-table input {
    font-size: 0.875rem; /* 14px */
    padding: 4px 8px;
}

/* Modal (Pop-up) Arka Planı */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 50; /* Tailwind'in en üst z-index'i */
}

/* Müşteri Listesi Tablosu (Modal içinde kaydırma) */
.customer-table {
    height: 30rem; /* 480px - Modal içinde sabit yükseklik */
}

/* Admin Panel - Sipariş Detay Modalı - Resim Galerisi */
#imagePreviewContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

/* Admin Panel - Sipariş Detay Modalı - Resim Önizleme */
.preview-image-container {
    position: relative;
}
.preview-image-container .delete-preview-btn {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: rgba(239, 68, 68, 0.8); /* bg-red-500 */
    color: white;
    border-radius: 9999px;
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.7);
    transition: all 0.2s ease;
}
.preview-image-container .delete-preview-btn:hover {
    background-color: rgba(220, 38, 38, 1); /* bg-red-600 */
    transform: scale(1.1);
}

/* Admin Panel - Yeni Sipariş Uyarısı (Sarı yanıp sönme) */
@keyframes pulse-yellow {
    0%, 100% {
        opacity: 1;
        background-color: #fef9c3; /* bg-yellow-100 */
    }
    50% {
        opacity: 0.8;
        background-color: #fde68a; /* bg-yellow-200 */
    }
}
#newOrderAlert {
    animation: pulse-yellow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Başarı Modalı (Tik işareti animasyonu) */
.success-checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #4ade80; /* yeşil (green-400) */
    stroke-miterlimit: 10;
    margin: 20px auto;
    box-shadow: inset 0px
}
.success-checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: #4ade80;
    fill: none;
    animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.success-checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
}
@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}
@keyframes scale {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill {
    100% { box-shadow: inset 0px 0px 0px 40px #4ade80; }
}


/* === 3D KUTU STİLLERİ (DÜZELTİLDİ) === */
.scene-wrapper {
    perspective: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    /* DÜZELTME: 3D'yi buraya da ekleyelim */
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d;
}
.scene-wrapper.grabbing {
    cursor: grabbing;
}
.scene {
    width: 200px; 
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.5s;
    /* translateZ JavaScript tarafından ekleniyor */
}

.face {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--width, 100px);
    height: var(--height, 100px);
    background-color: rgba(6, 78, 110, 0.7); /* Koyu mavi, yarı şeffaf */
    border: 1px solid #cffafe; /* Açık mavi */
    color: white;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    box-sizing: border-box; /* Önemli */
    overflow: hidden;
    /* DÜZELTME: Yüzeylerin arkasının görünmemesini sağla */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Ölçü etiketleri */
.face span {
    display: block;
    margin-top: 2px;
    background: rgba(0,0,0,0.3);
    padding: 1px 3px;
    border-radius: 3px;
}

/* Yüzeylerin pozisyonları - MERKEZDEN AYARLI (Düzeltildi) */
.front {
    transform: translateX(-50%) translateY(-50%) translateZ(calc(var(--depth) / 2));
}
.back {
    transform: translateX(-50%) translateY(-50%) rotateY(180deg) translateZ(calc(var(--depth) / 2));
}

.right {
    width: var(--depth); /* Genişlik, derinlik kadar olmalı */
    transform: translateX(-50%) translateY(-50%) rotateY(90deg) translateZ(calc(var(--width) / 2));
}
.left {
    width: var(--depth); /* Genişlik, derinlik kadar olmalı */
    transform: translateX(-50%) translateY(-50%) rotateY(-90deg) translateZ(calc(var(--width) / 2));
}

.top {
    height: var(--depth); /* Yükseklik, derinlik kadar olmalı */
    transform: translateX(-50%) translateY(-50%) rotateX(90deg) translateZ(calc(var(--height) / 2));
}
.bottom {
    height: var(--depth); /* Yükseklik, derinlik kadar olmalı */
    transform: translateX(-50%) translateY(-50%) rotateX(-90deg) translateZ(calc(var(--height) / 2));
}