/* Temel Sıfırlamalar */
html, body {
    margin: 0;
    padding: 0;
}

/* Scrollbar Gizleme Yardımcısı */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Sade, teknik ve temiz kaydırma çubuğu */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.custom-container {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

/* Site Genelinde 0px Köşe Yuvarlama (Sharp / Flat Border Radius Standartları) */
.rounded,
.rounded-xs,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
[class*="rounded-t-"],
[class*="rounded-b-"],
[class*="rounded-l-"],
[class*="rounded-r-"],
[class*="rounded-tl-"],
[class*="rounded-tr-"],
[class*="rounded-bl-"],
[class*="rounded-br-"],
input,
textarea,
select,
button:not(.rounded-full):not(.theme-segmented-switch):not(.theme-segment-item),
.prose-custom code,
.card {
    border-radius: 0px !important;
}

/* Dairesel avatarlar, bildirim rozetleri ve durum noktaları */
.rounded-full,
.rounded-full > img,
img.rounded-full {
    border-radius: 9999px !important;
}

/* Sabit Üst Header ve Navigasyon Çubuğu */
header.site-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

/* Lucide ikon hizalama & Titreme/Göz Kırpma (Layout Shift / FOUC) Önleyici Sabit Boyutlar */
i[data-lucide],
svg.lucide,
[data-lucide] {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    box-sizing: border-box;
    font-style: normal;
    line-height: 1;
}

/* JavaScript ve Tailwind derlemesi beklenmeden ikon alanını sabit tutan kurallar */
i[data-lucide], svg.lucide { width: 1rem; height: 1rem; }
i[data-lucide].w-3, svg.lucide.w-3 { width: 0.75rem; height: 0.75rem; }
i[data-lucide].w-3\.5, svg.lucide.w-3\.5 { width: 0.875rem; height: 0.875rem; }
i[data-lucide].w-4, svg.lucide.w-4 { width: 1rem; height: 1rem; }
i[data-lucide].w-4\.5, svg.lucide.w-4\.5 { width: 1.125rem; height: 1.125rem; }
i[data-lucide].w-5, svg.lucide.w-5 { width: 1.25rem; height: 1.25rem; }
i[data-lucide].w-6, svg.lucide.w-6 { width: 1.5rem; height: 1.5rem; }
i[data-lucide].w-7, svg.lucide.w-7 { width: 1.75rem; height: 1.75rem; }
i[data-lucide].w-8, svg.lucide.w-8 { width: 2rem; height: 2rem; }
i[data-lucide].w-10, svg.lucide.w-10 { width: 2.5rem; height: 2.5rem; }
i[data-lucide].w-12, svg.lucide.w-12 { width: 3rem; height: 3rem; }

i[data-lucide].h-3, svg.lucide.h-3 { height: 0.75rem; }
i[data-lucide].h-3\.5, svg.lucide.h-3\.5 { height: 0.875rem; }
i[data-lucide].h-4, svg.lucide.h-4 { height: 1rem; }
i[data-lucide].h-4\.5, svg.lucide.h-4\.5 { height: 1.125rem; }
i[data-lucide].h-5, svg.lucide.h-5 { height: 1.25rem; }
i[data-lucide].h-6, svg.lucide.h-6 { height: 1.5rem; }
i[data-lucide].h-7, svg.lucide.h-7 { height: 1.75rem; }
i[data-lucide].h-8, svg.lucide.h-8 { height: 2rem; }
i[data-lucide].h-10, svg.lucide.h-10 { height: 2.5rem; }
i[data-lucide].h-12, svg.lucide.h-12 { height: 3rem; }

/* Makale ve Markdown İçerik Formatı */
.prose-custom h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.prose-custom h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 1.5rem;
    margin-bottom: 0.625rem;
    line-height: 1.4;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #f1f5f9;
}
.prose-custom h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin-top: 1.125rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.prose-custom h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-top: 0.875rem;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}
.prose-custom p {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 0.75rem;
}
.prose-custom p:last-child {
    margin-bottom: 0;
}
.prose-custom ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: #334155;
}
.prose-custom ul:last-child {
    margin-bottom: 0;
}
.prose-custom ol {
    list-style-type: decimal;
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: #334155;
}
.prose-custom ol:last-child {
    margin-bottom: 0;
}
.prose-custom li {
    margin-bottom: 0.25rem;
}
.prose-custom li:last-child {
    margin-bottom: 0;
}
.prose-custom a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose-custom a:hover {
    color: #1d4ed8;
}
.prose-custom blockquote,
blockquote.bb-quote,
blockquote {
    margin: 0.875rem 0;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-left: 4px solid #3b82f6;
    border-radius: 0px;
    color: #334155;
    font-style: italic;
    font-size: 0.8125rem;
    line-height: 1.6;
}
.prose-custom pre,
pre,
.ql-syntax,
.ql-code-block-container {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    padding: 0.875rem 1rem;
    border-radius: 0px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    overflow-x: auto;
    margin: 0.875rem 0;
    line-height: 1.6;
    border: 1px solid #1e293b;
}
.ql-code-block {
    white-space: pre;
    font-family: 'JetBrains Mono', monospace;
    color: #f8fafc;
}
.bb-code-wrapper pre {
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0.875rem 1rem !important;
}
.prose-custom code:not(pre code):not(.bb-code-wrapper code) {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    background-color: #f1f5f9;
    padding: 0.15rem 0.35rem;
    border-radius: 0px;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

/* Avatar ve Profil Görselleri Sabit Boyutlandırma Güvenlik Kuralları */
img.rounded-full,
div.rounded-full > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

/* Kenar çubuğu ve yorum listesi avatar sınırları */
.avatar-box-xs { width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem !important; min-height: 1.25rem !important; }
.avatar-box-sm { width: 1.5rem !important; height: 1.5rem !important; min-width: 1.5rem !important; min-height: 1.5rem !important; }
.avatar-box-md { width: 1.75rem !important; height: 1.75rem !important; min-width: 1.75rem !important; min-height: 1.75rem !important; }

/* Spoiler / Açılır-Kapanır Kutu Başlık Ok Sıfırlama */
details.spoiler-box summary {
    list-style: none !important;
}
details.spoiler-box summary::-webkit-details-marker {
    display: none !important;
}

/* İç Linkleme & Tavsiye Kartı Sıfırlamaları */
.tavsiye-kart-wrapper a,
.prose-custom .tavsiye-kart-wrapper a {
    text-decoration: none !important;
}
.tavsiye-kart-wrapper a:hover,
.prose-custom .tavsiye-kart-wrapper a:hover {
    text-decoration: none !important;
}
/* Klavye Tuşu (KBD) Rozet Stilleri */
kbd,
.bb-kbd,
.prose-custom kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.725rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    margin: 0 0.18rem;
    color: #0f172a;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    border-bottom: 2px solid #94a3b8;
    border-radius: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    line-height: 1.25;
    vertical-align: baseline;
    user-select: none;
    letter-spacing: -0.01em;
}

