/* ==========================================================================
   NUSHA — DLE 21 · modern koyu tema
   --------------------------------------------------------------------------
   İlke      : Ayrım çizgiyle veya kutularla değil; beyaz alan ve asimetri ile
               kurulur. Kart/bento istismarı yok.
   Hareket   : Yalnızca renk ve opacity, en fazla 150ms. translateY / scale /
               zıplama kesinlikle yok — elemanlar fiziksel olarak sabit.
   Tipografi : Başlıklar sans (sıkı negatif tracking), gövde serif, meta mono.
   ========================================================================== */

/* ==========================================================================
   1 · BELİRTEÇLER
   ========================================================================== */

:root {
	/* yüzeyler — antrasit */
	--bg:        #22242B;
	--bg-2:      #2A2D35;
	--bg-3:      #333740;
	/* kart yüzeyi — zeminden bir ton koyu, soğuk aile */
	--card:      #1B1D24;
	--card-line: rgb(255 255 255 / 5%);
	--line:      #30343D;
	--line-2:    #3E434D;
	--line-3:    #525763;

	/* metin */
	--ink:       #EDEFF2;
	--ink-2:     #C4C9CF;
	--muted:     #A3AAB3;

	/* vurgu — çiğ neon ve mor yok, sakin bakır tonu */
	--accent:    #D8A375;
	--accent-2:  #E8B98C;
	--focus:     #E8B98C;
	--danger:    #E59B8B;
	/* çevrimiçi halkası — doygunluğu düşük adaçayı yeşili; bakır vurguyla
	   kavga etmesin diye parlaklığı metin tonlarının altında tutuldu */
	--online:    #83B992;

	/* DLE motor bileşenleri (engine.css) bu ölçüleri kullanır */
	--font-size-xs:   .72rem;
	--font-size-sm:   .84rem;
	--font-size-base: 1rem;
	--font-size-lg:   1.05rem;

	/* yazı tipleri */
	--ui:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--read: "Charter", "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--num:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* ölçü ve ritim */
	--page:     1480px;
	--pad:      clamp(18px, 4vw, 52px);
	--rail:     8rem;
	--measure:  64ch;
	--reading:  39rem;
	--t:        150ms;
	--sp-block: clamp(26px, 3.4vw, 44px);
	--sp-gap:   clamp(32px, 4vw, 64px);
}

/* ==========================================================================
   2 · TEMEL
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: dark;
	background: var(--bg);
	scrollbar-color: var(--line-2) var(--bg);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--ui);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Textarea tabanı — neden gerekli: DLE bazı referans şablonlarda alanı
   sınıfsız ya da yalnızca genişlik veren .wide sınıfıyla basıyor
   (engine.css:602 .wide → width:100%!important; renk/zemin/çerçeve VERMEZ).
   Böyle bir alan koyu temada tarayıcının beyaz textarea'sı olarak kalıyordu;
   üstelik yukarıdaki "color: inherit" yüzünden yazı da beyaza yakın oluyordu.
   Sınıflı alanlar (.form-input · .form-area · .bb-editor textarea ·
   .dlepm-editor textarea) daha güçlü seçici olduğu için kendi görünümlerini
   aynen korur — bu yalnızca çıplak kalan alanlar için taban. */
textarea {
	background-color: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 6px;
	color: var(--ink);
}

::selection { background: var(--accent); color: var(--bg); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
	background: var(--line-2);
	border: 3px solid var(--bg);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* tarayıcı otomatik doldurması koyu temayı bozmasın */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 40px var(--bg-2) inset;
	caret-color: var(--ink);
}

/* ==========================================================================
   3 · YARDIMCI
   ========================================================================== */

.sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 90;
	background: var(--ink); color: var(--bg);
	padding: .6rem 1rem; font-size: .8rem;
}
.skip:focus { left: 1rem; top: 1rem; }

.icons { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
	width: 14px; height: 14px; flex: none;
	fill: none; stroke: currentColor;
	stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
	vertical-align: -.14em;
}

/* Balon (tooltip) — js/tooltip.js tarafından sürülür.
   Konum JS'ten geliyor: position: fixed + ölçülüp hesaplanan left/top, bu
   yüzden burada transform yok. Hareket yalnızca opacity, kural gereği.
   z-index 500: temanın kendi katmanlarının (50-90) üstünde, DLE'nin açılır
   menülerinin (1000/2200) altında kalsın ki menü açılınca balonu ezmesin. */
.tip {
	position: fixed; left: 0; top: 0; z-index: 500;
	max-width: min(22rem, calc(100vw - 2rem));
	padding: .5rem .7rem;
	background-color: var(--bg-3);
	color: var(--ink);
	box-shadow: 0 6px 18px rgb(0 0 0 / 34%);
	font-family: var(--ui); font-size: .78rem; line-height: 1.45;
	letter-spacing: 0; text-transform: none;
	white-space: normal;
	pointer-events: none;
	opacity: 0; visibility: hidden;
	transition: opacity var(--t) ease, visibility 0s linear var(--t);
}
.tip--on { opacity: 1; visibility: visible; transition-delay: 0s; }
/* ok: yalnızca kenarlıklarla çizilen üçgen — rotate/transform kullanılmıyor */
.tip::after {
	content: ""; position: absolute; top: 100%; left: var(--tip-ax, 50%);
	margin-left: -5px;
	border: 5px solid transparent; border-top-color: var(--bg-3);
}
.tip--below::after {
	top: auto; bottom: 100%;
	border-top-color: transparent; border-bottom-color: var(--bg-3);
}

.wrap {
	max-width: var(--page);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* ==========================================================================
   4 · MASTHEAD
   ========================================================================== */

/* .masthead artık yalnızca yapışkan sarmalayıcı; kart görünümü içerideki
   .masthead-card'da. Zemin opak (--bg), böylece kaydırırken içerik header'ın
   arkasından görünmez. */
.masthead {
	z-index: 50;
	background: var(--bg);
	padding-block: clamp(12px, 1.6vw, 20px);
}

.masthead-card {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .9rem 2rem;
	padding: clamp(13px, 1.5vw, 18px) clamp(18px, 2.2vw, 26px);
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 10px;
}

.brand {
	display: inline-flex; flex-direction: column; gap: .38rem;
	transition: color var(--t) ease;
}
.brand-name {
	font-weight: 800; font-size: 1.3rem;
	letter-spacing: .2em; text-transform: uppercase;
	line-height: 1; padding-left: .2em;
}
.brand-tag {
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .04em;
	color: var(--muted);
	transition: color var(--t) ease;
}
.brand:hover .brand-name,
.brand:hover .brand-tag { color: var(--accent-2); }
.brand-dot { color: var(--accent); }

.masthead-side {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .9rem 1.5rem;
	margin-left: auto;
}

/* Arama: ikon <summary>, kutu <details> ile native açılır/kapanır (JS yok).
   Hesap menüsüyle (.account-menu) aynı kalıp. */
.masthead-search { position: relative; }
.masthead-search > summary {
	display: inline-flex; align-items: center;
	cursor: pointer; list-style: none;
	color: var(--muted);
	transition: color var(--t) ease;
}
.masthead-search > summary::-webkit-details-marker { display: none; }
.masthead-search > summary::marker { content: ""; }
.masthead-search > summary:hover,
.masthead-search[open] > summary { color: var(--accent-2); }
.masthead-search .ico { display: block; width: 16px; height: 16px; }

.masthead-search-panel {
	position: absolute; right: 0; top: calc(100% + 12px); z-index: 70;
	display: flex; align-items: center; gap: .6rem;
	width: min(20rem, 76vw);
	padding: .55rem .8rem;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 7px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, .38);
	opacity: 0; visibility: hidden;
	transition: opacity var(--t) ease;
}
.masthead-search[open] .masthead-search-panel { opacity: 1; visibility: visible; }

.masthead-search-panel input {
	flex: 1; min-width: 0;
	border: 0; background: transparent;
	padding: .3rem 0;
	font-size: .88rem; color: var(--ink);
}
.masthead-search-panel input::placeholder { color: var(--muted); }
.masthead-search-panel input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.masthead-search-panel button {
	border: 0; background: transparent; cursor: pointer; padding: 0;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--muted);
	transition: color var(--t) ease;
}
.masthead-search-panel button:hover { color: var(--accent-2); }

.topnav {
	display: flex; align-items: center; gap: 1.5rem;
	font-family: var(--num);
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}
.topnav a { transition: color var(--t) ease; }
.topnav a:hover { color: var(--ink); }
.topnav--quiet { letter-spacing: .06em; font-size: .7rem; }

/* Açılır kategori menüsü — hesap menüsü/arama kutusuyla aynı native <details>
   kalıbı. Panel, {catmenu} çıktısını (categorymenu.tpl) taşır. */
.navdrop { position: relative; }
.navdrop > summary {
	display: inline-flex; align-items: center; gap: .35rem;
	cursor: pointer; list-style: none;
	color: var(--muted);
	transition: color var(--t) ease;
}
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop > summary::marker { content: ""; }
.navdrop > summary:hover,
.navdrop[open] > summary { color: var(--ink); }
.navdrop > summary .ico { display: block; width: 13px; height: 13px; }
.navdrop[open] > summary .ico { color: var(--accent); }

.navdrop-panel {
	position: absolute; left: 0; top: calc(100% + 14px); z-index: 70;
	width: min(15rem, 62vw);
	max-height: min(60vh, 26rem); overflow: hidden auto;
	margin: 0; padding: .45rem .6rem;
	list-style: none;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 7px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, .38);
	/* üst menünün büyük-harf ve harf-aralığı mirasını keser */
	text-transform: none; letter-spacing: normal;
	opacity: 0; visibility: hidden;
	transition: opacity var(--t) ease;
}
.navdrop[open] .navdrop-panel { opacity: 1; visibility: visible; }

.navdrop-panel a {
	display: block;
	padding: .42rem .6rem; margin: 0 -.6rem;
	border-radius: 4px;
	color: var(--ink-2); font-size: .88rem;
	transition: color var(--t) ease, background-color var(--t) ease;
}
.navdrop-panel a:hover { color: var(--ink); background-color: var(--bg-3); }

.account { min-width: 0; }

@media (min-width: 760px) {
	.masthead { position: sticky; top: 0; }
}

/* ---- üst şerit: öne çıkan yazılar -------------------------------------- */

.strip { margin-top: clamp(18px, 2.3vw, 28px); }

