/*
 * main.css — asenkron yüklenir (preload + onload).
 * Below-the-fold bölümler, blog/sayfa/tekil içerik, WordPress çekirdek sınıfları,
 * @font-face (url() burada geçerli — dosya assets/css/'e göre çözülür).
 */

/* ---- Self-host fontlar ---- */
/* Font woff2 dosyaları assets/fonts/ içine bırakılınca devreye girer;
   yoksa critical.css'teki sistem font yığını kullanılır (FOUT yok). */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Code';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/fira-code-latin-400.woff2') format('woff2');
}

/* ---- Ortak bölüm başlığı ---- */
.hw-bolum-baslik { text-align: center; max-width: 60ch; margin: 0 auto clamp(32px, 5vw, 56px); }
.hw-bolum-baslik h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.hw-bolum-baslik p { color: var(--hw-metin-hafif); font-size: 1.125rem; margin: 0; }

/* ---- Özellikler ---- */
.hw-ozellikler { padding: clamp(56px, 9vw, 104px) 0; background: var(--hw-acik); }
.hw-ozellik-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(16px, 3vw, 28px);
	margin: 0; padding: 0; list-style: none;
}
.hw-ozellik-kart {
	background: var(--hw-bg);
	border: 1px solid var(--hw-kenar);
	border-radius: var(--hw-radius);
	padding: 28px;
	transition: transform var(--hw-gecis), box-shadow var(--hw-gecis), border-color var(--hw-gecis);
}
.hw-ozellik-kart:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -20px rgba(17,24,39,.2);
	border-color: transparent;
}
.hw-ozellik-ikon {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: 18px;
	color: var(--hw-turuncu);
	background: rgba(230,76,28,.1);
	border-radius: 14px;
}
.hw-ozellik-baslik { font-size: 1.1875rem; margin: 0 0 8px; }
.hw-ozellik-aciklama { color: var(--hw-metin-hafif); margin: 0; font-size: .9875rem; }

/* ---- CTA ---- */
.hw-cta { padding: clamp(48px, 8vw, 88px) 0; }
.hw-cta-ic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: clamp(32px, 5vw, 56px);
	border-radius: 20px;
	background: linear-gradient(120deg, var(--hw-koyu), #0b1220);
	color: #fff;
}
.hw-cta-baslik { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin: 0 0 10px; }
.hw-cta-aciklama { color: rgba(255,255,255,.8); margin: 0; max-width: 52ch; }

