/* ========================================================== TribunSözlük — Yeniden Tasarım Açık / Koyu tema: ========================================================== */ :root { --brand: #e32636; --brand-dark: #c11b2a; --brand-soft: rgba(227, 38, 54, 0.08); --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fa; --border: #e6e8ec; --text: #16181d; --text-2: #4b5563; --text-3: #8a919c; --link: #1a6fd4; --shadow: 0 1px 3px rgba(16, 18, 24, 0.06), 0 4px 16px rgba(16, 18, 24, 0.04); --shadow-lg: 0 8px 30px rgba(16, 18, 24, 0.12); --header-bg: rgba(255, 255, 255, 0.85); --chip-bg: #eef0f3; --logo-sozluk: #16181d; } [data-theme="dark"] { --bg: #101216; --surface: #181b21; --surface-2: #1e2229; --border: #262b33; --text: #e8eaee; --text-2: #aab2bd; --text-3: #6b7480; --link: #6aa5e8; --brand-soft: rgba(227, 38, 54, 0.14); --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --header-bg: rgba(16, 18, 22, 0.85); --chip-bg: #232830; --logo-sozluk: #e8eaee; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; transition: background 0.25s ease, color 0.25s ease; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--header-bg); border-bottom: 1px solid var(--border); } .header-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 20px; } .logo { display: flex; align-items: baseline; font-weight: 800; font-size: 22px; letter-spacing: -0.5px; white-space: nowrap; flex-shrink: 0; } .logo .t-red { color: var(--brand); } .logo .t-dark { color: var(--logo-sozluk); } /* Arama */ .search { flex: 1; max-width: 520px; position: relative; } .search input { width: 100%; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); padding: 0 42px 0 16px; font-size: 14px; outline: none; transition: border 0.2s, box-shadow 0.2s; } .search input::placeholder { color: var(--text-3); } .search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .search .search-btn { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; transition: background 0.2s; } .search .search-btn:hover { background: var(--brand-dark); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2); transition: background 0.2s, color 0.2s; } .icon-btn:hover { background: var(--chip-bg); color: var(--text); } .btn { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: all 0.2s; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-ghost { color: var(--text-2); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--chip-bg); color: var(--text); } /* ---------- Kanal Menüsü ---------- */ .channel-nav { border-bottom: 1px solid var(--border); background: var(--surface); } .channel-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .channel-inner::-webkit-scrollbar { display: none; } .channel { display: flex; align-items: center; gap: 7px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.2s; } .channel:hover { color: var(--text); } .channel.active { color: var(--brand); border-bottom-color: var(--brand); } .channel svg { opacity: 0.75; } /* ---------- Sayfa Düzeni ---------- */ .layout { max-width: 1280px; margin: 0 auto; padding: 24px 20px 60px; display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 24px; align-items: start; } /* ---------- Sol Sidebar ---------- */ /* Kenar çubukları SABİTLENMEZ. position:sticky ile ekrandan uzun bir sütun üstte pinlenir ve alt kısmına hiç ulaşılamaz: sağ kenar 1823px iken ekran 730px'di, haberlerin sonu ve kenar reklamı hiç görünmüyordu. Ayrıca bu boydaki sabit katmanların sürekli yeniden boyanması kaydırma sırasında boş alanlara yol açıyordu. Artık sayfayla birlikte kayarlar: her şey erişilebilir, boyama ucuz. */ .sidebar-left { display: flex; flex-direction: column; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .panel-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brand); display: flex; align-items: center; gap: 8px; } .refresh-btn { color: var(--text-3); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; transition: all 0.2s; } .refresh-btn:hover { background: var(--chip-bg); color: var(--brand); transform: rotate(90deg); } .topic-list { list-style: none; overflow-y: auto; } .topic-list li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; font-size: 13.5px; color: var(--text-2); border-bottom: 1px solid var(--border); transition: background 0.15s, color 0.15s; } .topic-list li:last-child a { border-bottom: none; } .topic-list li a:hover { background: var(--brand-soft); color: var(--text); } .count { font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--chip-bg); min-width: 22px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 7px; flex-shrink: 0; } .topic-list li a:hover .count { background: var(--brand); color: #fff; } /* ---------- Entry Akışı ---------- */ .feed { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .entry-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px 14px; transition: border 0.2s, transform 0.15s; } .entry-card:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); } .entry-title { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .entry-title a:hover { color: var(--brand); } .entry-body { color: var(--text-2); font-size: 14.5px; white-space: pre-line; } .entry-body a { color: var(--link); } .entry-body a:hover { text-decoration: underline; } .entry-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .vote-group { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 2px; } .vote-btn { width: 30px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: all 0.15s; } .vote-btn:hover.up { color: #17a34a; background: rgba(23, 163, 74, 0.12); } .vote-btn:hover.down { color: var(--brand); background: var(--brand-soft); } .vote-score { font-size: 13px; font-weight: 700; color: var(--text-2); min-width: 24px; text-align: center; } .action-btn { height: 32px; padding: 0 10px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); transition: all 0.15s; } .action-btn:hover { background: var(--chip-bg); color: var(--text); } .entry-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-3); } .author { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-2); background: var(--chip-bg); border-radius: 999px; padding: 3px 12px 3px 3px; transition: all 0.15s; } .author:hover { background: var(--brand-soft); color: var(--brand); } .avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; } .av-1 { background: linear-gradient(135deg, #16a34a, #115e33); } .av-2 { background: linear-gradient(135deg, #e32636, #8f1620); } .av-3 { background: linear-gradient(135deg, #f59e0b, #b45309); } .av-4 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .av-5 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); } .av-6 { background: linear-gradient(135deg, #64748b, #334155); } /* Reklam alanı */ .ad-slot { border: 1px dashed var(--border); border-radius: 16px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .ad-slot.banner { height: 110px; } .ad-slot.box { height: 250px; } /* ---------- Sağ Sidebar ---------- */ .sidebar-right { display: flex; flex-direction: column; gap: 20px; } .debe-list { list-style: none; counter-reset: debe; } .debe-list li a { display: flex; gap: 12px; align-items: baseline; padding: 11px 16px; font-size: 13.5px; color: var(--text-2); border-bottom: 1px solid var(--border); transition: background 0.15s, color 0.15s; } .debe-list li:last-child a { border-bottom: none; } .debe-list li a:hover { background: var(--brand-soft); color: var(--text); } .debe-list li a::before { counter-increment: debe; content: counter(debe); font-size: 12px; font-weight: 800; color: var(--brand); min-width: 18px; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); } .stat { background: var(--surface); padding: 14px 16px; text-align: center; } .stat b { display: block; font-size: 18px; letter-spacing: -0.5px; } .stat span { font-size: 11.5px; color: var(--text-3); } /* ---------- Yükle butonu ---------- */ .load-more { align-self: center; margin-top: 8px; height: 42px; padding: 0 28px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 14px; color: var(--text-2); box-shadow: var(--shadow); transition: all 0.2s; } .load-more:hover { border-color: var(--brand); color: var(--brand); } /* ---------- Başlık detay sayfası ---------- */ .topic-header { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 22px; margin-bottom: 16px; } .topic-header h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.25; } .topic-tools { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chip { height: 30px; padding: 0 13px; border-radius: 999px; background: var(--chip-bg); font-size: 12.5px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; } .chip:hover { background: var(--brand-soft); color: var(--brand); } .chip.follow { background: var(--brand); color: #fff; } .chip.follow:hover { background: var(--brand-dark); } .entry-num { font-size: 12px; font-weight: 700; color: var(--text-3); } /* Entry yaz kutusu */ .compose { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; margin-top: 4px; } .compose textarea { width: 100%; min-height: 110px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); padding: 12px 14px; font: inherit; font-size: 14px; outline: none; transition: border 0.2s, box-shadow 0.2s; } .compose textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .compose-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; } .compose-hint { font-size: 12px; color: var(--text-3); } .pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; } .page-btn { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-2); display: grid; place-items: center; transition: all 0.15s; } .page-btn:hover { border-color: var(--brand); color: var(--brand); } .page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 40px; } .footer-inner { max-width: 1280px; margin: 0 auto; padding: 22px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); } .footer-links { display: flex; gap: 18px; } .footer-links a:hover { color: var(--brand); } .footer-social { display: flex; gap: 6px; } /* ---------- Mobil ---------- */ .mobile-only { display: none; } @media (max-width: 1080px) { .layout { grid-template-columns: 240px minmax(0, 1fr); } .sidebar-right { display: none; } } @media (max-width: 800px) { .layout { grid-template-columns: 1fr; padding-top: 16px; } .sidebar-left { display: none; } .mobile-only { display: flex; } .header-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; row-gap: 10px; gap: 10px; } .logo { font-size: 20px; } .search { order: 3; flex-basis: 100%; max-width: none; } .header-actions { margin-left: auto; } .btn-ghost span, .btn-primary span { display: none; } .btn { padding: 0 11px; } .entry-title { font-size: 17px; } .entry-meta { width: 100%; margin-left: 0; margin-top: 6px; } /* Mobil yatay başlık şeridi */ .mobile-topics { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px; scrollbar-width: none; } .mobile-topics::-webkit-scrollbar { display: none; } .mobile-topics .chip { flex-shrink: 0; } } @media (min-width: 801px) { .mobile-topics { display: none; } } /* ===================================================================== PHP uygulamasıyla gelen bileşenler ===================================================================== */ /* ---------- Flash / toast ---------- */ .flash { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .flash-success { border-color: rgba(23,163,74,.35); color: #15803d; background: rgba(23,163,74,.08); } .flash-error { border-color: rgba(227,38,54,.35); color: var(--brand-dark); background: var(--brand-soft); } [data-theme="dark"] .flash-success { color: #4ade80; } [data-theme="dark"] .flash-error { color: #fca5a5; } .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 999; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: #16181d; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; max-width: calc(100vw - 32px); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast-success { background: #15803d; } .toast-error { background: var(--brand-dark); } [data-theme="dark"] .toast { background: #2b313a; } /* ---------- Başlık şeridi ---------- */ .feed-head { margin-bottom: 4px; } .feed-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; } .feed-head.sm h2 { font-size: 15px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; margin-top: 8px; } .feed-sub { font-size: 13.5px; color: var(--text-3); } /* ---------- Entry sıra numarası ---------- */ .entry-wrap { position: relative; } .entry-index { position: absolute; top: -8px; left: 14px; z-index: 2; font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; } /* ---------- Oy / favori aktif durumları ---------- */ .vote-btn.voted.up { color: #17a34a; background: rgba(23,163,74,.14); } .vote-btn.voted.down { color: var(--brand); background: var(--brand-soft); } .vote-group[data-self="1"] .vote-btn { opacity: .4; cursor: not-allowed; } .action-btn.fav-btn.active { color: var(--brand); } .action-btn.danger:hover { color: var(--brand); background: var(--brand-soft); } .chip.follow.following { background: #15803d; color: #fff; } .chip.locked { background: var(--chip-bg); color: var(--text-3); } .refresh-btn.spinning svg { animation: spin .5s linear; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Entry içeriği (formatter çıktısı) ---------- */ .entry-body p { margin-bottom: 10px; } .entry-body p:last-child { margin-bottom: 0; } .entry-body a.bkz { color: var(--link); border-bottom: 1px dotted var(--link); } .entry-body a.bkz:hover { background: var(--brand-soft); } .spoiler { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: var(--surface-2); } .spoiler summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-3); user-select: none; } .spoiler summary:hover { color: var(--brand); } .spoiler-body { margin-top: 8px; } .embed { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; margin: 10px 0; background: #000; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed-error { font-size: 12.5px; color: var(--text-3); font-style: italic; } .entry-image { display: block; margin: 10px 0; } .entry-image img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); } .entry-date:hover { color: var(--brand); } .edited { font-size: 11px; font-style: italic; color: var(--text-3); } .author-gone { opacity: .6; } /* ---------- Boş durum ---------- */ .empty-state { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 48px 24px; text-align: center; } .empty-state p { color: var(--text-3); margin-bottom: 16px; } .empty-state h1 { font-size: 22px; font-weight: 800; margin-bottom: 8px; } .error-code { font-size: 52px; font-weight: 900; color: var(--brand); letter-spacing: -2px; line-height: 1; margin-bottom: 8px; } /* ---------- Formlar ---------- */ .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); padding: 11px 14px; font: inherit; font-size: 14px; outline: none; transition: border .2s, box-shadow .2s; } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .field small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-3); } .btn-block { width: 100%; justify-content: center; margin-top: 6px; } .compose-hint code { font-size: 11px; background: var(--chip-bg); padding: 2px 6px; border-radius: 5px; } .compose-hint.center { text-align: center; width: 100%; } .compose-hint a { color: var(--brand); font-weight: 600; } .compose-locked { text-align: center; color: var(--text-3); font-size: 13.5px; } /* ---------- Giriş / kayıt kartı ---------- */ .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 28px; max-width: 420px; margin: 8px auto; } .auth-card h1 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; } .auth-sub { font-size: 13.5px; color: var(--text-3); margin-bottom: 20px; } .auth-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: 13.5px; color: var(--text-3); } .auth-alt a { color: var(--brand); font-weight: 600; } /* ---------- Kullanıcı menüsü ---------- */ .user-menu { position: relative; } .user-chip { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--chip-bg); font-size: 13.5px; font-weight: 600; transition: background .2s; } .user-chip:hover { background: var(--brand-soft); } .user-dropdown { position: absolute; right: 0; top: 46px; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 200; } .user-dropdown a, .user-dropdown button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-2); } .user-dropdown a:hover, .user-dropdown button:hover { background: var(--chip-bg); color: var(--text); } .dropdown-meta { display: block; padding: 4px 12px 8px; font-size: 11.5px; color: var(--text-3); border-bottom: 1px solid var(--border); margin-bottom: 4px; } /* ---------- Profil ---------- */ .profile-header { display: flex; gap: 18px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 22px; margin-bottom: 16px; } .avatar-lg { width: 64px; height: 64px; font-size: 24px; } .profile-info h1 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; } .profile-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--text-2); } .badge-rank { background: var(--brand); color: #fff; } .badge-danger { background: var(--brand-dark); color: #fff; } .profile-since { font-size: 12px; color: var(--text-3); } .profile-bio { margin-top: 10px; font-size: 14px; color: var(--text-2); } .stats-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 620px) { .stats-4 { grid-template-columns: repeat(2, 1fr); } } /* ---------- Liste yardımcıları ---------- */ .panel.mb { margin-bottom: 16px; } .topic-list-lg li a { padding: 13px 18px; font-size: 14.5px; } .topic-empty { padding: 18px 16px; font-size: 13px; color: var(--text-3); text-align: center; } .user-row { display: inline-flex; align-items: center; gap: 8px; } .page-gap { color: var(--text-3); padding: 0 4px; align-self: center; } /* --------------------------------------------------------------------- Sözlük geleneği: başlıklar ve entry metni küçük harf gösterilir. Veri olduğu gibi saklanır; bu yalnızca görünüm. sayesinde tarayıcı Türkçe kurallarını uygular (I -> ı, İ -> i). --------------------------------------------------------------------- */ .entry-title, .topic-header h1, .entry-body, .topic-list a, .debe-list a, .feed-head h1 { text-transform: lowercase; } /* Kullanıcı adları ve rozetler zaten küçük harf; kod/adres dokunulmaz. */ .entry-body code, .entry-body a[href^="http"] { text-transform: none; } /* ---------- Entry yazma araç çubuğu ---------- */ .compose-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .tool-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); transition: all 0.15s; } .tool-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .tool-btn svg { opacity: 0.85; } .upload-durum { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-left: 2px; } /* Küçük ekranda araç metinlerini gizle, ikon kalsın */ @media (max-width: 560px) { .tool-btn span { display: none; } .tool-btn { padding: 0 10px; } } /* ---------- Modal (şikayet vb.) ---------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(10, 12, 16, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; } /* display:grid, [hidden] özniteliğinin display:none'ını ezer — açıkça geri al */ .modal-backdrop[hidden] { display: none; } .modal { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px; } .modal h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 14px; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } /* ---------- Moderatör paneli: şikayet listesi ---------- */ .report-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; transition: opacity 0.2s; } .report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .report-reason { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); } .report-meta { font-size: 12px; color: var(--text-3); } .report-excerpt { font-size: 13.5px; color: var(--text-2); background: var(--surface-2); border-left: 3px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; } .report-note { font-size: 12.5px; color: var(--text-3); font-style: italic; } .report-actions { display: flex; gap: 8px; margin-top: 10px; } /* ---------- Yüklenmiş avatar + ayarlar sayfası ---------- */ .avatar-img { object-fit: cover; } .settings-card { max-width: 560px; margin: 0 0 16px; } .settings-title { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; margin-bottom: 14px; } .avatar-row { display: flex; gap: 18px; align-items: flex-start; } .avatar-forms { flex: 1; display: flex; flex-direction: column; gap: 8px; } .avatar-forms .btn { align-self: flex-start; } input[type="file"] { width: 100%; font-size: 13px; color: var(--text-2); padding: 8px 0; } /* ---------- Sosyal giriş ---------- */ .btn-google { background: var(--surface); border: 1px solid var(--border); color: var(--text); justify-content: center; font-weight: 600; } .btn-google:hover { background: var(--chip-bg); border-color: var(--text-3); } .auth-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-3); font-size: 12.5px; } .auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ===================================================================== Yönetim paneli ===================================================================== */ .panel-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 20px 60px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; } .panel-nav { position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; } .panel-nav-baslik { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--brand); padding: 10px 12px 8px; } .panel-nav-link { display: block; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: background .15s, color .15s; } .panel-nav-link:hover { background: var(--chip-bg); color: var(--text); } .panel-nav-link.active { background: var(--brand); color: #fff; } .panel-nav-cikis { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px; font-weight: 500; color: var(--text-3); } .panel-main { min-width: 0; } .panel-baslik { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 16px; } /* ---- Özet kartları ---- */ .panel-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; } .panel-kartlar.ikincil { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .panel-kart { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; text-align: center; transition: border .15s; } a.panel-kart:hover { border-color: var(--brand); } .panel-kart b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -1px; } .panel-kart span { font-size: 12px; color: var(--text-3); } .panel-kart.sm { padding: 12px; } .panel-kart.sm b { font-size: 19px; } .panel-kart.vurgu { border-color: var(--brand); background: var(--brand-soft); } .panel-kart.vurgu b { color: var(--brand); } /* ---- Bölümler ---- */ .panel-bolum { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 20px; margin-top: 16px; } .panel-bolum h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin-bottom: 14px; } /* ---- Mini grafik ---- */ .mini-grafik { display: flex; align-items: flex-end; gap: 5px; height: 130px; } .grafik-sutun { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; } .grafik-bar { width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; opacity: .85; transition: opacity .15s; } .grafik-sutun:hover .grafik-bar { opacity: 1; } .grafik-sutun span { font-size: 10px; color: var(--text-3); } /* ---- Tablolar ---- */ .panel-tablo-kaydir { overflow-x: auto; } .panel-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; } .panel-tablo th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .panel-tablo td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .panel-tablo tr:last-child td { border-bottom: none; } .panel-tablo tbody tr:hover { background: var(--surface-2); } .satir-banli { opacity: .55; } .satir-silinmis { opacity: .5; } .panel-yazar { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .panel-yazar:hover { color: var(--brand); } /* ---- Liste satırları ---- */ .panel-liste { display: flex; flex-direction: column; gap: 10px; } .panel-satir { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; } .panel-satir-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .panel-satir-baslik { font-weight: 700; font-size: 15px; } .panel-satir-baslik:hover { color: var(--brand); } .panel-meta { font-size: 12px; color: var(--text-3); } .panel-ustbilgi { margin-bottom: 12px; display: block; } .panel-alinti { font-size: 13.5px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .panel-not { font-size: 12.5px; color: var(--text-3); font-style: italic; margin-bottom: 8px; } .panel-bos { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px; text-align: center; color: var(--text-3); } /* ---- İşlem düğmeleri ---- */ .panel-islem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .panel-islem form { display: inline-flex; align-items: center; gap: 6px; } .satir-form { display: inline-flex; align-items: center; gap: 6px; } .satir-form input[type="text"], .panel-arama input[type="search"] { height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); padding: 0 10px; font: inherit; font-size: 13px; outline: none; min-width: 160px; } .satir-form input:focus, .panel-arama input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .satir-form select { height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); padding: 0 8px; font: inherit; font-size: 13px; } .satir-form select:disabled { opacity: .5; cursor: not-allowed; } .btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; } .btn-tehlike { background: var(--brand); color: #fff; } .btn-tehlike:hover { background: var(--brand-dark); } .panel-arama { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } @media (max-width: 860px) { .panel-wrap { grid-template-columns: 1fr; } .panel-nav { position: static; } .panel-nav nav { display: flex; gap: 4px; overflow-x: auto; } .panel-nav-link { white-space: nowrap; } .panel-nav-cikis { display: none; } } /* ---------- Haber paneli ---------- */ .panel-tumu { font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: lowercase; } .panel-tumu:hover { color: var(--brand); } .haber-listesi { display: flex; flex-direction: column; } .haber { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); transition: background .15s; } .haber:last-child { border-bottom: none; } .haber:hover { background: var(--brand-soft); } .haber-gorsel { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--chip-bg); } .haber-baslik { font-size: 12.5px; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .haber:hover .haber-baslik { color: var(--text); } /* ---------- Haberler sayfası ---------- */ .haber-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .haber-kart { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: border .15s, transform .15s; } .haber-kart:hover { border-color: var(--brand); } .haber-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--chip-bg); } .haber-kart-govde { padding: 14px; } .haber-kart h2 { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .haber-kart p { font-size: 13px; color: var(--text-3); line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Reklam alanları ---------- */ .reklam { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; padding: 22px 12px 12px; /* Reklam yüklenene kadar yer tutar: sayfa zıplamaz */ min-height: 130px; } .reklam-etiket { position: absolute; top: 7px; left: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); opacity: .7; } .reklam .adsbygoogle { display: block; width: 100%; } /* Kenar çubuğundaki dikey birim daha uzun olabilir */ .reklam-sidebar { min-height: 260px; } /* Mobilde daha az yer kaplasın */ @media (max-width: 800px) { .reklam { min-height: 110px; padding: 20px 8px 8px; } .reklam-sidebar { min-height: 110px; } } /* Mobilde entry alt çubuğu tek satıra sığsın: metin etiketleri gizlenir, ikonlar kalır. Favori sayacı bilgi taşıdığı için görünür kalır. */ @media (max-width: 560px) { .action-btn span:not([data-fav-count]) { display: none; } .action-btn { padding: 0 8px; } .entry-footer { gap: 2px; } } /* Başlık girişi: sözlükte başlıklar küçük harf saklanır, kullanıcı yazarken de öyle görsün (dönüşümü sunucu yapar, bu yalnızca görünüm). */ .baslik-girdi { text-transform: lowercase; } /* ---------- AI üretim ekranı ---------- */ .uret-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .uret-form input[type="text"] { flex: 1; min-width: 240px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); padding: 0 12px; font: inherit; font-size: 14px; outline: none; } .uret-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .uretim-onizleme { border-color: var(--brand); } .uretim-onizleme .uyari { font-size: 12.5px; color: var(--text-3); background: var(--surface-2); border-left: 3px solid var(--brand); padding: 9px 12px; border-radius: 0 8px 8px 0; margin-bottom: 14px; } /* ---------- Haberden tartışma başlatma ---------- */ .haber { display: flex; align-items: stretch; gap: 0; } .haber-ic { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 9px 10px 9px 14px; } .haber-tartis { display: flex; align-items: center; padding: 0 12px; font-size: 11px; font-weight: 700; color: var(--text-3); border-left: 1px solid var(--border); white-space: nowrap; transition: background .15s, color .15s; } .haber-tartis:hover { background: var(--brand); color: #fff; } /* Haberler sayfası kartı */ .haber-kart { position: relative; } .haber-kart-ic { display: flex; flex-direction: column; } .haber-kart-tartis { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); border-top: 1px solid var(--border); background: var(--surface-2); transition: background .15s, color .15s; } .haber-kart-tartis:hover { background: var(--brand); color: #fff; } /* ---------- Başlık süzgeç şeridi ---------- */ .filtre-serit { display: flex; gap: 4px; margin: -4px 0 4px; flex-wrap: wrap; } .filtre { font-size: 12.5px; font-weight: 600; color: var(--text-3); padding: 5px 11px; border-radius: 999px; transition: background .15s, color .15s; } .filtre:hover { background: var(--chip-bg); color: var(--text); } .filtre.active { background: var(--brand); color: #fff; } /* ?entry=N ile gelindiğinde ilgili entry vurgulanır */ .entry-wrap.vurgulu .entry-card { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); } /* ---- Duyuru paneli: durum rozeti ve ilerleme çubuğu ---- */ .durum-rozet { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .durum-notr { background: var(--surface-2); color: var(--text-3); } .durum-iyi { background: rgba(22, 163, 74, .12); color: #16a34a; } .durum-uyari { background: rgba(217, 119, 6, .14); color: #d97706; } .ilerleme { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 120px; } .ilerleme-dolu { height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; } /* Onay kutulu alan (ayarlar > e-posta tercihi) */ .field-onay { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; } .field-onay input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); flex: none; cursor: pointer; } .field-onay span { font-weight: 500; } /* İnce, temaya uyan kaydırma çubuğu */ .topic-list { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .topic-list::-webkit-scrollbar { width: 10px; } .topic-list::-webkit-scrollbar-track { background: transparent; } .topic-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; /* Kenarlık zemin renginde: çubuk daha ince görünür */ border: 3px solid var(--surface); } .topic-list::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ---- Paylaş menüsü ---- */ .paylas-menu { position: absolute; z-index: 120; min-width: 194px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); animation: paylas-ac .12s ease-out; } @keyframes paylas-ac { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .paylas-menu a, .paylas-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; } .paylas-menu a:hover, .paylas-menu button:hover, .paylas-menu a:focus-visible, .paylas-menu button:focus-visible { background: var(--chip-bg); outline: none; } .paylas-menu svg { width: 17px; height: 17px; flex: none; } /* Kopyala satırı diğerlerinden ayrılsın */ .paylas-menu button { margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; color: var(--text-2); } /* Hareket azaltma tercihi olanlarda animasyon kapansın */ @media (prefers-reduced-motion: reduce) { .paylas-menu { animation: none; } }