/* ============================================================
   Wolinka — theme.json ile ifade edilemeyen istisna stiller.

   KURAL: Renk, tipografi, boşluk ve düzen değerleri theme.json'da
   yaşar. Buraya yalnızca theme.json'un karşılamadığı şeyler girer:
   sticky konum, backdrop-filter, font fallback metrikleri, blok
   çekirdek davranışı override'ları.

   Renkler burada da theme.json preset değişkenlerinden okunur
   (--wp--preset--color--*); hex tekrar yazılmaz.
   ============================================================ */

/* ------------------------------------------------------------
   Font fallback metrikleri (CLS)

   theme.json fontFace'i ascent-override/size-adjust desteklemediği
   için burada. Inter yüklenene kadar gösterilen Arial'i metrik olarak
   Inter'e eşitler; font swap anında metin yeniden akmaz.
   Kaynak: dev/tasarim/assets/css/brand.css
   ------------------------------------------------------------ */
@font-face {
	font-family: 'Inter Fallback';
	src: local('Arial');
	ascent-override: 90.49%;
	descent-override: 22.56%;
	line-gap-override: 0%;
	size-adjust: 107.06%;
}

/* ------------------------------------------------------------
   Font çizimi (perceived weight)

   Tasarım prototipi body'ye -webkit-font-smoothing: antialiased verir;
   onsuz WebKit metni subpixel çizer ve aynı ağırlık gözle görülür
   şekilde daha KALIN görünür ("font weight yüksek" izlenimi).
   theme.json bu özelliği taşıyamadığı için burada.
   Kaynak: dev/tasarim/styles.css body kuralı.
   ------------------------------------------------------------ */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.wlnk-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Yarı saydam krem: --bg-warm (#f9f6f2) alfa ile. Preset değişkeni
	   alfa alamadığı için tek hex istisnası burada. */
	background: rgba(249, 246, 242, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Yönetim çubuğu görünürken (giriş yapmış kullanıcı) sticky header çubuğun
   altından başlasın; --wp-admin--admin-bar--height'ı çekirdek basar
   (masaüstü 32px, ≤782px'de 46px). Ziyaretçileri etkilemez. */
.admin-bar .wlnk-site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.wlnk-nav {
	min-height: 72px;
	gap: 16px;
}

/* Logo: SVG viewBox 367.72x72, tasarımda 26px yüksekliğe ölçeklenir. */
.wlnk-logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.wlnk-logo svg {
	display: block;
	height: 26px;
	width: auto;
}

/* ------------------------------------------------------------
   Navigation

   Tasarımda menü linkleri 15px/500. customFontSize kapalı olduğu ve
   15px preset ölçekte olmadığı için burada.
   ------------------------------------------------------------ */
.wlnk-nav-links {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-secondary);
}

.wlnk-nav-links .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-secondary);
}

.wlnk-nav-links .wp-block-navigation-item__content:hover,
.wlnk-nav-links .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--brand-navy);
}

/* Aktif sayfa: WP current-menu-item sınıfı basar. */
.wlnk-nav-links .current-menu-item > .wp-block-navigation-item__content,
.wlnk-nav-links .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-navy);
	font-weight: 600;
}

/* Hamburger ve overlay marka rengine çekilir. */
.wlnk-nav-links .wp-block-navigation__responsive-container-open,
.wlnk-nav-links .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--brand-navy);
}

.wlnk-nav-links .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--bg-warm);
	color: var(--wp--preset--color--text-secondary);
}

/* ------------------------------------------------------------
   Mobil kırılma noktası: 720px

   Navigation bloğunun overlay'i çekirdekte 600px'e sabittir; tasarım
   720px'de hamburger'a geçiyor. 600-720px arasında çekirdek kuralları
   tersine çevirerek tasarımın kırılma noktasını koruyoruz.
   Çekirdek bu seçicileri değiştirirse burası kırılır — sürüm
   yükseltmelerinde 600-720px aralığı gözle kontrol edilmeli.
   ------------------------------------------------------------ */