.strip-list {
	list-style: none; margin: 0;
	padding: clamp(14px, 1.6vw, 19px) clamp(16px, 1.8vw, 22px);
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}
@media (min-width: 900px) {
	.strip-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.strip-link {
	display: flex; align-items: center; gap: .75rem;
	color: var(--ink);
	transition: color var(--t) ease;
}
.strip-link:hover { color: var(--accent-2); }

.strip-thumb {
	flex: none; width: 42px; height: 42px; border-radius: 50%;
	background-color: var(--bg-3);
	transition: opacity var(--t) ease;
}
.strip-thumb img {
	display: block; width: 100%; height: 100%;
	object-fit: cover; border-radius: 50%;
}
.strip-thumb--empty { display: grid; place-items: center; color: var(--muted); }
.strip-thumb--empty .ico { width: 16px; height: 16px; }
.strip-link:hover .strip-thumb { opacity: .82; }

.strip-body { min-width: 0; }
.strip-title {
	display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--read); font-size: .9rem; line-height: 1.38;
}
.strip-meta {
	display: block; margin-top: .22rem;
	font-family: var(--num); font-size: .62rem;
	letter-spacing: .05em;
	color: var(--muted);
}

/* ---- misafir giriş formu ------------------------------------------------ */

.guest { display: flex; align-items: center; gap: .7rem; }

.guest input[type="text"],
.guest input[type="password"] {
	width: 8.5rem;
	border: 0; border-bottom: 1px solid var(--line-2);
	background: transparent;
	padding: .3rem .1rem;
	font-size: .8rem; color: var(--ink);
}
.guest input:focus { border-bottom-color: var(--accent); }
.guest input::placeholder { color: var(--muted); }

.guest-alt { font-size: .72rem; color: var(--muted); transition: color var(--t) ease; }
.guest-alt:hover { color: var(--ink); }

/* ---- düğmeler ----------------------------------------------------------- */
/* .btn, .bbcodes, .btn-border artık engine.css'te: DLE motor sınıfları.
   Burada yalnızca temanın kendi mini varyantı tanımlanır. */

.btn-mini {
	appearance: none; cursor: pointer;
	border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .08em; text-transform: uppercase;
	padding: .4rem .7rem;
	transition: background-color var(--t) ease, color var(--t) ease;
}
.btn-mini:hover { background: transparent; color: var(--ink); }
.btn-mini--ghost { background: transparent; color: var(--muted); border-color: var(--line-2); }
.btn-mini--ghost:hover { color: var(--ink); border-color: var(--ink); }

/* ==========================================================================
   5 · SAYFA GÖVDESİ / IZGARA
   ========================================================================== */

.board {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-gap);
	padding-block: clamp(30px, 4.4vw, 56px);
}
.col-main { min-width: 0; }

@media (min-width: 1024px) {
	.board { grid-template-columns: minmax(0, 1fr) 300px; }

	/* Makale detayında kenar çubuğu hiç basılmıyor ([not-available=showfull],
	   main.tpl) → ızgara tek kolona düşer, .col-main tam genişliği alır.
	   Sabit 300px'lik ikinci iz boş kalmasın diye bu şart gerekli.
	   Tek kolonda metin ölçüsü de bir tık açılır; hero görseli ve kart
	   zaten tam genişliği kaplar, sayfa "daracık" durmaz. */
	.board:not(:has(> .side)) {
		grid-template-columns: minmax(0, 1fr);
		--reading: 46rem;
	}
	/* geniş kartta başlık da ölçüsünü kaybetmesin (kart 40ch'te boğulmasın) */
	.board:not(:has(> .side)) .article-title { max-width: 60ch; }
}

/* ==========================================================================
   6 · BÖLÜM BAŞLIĞI
   ========================================================================== */

.section {
	display: grid; grid-template-columns: minmax(0, 1fr);
	padding-bottom: var(--sp-block);
}
.section-label { display: none; }

.section-title {
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.35rem, 1.4vw + 1.05rem, 1.6rem);
	line-height: 1.25; letter-spacing: -.014em;
	text-wrap: balance;
}
.section-desc {
	margin: .9em 0 0; max-width: 56ch;
	font-family: var(--read); font-size: 1.0625rem; line-height: 1.62;
	color: var(--ink-2);
}

@media (min-width: 760px) {
	.section { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); }
	.section-label {
		display: block; padding-top: .55em;
		font-family: var(--num); font-size: .68rem;
		letter-spacing: .1em; text-transform: uppercase;
		color: var(--accent);
	}
	.section-main { grid-column: 2; }
}

/* ==========================================================================
   7 · ADMIN ÖNİZLEMESİ  (preview.tpl)
   --------------------------------------------------------------------------
   .post ailesi artık yalnızca önizleme şablonunda kullanılıyor; asıl yazı
   listesi shortstory.tpl'in .entry ailesidir (aşağıda).
   ========================================================================== */
.post { padding-block: var(--sp-block); }
.post-body { min-width: 0; }

.post-date { font-variant-numeric: tabular-nums; }
.post-cat, .post-flag { color: var(--accent); }
.post-dot { color: var(--line-3); }

.post-title {
	margin: 0 0 .5em; max-width: 46ch;
	font-weight: 700;
	font-size: clamp(1.2rem, .55vw + 1.02rem, 1.5rem);
	line-height: 1.22; letter-spacing: -.014em;
	text-wrap: balance;
}
.post-title a { transition: color var(--t) ease; }
.post-title a:hover { color: var(--accent-2); }

.post-text {
	margin: 0 0 1.1em; max-width: var(--measure);
	font-family: var(--read); font-size: 1.0625rem; line-height: 1.66;
	color: var(--ink-2);
}
.post-text:empty { display: none; }

.post-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem;
	margin: 0; padding: 0; list-style: none;
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--muted);
}
.post-meta li { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.post-meta a { transition: color var(--t) ease; }
.post-meta a:hover { color: var(--accent-2); }

/* ==========================================================================
   YAZI LİSTESİ — modern kart düzeni  (shortstory.tpl · searchresult.tpl)
   --------------------------------------------------------------------------
   Her yazı kendi kartında durur: hafif yuvarlatılmış köşeler, ince çerçeve,
   zeminden koyu yüzey. Kartlar fiziksel olarak sabittir — hover'da zıplama
   (translateY) veya büyüme (scale) YOK. Yalnızca ince çerçeve çizgisi ile
   başlık rengi 150ms'de yumuşakça netleşir.
   Başlık kibar (~18.5px), gövde önde, künye kartın en altında tek satır.
   ========================================================================== */

/* Yazı akışı: temel tek sütun; en az iki kart varsa geniş ekranda yan yana
   iki sütun. :has() sayesinde makale detayı (.article) ve statik sayfa (.page)
   tek sütunda kalır — onlarda .entry yok. Boşluk artık grid gap'inden gelir. */
.stream {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(14px, 1.8vw, 20px);
}

.entry {
	padding: clamp(12px, 1.5vw, 16px);
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}

/* ---- bilgi satırı: tek satır, minik, soluk ----------------------------- */

.entry-meta {
	margin: clamp(12px, 1.5vw, 16px) 0 0;
	font-family: var(--num); font-size: .72rem; line-height: 1.7;
	letter-spacing: .015em;
	color: var(--muted);
}
.entry-meta a { color: inherit; transition: color var(--t) ease; }
.entry-meta a:hover { color: var(--ink-2); }

/* ---- künye parçaları: ikon + metin bitişik durur ----------------------- */
.entry-item { display: inline-flex; align-items: center; gap: .3rem; }
.entry-item .ico { flex: none; width: 12px; height: 12px; }
.entry-sep { color: var(--line-3); }

/* ---- üst şerit: kategori rozeti + okuma sayısı -------------------------- */

.entry-kicker {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
	margin: 0 0 .6rem;
}

.entry-cat {
	display: inline-block;
	padding: .1rem .5rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	font-family: var(--num); font-size: .62rem; line-height: 1.6;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted);
}
.entry-cat a { color: var(--accent); transition: color var(--t) ease; }
.entry-cat a:hover { color: var(--accent-2); }

.entry-read {
	display: inline-flex; align-items: center; gap: .3rem;
	font-family: var(--num); font-size: .62rem; line-height: 1.6;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted);
}
.entry-read .ico { flex: none; width: 12px; height: 12px; }

/* ---- başlık: kibar, bağırmayan ---------------------------------------- */

.entry-title {
	margin: 0 0 .5rem;
	font-size: 1.05rem; line-height: 1.32;
	font-weight: 600; letter-spacing: -.008em;
	color: var(--ink);
}
.entry-title a { color: inherit; transition: color var(--t) ease; }
.entry:hover .entry-title a,
.entry-title a:hover { color: var(--accent-2); }

/* ---- gövde: içerik önde ----------------------------------------------- */

.entry-media { display: block; }
.entry-media a { display: block; }
/* contain: görsel KIRPILMAZ, kendi oranını korur. Kutu yine eşit kalır
   (aspect-ratio sabit); görsel içeride ortalanır, artan alan zeminle dolar. */
.entry-media img {
	display: block; width: 100%;
	aspect-ratio: 4 / 3; object-fit: contain;
	background-color: var(--bg-2);
	border-radius: 6px;
	transition: opacity var(--t) ease;
}
.entry-media a:hover img { opacity: .8; }

.entry-body { min-width: 0; }
/* görsel varsa: ince ayraç görselin ALTINDA (künyenin üstünde değil) */
.entry-media + .entry-body {
	margin-top: clamp(12px, 1.5vw, 16px);
	padding-top: clamp(12px, 1.5vw, 16px);
	border-top: 1px solid var(--line);
}
.entry-text {
	font-family: var(--read); font-size: .85rem; line-height: 1.65;
	color: var(--ink-2);
}
.entry-text p { margin: 0 0 .75em; }
.entry-text p:last-child { margin-bottom: 0; }
.entry-text img { max-width: 100%; height: auto; }
.entry-text:empty { display: none; }

@media (min-width: 1024px) {
	/* Liste ekranları (ana sayfa · kategori · favoriler · arama): kart ızgarası
	   iki sütun. Kural artık kart SAYISINA bağlı değil — eski hâli
	   ":has(> .entry + .entry)" idi ve yan yana en az iki kart istiyordu;
	   favoriler gibi tek/az kartlı listeler bu yüzden tek sütuna düşüyordu.
	   .article (makale) ve .page (pm · statik · form) kartları bu kurala
	   girmez, tek sütunda kalır. */
	.stream:has(> .entry) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.entry-title { font-size: .98rem; }
	.entry-text { font-size: .82rem; }
}

/* ==========================================================================
   8 · MAKALE — kart kabı + başlık bloğu
   ========================================================================== */

.article {
	padding: clamp(20px, 2.6vw, 34px);
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}

.article-head { padding-bottom: clamp(16px, 2.2vw, 26px); }

.article-kicker {
	display: flex; flex-wrap: wrap; gap: .45rem 1.1rem;
	margin: 0 0 .85em;
	font-family: var(--num); font-size: .7rem;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted);
}
.article-kicker a { transition: color var(--t) ease; }
.article-kicker a:hover { color: var(--ink); }
.article-kicker span:first-child { color: var(--accent); }

.article-title {
	margin: 0 0 .5em; max-width: 40ch;
	font-weight: 700;
	font-size: clamp(1.15rem, .9vw + .95rem, 1.4rem);
	line-height: 1.3; letter-spacing: -.014em;
	text-wrap: balance;
}

