/* ============================================================================
   Donanım Akademi — BLOG LİSTESİ  ([da_blog])
   Kaynak tasarım: "Donanim Akademi - Blog.dc.html"

   Kapsam: sayfa kabuğu — hero, öne çıkan yazı, kategori çipleri, grid boşluğu,
   sayfalama, boş durum, CTA şeridi. Blog kartı görünümü core/cards.css'tedir
   (.da-pcard / .da-card-grid) ve burada TEKRARLANMAZ.

   Özgüllük notu: kök öğe <div class="da-app da-blog"> → `.da-app.da-blog .x`
   = (0,3,0), hem hello-elementor reset'ini (0,2,0) hem core/base.css zırhının
   :is() kurallarını (0,3,0, daha erken yüklenir) yener. Buton/alan gerektiren
   yerlerde bu form, diğer yerlerde sade `.da-blog .x` kullanılır.
   ========================================================================== */

/* === 1. HERO ============================================================== */
.da-blog .da-blog-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #FFF6F4 0%, #FFFFFF 100%);
}

.da-blog .da-blog-hero-ring,
.da-blog .da-blog-hero-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}
.da-blog .da-blog-hero-ring {
	top: -150px;
	right: -110px;
	width: 460px;
	height: 460px;
	border: 64px solid rgba(208,32,38,.06);
}
.da-blog .da-blog-hero-glow {
	top: 70px;
	right: 260px;
	width: 170px;
	height: 170px;
	background: radial-gradient(circle, #FFE7E6, transparent 70%);
}

.da-blog .da-blog-hero-inner {
	position: relative;
	z-index: 2;
	padding-block: 52px 60px;
	text-align: center;
}

/* --- Breadcrumb ---------------------------------------------------------- */
.da-blog .da-crumbs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--da-muted);
}
.da-blog .da-crumbs a { color: var(--da-muted); }
.da-blog .da-crumbs svg { flex-shrink: 0; }
.da-blog .da-crumbs-current {
	color: var(--da-text);
	font-weight: 700;
}

/* --- Başlık bloğu --------------------------------------------------------- */
.da-blog .da-blog-eyebrow {
	display: block;
	margin-top: 18px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--da-red);
}
.da-blog .da-blog-title {
	font-size: 46px;
	line-height: 1.1;
	letter-spacing: -0.032em;
	margin-top: 12px;
	color: var(--da-text);
}
.da-blog .da-accent { color: var(--da-red); }

.da-blog .da-blog-lead {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--da-text-2);
	margin: 18px auto 0;
	max-width: 600px;
}

/* --- Arama kutusu --------------------------------------------------------- */
/* Tasarımda işlevsiz bir input'tu; burada gerçek <form method="get">.
   Kenarlık kabın kendisinde; içteki input çıplak (base.css zırhının verdiği
   kenarlık/arka plan (0,2,0) burada (0,3,1) ile geri alınır). */
.da-blog .da-bsearch {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 460px;
	margin: 30px auto 0;
	padding: 0 6px 0 18px;
	height: 54px;
	background: #fff;
	border: 1.5px solid var(--da-border);
	border-radius: 14px;
	box-shadow: 0 8px 26px rgba(24,24,27,.05);
	text-align: left;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.da-blog .da-bsearch:focus-within {
	border-color: var(--da-red);
	box-shadow: 0 0 0 3px rgba(208,32,38,.12);
}
.da-blog .da-bsearch > svg { flex-shrink: 0; }

.da-app.da-blog .da-bsearch input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
	font-size: 15px;
	color: var(--da-text);
}
.da-app.da-blog .da-bsearch input[type="search"]:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
}
.da-blog .da-bsearch input::placeholder { color: #A6A0A0; opacity: 1; }
.da-blog .da-bsearch input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Gönder düğmesi — reset'in pembe dolgusuna karşı (0,3,0) ile korunur */
.da-app.da-blog .da-bsearch-go {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--da-red);
	color: #fff;
	transition: background-color .2s ease;
}
.da-app.da-blog .da-bsearch-go:hover,
.da-app.da-blog .da-bsearch-go:focus {
	background-color: var(--da-red-hover);
	color: #fff;
}


/* === 2. ÖNE ÇIKAN YAZI ==================================================== */
.da-blog .da-blog-featured {
	background: var(--da-surface);
	padding: 56px 0 0;
}

