:root {
     --bg: #0b0e13;
     --panel: #141a26;
     --panel-2: #192233;
     --panel-3: #0f1522;
     --primary: #0090ff;
     --primary-2: #33aaff;
     --text: #e9edf5;
     --muted: #a7afbe;
     --border: 1px solid rgba(0, 144, 255, .22);
     --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 html,
 body {
     height: 100%
 }

 body {
     background: var(--bg);
     color: var(--text);
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.75;
     overflow-x: hidden;
 }

 /* Arkaplan ışıma */
 body::before,
 body::after {
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 0
 }

 body::before {
     background:
         radial-gradient(1000px 600px at 50% -10%, rgba(0, 144, 255, .28), transparent 60%),
         radial-gradient(900px 500px at 50% 110%, rgba(0, 144, 255, .12), transparent 60%);
     mix-blend-mode: screen;
 }

 body::after {
     background:
         radial-gradient(1200px 800px at 50% 0, rgba(0, 0, 0, .55), transparent 70%),
         radial-gradient(1200px 800px at 50% 100%, rgba(0, 0, 0, .55), transparent 70%);
 }

 /* Partikül canvas */
 #bg-canvas {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
     opacity: .35;
     mix-blend-mode: screen
 }

 /* Header */
 .header {
     position: sticky;
     top: 0;
     z-index: 5;
     background: linear-gradient(180deg, rgba(20, 26, 38, .92), rgba(20, 26, 38, .75));
     backdrop-filter: saturate(120%) blur(8px);
     border-bottom: var(--border);
     box-shadow: 0 6px 30px rgba(0, 0, 0, .35);
 }

 .navbar {
     display: flex;
     align-items: center;
     gap: 16px;
     max-width: 1400px;
     margin: auto;
     padding: 12px 16px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 12px;
     filter: drop-shadow(0 0 16px rgba(0, 144, 255, .25))
 }

 .brand-mark {
     width: 46px;
     height: 46px;
     border-radius: 999px;
     background: radial-gradient(circle at 30% 30%, var(--primary-2), var(--primary));
     box-shadow: inset 0 0 10px rgba(0, 0, 0, .4), 0 0 24px rgba(0, 144, 255, .25)
 }

.brand-title {
    font-family: "UnifrakturMaguntia", serif;
    font-size: 28px;
    letter-spacing: .3px;
    color: var(--primary);
    text-shadow: 0 0 22px rgba(0, 144, 255, .35), 0 2px 0 #000;

    text-decoration: none !important; /* Alt çizgiyi kaldırır */
    border: none !important;          /* Border varsa kaldırır */
    outline: none !important;         /* Focus çizgisini de kaldırır */
}

