/* =========================================================================
   Formasyon Signature Portal — frontend
   Sarmalayıcı sınıf: .fes-app
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) HELLO-ELEMENTOR ARMOR — dosyanın EN ÜSTÜNDE kalmalı.
   Tema reset.css/theme.css eklentiden SONRA yüklenir ve genel eleman
   seçicileriyle tek-sınıf component kurallarını yener. Burada tema
   NÖTRLENİR; görünümü component kuralları verir.
   ------------------------------------------------------------------------- */

/* 1.1 Linkler — reset: a{color:#c36}; a:hover{color:#336} */
.fes-app :where(a) { color: inherit; text-decoration: none; }
.fes-app :where(a:hover, a:focus) { color: inherit; }

/* :where() tuzağı — tema `.page-content a{text-decoration:underline}` (0,1,1)
   Elementor kapalıyken açığa çıkar. Sarmalayıcıyı tema kabıyla birlikte hedefle. */
.page-content .fes-app a,
.entry-content .fes-app a,
.site-main .fes-app a { text-decoration: none; }

/* 1.2 Başlıklar — reset: h1..h6{color:inherit;font-weight:500} */
.fes-app :where(h1, h2, h3, h4, h5, h6) {
	color: var(--fes-heading, inherit);
	font-weight: 700;
	margin: 0;

	/*
	 * `font-family` BURADA TANIMLANMAZ. Tasarım başlık fontunu (Instrument Sans)
	 * yalnız H1/H2'ye inline veriyor; H3 ve altı GÖVDE fontu (Manrope) — handoff
	 * kuralı da bu. Buraya başlık fontu yazmak footer H3'lerini tasarımdan
	 * saptırıyordu (ölçüldü: tasarım=Manrope · canlı=Instrument Sans).
	 * Font ailesi `.fes-app` tabanından (Manrope) miras alınır.
	 */

	/*
	 * `letter-spacing` BURADA TANIMLANMAZ: tasarım harf aralığını başlık
	 * başına inline veriyor; buraya -0.02em yazmak, aralık belirtmeyen
	 * başlıkları tasarımdan saptırıyordu (ölçüldü: H3'ler normal → -0.42px).
	 * `line-height` tema `h1-h6{line-height:1.4}` kuralını nötrler.
	 */
	line-height: normal;
}

/* 1.3 Butonlar (durgun) — reset: button{border:1px solid #c36;color:#c36;white-space:nowrap} */
.fes-app :where(button, [type="button"], [type="submit"], [type="reset"]) {
	color: inherit; background: none; border: 0;
	font-family: inherit; cursor: pointer; white-space: normal; min-width: 0;
}

/* 1.4 Butonlar (hover/focus/active) — #1 BUG: tema (0,2,0) pembe dolgu.
   :is() = (0,3,0) ile ezilir; solid CTA'lar KENDİ :hover kuralını tanımlar. */
.fes-app :is(button, [type="button"], [type="submit"], [type="reset"]):hover,
.fes-app :is(button, [type="button"], [type="submit"], [type="reset"]):focus,
.fes-app :is(button, [type="button"], [type="submit"], [type="reset"]):active {
	background-color: transparent; border-color: transparent;
	color: inherit; box-shadow: none;
}

/* 1.5 Form alanları — reset: input,select,textarea{border:1px solid #666}; :focus{#333} */
.fes-app :is(input, select, textarea) {
	font-family: inherit; color: var(--fes-text);
	border: 1px solid var(--fes-border); border-radius: 11px;
	background: #fff; box-sizing: border-box;
}
.fes-app :is(input, select, textarea):focus {
	outline: none; border-color: var(--fes-blue);
	box-shadow: 0 0 0 3px rgba(23, 74, 145, .12);
}

/* 1.6 Tablolar — reset: td/th border + zebra + row hover (WooCommerce sepet/ödeme) */
.fes-app :where(table, table td, table th) { background: none; border: 0; }
.fes-app table tbody > tr:nth-child(odd) > td,
.fes-app table tbody > tr:nth-child(odd) > th,
.fes-app table tbody tr:hover > td,
.fes-app table tbody tr:hover > th { background: none; }

/* 1.6b Tema, bazı elemanlara kendi satır yüksekliğini basıyor ve bu
   `.fes-app`'teki `normal` tabanını AŞAĞIDAN eziyor (miras değil, doğrudan
   eşleşme). Ölçüldü: `figcaption` → 1.4 (22.4px). Tasarımda bu elemanların
   satır yüksekliği `normal`. */
.fes-app :where(figure, figcaption, blockquote, dl, dd, address) { line-height: normal; }