html.dark kbd,
html.dark .bb-kbd,
html.dark .prose-custom kbd {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #f8fafc;
    border-color: #334155;
    border-bottom-color: #475569;
}

/* ==========================================================================
   Modern & Hafif Tooltip Sistemi (CSS Data-Tooltip)
   ========================================================================== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(-3px) scale(0.96);
    background-color: #0f172a;
    color: #f8fafc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    white-space: normal;
    width: max-content;
    max-width: 320px;
    padding: 5px 9px;
    border-radius: 0px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22), 0 1px 3px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.15s;
    z-index: 9999;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(-3px);
    border-width: 0 4.5px 5.5px 4.5px;
    border-style: solid;
    border-color: transparent transparent #0f172a transparent;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.15s;
    z-index: 9999;
}

@media (hover: hover) and (pointer: fine) {
    [data-tooltip]:hover::before,
    [data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
        transition-delay: 0.08s;
    }
}

[data-tooltip]:active::before,
[data-tooltip]:active::after {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* Pozisyon: Üst (Top) */
[data-tooltip-pos="top"]::before {
    top: auto;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(3px) scale(0.96);
}
[data-tooltip-pos="top"]::after {
    top: auto;
    bottom: calc(100% + 2px);
    border-width: 5.5px 4.5px 0 4.5px;
    border-color: #0f172a transparent transparent transparent;
    transform: translateX(-50%) translateY(3px);
}
@media (hover: hover) and (pointer: fine) {
    [data-tooltip-pos="top"]:hover::before,
    [data-tooltip-pos="top"]:hover::after {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Pozisyon: Üst-Başlangıç (Top-Start: Sola Hizalı, Sağa Açılan) */
[data-tooltip-pos="top-start"]::before,
[data-tooltip-pos="top-right"]::before {
    top: auto;
    bottom: calc(100% + 7px);
    left: 0;
    right: auto;
    transform: translateY(3px) scale(0.96);
}
[data-tooltip-pos="top-start"]::after,
[data-tooltip-pos="top-right"]::after {
    top: auto;
    bottom: calc(100% + 2px);
    left: 10px;
    right: auto;
    border-width: 5.5px 4.5px 0 4.5px;
    border-color: #0f172a transparent transparent transparent;
    transform: translateY(3px);
}
@media (hover: hover) and (pointer: fine) {
    [data-tooltip-pos="top-start"]:hover::before,
    [data-tooltip-pos="top-start"]:hover::after,
    [data-tooltip-pos="top-right"]:hover::before,
    [data-tooltip-pos="top-right"]:hover::after {
        transform: translateY(0) scale(1);
    }
}

/* Pozisyon: Alt-Başlangıç (Bottom-Start: Sola Hizalı, Sağa Açılan) */
[data-tooltip-pos="bottom-start"]::before {
    top: calc(100% + 7px);
    bottom: auto;
    left: 0;
    right: auto;
    transform: translateY(-3px) scale(0.96);
}
[data-tooltip-pos="bottom-start"]::after {
    top: calc(100% + 2px);
    bottom: auto;
    left: 10px;
    right: auto;
    border-width: 0 4.5px 5.5px 4.5px;
    border-color: transparent transparent #0f172a transparent;
    transform: translateY(-3px);
}
@media (hover: hover) and (pointer: fine) {
    [data-tooltip-pos="bottom-start"]:hover::before,
    [data-tooltip-pos="bottom-start"]:hover::after {
        transform: translateY(0) scale(1);
    }
}

/* Pozisyon: Sol (Left) */
[data-tooltip-pos="left"]::before {
    top: 50%;
    bottom: auto;
    left: auto;
    right: calc(100% + 7px);
    transform: translateY(-50%) translateX(3px) scale(0.96);
}
[data-tooltip-pos="left"]::after {
    top: 50%;
    bottom: auto;
    left: auto;
    right: calc(100% + 2px);
    border-width: 4.5px 0 4.5px 5.5px;
    border-color: transparent transparent transparent #0f172a;
    transform: translateY(-50%) translateX(3px);
}
@media (hover: hover) and (pointer: fine) {
    [data-tooltip-pos="left"]:hover::before,
    [data-tooltip-pos="left"]:hover::after {
        transform: translateY(-50%) translateX(0) scale(1);
    }
}

/* Pozisyon: Sağ (Right) */
[data-tooltip-pos="right"]::before {
    top: 50%;
    bottom: auto;
    left: calc(100% + 7px);
    right: auto;
    transform: translateY(-50%) translateX(-3px) scale(0.96);
}
[data-tooltip-pos="right"]::after {
    top: 50%;
    bottom: auto;
    left: calc(100% + 2px);
    right: auto;
    border-width: 4.5px 5.5px 4.5px 0;
    border-color: transparent #0f172a transparent transparent;
    transform: translateY(-50%) translateX(-3px);
}
@media (hover: hover) and (pointer: fine) {
    [data-tooltip-pos="right"]:hover::before,
    [data-tooltip-pos="right"]:hover::after {
        transform: translateY(-50%) translateX(0) scale(1);
    }
}

/* ==========================================================================
   Karanlık Mod (Dark Mode) Renk Paleti (Siyah & Koyu Nötr Gri)
   ========================================================================== */

/* Temel Sayfa Gövdesi (Ultra Koyu Siyah) */
html.dark,
html.dark body {
    background-color: #0c0c0e !important;
    color: #d4d4d8 !important;
}

/* Header & Üst Navigasyon Çubukları */
html.dark header.site-header {
    background-color: #121215 !important;
    border-color: #27272a !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.6) !important;
}

/* Ana Kartlar, Paneller & Kapsayıcılar */
html.dark .bg-white,
html.dark .bg-white\/95,
html.dark .bg-white\/90,
html.dark .bg-white\/80,
html.dark .bg-white\/70,
html.dark .bg-white\/60,
html.dark .bg-white\/50,
html.dark .bg-white\/40,
html.dark .bg-white\/30,
html.dark .bg-white\/20,
html.dark .bg-white\/10 {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

/* İkincil Alanlar, Tablolar, Satır Öğeleri & Alt Kutular */
html.dark .bg-slate-50,
html.dark .bg-slate-50\/95,
html.dark .bg-slate-50\/90,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/30,
html.dark .bg-slate-50\/20,
html.dark .bg-slate-50\/10 {
    background-color: #1f1f23 !important;
    border-color: #27272a !important;
}

html.dark .bg-slate-100,
html.dark .bg-slate-100\/90,
html.dark .bg-slate-100\/80,
html.dark .bg-slate-100\/70,
html.dark .bg-slate-100\/50 {
    background-color: #242429 !important;
    border-color: #2e2e33 !important;
}

html.dark .bg-slate-200 {
    background-color: #2e2e33 !important;
    border-color: #3f3f46 !important;
    color: #e4e4e7 !important;
}

/* Kenarlıklar & Çizgiler */
html.dark .border-slate-100,
html.dark .border-slate-150,
html.dark .border-slate-200,
html.dark .border-slate-200\/90,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/60,
html.dark .border-slate-300,
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #27272a !important;
}

/* Tipografi: Başlıklar ve Metinler */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .text-slate-900,
html.dark .text-slate-950,
html.dark .text-slate-800 {
    color: #ffffff !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: #d4d4d8 !important;
}

html.dark .text-slate-500 {
    color: #a1a1aa !important;
}

html.dark .text-slate-400 {
    color: #71717a !important;
}

html.dark .text-slate-300 {
    color: #52525b !important;
}

/* Form Elemanları (Arama Kutusu, Input, Textarea, Select) */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select {
    background-color: #121215 !important;
    border-color: #27272a !important;
    color: #ffffff !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    background-color: #16161a !important;
    border-color: #3b82f6 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #71717a !important;
}

/* Açılır Pencereler & Menüler (Dropdowns & Popovers) */
html.dark #notificationsDropdown,
html.dark #messagesDropdown,
html.dark #profileDropdown,
html.dark [id$="Dropdown"],
html.dark [id$="Menu"] {
    background-color: #161618 !important;
    border-color: #27272a !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8) !important;
}

/* Modallar & Diyalog Pencereleri */
@keyframes modalBackdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalContentPopIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-backdrop-animate,
#downloadModal:not(.hidden),
#requestModal:not(.hidden),
#authModal:not(.hidden),
#confirmModal:not(.hidden),
#vipBilgiModal:not(.hidden) {
    animation: modalBackdropFadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-animate,
#downloadModalContent,
#authModal > div,
#requestModal > div,
#confirmModal > div,
#vipBilgiModal > div {
    animation: modalContentPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

/* Google Buton Konteyneri Titreme Önleyici Sabit Boyut */
#googleAuthContainer {
    min-height: 40px;
    height: 40px;
    overflow: hidden;
}

html.dark #authModal .bg-white,
html.dark #downloadModal .bg-white,
html.dark #requestModal .bg-white,
html.dark #confirmModal .bg-white,
html.dark #sorunBildirModal .bg-white,
html.dark #vipBilgiModal .bg-white,
html.dark #imageLightbox .bg-white {
    background-color: #161618 !important;
    border-color: #27272a !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.85) !important;
}

