/* ============================================
   PORSADIN VII 2026 - ID CARD GENERATOR
   Style.css - FIXED VERSION WITH PROPER POSITIONING
   ============================================ */

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette - Hijau Gold PORSADIN */
    --color-primary: #1a5f2f;
    --color-secondary: #d4af37;
    --color-gold-light: #f4d03f;
    --color-green-light: #2d7a4a;
    --color-bg-light: #f8f9fa;
    --color-bg-dark: #0a1f12;
    --color-text-dark: #1a1a1a;
    --color-text-light: #ffffff;
    --color-border: #c9a961;
    --color-success: #30d158;
    --color-danger: #ff453a;
    
    /* Shadows & Effects */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.2);
    --shadow-gold: 0 4px 20px rgba(212,175,55,0.3);
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #0a1f12 0%, #1a5f2f 100%);
    color: var(--color-text-dark);
    min-height: 100vh;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* === LOADING SCREEN === */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 31, 18, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    color: var(--color-text-light);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === HEADER === */
.header {
    background: rgba(26, 95, 47, 0.95);
    backdrop-filter: blur(10px);
    padding: var(--space-md) 0;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.logo-section {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.event-logo {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-gold-light));
    border-radius: 50%;
    box-shadow: var(--shadow-gold);
}

.event-logo-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.event-info h1 {
    color: var(--color-gold-light);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.event-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.sync-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-lg);
    color: var(--color-text-light);
    font-size: 0.875rem;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--color-danger);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-dot.active {
    background: var(--color-success);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* === MAIN CONTENT === */
.main-content {
    padding: var(--space-xl) 0;
    min-height: calc(100vh - 200px);
}

/* === SEARCH SECTION === */
.search-section {
    margin-bottom: var(--space-xl);
}

.search-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.search-card h2 {
    color: var(--color-primary);
    font-size: 1.75rem;
    margin-bottom: var(--space-xs);
}

.search-subtitle {
    color: #666;
    margin-bottom: var(--space-lg);
}

.search-form {
    margin-bottom: var(--space-lg);
}

.input-group {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

#emailInput {
    flex: 1;
    padding: var(--space-md);
    border: 2px solid #e0e0e0;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

#emailInput:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 95, 47, 0.1);
}

.btn-primary {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-green-light));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.search-hints {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.hint {
    font-size: 0.875rem;
    color: #666;
    padding: var(--space-xs) var(--space-sm);
    background: #f5f5f5;
    border-radius: var(--radius-sm);
}

/* === STATISTICS === */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 2px solid #e0e0e0;
}

.stat-item {
    text-align: center;
    padding: var(--space-md);
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    border-radius: var(--radius-md);
    border: 2px solid #e0e0e0;
}