@media (min-width: 600px) and (max-width: 719.98px) {
	.wlnk-nav-links .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wlnk-nav-links .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Tasarımda CTA butonu hamburger'a geçince gizlenir; menüde yer alır. */
@media (max-width: 719.98px) {
	.wlnk-nav-cta {
		display: none;
	}
}

/* ------------------------------------------------------------
   Buton gölgesi

   theme.json elements.button gölge ve hover dönüşümü taşımıyor.
   ------------------------------------------------------------ */
.wp-element-button,
.wp-block-button__link {
	box-shadow: 0 8px 20px rgba(206, 33, 65, 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(206, 33, 65, 0.30);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------
   Form alanları

   Prototipte form tasarımı yok; marka dilinden türetildi: beyaz zemin,
   lacivert tonlu çerçeve, kart radius'u (12px), odakta lacivert halka,
   onay kutusunda marka kırmızısı. Genel eleman seçicileri bilinçli:
   çekirdek bloklar (arama, yorum formu) ve eklenti formları (CF7)
   aynı görünümü kalıtır. :where() ile specificity sıfır tutulur,
   eklenti/kullanıcı stilleri gerekirse kolayca ezer.
   ------------------------------------------------------------ */
:where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	textarea,
	select
) {
	width: 100%;
	padding: 10px 16px;
	font: inherit;
	font-size: 1rem; /* 16px altı iOS'ta odakta zoom tetikler */
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
	background: var(--wp--preset--color--white);
	border: 1.5px solid rgba(27, 69, 130, 0.22);
	border-radius: 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(textarea) {
	padding: 14px 16px;
	resize: vertical;
	min-height: 140px;
}

:where(input, textarea, select)::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

/* Odak: prototipteki lacivert odak dili; outline yerine halka. */
:where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	textarea,
	select
):focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-navy);
	box-shadow: 0 0 0 3px rgba(27, 69, 130, 0.15);
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--brand-red);
	width: 18px;
	height: 18px;
}

:where(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-navy);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	:where(input, textarea, select) {
		transition: none;
	}
}

/* Yorum formu: etiketler ve notlar. */
.comment-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--text-primary);
	margin-bottom: 6px;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

.comment-notes,
.logged-in-as {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

/* Arama bloğu: pill girdi, yanındaki pill butonla eşleşir. */
.wp-block-search__input {
	border-radius: 999px;
	padding: 10px 22px;
}

.wp-block-search .wp-block-search__button {
	margin-left: 10px;
}

/* ------------------------------------------------------------
   Breadcrumb (patterns/breadcrumb.php)
   ------------------------------------------------------------ */
.wlnk-breadcrumb {
	display: flex;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 24px;
}

.wlnk-breadcrumb a:hover,
.wlnk-breadcrumb a:focus {
	color: var(--wp--preset--color--brand-navy);
}

/* ------------------------------------------------------------
   Sayfa başlığı (tekil şablonlar)

   Tasarım: clamp(32px, 5vw, 48px) / 1.18. customFontSize kapalı ve bu
   ölçek preset'lerde yok; istisna burada.
   ------------------------------------------------------------ */
.wlnk-page-title {
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.18;
	margin: 14px 0 16px;
}

/* ------------------------------------------------------------
   Prose — makale/sayfa gövde tipografisi (post-content)

   Kaynak: dev/tasarim/styles.css .prose. page-legal ve ileride
   blog single şablonu bunu paylaşır. Renkler preset'lerden.
   ------------------------------------------------------------ */
.wlnk-prose {
	font-size: 1.125rem;
	line-height: 1.75;
}

.wlnk-prose > p {
	margin-bottom: 24px;
}

.wlnk-prose h2 {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	line-height: 1.3;
	margin: 44px 0 16px;
}

.wlnk-prose h3 {
	font-size: 1.375rem;
	line-height: 1.35;
	margin: 32px 0 12px;
}

.wlnk-prose ul,
.wlnk-prose ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.wlnk-prose li {
	margin-bottom: 10px;
}

.wlnk-prose a {
	color: var(--wp--preset--color--brand-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wlnk-prose a:hover,
.wlnk-prose a:focus {
	color: #a51a34; /* brand-red'in koyusu; palette'te yok, tek kullanım */
}

.wlnk-prose strong {
	color: var(--wp--preset--color--text-primary);
}

.wlnk-prose blockquote {
	margin: 32px 0;
	padding: 18px 24px;
	border-left: 4px solid var(--wp--preset--color--brand-purple);
	background: var(--wp--preset--color--bg-card);
	border-radius: 0 12px 12px 0;
	font-size: 1.1875rem;
	color: var(--wp--preset--color--text-primary);
}

.wlnk-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--wp--preset--color--bg-card);
	color: #7d2f63;
	padding: 2px 7px;
	border-radius: 6px;
}

.wlnk-prose pre {
	background: var(--wp--preset--color--bg-dark);
	color: #f3f5f9;
	border-radius: 12px;
	padding: 20px 22px;
	overflow-x: auto;
	margin: 0 0 24px;
	font-size: 0.9375rem;
}

.wlnk-prose pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
}

