@font-face {
    font-family: 'DigitalClock';
    src: url('rakam_font.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- GENEL STİLLER VE RENK DEĞİŞKENLERİ --- */

:root {
    --primary-color: #ebf400; --background-color: #1A1A1A; --card-background-color: #2A2A2A; --text-color: #E0E0E0;
    --button-outline-color: var(--primary-color); --button-text-color: var(--primary-color); --button-hover-bg: var(--primary-color); --button-hover-text: var(--background-color);
    --secondary-color: #eb1736; --success-color: #28a745; --milliseconds-color: #888; --grey-color: #6c757d; --line-color: rgba(235, 244, 0, 0.3);
    --input-bg-color: #333; --input-border-color: var(--line-color); --footer-text-color: #888;
    --border-radius: 8px; --line-width: 1px;
}
body.light-theme {
    --primary-color: #007bff; --background-color: #f8f9fa; --card-background-color: #ffffff; --text-color: #212529;
    --button-outline-color: var(--primary-color); --button-text-color: var(--primary-color); --button-hover-bg: var(--primary-color); --button-hover-text: #ffffff;
    --secondary-color: #dc3545; --success-color: #28a745; --milliseconds-color: #6c757d; --grey-color: #6c757d; --line-color: rgba(0, 0, 0, 0.1);
    --input-bg-color: #e9ecef; --input-border-color: #ced4da; --footer-text-color: #6c757d;
}

html { height: 100%; }
body { font-family: 'Orbitron', sans-serif; background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 0; transition: background-color 0.3s, color 0.3s; display: flex; flex-direction: column; min-height: 100vh; }

/* --- YERLEŞİM (LAYOUT) --- */
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* HEADER DÜZENİ (GÜNCELLENDİ - Tam Genişlik) */
header {
    border-bottom: var(--line-width) solid var(--line-color);
    flex-shrink: 0;
    transition: border-bottom-color 0.3s;
    /* YENİ: Flexbox ayarları doğrudan header'a */
    display: flex;
    justify-content: space-between; /* Sol (logo) ve Sağ (nav+button) ayır */
    align-items: center;
    padding: 20px 40px; /* Kenarlarda boşluk bırak (ayarlayabilirsin, örn: 20px 30px) */
    box-sizing: border-box; /* Padding içeriği etkilemesin */
    flex-wrap: nowrap; /* Alta kaymayı engelle */
}
/* Eski header .container kuralı kaldırıldı */
.header-right { display: flex; align-items: center; gap: 20px;  }

main { padding: 0; flex-grow: 1; }
footer { border-top: var(--line-width) solid var(--line-color); flex-shrink: 0; transition: border-top-color 0.3s; }
footer .container { padding: 20px 20px; text-align: center; color: var(--footer-text-color); font-size: 0.9rem; transition: color 0.3s; }

/* --- BÖLÜM STİLLERİ (CARD) --- */
.card { padding: 40px 0; border-bottom: var(--line-width) solid var(--line-color); transition: border-bottom-color 0.3s; }
main > .card:last-of-type { border-bottom: none; }
.card h2 { margin-top: 0; margin-bottom: 20px; color: var(--primary-color); font-size: 1.2rem; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s; }
.function-wrapper { margin-top: 20px; }

/* --- NAVİGASYON & BAŞLIK --- */
.site-title-link { text-decoration: none; flex-shrink: 0; }
.site-title { color: var(--primary-color); margin: 0; transition: color 0.3s; font-size: 1.5rem; }
.main-nav { display: flex; gap: 15px; }
.main-nav a { font-family: 'Orbitron', sans-serif; font-weight: 700; text-decoration: none; color: var(--grey-color); font-size: 0.9rem; padding: 10px 3px; border-bottom: 2px solid transparent; transition: color 0.2s, border-bottom-color 0.2s; white-space: nowrap; }
.main-nav a:hover { color: var(--primary-color); }
.main-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); transition: color 0.3s, border-bottom-color 0.3s; }

