/* ========================================= */
/* BİRİM & SABİTLER ÖZEL TASARIMLARI         */
/* ========================================= */

.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.card-box { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transition: background-color 0.4s, box-shadow 0.4s; }
.card-title { font-size: 20px; color: #3498db; margin-top: 0; margin-bottom: 20px; border-bottom: 1px dashed #ecf0f1; padding-bottom: 10px; }

/* BİRİM ÇEVİRİCİ TASARIMI */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: bold; color: #7f8c8d; margin-bottom: 8px; font-size: 14px; }

.cat-select { width: 100%; padding: 15px; font-size: 16px; border: 2px solid #bdc3c7; border-radius: 8px; outline: none; transition: 0.3s; color: #2c3e50; font-weight: bold; cursor: pointer; }
.cat-select:focus { border-color: #3498db; }

.converter-row { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
.input-box { flex: 2; padding: 15px; font-size: 18px; border: 2px solid #bdc3c7; border-radius: 8px; outline: none; transition: 0.3s; color: #2c3e50; font-weight: bold; text-align: right; }
.input-box:focus { border-color: #3498db; box-shadow: 0 0 8px rgba(52, 152, 219, 0.3); }

.unit-select { flex: 1; padding: 15px 10px; font-size: 16px; border: 2px solid #bdc3c7; border-radius: 8px; outline: none; transition: 0.3s; color: #2c3e50; cursor: pointer; }

.swap-icon { font-size: 24px; color: #3498db; cursor: pointer; text-align: center; transition: 0.3s; padding: 10px; }
.swap-icon:hover { transform: scale(1.2) rotate(180deg); }

/* MATEMATİKSEL VE FİZİKSEL SABİTLER KUTUCUKLARI */
.constants-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.constant-item { background: #e8f4f8; border: 1px solid #d1eaf5; padding: 15px; border-radius: 8px; cursor: pointer; transition: 0.3s; position: relative; }
.constant-item:hover { background: #d1eaf5; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2); }
.c-symbol { font-size: 24px; font-weight: bold; color: #2980b9; margin-bottom: 5px; }
.c-name { font-size: 13px; color: #7f8c8d; font-weight: bold; }
.c-value { font-size: 15px; color: #2c3e50; margin-top: 5px; font-family: monospace; }

/* Kopyalandı Uyarı Baloncuğu (Toast) */
.copy-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #27ae60; color: white; padding: 12px 25px; border-radius: 30px; font-weight: bold; opacity: 0; pointer-events: none; transition: 0.3s; z-index: 9999; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(-10px); }

/* ========================================= */
/* BİRİMLER SAYFASI KARANLIK TEMA KODLARI    */
/* ========================================= */
html.dark-mode .card-box { background-color: #1e1e1e; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
html.dark-mode .card-title { border-color: #333; }
html.dark-mode .cat-select, html.dark-mode .input-box, html.dark-mode .unit-select { background-color: #121212; color: #f1f1f1; border-color: #444; }
html.dark-mode .cat-select:focus, html.dark-mode .input-box:focus { border-color: #3498db; }
html.dark-mode .constant-item { background: #1f2a36; border-color: #2c3e50; }
html.dark-mode .constant-item:hover { background: #2c3e50; }
html.dark-mode .c-value { color: #ecf0f1; }

/* ========================================= */
/* BİRİMLER SAYFASI MOBİL UYUMLULUK          */
/* ========================================= */
@media (max-width: 900px) {
    .grid-container { grid-template-columns: 1fr; }
    .constants-grid { grid-template-columns: 1fr; }
    .converter-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .swap-icon { transform: rotate(90deg); padding: 0; }
    .swap-icon:hover { transform: scale(1.2) rotate(270deg); }
}