/*
Theme Name: Vibe Studio Blog
Theme URI: https://vibestudio.com.tr/blog/
Description: vibestudio.com.tr ana sitesinin tasarım diliyle birebir uyumlu, Twenty Twenty-Five tabanlı blok alt tema (child theme). Oswald + Roboto Condensed tipografi, #C6A47E marka aksanı, keskin geometri, ana site header/footer bütünlüğü. SEO/GEO şema işaretlemesi ve ölçümleme entegrasyonu dahildir.
Author: Vibe Studio
Author URI: https://vibestudio.com.tr/
Template: twentytwentyfive
Version: 1.0.8
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vibestudio-blog
Tags: blog, block-theme, full-site-editing, one-column, custom-colors, custom-menu
*/

/* ==========================================================================
   0. TOKENLAR — vibestudio.com.tr'den ölçülerek çıkarılmıştır
   ========================================================================== */

:root {
	--vs-gold:        #C6A47E;
	--vs-gold-dark:   #7D6740;
	--vs-ink:         #222222;
	--vs-ink-900:     #1F1F1F;
	--vs-white:       #FFFFFF;

	--vs-text:        #444444;
	--vs-text-muted:  #999999;
	--vs-text-invert: #C6C6C5;

	--vs-surface:     #F7F7F7;
	--vs-surface-2:   #F2F2F2;
	--vs-border:      #E0E0E0;
	--vs-border-soft: #E9E9E9;
	--vs-mint:        #DDECE6;

	--vs-font-head:   'Oswald', 'Arial Narrow', system-ui, sans-serif;
	--vs-font-body:   'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;

	--vs-container:   1200px;
	--vs-content:     760px;
	--vs-gutter:      15px;

	--vs-header-h:    88px;

	--vs-motion-ui:   250ms;
	--vs-motion-dec:  500ms;
	--vs-ease:        cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. TEMEL
   ========================================================================== */

html { scroll-behavior: smooth; }

body.wp-site-blog,
body {
	font-family: var(--vs-font-body);
	color: var(--vs-text);
	background: var(--vs-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Sabit header'ın altında kalan içerik payı */
body { padding-top: var(--vs-header-h); }
.admin-bar .vs-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vs-header { top: 46px; } }

h1, h2, h3, h4, h5, h6 { font-family: var(--vs-font-head); color: var(--vs-ink); }

a { color: var(--vs-gold-dark); }
a:hover { color: var(--vs-ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--vs-ink);
	outline-offset: 2px;
}

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

.vs-container {
	max-width: var(--vs-container);
	margin-inline: auto;
	padding-inline: var(--vs-gutter);
}

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

/* ==========================================================================
   2. HEADER — ana sitenin sticky bar'ı referans alındı (#222222)
   ========================================================================== */

.vs-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 999;
	background: var(--vs-ink);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.vs-header__inner {
	max-width: var(--vs-container);
	margin-inline: auto;
	padding: 0 var(--vs-gutter);
	height: var(--vs-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.vs-header__logo { display: flex; align-items: center; text-decoration: none; }
.vs-header__logo img { height: 52px; width: auto; display: block; }
.vs-header__logo-text {
	font-family: var(--vs-font-head);
	font-size: 22px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--vs-white);
	text-decoration: none;
	line-height: 1;
}
.vs-header__logo-text span { display: block; font-size: 11px; letter-spacing: 5px; opacity: .8; margin-top: 3px; }

.vs-nav { display: flex; align-items: center; gap: 34px; }
.vs-nav a {
	font-family: var(--vs-font-head);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--vs-white);
	text-decoration: none;
	transition: color var(--vs-motion-ui) var(--vs-ease);
	white-space: nowrap;
}
.vs-nav a:hover,
.vs-nav a[aria-current="page"],
.vs-nav a.is-active { color: var(--vs-gold); }

.vs-nav__toggle {
	display: none;
	background: none;
	border: 0;
	color: var(--vs-white);
	font-size: 24px;
	line-height: 1;
	padding: 8px;
	cursor: pointer;
}

@media (max-width: 1024px) {
	.vs-nav { gap: 22px; }
	.vs-nav a { font-size: 15px; letter-spacing: .5px; }
}

@media (max-width: 900px) {
	:root { --vs-header-h: 72px; }
	.vs-nav__toggle { display: block; }
	.vs-nav {
		position: fixed;
		top: var(--vs-header-h);
		inset-inline: 0;
		background: var(--vs-ink);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 0 24px;
		border-top: 1px solid rgba(255, 255, 255, .08);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: all var(--vs-motion-ui) var(--vs-ease);
		max-height: calc(100vh - var(--vs-header-h));
		overflow-y: auto;
	}
	.vs-nav.is-open { transform: none; opacity: 1; visibility: visible; }
	.vs-nav a { padding: 14px var(--vs-gutter); font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.06); }
	.vs-header__logo img { height: 42px; }
}

/* ==========================================================================
   3. HERO — ana sitenin .page-title bileşeni
   ========================================================================== */

.vs-hero {
	position: relative;
	background: var(--vs-ink) center/cover no-repeat;
	color: var(--vs-white);
	text-align: center;
	padding: clamp(96px, 14vw, 190px) 0 clamp(72px, 11vw, 150px);
	overflow: hidden;
}
.vs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(34,34,34,.72) 0%, rgba(34,34,34,.62) 55%, rgba(34,34,34,.80) 100%);
}
.vs-hero > * { position: relative; z-index: 1; }