/* ---- makale künyesi: yatay şerit ---------------------------------------- */

.article-aside {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .5rem 1.4rem;
	margin: 0 0 clamp(26px, 3.6vw, 44px);
	font-family: var(--num); font-size: .72rem;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--muted);
}
.article-aside > * { margin: 0; }

.aside-byline {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--ui); font-weight: 600; font-size: .84rem;
	letter-spacing: 0; text-transform: none;
	color: var(--ink);
}
.aside-line { display: inline-flex; align-items: center; gap: .45rem; }
.aside-line a { transition: color var(--t) ease; }
.aside-line a:hover { color: var(--accent-2); }

.article-rate { display: inline-flex; align-items: center; gap: .45rem; }
.article-rate a { transition: color var(--t) ease; }
.article-rate a:hover { color: var(--accent-2); }
.article-rate img { display: inline-block; vertical-align: middle; }

.aside-tools { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.aside-tools a { display: inline-flex; align-items: center; gap: .4rem; transition: color var(--t) ease; }
.aside-tools a:hover { color: var(--accent-2); }

/* ---- makale manşet görseli --------------------------------------------- */

.article-hero { margin: 0 0 clamp(30px, 4vw, 52px); }
.article-hero img {
	width: 100%; aspect-ratio: 16 / 9;
	object-fit: cover; background: var(--bg-3);
}
.article-hero figcaption {
	margin-top: .6rem;
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .04em; color: var(--muted);
}

/* ---- makale gövdesi ---------------------------------------------------- */

.article-text {
	max-width: var(--reading);
	font-family: var(--read); font-size: .9rem; line-height: 1.75;
	color: var(--ink);
}

.article-text p { margin: 0 0 1.15em; }
.article-text h2, .article-text h3, .article-text h4 {
	margin: 2.1em 0 .6em;
	font-family: var(--ui); font-weight: 700;
	line-height: 1.2; letter-spacing: -.015em;
}
.article-text h2 { font-size: 1.25rem; }
.article-text h3 { font-size: 1.05rem; }
.article-text h4 { font-size: .95rem; }

.article-text a {
	color: var(--ink); text-decoration: underline;
	text-decoration-color: var(--line-3); text-underline-offset: 3px;
	transition: color var(--t) ease, text-decoration-color var(--t) ease;
}
.article-text a:hover { color: var(--accent-2); text-decoration-color: var(--accent); }

.article-text blockquote {
	margin: 1.8em 0; padding-left: 1.3em;
	border-left: 2px solid var(--accent);
	color: var(--ink-2); font-style: italic;
}
.article-text ul, .article-text ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article-text li { margin: .35em 0; }
.article-text img { margin: 1.6em 0; }
.article-text figure { margin: 1.8em 0; }
.article-text figcaption {
	margin-top: .55em;
	font-family: var(--ui); font-size: .8rem; line-height: 1.5;
	color: var(--muted);
}
/* Kod bloğu. Rengi açıkça --ink, text-shadow kapalı: DLE sayfada <pre>
   görürse public/prism/prism.js'i yükler (main.php:410-413) ve o dosya DOM
   hazır olduğunda açık temalı public/prism/prism.css'i sayfaya enjekte eder
   (prism.js:21-37). O CSS `text-shadow: 0 1px #fff` ve açık tema renkleri
   getirir — koyu zeminde kod metnini bulanıklaştıran şey bu. */
.article-text pre {
	margin: 1.6em 0; padding: 1.05em 1.15em;
	border: 1px solid var(--line); border-radius: 6px;
	background: var(--bg-2); overflow: auto;
	color: var(--ink);
	text-shadow: none;
	-webkit-font-smoothing: auto;
	font-family: var(--num); font-size: .85rem; line-height: 1.6;
}
.article-text code { font-family: var(--num); font-size: .9em; }
/* Kod bloğu içindeki <code>: satır içi kuralın .9em'i ve Prism'in .953em'i
   uygulanmasın (12-13px'e düşüp bulanık görünüyordu), gölge de kapalı kalsın. */
.article-text pre code,
.article-text pre code[class*="language-"],
.scriptcode code {
	font-family: var(--num);
	font-size: inherit; line-height: inherit;
	color: var(--ink);
	text-shadow: none;
	background: none;
}

/* --- Prism sözdizimi renkleri ------------------------------------------
   Prism'in enjekte ettiği CSS açık tema için yazılmış (siyah metin, beyaz
   gölge, açık zemin). Kendi CSS'imizi ondan SONRA değil, DAHA ÖZGÜL yazarak
   eziyoruz: seçiciler (0,1,2) · (0,2,1) · (0,3,1) özgüllükte, Prism'inkiler
   (0,1,1) · (0,2,0). Böylece enjeksiyon sırası ne olursa olsun palet bizim.
   Palet yalnızca tema jetonlarından kurulu. */
.article-text pre[class*="language-"] {
	background: var(--bg-2);
	border-color: var(--line);
	color: var(--ink);
	text-shadow: none;
}
.article-text pre .token { color: inherit; }
.article-text pre .token.comment,
.article-text pre .token.prolog,
.article-text pre .token.doctype,
.article-text pre .token.cdata { color: var(--muted); }
.article-text pre .token.punctuation { color: var(--line-3); }
.article-text pre .token.tag,
.article-text pre .token.attr-name,
.article-text pre .token.property,
.article-text pre .token.boolean,
.article-text pre .token.number,
.article-text pre .token.constant,
.article-text pre .token.symbol { color: var(--accent-2); }
.article-text pre .token.string,
.article-text pre .token.char,
.article-text pre .token.builtin,
.article-text pre .token.inserted,
.article-text pre .token.selector { color: var(--online); }
.article-text pre .token.operator,
.article-text pre .token.entity,
.article-text pre .token.url,
.article-text pre .token.namespace { color: var(--ink-2); }
.article-text pre .token.atrule,
.article-text pre .token.attr-value,
.article-text pre .token.keyword { color: var(--accent); }
.article-text pre .token.function,
.article-text pre .token.class-name { color: var(--accent-2); }
.article-text pre .token.regex,
.article-text pre .token.important,
.article-text pre .token.variable { color: var(--danger); }
/* Prism toolbar eklentisinin "kopyala" düğmesi (blok üzerine gelince çıkar) */
.article-text div.code-toolbar > .toolbar > .toolbar-item > button,
.article-text div.code-toolbar > .toolbar > .toolbar-item > span {
	background: none; border: 0;
	color: var(--muted);
	text-shadow: none;
	font-family: var(--num); font-size: .72rem;
	cursor: pointer;
	transition: color var(--t) ease;
}
.article-text div.code-toolbar > .toolbar > .toolbar-item > button:hover,
.article-text div.code-toolbar > .toolbar > .toolbar-item > span:hover { color: var(--accent-2); }
.article-text :not(pre) > code {
	background: var(--bg-3); padding: .1em .38em;
	color: var(--accent-2);
}
.article-text table {
	width: 100%; margin: 1.6em 0; border-collapse: collapse;
	font-family: var(--ui); font-size: .9rem;
}
.article-text th, .article-text td {
	padding: .55em .7em; border-bottom: 1px solid var(--line); text-align: left;
}
.article-text th { font-weight: 700; }
.article-text iframe, .article-text video { max-width: 100%; }

.article-pages {
	margin-top: 2em;
	font-family: var(--num); font-size: .75rem;
	letter-spacing: .06em; text-transform: uppercase;
}
.article-pages a, .article-pages span { display: inline-block; padding: .15em .5em; }
.article-pages a { color: var(--ink-2); transition: color var(--t) ease; }
.article-pages a:hover { color: var(--accent-2); }
.article-pages span { color: var(--accent); font-weight: 700; }

/* ---- makale etiketleri ------------------------------------------------- */

.article-tags { margin-top: clamp(22px, 2.8vw, 32px); max-width: var(--reading); }
.article-tags-head {
	margin: 0 0 .7rem;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--muted);
}
.article-tags-list {
	margin: 0; line-height: 1.9;
	font-family: var(--num); font-size: .72rem;
	color: var(--line-3);
}
.article-tags-list a { color: var(--ink-2); transition: color var(--t) ease; }
.article-tags-list a:hover { color: var(--accent-2); }

/* ---- önceki / sonraki yazı --------------------------------------------- */

.article-nav {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
	margin-top: clamp(20px, 2.6vw, 28px);
}
.article-nav:empty { display: none; }
.article-nav-link {
	display: block; min-width: 0;
	padding: clamp(16px, 2.2vw, 22px);
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}

.article-nav:empty { display: none; }
.article-nav-dir {
	display: inline-flex; align-items: center; gap: .35rem;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .11em; text-transform: uppercase;
	color: var(--muted);
	transition: color var(--t) ease;
}
.article-nav-title {
	display: block; margin-top: .5rem;
	font-family: var(--ui); font-weight: 700; font-size: 1rem;
	line-height: 1.3; letter-spacing: -.012em;
	color: var(--ink);
	transition: color var(--t) ease;
}
.article-nav-link:hover .article-nav-dir { color: var(--accent); }
.article-nav-link:hover .article-nav-title { color: var(--accent-2); }

/* ==========================================================================
   9 · YORUMLAR
   ========================================================================== */

.talk { margin-top: clamp(38px, 5vw, 64px); }

/* Yorum listesi başlığı. .addcomment-title ile aynı tipografi: "Yorumlar" ve
   "Yorum yaz" bir çift gibi okunsun. Sayı mono ve sönük, başlığın ağırlığını
   çalmasın. */
.talk-title {
	margin: 0 0 1.4rem;
	font-weight: 700; font-size: 1.15rem; letter-spacing: -.012em;
}

/* Hiç yorum yokken "Yorumlar (0)" yetim kalmasın — başlık da, altında
   açılan boşluk da kalkar; sayfa doğrudan "Yorum yaz" formuna geçer.
   ÖĞE varlığına bakılıyor, :empty'ye değil: DLE boş listede
   <div id="dle-comments-list"> içine yalnızca bir satır sonu bırakıyor
   (comments.class.php:1101), o yüzden :empty hiç tutmaz. İki iskelet de
   kapsanıyor: ağaçsız modda kardeş <div id="comment-id-N">, ağaç modunda
   .comments-tree-item. */