.brand-title:hover {
    color: #66bfff; /* hover efekti */
    text-decoration: none !important;
}




 .header-links {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-left: 16px
 }

 .header-links a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 10px;
     text-decoration: none;
     color: #e9edf5;
     font-weight: 800;
     font-family: Montserrat, Inter, sans-serif;
     border: 1px solid transparent;
     transition: all .2s ease;
 }

 .header-links a:hover {
     background: #1a2340;
     border-color: rgba(0, 144, 255, .22);
     transform: translateY(-1px)
 }

 .header-right {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: 10px
 }

 .discord-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(90deg, var(--primary), var(--primary-2));
     color: #0b0e13;
     padding: 10px 14px;
     border-radius: 10px;
     font-weight: 800;
     text-decoration: none;
     box-shadow: 0 8px 22px rgba(0, 144, 255, .25);
     transition: transform .15s ease, filter .15s ease;
 }

 .discord-btn:hover {
     filter: brightness(1.08);
     transform: translateY(-1px)
 }

 /* Layout: left-sidebar + main + right-sidebar */
 .wrapper {
     display: grid;
     grid-template-columns: 260px 1fr 320px;
     gap: 18px;
     max-width: 1400px;
     margin: 18px auto;
     padding: 0 16px;
     position: relative;
     z-index: 1;
 }

 @media (max-width:1200px) {
     .wrapper {
         grid-template-columns: 240px 1fr
     }
 }

 @media (max-width:980px) {
     .wrapper {
         grid-template-columns: 1fr
     }
 }

 /* Paneller */
 .panel {
     background: linear-gradient(180deg, var(--panel), var(--panel-2));
     border: var(--border);
     border-radius: 14px;
     box-shadow: var(--shadow-lg)
 }

 /* Sol Kategori Sidebar */
 .leftbar {
     padding: 16px;
     position: sticky;
     top: 84px;
     height: calc(100vh - 110px);
     overflow-y: auto;
     overflow-x: hidden
 }

 .leftbar h4 {
     margin: 0 0 10px;
     font: 900 13px/1 Montserrat, Inter, sans-serif;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: #dfe7f8;
     opacity: .95
 }

 .side-cats {
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .side-cats a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-radius: 10px;
     text-decoration: none;
     color: #f1f4fb;
     font-weight: 800;
     font-family: Montserrat, Inter, sans-serif;
     border: 1px solid transparent;
     transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
 }

 .side-cats a .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--primary)
 }

 .side-cats a:hover {
     background: #1a2340;
     border-color: rgba(0, 144, 255, .22);
     transform: translateX(2px)
 }

 .side-cats a.active {
     background: #12223b;
     border-color: rgba(0, 144, 255, .45);
     box-shadow: 0 0 0 2px rgba(0, 144, 255, .12) inset
 }

 /* Main */
 .main {
     padding: 16px
 }

 .section-title {
     display: flex;
     align-items: center;
     gap: 10px;
     margin: 4px 0 12px;
     color: #eaf2ff;
     font-size: 22px;
     font-weight: 900
 }

 .section-title .bar {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--primary);
     box-shadow: 0 0 16px rgba(0, 144, 255, .8)
 }

 /* Kategori kartları - Dikey görünüm */
 .cat-grid {
     display: flex;
     flex-direction: column;
     /* Alt alta sıralama */
     gap: 12px;
     margin-bottom: 16px;
 }

 .cat-card {
     position: relative;
     overflow: hidden;
     background: linear-gradient(180deg, #121a2a, #141c2e);
     border: 1px solid rgba(0, 144, 255, .18);
     border-radius: 12px;
     padding: 14px;
     transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
     cursor: pointer;
 }

 .cat-card:hover {
     transform: translateX(4px);
     border-color: rgba(0, 144, 255, .35);
     box-shadow: 0 8px 24px rgba(0, 144, 255, .12), 0 6px 20px rgba(0, 0, 0, .55);
     filter: brightness(1.05);
 }

 .cat-title {
     font: 800 18px/1.2 'Montserrat', 'Inter', sans-serif;
     margin-bottom: 6px;
     color: #f1f4fb;
 }

 .cat-desc {
     font-size: 14px;
     color: var(--muted);
 }

 .cat-chip {
     position: absolute;
     right: 10px;
     top: 10px;
     font-size: 12px;
     font-weight: 900;
     color: #0b0e13;
     background: linear-gradient(90deg, var(--primary), var(--primary-2));
     padding: 4px 8px;
     border-radius: 999px;
 }

 /* Konu listesi */
 .topic {
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 12px;
     padding: 14px;
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 12px;
     background: rgba(10, 14, 23, .35);
     transition: background .2s ease, border-color .2s ease, transform .2s ease;
     margin-bottom: 10px;
     overflow: hidden;
 }

 .topic:hover {
     background: #111a2b;
     border-color: rgba(0, 144, 255, .25);
     transform: translateY(-2px)
 }

 .topic:before {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background: radial-gradient(400px 120px at 0% 0%, rgba(0, 144, 255, .08), transparent 60%);
     opacity: 0;
     transition: opacity .2s ease;
 }

 .topic:hover:before {
     opacity: 1
 }

 .topic-title {
     font: 800 18px/1.35 Montserrat, Inter, sans-serif;
     color: #eaf2ff
 }

 .topic-meta {
     color: var(--muted);
     font-size: 13px;
     margin-top: 4px
 }

 .topic-stats {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #cbd3e6;
     font-size: 13px
 }

 .topic-stats i {
     opacity: .9
 }

 /* Sağ Sidebar */
 .sidebar {
     padding: 16px
 }

 .widget {
     background: linear-gradient(180deg, #121a2a, #141c2e);
     border: 1px solid rgba(0, 144, 255, .18);
     border-radius: 12px;
     padding: 14px;
     margin-bottom: 12px;
     box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
     opacity: 0;
     transform: translateY(8px);
     transition: opacity .4s ease, transform .4s ease;
 }

 .widget.show {
     opacity: 1;
     transform: translateY(0)
 }

 .widget h4 {
     margin: 0 0 8px;
     font: 900 14px/1 Montserrat, Inter, sans-serif;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--primary)
 }

 .widget ul {
     list-style: none;
     margin: 0;
     padding: 0
 }

 .widget li {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 0;
     border-bottom: 1px solid rgba(255, 255, 255, .06)
 }

 .widget li:last-child {
     border-bottom: none
 }

 .widget li b {
     font-weight: 800;
     color: #f1f4fb
 }

 .widget li span {
     color: var(--muted);
     font-weight: 700
 }

 /* Global list style (docs ile uyumlu) */
 .content ul,
 .content ol,
 .widget ul {
     list-style: none;
     padding-left: 0
 }

 .content ul li,
 .content ol li {
     position: relative;
     padding-left: 28px;
     margin-bottom: 8px;
     line-height: 1.6;
     font-size: 17px;
     color: #d6dbea;
     border-left: 2px solid rgba(0, 144, 255, 0.25);
     transition: border-color .2s ease, transform .2s ease;
 }

 .content ul li::before,
 .content ol li::before {
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     content: "\f6e8";
     /* feather-alt */
     position: absolute;
     left: 0;
     top: 0;
     color: var(--primary);
     font-size: 16px;
     line-height: 1.6;
     text-shadow: 0 0 6px rgba(0, 144, 255, 0.5);
 }

 .content ul li:hover,
 .content ol li:hover {
     border-left-color: var(--primary);
     transform: translateX(3px)
 }

 /* Scrollbar */
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px
 }

 ::-webkit-scrollbar-track {
     background: #0f1524
 }

 ::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, var(--primary), var(--primary-2));
     border-radius: 6px
 }

 .server-stats {
     background: rgba(0, 0, 0, 0.35);
     border-radius: 10px;
     padding: 15px;
     margin-bottom: 20px;
     backdrop-filter: blur(8px);
     border: 1px solid rgba(0, 144, 255, 0.3);
 }

 .server-stats h3 {
     font-family: 'Montserrat', sans-serif;
     font-size: 18px;
     font-weight: 700;
     color: #00aaff;
     margin-bottom: 12px;
     text-shadow: 0 0 8px rgba(0, 144, 255, 0.6);
 }

 .stat-card {
     display: flex;
     justify-content: space-between;
     padding: 10px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
     margin-bottom: 8px;
     transition: transform 0.2s ease, background 0.3s ease;
 }

 .stat-card:hover {
     transform: translateX(3px);
     background: rgba(0, 144, 255, 0.1);
 }

 .stat-label {
     font-size: 14px;
     color: #d6dbea;
 }

 .stat-value {
     font-size: 16px;
     font-weight: bold;
     color: #fff;
     text-shadow: 0 0 6px rgba(0, 144, 255, 0.7);
 }

 .sidebar-section {
     margin-bottom: 25px;
     padding: 10px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 144, 255, 0.15);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .sidebar-section:hover {
     transform: translateY(-3px);
     box-shadow: 0 0 15px rgba(0, 144, 255, 0.3);
 }

 .sidebar-section h3 {
     font-size: 18px;
     margin-bottom: 10px;
     color: #00aaff;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding-bottom: 5px;
 }

 .stat-card {
     display: flex;
     justify-content: space-between;
     background: rgba(255, 255, 255, 0.05);
     padding: 8px;
     border-radius: 6px;
     margin-bottom: 5px;
 }

 .stat-label {
     color: #ccc;
 }

 .stat-value {
     font-weight: bold;
     color: #fff;
 }

 ul {
     list-style: none;
     padding: 0;
 }

 ul li {
     margin-bottom: 6px;
     padding-left: 5px;
     color: #ddd;
     transition: color 0.2s ease, transform 0.2s ease;
 }

 ul li:hover {
     color: #00aaff;
     transform: translateX(3px);
 }

 .price-change.up {
     color: #4caf50;
     font-weight: bold;
 }

 .price-change.down {
     color: #f44336;
     font-weight: bold;
 }

 .price-change.stable {
     color: #ff9800;
     font-weight: bold;
 }

 /* Üst Bilgilendirme */
 .ravenhold-intro {
     background: linear-gradient(90deg, rgba(0, 144, 255, 0.1) 0%, rgba(0, 144, 255, 0) 100%);
     border-left: 4px solid var(--primary);
     padding: 15px 20px;
     margin-bottom: 20px;
     border-radius: 6px;
 }

 .ravenhold-intro h2 {
     font-family: 'UnifrakturMaguntia', serif;
     font-size: 26px;
     margin-bottom: 8px;
     color: var(--primary);
 }

 .ravenhold-intro p {
     color: #d6dbea;
     font-size: 16px;
     line-height: 1.6;
 }

 /* Kategoriler Paneli */
 .categories-panel {
     background: rgba(0, 0, 0, 0.3);
     padding: 15px;
     border-radius: 6px;
     margin-bottom: 20px;
 }

 .categories-panel h3 {
     margin-bottom: 10px;
     font-size: 18px;
     color: var(--primary);
 }

 .categories-panel ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .categories-panel ul li {
     margin-bottom: 8px;
 }

 .categories-panel ul li a {
     color: #d6dbea;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .categories-panel ul li a:hover {
     color: var(--primary);
 }

 /* Footer */
 .forum-footer {
     background: rgba(0, 0, 0, 0.4);
     padding: 20px;
     margin-top: 30px;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     border-top: 2px solid var(--primary);
 }

 .forum-footer .footer-section {
     flex: 1 1 200px;
     margin: 10px;
 }

 .forum-footer h4 {
     color: var(--primary);
     margin-bottom: 10px;
 }

 .forum-footer ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .forum-footer ul li {
     margin-bottom: 6px;
 }

 .forum-footer ul li a {
     color: #d6dbea;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .forum-footer ul li a:hover {
     color: var(--primary);
 }

 .forum-footer p {
     color: #aaa;
     font-size: 14px;
 }

 .post-list { display: flex; flex-direction: column; gap: 12px; }