.vs-hero__eyebrow {
	font-family: var(--vs-font-head);
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--vs-gold);
	margin: 0 0 14px;
}

.vs-hero__title {
	font-family: var(--vs-font-head);
	font-size: clamp(30px, 5.2vw, 60px);
	line-height: 1.16;
	font-weight: 300;
	text-transform: uppercase;
	color: var(--vs-white);
	margin: 0;
	max-width: 15ch;
	margin-inline: auto;
}
.vs-hero__title--post {
	text-transform: none;
	max-width: 20ch;
	font-size: clamp(27px, 4.2vw, 48px);
}

.vs-hero__meta {
	margin-top: 22px;
	font-size: 14px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--vs-text-invert);
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.vs-hero__meta span + span::before { content: "·"; margin-inline-end: 10px; color: var(--vs-gold); }

.vs-hero__side {
	position: absolute;
	left: 40px;
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	font-family: var(--vs-font-head);
	font-size: 11px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	z-index: 1;
}
.vs-hero__side::before {
	content: "";
	display: block;
	width: 1px;
	height: 60px;
	background: rgba(255, 255, 255, .4);
	margin: 0 auto 18px;
}
@media (max-width: 1100px) { .vs-hero__side { display: none; } }

/* Breadcrumb */
.vs-breadcrumb {
	background: var(--vs-surface);
	border-bottom: 1px solid var(--vs-border);
	font-size: 14px;
}
.vs-breadcrumb ol {
	max-width: var(--vs-container);
	margin-inline: auto;
	padding: 14px var(--vs-gutter);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.vs-breadcrumb li + li::before { content: "›"; margin-inline-end: 8px; color: var(--vs-text-muted); }
.vs-breadcrumb a { color: var(--vs-text); text-decoration: none; }
.vs-breadcrumb a:hover { color: var(--vs-gold-dark); text-decoration: underline; }
.vs-breadcrumb [aria-current="page"] { color: var(--vs-text-muted); }

/* ==========================================================================
   4. BÖLÜM BAŞLIĞI — ana sitenin sec-title bileşeni
   ========================================================================== */

.vs-sec-title { margin-bottom: 40px; }
.vs-sec-title__top {
	display: block;
	font-family: var(--vs-font-head);
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--vs-gold-dark);
	margin-bottom: 6px;
}
.vs-sec-title h2 {
	font-family: var(--vs-font-head);
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--vs-ink);
	margin: 0;
	position: relative;
	display: inline-block;
}
.vs-sec-title h2::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 10px;
	background: var(--vs-mint);
	z-index: -1;
	border-radius: 40% 60% 55% 45% / 100% 100% 60% 60%;
}

/* ==========================================================================
   5. YAZI KARTI (post card) — servis kartından türetildi
   ========================================================================== */

.vs-grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .vs-grid { grid-template-columns: 1fr; } }

.vs-card {
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	display: flex;
	flex-direction: column;
	transition: transform var(--vs-motion-ui) var(--vs-ease), border-color var(--vs-motion-ui) var(--vs-ease);
}
.vs-card:hover { transform: translateY(-3px); border-color: var(--vs-gold); }

.vs-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vs-surface-2); }
.vs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--vs-motion-dec) var(--vs-ease); }
.vs-card:hover .vs-card__media img { transform: scale(1.04); }

.vs-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

.vs-card__cat {
	font-family: var(--vs-font-head);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--vs-gold-dark);
}
.vs-card__cat a { color: inherit; text-decoration: none; }
.vs-card__cat a:hover { text-decoration: underline; }

.vs-card__title { font-size: 21px; font-weight: 400; line-height: 1.3; margin: 0; }
.vs-card__title a { color: var(--vs-ink); text-decoration: none; }
.vs-card__title a:hover { color: var(--vs-gold-dark); }

.vs-card__excerpt { font-size: 16px; line-height: 1.7; color: var(--vs-text); margin: 0; }

.vs-card__meta {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--vs-border-soft);
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--vs-text-muted);
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.vs-card__meta span + span::before { content: "·"; margin-inline-end: 10px; color: var(--vs-gold); }