/* --- SAAT KUTUSU --- */
.time-display { background-color: var(--card-background-color); border-radius: var(--border-radius); padding: 30px; min-height: 225px; position: relative; display: flex; justify-content: center; align-items: baseline; font-family: 'DigitalClock', sans-serif; font-size: 7.5rem; font-weight: normal; color: var(--primary-color); transition: background-color 0.3s, color 0.3s; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.milliseconds { font-size: 2.25rem; color: var(--milliseconds-color); transition: color 0.3s; }
.char { display: inline-block; width: 0.55em; text-align: center; }
.time-colon, .milli-colon { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--primary-color); font-size: 0.5em; vertical-align: 0.2em; margin: 0 0.05em; display: inline-block; transition: color 0.3s; }
.milli-colon { color: var(--milliseconds-color); vertical-align: 0.15em; font-size: 0.5em; transition: color 0.3s; }
.time-indicator, .fullscreen-button, .fullscreen-text { font-family: 'Orbitron', sans-serif; }
.time-indicator { background: none; border: none; padding: 0; position: absolute; top: 15px; right: 20px; font-size: 1rem; font-weight: normal; color: var(--milliseconds-color); text-transform: uppercase; cursor: pointer; transition: color 0.2s ease, display 0.3s ease; }
.time-indicator:hover { color: var(--primary-color); }
.fullscreen-button { background: none; border: none; padding: 0; position: absolute; bottom: 15px; right: 20px; cursor: pointer; transition: display 0.3s ease; }
.fullscreen-text { font-size: 0.9rem; font-weight: normal; color: var(--milliseconds-color); transition: color 0.2s ease; }
.fullscreen-button:hover .fullscreen-text { color: var(--primary-color); }

/* --- KONTROL BÖLÜMÜ STİLLERİ --- */
/* .controls, .inputs-and-controls artık sadece masaüstü kurallarında */
#timer-inputs { margin: 0; display: flex; flex-direction: column; gap: 10px; } /* Mobil için */
#timer-inputs input { width: 120px; padding: 10px; font-family: 'Orbitron', sans-serif; font-size: 1rem; text-align: center; border-radius: var(--border-radius); background-color: var(--input-bg-color); color: var(--text-color); border: 1px solid var(--input-border-color); box-sizing: border-box; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
/* Mobil için Geri Sayım ve Kronometre Kontrolleri */
#stopwatch-section .controls, #timer-section .controls {
    display: flex; flex-direction: column; gap: 15px; margin-top: 20px;
}
#timer-section .inputs-and-controls {
    display: flex; flex-direction: column; gap: 20px; align-items: center; /* Mobilde ortala */
}


/* --- MASAÜSTÜ YERLEŞİM KURALLARI --- */
@media (min-width: 768px) {
    /* Masaüstünde wrapper'a gerek kalmadı, grid doğrudan card içine uygulanabilir */
    /* .function-wrapper { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; } */
    #stopwatch-section .controls { flex-direction: row; justify-content: center; }
    #timer-section .inputs-and-controls { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px; margin-top: 20px; }
    #timer-section #timer-inputs { flex-direction: row; gap: 10px; }
    #timer-section .controls { flex-direction: row; gap: 10px; margin-top: 0; }
}

/* --- DÜĞME STİLLERİ --- */
#theme-toggle-button { background-color: transparent; color: var(--button-text-color); border: 2px solid var(--button-outline-color); padding: 8px 16px; border-radius: var(--border-radius); cursor: pointer; font-family: 'Orbitron', sans-serif; font-weight: 700; transition: background-color 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; }
#theme-toggle-button:hover { background-color: var(--button-hover-bg); color: var(--button-hover-text); }
.controls button, #clear-laps-button { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; border: 2px solid var(--button-outline-color); background-color: transparent; color: var(--button-text-color); border-radius: var(--border-radius); padding: 0.75em 1.5em; margin: 0; cursor: pointer; transition: background-color 0.2s, color 0.2s, opacity 0.2s, border-color 0.2s; }
.controls button:disabled { opacity: 0.4; cursor: not-allowed; }
.controls button:disabled .button_top { opacity: 0.4; }
.button_top { display: inline; }
.controls button:hover:not(:disabled), #clear-laps-button:hover { background-color: var(--button-hover-bg); color: var(--button-hover-text); }
.controls button:hover:not(:disabled) span { color: var(--button-hover-text); }
.controls button span { transition: color 0.2s; }
#clear-laps-button { --button-outline-color: var(--grey-color); --button-text-color: var(--grey-color); --button-hover-bg: var(--grey-color); --button-hover-text: #ffffff; margin-top: 15px; width: auto; display: block; margin-left: auto; margin-right: auto; max-width: 200px; }

