/* Hanya untuk mode web, sembunyikan area print */
@media screen {
    #print-area {
        display: none;
    }
}

/* Hanya untuk mode cetak, sembunyikan UI dan atur A4 */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm 20mm 20mm 20mm; /* Atas 1cm, Kanan 2cm, Bawah 2cm, Kiri 2cm */
    }
    
    body {
        margin: 0;
        padding: 0;
        background-color: white !important; /* Paksa latar belakang putih mutlak */
        color: black !important;
        font-family: "Arial Narrow", Arial, sans-serif;
    }

    #ui-area {
        display: none !important;
    }

    #print-area {
        display: block;
        width: 100%;
    }

    .print-page {
        page-break-after: always;
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    
    .print-page:last-child {
        page-break-after: auto;
    }

    /* Styling KOP Surat */
    .kop-surat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 3px solid black;
        padding-bottom: 5px; /* Perkecil padding */
        margin-bottom: 2px;
    }
    
    .kop-border-double {
        border-top: 1px solid black;
        margin-top: 2px;
        margin-bottom: 10px; /* Perkecil margin */
    }

    .kop-text {
        text-align: center;
        flex: 1;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .kop-line-1 { font-size: 14pt; font-weight: bold; }
    .kop-line-2 { font-size: 16pt; font-weight: bold; }
    .kop-line-3 { font-size: 20pt; font-weight: bold; }
    .kop-line-4 { font-size: 11pt; font-weight: normal; text-transform: none; margin-top: 2px;}

    .kop-logo {
        width: 101px; /* Diperbesar 15% lagi */
        height: 101px;
        object-fit: contain;
    }

    .surat-title {
        text-align: center;
        font-weight: bold;
        font-size: 14pt;
        margin-bottom: 10px; /* Perkecil margin */
        line-height: 1.2;
    }

    .surat-info {
        font-size: 12pt; /* Teks 12pt */
        line-height: 1.2; /* Merapatkan jarak antar baris */
        margin-bottom: 10px;
    }

    .surat-info table {
        width: 100%;
    }

    .surat-info td:first-child {
        width: 150px;
    }

    .surat-info td:nth-child(2) {
        width: 20px;
    }

    /* Styling Tabel Nilai */
    .nilai-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 10px;
        font-size: 12pt;
        line-height: 1.1; /* Diperbaiki dari 10pt agar baris yang turun tidak tumpang tindih */
    }

    .nilai-table th, .nilai-table td {
        border: 1px solid black;
        padding: 5px 4px; /* Ditambah tingginya ~5% */
        vertical-align: middle;
    }

    .nilai-table th {
        text-align: center;
        font-weight: bold;
    }
    
    .text-center {
        text-align: center;
    }
    
    .text-right {
        text-align: right;
    }

    .font-bold {
        font-weight: bold;
    }

    /* Penutup & TTD */
    .penutup {
        font-size: 12pt; /* Teks 12pt */
        margin-bottom: 15px; 
    }

    .ttd-area {
        display: flex;
        justify-content: flex-end;
        text-align: left;
        font-size: 12pt; /* Teks 12pt */
        line-height: 1.2;
    }

    .ttd-box {
        width: 250px; /* Sedikit lebih sempit */
    }

    .ttd-space {
        height: 60px; /* Kurangi ruang TTD */
    }
}