.talk:not(:has(#dle-comments-list > div, .comments-tree-item)) .talk-title { display: none; }
.talk:not(:has(#dle-comments-list > div, .comments-tree-item)) .addcomment { margin-top: 0; }
.talk-count {
	margin-left: .45rem;
	font-family: var(--num); font-size: .78rem; font-weight: 400;
	letter-spacing: .06em; font-variant-numeric: tabular-nums;
	color: var(--muted);
}

@media (min-width: 900px) {
	.talk { display: block; }
}

/* ---- liste iskeleti: DLE'nin ürettiği <ol class="comments-tree-list"> // <li>
   ve tree_comments kapalıyken üretilen kardeş <div id="comment-id-N"> ------ */

.comments-tree-list { list-style: none; margin: 0; padding: 0; }
.comments-tree-item { margin: 0; padding: 0; }

/* İki iskelet de aynı ritmi alsın: kardeş div (tree kapalı) ve kardeş <li>. */
#dle-comments-list > div[id^="comment-id-"] + div[id^="comment-id-"],
.comments-tree-item + .comments-tree-item { margin-top: clamp(12px, 1.6vw, 18px); }

/* İç içe modda girintiyi .comment--reply verir; burada padding bırakılmaz
   ki iç içe geçme seviyesi 0 olan kurulumlarla aynı hizada kalsın. */
.comments-tree-item > .comments-tree-list {
	margin-top: clamp(12px, 1.6vw, 18px);
	padding-left: 0;
}

/* Yanıt: DLE'nin [childrencomments] bloğu (comments.class.php:457-465)
   hem iç içe hem düz modda set edilir, yani bu sınıf her ikisinde de çalışır. */
.comment--reply {
	margin-left: clamp(20px, 4vw, 48px);
	border-left: 2px solid var(--line-3);
}

/* ---- tek yorum: kart ---------------------------------------------------
   sol: avatar · üst: kimlik satırı · orta: yorum · alt: aksiyonlar ------ */

.comment {
	padding: clamp(16px, 2vw, 22px);
	background-color: var(--bg-2);
	border: 1px solid var(--card-line);
	border-radius: 6px;
}


/* Künye şeridi: avatar + kimlik + aksiyonlar, metnin ALTINDA tek satır. */
.comment-foot {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .5rem .8rem;
	margin-top: clamp(12px, 1.6vw, 16px);
	padding-top: clamp(10px, 1.4vw, 13px);
	border-top: 1px solid var(--line);
}
.comment-avatar {
	display: block; width: 30px; height: 30px; flex: none;
	border-radius: 50%;
	background-color: var(--bg-3);
	background-image: url(../images/avatar.svg);
	background-size: cover; background-position: center;
	/* Durum halkası: nötr taban, çevrimiçiyken yeşile döner. outline seçildi
	   çünkü yerleşime girmez — halka açıldığında avatarı 1px kaydırmaz ve
	   yanındaki metnin konumunu bozmaz. */
	outline: 2px solid var(--line-2);
	outline-offset: 2px;
	transition: outline-color var(--t) ease;
}
/* Yalnızca çevrimiçi durumu işaretlenir. Kayıtlı ama çevrimdışı üye de misafir
   de nötr taban halkasını taşır; is-offline sınıfı şablonda ayrımı belgelemek
   için duruyor, şu an ek bir kural gerektirmiyor. */
.comment-avatar.is-online { outline-color: var(--online); }

/* Künye şeridi: metnin altında, tek satır. */
.comment-head {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem;
	margin: 0;
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--muted);
}
.comment-author {
	font-family: var(--ui); font-size: .84rem; font-weight: 600;
	letter-spacing: 0; text-transform: none;
	color: var(--ink);
	flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere;
}
/* Rozet, tarih ve çipler kırılmaz ve küçülmez. Eskiden satır taşınca flex
   bunları sıkıştırıyor, metin kendi kutusundan taşıp komşusunun üstüne
   biniyordu. Artık küçülmek yerine alt satıra iniyorlar. */
.comment-badge, .comment-date, .post-dot, .comment-chip { flex: none; white-space: nowrap; }
.comment-head a { transition: color var(--t) ease; }
.comment-head a:hover { color: var(--accent-2); }
/* {mass-action}: toplu işlem onay kutusu — künye çiplerinin ardında */
.comment-head label { display: inline-flex; align-items: center; cursor: pointer; }
.comment-head input[type="checkbox"] {
	accent-color: var(--accent);
	width: 15px; height: 15px; margin: 0; cursor: pointer;
	outline: 1px solid var(--line-3); outline-offset: 1px;
	transition: outline-color var(--t) ease;
}
.comment-head label:hover input[type="checkbox"] { outline-color: var(--accent); }

.comment-badge {
	padding: .06rem .4rem;
	background: var(--accent); color: var(--bg);
	font-size: .58rem; letter-spacing: .1em;
}
.comment-date { font-variant-numeric: tabular-nums; }

/* İkon çipler: üye istatistiği ve yönetici IP'si. Metin yerine ikon, tam
   değer title tooltip'inde — kimlik satırını tek satırda tutmak için.
   Kutu/border yok, ayrım boşlukla: tema kuralı. */
.comment-chip {
	display: inline-flex; align-items: center; gap: .3rem;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	cursor: help;
}
.comment-chip .ico { width: 12px; height: 12px; }

/* {ip} değeri DLE'den "IP: <a …>1.2.3.4</a>" olarak geliyor: hem etiket
   metni hem bağlantı içeriyor. Etiket metin düğümü font-size:0 ile görsel
   olarak sıfırlanıyor, bağlantı kendi boyutunu geri alıyor. DİKKAT:
   display:none ya da visibility:hidden KULLANILMAMALI — o zaman ekran
   okuyucu da IP'yi kaybeder. font-size:0 erişilebilirlik ağacını bozmaz,
   AT yine "IP: 1.2.3.4" okur; üstelik tıklayınca DLE'nin IP menüsü açılır. */
.comment-chip--ip { font-size: 0; gap: 0; cursor: auto; }
.comment-chip--ip .ico { margin-right: .3rem; }
.comment-chip--ip a { font-size: .68rem; color: var(--ink-2); transition: color var(--t) ease; }
.comment-chip--ip a:hover { color: var(--accent-2); }
/* Yönetici değilse {ip} boş string; ikon da [group=1] ile gelmediği için
   span gerçekten çocuksuz kalır ve burada kaybolur. */
.comment-chip--ip:empty { display: none; }

.comment-text {
	font-family: var(--read); font-size: 1.0625rem; line-height: 1.7;
	color: var(--ink-2);
	overflow-wrap: break-word;
}
.comment-text p { margin: 0 0 .9em; }
.comment-text p:last-child { margin-bottom: 0; }
.comment-text a {
	color: var(--ink); text-decoration: underline;
	text-decoration-color: var(--line-3); text-underline-offset: 3px;
	transition: color var(--t) ease, text-decoration-color var(--t) ease;
}
.comment-text a:hover { color: var(--accent-2); text-decoration-color: var(--accent); }
.comment-text img, .comment-images img {
	max-width: 100%; height: auto;
	margin: 1em 0;
}

.comment-images { margin-top: 1em; }

.comment-sign {
	margin: 1em 0 0; padding-top: .7em;
	border-top: 1px solid var(--line);
	font-family: var(--num); font-size: .7rem; line-height: 1.6;
	color: var(--muted);
}

.comment-replies {
	margin: .85em 0 0;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--accent);
}

/* aksiyonlar — künye şeridinin sağ ucunda */
.comment-actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem;
	margin: 0 0 0 auto;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted);
}
.comment-actions:empty { display: none; }
.comment-actions a { display: inline-flex; align-items: center; gap: .3rem; transition: color var(--t) ease; }
.comment-actions a:hover { color: var(--accent-2); }

/* Puanlama: aksiyon satırının sağına yaslanır. Gövdeyi [rating] bloğu
   verir; DLE yorum puanlaması kapalıysa blok komple silinir. */
.comment-rate {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: .45rem;
	font-size: .68rem;
}
.comment-rate.is-positive .ratingtypeplus,
.comment-rate.is-positive .ratingtypeplusminus { color: var(--accent-2); }
.comment-rate.is-negative .ratingtypeplus,
.comment-rate.is-negative .ratingtypeplusminus { color: var(--danger); }
/* Nötr (puan tam 0, yani henüz oy yok): rakam geri çekilir ki "0" puan gibi
   okunmasın; oy verme bağlantıları tam parlaklıkta kalır. Üç durumdan
   yalnızca biri kalır (comments.class.php:636-651). */
.comment-rate.is-neutral .ratingtypeplus,
.comment-rate.is-neutral .ratingtypeplusminus {
	color: var(--muted);
	font-size: .62rem;
	opacity: .75;
}

.comment--mine .comment-author { color: var(--accent-2); }

/* DLE'nin toplu işlem çubuğu (yalnızca yetkili gruplar) */
.mass_comments_action {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
	margin-top: clamp(26px, 3.2vw, 38px);
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.mass_comments_action select,
.mass_comments_action button { font-family: inherit; font-size: inherit; }
.mass_comments_action button {
	cursor: pointer; border: 1px solid var(--line-2); background: transparent;
	color: var(--ink-2); padding: .35rem .7rem;
	transition: color var(--t) ease, border-color var(--t) ease;
}
.mass_comments_action button:hover { color: var(--ink); border-color: var(--ink); }

/* ---- yorum formu ------------------------------------------------------- */

.addcomment { margin-top: clamp(38px, 5vw, 64px); }
.addcomment-title {
	margin: 0 0 1.2rem;
	font-weight: 700; font-size: 1.15rem; letter-spacing: -.012em;
}

.addcomment-guest { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-bottom: 1.1rem; }
.addcomment-guest input {
	flex: 1 1 200px; min-width: 0;
	border: 0; border-bottom: 1px solid var(--line-2);
	background: transparent; padding: .5rem .1rem;
	font-size: .9rem;
}
.addcomment-guest input:focus { border-bottom-color: var(--accent); }
.addcomment-guest input::placeholder { color: var(--muted); }

.addcomment-field { margin-bottom: 1.1rem; }
/* temel kutu/renk engine.css'teki .bb-editor textarea'dan gelir */
.addcomment-field textarea {
	min-height: 9rem;
	font-family: var(--read); font-size: 1.0625rem; line-height: 1.66;
	resize: vertical;
}

.addcomment-subscribe {
	margin: 0 0 1.1rem;
	font-family: var(--num); font-size: .7rem; color: var(--muted);
}
.addcomment-subscribe label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.addcomment-subscribe input { accent-color: var(--accent); flex: none; }

/* Yorum formu görsel yükleme. DLE {image-upload} yerine boş bir kapsayıcı
   basıp plupload arayüzünü JS ile içine kuruyor; açıkta bırakılınca haber
   altında ~180px'lik dağınık bir alan oluşuyordu. Artık düğmeyle açılan
   gizli bir kapta (js/comments.js). Düğme, temanın mevcut mini düğme
   diliyle (.btn-mini--ghost) çiziliyor; burada yalnızca ikon hizası eklenir. */
.addcomment-upload { margin: 0 0 1.1rem; }
.addcomment-upload-btn { display: inline-flex; align-items: center; gap: .4rem; }
.addcomment-upload-btn .ico { width: 12px; height: 12px; }
.addcomment-upload-slot { display: none; margin-top: .9rem; }
.addcomment-upload-slot.is-open { display: block; }

.addcomment-extra { margin-bottom: 1.1rem; }
.addcomment-label { margin: 0 0 .55rem; font-family: var(--read); font-size: .95rem; color: var(--ink-2); }
.addcomment-extra input {
	width: 100%; max-width: 22rem;
	border: 0; border-bottom: 1px solid var(--line-2);
	background: transparent; padding: .5rem .1rem;
	font-size: .9rem;
}
.addcomment-extra input:focus { border-bottom-color: var(--accent); }
.addcomment-extra input::placeholder { color: var(--muted); }
.addcomment-extra img { display: inline-block; vertical-align: middle; }

.addcomment-submit { margin-top: 1.5rem; }

/* ==========================================================================
   10 · BİLGİ / HATA
   ========================================================================== */

.notice {
	margin-bottom: clamp(26px, 3.6vw, 40px);
	padding: 1.15rem 1.3rem;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	border-left: 3px solid var(--accent);
	border-radius: 7px;
}
.notice-label {
	margin: 0 0 .3em;
	font-family: var(--num); font-size: .72rem;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--accent);
}
.notice-text {
	font-family: var(--read); font-size: 1.0625rem; line-height: 1.55;
	color: var(--ink-2);
}
.notice-text a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   11 · SAYFALAMA
   ========================================================================== */