/* Özel Düğme Renkleri */
#reset-stopwatch, #reset-timer, #lap-stopwatch { --button-outline-color: var(--grey-color); --button-text-color: var(--grey-color); --button-hover-bg: var(--grey-color); --button-hover-text: #ffffff; }
#start-pause-stopwatch.running { --button-outline-color: var(--secondary-color); --button-text-color: var(--secondary-color); --button-hover-bg: var(--secondary-color); --button-hover-text: var(--background-color); }
#start-pause-timer.running { --button-outline-color: var(--secondary-color); --button-text-color: var(--secondary-color); --button-hover-bg: var(--secondary-color); --button-hover-text: var(--background-color); }
#start-pause-timer.paused { --button-outline-color: var(--success-color); --button-text-color: var(--success-color); --button-hover-bg: var(--success-color); --button-hover-text: #ffffff; }
/* Aydınlık temada Tur ve Temizle düğmesi rengi */
body.light-theme #lap-stopwatch,
body.light-theme #clear-laps-button { --button-outline-color: var(--grey-color); --button-text-color: var(--grey-color); --button-hover-bg: var(--grey-color); --button-hover-text: #ffffff; }

/* --- TUR LİSTESİ STİLLERİ --- */
#lap-list-container { margin-top: 30px; padding: 0 10px; text-align: center; }
#lap-list { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; font-family: 'Orbitron', sans-serif; font-size: 1.1rem; }
#lap-list li { display: flex; justify-content: space-between; padding: 15px 10px; border-bottom: 1px solid var(--line-color); transition: border-bottom-color 0.3s; }
#lap-list li:first-child { border-top: 1px solid var(--line-color); transition: border-top-color 0.3s; }
#lap-list .lap-number { color: var(--primary-color); transition: color 0.3s; }
#lap-list .lap-time { color: var(--grey-color); font-family: 'DigitalClock', sans-serif; font-size: 1.5rem; display: flex; align-items: baseline; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; transition: color 0.3s; }
#lap-list .lap-time .char { display: inline-block; width: 0.55em; text-align: center; }
#lap-list .lap-time .time-colon, #lap-list .lap-time .milli-colon { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--grey-color); font-size: 0.7em; vertical-align: 0.15em; margin: 0 0.05em; display: inline-block; transition: color 0.3s;}

