/* yt-irem 1.0.0 -- YouTube renk paleti, modern koyu "video kart vitrini" */
:root{
	--yt-red:#FF0000;
	--yt-red-dark:#cc0000;
	--bg:#0f0f0f;
	--surface:#181818;
	--surface-2:#212121;
	--surface-3:#2c2c2c;
	--border:#2f2f2f;
	--text:#ffffff;
	--muted:#aaaaaa;
	--muted-2:#717171;
	--radius:10px;
	--radius-sm:6px;
	--ease:cubic-bezier(.22,.61,.36,1);
	--maxw:1240px;
	--header-h:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.hidden{display:none!important}

/* ---------- Header ---------- */
.site-header{
	position:sticky;top:0;z-index:50;
	height:var(--header-h);
	display:flex;align-items:center;gap:18px;
	padding:0 max(16px, calc((100vw - var(--maxw))/2));
	background:rgba(15,15,15,.92);
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand .ktmi{
	width:18px;height:13px;flex:none;
	background:#fff;border-radius:3px;position:relative;overflow:hidden;
}
.brand .ktmi::after{
	content:"";position:absolute;inset:0;
	clip-path:polygon(0 0,100% 50%,0 100%);
	transform:scaleX(-1);
	background:var(--yt-red);
	width:100%;
	margin-left:100%; /* play tuşu içeride değil, marka olarak yanında */
}
.brand b{ font-size:15px }
.brand b em{color:var(--yt-red);font-style:normal}
.main-nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.main-nav a{color:var(--muted);font-size:14px;transition:color .15s}
.main-nav a:hover{color:#fff}
.main-nav a.yt-badge{
	background:var(--yt-red);color:#fff;padding:6px 12px;border-radius:999px;font-weight:600;
}
.main-nav a.yt-badge:hover{background:var(--yt-red-dark)}

/* ---------- Hero / intro strip ---------- */
.intro{
	padding:34px max(16px, calc((100vw - var(--maxw))/2)) 6px;
}
.intro h1{font-size:clamp(20px,4vw,28px);margin:0 0 4px}
.intro p{margin:0;color:var(--muted);font-size:14px}
.intro p .accent{color:var(--yt-red);font-weight:600}

.filter-row{
	display:flex;gap:10px;padding:16px max(16px, calc((100vw - var(--maxw))/2)) 2px;
	flex-wrap:wrap;
}
.filter-row a.chip{
	padding:7px 14px;font-size:13px;border-radius:999px;
	background:var(--surface);border:1px solid var(--border);color:var(--muted);
	transition:.15s;
}
.filter-row a.chip:hover,.filter-row a.chip.active{background:var(--surface-2);color:#fff;border-color:#fff}
.filter-row a.chip.all{background:var(--yt-red);border-color:var(--yt-red);color:#fff}
.filter-row a.chip.all:hover{background:var(--yt-red-dark)}

/* ---------- Video grid ---------- */
.vgrid{
	display:grid;
	gap:22px;
	padding:16px max(16px, calc((100vw - var(--maxw))/2)) 44px;
	grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.vcard{
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
	cursor:pointer;
	display:flex;flex-direction:column;
	transition:transform .18s var(--ease),border-color .18s,box-shadow .18s;
}
.vcard:hover{transform:translateY(-5px);border-color:var(--yt-red);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.vcard:hover .thumb img{transform:scale(1.06)}
.thumb .play{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,.18);transition:background .2s;
}
.thumb .play span{
	width:46px;height:32px;border-radius:8px;background:rgba(255,0,0,.94);
	display:flex;align-items:center;justify-content:center;transition:transform .15s;
}
.thumb .play span svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.vcard:hover .thumb .play span{transform:scale(1.12);background:var(--yt-red)}
.thumbbadge{
	position:absolute;right:8px;bottom:8px;
	background:rgba(0,0,0,.8);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;
	font-variant-numeric:tabular-nums;
}
/* yer tutucu thumb (maxres/hq yoksa) */
.thumb.fallback{background:linear-gradient(145deg,#1f1f1f,#0a0a0a);display:flex;align-items:center;justify-content:center}
.thumb.fallback .fb{color:var(--muted-2);font-size:13px;text-align:center;padding:0 12px;line-height:1.4}

.vcard-body{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column;gap:6px}
.vcard-body h3{margin:0;font-size:15px;font-weight:600;line-height:1.35;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.channel{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.channel .dot{width:5px;height:5px;border-radius:50%;background:var(--yt-red);flex:none}
.channel b{color:#e6e6e6;font-weight:600}
.meta{margin-top:auto;color:var(--muted-2);font-size:12px;display:flex;gap:6px;align-items:center}
.meta .views::before{content:"·";margin-right:6px;color:var(--muted-2)}

/* ---------- Pagination (arsiv) ---------- */
.pagination{display:flex;gap:8px;justify-content:center;padding:6px 0 46px;flex-wrap:wrap}
.pagination a,.pagination span{
	padding:8px 15px;border-radius:var(--radius-sm);font-size:14px;background:var(--surface);
	border:1px solid var(--border);color:var(--muted);transition:.15s;
}
.pagination a:hover{border-color:var(--yt-red);color:#fff}
.pagination .current{background:var(--yt-red);border-color:var(--yt-red);color:#fff}

/* ---------- Modal / Lightbox ---------- */
.lightbox{
	position:fixed;inset:0;z-index:200;display:none;
	align-items:center;justify-content:center;
	background:rgba(6,6,6,.9);backdrop-filter:blur(4px);padding:20px;
}
.lightbox.open{display:flex}
.lb-frame{
	width:min(960px,100%);background:var(--surface);border-radius:12px;overflow:hidden;
	transform:translateY(16px) scale(.98);opacity:0;transition:.22s var(--ease);
}
.lightbox.open .lb-frame{transform:none;opacity:1}
.lb-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.lb-stage iframe{width:100%;height:100%;border:0;display:block}
.lb-close{
	position:absolute;top:12px;right:12px;z-index:3;cursor:pointer;
	width:34px;height:34px;border-radius:50%;border:0;font-size:18px;line-height:1;
	display:grid;place-items:center;color:#fff;background:rgba(33,33,33,.9);
}
.lb-close:hover{background:var(--yt-red)}
.lb-body{padding:16px 18px 18px}
.lb-body h4{margin:0 0 2px;font-size:17px}
.lb-links{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}
.lb-links a{font-size:13px;color:#ddd;border-bottom:1px solid var(--border);padding-bottom:1px}
.lb-links a:hover{color:var(--yt-red);border-color:var(--yt-red)}

/* header: ic baglanti menusu listesi (wp_nav_menu) */
.brand svg{flex:none}
.main-nav .wmenu{list-style:none;display:flex;gap:4px;margin:0;padding:0;align-items:center}
.main-nav .wmenu a{display:inline-block;padding:6px 10px;border-radius:6px}
.main-nav .wmenu a:hover{background:var(--surface-2);color:#fff}
.main-nav .current{color:#fff}

/* modal ayrac */
.lb-modal-meta{margin:2px 0 0;color:var(--muted-2);font-size:13px}

/* ---------- Arsiv sayfa basligi ---------- */
.archive-head{
	padding:30px max(16px, calc((100vw - var(--maxw))/2)) 2px;
}
.archive-head h1{margin:0;font-size:clamp(20px,4vw,26px)}
.archive-head h1 span{color:var(--yt-red)}
.archive-head .sub{color:var(--muted);font-size:13.5px;margin-top:4px}

/* ---------- Footer ---------- */
.site-footer{
	margin-top:20px;border-top:1px solid var(--border);
	padding:22px max(16px, calc((100vw - var(--maxw))/2));
	display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--muted-2);font-size:13px;
}
.site-footer .f-brand{color:#fff;font-weight:600}
.site-footer a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:720px){
	.vgrid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding-bottom:32px}
	.vcard-body h3{font-size:13.5px;-webkit-line-clamp:2}
	.main-nav a{font-size:13px}
	.filter-row a.chip{padding:6px 11px;font-size:12.5px}
}
@media (max-width:420px){
	.vgrid{grid-template-columns:1fr 1fr;gap:12px}
	.vcard-body{padding:8px 9px 10px}
}