/* Öne çıkan yazı */
.vs-featured {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	border: 1px solid var(--vs-border);
	background: var(--vs-white);
}
.vs-featured__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vs-surface-2); }
.vs-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-featured__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.vs-featured__title { font-size: clamp(24px, 3vw, 34px); font-weight: 400; line-height: 1.22; margin: 0; }
.vs-featured__title a { color: var(--vs-ink); text-decoration: none; }
.vs-featured__title a:hover { color: var(--vs-gold-dark); }
.vs-featured__badge {
	align-self: flex-start;
	font-family: var(--vs-font-head);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--vs-ink);
	background: var(--vs-gold);
	padding: 6px 14px;
}
@media (max-width: 860px) { .vs-featured { grid-template-columns: 1fr; } }

/* ==========================================================================
   6. BUTONLAR (vs-button)
   ========================================================================== */

.vs-btn,
.wp-block-button__link {
	display: inline-block;
	font-family: var(--vs-font-head);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 34px;
	border-radius: 0;
	border: 1px solid transparent;
	background: var(--vs-gold);
	color: var(--vs-ink);
	cursor: pointer;
	transition: all var(--vs-motion-ui) var(--vs-ease);
}
.vs-btn:hover,
.wp-block-button__link:hover { background: var(--vs-gold-dark); color: var(--vs-white); transform: translateY(-2px); }

.vs-btn--secondary { background: transparent; border-color: var(--vs-ink); color: var(--vs-ink); }
.vs-btn--secondary:hover { background: var(--vs-ink); color: var(--vs-white); }

.vs-btn--ghost { background: transparent; border-color: rgba(255,255,255,.4); color: var(--vs-white); }
.vs-btn--ghost:hover { background: var(--vs-white); color: var(--vs-ink); border-color: var(--vs-white); }

.vs-btn[disabled], .vs-btn.is-disabled { background: var(--vs-border); color: var(--vs-text-muted); cursor: not-allowed; transform: none; }

/* Metin bağlantı butonu — ana sitedeki "REFERANSLARI İNCELE" biçimi */
.vs-linkbtn {
	display: inline-block;
	font-family: var(--vs-font-head);
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--vs-gold-dark);
	text-decoration: underline;
	text-underline-offset: 6px;
}
.vs-linkbtn:hover { color: var(--vs-ink); }

/* ==========================================================================
   7. YAZI İÇERİĞİ (okuma tipografisi)
   ========================================================================== */

.vs-section { padding-block: clamp(56px, 8vw, 96px); }
.vs-section--tight { padding-block: clamp(40px, 6vw, 64px); }
.vs-section--surface { background: var(--vs-surface); }

