/* ===== Sıcak, göz yormayan açık tema: yalnızca sayfa zemini ve metin renkleri =====
   Açık modda sayfa pür beyaz yerine yumuşak krem, metin saf siyah yerine sıcak
   koyu tondadır. Navbar/footer, kart ve kenarlık yüzeyleri Bootstrap varsayılanı
   olarak bırakılır. Koyu tema değişmez. */
[data-bs-theme="light"] {
    --bs-body-bg: #f8f5ea;            /* sayfa zemini: sıcak kırık beyaz (#ffffe1 tonu, yumuşatılmış) */
    --bs-body-bg-rgb: 248, 245, 234;
    --bs-body-color: #2f2b24;         /* metin: sıcak koyu (saf siyah değil) */
    --bs-body-color-rgb: 47, 43, 36;

    --bs-emphasis-color: #1c1912;
    --bs-emphasis-color-rgb: 28, 25, 18;
    --bs-secondary-color: rgba(47, 43, 36, .62);   /* ikincil/meta metin */
    --bs-tertiary-color: rgba(47, 43, 36, .45);
    --bs-heading-color: #24211a;

    /* Navbar & footer (bg-body-tertiary): sayfa zemininden (#f8f5ea) hafifçe daha
       koyu, sıcak bir krem -> belirgin ama uyumlu, modern bir çubuk görünümü. */
    --bs-tertiary-bg: #efe7d2;
    --bs-tertiary-bg-rgb: 239, 231, 210;
}

.card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }
.card { transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }

/* Section headings with leading icon */
.section-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    background-color: rgba(200, 30, 30, .1);
    color: #c81e1e;
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Category cards on the home page */
.category-card { transition: transform .12s ease, box-shadow .12s ease; }
.category-card .category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
    background-color: rgba(200, 30, 30, .12);
    color: #c81e1e;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Kategoriler artık alt alta, belirgin satırlar (tag değil) */
.category-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: .6rem;
    text-decoration: none;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid #c81e1e;        /* belirgin kategori vurgusu */
    transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.category-item-icon { color: #c81e1e; font-size: 1rem; flex-shrink: 0; }
.category-item-name { flex-grow: 1; }
.category-item-arrow { font-size: .8rem; opacity: .35; transition: opacity .12s ease, transform .12s ease; }
.category-item:hover {
    color: #fff;
    background-color: #c81e1e;
    border-color: #c81e1e;
    transform: translateX(2px);
}
.category-item:hover .category-item-icon { color: #fff; }
.category-item:hover .category-item-arrow { opacity: 1; transform: translateX(2px); }
.article-content { line-height: 1.8; font-size: 1.075rem; }
.article-content img { max-width: 100%; height: auto; border-radius: .375rem; }
.article-content h2, .article-content h3 { margin-top: 1.5rem; }
.navbar-brand { font-weight: 700; letter-spacing: .3px; }

.brand-logo { display: inline-block; vertical-align: middle; }

/* Anasayfa hero başlığı (menü yerine logo + ad + slogan) */
.home-logo { height: 130px; max-width: 100%; }
.home-title {
    font-family: Cambria, Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: .3px;
    color: #c81e1e;
}
.home-tagline {
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
}
.home-search { max-width: 30rem; }
@media (max-width: 575.98px) {
    .home-logo { height: 96px; }
    .home-title { font-size: 1.6rem; }
}

/* Sözlük giriş metni */
.dictionary-intro {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--bs-secondary-color);
    font-size: 1.02rem;
}
.dictionary-search { max-width: 32rem; }
.dictionary-intro-title {
    font-family: Cambria, Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .5px;
    color: #c81e1e;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Drop cap — büyük başharf (makale gövdesi ve kart önizlemesi) */
.basharf {
    color: #990000;
    display: inline;
    float: left;
    font-size: 4.8em;
    line-height: 0.8em;
    text-transform: uppercase;
    margin: 0.07em 0.14em 0 0;
}

/* Makale önizleme kartı (_ArticleCard) */
.article-card .card-title { font-size: 1.05rem; }
.article-card-main { min-width: 0; }            /* flex içinde metnin taşmasına izin ver */

/* Excerpt'i HTML olarak render ediyoruz (basharf çalışsın). Sabit yükseklik:
   resmi olan ve olmayan kartlar aynı boyda kalsın. */
.article-card-excerpt {
    height: 6.6em;
    overflow: hidden;
    position: relative;
}
.article-card-excerpt p,
.article-card-excerpt div { margin: 0; display: inline; }       /* ham HTML'deki blok etiketleri yumuşat */
.article-card-excerpt .basharf {                                 /* kartta drop-cap daha küçük */
    font-size: 2.4em;
    line-height: 0.78em;
    margin: 0.04em 0.12em 0 0;
}
/* alt kenara doğru yumuşak kesme efekti */
.article-card-excerpt::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.4em;
    background: linear-gradient(transparent, var(--bs-card-bg, var(--bs-body-bg)));
}

/* Sağdaki küçük görsel */
.article-card-thumb { width: 96px; }
.article-card-thumb img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 0.5rem;
    display: block;
}