/* Hover & Etkileşim Durumları */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-50\/90:hover,
html.dark .hover\:bg-slate-50\/80:hover {
    background-color: #222226 !important;
}

html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-100\/80:hover {
    background-color: #27272c !important;
}

html.dark .hover\:bg-slate-200:hover {
    background-color: #303036 !important;
}

html.dark .hover\:border-slate-100:hover,
html.dark .hover\:border-slate-150:hover,
html.dark .hover\:border-slate-200:hover,
html.dark .hover\:border-slate-300:hover,
html.dark .hover\:border-slate-400:hover {
    border-color: #3f3f46 !important;
}

/* Sidebar Kategori Butonları & Sayı Rozetleri (Koyu Mod) */
html.dark .sidebar-cat-btn {
    color: #a1a1aa !important;
}
html.dark .sidebar-cat-btn:hover {
    background-color: #222226 !important;
    color: #ffffff !important;
}
html.dark .sidebar-cat-btn.bg-slate-100 {
    background-color: #27272a !important;
    color: #ffffff !important;
}
html.dark .sidebar-cat-btn .cat-count-badge {
    background-color: #121215 !important;
    border-color: #27272a !important;
    color: #a1a1aa !important;
}
html.dark .sidebar-cat-btn.bg-slate-100 .cat-count-badge {
    background-color: #172554 !important;
    color: #93c5fd !important;
    border-color: #1e40af !important;
}
html.dark .sidebar-cat-btn:hover .cat-count-badge {
    background-color: #1f1f23 !important;
    color: #ffffff !important;
    border-color: #3f3f46 !important;
}

