/*
 * CSS Utama untuk Plugin Transliterasi Nusantara
 * Versi: 13.0
 */

/* Kontainer utama untuk setiap shortcode */
.transliterasi-nusantara-container {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Penataan untuk kedua area teks (input dan output) */
.tn-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 150px;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
    line-height: 1.6;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.tn-textarea:focus {
    border-color: #007cba; /* Warna biru WordPress */
    outline: none;
    box-shadow: 0 0 0 1px #007cba;
}

/* Area input */
.tn-textarea-input {
    /* (Gaya default sudah berlaku) */
}

/* Area output */
.tn-textarea-output {
    background-color: #f9f9f9;
    color: #333;
    font-size: 1.1em; /* Sedikit lebih besar untuk keterbacaan aksara */
}

/* * !!! PENTING: Kelas untuk Aksara Kanan-ke-Kiri (RTL) !!! 
 * Ini akan diterapkan oleh init.js untuk Ibrani, Arab, dan Pegon.
 */
.tn-textarea-output.tn-rtl {
    direction: rtl;
    text-align: right;
    
    /* * Font-family yang mendukung aksara RTL.
     * Peramban akan memilih font pertama yang tersedia di sistem pengguna.
     */
    font-family: 'Noto Sans Hebrew', 'Noto Sans Arabic', 'David Libre', 'Arial', sans-serif;
}

/* Penataan untuk dropdown <select> */
.tn-script-selector {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.tn-script-selector:focus {
    border-color: #007cba;
    outline: none;
    box-shadow: 0 0 0 1px #007cba;
}