/* style.css - FINAL SÜRÜM (Lüks Tema & 80x45mm Etiket) */

:root {
    --bg-dark: #050505;
    --gold-gradient: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    --gold-solid: #D4AF37;
    --text-white: #FFFFFF;
    --text-muted: #888888;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0; padding: 0;
    background-color: var(--bg-dark); color: var(--text-white);
    background-image: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
    min-height: 100vh;
}

/* NAVBAR */
.navbar {
    background: transparent; padding: 20px; display: flex;
    justify-content: space-between; align-items: center;
    position: absolute; top: 0; width: 90%; z-index: 10;
}
.brand { display: none; }
.nav-btn {
    background: transparent; border: 1px solid #333; color: #666;
    padding: 5px 15px; border-radius: 20px; font-size: 12px;
    cursor: pointer; transition: 0.3s;
}
.nav-btn:hover { border-color: var(--gold-solid); color: var(--gold-solid); }

/* SAYFALAR */
.page-container {
    display: none; max-width: 600px; margin: 0 auto;
    padding: 80px 20px 20px 20px; text-align: center; animation: fadeIn 1s ease-out;
}
.active-page { display: block; }
@keyframes fadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }

/* LOGO & GİRİŞ */
.hero-logo-area { margin-bottom: 40px; }
.monogram-icon { font-size: 24px; color: var(--gold-solid); margin-bottom: 5px; }
.monogram-text {
    font-family: 'Playfair Display', serif; font-size: 50px; font-weight: bold; line-height: 1;
    background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}
.hero-title { font-family: 'Playfair Display', serif; font-size: 28px; letter-spacing: 2px; color: var(--gold-solid); margin: 0; text-transform: uppercase; }
.hero-subtitle { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--text-white); margin-top: 5px; font-weight: 300; letter-spacing: 1px; }
.divider-diamond {
    color: var(--gold-solid); font-size: 10px; margin-top: 15px; position: relative; display: inline-block;
}
.divider-diamond::before, .divider-diamond::after {
    content: ""; position: absolute; top: 50%; width: 50px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-solid));
}
.divider-diamond::before { right: 15px; }
.divider-diamond::after { left: 15px; background: linear-gradient(90deg, var(--gold-solid), transparent); }

/* ARAMA KARTI */
.search-card-luxury {
    border: 1px solid var(--gold-solid); padding: 30px 20px; border-radius: 15px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.1); background: rgba(255, 255, 255, 0.02);
    margin-bottom: 40px; position: relative;
}
.input-wrapper input {
    width: 100%; background: transparent; border: 1px solid #444; padding: 15px;
    color: white; text-align: center; font-size: 14px; border-radius: 8px;
    box-sizing: border-box; font-family: 'Open Sans', sans-serif; margin-bottom: 20px; transition: 0.3s;
}
.input-wrapper input:focus { outline: none; border-color: var(--gold-solid); box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
.btn-luxury {
    width: 100%; padding: 15px; border: none; border-radius: 8px;
    background: var(--gold-gradient); color: #000; font-weight: bold;
    font-size: 16px; letter-spacing: 1px; cursor: pointer; transition: transform 0.2s;
}
.btn-luxury:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4); }