/* 1.7 Görseller — sabit boyutlu logo `img{max-width:100%;height:auto}` ile devleşir */
.fes-app .fes-logo img { height: var(--fes-logo-h, 38px); width: auto; max-width: none; }

/* 1.8 Tema gövde kelepçesi — Elementor kapalıyken
   `body:not([class*="elementor-page-"]) .site-main{max-width:1140px}` (0,2,1)
   açığa çıkar ve tema CSS'i sonra yüklendiği için eşit özgüllükte kazanır.
   Etiket + sınıf ile (0,2,2)'ye çık — !important gerekmez. Ölçüldü: 1140px. */
body.fes-site main.site-main,
body.fes-site div.page-content,
body.fes-site main.site-main > .fes-app { max-width: none; padding: 0; }

/* 1.9 Chrome sarmalayıcısı sticky header'ı öldürmesin — kabın kutusunu kaldır. */
.fes-app--chrome { display: contents; }

/* Sabit/yüzen kabuk parçalarına sarmalayıcı zemini miras geçmesin. */
.fes-app.fes-floating { width: auto; max-width: max-content; background: none; }


/* -------------------------------------------------------------------------
   2) TASARIM SİSTEMİ — kaynak: claude-code-aktarim.md "Marka değerleri"
   ------------------------------------------------------------------------- */
.fes-app {
	/* Renk */
	--fes-navy:        #092D5B;
	--fes-navy-deep:   #071F42;
	--fes-blue:        #174A91;
	--fes-red:         #D83D35;
	--fes-red-hover:   #C4342D;
	--fes-red-on-dark: #FF6258;

	--fes-surface:     #F3F8FD;
	--fes-border:      #DCE5EF;
	--fes-border-soft: #E7EEF7;

	--fes-heading:     #092D5B;
	--fes-text:        #40556E;
	--fes-muted:       #6C7F92;

	/* Tipografi */
	--fes-font-head: "Instrument Sans", "Manrope", Arial, sans-serif;
	--fes-font-body: "Manrope", Arial, sans-serif;

	/* Ölçü */
	--fes-container: 1280px;
	--fes-gutter: 40px;
	--fes-radius-card: 18px;
	--fes-radius-btn: 12px;
	--fes-logo-h: 38px;

	/* Hareket */
	--fes-ease: .18s cubic-bezier(.2, .75, .25, 1);
	--fes-ease-card: .38s cubic-bezier(.22, .61, .36, 1);

	font-family: var(--fes-font-body);
	color: var(--fes-text);
	box-sizing: border-box;

	/*
	 * Yazı kalınlığı tabanı 400 — TASARIMDAKİ gibi. Burada 500 yazıyordu ve
	 * tasarımda kalınlık belirtmeyen her metin canlıda bir kademe kalın
	 * çıkıyordu (ölçüldü: "Saat Eğitim İçeriği", "Tüm Programlarda" vb.
	 * tasarım=400 · canlı=500). Kendi kalınlığını bildiren öğeler etkilenmez.
	 */
	font-weight: 400;

	/*
	 * Satır yüksekliği tabanı TASARIMDAKİ gibi `normal` olmalı.
	 * Tema `body{line-height:24px}` (1.5) veriyor ve bu tüm ağaca miras
	 * geçiyordu; tasarımda satır yüksekliği belirtilmeyen her metin canlıda
	 * daha uzun kutuya oturuyordu (ölçüldü: menü bağlantıları normal → 19.5px,
	 * üst şerit 12px metin normal → 18px). Kendi satır yüksekliğini bildiren
	 * öğeler (inline style ya da component kuralı) bundan etkilenmez.
	 */
	line-height: normal;
}

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

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

@media (max-width: 767px) {
	.fes-app { --fes-gutter: 20px; }
}