.stat-item.stat-accepted {
    border-color: var(--color-success);
    background: linear-gradient(135deg, #d4fce3, #ffffff);
}

.stat-item.stat-rejected {
    border-color: var(--color-danger);
    background: linear-gradient(135deg, #ffe5e5, #ffffff);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: 0.875rem;
    color: #666;
}

/* === ID CARD SECTION === */
.idcard-section {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.idcard-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.idcard-container {
    perspective: 1000px;
    margin-bottom: var(--space-xl);
    position: relative;
}

.card-bg-decoration {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(26,95,47,0.2));
    border-radius: var(--radius-xl);
    filter: blur(20px);
    z-index: -1;
}

/* ========================================
   ID CARD - MENGGUNAKAN GAMBAR BACKGROUND
   ======================================== */
.id-card {
    width: 100%;
    max-width: 650px;
    aspect-ratio: 638 / 898;
    margin: 0 auto;
    background: url('ID_CARD.png') no-repeat center center;
    background-size: cover;
    border-radius: 24px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(212, 175, 55, 0.5);
    padding: 0;
    position: relative;
    overflow: hidden;
}

.id-card::before,
.id-card::after {
    display: none;
}

/* =====================================================
   FOTO PESERTA 3X4
   =====================================================
   CARA EDIT:
   - Geser KIRI/KANAN: Ubah nilai "left"
     • Tambah angka = geser KANAN
     • Kurangi angka = geser KIRI
   - Geser ATAS/BAWAH: Ubah nilai "top"
     • Tambah angka = geser BAWAH
     • Kurangi angka = geser ATAS
   - Ubah UKURAN: Ubah "width" dan "height"
     • Rasio 3:4 harus dijaga (contoh: 180x240, 150x200)
   ===================================================== */
.card-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 2;
}

.card-left {
    position: absolute;
    top: 17px;      /* Fine-tuned - foto center vertikal di kotak emas */
    left: 56px;     /* Diperbaiki - foto lebih center horizontal */
}

.photo-frame {
    width: 158px;   /* Diperkecil agar ada ruang di semua sisi */
    height: 198px;  /* Rasio 3:4 dari 150px (150 x 1.25 = 187.5) */
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

#cardPhoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Sembunyikan elemen yang sudah ada di background */
.card-right,
.event-badge,
.badge-content,
.badge-logo-img,
.badge-text,
.badge-title,
.badge-subtitle,
.badge-year,
.peserta-ribbon {
    display: none !important;
}

/* =====================================================
   DATA FIELDS (NAMA, KONTINGEN, BIDANG LOMBA)
   =====================================================
   CARA EDIT POSISI:
   - Geser KIRI/KANAN semua field: Ubah nilai "left" dan "right" di .data-row
   - Geser ATAS/BAWAH per field: Ubah nilai "top" di masing-masing .data-row:nth-child
   
   CARA EDIT STYLING TEXT:
   - Ubah UKURAN text: Ubah "font-size" di .data-value
   - Ubah WARNA text: Ubah "color" di .data-value
   - Ubah KETEBALAN text: Ubah "font-weight" di .data-value
     (100=tipis, 400=normal, 700=bold, 900=extra bold)
   ===================================================== */
.card-data {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 2;
}

.data-row {
    position: absolute;
    left: 50px;     /* ← EDIT INI untuk geser SEMUA field ke KANAN (tambah angka) atau KIRI (kurangi angka) */
    right: 50px;    /* ← EDIT INI untuk ubah LEBAR area text (kurangi angka = lebih lebar) */
    padding: 0;
    margin: 0;
}

/* ----- FIELD NAMA ----- 
   Posisi field NAMA di ID Card */
.data-row:nth-child(1) {
    top: 352px;     /* ← EDIT INI untuk geser field NAMA ke ATAS (kurangi) atau BAWAH (tambah) */
}

/* ----- FIELD KONTINGEN ----- 
   Posisi field KONTINGEN di ID Card */
.data-row:nth-child(2) {
    top: 500px;     /* ← EDIT INI untuk geser field KONTINGEN ke ATAS (kurangi) atau BAWAH (tambah) */
}

/* ----- FIELD BIDANG LOMBA ----- 
   Posisi field BIDANG LOMBA di ID Card */
.data-row:nth-child(3) {
    top: 612px;     /* ← EDIT INI untuk geser field BIDANG LOMBA ke ATAS (kurangi) atau BAWAH (tambah) */
}

/* Label "NAMA:", "KONTINGEN:", "BIDANG LOMBA:" disembunyikan karena sudah ada di background */
.data-row label {
    display: none;
}

/* ----- STYLING TEXT DATA ----- */
.data-value {
    color: #1a1a1a;           /* ← EDIT INI untuk ubah WARNA text (gunakan kode warna hex) */
    font-size: 2.15rem;       /* ← EDIT INI untuk ubah UKURAN text (1rem = 16px, 1.15rem = 18.4px) */
    font-weight: 700;         /* ← EDIT INI untuk ubah KETEBALAN text (400=normal, 700=bold, 900=extra bold) */
    line-height: 1.3;         /* Jarak antar baris jika text panjang */
    background: transparent;   /* Background text (transparent = tidak ada background) */
    padding: 0.5rem 0.8rem;   /* Jarak dalam text dengan border (atas/bawah kiri/kanan) */
    text-align: left;         /* Posisi text (left/center/right) */
    text-transform: uppercase; /* Text otomatis KAPITAL SEMUA */
    letter-spacing: 0.3px;    /* ← EDIT INI untuk ubah JARAK antar huruf (lebih besar = lebih renggang) */
}

/* =====================================================
   NOMOR URUT LOMBA - DIKOSONGKAN
   =====================================================
   Area ini SENGAJA DIKOSONGKAN karena nomor urut 
   akan ditulis MANUAL oleh panitia setelah ID Card dicetak.
   JANGAN HAPUS CODE INI!
   ===================================================== */
.serial-section {
    display: none !important;
}

.serial-badge,
.serial-label,
.serial-number {
    display: none !important;
}

/* Footer sudah ada di background */
.card-footer,
.footer-text,
.footer-location {
    display: none !important;
}

/* === ACTION BUTTONS === */
.action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.action-btn {
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    transition: all 0.3s ease;
}

.btn-download {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
}

.btn-print {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    color: white;
}

.btn-email {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    color: white;
}

.btn-reset {
    background: linear-gradient(135deg, #607D8B, #455A64);
    color: white;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* === REJECTION SECTION === */
.rejection-section {
    animation: fadeIn 0.5s ease;
}

.rejection-card {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 3px solid var(--color-danger);
}

.rejection-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.rejection-card h2 {
    color: var(--color-danger);
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.rejection-message {
    color: #666;
    font-size: 1.125rem;
    margin-bottom: var(--space-lg);
}

.rejection-details {
    background: #f8f9fa;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    text-align: left;
}

.rejection-details p {
    margin-bottom: var(--space-xs);
}

.btn-back {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: var(--color-green-light);
    transform: translateY(-2px);
}

/* === FOOTER === */
.footer {
    background: rgba(26, 95, 47, 0.95);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-lg) 0;
    text-align: center;
    margin-top: var(--space-xl);
}

.footer p {
    margin-bottom: var(--space-xs);
}

/* === NOTIFICATIONS === */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
}

.notification {
    background: white;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification.success {
    border-left: 4px solid var(--color-success);
}

.notification.error {
    border-left: 4px solid var(--color-danger);
}

.notification.info {
    border-left: 4px solid #2196F3;
}

/* =====================================================
   RESPONSIVE - TABLET (Layar 768px ke bawah)
   =====================================================
   Pengaturan untuk tampilan di TABLET
   Edit nilai-nilai di sini jika tampilan di tablet/iPad tidak pas
   ===================================================== */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .logo-section {
        flex-direction: column;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    /* POSISI FOTO di TABLET */
    .card-left {
        left: 38px;     /* Diperbaiki untuk tablet - geser foto KIRI/KANAN */
        top: 20px;      /* Fine-tuned - foto center vertikal di tablet */
        }
    /* UKURAN FOTO di TABLET */
    .photo-frame {
        width: 135px;   /* Diperkecil agar pas di tablet */
        height: 169px;  /* Rasio 3:4 dari 135px (135 x 1.25 = 168.75) */
    }
    
    /* POSISI FIELD di TABLET */
    .data-row {
        left: 40px;     /* ← EDIT INI untuk geser semua field KIRI/KANAN di tablet */
        right: 40px;
    }
    
    /* POSISI FIELD NAMA di TABLET */
    .data-row:nth-child(1) {
        top: 480px;     /* ← EDIT INI untuk geser field NAMA ATAS/BAWAH di tablet */
    }
    
    /* POSISI FIELD KONTINGEN di TABLET */
    .data-row:nth-child(2) {
        top: 615px;     /* ← EDIT INI untuk geser field KONTINGEN ATAS/BAWAH di tablet */
    }
    
    /* POSISI FIELD BIDANG LOMBA di TABLET */
    .data-row:nth-child(3) {
        top: 750px;     /* ← EDIT INI untuk geser field BIDANG LOMBA ATAS/BAWAH di tablet */
    }
    
    /* UKURAN TEXT di TABLET */
    .data-value {
        font-size: 1rem; /* ← EDIT INI untuk ubah ukuran text di tablet */
    }
    
    .action-buttons {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   RESPONSIVE - MOBILE (Layar 480px ke bawah)
   =====================================================
   ⚠️ FOKUS PERBAIKAN MOBILE - JANGAN EDIT YANG LAIN! ⚠️
   ===================================================== */
@media (max-width: 480px) {
    .event-info h1 {
        font-size: 1.25rem;
    }
    
    .search-card {
        padding: var(--space-md);
    }
    
    .id-card {
        max-width: 100%;
        border-radius: 16px;
    }
    
    /* =====================================================
       📸 POSISI FOTO di MOBILE - DIPERBAIKI
       =====================================================
       Berdasarkan screenshot: foto perlu digeser ke kanan 
       dan turun sedikit agar pas di kotak emas
       ===================================================== */
    .card-left {
        left: 26px !important;     /* Digeser lebih kanan - center di kotak emas */
        top: 8px !important;      /* Digeser lebih turun - center vertikal */
    }
    
    /* UKURAN FOTO di MOBILE */
    .photo-frame {
        width: 71px !important;   /* Ukuran proporsional untuk mobile */
        height: 90px !important;  /* Rasio 3:4 terjaga (105 x 4/3 = 140) */
    }
    
    /* =====================================================
       📝 POSISI TEXT FIELDS di MOBILE - DIPERBAIKI
       =====================================================
       Semua field digeser sesuai area putih di background
       ===================================================== */
    
    /* Area margin kiri-kanan untuk semua field */
    .data-row {
        left: 30px !important;     /* Margin kiri */
        right: 30px !important;    /* Margin kanan */
    }
    
    /* 📌 FIELD NAMA - Disesuaikan dengan area putih NAMA di background */
    .data-row:nth-child(1) {
        top: 160px !important;     /* Posisi NAMA di area putih background */
    }
    
    /* 📌 FIELD KONTINGEN - Disesuaikan dengan area putih KONTINGEN */
    .data-row:nth-child(2) {
        top: 228px !important;     /* Posisi KONTINGEN di area putih background */
    }
    
    /* 📌 FIELD BIDANG LOMBA - Disesuaikan dengan area putih BIDANG LOMBA */
    .data-row:nth-child(3) {
        top: 280px !important;     /* Posisi BIDANG LOMBA di area putih background */
    }
    
    /* =====================================================
       🎨 STYLING TEXT di MOBILE - DIPERBAIKI
       ===================================================== */
    .data-value {
        font-size: 0.8rem !important;       /* Ukuran text pas untuk mobile */
        padding: 0.4rem 0.6rem !important;  /* Padding proporsional */
        font-weight: 700 !important;        /* Bold untuk keterbacaan */
        line-height: 1.3 !important;        /* Line height pas */
        letter-spacing: 0.2px !important;   /* Spacing halus */
        color: #1a1a1a !important;          /* Warna hitam solid */
    }
    
    /* =====================================================
       🎯 FINE TUNING LAINNYA - Jangan diubah
       ===================================================== */
    
    /* ACTION BUTTONS - LEBIH COMPACT */
    .action-buttons {
        gap: 0.6rem !important;
        margin-top: 1rem !important;
    }
    
    .action-btn {
        padding: 0.7rem 0.9rem !important;
        font-size: 0.85rem !important;
    }
    
    .btn-icon {
        font-size: 1.1rem !important;
    }
    
    /* IDCARD SECTION SPACING */
    .idcard-section {
        padding: 0.8rem 0 !important;
    }
    
    .idcard-wrapper {
        padding: 0 0.5rem !important;
    }
    
    /* STATS CONTAINER - LEBIH COMPACT */
    .stats-container {
        gap: 0.6rem !important;
        padding-top: 0.8rem !important;
        margin-top: 0.8rem !important;
    }
    
    .stat-item {
        padding: 0.6rem !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
    }
    
    .stat-label {
        font-size: 0.75rem !important;
    }
    
    /* FOOTER - LEBIH KECIL */
    .footer {
        padding: 0.8rem 0 !important;
        font-size: 0.7rem !important;
    }
    
    .footer p {
        margin-bottom: 0.3rem !important;
    }
}

/* === PRINT STYLES === */
@media print {
    body {
        background: white;
    }
    
    .header,
    .search-section,
    .action-buttons,
    .footer,
    .notification-container {
        display: none !important;
    }
    
    .id-card {
        max-width: 100%;
        box-shadow: none;
        page-break-inside: avoid;
    }
}

/* =====================================================
   📋 PANDUAN CEPAT EDIT POSITIONING MOBILE - UPDATED
   =====================================================
   
   🔧 YANG SUDAH DIPERBAIKI:
   
   1. 📸 FOTO 3x4:
      ✅ Posisi: left: 42px, top: 20px
      ✅ Ukuran: 105px x 140px (rasio 3:4)
      ✅ Posisi sudah CENTER di kotak emas
   
   2. 📝 TEXT FIELDS:
      ✅ NAMA: top: 258px
      ✅ KONTINGEN: top: 352px
      ✅ BIDANG LOMBA: top: 432px
      ✅ Semua sudah pas dengan area putih di background
   
   3. 🎨 STYLING TEXT:
      ✅ Font size: 0.8rem (pas untuk mobile)
      ✅ Font weight: 700 (bold, mudah dibaca)
      ✅ Padding: 0.4rem 0.6rem (proporsional)
   
   ⚠️ JIKA MASIH PERLU PENYESUAIAN:
   - Edit nilai "top" di .data-row:nth-child untuk geser field
   - Edit "left" di .card-left untuk geser foto horizontal
   - Edit "top" di .card-left untuk geser foto vertikal
   - Edit "font-size" di .data-value untuk ubah ukuran text
   
   💡 TIPS:
   - Gunakan inspector browser (F12) untuk lihat posisi real
   - Test di device asli untuk hasil terbaik
   - Nilai dalam pixel (px) lebih presisi dari rem
   
   ===================================================== */