@media (max-width: 720px) {
	.wlnk-prose {
		font-size: 1.0625rem;
	}
}

/* ------------------------------------------------------------
   Footer

   Koyu zemin üzerinde açık metin. Renkler theme.json preset'lerinden;
   yarı saydam beyaz tonları (link, ayraç) preset alfa alamadığı için
   rgba ile burada. Grid'in ilk sütunu (marka) geniş; WP grid bloğu eşit
   sütun üretir (repeat(5, minmax(0,1fr))), bunu tasarımın
   2fr 1fr 1fr 1fr 1fr oranına çekiyoruz. Her iki kural da tek-sınıf
   specificity; override yalnızca theme.css çekirdeğin inline layout
   stilinden SONRA yüklendiği için kazanır. Sürüm yükseltmelerinde ilk
   sütun genişliği gözle kontrol edilmeli.
   ------------------------------------------------------------ */
.wlnk-footer {
	color: rgba(255, 255, 255, 0.72);
}

.wlnk-footer-grid {
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 32px;
	margin-bottom: 40px;
}

/* Logo–not arası boşluğu desendeki blockGap (16px) verir. */
.wlnk-footer-logo {
	display: inline-block;
	line-height: 0;
}

.wlnk-footer-logo svg {
	display: block;
	height: 35px;
	width: auto;
}

.wlnk-footer-note {
	max-width: 300px;
	color: rgba(255, 255, 255, 0.72);
}

/* Başlıklar: gövde fontu, küçük, harf aralıklı, tam beyaz. Majüskül
   CSS'te DEĞİL içerikte (desende 'PLUGINS' diye yazılı): text-transform,
   sayfa dili tr iken i'yi İ yapar (PLUGİNS) — tasarım İngilizce. */
.wlnk-footer-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--white);
	margin: 0 0 14px;
}

.wlnk-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem; /* tasarım: 15px; gövdenin 17px'ini kalıtmasın */
}

.wlnk-footer-list li {
	margin-bottom: 10px;
}

.wlnk-footer-list a {
	color: rgba(255, 255, 255, 0.72);
}

.wlnk-footer-list a:hover,
.wlnk-footer-list a:focus {
	color: var(--wp--preset--color--white);
}

/* Telif satırı: geniş hizalı group; çizgi group'ta, metin içindeki p'de. */
.wlnk-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 24px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

.wlnk-footer-bottom p {
	margin: 0;
}

/* Koyu zeminde odak halkası açık renk (theme.json accent-light). */
.wlnk-footer :focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-light);
	outline-offset: 2px;
}

/* 920px: marka bloğu tam genişlik, link sütunları 2'şerli. */
@media (max-width: 920px) {
	.wlnk-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.wlnk-footer-brand {
		grid-column: 1 / -1;
	}
}