.pager { margin-top: clamp(34px, 4.6vw, 56px); }
.pager-in { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }

.pager-list { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin-inline: auto; }
.pager-list a, .pager-list span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2em; padding: .25em .45em;
	font-family: var(--num); font-size: .75rem;
}
.pager-list a { color: var(--ink-2); transition: color var(--t) ease; }
.pager-list a:hover { color: var(--accent-2); }
.pager-list span { color: var(--accent); font-weight: 700; }
.pager-list .nav_ext { min-width: 0; padding: 0 .2em; color: var(--muted); }

.pager-side {
	display: inline-flex; align-items: center; gap: .35rem;
	font-family: var(--num); font-size: .7rem;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted); transition: color var(--t) ease;
}
.pager-in a:hover .pager-side { color: var(--accent-2); }
.pager-in > span > .pager-side { opacity: .35; }

/* ==========================================================================
   12 · ALT BİLGİ
   ========================================================================== */

/* ---- footer ------------------------------------------------------------ */

.footline {
	margin-top: clamp(28px, 3.6vw, 46px);
	padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 22px);
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 10px;
}
.footline-in {
	display: flex; flex-wrap: wrap; align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 2rem;
}
.footline-brand { min-width: 0; }
.footline-mark {
	display: inline-block;
	font-weight: 800; font-size: .74rem;
	letter-spacing: .24em; text-transform: uppercase;
	color: var(--ink-2);
	transition: color var(--t) ease;
}
.footline-mark:hover { color: var(--accent-2); }
.footline-tag {
	margin: .55rem 0 0;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .04em;
	color: var(--muted);
}
.footline-legal {
	margin: clamp(18px, 2.2vw, 24px) 0 0;
	padding-top: clamp(14px, 1.8vw, 18px);
	border-top: 1px solid var(--line);
	font-family: var(--num); font-size: .66rem; line-height: 1.7;
	letter-spacing: .04em;
	color: var(--muted);
}
.footline-dot { margin: 0 .45rem; color: var(--line-3); }

/* ==========================================================================
   13 · KENAR ÇUBUĞU
   ========================================================================== */

/* ---- kenar çubuğu: makale kartlarıyla aynı premium dil ------------------ */

.side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.side-block {
	min-width: 0;
	padding: 1.05rem 1.15rem 1.15rem;
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}

.side-head {
	display: flex; align-items: center; gap: .5rem;
	margin: 0 0 1rem; padding-bottom: .6rem;
	border-bottom: 1px solid var(--line);
	font-family: var(--ui); font-size: .9rem; font-weight: 600;
	letter-spacing: -.005em;
	color: var(--ink-2);
}
.side-head .ico { width: 13px; height: 13px; color: var(--accent); }

@media (max-width: 1023px) {
	.side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
}

/* ---- arama -------------------------------------------------------------- */

.side-search {
	display: flex; align-items: center; gap: .5rem;
	border-bottom: 1px solid var(--line-2);
	padding-bottom: .45rem;
}
.side-search:focus-within { border-bottom-color: var(--accent); }
.side-search input {
	flex: 1; min-width: 0;
	border: 0; background: transparent;
	padding: .2rem 0;
	font-size: .9rem; color: var(--ink);
}
.side-search input::placeholder { color: var(--muted); }
.side-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.side-search-btn {
	border: 0; background: transparent; cursor: pointer;
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted);
	transition: color var(--t) ease;
}
.side-search-btn:hover { color: var(--accent-2); }

/* ---- kategoriler ------------------------------------------------------- */

/* .catmenu-item yapısı: <a> içinde isim + yayın sayısı.
   Sayı DLE'nin {news-count} etiketinden gelir (categorymenu.tpl), CSS ile
   uydurulmuş sıra numarası DEĞİL. Değer --muted: --line-3 kart zemininde
   2.4:1 kalıyordu, pratikte görünmüyordu. */
.catmenu-list, .catmenu-sub { list-style: none; margin: 0; padding: 0; }
.catmenu-sub { padding-left: .9rem; }
.catmenu-item { font-size: .9rem; }                        /* ~14.4px */
.catmenu-item + .catmenu-item { margin-top: .1rem; }
.catmenu-item > a {
	position: relative;
	display: flex; align-items: center; gap: .6rem;
	padding: .42rem .6rem; margin: 0 -.6rem;
	border-radius: 4px;
	color: var(--ink-2);
	transition: color var(--t) ease, background-color var(--t) ease;
}
.catmenu-name {
	flex: 1 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.catmenu-count {
	flex: none;
	font-family: var(--num); font-size: .72rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	transition: color var(--t) ease;
}
/* sol vurgu şeridi — hover'da belirginlik. Yalnızca opacity; zıplama/kayma yok. */
.catmenu-item > a::after {
	content: "";
	position: absolute; left: 0; top: .32rem; bottom: .32rem;
	width: 2px; border-radius: 99px;
	background-color: var(--accent);
	opacity: 0;
	transition: opacity var(--t) ease;
}
.catmenu-item > a:hover { color: var(--ink); background-color: var(--bg-3); }
.catmenu-item > a:hover .catmenu-count { color: var(--accent); }
.catmenu-item > a:hover::after { opacity: 1; }

/* açık olan kategori — hover'dan bağımsız, kalıcı işaret */
.catmenu-item.is-current > a { color: var(--accent); font-weight: 600; }
.catmenu-item.is-current > a .catmenu-count { color: var(--accent); }
.catmenu-item.is-current > a::after { opacity: 1; }

/* alt kategoriler: aynı yapı, bir tık küçük ve soluk.
   :not(.is-current) — aktif dalın rengi yukarıdaki accent kuralında kalsın. */
.catmenu-sub > .catmenu-item { font-size: .86rem; }
.catmenu-sub .catmenu-item:not(.is-current) > a { color: var(--muted); }
.catmenu-sub .catmenu-item > a:hover { color: var(--ink); background-color: var(--bg-3); }
.catmenu-sub .catmenu-item > a:hover .catmenu-count { color: var(--accent); }

/* ---- popüler: sıralı liste (top-liste rozeti) -------------------------- */

.side-list { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.side-item { counter-increment: pop; }
.side-item + .side-item { margin-top: 1.05rem; }

.side-item-link {
	display: flex; align-items: flex-start; gap: .75rem;
	color: var(--ink);
	transition: color var(--t) ease;
}
.side-item-link:hover { color: var(--accent-2); }

/* sıra rozeti — HTML'e yazılmaz, sayaçtan gelir (topnews.tpl).
   Hover'da yalnızca zemin/rakam rengi değişir; kutu sabit durur. */
.side-item-link::before {
	content: counter(pop, decimal-leading-zero);
	flex: none;
	display: grid; place-items: center;
	width: 27px; height: 27px;
	border-radius: 50%;
	background-color: var(--bg-3);
	color: var(--accent);
	font-family: var(--num); font-size: .68rem; font-weight: 700;
	font-variant-numeric: tabular-nums; line-height: 1;
	transition: color var(--t) ease, background-color var(--t) ease;
}
.side-item-link:hover::before { background-color: var(--accent); color: var(--bg); }

/* ilk üç: rozet dolu bakır — kalanlar hayalet kalır.
   Hover'da ilk üç bir ton açılır, kalanlar dolu bakıra geçer. */
.side-item:nth-child(-n+3) .side-item-link::before {
	background-color: var(--accent);
	color: var(--bg);
}
.side-item:nth-child(-n+3) .side-item-link:hover::before {
	background-color: var(--accent-2);
}

.side-item-body { min-width: 0; }
.side-item-title {
	display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--read); font-size: .94rem; line-height: 1.35;
}
.side-item-meta {
	display: block; margin-top: .28rem;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .05em;
	color: var(--muted);
}

/* ---- etiketler: çip (badge) -------------------------------------------- */
/* DLE {tags} çıktısı: <span class="clouds_*"><a href title>etiket</a></span>
   (tagscloud.php:76 ve :168). Kenarlık daima var, hover'da yalnızca rengi
   değişir — böylece çip hover'da ne büyür ne kayar. */

.side-tags a, .cloud a {
	display: inline-block;
	padding: .24rem .62rem;
	border-radius: 999px;
	background-color: var(--bg-3);
	border: 1px solid transparent;
	color: var(--ink-2);
	font-size: .82rem;
	line-height: 1.3;
	transition: color var(--t) ease, background-color var(--t) ease, border-color var(--t) ease;
}
/* hover: çip vurgu rengiyle dolar, metin koyuya döner */
.side-tags a:hover, .cloud a:hover {
	background-color: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--bg);
}

.side-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.side-tags .tags_more {
	flex-basis: 100%; margin-top: .35rem;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .09em; text-transform: uppercase;
}
.side-tags .tags_more a,
.side-tags .tags_more a:hover {
	display: inline;
	padding: 0; background: none; border: 0; border-radius: 0;
	color: var(--muted); font-size: .66rem;
}
.side-tags .tags_more a:hover { color: var(--accent-2); }

/* ---- son yorumlar ------------------------------------------------------ */

.side-comments { list-style: none; margin: 0; padding: 0; }
.sc { display: flex; gap: .7rem; align-items: flex-start; }
.sc + .sc { margin-top: 1.15rem; }
/* yorum yazarının avatarı ({foto}); sağdaki url yedektir — asıl görsel
   yüklenmezse temanın avatar.svg'i görünür (comments.tpl'deki teknikle aynı) */
