:root {
    --besmele-yesil: #1b5e3a;
}

body {
    background-color: #f8f9fa;
}

.navbar-brand img {
    filter: brightness(0) invert(1);
}

.card {
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.arapca {
   /* font-family: 'Scheherazade New', 'Traditional Arabic', 'Amiri', serif;
    font-size: 1.5rem; */
	font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    direction: rtl;
}

.arapca-klavye {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 480px;
}

.arapca-klavye button {
   /* font-family: 'Scheherazade New', 'Traditional Arabic', 'Amiri', serif;
	font-size: 1.1rem; */
	font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    min-width: 40px;
}

.renkli-ayet .kelime {
    cursor: pointer;
    transition: background-color .15s;
}

.renkli-ayet .kelime:hover {
    background-color: #198754;
    border-radius: 3px;
}

/* "Kök bilgisini renkli göster" checkbox'ı işaretlendiğinde, kelimenin gövdesi
   (onEk/sonEk hariç asıl kısmı) türüne göre renklendirilir: isim / fiil / diğer. */
.renkli-ayet .govde {
    color: inherit;
}
.renkli-ayet.kok-aktif .govde.isim {
    color: #0d6efd;
    font-weight: 600;
}
.renkli-ayet.kok-aktif .govde.fiil {
    color: #198754;
    font-weight: 600;
}
.renkli-ayet.kok-aktif .govde.diger {
    color: #6c757d;
    font-weight: 600;
}

/* Kur'an Tahlil'de kelime/kök/tag filtresine uyan kelimeler sarı zeminle vurgulanır */
.renkli-ayet .filtre-vurgu-sari {
    background-color: #fff176;
    border-radius: 3px;
    padding: 0 2px;
}

[contenteditable="true"][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #adb5bd;
}

/* Kelime Türü sınavında, ayet içinde sorulan kelimeyi sarı zeminle vurgular */
.kelime-vurgu-sari {
    background-color: #fff176 !important;
    border-radius: 3px;
    padding: 0 2px;
}

/*
 * Sayfa kaydırması sadece header'dan SONRAKİ kısımda (main + footer) olsun,
 * header/nav sabit kalsın ve içerik hiçbir zaman onun altına/arkasına kaymasın.
 * html/body tam viewport yüksekliğine getirilip dikey flex konteyner yapılır;
 * nav sabit boyutlu bir flex item, .sayfa-govde-icerik ise kendi scrollbar'ına
 * sahip tek kaydırılabilir alan olur.
 */
html, body {
    height: 100%;
    margin: 0;
}

.sayfa-govde {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.sayfa-govde .navbar {
    flex: 0 0 auto; /* header hiç küçülmez/büyümez, sabit kalır */
}

.sayfa-govde-icerik {
    flex: 1 1 auto;   /* kalan tüm yüksekliği kaplar */
    overflow-y: auto; /* sadece bu alan kayar */
}

.autocomplete-liste {
    position: absolute;
    z-index: 1050;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
}

.autocomplete-liste .oneri {
    padding: .4rem .75rem;
    cursor: pointer;
}

.autocomplete-liste .oneri:hover {
    background-color: #198754;
}