/* ==========================================================================
   Tavsiye / Alternatif / İlgili Yazılım Kartları (Koyu Mod)
   ========================================================================== */
html.dark .tavsiye-kart-wrapper a {
    background: #18181b !important;
    border-color: #27272a !important;
    color: #ffffff !important;
}

html.dark .tavsiye-kart-wrapper a:hover {
    background: #1f1f23 !important;
    border-color: #3b82f6 !important;
}

html.dark .tavsiye-kart-wrapper .text-slate-900 {
    color: #ffffff !important;
}

html.dark .tavsiye-kart-wrapper .text-slate-500 {
    color: #a1a1aa !important;
}

html.dark .tavsiye-kart-wrapper span.font-mono {
    background-color: #27272a !important;
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

html.dark .tavsiye-kart-wrapper div.self-end,
html.dark .tavsiye-kart-wrapper div.sm\:self-center {
    background-color: #27272a !important;
    color: #93c5fd !important;
    border-color: #3f3f46 !important;
}

html.dark .tavsiye-kart-wrapper a:hover div.self-end,
html.dark .tavsiye-kart-wrapper a:hover div.sm\:self-center {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* ==========================================================================
   Bilgi & Uyarı Kutuları (Callouts / Alerts) (Koyu Mod)
   ========================================================================== */
html.dark .callout-box {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

html.dark .bg-blue-50,
html.dark .bg-blue-50\/70,
html.dark .bg-blue-50\/80,
html.dark .bg-blue-50\/50,
html.dark .bg-blue-50\/40 {
    background-color: #121b2b !important;
    border-color: #1e3a5f !important;
    color: #bfdbfe !important;
}

html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/70,
html.dark .bg-emerald-50\/80,
html.dark .bg-emerald-50\/50,
html.dark .bg-emerald-50\/40 {
    background-color: #0c231e !important;
    border-color: #134e40 !important;
    color: #a7f3d0 !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-50\/70,
html.dark .bg-amber-50\/80,
html.dark .bg-amber-50\/50,
html.dark .bg-amber-50\/40 {
    background-color: #2b1d0c !important;
    border-color: #613b10 !important;
    color: #fde68a !important;
}

html.dark .bg-rose-50,
html.dark .bg-rose-50\/70,
html.dark .bg-rose-50\/80,
html.dark .bg-rose-50\/50,
html.dark .bg-rose-50\/40,
html.dark .bg-red-50 {
    background-color: #2b0d14 !important;
    border-color: #5c1825 !important;
    color: #fecdd3 !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-50\/70,
html.dark .bg-purple-50\/50 {
    background-color: #240c2e !important;
    border-color: #4a155e !important;
    color: #e9d5ff !important;
}

/* Callout İçi Başlık & Metin Renkleri */
html.dark .text-blue-950,
html.dark .text-blue-900,
html.dark .text-blue-800 {
    color: #bfdbfe !important;
}

html.dark .text-emerald-950,
html.dark .text-emerald-900,
html.dark .text-emerald-800 {
    color: #a7f3d0 !important;
}

html.dark .text-amber-950,
html.dark .text-amber-900,
html.dark .text-amber-800 {
    color: #fde68a !important;
}

html.dark .text-rose-950,
html.dark .text-rose-900,
html.dark .text-rose-800 {
    color: #fecdd3 !important;
}

/* Callout İkon Kutuları & Renkli Rozetler */
html.dark .bg-blue-100 {
    background-color: #1e293b !important;
    color: #60a5fa !important;
    border-color: #2563eb !important;
}

html.dark .bg-emerald-100 {
    background-color: #064e3b !important;
    color: #34d399 !important;
    border-color: #059669 !important;
}

html.dark .bg-amber-100 {
    background-color: #451a03 !important;
    color: #fbbf24 !important;
    border-color: #d97706 !important;
}

html.dark .bg-purple-100 {
    background-color: #3b0764 !important;
    color: #c084fc !important;
    border-color: #7e22ce !important;
}

html.dark .bg-rose-100,
html.dark .bg-red-100 {
    background-color: #4c0519 !important;
    color: #fb7185 !important;
    border-color: #e11d48 !important;
}

/* Avantajlar & Dezavantajlar Koyu Mod */
html.dark .bg-emerald-50\/50 ul li,
html.dark .bg-rose-50\/40 ul li {
    background-color: #18181b !important;
    border-color: #27272a !important;
    color: #d4d4d8 !important;
}

/* ==========================================================================
   İçerik & Makale Formatı (.prose-custom)
   ========================================================================== */
html.dark .prose-custom {
    color: #d4d4d8 !important;
}

html.dark .prose-custom h1,
html.dark .prose-custom h2,
html.dark .prose-custom h3,
html.dark .prose-custom h4 {
    color: #ffffff !important;
    border-bottom-color: #27272a !important;
}

html.dark .prose-custom p,
html.dark .prose-custom ul,
html.dark .prose-custom ol,
html.dark .prose-custom li {
    color: #d4d4d8 !important;
}

html.dark .prose-custom blockquote {
    background-color: #18181b !important;
    border-left-color: #3b82f6 !important;
    color: #a1a1aa !important;
}

html.dark .prose-custom pre {
    background-color: #0d0d0f !important;
    border-color: #27272a !important;
}

html.dark .prose-custom code:not(pre code) {
    background-color: #242429 !important;
    border-color: #2e2e33 !important;
    color: #93c5fd !important;
}

html.dark .prose-custom table {
    border-color: #27272a !important;
}

html.dark .prose-custom th {
    background-color: #222226 !important;
    color: #ffffff !important;
    border-color: #27272a !important;
}

html.dark .prose-custom td {
    border-color: #27272a !important;
}

/* Footer & Bilgi Alanı */
html.dark footer {
    background-color: #101012 !important;
    border-color: #27272a !important;
    color: #71717a !important;
}

html.dark footer a {
    color: #a1a1aa !important;
}

html.dark footer a:hover {
    color: #ffffff !important;
}

/* Scrollbar & Tooltip Koyu Mod Ayarı */
html.dark ::-webkit-scrollbar-thumb {
    background: #27272a;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

html.dark [data-tooltip]::before {
    background-color: #27272a;
    border-color: #3f3f46;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

html.dark [data-tooltip]::after {
    border-color: transparent transparent #27272a transparent;
}

html.dark [data-tooltip-pos="top"]::after {
    border-color: #27272a transparent transparent transparent;
}

html.dark [data-tooltip-pos="left"]::after {
    border-color: transparent transparent transparent #27272a;
}

html.dark [data-tooltip-pos="right"]::after {
    border-color: transparent #27272a transparent transparent;
}

/* ==========================================================================
   macOS & Raycast Tarzı Çift İkonlu Kapsül (Segmented Theme Switch)
   ========================================================================== */
.theme-segmented-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #f1f5f9; /* slate-100 */
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 9999px !important;
    padding: 2.5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.theme-segmented-switch:hover {
    border-color: #cbd5e1;
    background-color: #e8eef5;
}

.theme-segmented-switch:active {
    transform: scale(0.96);
}

html.dark .theme-segmented-switch {
    background-color: #1a1a1e;
    border-color: #27272a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark .theme-segmented-switch:hover {
    border-color: #3f3f46;
    background-color: #222226;
}

/* Kayan Aktif Vurgu Göstergesi (Active Indicator) */
.theme-segmented-indicator {
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 24px;
    height: 24px;
    border-radius: 9999px !important;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), 
                background-color 0.2s ease, 
                box-shadow 0.2s ease, 
                border-color 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

html.dark .theme-segmented-indicator {
    transform: translateX(24px);
    background-color: #2c2c31;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* İkon Yuvaları */
.theme-segment-item {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Güneş İkonu Durumları */
.theme-segment-sun {
    color: #d97706; /* Sıcak amber altın */
    opacity: 1;
    transform: scale(1);
}

html.dark .theme-segment-sun {
    color: #71717a; /* Muted zinc */
    opacity: 0.55;
    transform: scale(0.9);
}

/* Ay İkonu Durumları */
.theme-segment-moon {
    color: #94a3b8; /* Muted slate */
    opacity: 0.55;
    transform: scale(0.9);
}

html.dark .theme-segment-moon {
    color: #60a5fa; /* Parlak ay mavisi */
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   Karanlık & Aydınlık Mod Yumuşak Geçiş (GPU Hızlandırmalı & Donmasız)
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

body,
.site-header {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   Remix Icon Sunucu Taraflı SVG Uyumluluğu
   ========================================================================== */
.remix-icon,
svg.ri-svg {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.w-4\.5, .w-4\\.5 { width: 1.125rem !important; }
.h-4\.5, .h-4\\.5 { height: 1.125rem !important; }