/* CSS Değişkenleri ve Temel Kurulum */
:root {
    /* Renk Paleti */
    --color-bg: #000000; /* Saf siyah arka plan */
    --color-card: #121212; /* Koyu gri kart */
    --color-text-primary: #ffffff; /* Ana metin (saf beyaz) */
    --color-text-secondary: #a0a0a0; /* İkincil metin (etiketler) */
    --color-border: #2a2a2a; /* Belirgin ama abartısız sınırlar */
    --color-success: #00ff6a; /* Canlı, neon yeşili (Orijinal) */
    --color-danger: #ff4d4d; /* Net, modern kırmızı (Hata) */
    
    /* Tipografi */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Diğer Stiller */
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --border-radius: 12px;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

/* Ana Kart */
.product-card {
    background-color: var(--color-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 390px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

/* Durum Başlığı */
.status-banner {
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px; /* İkon ve metin arası boşluk */
    border-bottom: 1px solid var(--color-border);
}
.status-banner .icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.status-banner.original .icon {
    color: var(--color-success);
}
.status-banner.fake .icon {
    color: var(--color-danger);
}
.status-banner .text {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Ürün Görseli */
.product-image-container img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1/1; /* Kare oran */
    object-fit: cover;
    background-color: #222;
}

/* Ürün Detayları */
.product-details {
    padding: 25px;
    display: grid; /* Izgara yapısı */
    grid-template-columns: 1fr 1fr; /* İki sütunlu yapı */
    gap: 25px; /* Detaylar arası boşluk */
}
.detail-item .label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    display: block;
}
.detail-item .value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    word-wrap: break-word;
}
/* Seri No ve Tarih gibi tam satır kaplaması gerekenler için */
.detail-item.full-width {
    grid-column: 1 / -1;
}

/* Kart Alt Bilgisi */
.card-footer {
    padding: 15px 25px;
    text-align: right;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* Yükleme Animasyonu */
.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-text-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}