/* ============================================================================
   Donanım Akademi — TEMEL CSS
   Tüm eklenti çıktısı .da-app wrapper'ı altındadır; hiçbir kural global
   body/header selector'ına dokunmaz (plugin expectations §5).
   ========================================================================== */

/* === 1. HELLO-ELEMENTOR + ELEMENTOR ZIRHI — EN ÜSTTE KALMALI ===============
   Kök neden: hello-elementor reset.css + Elementor Kit, bu dosyadan SONRA
   yüklenir ve genel eleman seçicileriyle (a, button, button:hover, h1-h6,
   input:focus, table td, img) tek-sınıf component kurallarını yener.
   Zırh yalnızca temayı NÖTRLER; asıl görünümü component kuralları verir.
   ========================================================================== */

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

/* 1.2 Başlıklar — reset + Kit h1..h6 renk dayatması */
.da-app :where(h1,h2,h3,h4,h5,h6) { color: var(--da-heading, inherit); margin: 0; }

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

/* 1.4 Butonlar hover/focus/active — #1 BUG: tema (0,2,0) pembe dolgu basar.
       :is() = (0,3,0) ile nötrlenir. Solid CTA'lar KENDİ :hover'ıyla korunur. */
.da-app :is(button,[type="button"],[type="submit"],[type="reset"]):hover,
.da-app :is(button,[type="button"],[type="submit"],[type="reset"]):focus,
.da-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{border:1px solid #666}; :focus{border-color:#333} */
.da-app :is(input,select,textarea) {
	font-family: inherit;
	color: #18181B;
	background: #FFFDFC;
	border: 1px solid #E8E8EA;
	border-radius: 12px;
}
.da-app :is(input,select,textarea):focus {
	outline: none;
	border-color: #D02026;
	background: #fff;
}

/* 1.6 Tablolar — WooCommerce sepet/checkout gri zebra ve çizgiler */
.da-app :where(table, table td, table th) { background: none; border: 0; }
.da-app table tbody > tr:nth-child(odd) > td,
.da-app table tbody > tr:nth-child(odd) > th,
.da-app table tbody tr:hover > td,
.da-app table tbody tr:hover > th { background: none; }

/* 1.7 Logo — Elementor `.elementor img{height:auto}` sabit logoyu devleştirir */
.da-app .da-logo img { height: var(--da-logo-h, 54px); width: auto; }

/* 1.7b Skip-link — tema reset'inin `a{color:#c36}` pembesi buraya sızıyor.
   Görsel olarak gizli ama Tab'lanınca görünür hâle geliyor ve pembe çıkıyordu.
   `.da-app` dışında yaşadığı için zırhın kapsamına girmiyor. */
.skip-link.screen-reader-text:focus {
	color: #D02026;
	outline-color: rgba(208,32,38,.45);
}

/* 1.8 TAM GENİŞLİK — tema sarmalayıcısının kısıtını kaldır.
   hello-elementor theme.css:
     body:not([class*=elementor-page-]) .site-main{max-width:1140px;padding-inline:10px}
   `elementor-page-*` yalnız Elementor ile inşa edilmiş sayfalara eklendiği için
   shortcode sayfalarımız bu kurala yakalanıyor ve tam genişlik tasarım 1140px'e
   sıkışıyordu. Sayfa şablonu bunu çözmez — kısıt CSS'ten gelir.

   `body.da-fullwidth` ile kapılıdır: DA shortcode'u olmayan sayfalar (sepet,
   ödeme, hesabım) etkilenmez. Özgüllük (0,2,1) tema kuralını (0,2,1 + :not)
   yener çünkü bu dosya sonra yüklenir ve seçici eşit ağırlıkta. */
body.da-fullwidth .site-main,
body.da-fullwidth .page-content {
	max-width: none;
	padding-inline: 0;
	width: 100%;
}
/* Tema bazı şablonlarda içeriği ayrıca sarar — o sarmalayıcıları da aç. */
body.da-fullwidth .site-main > .page-content,
body.da-fullwidth .elementor-widget-shortcode,
body.da-fullwidth .elementor-widget-shortcode > .elementor-widget-container {
	max-width: none;
	width: 100%;
}

/* Elementor Tam Genişlik şablonunda tema <main id="content"> basmadığı için
   onu shortcode çıktısında biz üretiyoruz (bkz. class-da-shortcodes.php).
   Sarmalayıcı görünümü hiç etkilememeli; odak halkası da çıkmamalı çünkü
   tabindex="-1" yalnız atlama bağlantısının hedefi olsun diye var. */
.da-main {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.da-main:focus { outline: none; }


/* === 2. TASARIM TOKENLARI (handoff §3) ==================================== */
.da-app {
	--da-red: #D02026;
	--da-red-hover: #b91d22;
	--da-red-dark: #8F1218;
	--da-burgundy: #6C0E12;
	--da-burgundy-2: #7A1015;
	--da-text: #18181B;
	--da-text-2: #5F6368;
	/* Tasarımdaki #8A8A8F beyaz üzerinde 3.44:1 veriyordu; Lighthouse bunu
	   kontrast hatası olarak işaretledi (WCAG AA küçük metin için 4.5:1).
	   Aynı gri tonda en yakın geçerli değer: beyazda 4.64:1. */
	--da-muted: #74747A;
	--da-surface: #FFFFFF;
	--da-warm: #FBF7F4;
	--da-red-soft: #FFF1F1;
	--da-border: #E8E8EA;
	--da-border-warm: #EDE4DF;
	--da-success: #16825D;
	--da-warning: #B7791F;
	--da-whatsapp: #25D366;

	--da-shadow-card: 0 4px 18px rgba(24,24,27,.06);
	--da-shadow-panel: 0 14px 44px rgba(24,24,27,.08);
	--da-shadow-float: 0 18px 40px rgba(24,24,27,.14);
	--da-shadow-cta: 0 24px 60px rgba(143,18,24,.28);

	--da-container: 1240px;
	--da-heading: #18181B;
	--da-logo-h: 54px;
}


/* === 3. TİPOGRAFİ VE TABAN (handoff §3) ================================== */
.da-app {
	font-family: Manrope, system-ui, sans-serif;
	color: var(--da-text);
	background: var(--da-surface);
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern","liga","calt","ss01";

	/* Kök TAM GENİŞLİKTİR — max-width YOK.
	   Handoff §6 "max-width:1440px" diyor ama o, tasarımın 1440px'lik çerçevesini
	   tarif ediyor. Production'da kök kısıtlanınca hero, kırmızı CTA bantları ve
	   footer 1440'ta kapanıp iki yanda beyaz şerit bırakıyordu; header ise
	   (max-width:none ile) kenardan kenara olduğu için görünür bir hizasızlık
	   oluşuyordu. Tam kanamalı bölümler viewport'u kaplar, ölçü `.da-container`
	   (1240px) ile korunur. */
	width: 100%;
	overflow-x: clip;
}

.da-app *, .da-app *::before, .da-app *::after { box-sizing: border-box; }
.da-app :where(h1,h2,h3,h4,h5) { text-wrap: balance; }
.da-app :where(p,li) { text-wrap: pretty; }
.da-app :where(h1,h2) { font-weight: 800; letter-spacing: -0.032em; }
.da-app :where(img) { display: block; max-width: 100%; }
.da-app :where(p) { margin: 0; }

/* Konteyner
   Tasarım (DC) tüm bölümlerde `padding:0 40px` kullanıyor; handoff §3 aralığı
   "desktop 24–40 / tablet 24 / mobil 20" olarak veriyor. 24px seçilmişti ve
   max-width border-box olduğu için içerik alanı 1192px çıkıyordu (DC'de 1160)
   — her bölümde metin 16px dışarı taşıyor, satır kırılmaları kayıyordu. */
.da-app .da-container {
	width: 100%;
	max-width: var(--da-container);
	margin-inline: auto;
	padding-inline: 40px;
}
@media (max-width: 1023px) {
	.da-app .da-container { padding-inline: 24px; }
}
@media (max-width: 767px) {
	.da-app .da-container { padding-inline: 20px; }
}


/* === 4. ERİŞİLEBİLİRLİK =================================================== */
.da-app :is(a,button,input,select,textarea,[tabindex]):focus-visible {
	outline: 3px solid rgba(208,32,38,.45);
	outline-offset: 2px;
	border-radius: 8px;
}
.da-app [disabled],
.da-app .da-disabled { opacity: .45; cursor: not-allowed; }

.da-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;
}

/* Dokunma hedefi min 44×44 (handoff §6) */
.da-app .da-tap { min-width: 44px; min-height: 44px; }


/* === 5. KARE (1:1) KAPAK ALANI ==========================================
   Eğitim kartı görseli WooCommerce featured image'dan gelir; görsel yoksa
   marka desenli SVG placeholder aynı alanı doldurur → her iki halde de CLS yok.
   ======================================================================== */
.da-app .da-cover {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--da-warm);
}
.da-app .da-cover > img,
.da-app .da-cover > svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* === 6. SCROLL REVEAL (handoff §7) ======================================
   Fail-safe: opacity daima 1, yalnız translateY. JS yoksa içerik yerinde kalır.
   ======================================================================== */
.da-app .da-reveal { transform: translateY(28px); transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.da-app .da-reveal.da-in { transform: none; }


/* === 7. REDUCED MOTION ================================================== */
@media (prefers-reduced-motion: reduce) {
	.da-app *, .da-app *::before, .da-app *::after {
		animation: none !important;
		transition: none !important;
	}
	.da-app .da-reveal { transform: none; }
}