/* ==========================================================================
   Yasemin Okatan — SMMM Kurumsal tema
   Tasarım dili: derin lacivert + altın vurgu. Muhasebe/mali sektöründe
   "güvenilir, kalıcı, kurumsal" izlenimi veren palet. Tüm site tek dosyada,
   harici font YOK (hız + yerel çizim = Core Web Vitals).
   ========================================================================== */

:root {
	/* Marka renkleri */
	--yo-navy:        #10314f;
	--yo-navy-900:    #0a2036;
	--yo-navy-800:    #0d2740;
	--yo-navy-700:    #164066;
	--yo-navy-600:    #1d5288;
	--yo-gold:        #c9a227;
	--yo-gold-300:    #e3c979;
	--yo-gold-100:    #f7efd8;

	/* Nötrler */
	--yo-ink:         #16222e;
	--yo-body:        #4a5b6e;
	--yo-muted:       #6b7c8f;
	--yo-line:        #dde5ec;
	--yo-line-soft:   #eef2f6;
	--yo-soft:        #f4f7fa;
	--yo-white:       #ffffff;

	/* Tipografi */
	--yo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", "Noto Sans", Arial, sans-serif;
	--yo-font-num: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, monospace;

	/* Ölçek */
	--yo-wrap: 1160px;
	--yo-gap: 24px;

	/* Kenar boşluğu — TEK KAYNAK. İçerik kenarı her yerde bu değerden gelir;
	   bölümler kendi padding'ini yazarsa hizalama bozulur. */
	--yo-gutter: 22px;

	/* Header yüksekliği: mobil menü panelinin üst boşluğu buna göre hesaplanır.
	   İki değer ayrı yazılırsa panel başlığın üstüne biner. */
	--yo-header-h: 78px;
	--yo-r: 8px;
	--yo-r-lg: 14px;
	--yo-shadow: 0 1px 2px rgba(16, 49, 79, .06), 0 8px 24px rgba(16, 49, 79, .07);
	--yo-shadow-lg: 0 2px 4px rgba(16, 49, 79, .07), 0 18px 48px rgba(16, 49, 79, .13);
}

/* --------------------------------------------------------------------------
   Temel
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; 
	/* Off-canvas menü (position:fixed + translateX) yatay kaydırma
	   çubuğu üretiyordu: scrollWidth innerWidth + 325px. `clip` kullanılıyor
	   çünkü `hidden` position:sticky header'ı bozuyor. */
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--yo-font);
	font-size: 17px;
	line-height: 1.7;
	color: var(--yo-body);
	background: var(--yo-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: tabular-nums;
}

/* Başlıklar: sıkı satır aralığı + koyu lacivert = kurumsal */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--yo-navy);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.015em;
	text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); line-height: 1.14; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--yo-navy-600); text-decoration-color: rgba(29, 82, 136, .32); text-underline-offset: 3px; }
a:hover { color: var(--yo-navy); text-decoration-color: var(--yo-gold); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .4em; }

blockquote {
	margin: 1.75em 0;
	padding: 18px 24px;
	border-left: 4px solid var(--yo-gold);
	background: var(--yo-soft);
	border-radius: 0 var(--yo-r) var(--yo-r) 0;
	color: var(--yo-ink);
	font-size: 1.05em;
}
blockquote p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--yo-line); margin: 2.5em 0; }

code, pre { font-family: var(--yo-font-num); font-size: .92em; }
code { background: var(--yo-soft); padding: .12em .4em; border-radius: 4px; }
pre { background: var(--yo-navy-900); color: #e6edf5; padding: 18px; border-radius: var(--yo-r); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }

table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .96em; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--yo-line); }
th { background: var(--yo-soft); color: var(--yo-navy); font-weight: 700; }
tbody tr:hover { background: var(--yo-soft); }

/* Erişilebilirlik: klavye odağı görünür */
:focus-visible { outline: 3px solid var(--yo-gold); outline-offset: 2px; border-radius: 3px; }

.screen-reader-text, .yo-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: 12px; left: 12px; z-index: 9999; width: auto; height: auto;
	clip: auto; padding: 12px 20px; background: var(--yo-navy); color: #fff; border-radius: var(--yo-r);
	text-decoration: none; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Yerleşim
   -------------------------------------------------------------------------- */