.sc-avatar {
	flex: none; width: 30px; height: 30px;
	border-radius: 50%;
	background-color: var(--bg-3);
	background-size: cover;
	background-position: center;
}
.sc-body { min-width: 0; }
.sc-on {
	margin: 0 0 .3rem;
	font-size: .88rem; line-height: 1.45;
}
.sc-on a { color: var(--ink); transition: color var(--t) ease; }
.sc-on a:hover { color: var(--accent-2); }
/* yorum gövdesi — iki satırla sınırlı; sütunu uzatmasın */
.sc-text {
	margin: 0 0 .3rem;
	font-size: .84rem; line-height: 1.5;
	color: var(--ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.sc-meta {
	margin: 0;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .05em;
	color: var(--muted);
}

/* ---- anket ------------------------------------------------------------- */

.poll-q {
	margin: 0 0 .8rem;
	font-family: var(--read); font-size: .95rem; line-height: 1.45;
	color: var(--ink);
}
.poll-list { color: var(--ink-2); }

.side-poll .vote {
	font-size: .88rem; color: var(--ink-2);
	margin-bottom: .3rem;
}
.side-poll .vote label {
	display: flex; align-items: center; gap: .55rem;
	padding: .26rem 0;
	cursor: pointer;
	transition: color var(--t) ease;
}
.side-poll .vote label:hover { color: var(--accent-2); }
.side-poll .vote input { accent-color: var(--accent); flex: none; margin: 0; }

.poll-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.poll-total {
	margin: .5rem 0 0;
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}

/* ---- boş blok gizleme -------------------------------------------------- */
/* {tags} yalnızca ?do=alltags isteğinde doluyor (main.php:36 → tagscloud.php,
   engine.php case "alltags"). Anket tanımlı değilse {vote} boş geliyor
   (vote.php:207). {custom} boş liste döndürürse ya da hiç onaylı yorum yoksa
   da başlık tek başına kalmasın. */
.side-block:has(> .side-tags:empty),
.side-block:has(> .side-poll:empty),
.side-block:has(> .side-list:empty),
.side-block:has(> .side-comments:empty) { display: none; }

/* ---- sayfalar ---------------------------------------------------------- */

.side-pages { list-style: none; margin: 0; padding: 0; }
.side-pages a {
	display: block; padding: .34rem 0;
	font-family: var(--ui); font-size: .9rem; line-height: 1.5;
	color: var(--ink-2);
	transition: color var(--t) ease;
}
.side-pages a:hover { color: var(--accent-2); }

/* ==========================================================================
   14 · HESAP MENÜSÜ
   ========================================================================== */

.account-menu { position: relative; }

.account-trigger {
	display: flex; align-items: center; gap: .6rem;
	cursor: pointer; list-style: none;
	font-size: .8rem; color: var(--ink-2);
	transition: color var(--t) ease;
}
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger::marker { content: ""; }
.account-trigger:hover { color: var(--ink); }

.account-avatar {
	width: 28px; height: 28px; flex: none; border-radius: 50%;
	background-color: var(--bg-3);
	background-size: cover; background-position: center;
}
.account-label { display: inline-flex; align-items: center; gap: .55rem; }

.account-name {
	font-weight: 600; color: var(--ink); white-space: nowrap;
	transition: color var(--t) ease;
}
.account-trigger:hover .account-name { color: var(--accent-2); }

.account-badge {
	font-family: var(--num); font-size: .64rem; line-height: 1.5;
	background: var(--accent); color: var(--bg);
	padding: .05rem .35rem; border-radius: 999px;
}

.account-trigger .ico { color: var(--muted); transition: color var(--t) ease; }
.account-trigger:hover .ico,
.account-menu[open] .account-trigger .ico { color: var(--accent); }

.account-panel {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
	min-width: 216px;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	box-shadow: 0 20px 44px rgba(0, 0, 0, .38);
	padding: .3rem 0;
	opacity: 0; visibility: hidden;
	transition: opacity var(--t) ease;
}
.account-menu[open] .account-panel { opacity: 1; visibility: visible; }

.account-link {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .5rem .9rem;
	font-size: .8rem; color: var(--ink-2);
	transition: background-color var(--t) ease, color var(--t) ease;
}
.account-link:hover { background: var(--bg-3); color: var(--ink); }
.account-link .ico { color: var(--muted); transition: color var(--t) ease; }
.account-link:hover .ico { color: var(--accent); }

.account-n { font-family: var(--num); font-size: .66rem; color: var(--accent); }
.account-sep { display: block; height: 1px; background: var(--line); margin: .3rem 0; }

/* ==========================================================================
   15 · PUAN ETİKETİ
   --------------------------------------------------------------------------
   ShowRating widget'ının kendisi ve DLE'nin içerik blokları (alıntı,
   spoiler, kod bloğu, .dlehidden) DLE motor bileşeni olduğu için
   engine.css'te tanımlı. Burada yalnızca temanın kendi etiketi var.
   ========================================================================== */

.rate-label {
	font-family: var(--num); font-size: .62rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   16 · DUYARLI
   ========================================================================== */

@media (max-width: 560px) {
	:root { --measure: 100%; }

	.masthead-card { gap: .8rem 1rem; }
	.masthead-side { flex-basis: 100%; gap: .7rem 1rem; }

	/* giriş formu tam satır alsın, alanlar ikiye bölünsün */
	.account { flex-basis: 100%; }
	.guest { flex-wrap: wrap; gap: .55rem; }
	.guest input[type="text"],
	.guest input[type="password"] { width: calc(50% - .3rem); }

	.pager-list { order: 3; flex-basis: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ==========================================================================
   14 · MODÜL SAYFALARI
   breadcrumb · statik sayfa · etiket bulutu · dosya eki · çok sayfalı gezinme
   ========================================================================== */

/* ---- site yolu (speedbar.tpl) ------------------------------------------ */

/* ---- site yolu (breadcrumb) ------------------------------------------- */
/* Ayraç DLE'den düz metin olarak gelir, CSS ile ayrı renklendirilemez;
   bu yüzden hiyerarşi link alt çizgisiyle kurulur: linkler ince çizgili,
   son halka (link olmayan düz metin) çizgisiz durur. */

.crumbs {
	margin: 0 0 clamp(16px, 2.2vw, 26px);
	padding: .5rem .8rem;
	background-color: var(--bg-2);
	border: 1px solid var(--card-line);
	border-radius: 6px;
	font-family: var(--num); font-size: .68rem; line-height: 1.75;
	letter-spacing: .05em;
	color: var(--muted);
}
.crumbs .ico {
	display: inline-block; vertical-align: -.14em;
	width: 13px; height: 13px; margin-right: .45rem;
	color: var(--accent);
}
.crumbs a {
	color: var(--muted);
	text-decoration: underline;
	text-decoration-color: var(--line-2);
	text-underline-offset: 3px;
	transition: color var(--t) ease, text-decoration-color var(--t) ease;
}
.crumbs a:hover { color: var(--accent-2); text-decoration-color: var(--accent); }

/* ---- statik sayfa (static.tpl) ve etiket bulutu (tagscloud.tpl) --------- */

/* statik sayfa, etiket bulutu, arama, istatistik, profil, PM ve form
   sayfalarının ortak kabı — hepsi aynı kart dilini konuşur */
.page {
	max-width: min(100%, 46rem);
	margin-inline: auto;
	padding: clamp(20px, 2.6vw, 32px);
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}
.page-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem;
	margin: 0 0 clamp(20px, 3vw, 32px);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--line);
}
.page-title {
	margin: 0;
	font-size: clamp(1.35rem, 1.4vw + 1.05rem, 1.6rem);
	font-weight: 700; letter-spacing: -.014em; line-height: 1.25;
}
/* .page-tools içeriği yalnızca yetkili/yazdırılabilir sayfalarda dolar;
   boşken sağa yaslanmış bir boşluk bırakmasın diye flex ile itiliyor. */
.page-tools {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
	margin: 0 0 0 auto;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted);
}
.page-tools a,
.page-tools span { display: inline-flex; align-items: center; gap: .35rem; transition: color var(--t) ease; }
.page-tools a:hover { color: var(--accent-2); }
.page-tools .ico { width: 12px; height: 12px; }

.cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }

/* ---- dosya eki (attachment.tpl) ----------------------------------------
   Makale metninin içine satır içi girer; quote_block ile aynı ikinci
   seviye yüzey dilini kullanır. */

.attach {
	display: block;
	margin: 1.2em 0;
	padding: .7rem .95rem;
	background-color: var(--bg-2);
	border: 1px solid var(--line-2);
	border-left: 3px solid var(--accent);
	border-radius: 6px;
	font-size: .9rem;
}
.attach-file {
	display: inline-flex; align-items: center; gap: .45rem;
	color: var(--ink); font-weight: 600;
	transition: color var(--t) ease;
}
.attach-file:hover { color: var(--accent-2); }
.attach-file .ico { width: 13px; height: 13px; color: var(--accent); }
.attach-meta {
	margin-left: .7em;
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--muted);
}
.attach-online { margin-left: .7em; font-size: .82rem; color: var(--muted); transition: color var(--t) ease; }
.attach-online:hover { color: var(--accent-2); }
.attach--denied { color: var(--muted); font-style: italic; }

/* ---- çok sayfalı haber gezinmesi (splitnewsnavigation.tpl) ------------- */

.splitnav {
	display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem;
	margin: clamp(26px, 3.4vw, 40px) 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
	font-family: var(--num); font-size: .68rem;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted);
}
.splitnav-dir { display: inline-flex; align-items: center; gap: .4rem; transition: color var(--t) ease; }
.splitnav a:hover .splitnav-dir,
a.splitnav-dir:hover { color: var(--accent-2); }
/* DLE, o yönde sayfa yoksa bloğu <a> yerine <span> ile sarar (show.full.php:471-480);
   pasif uç böylece soluk kalır ve tıklanabilir gibi görünmez. */
.splitnav > span > .splitnav-dir { opacity: .4; }
.splitnav-pages { display: inline-flex; align-items: baseline; gap: .7rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.splitnav-pages a { color: var(--muted); transition: color var(--t) ease; }
.splitnav-pages a:hover,
.splitnav-pages span { color: var(--ink); }

/* ==========================================================================
   15 · ARAMA · ANKET · İLGİLİ YAZILAR · PROFİL KARTI
   ========================================================================== */

/* ---- arama formu (search.tpl) ------------------------------------------ */

.searchpage { max-width: 52rem; }

.search-simple { max-width: 34rem; }
.search-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }

.search-ext {
	display: grid; gap: clamp(20px, 3vw, 30px) clamp(24px, 4vw, 48px);
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.search-group { min-width: 0; }
.search-group--wide { grid-column: 1 / -1; }
.search-group-title {
	margin: 0 0 .8rem; padding-bottom: .5rem;
	border-bottom: 1px solid var(--line);
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--muted);
}
.search-label { margin: 0 0 .4rem; font-size: .82rem; color: var(--ink-2); }
.search-field { min-width: 0; }
.search-opt { margin: 0 0 .7rem; font-size: .82rem; color: var(--muted); }
.search-opt label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; cursor: pointer; }
.search-opt input[type="radio"],
.search-opt input[type="checkbox"] { accent-color: var(--accent); flex: none; margin: 0; }
.search-opt select,
.search-field input[type="text"],
.search-field input[type="number"] {
	width: 100%; max-width: 22rem;
	border: 0; border-bottom: 1px solid var(--line-2);
	background: transparent; color: var(--ink);
	padding: .45rem .1rem; font-size: .9rem;
}
.search-opt select:focus,
.search-field input:focus { border-bottom-color: var(--accent); }
.search-msg {
	margin: 1.6rem 0 0; padding-top: .9rem;
	border-top: 1px solid var(--line);
	font-family: var(--num); font-size: .72rem;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--muted);
}