.vs-prose { max-width: var(--vs-content); margin-inline: auto; }
.vs-prose > * + * { margin-top: 1.2em; }
.vs-prose p { font-size: 18px; line-height: 1.78; color: var(--vs-text); }
.vs-prose h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 400; margin-top: 2em; line-height: 1.24; }
.vs-prose h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 300; margin-top: 1.8em; line-height: 1.3; }
.vs-prose h4 { font-size: 21px; font-weight: 400; margin-top: 1.6em; }
.vs-prose ul, .vs-prose ol { padding-inline-start: 22px; font-size: 18px; line-height: 1.78; }
.vs-prose li + li { margin-top: 8px; }
.vs-prose li::marker { color: var(--vs-gold-dark); }
.vs-prose img, .vs-prose figure img { border-radius: 0; }
.vs-prose figcaption { font-size: 14px; color: var(--vs-text-muted); margin-top: 10px; }
.vs-prose blockquote, .vs-prose .wp-block-quote {
	border-left: 3px solid var(--vs-gold);
	padding: 8px 0 8px 28px;
	margin-block: 1.6em;
	font-family: var(--vs-font-head);
	font-weight: 300;
	font-size: 21px;
	line-height: 1.6;
	color: var(--vs-ink);
	font-style: normal;
}
.vs-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.vs-prose th, .vs-prose td { border: 1px solid var(--vs-border); padding: 12px 14px; text-align: start; }
.vs-prose th { background: var(--vs-surface); font-family: var(--vs-font-head); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; }
.vs-prose a { color: var(--vs-gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.vs-prose a:hover { color: var(--vs-ink); }
.vs-prose hr, .vs-prose .wp-block-separator { border: 0; border-top: 1px solid var(--vs-border); margin-block: 2.4em; }

/* Blokların içerik genişliğine oturması */
.vs-prose .alignwide { max-width: var(--vs-container); margin-inline: calc(50% - min(50vw - var(--vs-gutter), var(--vs-container) / 2)); width: auto; }
.vs-prose .alignfull { max-width: 100vw; margin-inline: calc(50% - 50vw); width: 100vw; }

/* GEO/AEO: soru-cevap bloğu */
.vs-faq { border-top: 1px solid var(--vs-border); }
.vs-faq details { border-bottom: 1px solid var(--vs-border); padding: 18px 0; }
.vs-faq summary {
	font-family: var(--vs-font-head);
	font-size: 19px;
	font-weight: 400;
	color: var(--vs-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: baseline;
}
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after { content: "+"; color: var(--vs-gold-dark); font-size: 22px; line-height: 1; }
.vs-faq details[open] summary::after { content: "−"; }
.vs-faq details > *:not(summary) { margin-top: 12px; font-size: 17px; line-height: 1.75; }

/* Öne çıkan cevap kutusu (AEO) */
.vs-answer {
	background: var(--vs-surface);
	border-left: 3px solid var(--vs-gold);
	padding: 22px 26px;
	font-size: 18px;
	line-height: 1.7;
}
.vs-answer strong { font-family: var(--vs-font-head); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; display: block; margin-bottom: 8px; color: var(--vs-gold-dark); }

/* ==========================================================================
   8. YAZAR KUTUSU / CTA / İLGİLİ YAZILAR
   ========================================================================== */

.vs-authorbox {
	max-width: var(--vs-content);
	margin: 56px auto 0;
	border: 1px solid var(--vs-border);
	padding: 28px 30px;
	display: flex;
	gap: 22px;
	align-items: flex-start;
}
.vs-authorbox img { width: 72px; height: 72px; object-fit: cover; flex: none; }
.vs-authorbox h3 { font-size: 20px; font-weight: 400; margin: 0 0 2px; }
.vs-authorbox__role { font-family: var(--vs-font-head); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--vs-gold-dark); margin: 0 0 10px; }
.vs-authorbox p { font-size: 16px; line-height: 1.7; margin: 0; }
@media (max-width: 560px) { .vs-authorbox { flex-direction: column; } }

.vs-cta {
	background: var(--vs-ink);
	color: var(--vs-white);
	text-align: center;
	padding: clamp(48px, 7vw, 80px) var(--vs-gutter);
}
.vs-cta h2 { color: var(--vs-white); font-weight: 300; font-size: clamp(26px, 3.6vw, 40px); margin: 0 0 14px; }
.vs-cta p { color: var(--vs-text-invert); font-size: 18px; max-width: 60ch; margin: 0 auto 28px; line-height: 1.7; }

.vs-related { border-top: 1px solid var(--vs-border); }

/* Sayfalama */
.vs-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 56px;
	font-family: var(--vs-font-head);
}
.vs-pagination a, .vs-pagination span {
	min-width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vs-border);
	color: var(--vs-ink);
	text-decoration: none;
	padding-inline: 12px;
	transition: all var(--vs-motion-ui) var(--vs-ease);
}
.vs-pagination a:hover { border-color: var(--vs-gold); color: var(--vs-gold-dark); }
.vs-pagination .current { background: var(--vs-ink); color: var(--vs-white); border-color: var(--vs-ink); }

/* Arama */
.vs-search { display: flex; max-width: 520px; margin-inline: auto; }
.vs-search input[type="search"] {
	flex: 1;
	border: 1px solid var(--vs-border);
	border-right: 0;
	padding: 14px 16px;
	font-family: var(--vs-font-body);
	font-size: 16px;
	border-radius: 0;
	min-width: 0;
}
.vs-search button { border: 0; }

/* ==========================================================================
   9. FOOTER — ana site footer'ının birebir karşılığı
   ========================================================================== */

.vs-footer {
	background: var(--vs-ink) url('assets/images/footer-pattern.svg') center/cover no-repeat;
	color: var(--vs-text-invert);
	padding: 86px 0 40px;
	font-size: 15px;
	line-height: 26px;
}
.vs-footer__grid {
	max-width: var(--vs-container);
	margin-inline: auto;
	padding-inline: var(--vs-gutter);
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr 1.2fr;
	gap: 40px;
}
@media (max-width: 980px) { .vs-footer__grid { grid-template-columns: 1fr 1fr; gap: 44px 32px; } }
@media (max-width: 560px) { .vs-footer__grid { grid-template-columns: 1fr; } }

.vs-footer__logo img { height: 62px; width: auto; margin-bottom: 22px; }
.vs-footer__about { color: var(--vs-text-invert); margin: 0 0 24px; }

.vs-footer h3 {
	font-family: var(--vs-font-head);
	font-size: 21px;
	font-weight: 400;
	color: var(--vs-white);
	margin: 0 0 22px;
}