/* ---- Alt bilgi (footer) ---- */
.hw-site-altbilgi { background: var(--hw-koyu); color: rgba(255,255,255,.75); padding: 56px 0 0; margin-top: 0; }
.hw-altbilgi-ic {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 40px;
}
.hw-altbilgi-logo { font-size: 1.25rem; font-weight: 700; color: #fff; display: block; margin-bottom: 8px; }
.hw-altbilgi-slogan { margin: 0; max-width: 40ch; }
.hw-altbilgi-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.hw-altbilgi-menu a { color: rgba(255,255,255,.75); text-decoration: none; }
.hw-altbilgi-menu a:hover { color: #fff; }
.hw-altbilgi-telif {
	border-top: 1px solid rgba(255,255,255,.1);
	padding: 20px 0;
	font-size: .875rem;
}
.hw-altbilgi-telif p { margin: 0; }

/* ---- İçerik alanı (blog / sayfa / tekil) ---- */
.hw-sayfa, .hw-tekil, .hw-akis { padding: clamp(40px, 6vw, 72px) 0; }
.hw-sayfa-baslik-metin, .hw-tekil-baslik-metin, .hw-arsiv-baslik-metin { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.hw-sayfa-baslik, .hw-tekil-baslik, .hw-arsiv-baslik { max-width: 72ch; margin-inline: auto; text-align: center; margin-bottom: 32px; }
.hw-tekil-meta, .hw-yazi-kart-meta { color: var(--hw-metin-hafif); font-size: .9375rem; display: flex; gap: 16px; justify-content: center; }
.hw-yazi-kart-meta { justify-content: flex-start; }
.hw-sayfa-one-cikan, .hw-tekil-one-cikan { margin: 0 auto 40px; max-width: 900px; }
.hw-sayfa-one-cikan img, .hw-tekil-one-cikan img { border-radius: var(--hw-radius); width: 100%; }

.hw-icerik-alani { max-width: 72ch; margin-inline: auto; font-size: 1.0625rem; }
.hw-icerik-alani > * { margin-block: 0 1.25em; }
.hw-icerik-alani h2 { font-size: 1.75rem; margin-top: 1.5em; }
.hw-icerik-alani h3 { font-size: 1.375rem; margin-top: 1.4em; }
.hw-icerik-alani a { color: var(--hw-turuncu-koyu); }
.hw-icerik-alani img { border-radius: var(--hw-radius); }
.hw-icerik-alani blockquote {
	margin: 1.5em 0; padding: 4px 0 4px 24px;
	border-left: 4px solid var(--hw-turuncu);
	color: var(--hw-metin-hafif); font-style: italic;
}
.hw-icerik-alani pre {
	font-family: var(--hw-font-mono);
	background: var(--hw-koyu); color: #f8fafc;
	padding: 20px; border-radius: var(--hw-radius);
	overflow-x: auto; font-size: .9375rem;
}
.hw-icerik-alani code { font-family: var(--hw-font-mono); font-size: .9em; }
.hw-icerik-alani :not(pre) > code {
	background: var(--hw-acik); padding: 2px 6px; border-radius: 6px;
	border: 1px solid var(--hw-kenar);
}

/* ---- Blog listesi (kartlar) ---- */
.hw-yazi-listesi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(20px, 3vw, 32px);
	max-width: var(--hw-kapsayici);
}
.hw-yazi-kart {
	display: flex; flex-direction: column;
	background: var(--hw-bg);
	border: 1px solid var(--hw-kenar);
	border-radius: var(--hw-radius);
	overflow: hidden;
}
.hw-yazi-kart-gorsel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hw-yazi-kart-govde { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hw-yazi-kart-baslik { font-size: 1.25rem; margin: 0; }
.hw-yazi-kart-baslik a { color: var(--hw-metin); text-decoration: none; }
.hw-yazi-kart-baslik a:hover { color: var(--hw-turuncu-koyu); }
.hw-yazi-kart-ozet { color: var(--hw-metin-hafif); margin: 0; }
.hw-yazi-kart .hw-buton { align-self: flex-start; margin-top: auto; }

/* ---- Navigasyon (yazı geçişi + sayfalama) ---- */
.post-navigation, .pagination { max-width: var(--hw-kapsayici); margin: 48px auto 0; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px; margin: 0 2px;
	border: 1px solid var(--hw-kenar); border-radius: 8px;
	text-decoration: none; color: var(--hw-koyu);
}
.pagination .page-numbers.current { background: var(--hw-turuncu-koyu); color: #fff; border-color: transparent; }
.hw-etiketler a {
	display: inline-block; margin: 4px 4px 0 0; padding: 4px 12px;
	background: var(--hw-acik); border: 1px solid var(--hw-kenar);
	border-radius: 999px; font-size: .875rem; text-decoration: none; color: var(--hw-metin-hafif);
}

/* ---- WordPress çekirdek/Gutenberg sınıfları ---- */
.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.wp-caption-text, .wp-element-caption { font-size: .875rem; color: var(--hw-metin-hafif); text-align: center; margin-top: 8px; }
.sticky, .bypostauthor { display: block; }
.hw-bulunamadi { text-align: center; max-width: 48ch; margin: 0 auto; }

/* ---- Arama formu ---- */
.search-form { display: flex; gap: 8px; max-width: 420px; margin: 20px auto 0; }
.search-form .search-field {
	flex: 1; padding: 12px 16px; border: 1px solid var(--hw-kenar);
	border-radius: 10px; font: inherit;
}
.search-form .search-submit {
	padding: 12px 20px; border: 0; border-radius: 10px;
	background: var(--hw-turuncu-koyu); color: #fff; font-weight: 600; cursor: pointer;
}

/* ---- Scroll-reveal (main.js ekler) ---- */
.hw-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.hw-reveal.hw-gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.hw-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Yatay kaydırma (carousel / slider ortak) ---- */
.hw-basari, .hw-gorusler { padding: clamp(56px, 9vw, 104px) 0; }
.hw-gorusler { background: var(--hw-acik); }
.hw-kaydirma-sar { position: relative; }
.hw-kaydirma {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding: 8px 4px 20px;
	margin: 0 -4px;
}
.hw-kaydirma:focus-visible { outline: 3px solid var(--hw-turuncu); outline-offset: 4px; border-radius: var(--hw-radius); }
.hw-kaydirma-serit {
	display: flex;
	gap: clamp(16px, 2.5vw, 24px);
	margin: 0; padding: 0; list-style: none;
	width: max-content;
}
.hw-kaydirma-serit > li { scroll-snap-align: start; flex: 0 0 clamp(260px, 80vw, 340px); }

/* Kaydırma butonları (main.js ile görünür olur) */
.hw-kaydir-btn {
	position: absolute; top: 42%; transform: translateY(-50%);
	z-index: 3; width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem; line-height: 1;
	background: var(--hw-bg); color: var(--hw-koyu);
	border: 1px solid var(--hw-kenar); border-radius: 50%;
	box-shadow: 0 8px 24px -8px rgba(17,24,39,.3); cursor: pointer;
	transition: color var(--hw-gecis), opacity var(--hw-gecis);
}
.hw-kaydir-btn:hover { color: var(--hw-turuncu-koyu); }
.hw-kaydir-btn[disabled] { opacity: .3; cursor: default; }
.hw-kaydir-onceki { left: -8px; }
.hw-kaydir-sonraki { right: -8px; }
@media (max-width: 900px) { .hw-kaydir-btn { display: none; } }

/* Başarı kartı */
.hw-basari-kart-link {
	display: flex; flex-direction: column; height: 100%;
	background: var(--hw-bg); border: 1px solid var(--hw-kenar);
	border-radius: var(--hw-radius); overflow: hidden;
	text-decoration: none; color: inherit;
	transition: transform var(--hw-gecis), box-shadow var(--hw-gecis);
}
.hw-basari-kart-link:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(17,24,39,.25); }
.hw-basari-kart-gorsel img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.hw-basari-kart-govde { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.hw-basari-musteri { font-size: .8125rem; font-weight: 600; color: var(--hw-turuncu-koyu); text-transform: uppercase; letter-spacing: .04em; }
.hw-basari-baslik-k { font-size: 1.1875rem; font-weight: 700; color: var(--hw-metin); line-height: 1.25; }
.hw-basari-sektor { font-size: .9rem; color: var(--hw-metin-hafif); }
.hw-skor-sicrama { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hw-skor { font-weight: 700; font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 42px; border-radius: 10px; }
.hw-skor--once { background: var(--hw-acik); color: var(--hw-metin-hafif); }
.hw-skor--sonra { background: rgba(230,76,28,.12); color: var(--hw-turuncu-koyu); }
.hw-skor-ok { color: var(--hw-metin-hafif); font-weight: 700; }

/* Başarı tekil sayfası özeti */
.hw-basari-ozet {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px; max-width: 72ch; margin: 0 auto 32px; padding: 20px 24px;
	background: var(--hw-acik); border: 1px solid var(--hw-kenar); border-radius: var(--hw-radius);
}
.hw-basari-ozet-skor { display: flex; align-items: center; gap: 10px; }
.hw-basari-ozet-etiket { font-size: .9rem; color: var(--hw-metin-hafif); margin-left: 6px; }

/* Görüş kartı */
.hw-gorus-kart {
	display: flex; flex-direction: column; gap: 14px; height: 100%;
	background: var(--hw-bg); border: 1px solid var(--hw-kenar);
	border-radius: var(--hw-radius); padding: 24px;
}
.hw-yildizlar { display: inline-flex; gap: 2px; color: var(--hw-kenar); }
.hw-yildiz--dolu { color: var(--hw-altin); }
.hw-gorus-alinti { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--hw-metin); }
.hw-gorus-kisi { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.hw-gorus-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hw-gorus-kimlik { display: flex; flex-direction: column; }
.hw-gorus-ad { font-weight: 700; color: var(--hw-metin); }
.hw-gorus-rol { font-size: .875rem; color: var(--hw-metin-hafif); }

/* ---- Alt bilgi mobil ---- */
@media (max-width: 640px) {
	.hw-altbilgi-ic { flex-direction: column; }
	.hw-cta-ic { flex-direction: column; align-items: flex-start; }
}