:root{ --r:12px; } html{ --body-font:'EB Garamond',serif; } body{ font-size:calc(16px * var(--fs,1)); } .page{ display:none; } .page.active{ display:block; } @keyframes fadeUp{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} } .page.active .container{ animation:fadeUp .28s ease; } .container{ max-width:1040px;margin:0 auto; padding:calc(var(--bar-h) + 22px) 16px 48px 16px; } @media(max-width:600px){ .container{padding:calc(var(--bar-h) + 14px) 12px 48px 12px;} } .page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:10px;} .title-block{display:flex;flex-direction:column;gap:4px;} .title-ornament{display:flex;align-items:center;gap:10px;} .orn-line{height:1px;flex:1;max-width:36px;background:linear-gradient(to right,transparent,var(--accent));opacity:.55;} .orn-line.r{background:linear-gradient(to left,transparent,var(--accent));} .orn-diamond{width:6px;height:6px;background:var(--accent);transform:rotate(45deg);opacity:.7;flex-shrink:0;} .page-title-main{ font-family:'Cinzel Decorative',serif;font-size:calc(22px * var(--fs,1));font-weight:700;letter-spacing:.08em; background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 40%,#fff8e0 60%,var(--accent2) 80%,var(--accent) 100%); background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text;animation:shimmer 6s linear infinite;line-height:1.2; } @keyframes shimmer{ 0%{background-position:-200% center;} 100%{background-position:200% center;} } .page-title-sub{ font-family:'EB Garamond',serif;font-size:calc(12px * var(--fs,1));font-style:italic; color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;padding-left:2px;opacity:.8; } @media(max-width:400px){ .page-title-main{font-size:calc(17px * var(--fs,1));} .page-title-sub{font-size:calc(11px * var(--fs,1));} } .btn-newtopic{ display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:18px; border:1px solid var(--accent);background:var(--accent-dim); color:var(--accent2);font-family:'Nunito',sans-serif;font-size:calc(12px * var(--fs,1));font-weight:700; cursor:pointer;transition:all .2s;flex-shrink:0;white-space:nowrap;margin-top:6px; } .btn-newtopic:hover{background:var(--accent);color:#1a1008;} .btn-newtopic svg{width:12px;height:12px;} /* ════ TOPLULUK ARAMASI (Konu Aç yerine) — topluluk tarzı ════ */ .tpl-search{ position:relative; display:flex; align-items:center; gap:7px; margin-top:6px; flex-shrink:0; width:272px; max-width:46vw; padding:7px 13px; border-radius:18px; border:1px solid var(--accent); background:var(--accent-dim); transition:box-shadow .2s, border-color .2s; } .tpl-search:focus-within{ box-shadow:0 0 0 3px var(--accent-dim), 0 8px 22px rgba(0,0,0,.28); } .tpl-search-ico{ width:15px; height:15px; color:var(--accent2); flex-shrink:0; opacity:.85; } #tplSearchInput{ flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--text); font-family:'Nunito',sans-serif; font-size:calc(13px * var(--fs,1)); font-weight:600; } #tplSearchInput::placeholder{ color:var(--text-muted); opacity:.85; font-weight:500; } .tpl-search-clear{ border:0; background:transparent; color:var(--text-muted); cursor:pointer; font-size:calc(14px * var(--fs,1)); line-height:1; padding:2px 5px; border-radius:50%; flex-shrink:0; transition:color .15s, background .15s; } .tpl-search-clear:hover{ color:var(--text); background:rgba(255,255,255,.08); } .tpl-search-drop{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60; background:var(--surface,#171326); border:1px solid var(--border,rgba(155,109,255,.28)); border-radius:14px; box-shadow:0 16px 46px rgba(0,0,0,.55); overflow:hidden; padding:5px; animation:tsdIn .16s ease; } @keyframes tsdIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .tsd-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; text-decoration:none; color:var(--text); transition:background .14s; } .tsd-row:hover{ background:var(--accent-dim); } .tsd-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 7px currentColor; } .tsd-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .tsd-title{ font-family:'Nunito',sans-serif; font-size:calc(13px * var(--fs,1)); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tsd-cat{ font-size:calc(10.5px * var(--fs,1)); font-weight:700; letter-spacing:.02em; } .tsd-empty{ padding:18px 12px; text-align:center; color:var(--text-muted); font-size:calc(12.5px * var(--fs,1)); } .tsd-all{ display:block; width:100%; margin-top:4px; padding:11px 10px; border:0; border-top:1px solid var(--border,rgba(255,255,255,.08)); background:transparent; color:var(--accent2); font-family:'Nunito',sans-serif; font-size:calc(12px * var(--fs,1)); font-weight:700; cursor:pointer; text-align:left; transition:background .14s; } .tsd-all:hover{ background:var(--accent-dim); } .tsd-enter{ display:inline-block; min-width:15px; text-align:center; color:var(--accent); font-weight:800; } .tpl-search-banner{ display:none; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 14px; padding:11px 15px; border-radius:12px; border:1px solid var(--accent); background:var(--accent-dim); animation:tsdIn .18s ease; } .tsb-txt{ font-family:'Nunito',sans-serif; font-size:calc(13px * var(--fs,1)); color:var(--text); } .tsb-ico{ margin-right:3px; } .tsb-clear{ border:1px solid var(--border,rgba(255,255,255,.15)); background:transparent; color:var(--text-muted); font-family:'Nunito',sans-serif; font-size:calc(12px * var(--fs,1)); font-weight:700; padding:6px 12px; border-radius:14px; cursor:pointer; flex-shrink:0; transition:all .15s; white-space:nowrap; } .tsb-clear:hover{ color:var(--text); border-color:var(--accent); } @media (max-width:560px){ .page-header{ flex-wrap:wrap; } .title-block{ flex:1 1 100%; } .tpl-search{ width:100%; max-width:none; margin-top:11px; } } .mobile-stats{display:none;} @media(max-width:720px){ .mobile-stats{display:flex;gap:0;margin-bottom:14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden;} .ms-cell{flex:1;text-align:center;padding:9px 6px;border-right:1px solid var(--border);} .ms-cell:last-child{border-right:none;} .ms-val{font-family:'Cinzel',serif;font-size:calc(15px * var(--fs,1));font-weight:700;color:var(--accent2);} .ms-lbl{font-family:'Nunito',sans-serif;font-size:calc(9px * var(--fs,1));color:var(--text-muted);margin-top:1px;} } .mobile-hot{display:block;margin-bottom:14px;} .mobile-hot-header{font-family:'Cinzel',serif;font-size:calc(11px * var(--fs,1));color:var(--text-muted);letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:6px;} .mobile-hot-header::after{content:'';flex:1;height:1px;background:var(--border);} .mobile-hot-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;} .mobile-hot-scroll::-webkit-scrollbar{display:none;} .mh-pill{flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:3px;min-width:150px;max-width:180px;transition:border-color .2s,background .2s;} .mh-pill:hover{border-color:var(--accent);background:var(--surface2);} .mh-num{font-family:'Cinzel',serif;font-size:calc(10px * var(--fs,1));color:var(--accent);font-weight:700;} .mh-title{font-family:'Nunito',sans-serif;font-size:calc(12px * var(--fs,1));color:var(--text);line-height:1.35;font-weight:600;} .mh-meta{font-family:'Nunito',sans-serif;font-size:calc(10px * var(--fs,1));color:var(--text-muted);} .cat-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .cat-bar::-webkit-scrollbar{display:none;} .cat-chip{display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:22px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-family:'Nunito',sans-serif;font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer;white-space:nowrap;transition:all .22s;flex-shrink:0;user-select:none;} .cat-chip svg{width:14px;height:14px;flex-shrink:0;} .cat-chip:hover{border-color:var(--accent);color:var(--text);background:var(--surface2);} .cat-chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent2);} .sort-row{display:flex;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;} .sort-row::-webkit-scrollbar{display:none;} .sort-bar{display:flex;border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden;flex-shrink:0;} .sort-pill{font-family:'Nunito',sans-serif;font-size:calc(11px * var(--fs,1));font-weight:700;padding:6px 13px;color:var(--text-muted);cursor:pointer;transition:all .2s;border:none;background:transparent;letter-spacing:.03em;white-space:nowrap;} .sort-pill:not(:last-child){border-right:1px solid var(--border);} .sort-pill:hover{color:var(--text);background:var(--surface2);} .sort-pill.active{background:var(--accent-dim);color:var(--accent2);} .community-layout{display:block;} .card-grid{display:flex;flex-direction:column;gap:14px;} /* ════════════════════════════════════════ MODERN POST KARTI ═══════════════════════════════════════════ */ .post-card{ position:relative; background:linear-gradient(155deg,var(--surface) 0%,var(--bg2) 100%); border:1px solid var(--border);border-radius:14px; cursor:pointer; transition:transform .26s cubic-bezier(.34,1.5,.64,1),box-shadow .26s ease,border-color .22s ease; text-decoration:none;color:inherit; display:grid;grid-template-columns:140px 1fr; overflow:hidden; isolation:isolate; } .post-card::before{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0; background:linear-gradient(135deg,var(--accent-glow2),transparent 60%); opacity:.55; } .post-card::after{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.014'/%3E%3C/svg%3E"); } .post-card:hover{ transform:translateY(-3px); box-shadow:0 10px 36px rgba(0,0,0,.34),0 0 0 1px var(--accent); border-color:transparent; } .post-card > *{position:relative;z-index:1;} .card-img{position:relative;overflow:hidden;} .card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1),filter .35s;} .post-card:hover .card-img img{transform:scale(1.08);filter:saturate(1.1);} .card-img::after{ content:'';position:absolute;inset:0; background:linear-gradient(to right,transparent 50%,var(--surface) 100%),linear-gradient(to top,rgba(0,0,0,.35),transparent 60%); pointer-events:none; } .card-body{padding:16px 18px 14px;min-width:0;display:flex;flex-direction:column;} .card-meta-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;} .card-cat-pill{ display:inline-flex;align-items:center;gap:5px; font-family:'Nunito',sans-serif;font-size:calc(10px * var(--fs,1));font-weight:700; letter-spacing:.06em;text-transform:uppercase; padding:3px 10px;border-radius:10px;background:var(--accent-dim); border:1px solid var(--accent);color:var(--accent2);flex-shrink:0; } .card-cat-pill svg{width:10px;height:10px;} .card-date{font-family:'Nunito',sans-serif;font-size:calc(10.5px * var(--fs,1));color:var(--text-muted);margin-left:auto;letter-spacing:.02em;} .card-title{font-family:'Cinzel',serif;font-size:calc(15px * var(--fs,1));font-weight:600;color:var(--text);line-height:1.4;margin-bottom:6px;transition:color .22s;letter-spacing:.005em;} .post-card:hover .card-title{color:var(--accent2);} .card-desc{font-size:calc(13px * var(--fs,1));line-height:1.6;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:9px;flex:1;} .card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;} .tag{font-family:'Nunito',sans-serif;font-size:calc(10px * var(--fs,1));padding:2px 7px;border-radius:7px;background:var(--bg);border:1px solid var(--border);color:var(--text-muted);} .tag.hl{border-color:var(--accent);color:var(--accent2);background:var(--accent-dim);} .card-footer{display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px solid var(--border);margin-top:auto;} .card-user{display:flex;align-items:center;gap:6px;flex:1;min-width:0;} .avatar{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:calc(9px * var(--fs,1));font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;} .avatar .avatar-img{width:100%;height:100%;object-fit:cover;display:block;} .card-username{font-family:'Nunito',sans-serif;font-size:calc(11px * var(--fs,1));color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .role-badge{font-family:'Nunito',sans-serif;font-size:calc(9px * var(--fs,1));padding:1px 5px;border-radius:4px;font-weight:700;margin-left:3px;} .rb-yazar{background:rgba(200,146,42,.18);color:var(--accent2);border:1px solid rgba(200,146,42,.4);} .rb-mod{background:rgba(80,192,96,.15);color:#80e898;border:1px solid rgba(80,192,96,.4);} .card-stat{display:flex;align-items:center;gap:3px;font-family:'Nunito',sans-serif;font-size:calc(11px * var(--fs,1));color:var(--text-muted);white-space:nowrap;} .card-stat svg{width:11px;height:11px;} .card-stat.liked{color:#c05050;} @media(max-width:600px){ .post-card{grid-template-columns:96px 1fr;border-radius:12px;} .card-img{min-height:100px;} .card-img::after{background:linear-gradient(to right,transparent 40%,var(--surface) 100%);} .card-body{padding:13px 13px 12px;} .card-title{font-size:calc(13.5px * var(--fs,1));} .card-desc{-webkit-line-clamp:2;font-size:calc(12.5px * var(--fs,1));} .card-tags{display:none;} } /* ════════════════════════════════════════ SAHİBİ İÇİN AKSİYON BUTONLARI (Düzenle / Sil) ═══════════════════════════════════════════ */ .card-owner-actions{ position:absolute;top:8px;right:8px;z-index:3; display:flex;gap:6px; opacity:0;transform:translateY(-3px); transition:opacity .18s,transform .18s; } .post-card:hover .card-owner-actions, .card-owner-actions:focus-within{opacity:1;transform:translateY(0)} @media(hover:none){ .card-owner-actions{opacity:1;transform:translateY(0)} } .card-owner-btn{ width:30px;height:30px;border-radius:8px; display:flex;align-items:center;justify-content:center; background:rgba(14,12,10,.78);backdrop-filter:blur(6px); border:1px solid var(--border); color:var(--text-muted);cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .15s; } .card-owner-btn:hover{background:rgba(14,12,10,.92);color:var(--accent2);border-color:var(--accent);transform:scale(1.05)} .card-owner-btn svg{width:13px;height:13px} .card-owner-btn.danger:hover{color:#ff7a85;border-color:#ef4444} /* ════════════════════════════════════════ ÇÖP KUTUSU KARTLARI ═══════════════════════════════════════════ */ .post-card.is-trashed{ opacity:.78; border-color:rgba(239,68,68,.3); } .post-card.is-trashed::before{ background:linear-gradient(135deg,rgba(239,68,68,.06),transparent 70%); opacity:.7; } .post-card.is-trashed:hover{ box-shadow:0 8px 28px rgba(239,68,68,.18),0 0 0 1px rgba(239,68,68,.5); } .trash-badge{ position:absolute;top:8px;left:8px;z-index:3; display:inline-flex;align-items:center;gap:5px; padding:3px 10px;border-radius:9px; background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.4); color:#ff7a85;font-family:'Nunito',sans-serif;font-size:calc(10px * var(--fs,1));font-weight:700; letter-spacing:.04em;text-transform:uppercase; } .trash-badge svg{width:10px;height:10px} .trash-actions{ position:absolute;top:8px;right:8px;z-index:3; display:flex;gap:6px; } .trash-action-btn{ display:inline-flex;align-items:center;gap:5px; height:28px;padding:0 12px;border-radius:14px; background:rgba(14,12,10,.82);backdrop-filter:blur(6px); border:1px solid var(--border); font-family:'Nunito',sans-serif;font-size:calc(11px * var(--fs,1));font-weight:700; color:var(--text-muted);cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .trash-action-btn:hover{background:rgba(14,12,10,.95);color:var(--accent2);border-color:var(--accent)} .trash-action-btn.danger:hover{color:#ff7a85;border-color:#ef4444} .trash-action-btn svg{width:11px;height:11px} /* ════════════════════════════════════════ ARAÇ ÇUBUĞU — Tüm Konular / Çöp Kutusum ═══════════════════════════════════════════ */ .view-tabs{ display:flex;gap:0;margin-bottom:12px; border:1px solid var(--border);border-radius:18px; background:var(--surface);width:fit-content;padding:3px;overflow:hidden; } .view-tab{ display:inline-flex;align-items:center;gap:6px; padding:6px 16px;border-radius:14px; background:transparent;border:none;cursor:pointer; font-family:'Nunito',sans-serif;font-size:calc(11.5px * var(--fs,1));font-weight:700; color:var(--text-muted);transition:background .15s,color .15s; letter-spacing:.03em; } .view-tab:hover{color:var(--text)} .view-tab.active{background:var(--accent-dim);color:var(--accent2)} .view-tab svg{width:12px;height:12px} .view-tab .vt-badge{ display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:16px;padding:0 5px;border-radius:8px; background:rgba(239,68,68,.2);color:#ff7a85;font-size:calc(10px * var(--fs,1));font-weight:700; } .empty-state{text-align:center;padding:40px 20px;color:var(--text-muted);display:none;} .empty-state svg{width:30px;height:30px;opacity:.2;margin-bottom:8px;} .empty-state p{font-family:'Nunito',sans-serif;font-size:calc(13px * var(--fs,1));} /* ── PAGİNASYON ── */ .pagination{ display:flex;align-items:center;justify-content:center; gap:6px;padding:28px 0 8px; flex-wrap:wrap; } .pg-btn{ min-width:34px;height:34px;padding:0 6px;border-radius:9px; border:1px solid var(--border);background:var(--surface); color:var(--text-muted);font-family:'Nunito',sans-serif; font-size:calc(12px * var(--fs,1));font-weight:700;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:border-color .18s,color .18s,background .18s,transform .12s; user-select:none; } .pg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text);background:var(--surface2);} .pg-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent2);pointer-events:none;} .pg-btn:disabled{opacity:.3;cursor:not-allowed;} .pg-btn:active:not(:disabled){transform:scale(.92);} .pg-ellipsis{ min-width:34px;height:34px;display:flex;align-items:center;justify-content:center; font-family:'Nunito',sans-serif;font-size:calc(12px * var(--fs,1));color:var(--text-muted);user-select:none; } .pg-info{ width:100%;text-align:center; font-family:'EB Garamond',serif;font-size:calc(13px * var(--fs,1));font-style:italic; color:var(--text-muted);padding-top:4px; } .pg-info::before,.pg-info::after{content:' ✦ ';}
Tüm Kategoriler
Aksiyon
2.4B
Fantezi
3.1B
Romantik
1.9B
Gizem
890M
Bilim Kurgu
760M
Korku
540M
Macera
1.2B
Dövüş Sanatları
980M
Isekai
1.5B
Vampir
430M
Sistem / LitRPG
1.1B
Tarihi
670M
Korsan
320M
Apokalips
580M
Büyü / Sihir
870M
Saray Entrikası
490M