.vs-footer ul { list-style: none; margin: 0; padding: 0; }
.vs-footer li { border-bottom: 1px solid rgba(233, 233, 233, .14); }
.vs-footer li:last-child { border-bottom: 0; }
.vs-footer li a {
	display: block;
	padding: 13px 0;
	color: var(--vs-text-invert);
	text-decoration: none;
	transition: color var(--vs-motion-ui) var(--vs-ease);
}
.vs-footer li a:hover { color: var(--vs-gold); }

.vs-footer__contact p { margin: 0 0 18px; }
.vs-footer__label { display: block; color: var(--vs-gold); }
.vs-footer__contact a { color: var(--vs-text-invert); text-decoration: none; }
.vs-footer__contact a:hover { color: var(--vs-gold); }

.vs-social { display: flex; gap: 12px; }
.vs-social a {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--vs-gold);
	color: var(--vs-ink);
	border-radius: 50%;
	transition: all var(--vs-motion-ui) var(--vs-ease);
}
.vs-social a:hover { background: var(--vs-white); }
.vs-social svg { width: 18px; height: 18px; fill: currentColor; }

.vs-footer__bottom {
	max-width: var(--vs-container);
	margin: 48px auto 0;
	padding: 24px var(--vs-gutter) 0;
	border-top: 1px solid rgba(233, 233, 233, .14);
	text-align: center;
	font-size: 15px;
}
.vs-footer__bottom a { color: var(--vs-gold); text-decoration: none; }
.vs-footer__bottom a:hover { text-decoration: underline; }

/* ==========================================================================
   10. YUKARI ÇIK
   ========================================================================== */

.vs-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 52px; height: 52px;
	border-radius: 50%;
	border: 0;
	background: var(--vs-gold);
	color: var(--vs-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--vs-motion-ui) var(--vs-ease);
	z-index: 998;
}
.vs-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.vs-totop:hover { background: var(--vs-gold-dark); color: var(--vs-white); }
.vs-totop svg { width: 20px; height: 20px; fill: currentColor; }

/* ==========================================================================
   11. ERİŞİLEBİLİRLİK & HAREKET TERCİHİ
   ========================================================================== */

.vs-skip-link {
	position: absolute;
	left: 8px; top: -60px;
	background: var(--vs-gold);
	color: var(--vs-ink);
	padding: 12px 18px;
	font-family: var(--vs-font-head);
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	z-index: 1001;
	transition: top var(--vs-motion-ui) var(--vs-ease);
}
.vs-skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   12. BLOK ÇEKİRDEĞİ İLE UYUM (core blocks)
   ========================================================================== */

/* Hero varsayılan arka planı — ana sitedeki .page-title görseliyle aynı */
.vs-hero--default { background-image: url('https://vibestudio.com.tr/images/background/footer-bg.jpg'); }

.vs-hero .vs-hero__eyebrow,
.vs-hero .wp-block-post-terms { text-align: center; }
.vs-hero .wp-block-post-terms a { color: var(--vs-gold); text-decoration: none; }
.vs-hero .wp-block-post-terms a:hover { text-decoration: underline; }
.vs-hero .wp-block-post-title,
.vs-hero .wp-block-query-title { color: var(--vs-white); text-align: center; }
.vs-hero .wp-block-post-title a { color: inherit; text-decoration: none; }
.vs-hero__desc { color: var(--vs-text-invert); text-align: center; max-width: 62ch; margin: 18px auto 0; font-size: 17px; }
.vs-hero > .wp-block-group__inner-container { position: relative; z-index: 1; }

/* Sayfa gövdesi ana kabı */
.vs-main { overflow-x: clip; }

/* Query loop → kart ızgarası */
.vs-loop .vs-grid.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .vs-loop .vs-grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .vs-loop .vs-grid.wp-block-post-template { grid-template-columns: 1fr; } }

.vs-loop .wp-block-post {
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform var(--vs-motion-ui) var(--vs-ease), border-color var(--vs-motion-ui) var(--vs-ease);
}
.vs-loop .wp-block-post:hover { transform: translateY(-3px); border-color: var(--vs-gold); }

.vs-loop .vs-card__media { margin: 0; background: var(--vs-surface-2); }
.vs-loop .vs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--vs-motion-dec) var(--vs-ease); }
.vs-loop .wp-block-post:hover .vs-card__media img { transform: scale(1.04); }
.vs-loop .wp-block-post:not(:has(.vs-card__media img)) .vs-card__media { display: none; }