/* hızlı arama önerileri (fastsearchresult.tpl) — DLE #searchsuggestions kutusuna
   basar (dle_do_search). Kutu jQuery ile konumlandırılıyor, burada sadece görünüm. */
#searchsuggestions {
	min-width: 18rem; max-width: 32rem;
	background-color: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 7px;
	overflow: hidden;                 /* satır hover'ları köşelere taşmasın */
	box-shadow: 0 10px 26px rgb(0 0 0 / 42%);
}
.suggest { display: block; padding: .6rem .8rem; transition: background-color var(--t) ease; }
.suggest + .suggest { border-top: 1px solid var(--line); }
.suggest:hover { background-color: var(--bg-3); }
.suggest-title { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.suggest-text { display: block; margin-top: .15rem; font-size: .78rem; color: var(--muted); }

/* ---- anket (poll.tpl) --------------------------------------------------- */

.article-poll { margin: clamp(26px, 3.4vw, 40px) 0 0; }
.poll {
	padding: clamp(18px, 2.4vw, 26px);
	background-color: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 7px;
}
.poll-kicker {
	margin: 0 0 .5rem;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--accent);
}
.poll-question { margin: 0 0 1.1rem; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.poll-list { font-size: .92rem; color: var(--ink-2); }
.poll-list label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; cursor: pointer; }
.poll-list input { accent-color: var(--accent); flex: none; margin: 0; }
.poll-meta {
	margin: 1rem 0 0; padding-top: .8rem;
	border-top: 1px solid var(--line);
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.poll-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }

/* ---- ilgili yazılar (relatednews.tpl + main.tpl) ----------------------- */

.related { margin-top: clamp(28px, 3.6vw, 44px); }
.related-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
	list-style: none; margin: 0; padding: 0;
}
.related-link {
	display: block; height: 100%;
	padding: clamp(14px, 1.8vw, 18px);
	background-color: var(--card);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}