.da-blog .da-bfeat {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	border: 1px solid var(--da-border-warm);
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 18px 44px rgba(24,24,27,.07);
	color: inherit;
}
.da-blog .da-bfeat > * { min-width: 0; }

/* --- Görsel alanı --------------------------------------------------------- */
.da-blog .da-bfeat-media {
	position: relative;
	background: linear-gradient(145deg, #FFEDEA, #FBD9D6 60%, #F3C4C1);
	overflow: hidden;
}
/* base.css `.da-cover` 1:1 dayatır. Öne çıkan görsel tasarımda 3:2'dir
   (DC: 648×432). Kolon yüksekliğine yayılınca 666×666 kareye dönüşüyor ve
   bölüm +234px uzuyordu — başlık/chip ekranda aşağı itiliyordu. */
.da-blog .da-bfeat-cover {
	aspect-ratio: 3 / 2;
	height: auto;
	background: transparent;
}
.da-blog .da-bfeat-badge {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--da-red);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .6px;
	padding: 8px 15px;
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(208,32,38,.28);
}

/* --- Metin alanı ---------------------------------------------------------- */
.da-blog .da-bfeat-body {
	padding: 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.da-blog .da-bfeat-cat {
	align-self: flex-start;
	background: var(--da-red-soft);
	color: #C0161C;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
}
.da-blog .da-bfeat-title {
	font-size: 30px;
	line-height: 1.22;
	letter-spacing: -0.032em;
	margin-top: 18px;
	color: var(--da-text);
}
.da-blog .da-bfeat:hover .da-bfeat-title { color: var(--da-red); }

.da-blog .da-bfeat-excerpt {
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--da-text-2);
	margin-top: 14px;
}

.da-blog .da-bfeat-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--da-muted);
}
.da-blog .da-bfeat-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.da-blog .da-bfeat-meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #D6CFCA;
}

.da-blog .da-bfeat-go {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 26px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--da-red);
	transition: gap .25s ease;
}
.da-blog .da-bfeat:hover .da-bfeat-go { gap: 14px; }


/* === 3. KATEGORİ ÇİPLERİ + GRID =========================================== */
.da-blog .da-blog-list {
	background: var(--da-surface);
	padding: 44px 0 88px;
}

/* Çipler gerçek <a> linkler (?kategori=slug) — JS state'i yok */
.da-blog .da-bfilters {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	justify-content: center;
	padding-bottom: 40px;
	border-bottom: 1px solid #F0EBE7;
}
.da-blog .da-bfilter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--da-text-2);
	background: #fff;
	border: 1px solid var(--da-border);
	/* Dokunma hedefi (handoff §6) */
	min-height: 44px;
}
.da-blog .da-bfilter:hover,
.da-blog .da-bfilter:focus-visible {
	border-color: var(--da-red);
	color: var(--da-red);
}
.da-blog .da-bfilter.is-active {
	color: #fff;
	background: var(--da-red);
	border-color: var(--da-red);
	box-shadow: 0 8px 18px rgba(208,32,38,.22);
}
.da-blog .da-bfilter.is-active:hover,
.da-blog .da-bfilter.is-active:focus-visible {
	color: #fff;
	background: var(--da-red-hover);
	border-color: var(--da-red-hover);
}

/* Grid kuralları core/cards.css'te; burada yalnız üst boşluk */
.da-blog .da-blog-grid { margin-top: 40px; }

/* --- Sayfalama (gerçek ?sayfa=N linkleri) --------------------------------- */
.da-blog .da-blog-more {
	display: flex;
	justify-content: center;
	margin-top: 52px;
}
.da-blog .da-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #fff;
	color: var(--da-text);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 30px;
	min-height: 44px;
	border-radius: 12px;
	border: 1.5px solid #E6E0DB;
}
.da-blog .da-blog-back {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}
.da-blog .da-blog-back a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--da-text-2);
	padding: 10px 14px;
	min-height: 44px;
}

/* --- Boş durum ------------------------------------------------------------ */
.da-blog .da-blog-empty {
	text-align: center;
	padding: 70px 20px;
	color: var(--da-muted);
}
.da-blog .da-blog-empty svg {
	display: block;
	margin: 0 auto 14px;
}
.da-blog .da-blog-empty p {
	font-size: 16px;
	font-weight: 600;
}
.da-blog .da-blog-empty .da-more-btn { margin-top: 22px; }