/* Solid CTA — tema reset'i hover'da şeffaflaştırmasın diye açık marka :hover şart. */
.fes-app .fes-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 52px; padding: 0 26px;
	border-radius: var(--fes-radius-btn);
	font-family: var(--fes-font-body); font-size: 15px; font-weight: 700;
	transition: background-color var(--fes-ease), color var(--fes-ease), border-color var(--fes-ease), transform var(--fes-ease);
}
.fes-app .fes-btn--primary { background: var(--fes-red); color: #fff; }
.fes-app .fes-btn--primary:hover,
.fes-app .fes-btn--primary:focus { background: var(--fes-red-hover); color: #fff; }

.fes-app .fes-btn--navy { background: var(--fes-navy); color: #fff; }
.fes-app .fes-btn--navy:hover,
.fes-app .fes-btn--navy:focus { background: var(--fes-navy-deep); color: #fff; }

.fes-app .fes-btn--ghost { background: #fff; color: var(--fes-navy); border: 1px solid var(--fes-border); }
.fes-app .fes-btn--ghost:hover,
.fes-app .fes-btn--ghost:focus { background: var(--fes-surface); color: var(--fes-navy); border-color: var(--fes-blue); }

/* WooCommerce bildirimleri — Woo'nun kendi CSS'i yalnız Woo ekranlarında
   yükleniyor, bu yüzden görünüm burada tasarım diliyle tanımlanır. */
.fes-app.fes-notices { padding: 18px 0 0; }

.fes-app .woocommerce-message,
.fes-app .woocommerce-info,
.fes-app .woocommerce-error {
	list-style: none;
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin: 0 0 12px; padding: 15px 20px;
	border: 1px solid var(--fes-border);
	border-left: 3px solid var(--fes-blue);
	border-radius: 12px;
	background: var(--fes-surface);
	color: var(--fes-heading);
	font-size: 14.5px; font-weight: 600; line-height: 1.5;
}

.fes-app .woocommerce-message { border-left-color: #1f9d55; }
.fes-app .woocommerce-error { border-left-color: var(--fes-red); }
.fes-app .woocommerce-error li { list-style: none; }

/* Woo bu kutuların içine ikon fontuyla bir ::before basar — kapat. */
.fes-app .woocommerce-message::before,
.fes-app .woocommerce-info::before,
.fes-app .woocommerce-error::before { content: none; }

.fes-app :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
	margin-left: auto;
	display: inline-flex; align-items: center; justify-content: center;
	height: 40px; padding: 0 18px;
	border-radius: var(--fes-radius-btn);
	background: var(--fes-navy); color: #fff;
	font-size: 13.5px; font-weight: 700;
}
.fes-app :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:hover,
.fes-app :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:focus {
	background: var(--fes-navy-deep); color: #fff;
}

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

/* =========================================================================
   Genel içerik sayfası kabuğu (page.php) — shortcode taşımayan sayfalar:
   yasal metinler, SSS, kampanya sayfaları. Müşterinin kendi HTML'i
   sarmalanır, içeriğe dokunulmaz.
   ========================================================================= */
.fes-app .fes-page-head {
	background: var(--fes-surface);
	border-bottom: 1px solid var(--fes-border-soft);
	padding: 40px 0 46px;
}

.fes-app .fes-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; color: var(--fes-muted);
}
.fes-app .fes-crumbs a { color: var(--fes-blue); }
.fes-app .fes-crumbs a:hover { color: var(--fes-navy); }

.fes-app .fes-page-title {
	margin: 16px 0 0;
	font-family: var(--fes-font-head);
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.14; letter-spacing: -.8px;
	color: var(--fes-heading); text-wrap: balance;
}

.fes-app .fes-page-meta { margin: 10px 0 0; font-size: 13.5px; color: var(--fes-muted); }

.fes-app .fes-page-body { background: #fff; padding: 48px 0 80px; }

/* Editörden/eski sayfadan gelen serbest HTML için tipografi.
   Başlık fontu YALNIZ h1–h2'de; h3 ve altı gövde fontu. */
.fes-app .fes-prose { max-width: 880px; font-size: 16px; line-height: 1.75; color: var(--fes-text); }
.fes-app .fes-prose > :first-child { margin-top: 0; }
.fes-app .fes-prose h2 { margin: 34px 0 12px; font-family: var(--fes-font-head); font-size: 25px; line-height: 1.25; color: var(--fes-heading); }
.fes-app .fes-prose h3 { margin: 26px 0 10px; font-family: var(--fes-font-body); font-size: 19px; font-weight: 800; color: var(--fes-heading); }
.fes-app .fes-prose h4, .fes-app .fes-prose h5, .fes-app .fes-prose h6 { margin: 22px 0 8px; font-family: var(--fes-font-body); font-size: 16.5px; font-weight: 800; color: var(--fes-heading); }
.fes-app .fes-prose p { margin: 0 0 16px; }
.fes-app .fes-prose ul, .fes-app .fes-prose ol { margin: 0 0 18px; padding-left: 22px; }
.fes-app .fes-prose li { margin: 0 0 8px; }
.fes-app .fes-prose a { color: var(--fes-blue); text-decoration: underline; text-underline-offset: 2px; }
.fes-app .fes-prose a:hover { color: var(--fes-navy); }
.fes-app .fes-prose strong, .fes-app .fes-prose b { color: var(--fes-heading); font-weight: 800; }
.fes-app .fes-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.fes-app .fes-prose blockquote {
	margin: 22px 0; padding: 16px 20px;
	border-left: 3px solid var(--fes-red);
	background: var(--fes-surface); border-radius: 0 12px 12px 0;
}
.fes-app .fes-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; display: block; overflow-x: auto; }
.fes-app .fes-prose :is(td, th) { border: 1px solid var(--fes-border); padding: 10px 12px; text-align: left; }
.fes-app .fes-prose th { background: var(--fes-surface); color: var(--fes-heading); font-weight: 800; }
.fes-app .fes-prose hr { border: 0; border-top: 1px solid var(--fes-border); margin: 28px 0; }

/* Serbest içerik içindeki akordeon (SSS gibi sayfalar).
   `<details>` native olduğu için JS'siz çalışır ve erişilebilirdir;
   görünüm tasarımın SSS bloğuyla aynı dile getirilir. */
.fes-app .fes-faq-list { display: grid; gap: 10px; max-width: 880px; }

.fes-app .fes-faq-item {
	border: 1px solid var(--fes-border);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: background var(--fes-ease-card), box-shadow var(--fes-ease-card), border-color var(--fes-ease-card);
}
.fes-app .fes-faq-item[open] {
	background: #F7FAFD;
	border-color: var(--fes-border-soft);
	box-shadow: inset 2px 0 0 var(--fes-red);
}

.fes-app .fes-faq-item > summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: flex-start; gap: 14px;
	padding: 17px 20px;
	font-family: var(--fes-font-body);
	font-size: 16.5px; font-weight: 800; line-height: 1.4;
	color: #10233C;
}
.fes-app .fes-faq-item > summary::-webkit-details-marker { display: none; }
.fes-app .fes-faq-item > summary::marker { content: ''; }
.fes-app .fes-faq-item[open] > summary { color: var(--fes-heading); }

/* Sağdaki +/− göstergesi */
.fes-app .fes-faq-item > summary::after {
	content: '+';
	margin-left: auto; flex: 0 0 auto;
	width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--fes-surface); color: var(--fes-blue);
	font-size: 18px; font-weight: 700; line-height: 1;
	transition: background var(--fes-ease-card), color var(--fes-ease-card);
}
.fes-app .fes-faq-item[open] > summary::after { content: '\2212'; background: var(--fes-red); color: #fff; }

.fes-app .fes-faq-item > summary:focus-visible { outline: 2px solid var(--fes-blue); outline-offset: -2px; }

.fes-app .fes-faq-answer { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.7; color: var(--fes-text); }
.fes-app .fes-faq-answer > :first-child { margin-top: 0; }
.fes-app .fes-faq-answer p { margin: 0 0 12px; }
.fes-app .fes-faq-answer :is(ul, ol) { margin: 0 0 12px; padding-left: 20px; }
.fes-app .fes-faq-answer a { color: var(--fes-blue); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Kontrast düzeltmeleri — WCAG AA (4.5:1 normal metin).
   Renkler tasarımda INLINE hex olarak yazılı, bu yüzden token değişikliği
   ulaşmıyor; öznitelik seçicisiyle nokta atışı eziliyor. Ölçülen değerler:
     #6C7F92 beyaz üstünde 4.13:1  → #647588 = 4.73:1
     #8AA3BE beyaz üstünde 2.60:1  → #5F768D = 4.71:1
   Ton kayması gözle fark edilmeyecek kadar küçük, okunabilirlik eşiği geçiyor.
   --------------------------------------------------------------------------- */
/* BİREBİR TASARIM: bu iki override kapalı — tasarımın kendi tonları kullanılıyor.
   Erişilebilirlik için açmak istersen yorumdan çıkar (ölçülen: #6C7F92 = 4.13:1,
   #8AA3BE = 2.60:1; WCAG AA eşiği 4.5:1).
.fes-app [style*="#6C7F92"] { color: #647588 !important; }
.fes-app [style*="#8AA3BE"] { color: #5F768D !important; }
*/

/* ---------------------------------------------------------------------------
   AJAX sepet buton durumları.
   Woo, AJAX sepete-ekleme sırasında butona `loading`, bittiğinde `added`
   sınıfını basar ve butonun YANINA bir "Sepetim" bağlantısı (`.added_to_cart`)
   ekler — tasarımda böyle bir öğe YOK, kart yerleşimini bozuyor.
   Kural burada duruyor çünkü bu buton ana sayfa, katalog ve ürün detayında
   birden geçiyor; sayfa başına CSS'e koymak üçünde tekrar demekti.
   (JS düğümü ayrıca DOM'dan siliyor; bu kural yanıp sönmeye karşı.)
   --------------------------------------------------------------------------- */
.fes-app .add_to_cart_button.loading,
.fes-app [data-fes-cart-form] button.loading {
	opacity: .72;
	cursor: progress;
	pointer-events: none !important;
}

.fes-app .add_to_cart_button.added,
.fes-app [data-fes-cart-form] button.added { background: #C4342D !important; }

.fes-app .added_to_cart { display: none !important; }