/* 1. Manrope */
@font-face {
    font-family: 'Manrope';
    src: url('./fonts/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
}

/* 2. Noto Serif (Normal/Tegak) */
@font-face {
    font-family: 'Noto Serif';
    src: url('./fonts/NotoSerif-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
}

/* 3. Noto Serif (Italic/Miring) */
@font-face {
    font-family: 'Noto Serif';
    src: url('./fonts/NotoSerif-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 400 700;
    font-style: italic;
}

/* 4. Material Symbols Outlined */
@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('./fonts/MaterialSymbolsOutlined.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
}

body { 
    font-family: 'Manrope', sans-serif; 
    background-color: #faf9f5; 
}

h1, h2, h3, .serif { 
    font-family: 'Noto Serif', serif; 
}

/* Material Symbols Adjustments */
.material-symbols-outlined { 
    font-family: 'Material Symbols Outlined'; /* Tambahkan baris ini */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
    display: inline-block;
    vertical-align: middle;
    
    /* Tambahan opsional agar posisi ikon lebih stabil di berbagai browser */
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* Custom Effects & Classes */
.glass { 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
}

.glass-panel {
    background: rgba(250, 249, 245, 0.85);
    backdrop-filter: blur(12px);
}

.shadow-ambient { 
    box-shadow: 0 24px 40px rgba(27, 28, 26, 0.04); 
}

.btn-gradient {
    background: linear-gradient(135deg, #775a19 0%, #c5a059 100%);
}