/* ROZETLER & SONUÇ */
.trust-badges-luxury { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.badge-item i { font-size: 20px; color: var(--text-white); border: 1px solid var(--text-muted); padding: 10px; border-radius: 50%; transition: 0.3s; }
.badge-item span { font-size: 10px; color: var(--text-muted); line-height: 1.4; text-transform: uppercase; }
.badge-item:hover i { border-color: var(--gold-solid); color: var(--gold-solid); }

.result-card-luxury {
    background: #111; border: 1px solid #333; padding: 20px;
    border-radius: 10px; margin-top: 30px; text-align: left; border-top: 3px solid var(--gold-solid);
}
.result-details { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; border-top: 1px solid #222; padding-top: 20px; }
.result-details small { color: #666; font-size: 10px; text-transform: uppercase; letter-spacing: 1px;}
.verification-badge { margin-top: 20px; padding: 15px; background: rgba(46, 125, 50, 0.1); border: 1px solid #2E7D32; color: #2E7D32; text-align: center; font-weight: bold; border-radius: 5px; }

/* ADMİN & TABLO */
#admin-dashboard, #login-page { max-width: 1200px; }
.input-group { margin-bottom: 15px; }
.input-group label { display: block; margin-bottom: 5px; color: #aaa; font-size: 12px; }
.input-group input, .input-group select { width: 100%; padding: 12px; background: #222; border: 1px solid #444; color: white; border-radius: 5px; box-sizing: border-box;}

/* Tablo Stili */
.table-responsive {
    background-color: #0a0a0a; border: 1px solid #333; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow-x: auto; margin-top: 20px;
}
table { width: 100%; border-collapse: collapse; min-width: 800px; }
thead tr { background: linear-gradient(to bottom, #222, #111); border-bottom: 2px solid var(--gold-solid); }
th {
    color: var(--gold-solid); font-family: 'Playfair Display', serif; font-weight: normal;
    letter-spacing: 1px; padding: 15px; text-align: left; text-transform: uppercase; font-size: 12px; white-space: nowrap;
}
tbody tr { transition: background-color 0.3s ease; border-bottom: 1px solid #222; }
td { padding: 12px 15px; color: #e0e0e0; font-size: 13px; vertical-align: middle; white-space: nowrap; }
tbody tr:hover { background-color: rgba(212, 175, 55, 0.08); }
td small { color: #666; font-family: monospace; font-size: 11px; }
td button { padding: 5px; transition: all 0.2s ease; }
td button:hover { transform: scale(1.2); }

/* MODAL (Pencere) */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 10000; justify-content: center; align-items: center; backdrop-filter: blur(5px);
}
.modal-content {
    background: #111; border: 1px solid var(--gold-solid); padding: 20px; border-radius: 10px;
    max-width: 90%; max-height: 90%; overflow-y: auto; position: relative; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}
.modal-images-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.modal-images-container img { max-width: 300px; max-height: 300px; border-radius: 5px; border: 1px solid #333; }
.close-modal { position: absolute; top: 10px; right: 15px; color: #fff; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-modal:hover { color: var(--gold-solid); }

/* --- ETİKET YAZICI (80x45mm - YENİ BOYUT) --- */
#label-preview { display: none; }

@media print {
    body * { visibility: hidden; }
    html, body { height: 100%; overflow: hidden; margin: 0 !important; padding: 0 !important; background: white !important; }
    #label-preview, #label-preview * { visibility: visible; }
    
    #label-preview {
        position: fixed; left: 0; top: 0;
        width: 80mm; height: 45mm; /* Yeni Boyut */
        background: white; color: black;
        display: flex !important; flex-direction: column;
        padding: 2mm; /* Kenar boşlukları */
        box-sizing: border-box;
        font-family: 'Open Sans', sans-serif;
        overflow: hidden; z-index: 9999;
    }

    /* ÜST KISIM */
    .label-top-row {
        display: flex; width: 100%; height: 32mm;
        border-bottom: 0.3mm solid #000;
        margin-bottom: 1mm;
    }

    /* SOL KOLON */
    .label-info-col {
        width: 60%;
        display: flex; flex-direction: column; justify-content: center;
        font-size: 8pt; 
        line-height: 1.3;
    }

    /* Sansürlü İsim */
    .label-customer-name {
        font-weight: 800;
        font-size: 10pt;
        margin-bottom: 2mm;
        text-transform: uppercase;
        border-bottom: 1px dashed #666;
        padding-bottom: 1mm;
        width: 90%;
    }

    .info-line { white-space: nowrap; }
    .lbl-title { font-weight: normal; color: #333; font-size: 7.5pt; }
    .lbl-val { font-weight: bold; color: #000; margin-left: 2mm; font-size: 8.5pt; }

    /* SAĞ KOLON (QR) */
    .label-qr-col {
        width: 40%;
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        padding-top: 1mm;
    }

    .label-brand-text {
        font-family: 'Playfair Display', serif;
        font-size: 11pt; font-weight: bold; margin-bottom: 1mm; white-space: nowrap;
    }

    #qr-code-area {
        width: 20mm; height: 20mm;
        display: flex; justify-content: center; align-items: center;
    }
    #qr-code-area img { width: 20mm !important; height: 20mm !important; display: block; }

    #label-id-text {
        font-size: 7pt; font-weight: bold; margin-top: 1mm; letter-spacing: 0.5px;
    }

    /* ALT KISIM (Yazı) */
    .label-disclaimer {
        width: 100%;
        font-size: 4.5pt;
        line-height: 1.2;
        text-align: justify;
        color: #000;
        padding-top: 1mm;
    }

    @page { size: 80mm 45mm; margin: 0; }
}