.related-title {
	display: block; font-size: .98rem; font-weight: 600;
	letter-spacing: -.01em; overflow-wrap: anywhere;
	color: var(--ink);
	transition: color var(--t) ease;
}
.related-link:hover .related-title { color: var(--accent-2); }
.related-meta {
	display: block; margin-top: .35rem;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.related-meta .related-dot { color: var(--line-3); }
.related-date { font-variant-numeric: tabular-nums; }

/* ---- profil kartı (profile_popup.tpl) — AJAX penceresi ----------------- */

.pcard { min-width: 0; }
.pcard-top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.pcard-avatar {
	display: block; flex: none; width: 48px; height: 48px;
	border-radius: 50%;
	background-color: var(--bg-3);
	background-size: cover; background-position: center;
}
.pcard-id { min-width: 0; }
.pcard-name { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.pcard-status {
	display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem;
	margin: .3rem 0 0;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.pcard-on { color: var(--online); }
.pcard-ban {
	margin: 0 0 1.1rem; padding: .6rem .8rem;
	background-color: rgb(0 0 0 / 14%);
	border-left: 2px solid var(--danger);
	font-size: .84rem; color: var(--danger);
}
.pcard-ban-end { display: block; margin-top: .2rem; font-size: .74rem; color: var(--muted); }
.pcard-facts {
	display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem;
	margin: 0; font-size: .86rem;
}
.pcard-facts dt {
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
	align-self: center;
}
.pcard-facts dd { margin: 0; color: var(--ink-2); }
.pcard-link, .pcard-rss { color: var(--ink-2); }
.pcard-link a, .pcard-rss a { transition: color var(--t) ease; }
.pcard-link a:hover, .pcard-rss a:hover { color: var(--accent-2); }

.poll-more {
	margin: 1rem 0 0;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .07em; text-transform: uppercase;
}
.poll-more a { color: var(--muted); transition: color var(--t) ease; }
.poll-more a:hover { color: var(--accent-2); }

/* ==========================================================================
   16 · FORM SAYFALARI · İSTATİSTİK · INFORMER
   ========================================================================== */

/* ---- form sayfaları (registration · lostpassword · feedback) -----------
   Alt çizgili alan dili, addcomments.tpl'deki yorum formuyla aynı. */

/* .page--narrow — adı eski düzenden kalan bir işaret: bu kart bir FORM sayfası
   (iletişim · kayıt · parola sıfırlama). Genişliği artık dar DEĞİL: kart da
   diğerleri gibi kolonu tam doldurur, hizası speedbar'la aynı olur. Bu sınıfın
   tek işi aşağıdaki kurala formu iki kolona yayma iznini vermek.
   addnews.tpl bu sınıfı taşımaz — zengin editörü tek kolonda kalmak istiyor. */

/* Akıştaki kart kolonu tam doldurur; sol kenarı yukarıdaki site yoluyla
   (speedbar) aynı hizaya gelir. .page: pm · statik sayfa · etiket bulutu ·
   önizleme · istatistik · profil · arama · form sayfaları. .article: makale
   detayı. width + margin-inline: 0, .page'in "margin-inline: auto"
   ortalamasını da iptal eder — kart sağa/sola kaçmaz. */
.stream > .page,
.stream > .article,
article.page--wide {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

/* Form sayfaları geniş kart olduğu için form iki kolona yayılır: kısa alanlar
   yan yana, uzun alanlar (mesaj · doğrulama · dosya · editör) ve düğmeler tam
   satır. "dense" akışı, geniş alanın açtığı boşluğu sonraki kısa alanla
   doldurur — sağda boşluk kalmaz. */
@media (min-width: 1024px) {
	.page--narrow .form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: dense;
		gap: 0 1.8rem;
	}
	.page--narrow .form-duo { display: contents; }
	.page--narrow .form-input { max-width: 100%; }
	/* DLE'nin kendi <select>'i (ör. iletişimde {recipient}) alanlarla aynı
	   dile gelsin: alt çizgili, hücreyi dolduran */
	.page--narrow .form-row select {
		width: 100%; max-width: 100%;
		border: 0; border-bottom: 1px solid var(--line-2);
		background-color: transparent; color: var(--ink);
		padding: .5rem .1rem; font-size: .95rem;
	}
	.page--narrow .form > .form-row:has(.form-area),
	.page--narrow .form > .form-row:has(.form-captcha),
	.page--narrow .form > .form-row:has(.form-file),
	.page--narrow .form > .form-row:has(#comment-editor),
	.page--narrow .form > .form-actions { grid-column: 1 / -1; }
}

/* pm ekranları: şablondaki yardımcı sınıf ne olursa olsun (eski sürüm dahi)
   tam genişlik kalsın. #pmlist DLE'nin kendi form id'sidir (pm.php:691),
   .pm-menu ise üç ekranın da taşıdığı menü. */
.page:has(.pm-menu),
.page:has(.pm-thread),
.page:has(#pmlist) {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}
.page-desc {
	margin: -.7rem 0 clamp(24px, 3vw, 34px);
	font-family: var(--read); font-size: 1rem; line-height: 1.7;
	color: var(--muted);
}

.form { min-width: 0; }
.form-row { margin: 0 0 1.4rem; min-width: 0; }
.form-duo { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.form-duo > .form-row { flex: 1 1 12rem; min-width: 0; }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.form-inline .form-input { flex: 1 1 12rem; }

.form-label {
	display: block; margin: 0 0 .5rem;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--muted);
}

.form-input {
	width: 100%; max-width: 26rem;
	border: 0; border-bottom: 1px solid var(--line-2);
	background: transparent; color: var(--ink);
	padding: .5rem .1rem; font-size: .95rem;
	transition: border-color var(--t) ease;
}
.form-input:focus { border-bottom-color: var(--accent); outline: none; }
.form-input::placeholder { color: var(--muted); }
textarea.form-input { resize: vertical; }
.form-area {
	font-family: var(--read); font-size: 1.02rem; line-height: 1.7;
	min-height: 9rem; max-width: none;
}
.form-file {
	max-width: 100%; font-size: .84rem; color: var(--muted);
}
.form-captcha { margin: 0 0 .7rem; }
.form-captcha img { display: inline-block; vertical-align: middle; }
.form-actions {
	display: flex; flex-wrap: wrap; gap: .6rem;
	margin: clamp(24px, 3vw, 34px) 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line);
}

/* ---- istatistik (stats.tpl) -------------------------------------------- */

.stats {
	display: grid; gap: clamp(24px, 3.4vw, 40px) clamp(24px, 4vw, 56px);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.stats-group { min-width: 0; }
.stats-group--wide { grid-column: 1 / -1; }
.stats-list {
	display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem;
	margin: 0; font-size: .9rem;
}
.stats-list dt { color: var(--muted); }
.stats-list dd {
	margin: 0; text-align: right;
	font-family: var(--num); font-variant-numeric: tabular-nums;
	color: var(--ink);
}
/* En çok yazanlar (stats.tpl). DİKKAT: DLE {topusers} çıktısı tablo etiketi
   İÇERMEZ — stats.php:117 ve :130 yalnızca <thead> + <tr> basıyor. Şablon
   sarmazsa tarayıcı bu etiketleri atıp bütün hücreleri tek bir metne
   çeviriyordu. Sarmayı bu yüzden şablon yapıyor; sınıf .userstop, çünkü
   engine.css:212-218'deki DLE taban kuralları o sınıfa bağlı (DLE'nin kendi
   teması da aynı sınıfı kullanıyor: default_templates/Default/stats.tpl:38-40).
   Burada yalnızca tema dili ekleniyor; hücre hizaları DLE'nin
   align="center" ipuçlarına bırakılıyor (bu yüzden text-align yazılmadı). */
.stats-group--wide { overflow-x: auto; }
.stats-group--wide table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}
.stats-group--wide td {
	padding: .55rem .7rem;
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
}
.stats-group--wide thead td {
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--line-2);
	white-space: nowrap;
}
.stats-group--wide td:first-child { color: var(--ink); }
.stats-group--wide a { transition: color var(--t) ease; }
.stats-group--wide a:hover { color: var(--accent-2); }

@media (max-width: 640px) {
	/* yedi kolon dar ekrana sığmıyor: kayıt / son ziyaret tarihleri düşer */
	.stats-group--wide thead td:nth-child(3),
	.stats-group--wide thead td:nth-child(4),
	.stats-group--wide td:nth-child(3),
	.stats-group--wide td:nth-child(4) { display: none; }
}

/* ---- informer (informer.tpl) ------------------------------------------- */

/* informer — her kayıt kart; liste işareti ve araya çizgi koymak yerine
   satırlar arasında boşluk bırakılır */
.informer-item {
	list-style: none;
	padding: clamp(14px, 1.8vw, 18px);
	background-color: var(--bg-2);
	border: 1px solid var(--card-line);
	border-radius: 7px;
}
.informer-item + .informer-item { margin-top: clamp(12px, 1.6vw, 16px); }
.informer-head { margin: 0 0 .6rem; }
.informer-title { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.informer-title a { color: var(--ink); transition: color var(--t) ease; }
.informer-title a:hover { color: var(--accent-2); }
.informer-meta {
	display: block; margin-top: .3rem;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.informer-media { display: block; margin: 0 0 .8rem; }
.informer-media img { max-width: 100%; height: auto; }
.informer-text { font-family: var(--read); font-size: 1rem; line-height: 1.7; color: var(--ink-2); }

.post-meta--foot { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--line); }

/* ==========================================================================
   17 · ÖZEL MESAJLAR · PROFİL SAYFASI · HABER EKLEME
   ========================================================================== */

.form-toggle { margin: 0 0 1.4rem; }
.form-check {
	display: flex; align-items: center; gap: .5rem;
	margin: .45rem 0 0; cursor: pointer;
	font-size: .85rem; color: var(--ink-2);
}
.form-check input { accent-color: var(--accent); flex: none; margin: 0; }
.form-checks .form-check:first-child { margin-top: 0; }
.form-admin { font-size: .85rem; }
.form-admin label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; cursor: pointer; }
.form-admin input { accent-color: var(--accent); flex: none; margin: 0; }

/* ---- özel mesajlar (pm.tpl) -------------------------------------------- */

/* Sekmeler dolgulu çip. DLE [inbox]/[new_pm] bloklarını <a> olarak basar
   (pm.php:149), yani çipin kendisi bağlantıdır — içine elle etiket yazılmaz. */
.pm-menu {
	display: flex; flex-wrap: wrap; gap: .5rem;
	margin: 0 0 clamp(18px, 2.2vw, 24px); padding-bottom: .9rem;
	border-bottom: 1px solid var(--line);
}
.pm-menu > a {
	display: inline-block;
	padding: .34rem .8rem;
	border-radius: 999px;
	background-color: var(--bg-3);
	color: var(--ink-2);
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .09em; text-transform: uppercase;
	transition: color var(--t) ease, background-color var(--t) ease;
}
.pm-menu > a:hover { background-color: var(--accent-2); color: var(--bg); }
.pm-tab { color: var(--muted); }
.pm-menu > a .pm-tab { color: inherit; }

.pm-status { margin: 0 0 clamp(20px, 2.6vw, 28px); }
.pm-bar { margin: 0; }
.pm-bar img, .pm-bar div { max-width: 100%; }
/* DLE çubuğu: <div class="pm_progress_bar" title="…"><span style="width: N%">N%</span></div>
   (pm.php:169). Yüzde metni göstergenin içinde kalır; çubuk track + dolgu olur. */
.pm_progress_bar {
	position: relative;
	height: 6px; border-radius: 999px;
	background-color: var(--bg-3);
	overflow: hidden;
}
.pm_progress_bar > span {
	position: absolute; left: 0; top: 0; bottom: 0;
	display: block;
	background-color: var(--accent);
	border-radius: 999px;
	font-size: 0; line-height: 0; color: transparent;
	transition: width var(--t) ease;
}
.pm-limit {
	margin: .55rem 0 0;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.pm-head { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

/* Liste motoru hazır tablo basıyor (pm.php:701 ve :769): kolonlar sabit
   (ikon · konu · gönderen · seçim), satırlar tıklanabilir. Tabloyu bozmadan
   her satırı kendi kartına çeviriyoruz — çizgi yerine ayrık yüzey. */
.pm-list { font-size: .9rem; }
.pm-list table.pm {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 .4rem;
}
.pm-list table.pm th {
	padding: 0 .85rem .55rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-family: var(--num); font-size: .62rem; font-weight: 400;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--muted);
}
.pm-list table.pm td {
	padding: .75rem .85rem;
	background-color: var(--bg-2);
	vertical-align: top;
	cursor: pointer;
	transition: background-color var(--t) ease;
}
.pm-list table.pm tbody tr:hover td { background-color: var(--bg-3); }
.pm-list table.pm tbody tr > td:first-child { border-radius: 6px 0 0 6px; }
.pm-list table.pm tbody tr > td:last-child { border-radius: 0 6px 6px 0; }
/* seçim kolonu satır tıklamasına katılmaz */
.pm-list table.pm td.pm_checkbox { cursor: default; }
.pm-list table.pm th.pm_checkbox,
.pm-list table.pm td.pm_checkbox { text-align: center; }
.pm-list table.pm .form-check-input { margin: 0; accent-color: var(--accent); cursor: pointer; }

/* ikon kolonu — okundu/yanıtlandı/okunmadı ayrımı renkte taşınır */
.pm-list table.pm td.pm_icon { width: 1%; white-space: nowrap; color: var(--muted); }
.pm-list table.pm td.pm_icon svg { display: block; width: 16px; height: 16px; }
.pm-list table.pm td.pm-unread-image { color: var(--accent); }
.pm-list table.pm td.pm-reply-image { color: var(--accent-2); }

/* konu kolonu: başlık + son mesaj önizlemesi + muhatap */
.pm-list td.pm_subj { font-family: var(--read); }
.pm-list div.pm_subj { font-size: .95rem; line-height: 1.45; }
.pm-list div.pm_subj a { color: var(--ink); }
.pm-list div.pm_subj a:hover { color: var(--accent-2); }
.pm-list div.pm_last_message {
	display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .3rem;
	font-size: .8rem; line-height: 1.55;
	color: var(--muted);
}
.pm-list div.pm_with_user {
	margin-top: .45rem;
	font-family: var(--num); font-size: .62rem;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--muted);
}
.pm-list div.pm_with_user a { color: var(--ink-2); }
.pm-list div.pm_with_user a:hover { color: var(--accent-2); }

/* gönderen kolonu — hem <td> hem iç <div> aynı sınıfı taşıyor (pm.php:716) */
.pm-list div.pm_last_user { font-size: .82rem; }
.pm-list div.pm_last_user a { color: var(--ink-2); }
.pm-list div.pm_last_user a:hover { color: var(--accent-2); }
.pm-list div.pm_last_date {
	margin-top: .25rem;
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .04em; color: var(--muted);
	white-space: nowrap;
}

/* Toplu işlem + sayfalama satırı. DLE burada bozuk bir tablo basıyor
   (pm.php:879 — <table ... style="width:100%;"<tr>); tarayıcı bunu adsız bir
   satıra çeviriyor, biz yalnızca görünümü topluyoruz. */
.pm-list table.pm_navigation { width: 100%; margin-top: .35rem; border-collapse: collapse; }
.pm-list table.pm_navigation td {
	padding: .5rem 0;
	border: 0; background: none;
	vertical-align: middle;
}
.pm-list table.pm_navigation td:last-child { text-align: right; }
.pm-list table.pm_navigation select {
	border: 0; border-bottom: 1px solid var(--line-2);
	background-color: transparent; color: var(--ink);
	padding: .3rem 0; font-size: .84rem;
	transition: border-color var(--t) ease;
}
.pm-list table.pm_navigation select:focus { outline: 0; border-bottom-color: var(--accent); }
.pm-list table.pm_navigation .bbcodes { margin-left: .5rem; }
.pm-list table.pm_navigation a {
	font-family: var(--num); font-size: .72rem;
	color: var(--muted);
	transition: color var(--t) ease;
}
.pm-list table.pm_navigation a:hover { color: var(--accent-2); }
.pm-list a { transition: color var(--t) ease; }
.pm-list a:hover { color: var(--accent-2); }
.pm-no-messages { display: block; padding: .9rem 0; font-size: .9rem; color: var(--muted); }

@media (max-width: 640px) {
	/* dar ekranda gönderen kolonu düşer, konu nefes alır */
	.pm-list table.pm th.pm_last_user,
	.pm-list table.pm td.pm_last_user { display: none; }
}

.pm-thread { margin-top: clamp(26px, 3.4vw, 40px); }
.pm-thread-head { margin-bottom: clamp(20px, 2.6vw, 28px); }
.pm-with { margin: 0; font-size: .86rem; color: var(--muted); }
.pm-with a { color: var(--ink-2); transition: color var(--t) ease; }
.pm-with a:hover { color: var(--accent-2); }

.pm-msg {
	display: flex; align-items: flex-start;
	gap: clamp(14px, 2vw, 22px);
	padding: clamp(18px, 2.4vw, 26px);
	background-color: var(--bg-2);
	border: 1px solid var(--line);
}
.pm-msg + .pm-msg { margin-top: clamp(12px, 1.6vw, 18px); }
.pm-reply { margin-top: clamp(24px, 3vw, 34px); }

/* pm editörünün ({editor}) görünümü engine.css'te — DLE motor bileşeni,
   yorum editörünün eşi (.bb-editor textarea). Burada tekrarlanmaz. */

/* ---- profil sayfası (userinfo.tpl) ------------------------------------- */

.user-head {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 1rem 1.3rem;
	margin: 0 0 clamp(24px, 3vw, 34px);
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--line);
}
.user-avatar {
	display: block; flex: none; width: 64px; height: 64px;
	border-radius: 50%;
	background-color: var(--bg-3);
	background-size: cover; background-position: center;
	outline: 2px solid var(--line-2); outline-offset: 2px;
}
.user-id { min-width: 0; }
.user-id .page-title { margin: 0; }
.user-sub {
	display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem;
	margin: .35rem 0 0;
	font-family: var(--num); font-size: .66rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.user-group { color: var(--ink-2); }
.user-off { color: var(--muted); }
.user-actions { margin: .5rem 0 0; font-size: .84rem; }
.user-actions a { color: var(--ink-2); transition: color var(--t) ease; }
.user-actions a:hover { color: var(--accent-2); }

.user-facts {
	display: grid; gap: clamp(24px, 3.4vw, 40px) clamp(24px, 4vw, 56px);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin-bottom: clamp(24px, 3vw, 34px);
}
.user-about { margin-bottom: clamp(24px, 3vw, 34px); }
.user-sign {
	font-family: var(--num); font-size: .78rem; line-height: 1.7;
	color: var(--muted);
}
.user-edit { margin-top: clamp(30px, 4vw, 46px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--line); }
.user-soc { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: 0 0 1.2rem; }
.soc {
	padding: .35rem .7rem;
	border: 1px solid var(--line-2);
	font-family: var(--num); font-size: .64rem;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--muted);
	transition: color var(--t) ease, border-color var(--t) ease;
}
.soc:hover { color: var(--accent-2); border-color: var(--accent); }
.user-del { margin-left: 1rem; font-size: .8rem; }
.user-del a { color: var(--danger); transition: color var(--t) ease; }
.user-del a:hover { color: var(--ink); }

.comment-chip--online { color: var(--online); }