/* --- TAM EKRAN STİLLERİ --- */
*:fullscreen { background-color: var(--background-color) !important; }
*:fullscreen .time-display { background-color: transparent !important; min-height: auto; padding: 0; }
*:fullscreen .fullscreen-button { display: none !important; }
#clock-section .time-display:fullscreen { display: flex; align-items: center; justify-content: center; }
#clock-section .time-display:fullscreen .main-time { font-size: 50vh; }
#clock-section .time-display:fullscreen .time-indicator { display: none !important; }
#stopwatch-section:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; width: 100%; height: 100%; overflow-y: auto; }
#stopwatch-section:fullscreen .time-display .main-time { font-size: 25vh; }
#stopwatch-section:fullscreen .time-display .milliseconds { font-size: 12.5vh; }
#stopwatch-section:fullscreen .controls { flex-direction: row; justify-content: center; margin-top: 20px; }
#stopwatch-section:fullscreen #lap-list-container { width: 80%; max-width: 500px; margin-top: 20px; }
#stopwatch-section:fullscreen #lap-list li { font-size: 1.2rem; border-color: var(--line-color) !important; }
#stopwatch-section:fullscreen #lap-list .lap-time { font-size: 1.8rem; }
#stopwatch-section:fullscreen #clear-laps-button { margin-top: 20px; }
#timer-section:fullscreen { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; width: 100%; height: 100%; }
#timer-section:fullscreen .time-display .main-time { font-size: 28vh; }
#timer-section:fullscreen .time-display .milliseconds { font-size: 14vh; }
#timer-section:fullscreen .inputs-and-controls { margin-top: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px; }
#timer-section:fullscreen #timer-inputs { flex-direction: row; gap: 10px; }
#timer-section:fullscreen #timer-inputs input { background-color: var(--input-bg-color) !important; border-color: var(--input-border-color) !important; color: var(--text-color) !important; }
#timer-section:fullscreen .controls { flex-direction: row; gap: 10px; }
*:fullscreen .char { display: inline-block !important; width: 0.55em !important; text-align: center !important; }
*:fullscreen .time-display { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" !important; white-space: nowrap; }
*:fullscreen .time-colon, *:fullscreen .milli-colon { vertical-align: 0.2em; align-self: initial; position: static; top: auto; color: var(--primary-color) !important; }
*:fullscreen .milli-colon { vertical-align: 0.15em; color: var(--milliseconds-color) !important; }
*:fullscreen .milliseconds { position: static; top: auto; align-self: baseline; margin-bottom: 0; color: var(--milliseconds-color) !important; }

/* --- MOBİL NAVİGASYON (RESPONSIVE) STİLLERİ --- */

/* Mobil menü ikonunu (hamburger) varsayılan olarak gizle */
#mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 2.5rem; /* İkon boyutunu büyüttük */
    line-height: 1;
    cursor: pointer;
    padding: 0 10px;
    margin: 0;
    order: 3; /* Flex sıralamasında en sağa al */
}






/* Küçük telefon ekranları için başlığı biraz küçültelim */
@media (max-width: 400px) {
    .site-title {
        font-size: 1.5rem;
    }
    #mobile-nav-toggle {
        font-size: 2.2rem;
    }
}


/* --- MOBİL NAVİGASYON DÜZELTMESİ --- */

/* Mobil (768px ve altı) stilleri */
@media (max-width: 768px) {

    /* 1. Hamburger ikonunu göster */
    #mobile-nav-toggle {
        display: block; /* Hamburger ikonu mobil'de görünür yap */
        z-index: 1001; /* Açık menünün bile üstünde kalmasını sağla */
        
        /* Tema değiştirme butonuyla aynı hizada olması için */
        height: 40px; 
        width: 40px; 
        font-size: 1.5rem;
        position: relative; 
        
        height: 40px; 
        width: 40px; 
        font-size: 1.5rem;
    }

    /* 2. .header-right BÖLÜMÜNÜ VARSAYILAN OLARAK GİZLE (EN ÖNEMLİ DÜZELTME) */
    .header-right {
        display: none; /* Menüyü varsayılan olarak gizle */
    }

    /* 3. Menü açıldığında (header.nav-open) .header-right bölümünü göster */
    header.nav-open .header-right {
        /* Ekranı kaplayan bir katman (overlay) oluştur */
        display: flex;
        flex-direction: column;
        justify-content: center; /* İçeriği dikeyde ortala */
        align-items: center;   /* İçeriği yatayda ortala */
        
        position: fixed; /* Sayfayı tamamen kaplaması için */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Ekran yüksekliği kadar */
        
        background-color: var(--background-color); 
        
        z-index: 1000; /* Diğer tüm içeriğin üstüne çıkar */
    }

    /* 4. Açık menü içindeki linkleri ve butonları stillendir */
    header.nav-open .main-nav {
        flex-direction: column; /* Linkleri alt alta diz */
        align-items: center;
        gap: 20px; /* Linklerin arasını aç */
    }

    header.nav-open .main-nav a {
        font-size: 1.8rem; /* Linkleri daha büyük ve tıklanabilir yap */
        padding: 10px;
    }

    header.nav-open #theme-toggle-button {
        margin-top: 30px; /* Linklerle buton arasına boşluk koy */
        font-size: 1rem;
    }
}