.vs-loop .vs-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.vs-loop .vs-card__cat { font-family: var(--vs-font-head); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--vs-gold-dark); }
.vs-loop .vs-card__cat a { color: inherit; text-decoration: none; }
.vs-loop .vs-card__cat a:hover { text-decoration: underline; }
.vs-loop .vs-card__title { font-size: 21px; font-weight: 400; line-height: 1.3; margin: 0; }
.vs-loop .vs-card__title a { color: var(--vs-ink); text-decoration: none; }
.vs-loop .vs-card__title a:hover { color: var(--vs-gold-dark); }
.vs-loop .vs-card__excerpt, .vs-loop .vs-card__excerpt p { font-size: 16px; line-height: 1.7; color: var(--vs-text); margin: 0; }
.vs-loop .vs-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
.vs-loop .vs-card__meta {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--vs-border-soft);
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--vs-text-muted);
	gap: 10px;
}

/* Tekil yazıdaki öne çıkan görsel */
.vs-post-hero-image { margin-block: 0 40px; }
.vs-post-hero-image img { width: 100%; object-fit: cover; display: block; }

/* Etiketler */
.vs-post-tags { margin-top: 40px; }
.vs-tags { font-family: var(--vs-font-head); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--vs-text-muted); }
.vs-tags a { color: var(--vs-gold-dark); text-decoration: none; }
.vs-tags a:hover { text-decoration: underline; }
.vs-post-tags:not(:has(a)) { display: none; }

/* Proje künyesi tablosu */
.vs-projectbox table { border-collapse: collapse; width: 100%; }
.vs-projectbox td { border: 1px solid var(--vs-border); padding: 12px 16px; font-size: 16px; }
.vs-projectbox td:first-child { background: var(--vs-surface); width: 34%; font-family: var(--vs-font-head); font-weight: 400; }

/* Arama bloğu */
.vs-search .wp-block-search__inside-wrapper { border: 0; }
.vs-search .wp-block-search__input {
	border: 1px solid var(--vs-border);
	border-radius: 0;
	padding: 14px 16px;
	font-family: var(--vs-font-body);
	font-size: 16px;
}
.vs-search .wp-block-search__button {
	background: var(--vs-gold);
	color: var(--vs-ink);
	border: 0;
	border-radius: 0;
	font-family: var(--vs-font-head);
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 14px 26px;
	margin-inline-start: 0;
	transition: background var(--vs-motion-ui) var(--vs-ease);
}
.vs-search .wp-block-search__button:hover { background: var(--vs-gold-dark); color: var(--vs-white); }

/* Sayfalama (query-pagination) */
.vs-pagination.wp-block-query-pagination { margin-top: 56px; gap: 8px; }
.vs-pagination .wp-block-query-pagination-numbers,
.vs-pagination .wp-block-query-pagination-previous,
.vs-pagination .wp-block-query-pagination-next { font-family: var(--vs-font-head); text-transform: uppercase; letter-spacing: 1px; }
.vs-pagination a, .vs-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding-inline: 12px;
	border: 1px solid var(--vs-border); color: var(--vs-ink); text-decoration: none;
	transition: all var(--vs-motion-ui) var(--vs-ease);
}
.vs-pagination a:hover { border-color: var(--vs-gold); color: var(--vs-gold-dark); }
.vs-pagination .page-numbers.current { background: var(--vs-ink); color: var(--vs-white); border-color: var(--vs-ink); }

/* Buton bloğu — outline varyantı */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--vs-ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--vs-ink); color: var(--vs-white); border-color: var(--vs-ink); }

/* Bölüm içi ortalanan içerik (constrained layout) */
.vs-section > .wp-block-group__inner-container > *,
.vs-section > * { margin-inline: auto; }

/* Yönetim çubuğu boşluğu */
.admin-bar .vs-totop { bottom: 24px; }

/* ==========================================================================
   13. YAZDIRMA
   ========================================================================== */