/* Footer */
.footer-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s ease;
}
.footer-link:hover {
    color: var(--bs-emphasis-color);
    text-decoration: underline;
}

/* Navbar & footer: sayfa zemini (bg-body) ile bütünleşik krem tonu. bg-body-tertiary
   zaten bunu uygular; tema değişkeni ne olursa olsun uyumlu kalsın diye açıkça sabitlenir. */
#mainNav,
.site-footer {
    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Navbar: large on load, shrinks with an effect on scroll (logo -> text) */
#mainNav {
    padding-top: .9rem;
    padding-bottom: .9rem;
    transition: padding-top .25s ease, padding-bottom .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.navbar-brand .brand-logo { height: 90px; transition: height .25s ease; }
.navbar-brand .brand-text {
    display: none;
    font-family: Cambria, Georgia, "Times New Roman", serif;
    font-size: 1.25rem; /* ~20px: matches the logo's "Türk Âlemiyiz" cap height at 90px logo */
    font-weight: 700;
    color: #c81e1e;
    line-height: 1;
}

#mainNav.scrolled {
    padding-top: .2rem;
    padding-bottom: .2rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}
#mainNav.scrolled .navbar-brand .brand-logo { display: none; }
#mainNav.scrolled .navbar-brand .brand-text { display: inline-block; }

/* Arama önizleme paneli (navbar'da 5 harften fazla yazılınca) */
.search-preview {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 1080;
    width: min(34rem, 92vw);
    max-height: 70vh;
    overflow-y: auto;
}
.search-preview-head {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--bs-secondary-color);
    padding: .6rem .8rem .35rem;
}
.search-preview-col { padding-bottom: .4rem; }
.search-preview-item {
    display: block;
    padding: .4rem .8rem;
    font-size: .9rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-radius: .35rem;
    margin: 0 .35rem;
}
.search-preview-item:hover,
.search-preview-item:focus { background-color: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }
.search-preview-none, .search-preview-empty { font-size: .85rem; }
.search-preview-none { padding: .25rem .8rem .5rem; }
.search-preview-empty { padding: 1rem; text-align: center; }
.search-preview-foot {
    padding: .55rem .8rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.search-preview-all { color: #c81e1e; text-decoration: none; }
.search-preview-all:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    /* Stacked iki sütun: dikey çizgi yerine yatay ayraç */
    .search-preview-cats { border-right: 0 !important; border-bottom: 1px solid var(--bs-border-color); }
}

/* Yükleniyor iskeleti (skeleton) — AJAX cevabı beklenirken shimmer */
.search-preview-skel {
    display: block;
    width: 100%;
    height: .8rem;
    border-radius: .4rem;
    background: linear-gradient(90deg,
        var(--bs-secondary-bg) 25%,
        var(--bs-tertiary-bg) 37%,
        var(--bs-secondary-bg) 63%);
    background-size: 400% 100%;
    animation: skelShimmer 1.2s ease-in-out infinite;
}
@keyframes skelShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .search-preview-skel { animation: none; }
}

/* Tam sonuç sayfası iskeleti (Enter submit / "Tümü" ile geçişte) */
.search-results-skeleton .search-preview-skel { display: block; }
.skel-heading { width: 16rem; max-width: 80%; height: 1.5rem; margin-bottom: 1.25rem; }
.search-results-skeleton .card-body .search-preview-skel { margin-bottom: .55rem; }
.skel-badge { width: 4.5rem; height: .95rem; border-radius: .5rem; }
.skel-title { width: 92%; height: 1.15rem; margin-bottom: .8rem; }
.skel-line  { width: 100%; height: .7rem; }
.skel-line.short { width: 60%; }
.skel-thumb { width: 96px; height: 96px; border-radius: .5rem; margin-bottom: 0; }
.skel-foot  { width: 4rem; height: .7rem; }
.skel-foot.sm { width: 2.5rem; }

/* Aramadan gelen vurgu (makale detayında eşleşen kelimeler) */
.article-content mark, h1 mark {
    background-color: #ffe066;
    color: inherit;
    padding: 0 .12em;
    border-radius: .15em;
}
[data-bs-theme="dark"] .article-content mark,
[data-bs-theme="dark"] h1 mark {
    background-color: #b59000;
    color: #fff;
}