/* --- YENİ MOBİL SAAT SIĞDIRMA ÇÖZÜMÜ (TEK BLOK) --- */

@media (max-width: 768px) {

    /* 1. EN ÖNEMLİ DÜZELTME:
      Karakterlerin sabit '0.55em' genişliğini kaldırıyoruz.
      'width: auto' diyerek karakterlerin kendi doğal genişliğini
      kullanmasını sağlıyoruz. Sorunun ana kaynağı buydu.
    */
    .time-display .char {
        width: auto; /* Orijinal 'width: 0.55em' kuralını ezer */
        padding-left: 1px; /* Rakamlar yapışmasın diye hafif boşluk */
        padding-right: 1px;
    }

    /* 2. Tüm saat kutularının iç boşluğunu (padding) azalt */
    .time-display {
        padding-left: 15px;  /* Orijinal: 30px */
        padding-right: 15px; /* Orijinal: 30px */
        min-height: auto;    /* Yüksekliği içeriğe göre ayarla */
        align-items: center; /* Dikey olarak ortala */
    }

    /* 3. Saatlerin font boyutlarını ayarla */

    /* Ana Sayfa Saati (HH:MM:SS - 6 karakter) */
    #clock-display {
        font-size: 4.5rem; /* Orijinal: 7.5rem */
    }

    /* Kronometre & Geri Sayım (MM:SS:msms) */
    #stopwatch-display,
    #timer-display {
        font-size: 5rem; /* Orijinal: 7.5rem */
    }

    /* Milisaniyeleri orantılı olarak küçült (5rem * 0.3 = 1.5rem) */
    #stopwatch-display .milliseconds,
    #timer-display .milliseconds {
        font-size: 1.5rem; /* Orijinal: 2.25rem */
    }
}

/* En dar ekranlar için (380px ve altı) */
@media (max-width: 380px) {
    
    #clock-display {
        font-size: 3.2rem; /* 4.5rem'den daha da küçült */
    }
    
    #stopwatch-display,
    #timer-display {
        font-size: 3.8rem; /* 5rem'den daha da küçült */
    }

    #stopwatch-display .milliseconds,
    #timer-display .milliseconds {
        font-size: 1.14rem; /* 3.8rem * 0.3 */
    }
}
/* --- MOBİL SAAT SIĞDIRMA (SON VE TEK ÇÖZÜM) --- */
/* Bu kod, saatlerin mobil ekrana sığmasını sağlar */
@media (max-width: 768px) {

    /* 1. EN ÖNEMLİ DÜZELTME:
      Karakterlerin sabit '0.55em' genişliğini kaldırıyoruz.
      !important ekleyerek bu kuralın başka bir şey tarafından
      ezilmediğinden emin oluyoruz.
    */
    .time-display .char {
        width: auto !important; /* DİĞER KODLARI EZER */
        padding-left: 1px;
        padding-right: 1px;
    }

    /* 2. Tüm saat kutularının iç boşluğunu (padding) azalt */
    .time-display {
        padding-left: 15px;
        padding-right: 15px;
        min-height: auto;
        align-items: center;
    }

    /* 3. Saatlerin font boyutlarını ayarla */
    #clock-display {
        font-size: 4.5rem;
    }
    #stopwatch-display,
    #timer-display {
        font-size: 5rem;
    }
    #stopwatch-display .milliseconds,
    #timer-display .milliseconds {
        font-size: 1.5rem;
    }
}

/* En dar ekranlar için (380px ve altı) */
@media (max-width: 380px) {
    #clock-display {
        font-size: 3.2rem;
    }
    #stopwatch-display,
    #timer-display {
        font-size: 3.8rem;
    }
    #stopwatch-display .milliseconds,
    #timer-display .milliseconds {
        font-size: 1.14rem;
    }
}

