:root {
  --neon-blue: #3b82f6;
  --dark-bg: #121212;
  --card-bg: #1e1e1e;
  --border-color: #2a2a2a;
}

body {
  background-color: var(--dark-bg);
  color: #ffffff;
  overflow-x: hidden;
}

/* Turkish Uppercase Fix & Professional Font Handling */
.uppercase {
  text-transform: uppercase;
  /* Ensures browser respects Turkish rules for i -> İ */
  font-variant-ligatures: normal;
}

/* Specific fix for some fonts that struggle with İ */
h1, h2, h3, h4, h5, h6, .font-black {
  letter-spacing: -0.02em;
}

/* Universal Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Explicit class for elements needing custom scrollbar if body doesn't apply it implicitly */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Custom utility for neon glow */
.neon-glow {
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.neon-border {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}

/* Fix for sticky headers overlapping */
.sticky-nav-fix {
  top: 64px; /* Navbar height */
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* ==========================================================================
   CKEditor 5 Content Rendering Styles (support for .prose class users)
   ========================================================================== */

/* Clearfix for floating images within the prose container */
.prose {
  display: flow-root; 
}

/* Base figure styling */
.prose figure.image {
  margin: 2.5rem auto;
  display: block;
}

.prose figure.image img {
  border-radius: 1.5rem; /* Match prose-img:rounded-3xl which is 1.5rem */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transition: transform 0.3s ease;
  max-width: 100%;
  height: auto;
}

/* Image Aligned Styles: Wrap text behavior */
.prose .image-style-align-left {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1.5rem;
  max-width: 50%;
  clear: left;
}

.prose .image-style-align-right,
.prose .image-style-side {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1.5rem;
  max-width: 50%;
  clear: right;
}

.prose .image-style-align-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Inline images (in line with text) */
.prose .image-inline {
  display: inline-flex;
  margin: 0 0.5rem;
  vertical-align: middle;
}

/* Responsive adjustment for small screens: stacking images */
@media (max-width: 768px) {
  .prose .image-style-align-left,
  .prose .image-style-align-right,
  .prose .image-style-side {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    clear: both;
  }
  .prose figure.image {
    margin: 1.5rem auto;
  }
}

/* Captions debajo de las imagenes */
.prose figure.image figcaption {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 0.75rem;
  color: #9ca3af;
  font-style: italic;
  font-family: 'Inter', sans-serif;
  opacity: 0.8;
}

/* Ensure headings have white space after floating images */
.prose h1, .prose h2, .prose h3, .prose h4 {
  clear: none;
}

/* ==========================================================================
   Typography Synchronization (Frontend Reading vs. CKEditor Writing)
   ========================================================================== */

/* This section ensures that the editor and the blog looks exactly the same
   in terms of line spacing and paragraph gaps. */

/* CKEditor 5 Image Alignment / Float Support */
/* Tailwind Prose'un figure ve img üzerindeki baskın marjinlerini ve bloklamasını ezelim */
.prose.ck-content .image-style-align-left,
.prose.ck-content figure.image-style-align-left,
.prose.ck-content img.image-style-align-left {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 2rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    max-width: 50% !important;
    width: auto !important; /* Tailwind'in width: 100% kuralını boz */
    display: table !important;
    clear: none !important;
}

.prose.ck-content .image-style-align-right,
.prose.ck-content figure.image-style-align-right,
.prose.ck-content img.image-style-align-right,
.prose.ck-content .image-style-side,
.prose.ck-content figure.image-style-side,
.prose.ck-content img.image-style-side {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 2rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    max-width: 50% !important;
    width: auto !important;
    display: table !important;
    clear: none !important;
}

/* İçerideki resimlerin marjinlerini ve genişliklerini sıfırla */
.prose.ck-content figure img,
.prose.ck-content .image-style-align-left img,
.prose.ck-content .image-style-align-right img {
    margin: 0 !important;
    width: 100% !important; /* Kendi (figure) kapsayıcı genişliğine uysun */
    max-width: none !important;
}

.prose.ck-content .image-style-align-center,
.prose.ck-content figure.image-style-align-center,
.prose.ck-content img.image-style-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
}

/* Clear floats after image-text wrap to prevent layout breaking */
.ck-content::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.prose,
.ck-content {
  font-size: 1rem !important; /* Standart 16px boyutu */
  line-height: 1.7 !important; /* Bir tık daha ferah okuma */
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  color: #d1d5db; /* Editör metin rengiyle uyumlu */
}

/* CKEditor 5 Font Size Classes */
.ck-content .text-tiny { font-size: 0.7em !important; }
.ck-content .text-small { font-size: 0.85em !important; }
.ck-content .text-big { font-size: 1.4em !important; }
.ck-content .text-huge { font-size: 1.8em !important; }

/* Font Color support (if picked from CKEditor) */
.ck-content span[style*="color"] {
  color: inherit; /* Allow inline styles to work but default to inherit if something goes wrong */
}

/* Text Alignment support */
.ck-content .text-align-left { text-align: left !important; }
.ck-content .text-align-center { text-align: center !important; }
.ck-content .text-align-right { text-align: right !important; }
.ck-content .text-align-justify { text-align: justify !important; }

/* List Styles Fix - Kökten Çözüm */
.prose ul, .ck-content ul,
.prose ol, .ck-content ol {
  list-style-position: outside !important;
  padding-left: 2.5rem !important;
  margin-left: 0 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Numaralı listelerde (a, b, c veya 01, 02) CKEditor'ün inline stilini bozma */
.prose ol, .ck-content ol {
  list-style-type: decimal; /* Varsayılan, ama inline stil varsa o kazanacak */
}

/* Sadece madde işaretli (ul) olanları disk olarak sabitleyelim (Tailwind'in silmesini engellemek için) */
.prose ul, .ck-content ul {
  list-style-type: disc !important;
}

.prose li, .ck-content li {
  display: list-item !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
  padding-left: 0.5rem !important;
}

/* CKEditor 5 Document List İyileştirmesi */
.ck-content li > p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CKEditor 5 Document List İyileştirmesi */
/* li içindeki p etiketlerinin yan yana binmesini veya marker'ı bozmasını önle */
.ck-content li > p {
    display: block !important; /* Inline yapınca yan yana biniyorlardı */
    margin: 0 !important;
    padding: 0 !important;
}

/* Marker renkleri ve kalınlığı için destek */
.ck-content .ck-list-marker-bold {
    font-weight: bold !important;
}

/* Prose/CK-Content içindeki p etiketlerinin marjini bazen marker'ı eziyor */
.ck-content li > p {
    display: inline !important;
    margin: 0 !important;
}

/* Paragraflar arası boşluk */
.prose p,
.ck-content p {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}

/* Başlık hiyerarşisi (Kocaman görünmemesi için optimize edildi) */
.prose h1, .ck-content h1 {
  font-size: 1.875rem !important; /* text-3xl */
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

.prose h2, .ck-content h2 {
  font-size: 1.5rem !important; /* text-2xl */
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

.prose h3, .ck-content h3 {
  font-size: 1.25rem !important; /* text-xl */
  margin-top: 1.2em !important;
  margin-bottom: 0.4em !important;
}

/* Listeler */
.prose ul, .prose ol,
.ck-content ul, .ck-content ol {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}

.prose li, .ck-content li {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
}

/* Prose class specific overrides for CKEditor content */
.prose.ck-content :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose.ck-content :where(h1, h2, h3, h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  clear: none;
}

/* Table styling fix in prose */
.prose.ck-content table {
  margin: 2rem 0 !important;
  border-collapse: collapse !important;
}

.prose.ck-content table td, 
.prose.ck-content table th {
  border: 1px solid #374151 !important;
  padding: 0.75rem !important;
}