.yo-wrap { width: 100%; max-width: var(--yo-wrap); margin-inline: auto; padding-inline: var(--yo-gutter); }
.yo-section { padding: 72px 0; }
.yo-section--soft { background: var(--yo-soft); }
.yo-section--navy { background: var(--yo-navy); color: #cfdcea; }
.yo-section--navy h2, .yo-section--navy h3 { color: #fff; }

.yo-grid { display: grid; gap: var(--yo-gap); }
.yo-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.yo-grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.yo-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Bölüm başlığı bloğu */
.yo-eyebrow {
	display: inline-block; margin-bottom: 12px; font-size: .78rem; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase; color: var(--yo-gold);
}
.yo-section--soft .yo-eyebrow, .yo-section--navy .yo-eyebrow { color: var(--yo-gold-300); }
.yo-lede { font-size: 1.1rem; color: var(--yo-muted); max-width: 62ch; }
.yo-section--navy .yo-lede { color: #b3c6d8; }
.yo-head { max-width: 720px; margin-bottom: 44px; }
.yo-head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   Düğmeler
   -------------------------------------------------------------------------- */

.yo-btn {
	display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px;
	border: 1px solid transparent; border-radius: var(--yo-r);
	font-size: .98rem; font-weight: 650; line-height: 1.2; text-decoration: none;
	cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.yo-btn:hover { transform: translateY(-1px); }
.yo-btn--primary { background: var(--yo-gold); color: var(--yo-navy-900); box-shadow: 0 4px 14px rgba(201, 162, 39, .3); }
.yo-btn--primary:hover { background: var(--yo-gold-300); color: var(--yo-navy-900); }
.yo-btn--navy { background: var(--yo-navy); color: #fff; }
.yo-btn--navy:hover { background: var(--yo-navy-700); color: #fff; }
.yo-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.yo-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.yo-btn--line { background: transparent; color: var(--yo-navy); border-color: var(--yo-line); }
.yo-btn--line:hover { border-color: var(--yo-navy); color: var(--yo-navy); }
.yo-btn--sm { padding: 9px 17px; font-size: .9rem; }

/* --------------------------------------------------------------------------
   Başlık (header)
   -------------------------------------------------------------------------- */


.yo-header {
	position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid var(--yo-line);
}

/* MASAÜSTÜ bulanıklığı — mobilde KAPALI (aşağıdaki gerekçe).
 * `backdrop-filter` bir filtre özelliği olduğu için, taşıdığı öğe
 * position:fixed çocukları için KAPSAYICI BLOK olur. `.yo-nav` header'ın
 * İÇİNDE olduğundan `inset: 0 0 0 auto` ekrana değil HEADER'A göre
 * çözülüyordu: 844px ekranda panel 122px yükseklikte kalıyor, 920px'lik
 * menü içine sıkışıyor ve bağlantıların çoğu görünmez oluyordu
 * (2026-09-30 ölçümü: nav.height=122, scrollHeight=920).
 * Mobilde bulanıklık kaldırılınca panel ekrana göre konumlanır;
 * masaüstünde görsel değişmez. */
@media (min-width: 1081px) {
	.yo-header { backdrop-filter: saturate(180%) blur(12px); }
}
/* HEADER NEFES ALANI (2026-09-29)
   Ölçüm: 1200px'te yatay pay yalnızca 84px, 1100px'te logo iki satıra
   sarıp yüksekliği 98→148px çıkarıyordu, 1024px'te 5px TAŞMA oluyordu
   (burger menüsü ise 900px'te açılıyordu → 900-1050 arası bozuk pencere).
   Düzeltme: yükseklik ve boşluklar artırıldı, burger eşiği 1080px'e
   çekildi; 1080px üstünde menü tek satırda sığacak şekilde daraltıldı. */
/* Header, içerik sarmalayıcısından (1160px) GENİŞ: 1440px.
   Ölçümde logo+menü+CTA toplamı 1627px, içerik sarmalayıcısının
   kullanılabilir genişliği ise yalnızca 1116px — aradaki 511px fark
   yüzünden sağdaki "Randevu Al" butonu pencereyi taşıyordu. */
.yo-header__in {
	display: flex; align-items: center; justify-content: space-between;
	gap: 28px; min-height: 92px;
	max-width: 1440px;
}

.yo-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.yo-logo__mark {
	flex: 0 0 auto; width: 44px; height: 44px; border-radius: 9px;
	background: linear-gradient(140deg, var(--yo-navy), var(--yo-navy-700));
	color: var(--yo-gold-300); display: grid; place-items: center;
	font-weight: 800; font-size: 1.16rem; letter-spacing: -.03em;
	box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .34);
}
.yo-logo__txt { display: flex; flex-direction: column; line-height: 1.2; }
.yo-logo__name { color: var(--yo-navy); font-weight: 750; font-size: 1.09rem; letter-spacing: -.01em; }
.yo-logo__role { color: var(--yo-muted); font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

.yo-nav { display: flex; align-items: center; gap: 8px; }
.yo-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.yo-nav li { margin: 0; position: relative; }
.yo-nav a {
	display: block; padding: 11px 15px; border-radius: 7px;
	color: var(--yo-ink); font-size: .95rem; font-weight: 550; text-decoration: none;
	white-space: nowrap;   /* menü öğesi ikiye bölünmesin */
}
.yo-nav a:hover, .yo-nav .current-menu-item > a { background: var(--yo-soft); color: var(--yo-navy); }
.yo-nav .current-menu-item > a { color: var(--yo-navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--yo-gold); }

.yo-header__cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* Logo 1100px altında iki satıra sarıyordu; tek satırda kalsın.
   ⚠️ min-width:0 VERİLMEZ: flex-shrink + min-width:0 birlikte logo'yu
   0 genişliğe eziyordu (ölçümde logo 247px → 0px). */
.yo-logo { flex: 0 0 auto; }
.yo-logo__name, .yo-logo__role { white-space: nowrap; }
.yo-phone {
	display: inline-flex; align-items: center; gap: 8px; color: var(--yo-navy);
	font-weight: 700; text-decoration: none; font-size: 1rem; white-space: nowrap;
}
.yo-phone:hover { color: var(--yo-navy-600); }

/* Alt menü */
.yo-nav .sub-menu {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; z-index: 20;
	flex-direction: column; align-items: stretch; gap: 0; padding: 7px;
	background: #fff; border: 1px solid var(--yo-line); border-radius: var(--yo-r);
	box-shadow: var(--yo-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.yo-nav li:hover > .sub-menu, .yo-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.yo-nav .sub-menu a { padding: 9px 13px; font-size: .92rem; }

/* Mobil menü düğmesi */
.yo-burger {
	display: none; width: 44px; height: 44px; border: 1px solid var(--yo-line);
	background: #fff; border-radius: 8px; cursor: pointer; padding: 0;
	place-items: center;
}
.yo-burger span { display: block; width: 19px; height: 2px; background: var(--yo-navy); position: relative; transition: background .2s; }
.yo-burger span::before, .yo-burger span::after {
	content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--yo-navy);
	transition: transform .22s ease, top .22s ease;
}
.yo-burger span::before { top: -6px; }
.yo-burger span::after { top: 6px; }
.yo-burger[aria-expanded="true"] span { background: transparent; }
.yo-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.yo-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Kahraman (hero)
   -------------------------------------------------------------------------- */

.yo-hero {
	position: relative; overflow: hidden; padding: 82px 0 88px;
	background:
		radial-gradient(1200px 520px at 78% -12%, rgba(201, 162, 39, .17), transparent 62%),
		linear-gradient(155deg, var(--yo-navy-900) 0%, var(--yo-navy) 52%, var(--yo-navy-700) 100%);
	color: #d3e0ec;
}
.yo-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 62px 62px;
	mask-image: radial-gradient(circle at 72% 30%, #000, transparent 72%);
}
.yo-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.yo-hero h1 { color: #fff; margin-bottom: 20px; }
.yo-hero h1 em { font-style: normal; color: var(--yo-gold-300); }
.yo-hero__sub { font-size: clamp(1.02rem, .97rem + .3vw, 1.17rem); color: #c2d4e4; max-width: 56ch; margin-bottom: 30px; }
.yo-hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }
.yo-hero__meta { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: .93rem; color: #a9c0d4; }
.yo-hero__meta li { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; }
.yo-hero__meta svg { flex: 0 0 auto; color: var(--yo-gold); }

/* Hero yan kutu: hızlı iletişim + kısa bilgi */
.yo-hero__card {
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--yo-r-lg); padding: 28px; backdrop-filter: blur(6px);
}
.yo-hero__card h2 { color: #fff; font-size: 1.12rem; margin-bottom: 16px; }
.yo-hero__card dl { margin: 0; display: grid; gap: 14px; }
.yo-hero__card dt { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #9db6cc; margin-bottom: 2px; }
.yo-hero__card dd { margin: 0; color: #fff; font-weight: 600; font-size: 1.02rem; }
.yo-hero__card a { color: #fff; text-decoration: none; }
.yo-hero__card a:hover { color: var(--yo-gold-300); }
.yo-hero__card hr { border-color: rgba(255, 255, 255, .14); margin: 20px 0; }

/* --------------------------------------------------------------------------
   Güven şeridi
   -------------------------------------------------------------------------- */

.yo-trust { background: var(--yo-navy-900); color: #fff; padding: 26px 0; }
.yo-trust__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; text-align: center; }
.yo-trust__k { font-size: 1.5rem; font-weight: 750; color: var(--yo-gold-300); line-height: 1.2; }
.yo-trust__l { font-size: .84rem; color: #a6bdd2; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Kartlar
   -------------------------------------------------------------------------- */

.yo-card {
	background: #fff; border: 1px solid var(--yo-line); border-radius: var(--yo-r-lg);
	padding: 26px 24px; height: 100%;
	/* 2026-09-30: sütun düzeni. Kartlar ızgarada eşit yüksekliğe geriliyordu
	   (height:100%) ama "→" butonu açıklamanın hemen altında durduğu için
	   butonlar satırda aynı yükseklikte değildi: uzun buton metni 2 satıra
	   taşınca alt kenarlar 51px kadar ayrışıyordu (ölçüldü: ana sayfa 4 kartta
	   2997/3023/3048). margin-top:auto butonu kartın dibine iter, ızgaradaki
	   hizasızlık her iki sayfada da (hizmetler + ana sayfa) gider. */
	display: flex; flex-direction: column;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.yo-card:hover { border-color: var(--yo-navy-600); box-shadow: var(--yo-shadow); transform: translateY(-3px); }
.yo-card__ico {
	width: 46px; height: 46px; border-radius: 10px; margin-bottom: 17px;
	background: var(--yo-gold-100); color: var(--yo-navy);
	display: grid; place-items: center;
}
.yo-card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.yo-card p { font-size: .95rem; margin-bottom: 0; }
.yo-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; align-self: flex-start; font-weight: 650; font-size: .92rem; text-decoration: none; }
.yo-card__more::after { content: "→"; transition: transform .18s ease; }
.yo-card:hover .yo-card__more::after { transform: translateX(4px); }

/* Sayfa numarası rozeti */
.yo-badge {
	display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
	background: var(--yo-navy); color: var(--yo-gold-300); font-weight: 700; font-size: .9rem;
	margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Süreç adımları
   -------------------------------------------------------------------------- */

.yo-steps { counter-reset: yo-step; display: grid; gap: 20px; }
.yo-step { position: relative; padding-left: 62px; }
.yo-step::before {
	counter-increment: yo-step; content: counter(yo-step);
	position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
	background: var(--yo-gold); color: var(--yo-navy-900);
	display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.yo-step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.yo-step p { font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------------
   İçerik / makale
   -------------------------------------------------------------------------- */

.yo-prose { max-width: 72ch; font-size: 1.05rem; }
.yo-prose > * + * { margin-top: 1.15em; }
.yo-prose h2 { margin-top: 1.9em; padding-top: .25em; border-top: 1px solid var(--yo-line); }
.yo-prose h3 { margin-top: 1.6em; }
.yo-prose ul li::marker { color: var(--yo-gold); }
.yo-prose > ul > li::marker, .yo-prose > ol > li::marker { color: var(--yo-gold); }

/* Makale başlığı */
.yo-pagehead { background: var(--yo-soft); border-bottom: 1px solid var(--yo-line); padding: 46px 0 40px; }
.yo-pagehead h1 { margin-bottom: 12px; }
.yo-pagehead__meta { color: var(--yo-muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.yo-crumbs { font-size: .87rem; color: var(--yo-muted); margin-bottom: 14px; }
.yo-crumbs a { color: var(--yo-muted); text-decoration: none; }
.yo-crumbs a:hover { color: var(--yo-navy); text-decoration: underline; }
.yo-crumbs span { margin: 0 7px; opacity: .5; }
.yo-crumbs [aria-current] { color: var(--yo-navy); font-weight: 600; }

/* Yazı listesi kartı */
.yo-postcard {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--yo-line); border-radius: var(--yo-r-lg); overflow: hidden;
	height: 100%; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.yo-postcard:hover { border-color: var(--yo-navy-600); box-shadow: var(--yo-shadow); transform: translateY(-3px); }
.yo-postcard__thumb { aspect-ratio: 16 / 10; background: var(--yo-soft); overflow: hidden; }
.yo-postcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.yo-postcard__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.yo-postcard__cat {
	display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 100px;
	background: var(--yo-gold-100); color: var(--yo-navy);
	font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	text-decoration: none;
}
.yo-postcard h3 { font-size: 1.09rem; margin-bottom: 8px; }
.yo-postcard h3 a { color: inherit; text-decoration: none; }
.yo-postcard h3 a:hover { color: var(--yo-navy-600); }
.yo-postcard p { font-size: .93rem; color: var(--yo-muted); margin-bottom: 14px; }
.yo-postcard__date { margin-top: auto; font-size: .84rem; color: var(--yo-muted); }

/* İçindekiler (TOC) */
.yo-toc {
	background: var(--yo-soft); border: 1px solid var(--yo-line); border-left: 4px solid var(--yo-gold);
	border-radius: 0 var(--yo-r) var(--yo-r) 0; padding: 20px 24px; margin-bottom: 30px;
}
.yo-toc h2 { font-size: .95rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .07em; }
.yo-toc ol { margin: 0; padding-left: 1.2em; font-size: .94rem; }
.yo-toc li { margin-bottom: 5px; }
.yo-toc a { color: var(--yo-body); text-decoration: none; }
.yo-toc a:hover { color: var(--yo-navy); text-decoration: underline; }

/* Uzmanlık alanları (iki sütun düzen) */
.yo-withaside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.yo-aside { position: sticky; top: 100px; display: grid; gap: 20px; }
.yo-aside__box { background: var(--yo-soft); border: 1px solid var(--yo-line); border-radius: var(--yo-r-lg); padding: 22px; }
.yo-aside__box h2 { font-size: 1.02rem; margin-bottom: 12px; }
.yo-aside__box p { font-size: .92rem; margin-bottom: 16px; }
.yo-aside__box ul { list-style: none; padding: 0; margin: 0; }
.yo-aside__box li { padding: 7px 0; border-bottom: 1px solid var(--yo-line); font-size: .93rem; }
.yo-aside__box li:last-child { border-bottom: 0; }
.yo-aside__box a { text-decoration: none; }
.yo-aside__box a:hover { text-decoration: underline; }

/* İletişim kutusu */
.yo-cta {
	background: linear-gradient(140deg, var(--yo-navy) 0%, var(--yo-navy-700) 100%);
	color: #fff; border-radius: var(--yo-r-lg); padding: 34px; text-align: center;
}
.yo-cta h2 { color: #fff; }
.yo-cta p { color: #c5d6e6; }
.yo-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* --------------------------------------------------------------------------
   SSS (FAQ) akordeon
   -------------------------------------------------------------------------- */

.yo-faq { max-width: 840px; margin-inline: auto; }
.yo-faq__item { border-bottom: 1px solid var(--yo-line); }
.yo-faq__q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
	width: 100%; padding: 20px 0; background: none; border: 0; cursor: pointer;
	font-family: inherit; font-size: 1.04rem; font-weight: 650; line-height: 1.45;
	color: var(--yo-navy); text-align: left;
}
.yo-faq__q:hover { color: var(--yo-navy-600); }
.yo-faq__q::after {
	content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
	background: var(--yo-gold-100); color: var(--yo-navy);
	display: grid; place-items: center; font-size: 1.24rem; font-weight: 600; line-height: 1;
	transition: transform .2s ease, background .2s ease;
}
.yo-faq__q[aria-expanded="true"]::after { transform: rotate(45deg); background: var(--yo-gold); color: var(--yo-navy-900); }
.yo-faq__a { display: none; padding: 0 0 22px; color: var(--yo-body); font-size: .98rem; }
.yo-faq__a > :last-child { margin-bottom: 0; }
.yo-faq__item.is-open .yo-faq__a { display: block; }

/* --------------------------------------------------------------------------
   TCMB kuru modülü
   -------------------------------------------------------------------------- */

.yo-rates { background: #fff; border: 1px solid var(--yo-line); border-radius: var(--yo-r-lg); overflow: hidden; }
.yo-rates__head {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 16px 22px; background: var(--yo-navy); color: #fff;
}
.yo-rates__head h2 { color: #fff; font-size: 1.03rem; margin: 0; }
.yo-rates__date { font-size: .84rem; color: #a9c0d4; }
.yo-rates__table { width: 100%; margin: 0; font-size: .95rem; }
.yo-rates__table th, .yo-rates__table td { padding: 11px 22px; }
.yo-rates__table td:last-child, .yo-rates__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.yo-rates__table tbody tr:nth-child(even) { background: var(--yo-soft); }
.yo-rates__foot { padding: 13px 22px; background: var(--yo-soft); border-top: 1px solid var(--yo-line); font-size: .84rem; color: var(--yo-muted); }
.yo-rates__foot a { color: var(--yo-navy-600); }
.yo-rates__msg { padding: 26px 22px; color: var(--yo-muted); font-size: .94rem; text-align: center; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.yo-form label { display: block; font-weight: 600; font-size: .92rem; color: var(--yo-ink); margin-bottom: 6px; }
.yo-form input, .yo-form textarea, .yo-form select {
	width: 100%; padding: 12px 14px; font-family: inherit; font-size: 1rem;
	color: var(--yo-ink); background: #fff; border: 1px solid var(--yo-line); border-radius: var(--yo-r);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.yo-form input:focus, .yo-form textarea:focus, .yo-form select:focus {
	border-color: var(--yo-navy-600); box-shadow: 0 0 0 3px rgba(29, 82, 136, .13); outline: none;
}
.yo-form textarea { min-height: 148px; resize: vertical; }
.yo-form .yo-field { margin-bottom: 18px; }
.yo-form__note { font-size: .85rem; color: var(--yo-muted); margin-top: 10px; }

/* --------------------------------------------------------------------------
   Sayfalama
   -------------------------------------------------------------------------- */

/* SAYFALAMA (2026-09-29 düzeltmesi)
 *
 * ÖNCEKİ HATA: `display:flex` `.yo-pagination` (nav) üzerindeydi ama
 * bağlantılar `.nav-links` İÇİNDE. `.page-numbers { display: grid }`
 * onları blok seviyeye çıkarıyordu → dört bağlantı yan yana değil
 * DİKEY YIĞILDI. Ölçüm: hepsi x=691px, nav yüksekliği 42px yerine
 * 168px. Kullanıcı "pagination bozuk" diye bildirdi.
 *
 * DÜZELTME: esnek kapsayıcı `.nav-links` yapıldı; numaralar esnek
 * öğe olarak yan yana dizilir. */
.yo-pagination { margin-top: 44px; }

.yo-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.yo-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 42px; height: 42px; padding: 0 13px;
	border: 1px solid var(--yo-line); border-radius: var(--yo-r);
	background: #fff; color: var(--yo-body);
	text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.yo-pagination .page-numbers:hover { border-color: var(--yo-navy); color: var(--yo-navy); }
.yo-pagination .page-numbers.current,
.page-numbers.current { background: var(--yo-navy); border-color: var(--yo-navy); color: #fff; }
.yo-pagination .page-numbers.prev,
.yo-pagination .page-numbers.next { min-width: 42px; padding: 0 11px; }

/* Ekran okuyucu metni: görünmez ama odak kaybettirmez */
.yo-pagination .yo-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.yo-pagination .page-numbers { transition: none; }
}

/* ÇALIŞMA SAATLERİ (2026-09-29)
 * Önceki sınıf `yo-rates__date` idi — döviz kuru modülünden kalmış
 * bir artık isimdi ve yalnızca font-size/color tanımlıyordu. Esnek
 * kapsayıcı olmadığı için ikon (display:block) alt satıra düşüyor,
 * metin üstte kalıyordu. Ölçüm: ikon ile metin merkezleri 18px
 * apart, kutu tek satır yerine 38px yüksekliğindeydi.
 * Yeni sınıf: ikon + metni flex ile ortalıyor. */
.yo-hours {
	display: flex;
	align-items: center;
	gap: 3px 8px;
	flex-wrap: wrap;
	font-size: .86rem;
	line-height: 1.45;
	color: #9db6cc;
	margin-top: 4px;
}
.yo-hours .yo-ico { flex: 0 0 auto; }

/* Her parça tek satırda kalsın.
   Ölçüm (2026-09-29, 360px): kutu 291×64px = ÜÇ satır; "Cumartesi"
   kelimesi ortadan bölünüyordu. nowrap ile iki temiz satıra iner. */
.yo-hours__satir { white-space: nowrap; }
.yo-hours__ayrac { flex: 0 0 auto; opacity: .65; }

/* Dar ekranda ayraç anlamsız (zaten alt satıra iniyor) */
@media (max-width: 520px) {
	.yo-hours__ayrac { display: none; }
	.yo-hours { gap: 2px; }
}

/* TEMA İKONLARI (2026-09-29)
 *
 * Reset kuralı `img, svg, video { display: block }` sitedeki HER SVG'yi
 * blok seviyeye çeviriyordu. Tema ikonları (yo_icon() → <svg class="yo-ico">)
 * metinle yan yana kullanıldığı için alt satıra düşüyordu.
 * Ölçüm (çalışma saati satırı): ikon ile metin merkezleri 18px apart,
 * kutu tek satır yerine 38px yüksekliğindeydi.
 *
 * Sınıf seçiciliği (0,1,0) > eleman seçiciliği (0,0,1) olduğu için bu
 * kural reset'i yener. */
.yo-ico {
	display: inline-block;
	vertical-align: -0.125em;
	fill: currentColor;
	flex: 0 0 auto;
}

/* Yalnız metin içinde kullanılan ikonlarda satır aralığını koru */
.yo-ico + span,
.yo-ico + br + * { line-height: inherit; }

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */

.yo-footer { background: var(--yo-navy-900); color: #a6bdd2; padding: 60px 0 0; font-size: .93rem; }
.yo-footer a { color: #cddced; text-decoration: none; }
.yo-footer a:hover { color: var(--yo-gold-300); text-decoration: underline; }
.yo-footer h3 { color: #fff; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.yo-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.yo-footer ul { list-style: none; padding: 0; margin: 0; }
.yo-footer li { margin-bottom: 9px; }
.yo-footer__about .yo-logo__name { color: #fff; }
.yo-footer__about .yo-logo__role { color: #8fa9c0; }
.yo-footer__about p { margin-top: 16px; max-width: 42ch; }
.yo-footer__nap { font-style: normal; }
.yo-footer__nap dt { color: #8fa9c0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.yo-footer__nap dd { margin: 0 0 14px; color: #cddced; }
.yo-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1); padding: 20px 0;
	display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
	font-size: .86rem; color: #8fa9c0;
}
.yo-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* Yukarı çık */
.yo-totop {
	position: fixed; right: 20px; bottom: 20px; z-index: 850; width: 44px; height: 44px;
	display: grid; place-items: center; border: 1px solid var(--yo-line); border-radius: 50%;
	background: #fff; color: var(--yo-navy); box-shadow: var(--yo-shadow);
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s ease;
}
.yo-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.yo-totop:hover { background: var(--yo-navy); color: #fff; border-color: var(--yo-navy); }

/* Bildirim (form geri bildirimi) */
.yo-notice { padding: 15px 20px; border-radius: var(--yo-r); margin-bottom: 22px; font-size: .95rem; font-weight: 550; }
.yo-notice--ok { background: #e8f5ee; color: #1a6b40; border: 1px solid #b9e0cb; }
.yo-notice--err { background: #fdecec; color: #a32020; border: 1px solid #f3c2c2; }

/* --------------------------------------------------------------------------
   Duyarlılık
   -------------------------------------------------------------------------- */

/* 1080-1400 arası: menüü ve CTA'yı biraz daralt, tek satırda sığsın.
   Ölçümde 1200px'te yalnızca 84px pay kalmıştı. */
@media (min-width: 1081px) and (max-width: 1500px) {
	/* Logo altındaki unvan satırı 280px tutuyor; 1500px altında gizlenir.
	   Site adı zaten kişiyi belirtiyor, unvan sayfa gövdesinde var. */
	.yo-logo__role { display: none; }
	.yo-logo__name { font-size: 1.04rem; }
}

@media (min-width: 1081px) and (max-width: 1400px) {
	.yo-header__in { gap: 14px; min-height: 84px; }
	.yo-nav { gap: 0; }
	.yo-nav a { padding: 10px 8px; font-size: .89rem; }
	.yo-phone { font-size: .92rem; gap: 6px; }
	.yo-btn--sm { padding: 9px 15px; }
}

@media (min-width: 1081px) and (max-width: 1220px) {
	/* Üst çubuk kaldırıldı (2026-09-29); telefon artık yalnızca
	   header'da. Bu aralıkta numara metni yerine ikona düşer, aksi
	   halde menü + telefon + "Randevu Al" tek satıra sığmıyordu. */
	.yo-phone span { display: none; }
	.yo-header__in { gap: 10px; }
}

@media (max-width: 1024px) {
	.yo-hero__in { grid-template-columns: 1fr; gap: 40px; }
	/* Grid track'i içeriğin min-content'i kadar GENİŞLİYORDU (1fr = minmax(auto,1fr);
	   auto tabanı min-content). 360px'te kolon 312 yerine 349px olup 13px taşıyor,
	   iletişim kartı ve butonlar ekran dışına itiliyordu (2026-09-30 ölçümü).
	   min-width:0 track'in kapsayıcıya uymasını sağlar, içerik altına sarılır. */
	.yo-hero__in > * { min-width: 0; }
	.yo-withaside { grid-template-columns: 1fr; }
	.yo-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.yo-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* HAMBURGER EŞİĞİ 1080px (2026-09-29)
   Ölçümde menü 1024px'te 5px taşıyordu, 1100px'te logo iki satıra
   sarıyordu; ancak burger menüsü 900px'te açılıyordu. 900-1050 arası
   bozuk pencere oluşuyordu. Eşik 1080px'e çekildi. */
@media (max-width: 1080px) {
	.yo-header__in { min-height: var(--yo-header-h); gap: 16px; }
	.yo-burger { display: grid; }
	.yo-nav {
		position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw);
		/* Yükseklik AÇIKÇA veriliyor: `inset:0` ekrana göre çözülse bile mobil
		   tarayıcı çubuğu (dvh) yüzünden %100 görünmeyen alan kalmasın.
		   100dvh destekleyen tarayıcılarda çubuk gizlenince panel tam uyar. */
		height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
		background: #fff; border-left: 1px solid var(--yo-line);
		flex-direction: column; align-items: stretch; justify-content: flex-start;
		/* Üst boşluk header'ı aşar: burger düğmesi panelin üstünde kalır ve
		   kapatma işlevi görünür. */
		padding: calc(var(--yo-header-h) + 14px) var(--yo-gutter) 32px;
		overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
		transform: translateX(100%); transition: transform .26s ease; box-shadow: var(--yo-shadow-lg);
		/* Panel header'ın kendi katmanında (z-index:900), backdrop'un (890)
		   üstünde kalmalı: 2. Burger düğmesi bundan YÜKSEK olmalı (3),
		   yoksa panel butonun üstüne binip KAPATMA düğmesi tıklanamaz
		   oluyor (2026-09-30 ölçümü: "Hizmetlerimiz" aracılığıyla
		   tıklamayı engelliyordu). */
		z-index: 2; visibility: hidden;
	}
	.yo-burger {
		position: relative; z-index: 3;
	}
	.yo-nav.is-open { visibility: visible; }
	.yo-nav.is-open { transform: none; }
	.yo-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.yo-nav a { padding: 13px 14px; font-size: 1rem; white-space: normal; }
	.yo-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--yo-line-soft);
		margin: 0 0 6px 14px; padding: 0 0 0 6px; min-width: 0;
	}
	.yo-header__cta .yo-btn { display: none; }
	.yo-nav-backdrop {
		position: fixed; inset: 0; z-index: 890; background: rgba(10, 32, 54, .5);
		opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s;
	}
	.yo-nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 480px) {
	/* 390px'de logo + CTA taşıyordu (ölçüm: -12px) */
	.yo-logo__mark { width: 38px; height: 38px; font-size: 1.02rem; }
	.yo-logo__name { font-size: .96rem; }
	.yo-logo__role { display: none; }
	.yo-header__in { gap: 10px; }
	.yo-header__cta { gap: 8px; }
	.yo-phone { font-size: .88rem; gap: 5px; }
	.yo-phone span { display: none; }   /* ikon + numara yerine sadece ikon */
}

@media (max-width: 640px) {
	/* Telefonda içerik kenarı 24px: 360px'te 312px içerik kalır (yeterli),
	   masaüstündeki 22px'ten rahat okunur. Tek token olduğu için HER bölüm
	   aynı ölçüyü alır — bölüm bazlı farklı padding kalmaz. */
	:root { --yo-gutter: 24px; }
	body { font-size: 16px; }
	.yo-section { padding: 52px 0; }
	.yo-hero { padding: 54px 0 60px; }
	.yo-hero__actions .yo-btn { flex: 1 1 100%; justify-content: center; }
	.yo-footer__grid { grid-template-columns: 1fr; }
	.yo-rates__table th, .yo-rates__table td { padding: 10px 14px; font-size: .89rem; }
	.yo-rates__head, .yo-rates__foot { padding-inline: 16px; }
}

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

@media print {
	.yo-header, .yo-footer, .yo-totop, .yo-hero__actions, .yo-cta { display: none !important; }
	body { color: #000; font-size: 12pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ══════════════════════════════════════════════════════════════
   ANA SAYFA REVİZYONU (2026-09-29) — yeni bölüm parçaları
   ══════════════════════════════════════════════════════════════ */

/* Güven şeridi: 4 öğe. Birinci öğe sayı (büyük-altın), diğerleri metin
   (başlık). Sayı olmayan başlıklar 1.5rem'de iki satıra kırılıp görsel
   dengeyi bozuyordu → metin öğeleri daha küçük ve tek satırda. */
.yo-trust__k--metin {
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.32;
	color: var(--yo-gold-300);
}

/* Adım metninin altındaki belge bağlantıları notu */
.yo-belge-notu {
	margin: 22px 0 0;
	font-size: .92rem;
	color: var(--yo-ink-soft, #4a5c6e);
}
.yo-belge-notu a { color: var(--yo-navy, #10314f); font-weight: 600; }

/* Çalışma yaklaşımı bölümünün yerel vurgu paragrafı */
.yo-yerel-notu {
	max-width: 760px;
	margin: 28px auto 0;
	text-align: center;
	font-size: .97rem;
	color: var(--yo-ink-soft, #4a5c6e);
}

/* SSS bölümünün altındaki "Tüm Soruları İnceleyin" bağlantısı */
.yo-sss__more {
	margin: 30px 0 0;
	text-align: center;
}

/* Kapanış CTA'sındaki küçük not (ücretsiz tanışma görüşmesi) */
.yo-cta__note {
	margin: 18px 0 0;
	font-size: .9rem;
	color: #cfe0ef;
}

/* Mali takvim: giriş cümlesi (kısa blokta) */
.yo-mtakvim__giris {
	/* Giriş cümlesi: açik zemin üzerinde (yo-section--soft). Önceki renk
	   #cfe0ef koyu lacivert başlık zemininde tasarlanmıştı; burada krem zemin
	   üzerinde kaldı ve metin soluk/kontrastsız göründü (2026-10-01).
	   Yatay boşluk da yoktu: metin kenarlara bitişikti. */
	margin: 0;
	padding: 14px 22px 16px;
	font-size: .95rem;
	line-height: 1.55;
	/* AA kontrast: #6b7c8f 3.98:1 idi (basarisiz). #5a6b7d = 5.09:1 */
	color: #5a6b7d;
}

/* Mali takvim: beyan dönemi, son tarihten ayrı satır */
.yo-mtakvim__donem {
	margin: 3px 0 0;
	font-size: .82rem;
	color: #a6bdd2;
}

@media (max-width: 640px) {
	/* Güven şeridi mobilde 2×2 — dört öğe iki satıra bölünür */
	.yo-trust__in { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
	.yo-trust__k--metin { font-size: 1rem; }
}

/* Logo işareti (2026-09-29): hesap makinesi + yükselen çizgi.
   Eski lacivert "YO" kutusu yerine vektörel SVG kullanılıyor; SVG inline
   olduğu için ek istek yok ve her ekran yoğunluğunda keskin kalıyor. */
.yo-logo { display: inline-flex; align-items: center; gap: 12px; }
.yo-logo__svg { flex: 0 0 auto; display: block; }
.yo-logo__txt { display: flex; flex-direction: column; line-height: 1.15; }
.yo-logo__name { font-weight: 800; color: var(--yo-navy); font-size: 1.06rem; letter-spacing: -.01em; }
.yo-logo__role { font-size: .72rem; color: #8a6d1f; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }

/* Altbilgi zemininde ad ve unvan açık renge döner (lacivert üstünde okunur) */
.yo-footer .yo-logo__name { color: #fff; }
.yo-footer .yo-logo__role { color: var(--yo-gold-300); }

/* Mali Takvim: başlık bloğu içerik kolonuna sığar (2026-09-30).
   Önce pagehead tam genişlikteydi ve H1/açıklama sağ kolonun üstüne taşıyordu. */
.yo-grid--takvim .yo-pagehead { margin-bottom: 30px; }
.yo-grid--takvim .yo-pagehead h1 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.35rem); }

/* Pratik bilgiler kartları (2026-09-30): özet 3 satırla sınırlı, başlık 2 satır.
   Önce özet kartın tamamını dolduruyordu; 190 karakterlik metinler kartları
   görsel olarak eşitsiz ve uzun gösteriyordu (brief 01 §16: eşit yükseklik,
   görünmez kesme). Kırpmadan sonra metin devamı "devamı" bağlantısında. */
.yo-postcard__excerpt {
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
	-webkit-box-orient: vertical; overflow: hidden;
}
.yo-postcard h3 {
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden;
}