/* ── YEREL FONTLAR ─────────────────────────────────────────── */

/* EB Garamond — Variable Font (400-800 arası tüm weightler tek dosyada) */
@font-face {
    font-family: 'EB Garamond';
    src: url('/src/fonts/EBGaramond-VariableFont_wght.woff2') format('woff2 supports variations'),
         url('/src/fonts/EBGaramond-VariableFont_wght.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* EB Garamond Italic — static (variable italic yüklenemedi) */
@font-face {
    font-family: 'EB Garamond';
    src: url('/src/fonts/EBGaramond-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('/src/fonts/EBGaramond-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Marcellus SC — yerel */
@font-face {
    font-family: 'Marcellus SC';
    src: url('/src/fonts/MarcellusSC-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.h-font {
    font-family: 'Marcellus SC', serif;
}

.p-font {
    font-family: 'EB Garamond', serif;
}

body {
    background-color: #fffbfa;
}

.dot-leader {
    position: absolute;
    left: 100%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-bottom: 1px dotted #d1d5db;
    width: 100vw;
    pointer-events: none;
    user-select: none;
    margin-left: 4px;
}

#content p {
    word-break: break-word; 
    overflow-wrap: break-word;
    hyphens: auto; 
}

/* ── DARK MODE ─────────────────────────────────────────────── */

/* ============================================================
   DARK MODE — #0a0a0a / #fffbfa palette
   ============================================================

   Renk skalası:
   --dm-base      : #0a0a0a  → ana arka plan (body, section, header)
   --dm-elevated  : #111111  → hafif yükseltilmiş yüzey
   --dm-surface   : #1a1a1a  → kart, panel, drawer
   --dm-raised    : #222222  → input, hover yüzeyi
   --dm-border    : #2a2a2a  → varsayılan border
   --dm-border-hi : #3a3a3a  → focus / hover border
   --dm-text-1    : #fffbfa  → primary metin, başlık
   --dm-text-2    : #c8c8c8  → secondary metin, açıklama
   --dm-text-3    : #888888  → muted, placeholder, hint
   ============================================================ */

body.dark {
    background-color: #0a0a0a;
    color: #fffbfa;
}

/* ── Genel arka planlar ── */
body.dark .bg-\[\#fffbfa\],
body.dark header,
body.dark #desktopHeader,
body.dark #mobileTopBar,
body.dark #bottomNav,
body.dark #leftDrawerPanel,
body.dark #sidebarPanel,
body.dark #cookie-banner,
body.dark section {
    background-color: #0a0a0a !important;
}

/* ── Kart ve panel yüzeyleri ── */
body.dark .bg-\[\#f0e8e0\],
body.dark .bg-\[\#f5e9e0\],
body.dark .hover\:bg-\[\#f0e8e0\]:hover {
    background-color: #1a1a1a !important;
}

body.dark .bg-gray-100,
body.dark .bg-gray-200 {
    background-color: #1a1a1a !important;
    color: #fffbfa !important;
}

/* ── Yazı renkleri — primary ── */
body.dark .text-\[\#3d1700\],
body.dark .text-gray-600,
body.dark .text-gray-700,
body.dark .text-gray-800,
body.dark .text-gray-900,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark p,
body.dark a,
body.dark li {
    color: #fffbfa !important;
}

/* ── Yazı renkleri — secondary / muted ── */
body.dark .text-gray-400,
body.dark .text-gray-500 {
    color: #c8c8c8 !important;
}

body.dark .text-gray-300 {
    color: #888888 !important;
}

/* ── Border renkleri ── */
body.dark .border-\[\#e5e0db\],
body.dark .border-gray-200,
body.dark .border-gray-300 {
    border-color: #2a2a2a !important;
}

body.dark #desktopHeader .border-t,
body.dark #desktopHeader .border-b {
    border-color: #2a2a2a !important;
}

/* ── Butonlar (footer hariç, kn-entry-card hariç) ── */
body.dark :not(footer) .bg-\[\#3d1700\] {
    background-color: #fffbfa !important;
    color: #0a0a0a !important;
}

body.dark :not(footer) .bg-\[\#3d1700\]:hover,
body.dark :not(footer) .hover\:bg-\[\#5a2200\]:hover {
    background-color: #d4d4d4 !important;
    color: #0a0a0a !important;
}

body.dark :not(footer) .text-white {
    color: #0a0a0a !important;
}

/* ── Kimdir-Nedir kartları — daha yüksek özgüllükle geri al ── */
body.dark body.dark .kn-entry-card.bg-\[\#3d1700\],
body.dark body.dark .kn-entry-card.bg-\[\#3d1700\]:hover {
    background-color: #3d1700 !important;
    color: #fffbfa !important;
}

/* ── Footer ── */
body.dark footer {
    background-color: #000000 !important;
    color: #fffbfa !important;
}

body.dark footer .text-white,
body.dark footer h1,
body.dark footer p,
body.dark footer a {
    color: #fffbfa !important;
}

body.dark footer .text-gray-300 {
    color: #c8c8c8 !important;
}

/* Footer — yukarı kaydırma butonu kahverengi kalmasın */
body.dark footer button {
    background-color: #1a1a1a !important;
    color: #fffbfa !important;
}
body.dark footer button:hover {
    background-color: #2a2a2a !important;
    color: #fffbfa !important;
}

/* ── Logo (logo1.webp) — dark modda beyaz ── */
body.dark img[src*="logo1.webp"] {
    filter: brightness(0) invert(1) !important;
}

/* ── Anasayfa yazı kartları — yazar isim kutucuğu ── */
body.dark .post-author-box {
    background-color: rgba(0, 0, 0, 0.80) !important;
}
body.dark .post-author-box h1,
body.dark .post-author-box p {
    color: #fffbfa !important;
}

/* ── Abone Ol butonu — bg-[#3d1800] ── */
body.dark .bg-\[\#3d1800\] {
    background-color: #fffbfa !important;
    color: #0a0a0a !important;
}

/* ── Popüler kategoriler — yazı sayısı (text-orange-700) ── */
body.dark .text-orange-700 {
    color: #c8c8c8 !important;
}
body.dark .hover\:text-orange-700:hover {
    color: #fffbfa !important;
}

/* ── gonderi.php ── */

/* Kategori / breadcrumb linkleri */
body.dark .text-orange-800 {
    color: #c8c8c8 !important;
}
body.dark .hover\:text-orange-600:hover {
    color: #fffbfa !important;
}
body.dark svg.text-orange-800 {
    color: #c8c8c8 !important;
}

/* İçerik metni */
body.dark #content,
body.dark #contentf {
    color: #fffbfa !important;
}
body.dark #content * {
    color: inherit !important;
}

/* Yazar bölümü — sağ kolon */
body.dark .text-slate-900 {
    color: #fffbfa !important;
}
body.dark .lg\:bg-linear-to-r,
body.dark .lg\:from-gray-50 {
    background: transparent !important;
}

/* Yorum kutusu */
body.dark .bg-gray-50 {
    background-color: #111111 !important;
    color: #fffbfa !important;
}

/* Paylaşım menüsü */
body.dark .share-menu {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
body.dark .share-menu a,
body.dark .share-menu button {
    color: #fffbfa !important;
}
body.dark .share-menu a:hover,
body.dark .share-menu button:hover {
    background-color: #2a2a2a !important;
}

/* Yorum modalı */
body.dark #commentModal > div {
    background-color: #111111 !important;
    color: #fffbfa !important;
}
body.dark #commentText {
    background-color: #222222 !important;
    color: #fffbfa !important;
    border-color: #2a2a2a !important;
}

/* Etiket butonları (tag) */
body.dark .hover\:bg-\[\#3d1700\]:hover {
    background-color: #fffbfa !important;
    color: #0a0a0a !important;
}

/* ── Beğen / Yorum / Paylaş butonları ── */
/* .like-button gonderi.php inline <style>'da #3d1700 alıyor — !important ile geçiyoruz */
body.dark .like-button {
    background-color: #3a3a3a !important;
    color: #fffbfa !important;
}
body.dark .like-button:hover {
    background-color: #555555 !important;
    color: #fffbfa !important;
}
/* Beğenilmiş gönderi — #800000 kalsın */
body.dark .like-button.liked {
    background-color: #800000 !important;
    color: #fffbfa !important;
}

/* ── Input alanları ── */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark textarea {
    background-color: #222222 !important;
    color: #fffbfa !important;
    border-color: #2a2a2a !important;
}

body.dark input[type="text"]:focus,
body.dark input[type="email"]:focus,
body.dark input[type="password"]:focus,
body.dark textarea:focus {
    border-color: #3a3a3a !important;
    outline: none;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: #888888 !important;
}

/* ── Arama modalı ── */
body.dark #searchModal,
body.dark #searchModalContent {
    background-color: #0a0a0a !important;
}

/* ── Sol drawer ── */
body.dark #leftDrawerPanel {
    border-right: 1px solid #2a2a2a;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
}

body.dark #leftDrawerPanel [style*="border-bottom"],
body.dark #leftDrawerPanel [style*="border-top"] {
    border-color: #2a2a2a !important;
}

/* ── Dark mode toggle butonu (masaüstü — sol alt yapışkan) ── */
#darkModeToggle {
    display: none;
}

@media (min-width: 768px) {
    #darkModeToggle {
        display: flex;
        position: fixed;
        bottom: 28px;
        left: 24px;
        z-index: 8000;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background-color: #fffbfa;
        color: #0a0a0a;
        border: 1.5px solid #2a2a2a;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    body.dark #darkModeToggle {
        background-color: #1a1a1a;
        color: #fffbfa;
        border-color: #2a2a2a;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    }

    #darkModeToggle:hover {
        background-color: #d4d4d4;
        color: #0a0a0a;
    }

    body.dark #darkModeToggle:hover {
        background-color: #222222;
        color: #fffbfa;
        border-color: #3a3a3a;
    }
}

.likeBtn,
.soz-like-btn {
  position: relative;
  overflow: visible !important; /* parçacıklar taşabilsin */
}

.kalp-parcacik {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  line-height: 1;
  opacity: 1;
  z-index: 9999;
  animation: kalpFirla 700ms ease-out forwards;
}

@keyframes kalpFirla {
  0%   { opacity: 1;   transform: translate(var(--tx), var(--ty)) scale(0.4); }
  40%  { opacity: 1;   transform: translate(var(--tx), calc(var(--ty) - 28px)) scale(1.2); }
  100% { opacity: 0;   transform: translate(var(--tx), calc(var(--ty) - 56px)) scale(0.8); }
}

.author-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3d1700;
    flex-shrink: 0;
}