/* === 4. CTA ŞERİDİ ======================================================== */
.da-blog .da-blog-cta {
	background: var(--da-warm);
	padding: 80px 0;
}
.da-blog .da-cta-strip {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(115deg, #D02026 0%, #A5161C 55%, #8F1218 100%);
	box-shadow: var(--da-shadow-cta);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	padding: 48px 52px;
}
.da-blog .da-cta-dots {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 180px;
	opacity: .15;
	background-image: radial-gradient(#fff 1.5px, transparent 1.5px);
	background-size: 15px 15px;
	pointer-events: none;
}

.da-blog .da-cta-text {
	position: relative;
	z-index: 2;
	max-width: 560px;
	min-width: 0;
}
.da-blog .da-cta-text h2 {
	font-size: 29px;
	line-height: 1.22;
	letter-spacing: -0.032em;
	color: #fff;
}
.da-blog .da-cta-text p {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255,255,255,.9);
	margin-top: 12px;
}

.da-blog .da-cta-actions {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.da-blog .da-cta-btn,
.da-blog .da-cta-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-weight: 700;
	font-size: 15.5px;
	padding: 15px 26px;
	min-height: 44px;
	border-radius: 12px;
}
.da-blog .da-cta-btn {
	background: #fff;
	color: var(--da-red);
}
.da-blog .da-cta-btn-ghost {
	background: rgba(255,255,255,.12);
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.4);
}


/* === 5. RESPONSIVE ======================================================== */
@media (max-width: 1023px) {
	.da-blog .da-blog-title { font-size: 38px; letter-spacing: -0.032em; }

	/* Öne çıkan kart tek kolona iner — görsel üstte */
	.da-blog .da-bfeat { grid-template-columns: 1fr; }
	.da-blog .da-bfeat-cover { min-height: 0; aspect-ratio: 16 / 9; }
	.da-blog .da-bfeat-body { padding: 32px; }
	.da-blog .da-bfeat-title { font-size: 25px; }
	.da-blog .da-bfeat-excerpt { font-size: 15.5px; }

	.da-blog .da-cta-strip { padding: 38px 32px; }
	.da-blog .da-cta-text h2 { font-size: 24px; }
}

@media (max-width: 767px) {
	.da-blog .da-blog-hero-inner { padding-block: 34px 40px; }
	.da-blog .da-blog-hero-ring {
		width: 320px; height: 320px;
		border-width: 46px;
		top: -120px; right: -110px;
	}
	.da-blog .da-blog-hero-glow { right: 20px; width: 140px; height: 140px; }

	.da-blog .da-blog-title { font-size: 30px; letter-spacing: -0.032em; }
	.da-blog .da-blog-lead { font-size: 15.5px; }
	.da-blog .da-bsearch { margin-top: 24px; height: 50px; }

	.da-blog .da-blog-featured { padding-top: 36px; }
	.da-blog .da-bfeat { border-radius: 18px; }
	.da-blog .da-bfeat-body { padding: 24px 20px 26px; }
	.da-blog .da-bfeat-title { font-size: 21px; letter-spacing: -0.4px; }
	.da-blog .da-bfeat-badge { top: 14px; left: 14px; padding: 7px 12px; font-size: 11.5px; }

	.da-blog .da-blog-list { padding: 32px 0 60px; }

	/* Kategori çipleri mobilde yatay kaydırılır (kırılıp yığılmaz) */
	.da-blog .da-bfilters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: -20px;
		padding-inline: 20px;
		padding-bottom: 22px;
	}
	.da-blog .da-bfilters::-webkit-scrollbar { display: none; }
	.da-blog .da-bfilter { flex-shrink: 0; }

	.da-blog .da-blog-grid { margin-top: 28px; }
	.da-blog .da-blog-more { margin-top: 34px; }
	.da-blog .da-more-btn { width: 100%; }

	.da-blog .da-blog-cta { padding: 56px 0; }
	.da-blog .da-cta-strip {
		padding: 30px 24px;
		border-radius: 18px;
		gap: 22px;
	}
	.da-blog .da-cta-text h2 { font-size: 21px; }
	.da-blog .da-cta-actions { width: 100%; }
	.da-blog .da-cta-btn,
	.da-blog .da-cta-btn-ghost { flex: 1 1 100%; }
	.da-blog .da-cta-dots { width: 90px; }
}