@media (max-width: 767px) { /* Masaüstü (min-width: 768px) ile çakışmasın */

    /* Ana sarmalayıcıyı dikey (column) yap */
    #timer-section .inputs-and-controls {
        flex-direction: column; /* Input grubu ve Buton grubu alt alta */
        align-items: center; 
        gap: 25px;            
        margin-top: 20px;
    }

    /* Input'ları (Dakika/Saniye) dikey yap */
    #timer-inputs {
        flex-direction: column; /* Input'lar alt alta */
        gap: 15px;
        width: 100%;
        max-width: 300px; 
    }

    #timer-inputs input {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    /* Butonları (Start/Reset) yatay (row) yap */
    #timer-section .controls {
        flex-direction: row; /* Butonlar yan yana */
        justify-content: center;
        width: 100%;
        gap: 10px; 
        margin-top: 0; 
    }
}

/* --- TAM EKRAN STİLLERİ (YENİ) --- */

/* Tam ekran modu için ana kapsayıcı (.card) ayarları */
.card:fullscreen,
.card:-webkit-full-screen,
.card:-ms-fullscreen {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Dikeyde ortala */
    align-items: center;   /* Yatayda ortala */
    overflow: hidden; /* Kaydırmayı gizle */
}

/* Tam ekrandayken saat kutusunu ayarla */
.card:fullscreen .time-display,
.card:-webkit-full-screen .time-display,
.card:-ms-fullscreen .time-display {
    min-height: auto; /* Orijinal min-height'i sıfırla */
    padding: 10px;
    /* Yazı tipini ekran yüksekliğine göre ayarla (Viewport Height) */
    font-size: 18vh; 
    line-height: 1; 
    flex-grow: 0; 
    /* İçeriği tam ortala (baseline yerine) */
    align-items: center; 
    border: none; /* Kenarlıkları kaldır */
    background-color: transparent; /* Arka planı kaldır */
}

/* Tam ekrandayken gereksiz elementleri gizle */
.card:fullscreen .container > h2,
.card:fullscreen .controls,
.card:fullscreen .inputs-and-controls,
.card:fullscreen .fullscreen-button,
.card:fullscreen #lap-list-container,
.card:-webkit-full-screen .container > h2,
.card:-webkit-full-screen .controls,
.card:-webkit-full-screen .inputs-and-controls,
.card:-webkit-full-screen .fullscreen-button,
.card:-webkit-full-screen #lap-list-container,
.card:-ms-fullscreen .container > h2,
.card:-ms-fullscreen .controls,
.card:-ms-fullscreen .inputs-and-controls,
.card:-ms-fullscreen .fullscreen-button,
.card:-ms-fullscreen #lap-list-container {
    display: none;
}

/* Local Watch (index.html) için özel tam ekran ayarı (AM/PM göstergesi) */
.card:fullscreen #clock-display,
.card:-webkit-full-screen #clock-display,
.card:-ms-fullscreen #clock-display {
     flex-direction: column;
     padding-top: 5vh; 
}

.card:fullscreen .time-indicator,
.card:-webkit-full-screen .time-indicator,
.card:-ms-fullscreen .time-indicator {
    position: static; /* Mutlak konumlandırmayı kaldır */
    font-size: 5vh; /* Boyutu ayarla */
    margin-top: 10px;
}
.feature-description {
    /* Saat kutusu ile metin arasına boşluk ekler */
    margin-top: 30px; 
    
    /* Metni kartın içinde ortalar */
    text-align: center;
    max-width: 700px; 
    margin-left: auto;
    margin-right: auto;
}

.feature-description p {
    /* 'About' sayfanızdaki gibi okunabilir bir yazı tipi kullanır */
    font-family: Arial, sans-serif; 
    font-size: 1rem; /* 16px */
    line-height: 1.6; 
    color: var(--text-color); 
    opacity: 0.9; 
}