/* ── DARK MODE — Kimdir? Nedir? ────────────────────────────── */

/* Paylaş butonu — kn_icerik.php inline <style>'da #3d1700 tanımlı */
body.dark .kn-share-btn {
    background-color: #3a3a3a !important;
    color: #fffbfa !important;
}
body.dark .kn-share-btn:hover {
    background-color: #555555 !important;
}

/* İçerik h2/h3 başlıkları — inline style'da #3d1700 */
body.dark #content h2,
body.dark #contentd h2,
body.dark #content h3,
body.dark #contentd h3 {
    color: #fffbfa !important;
    border-bottom-color: #2a2a2a !important;
}

/* Okuma çubuğu — koyu modda daha görünür */
body.dark #okuma-cubugu {
    background-color: #fffbfa !important;
}

/* Sayfalama butonları */
body.dark .hover\:bg-\[\#3d1700\]:hover {
    background-color: #fffbfa !important;
    color: #0a0a0a !important;
}
body.dark .border-\[\#3d1700\]\/20 {
    border-color: #3a3a3a !important;
}
/* Aktif sayfa butonu */
body.dark .bg-\[\#3d1700\].pointer-events-none {
    background-color: #fffbfa !important;
    color: #0a0a0a !important;
    border-color: #fffbfa !important;
}