@media print {
	.vs-header, .vs-footer, .vs-totop, .vs-cta, .vs-related, .vs-breadcrumb { display: none !important; }
	body { padding-top: 0; font-size: 12pt; }
	.vs-hero { background: none; color: #000; padding: 0 0 24px; }
	.vs-hero::before { display: none; }
	.vs-hero__title, .vs-hero__eyebrow, .vs-hero__meta { color: #000; }
}


/* ==========================================================================
   14. DÜZELTMELER — v1.0.1 (11.08.2026, canlıda doğrulandı)
   ========================================================================== */

/* WordPress çekirdeği "is-layout-flow" akışına 24px üst boşluk veriyor.
   Query loop ızgaraya çevrildiği için bu boşluk kart hücrelerini aşağı
   kaydırıp satır hizasını bozuyordu. Çekirdek kuralı :where() ile yazıldığı
   için düz bir seçici onu geçersiz kılar. */
.vs-loop .vs-grid.wp-block-post-template > li,
.vs-related .vs-grid > * { margin-block-start: 0; }
.vs-loop .vs-grid.wp-block-post-template > li { align-self: stretch; }

/* Sabit header, bağlantıyla atlanan başlığı örtmesin */
.vs-prose :where(h2, h3, h4),
[id] { scroll-margin-top: calc(var(--vs-header-h) + 24px); }

/* Öne çıkan görseli olmayan yazıda boş figür yer kaplamasın */
.vs-loop .wp-block-post-featured-image:empty,
.vs-post-hero-image:empty { display: none; }


/* --- v1.0.2 (11.08.2026) — mobil menü yığın sırası ve dokunma hedefi --- */

/* Sabit .vs-nav, z-index'i "auto" iken hero'nun konumlanmış (z-index:1)
   çocuklarının altında kalıyordu. Açık menü her zaman en üstte olmalı. */
@media (max-width: 900px) {
	.vs-nav { z-index: 1000; }
	.vs-nav__toggle { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
}


/* --- v1.0.3 (11.08.2026) — bölümler arası beyaz şeritler --- */

/* WordPress'in blockGap değeri (24px), üst düzey bölümlerin arasına
   margin-block-start basıyordu: header ile hero, hero ile breadcrumb,
   bölüm ile CTA, CTA ile footer arasında beyaz şerit oluşuyordu.
   Ana sitede bölümler kesintisiz akar; blog da öyle olmalı.
   Yazı gövdesindeki blok boşlukları etkilenmez (.vs-prose kendi
   aralığını yönetir). */
.wp-site-blocks > * + *,
.vs-main > * + * { margin-block-start: 0; }
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part { margin-block: 0; }


/* ==========================================================================
   15. TEKLİF LANDING PAGE ve FORM — v1.0.4 (11.08.2026)
   ========================================================================== */

.vs-hero--lp { padding: clamp(100px, 13vw, 170px) var(--vs-gutter) clamp(80px, 10vw, 130px); }
.vs-hero__lead {
	max-width: 60ch;
	margin: 22px auto 0;
	font-size: clamp(17px, 1.6vw, 19px);
	line-height: 1.7;
	color: var(--vs-text-invert);
}

/* --- Hizmet kartları --- */
.vs-lp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 1024px) { .vs-lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .vs-lp-grid { grid-template-columns: 1fr; } }

.vs-lp-card {
	position: relative;
	display: block;
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	padding: 28px 30px 30px;
	text-decoration: none;
	transition: all var(--vs-motion-ui) var(--vs-ease);
}
.vs-lp-card:hover { border-color: var(--vs-gold); transform: translateY(-3px); }
.vs-lp-card__no {
	position: absolute;
	right: 18px;
	top: 10px;
	font-family: var(--vs-font-head);
	font-size: 44px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--vs-border);
}
.vs-lp-card h3 {
	position: relative;
	font-size: 20px;
	font-weight: 400;
	margin: 0 0 10px;
	padding-left: 34px;
	color: var(--vs-ink);
}
.vs-lp-card h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 22px;
	height: 1px;
	background: var(--vs-gold);
}
.vs-lp-card p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--vs-text); }

/* --- Form yerleşimi --- */
.vs-lp-form-wrap {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 900px) { .vs-lp-form-wrap { grid-template-columns: 1fr; } }

.vs-lp-form-intro p { font-size: 17px; line-height: 1.75; color: var(--vs-text); }

.vs-steps { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: adim; }
.vs-steps li {
	counter-increment: adim;
	position: relative;
	padding: 0 0 20px 46px;
	border-left: 1px solid var(--vs-border);
	margin-left: 15px;
}
.vs-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.vs-steps li::before {
	content: counter(adim);
	position: absolute;
	left: -15px;
	top: 0;
	width: 30px; height: 30px;
	background: var(--vs-gold);
	color: var(--vs-ink);
	font-family: var(--vs-font-head);
	font-size: 14px;
	display: grid;
	place-items: center;
	border-radius: 50%;
}
.vs-steps strong { display: block; font-family: var(--vs-font-head); font-weight: 400; font-size: 18px; color: var(--vs-ink); }
.vs-steps span { display: block; font-size: 16px; line-height: 1.6; color: var(--vs-text); margin-top: 2px; }

.vs-lp-contact { margin-top: 32px; border-top: 1px solid var(--vs-border); padding-top: 24px; }
.vs-lp-contact p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.vs-lp-contact__label {
	display: block;
	font-family: var(--vs-font-head);
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vs-gold-dark);
}
.vs-lp-contact a { color: var(--vs-ink); text-decoration: none; }
.vs-lp-contact a:hover { color: var(--vs-gold-dark); text-decoration: underline; }

.vs-lp-form-box {
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	padding: clamp(24px, 3.5vw, 44px);
}

/* --- Contact Form 7 --- */
.vs-form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .vs-form__row2 { grid-template-columns: 1fr; } }