.post-card {
  background: linear-gradient(180deg, #121a2a, #141c2e);
  border: 1px solid rgba(0,144,255,.18);
  border-radius: 10px;
  padding: 14px;
}
.post-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.post-meta { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.post-snippet { font-size: 14px; color: #ddd; }
/* detay & yorumlar */
.post-detail { padding:20px; }
.soft-hr { border:0; height:1px; background:rgba(255,255,255,.08); margin:16px 0; }

.comments h3 { margin: 0 0 10px; color: var(--primary); }
.comment-list .loading, .comment-list .empty, .comment-list .error { color:#aab3c7; font-size:14px; padding:8px 0; }
.comment { border:1px solid rgba(0,144,255,.15); border-radius:10px; padding:10px; background:rgba(10,14,23,.35); margin-bottom:10px; }
.comment .meta { font-size:12px; color:#a7afbe; margin-bottom:6px; display:flex; gap:8px; }
.comment .body { color:#e9edf5; font-size:14px; line-height:1.6; }

.comment-form .row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.comment-form input, .comment-form textarea {
  background:#0f1524; border:1px solid rgba(0,144,255,.22); color:#e9edf5; border-radius:8px; padding:10px;
}
.btn-primary {
  display:inline-flex; align-items:center; gap:8px; font-weight:800; padding:10px 14px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:#0b0e13; border-radius:10px;
  border:1px solid rgba(0,144,255,.35); text-decoration:none; cursor:pointer;
}
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.form-error { background:#3b0a0a; color:#ffdede; border:1px solid #7a1e1e; padding:10px; border-radius:8px; margin:10px 0; }

.category-actions { display:flex; justify-content:flex-end; margin-bottom:10px; }
/* Yeni Gönderi Formu */
.post-create {
  background: linear-gradient(180deg, #121a2a, #141c2e);
  border: 1px solid rgba(0,144,255,0.18);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  animation: fadeIn 0.4s ease;
}

.post-create h2 {
  font: 800 22px/1.2 Montserrat, Inter, sans-serif;
  color: var(--primary);
  margin-bottom: 16px;
}

.post-create .form-error {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.5);
  color: #f87171;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.post-create form .row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.post-create label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #d6dbea;
}

.post-create input[type="text"],
.post-create textarea {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,144,255,0.25);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f1f4fb;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.post-create input[type="text"]:focus,
.post-create textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(0,144,255,0.3);
}

.post-create textarea {
  resize: vertical;
}

.post-create .btn-primary {
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-create .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,144,255,0.35);
}

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

.post-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.post-card-link:hover .post-card {
  border-color: rgba(0,144,255,.35);
  box-shadow: 0 10px 36px rgba(0,144,255,.10), 0 10px 40px rgba(0,0,0,.55);
  transform: translateY(-3px);
}
.comment-form .btn-primary,
.discord-btn {
  cursor: pointer;
}
.comment-form input,
.comment-form textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,144,255,0.2);
  color: #e9edf5;
  border-radius: 8px;
}
/* Genel panel görünümü */
.panel {
  background: linear-gradient(180deg, #121a2a, #141c2e);
  border: 1px solid rgba(0, 144, 255, 0.18);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  font-family: "Inter", "Segoe UI", sans-serif;
  color: #e6ebf5;
}

/* Başlıklar */
.panel h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}

/* Input ve select alanları */
.panel input,
.panel select {
  background: #1c2537;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  color: #e6ebf5;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.panel input:focus,
.panel select:focus {
  outline: none;
  border-color: #0090ff;
  box-shadow: 0 0 6px rgba(0, 144, 255, 0.4);
}

/* Label */
.row label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #a7afbe;
}

/* Button */
.discord-btn {
  background: #0090ff;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.25s ease, transform 0.15s ease;
}

.discord-btn:hover {
  background: #0077d4;
  transform: translateY(-2px);
}

/* Kültür dropdown özel stil */
.culture-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.culture-option img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}

/* Select için custom stil */
#cultureSelect {
  appearance: none;
  background: #1c2537 url("data:image/svg+xml,%3Csvg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E<path d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size: 14px;
  padding-right: 36px;
}


.cat-card {
  text-decoration: none;     /* alt çizgiyi kapatır */
  border-bottom: none;       /* varsa border’ı kaldırır */
  box-shadow: none;          /* alt gölge/çizgi varsa kapatır */
}

.cat-card:hover,
.cat-card:focus {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}


.cat-card .cat-title,
.cat-card .cat-desc {
  text-decoration: none;
}



/* ===========================
   Mobil/Tablet Uyarlamaları
   =========================== */

/* Genel: daha akışkan tipografi ve boşluklar */
:root {
  --space-sm: 10px;
  --space-md: 14px;
  --radius: 12px;
}
body { line-height: 1.7; }

/* Başlık markası mobilde daha kompakt */
.brand-title {
  font-size: clamp(20px, 4vw, 28px);
}

/* Header: dar ekranlarda menüyü yatay kaydırılabilir yap */
.header-links {
  gap: 6px;
  margin-left: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.header-links::-webkit-scrollbar { display: none; }
.header-links a { padding: 8px 10px; font-size: 13px; }

/* Ana grid uyarlaması */
.wrapper {
  grid-template-columns: 260px 1fr 320px;
  gap: 14px;
  padding: 0 12px;
}

/* Kartlar ve panellerde daha küçük padding */
.panel, .cat-card, .topic, .widget, .post-card, .post-create {
  border-radius: var(--radius);
  padding: var(--space-md);
}

/* Dokunmatik için hover geçişleri yumuşat */
a, .btn-primary, .discord-btn, .cat-card, .topic {
  -webkit-tap-highlight-color: transparent;
}

/* ============== ≤ 1024px ============== */
@media (max-width: 1024px) {
  .wrapper { grid-template-columns: 220px 1fr; }
  .sidebar { grid-column: 1 / -1; order: 3; }
  .leftbar { position: sticky; top: 76px; height: auto; max-height: 50vh; }
  .navbar { padding: 10px 12px; }
  .brand-mark { width: 40px; height: 40px; }
  .section-title { font-size: 20px; }
  .topic-title, .post-title { font-size: 17px; }
}

/* ============== ≤ 820px (tablet-dar) ============== */
@media (max-width: 820px) {
  .wrapper { grid-template-columns: 1fr; gap: 12px; }
  .leftbar { order: 2; position: static; max-height: none; padding: 12px; }
  .main { order: 1; padding: 12px; }
  .sidebar { order: 3; padding: 12px; }
  .header { backdrop-filter: saturate(115%) blur(6px); }
  .header-right { gap: 6px; }
  .discord-btn { padding: 10px 12px; font-size: 14px; }
  .cat-title { font-size: 17px; }
  .cat-desc { font-size: 13px; }
  .topic { grid-template-columns: 1fr; }
  .topic-stats { justify-content: flex-start; gap: 12px; }
  .post-meta, .post-snippet, .stat-label { font-size: 13px; }
}

/* ============== ≤ 600px (telefon) ============== */
@media (max-width: 600px) {
  .navbar { gap: 10px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand { gap: 8px; }
  .header-links a { padding: 7px 9px; font-weight: 700; }
  .leftbar h4 { font-size: 12px; margin-bottom: 8px; }
  .side-cats a { padding: 9px 10px; gap: 8px; }
  .side-cats a .dot { width: 5px; height: 5px; }
  .section-title { font-size: 18px; gap: 8px; }
  .cat-card { padding: 12px; }
  .cat-chip { top: 8px; right: 8px; font-size: 11px; padding: 3px 6px; }
  .topic { padding: 12px; }
  .topic-title { font-size: 16px; }
  .topic-meta { font-size: 12px; }
  .widget { padding: 12px; }
  .widget h4 { font-size: 13px; }
  .widget li { padding: 7px 0; }
  .post-create { padding: 16px; }
  .post-create h2 { font-size: 20px; margin-bottom: 12px; }
  .post-create input[type="text"],
  .post-create textarea { font-size: 14px; padding: 9px 10px; }
  .post-create .btn-primary { padding: 9px 12px; font-size: 14px; }
  .server-stats { padding: 12px; }
  .stat-card { padding: 8px; }
  .btn-primary, .discord-btn { gap: 6px; }
  /* Scrollbar incelt */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
}

/* ============== ≤ 420px (küçük telefon) ============== */
@media (max-width: 420px) {
  .navbar { padding: 8px 10px; }
  .brand-title { font-size: clamp(18px, 6vw, 22px); letter-spacing: .2px; }
  .header-links { gap: 4px; }
  .header-links a { padding: 6px 8px; font-size: 12px; }
  .discord-btn { padding: 8px 10px; font-size: 13px; border-radius: 10px; }
  .leftbar, .main, .sidebar { padding: 10px; }
  .panel { padding: 12px; }
  .content ul li, .content ol li { font-size: 15px; padding-left: 22px; }
  .content ul li::before, .content ol li::before { font-size: 14px; }
  .forum-footer { padding: 14px; gap: 8px; }
  .forum-footer h4 { font-size: 15px; }
  .forum-footer p, .forum-footer ul li a { font-size: 13px; }
}

/* Form ve seçiciler: dokunmatik rahatlığı */
.panel input, .panel select,
.comment-form input, .comment-form textarea {
  min-height: 42px;
}
#cultureSelect { background-size: 12px; padding-right: 32px; }

/* Hover ağırlığını azalt, dokunmak için aktif geri bildirim */
@media (hover: none) {
  .side-cats a:hover,
  .header-links a:hover,
  .discord-btn:hover,
  .btn-primary:hover,
  .cat-card:hover,
  .topic:hover {
    transform: none;
    filter: none;
  }
  .side-cats a:active,
  .header-links a:active,
  .discord-btn:active,
  .btn-primary:active,
  .cat-card:active,
  .topic:active {
    transform: translateY(1px);
  }
}

/* =========================
   Alerts / Toasts (Ravenhold)
   ========================= */
#app-alerts {
  position: fixed;
  top: 84px;               /* header altında dursun */
  right: 20px;             /* sağ tarafa sabitle */
  width: min(380px, 92vw);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;    /* arka plan tıklanabilir kalsın */
}

.alert {
  --ring: rgba(0,144,255,.28);
  --bg-pane: linear-gradient(180deg, var(--panel), var(--panel-2));
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--bg-pane);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 2px var(--ring) inset;
  color: var(--text);
  backdrop-filter: blur(6px) saturate(120%);
  overflow: hidden;
  position: relative;
  margin-left: auto; /* sağa hizalanma */
}

.alert__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.alert__body { min-width: 0; }

.alert__title {
  font: 800 15px/1.35 Montserrat, Inter, sans-serif;
  margin: 0 0 4px;
  letter-spacing: .02em;
}

.alert__msg {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.alert__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: #cfd7e9;
  opacity: .9;
  cursor: pointer;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.alert__close:hover {
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
  opacity: 1;
}

/* Tip renkleri */
.alert--success {
  --ring: rgba(34,197,94,.3);
  border-color: rgba(34,197,94,.35);
}
.alert--success .alert__icon {
  background: linear-gradient(180deg, #166534, #065f46);
  color: #b7f7d0;
  border: 1px solid rgba(34,197,94,.45);
}
.alert--error {
  --ring: rgba(239,68,68,.28);
  border-color: rgba(239,68,68,.38);
}
.alert--error .alert__icon {
  background: linear-gradient(180deg, #7f1d1d, #6b1111);
  color: #ffd1d1;
  border: 1px solid rgba(239,68,68,.45);
}

/* Progress bar */
.alert__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transform-origin: left;
  animation: alertProgress linear forwards;
}

/* Animasyonlar */
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeAway {
  to { opacity: 0; transform: translateX(20px); }
}
@keyframes alertProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.alert--in-down   { animation: slideFromRight .28s ease-out both; }
.alert--out       { animation: fadeAway .24s ease-in forwards; }

/* Mobil */
@media (max-width: 520px) {
  #app-alerts { top: 70px; right: 10px; width: 94vw; }
  .alert { padding: 12px; }
  .alert__title { font-size: 14px; }
  .alert__msg { font-size: 13px; }
  .alert__icon, .alert__close { width: 32px; height: 32px; }
}