/* Hero slider — ok butonları zaten rgba koyu, karanlıkta biraz daha belirgin */
body.dark .bg-\[rgba\(61\,23\,0\,0\.55\)\] {
    background-color: rgba(255, 251, 250, 0.15) !important;
}
body.dark .hover\:bg-\[rgba\(61\,23\,0\,0\.85\)\]:hover {
    background-color: rgba(255, 251, 250, 0.30) !important;
}

/* kn_cat aside bölümü */
body.dark .bg-\[\#3d1700\].pointer-events-none,
body.dark a.bg-\[\#3d1700\] {
    background-color: #fffbfa !important;
    color: #0a0a0a !important;
}


/* ── DARK MODE — search_modal.php ──────────────────────────── */

body.dark #hs-custom-backdrop-modal > div > div {
    background-color: #111111 !important;
    border-color: #2a2a2a !important;
}

/* ── DARK MODE — member.php ────────────────────────────────── */

body.dark .dash-card {
    background: #111111 !important;
    border-color: #2a2a2a !important;
}
body.dark .stat-item {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}
body.dark .stat-num  { color: #fffbfa !important; }
body.dark .stat-lbl  { color: #888888 !important; }
body.dark .tab-nav   { border-bottom-color: #2a2a2a !important; }
body.dark .tab-btn   { color: #888888 !important; }
body.dark .tab-btn.active {
    color: #fffbfa !important;
    border-bottom-color: #fffbfa !important;
}
body.dark .list-item {
    border-bottom-color: #2a2a2a !important;
}
body.dark .list-item .li-title { color: #fffbfa !important; }
body.dark .list-item .li-meta  { color: #888888 !important; }
body.dark .soz-item {
    background: #1a1a1a !important;
    border-left-color: #3a3a3a !important;
    color: #fffbfa !important;
}
body.dark .ph-name  { color: #fffbfa !important; }
body.dark .ph-uname { color: #888888 !important; }
body.dark .ph-bio   { color: #c8c8c8 !important; }
body.dark .social-links a       { color: #888888 !important; }
body.dark .social-links a:hover { color: #fffbfa !important; }
body.dark .btn-ghost {
    border-color: #3a3a3a !important;
    color: #c8c8c8 !important;
}

/* ── DARK MODE — Sözden ────────────────────────────────────── */

/* sozden.php — mention, gonderi ref, autocomplete */
body.dark .soz-mention { color: #c8c8c8 !important; }
body.dark .soz-gonderi-ref {
    background: #1a1a1a !important;
    border-left-color: #3a3a3a !important;
    color: #fffbfa !important;
}
body.dark #acDropdown {
    background: #111111 !important;
    border-color: #2a2a2a !important;
}
body.dark #acDropdown .ac-item {
    border-bottom-color: #2a2a2a !important;
}
body.dark #acDropdown .ac-item:hover,
body.dark #acDropdown .ac-item.selected {
    background: #1a1a1a !important;
}
body.dark #acDropdown .ac-item .ac-main { color: #fffbfa !important; }
body.dark #acDropdown .ac-item .ac-sub  { color: #888888 !important; }

/* sozden_bildirimler.php + sozden_search.php — bg-white kartlar */
body.dark .bg-white {
    background-color: #111111 !important;
}

/* sozden_profile.php — toggle slider */
body.dark .toggle-slider { background: #3a3a3a !important; }
body.dark .toggle-wrap input:checked + .toggle-slider { background: #fffbfa !important; }
body.dark .toggle-slider::before { background: #0a0a0a !important; }

/* sozden_profile.php — dash-card-hd */
body.dark .dash-card-hd h2 { color: #fffbfa !important; }

/* ── DARK MODE — sozden.php söz kartları ───────────────────── */

/* Kendi kartı — bg-[#3d1700] genel kuraldan beyaza dönüyor, geri al */
body.dark .soz-card.bg-\[\#3d1700\] {
    background-color: #2a1a0a !important;
    color: #fffbfa !important;
}
body.dark .soz-card.bg-\[\#3d1700\]:hover {
    background-color: #3a2010 !important;
}

/* Diğer kartlar — bg-white + kahverengi sol border */
body.dark .soz-card.bg-white {
    background-color: #1a1a1a !important;
    color: #fffbfa !important;
}
body.dark .soz-card.border-\[\#3d1700\] {
    border-left-color: #3a3a3a !important;
}
body.dark .soz-card.bg-white:hover {
    background-color: #222222 !important;
    color: #fffbfa !important;
}

/* Gonderi önizleme kutusu */
body.dark .soz-card .bg-\[\#fffbf5\] {
    background-color: #111111 !important;
}
body.dark .soz-card .border-\[\#3d1700\] {
    border-color: #3a3a3a !important;
}

/* ── DARK MODE — soz.php ───────────────────────────────────── */

/* Ana söz kartı — bg-[#3d1700] genel kuraldan beyaza dönüyor */
body.dark .bg-\[\#3d1700\].rounded-lg.shadow-lg {
    background-color: #2a1a0a !important;
    color: #fffbfa !important;
}

/* Yorum/yanıt kartları — bg-white */
body.dark .soz-card.bg-white {
    background-color: #1a1a1a !important;
    color: #fffbfa !important;
}
body.dark .soz-card.bg-white:hover {
    background-color: #222222 !important;
}

/* Sol dikey border çizgisi */
body.dark .border-l-2.border-\[\#3d1700\] {
    border-left-color: #3a3a3a !important;
}

/* ── Sol drawer alt panel ── */
body.dark #leftDrawerPanel > div:last-child {
    background-color: #0a0a0a !important;
    border-top-color: #2a2a2a !important;
}
/* ── DARK MODE — Giriş / Kayıt / Doğrulama sayfaları ──────── */

/* .bgc inline style ile #fffbfa alıyor */
body.dark .bgc {
    background-color: #0a0a0a !important;
    color: #fffbfa !important;
}

/* Form wrapper div'leri */
body.dark div.bgc {
    background-color: #0a0a0a !important;
}

/* Form kutusu */
body.dark form.bgc {
    background-color: #111111 !important;
    border-color: #2a2a2a !important;
}

/* Input'lar — inline style ile border:1px solid #3d1700 var */
body.dark input.bgc {
    background-color: #1a1a1a !important;
    color: #fffbfa !important;
    border-color: #3a3a3a !important;
}

/* Submit buton — inline style ile background:#3d1700 */
body.dark form button[type="submit"] {
    background-color: #fffbfa !important;
    color: #0a0a0a !important;
    border-color: #2a2a2a !important;
}

/* Şifremi unuttum linki inline style rengi */
body.dark form a[style*="color:#3d1700"] {
    color: #c8c8c8 !important;
}

/* ── DARK MODE — Push Bildirim Modalı ──────────────────────── */

body.dark #pushPermModal > div {
    background: #111111 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}

/* İkon arka planı */
body.dark #pushPermModal > div > div:first-child {
    background: #1a1a1a !important;
}

/* Başlık */
body.dark #pushPermModal h2 {
    color: #fffbfa !important;
}

/* Açıklama metni */
body.dark #pushPermModal p {
    color: #c8c8c8 !important;
}

/* "Evet" butonu */
body.dark #pushPermAllow {
    background: #fffbfa !important;
    color: #0a0a0a !important;
}

/* "Şimdi Değil" butonu */
body.dark #pushPermDeny {
    color: #c8c8c8 !important;
    border-color: #3a3a3a !important;
}

/* Durum mesajı */
body.dark #pushPermStatus {
    color: #888888 !important;
}

/* ── DARK MODE — sozden_profile.php düzenleme modalı ──────── */

body.dark #editModal {
    background: rgba(0, 0, 0, 0.7) !important;
}

body.dark #editModalPanel {
    background: #111111 !important;
    color: #fffbfa !important;
}

/* Başlık ve kapat butonu */
body.dark #editModalPanel span[style*="color:#3d1700"] {
    color: #fffbfa !important;
}
body.dark #editModalPanel button[style*="color:#9b7d66"] {
    color: #c8c8c8 !important;
}

/* Form label'lar */
body.dark .edit-form label {
    color: #888888 !important;
}

/* Input ve textarea */
body.dark .edit-form input,
body.dark .edit-form textarea {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #fffbfa !important;
}
body.dark .edit-form input:focus,
body.dark .edit-form textarea:focus {
    border-color: #3a3a3a !important;
}

/* @ prefix span'ları */
body.dark .edit-form span[style*="color:#9b7d66"] {
    color: #888888 !important;
}

/* linkedin.com/in/ prefix */
body.dark .edit-form div > span {
    color: #888888 !important;
}

/* HR ayraç */
body.dark .edit-form hr {
    border-top-color: #2a2a2a !important;
}

/* Kaydet butonu */
body.dark .btn-primary {
    background: #fffbfa !important;
    color: #0a0a0a !important;
}
body.dark .btn-primary:hover {
    background: #d4d4d4 !important;
}

/* Başarı / hata mesajları */
body.dark #editModalPanel div[style*="background:#e8f5e9"] {
    background: #0d2e12 !important;
    border-color: #2a5c32 !important;
    color: #a5d6a7 !important;
}
body.dark #editModalPanel div[style*="background:#fdecea"] {
    background: #2e0d0d !important;
    border-color: #5c2a2a !important;
    color: #f5a5a5 !important;
}

/* Push bildirim satırı */
body.dark .push-row div[style*="color:#3d1700"] {
    color: #fffbfa !important;
}
body.dark .push-row div[style*="color:#9b7d66"] {
    color: #888888 !important;
}
body.dark #pushStatus {
    color: #888888 !important;
}

/* Hesap butonları */
body.dark .btn-ghost {
    border-color: #3a3a3a !important;
    color: #c8c8c8 !important;
}
body.dark .btn-ghost[style*="color:#c0392b"] {
    color: #f5a5a5 !important;
    border-color: #5c2a2a !important;
}