/* blogeye ek stiller — yazı/sayfa içerik tipografisi (.prose) */

/* <picture> sarmalayıcısı layout'a karışmasın: img doğrudan ebeveynine otursun */
picture { display: contents; }

.prose { color: #334155; line-height: 1.75; font-size: 1.0625rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 {
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-weight: 800; letter-spacing: -0.02em; color: #0f172a;
    margin-top: 1.8em; margin-bottom: 0.6em; line-height: 1.25;
}
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1.1rem; }
.prose a { color: rgb(var(--c-primary-700, 194 49 24)); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: rgb(var(--c-primary-600, 230 58 28)); }
.prose strong { color: #0f172a; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.4em; }
.prose img { border-radius: 1rem; margin-top: 1.5em; margin-bottom: 1.5em; max-width: 100%; height: auto; }
.prose blockquote {
    border-left: 4px solid rgb(var(--c-primary-500, 255 64 31)); background: #fff7f5;
    padding: 0.9em 1.2em; border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic; color: #475569;
}
.prose code {
    background: #f1f5f9; color: rgb(var(--c-primary-700, 194 49 24)); border-radius: 0.375rem;
    padding: 0.15em 0.4em; font-size: 0.9em;
}
.prose pre {
    background: #0f172a; color: #e2e8f0; border-radius: 1rem;
    padding: 1.25em 1.5em; overflow-x: auto; font-size: 0.9em;
}
.prose pre code { background: transparent; color: inherit; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.prose th, .prose td { border: 1px solid #e2e8f0; padding: 0.6em 0.9em; text-align: left; }
.prose th { background: #f8fafc; font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2em 0; }
.prose iframe { max-width: 100%; border-radius: 1rem; }

/* ============================================================
   BİLEŞENLER — derlenmiş app.css'te olmayan yardımcılar burada
   ============================================================ */

/* Hero kart boyutları: lg'de 5, geniş ekranda 6 kart görünür (kompakt) */
@media (min-width: 1024px) {
    [data-card] { flex-basis: calc(20% - 0.8rem) !important; }
}
@media (min-width: 1440px) {
    [data-card] { flex-basis: calc(16.666% - 0.85rem) !important; }
}

/* Mobil alt menü için gövde boşluğu (yalnız mobil) */
@media (max-width: 1023.98px) {
    body { padding-bottom: 5.5rem; }
}

/* VIP kilit teaser'ı: kısaltılmış içerik + alta doğru solma */
.vip-teaser {
    max-height: 14rem; overflow: hidden; opacity: .65;
    pointer-events: none; user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
    mask-image: linear-gradient(to bottom, #000 30%, transparent);
}

/* ---- Mobil alt navigasyon (.bnav) ---- */
.bnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: rgba(15, 23, 42, .96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bnav-row {
    display: flex; align-items: flex-end; justify-content: space-around;
    max-width: 28rem; margin: 0 auto; padding: 0 .5rem;
}
.bnav-item {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .65rem .5rem; color: #cbd5e1; background: none; border: 0;
    font-size: .625rem; font-weight: 600; text-decoration: none; cursor: pointer;
    flex: 1 1 0; transition: color .15s;
}
.bnav-item:hover, .bnav-item.on { color: #fff; }
.bnav-item svg { width: 1.35rem; height: 1.35rem; }
.bnav-fab-wrap { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding-bottom: .4rem; background: none; border: 0; cursor: pointer; }
.bnav-fab {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
    margin-top: -1.4rem; border-radius: 9999px; color: #fff;
    background: rgb(var(--c-primary-500, 255 64 31));
    box-shadow: 0 8px 24px rgb(var(--c-primary-500, 255 64 31) / .45),
                0 0 0 5px rgba(15, 23, 42, .96);
    transition: transform .15s;
}
.bnav-fab svg { width: 1.5rem; height: 1.5rem; }
.bnav-fab-wrap.on .bnav-fab { transform: scale(1.08); }
.bnav-fab-label { margin-top: .15rem; font-size: .625rem; font-weight: 600; color: #cbd5e1; }
.bnav-fab-wrap.on .bnav-fab-label { color: #fff; }

/* Alt sayfa (bottom sheet) */
.bsheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bsheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    max-height: 72vh; overflow-y: auto;
    background: #fff; border-radius: 1.5rem 1.5rem 0 0;
    padding: 1.5rem 1.5rem 7rem;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
}
.bsheet-close {
    position: absolute; right: 1rem; top: 1rem; z-index: 2;
    display: grid; place-items: center; width: 2rem; height: 2rem;
    border: 0; border-radius: 9999px; cursor: pointer; color: #fff;
    background: rgb(var(--c-primary-500, 255 64 31));
}
.bsheet-close svg { width: 1rem; height: 1rem; }
.bsheet-title { margin: 0 0 1.25rem; text-align: center; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 1.25rem; font-weight: 800; color: #0f172a; }
.bsheet-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.bsheet-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem 1rem .35rem .35rem; border-radius: 9999px;
    color: #fff; font-size: .875rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: opacity .15s;
}
.bsheet-pill:hover { opacity: .9; }
.bsheet-pill .ic {
    display: grid; place-items: center; width: 2rem; height: 2rem;
    border-radius: 9999px; background: rgba(255, 255, 255, .25);
    font-size: .75rem; font-weight: 800;
}
/* Dark tema uyumu */
html.dark .bsheet { background: #101a30; }
html.dark .bsheet-title { color: #e6edf7; }

@media (min-width: 1024px) {
    .bnav, .bsheet, .bsheet-backdrop { display: none !important; }
}

/* ============================================================
   DARK TEMA — html.dark ile etkinleşir (toggle: header'daki ay/güneş)
   Derlenmiş Tailwind sınıflarının koyu karşılıkları
   ============================================================ */
html:not(.dark) .theme-sun { display: none; }
html.dark .theme-moon { display: none; }

html.dark { color-scheme: dark; }
html.dark body { background-color: #0b1120; color: #cbd5e1; }
html.dark .bg-white { background-color: #101a30 !important; }
html.dark .bg-white\/80 { background-color: rgba(16, 26, 48, .85) !important; }
html.dark .bg-ink-50,
html.dark .bg-ink-100,
html.dark .bg-ink-50\/40,
html.dark .bg-ink-50\/50,
html.dark .bg-ink-50\/60 { background-color: #0d1526 !important; }

html.dark .text-ink-950,
html.dark .text-ink-900,
html.dark .text-ink-800 { color: #e6edf7 !important; }
html.dark .text-ink-700,
html.dark .text-ink-600 { color: #aebdd3 !important; }
html.dark .text-ink-500 { color: #8296b3 !important; }

html.dark .border-ink-100,
html.dark .border-ink-200 { border-color: #1d2b47 !important; }
html.dark .divide-ink-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1d2b47 !important; }
html.dark .ring-ink-100,
html.dark .ring-ink-100\/50 { --tw-ring-color: #1d2b47 !important; }
html.dark .shadow-card,
html.dark .shadow-soft { box-shadow: 0 4px 24px rgba(0, 0, 0, .5) !important; }

html.dark .bg-primary-50 { background-color: rgba(255, 64, 31, .15) !important; }
html.dark .hover\:bg-ink-50:hover,
html.dark .hover\:bg-ink-100:hover { background-color: #18233c !important; }

/* Form elemanları */
html.dark input:not([type="checkbox"]):not([type="color"]),
html.dark textarea,
html.dark select { background-color: #0d1526 !important; border-color: #1d2b47 !important; color: #e6edf7 !important; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #5c6f8c; }

/* İçerik tipografisi */
html.dark .prose { color: #aebdd3; }
html.dark .prose h2, html.dark .prose h3, html.dark .prose h4,
html.dark .prose strong { color: #e6edf7; }
html.dark .prose code { background: #1d2b47; color: rgb(var(--c-primary-300, 255 156 139)); }
html.dark .prose blockquote { background: rgba(255, 64, 31, .08); color: #aebdd3; }
html.dark .prose th { background: #0d1526; }
html.dark .prose th, html.dark .prose td { border-color: #1d2b47; }
html.dark .prose hr { border-color: #1d2b47; }
html.dark .prose a { color: rgb(var(--c-primary-300, 255 156 139)); }

/* Butonlar */
html.dark .btn-ghost { color: #aebdd3; }