.vs-form p { margin: 0 0 18px; }
.vs-form label {
	display: block;
	font-family: var(--vs-font-head);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--vs-ink);
}
.vs-req { color: var(--vs-gold-dark); }

.vs-form input[type="text"],
.vs-form input[type="email"],
.vs-form input[type="tel"],
.vs-form input[type="number"],
.vs-form select,
.vs-form textarea {
	width: 100%;
	margin-top: 7px;
	padding: 13px 14px;
	font-family: var(--vs-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--vs-ink);
	background: var(--vs-white);
	border: 1px solid var(--vs-border);
	border-radius: 0;
	transition: border-color var(--vs-motion-ui) var(--vs-ease);
	appearance: none;
}
.vs-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--vs-ink) 50%), linear-gradient(135deg, var(--vs-ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 3px), calc(100% - 14px) calc(50% + 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}
.vs-form textarea { resize: vertical; min-height: 140px; }
.vs-form :is(input, select, textarea):focus {
	outline: 2px solid var(--vs-gold);
	outline-offset: 0;
	border-color: var(--vs-gold);
}
.vs-form ::placeholder { color: var(--vs-text-muted); opacity: 1; }

.vs-form__quiz label { display: block; }
.vs-form__quiz .wpcf7-quiz-label { display: block; font-family: var(--vs-font-body); font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--vs-text); margin-top: 7px; }

.vs-form__kvkk { font-size: 15px; line-height: 1.6; color: var(--vs-text); }
.vs-form__kvkk .wpcf7-list-item { margin: 0; }
.vs-form__kvkk label { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-family: var(--vs-font-body); font-size: 15px; color: var(--vs-text); cursor: pointer; }
.vs-form__kvkk input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--vs-gold-dark); flex: none; }

.vs-form__submit { margin-top: 6px; }
.vs-form input[type="submit"] {
	width: 100%;
	background: var(--vs-gold);
	color: var(--vs-ink);
	border: 0;
	border-radius: 0;
	padding: 17px 34px;
	font-family: var(--vs-font-head);
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--vs-motion-ui) var(--vs-ease);
}
.vs-form input[type="submit"]:hover { background: var(--vs-gold-dark); color: var(--vs-white); }
.vs-form input[type="submit"]:disabled { background: var(--vs-border); color: var(--vs-text-muted); cursor: not-allowed; }

.vs-form__note { font-size: 14px; color: var(--vs-text-muted); line-height: 1.6; margin-top: 14px; }

/* CF7 geri bildirim kutuları */
.wpcf7 form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--vs-border);
	border-left-width: 3px;
	font-size: 16px;
	line-height: 1.6;
	border-radius: 0;
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #2E7D32; background: #F1F8F2; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-left-color: var(--vs-gold-dark); background: var(--vs-surface); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-left-color: #B3261E; background: #FDF3F2; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-family: var(--vs-font-body); font-size: 14px; text-transform: none; letter-spacing: 0; color: #B3261E; }
.wpcf7 .wpcf7-spinner { margin: 12px auto 0; display: block; }


/* --- v1.0.5 (11.08.2026) — header içi Teklif Alın butonu --- */

.vs-nav a.vs-nav__cta {
	background: var(--vs-gold);
	color: var(--vs-ink);
	padding: 11px 18px;
	line-height: 1;
	font-size: 15px;
	transition: background var(--vs-motion-ui) var(--vs-ease), color var(--vs-motion-ui) var(--vs-ease);
}
.vs-nav a.vs-nav__cta:hover,
.vs-nav a.vs-nav__cta:focus-visible { background: var(--vs-white); color: var(--vs-ink); }

/* Yedi öğe sığsın diye orta genişliklerde aralık daralt */
@media (max-width: 1280px) { .vs-nav { gap: 26px; } }
@media (max-width: 1140px) { .vs-nav { gap: 18px; } .vs-nav a { font-size: 15px; letter-spacing: .5px; } .vs-nav a.vs-nav__cta { padding: 10px 14px; } }

@media (max-width: 900px) {
	.vs-nav a.vs-nav__cta {
		margin: 12px var(--vs-gutter) 0;
		padding: 14px 18px;
		text-align: center;
		font-size: 16px;
		border-bottom: 0;
	}
}


/* --- v1.0.7 (11.08.2026) — afiş görselleri kartlarda kırpılmasın --- */

/* Afişin sol tarafında logo ve başlık var; 4:3 kırpma bunları kesiyordu.
   Hem PHP ile üretilen (ilgili yazılar) hem blok ile üretilen kartlarda
   16:9 kırpılmamış görsel kullanılır. */
.vs-card__media,
.vs-loop .vs-card__media { aspect-ratio: 16 / 9; }
.vs-card__media img,
.vs-loop .vs-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }