/* ==========================================================================
   Atelye Deniz — PAYLAŞILAN BÖLÜM stilleri
   ==========================================================================

   Sahibi olduğu işaretleme:
     template-parts/bolum-neden-biz.php   → "Neden Biz?" foto karuseli
     template-parts/bolum-nedenler.php    → "Anahtar Teslim…" neden karuseli

   Kullanan sayfalar: `front-page.php` ve `page-hakkimizda.php`.
   Kuyruklama `inc/varliklar.php` içindedir; K21 sırası: temel → ust → alt →
   ORTAK → sayfa parçası.

   --------------------------------------------------------------------------
   K10 İSTİSNASI — NEDEN ÖN EK HÂLÂ `.atd-ana-`?
   --------------------------------------------------------------------------
   K10 her sayfaya kendi ad alanını verir ve bu iki bölüm artık tek bir sayfaya
   ait değil; "doğru" ön ek bu dosyada `.atd-ortak-` olurdu. Yine de sınıf
   adları `.atd-ana-fotolar` / `.atd-ana-nedenler` olarak BIRAKILDI. Gerekçe:

     1. `assets/js/parts/karusel.js` yalnız `data-atd-*` özniteliklerini okur
        AMA aktif slayt/nokta durumunu SINIF adıyla yazar. İşaretlemeye
        dokunan her yeniden adlandırma, sözleşmenin (K17) iki ucunu birden
        değiştirmeyi gerektirir ve kaçırılan tek ad **sessiz** bir kırılmadır:
        PHP hata vermez, CSS hata vermez, yalnız karusel ölür.
     2. Ad değişimi kazancı sıfırdır: bu iki bölümün sınıfları zaten yalnız bu
        dosyada tanımlıdır ve `.atd-ana-` ön ekini başka hiçbir parça
        kullanmaz — çakışma riski yoktur.

   Yani bu, K10'un BİLİNÇLİ ve kayda geçirilmiş bir istisnasıdır: ad alanı
   `.atd-ana-` olarak kalır, sahiplik (K9) bu dosyaya geçer.
   `assets/css/parts/ana.css` içinde bu iki bölüme ait TEK kural kalmamıştır;
   orada yalnız ana sayfaya özgü bölümler (hero, prestij, galeri, hakkımızda
   şeridi, koyu CTA) durur.

   --------------------------------------------------------------------------
   NOKTA KURALLARI DA BURADADIR — ZORUNLU
   --------------------------------------------------------------------------
   `.atd-ana-noktalar` / `.atd-ana-nokta` üç karuselin (fotolar, nedenler,
   galeri) ORTAK tabanıdır. Bu iki bölüm Hakkımızda sayfasında da göründüğü
   için taban kurallar da buraya taşındı; `ana.css`te yalnız galeri karuseline
   ait `--galeri` konum değiştiricisi kaldı. Taban `ana.css`te bırakılsaydı
   Hakkımızda'daki noktalar tamamen stilsiz kalırdı.

   --------------------------------------------------------------------------
   DEĞERLER
   --------------------------------------------------------------------------
   Her ölçü, renk ve geçiş `ana.css`ten TAŞINMIŞTIR — kopyalanmamış, taşınmış;
   tek bir karakteri bile değişmemiştir. Kaynak yine prototipin satır içi
   stilleridir (K2). Satır içi kalan tek şey `background-image` (görsel URL'si)
   ve foto kartlarındaki `transform: rotate(<rot>deg)`tir (veriden gelir).
   ========================================================================== */


/* --------------------------------------------------------------------------
   K20.1 — TÜRETİLMİŞ ARAYÜZ TOKENLARI
   --------------------------------------------------------------------------
   `ana.css` bu iki tokenı `.atd-ana` kökünde tanımlıyor; Hakkımızda sayfasında
   öyle bir kök YOKTUR ve tanımsız `var()` "computed-value time" geçersizliği
   üretir — ok glifi ile pasif nokta rengi düşer, noktalar görünmez olur.
   Bu yüzden tokenlar bölümlerin KENDİ köklerinde de tanımlanır; değerler
   `ana.css`tekiyle birebir aynıdır, ana sayfada görsel fark sıfırdır.

     ok glifi     #A9B3C6 / #FFFFFF = 2.11:1  → #818CA3 = 3.38:1
     pasif nokta  #C7D2E8 / #FFFFFF = 1.52:1  → #7E8FB8 = 3.23:1
                  #C7D2E8 / #F7F9FC = 1.44:1  → #7E8FB8 = 3.06:1

   Ok düğmesinin zemini saydam, noktanın kenarlığı yok; yani ikisinde de TEK
   görsel bilgi bu renktir. Aktif nokta (#1E3A78, 10.87:1) değişmez.
   -------------------------------------------------------------------------- */
.atd-ana-fotolar,
.atd-ana-nedenler {
	--atd-ana-ok: #818CA3;
	--atd-ana-nokta-pasif: #7E8FB8;
}


/* ==========================================================================
   1) "Neden Biz?" — foto karuseli (prototip satır 39-65)
   ========================================================================== */

.atd-ana-fotolar {
	padding: 76px 4% 64px;
	background: #FFFFFF;
}

.atd-ana-fotolar__baslik {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(28px,4.4vw,42px);
	font-weight: 800;
	text-align: center;
	margin: 0 0 42px;
}

.atd-ana-fotolar__govde {
	position: relative;
	padding: 0 min(52px,7vw);
}

.atd-ana-fotolar__ok {
	position: absolute;
	top: 78px;
	width: 40px;
	height: 44px;
	border: none;
	background: transparent;
	color: var(--atd-ana-ok);
	font-size: 34px;
	cursor: pointer;
	z-index: 2;
	line-height: 1;
}

/* Dokunma hedefi 40×44 → 44×44 (WCAG 2.5.5). Kutu ölçüsü ve dolayısıyla glifin
   konumu DEĞİŞMEZ; yalnız görünmez isabet alanı 2px büyür. */
.atd-ana-fotolar__ok::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.atd-ana-fotolar__ok--geri {
	left: 0;
}

.atd-ana-fotolar__ok--ileri {
	right: 0;
}

.atd-ana-fotolar__ok:hover {
	color: #1E3A78;
}

.atd-ana-fotolar__pencere {
	overflow: hidden;
}

/* `pPer`: 6 sütun; kırılımlarda 3 ve 1 olur (K5.1). */
.atd-ana-fotolar__ray {
	--atd-per: 6;
	display: flex;
}

.atd-ana-fotolar__kart {
	flex: 0 0 calc(100% / var(--atd-per));
	box-sizing: border-box;
	padding: 0 10px;
}

.atd-ana-fotolar__kutu {
	position: relative;
	height: 200px;
	border-radius: 6px;
	overflow: hidden;
	background: #F2EEE8;
}

/* tip = "iletisim" — iki yuvarlak yuva + iki `sms` baloncuğu. */
.atd-ana-fotolar__yuva {
	position: absolute;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(16,30,68,0.2);
	background-size: 300%;
}

.atd-ana-fotolar__yuva--1 {
	top: 16px;
	left: 13%;
	background-position: 15% 10%;
}

.atd-ana-fotolar__yuva--2 {
	bottom: 14px;
	right: 13%;
	background-position: 88% 18%;
}

.atd-ana-fotolar__balon {
	position: absolute;
	color: #B7A36C;
}

.atd-ana-fotolar__balon--1 {
	top: 26px;
	right: 19%;
	font-size: 30px;
}

.atd-ana-fotolar__balon--2 {
	bottom: 34px;
	left: 17%;
	font-size: 24px;
	transform: scaleX(-1);
}

/* tip = "cift" — iki eğik pano. */
.atd-ana-fotolar__pano {
	position: absolute;
	width: 68%;
	height: 62%;
	background-size: cover;
	border: 3px solid #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(16,30,68,0.22);
}

.atd-ana-fotolar__pano--1 {
	top: 9%;
	left: 5%;
	transform: rotate(-5deg);
	background-position: center top;
}

.atd-ana-fotolar__pano--2 {
	bottom: 7%;
	right: 5%;
	transform: rotate(3deg);
	background-position: center bottom;
}

/* tip = "tek" — tek eğik kare; dönüş açısı veriden gelir, satır içi yazılır. */
.atd-ana-fotolar__tek {
	position: absolute;
	inset: 7% 7%;
	background-size: cover;
	background-position: center;
	border: 3px solid #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(16,30,68,0.22);
}

.atd-ana-fotolar__ad {
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	margin: 12px 0 0;
	line-height: 1.45;
}


/* --------------------------------------------------------------------------
   Karusel noktaları — prototipteki paylaşılan `dot()` işlevi.
   Aktiflik `data-atd-aktif="1"` özniteliğiyle gelir (karusel.js yazar).
   Taban kurallar ORTAK; galeri karuselinin `--galeri` konum değiştiricisi
   `ana.css`te kalır (o bölüm yalnız ana sayfadadır).
   -------------------------------------------------------------------------- */
.atd-ana-noktalar {
	display: flex;
	justify-content: center;
	gap: 9px;
}

.atd-ana-noktalar--fotolar {
	margin-top: 28px;
}

.atd-ana-noktalar--nedenler {
	margin-top: 30px;
}

.atd-ana-nokta {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	padding: 0;
	background: var(--atd-ana-nokta-pasif);
	transition: all .3s ease;
}

.atd-ana-nokta[data-atd-aktif="1"] {
	width: 26px;
	background: #1E3A78;
}

/* Dokunma hedefi — genişlik `100% + gap` ile SINIRLIDIR (44px DEĞİL): 44px'lik
   alanlar komşu noktanınkiyle üst üste binerdi ve üstte kalan (DOM'da sonraki)
   nokta komşusunun görünen merkezindeki tıklamayı çalardı. Kalan boşluğu WCAG
   2.5.8'in "Eşdeğer" istisnası kapatır: aynı işlevi veren ok düğmeleri
   44×44'tür. Buradaki `gap` 9px'tir. */
.atd-ana-nokta::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(100% + 9px);
	height: 44px;
	transform: translate(-50%, -50%);
}


/* ==========================================================================
   2) "Anahtar Teslim Projeniz için…" — neden karuseli (prototip satır 67-93)
   ========================================================================== */

.atd-ana-nedenler {
	padding: 40px 4% 76px;
	background: #FFFFFF;
}

.atd-ana-nedenler__baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(28px,4.6vw,40px);
	font-weight: 700;
	text-align: center;
	margin: 0 auto 20px;
	max-width: 900px;
	text-wrap: pretty;
}

/* ★ ayracı — yalnız dekoratif (K20.1). */
.atd-ana-ayrac {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 auto 44px;
	max-width: 700px;
}

.atd-ana-ayrac__cizgi {
	height: 1px;
	background: #D9DFEC;
	flex: 1;
}

.atd-ana-ayrac__yildiz {
	color: #E0A93E;
	font-size: 15px;
}

.atd-ana-nedenler__govde {
	position: relative;
	padding: 0 min(62px,8vw);
}

.atd-ana-nedenler__ok {
	position: absolute;
	top: 30px;
	width: 40px;
	height: 44px;
	border: none;
	background: transparent;
	color: var(--atd-ana-ok);
	font-size: 34px;
	cursor: pointer;
	z-index: 2;
	line-height: 1;
}

/* Dokunma hedefi 40×44 → 44×44; görünen kutu ve glif konumu değişmez. */
.atd-ana-nedenler__ok::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.atd-ana-nedenler__ok--geri {
	left: 0;
}

.atd-ana-nedenler__ok--ileri {
	right: 0;
}

.atd-ana-nedenler__ok:hover {
	color: #1E3A78;
}

.atd-ana-nedenler__pencere {
	overflow: hidden;
}

/* `nPer`: 4 sütun; kırılımlarda 2 ve 1 olur (K5.1). */
.atd-ana-nedenler__ray {
	--atd-per: 4;
	display: flex;
}

.atd-ana-nedenler__kart {
	flex: 0 0 calc(100% / var(--atd-per));
	box-sizing: border-box;
	padding: 0 26px;
}

/*
 * KART başlığı (bölüm başlığı DEĞİL — o `.atd-ana-nedenler__baslik`).
 *
 * BİLİNÇLİ SAPMA (site sahibi isteği): `font-weight` 700 → 800.
 *   Prototip değeri (`.tmp_mobelluks/Anasayfa.dc.html` satır 81):
 *   fontFamily Playfair Display, fontSize 19px, fontWeight 700,
 *   textAlign center, lineHeight 1.35.
 *   NEDEN: dört kart başlığı ("Gerçekten Kişiye Özel Tasarım",
 *   "Tek Vizyon, Tek Ekip", "Tam Dahili Kontrol", "Zaman Verimli Uygulama")
 *   14.5px'lik `__metin` açıklamasının hemen üstünde duruyor; 700'de iki
 *   düzey arasındaki ağırlık farkı yeterince okunmuyordu. 800 başlığı
 *   açıklamadan net ayırır.
 *   NEDEN 800 (900 değil): Playfair Display latin/latin-ext dosyaları
 *   değişken `wght 400..900` (bkz. `assets/css/temel.css` satır 24-25),
 *   yani 800 fontun GERÇEK bir kesitidir — tarayıcı sahte kalın (synthetic
 *   bold) üretmez, harf biçimleri bozulmaz. 900 ise 19px'te tırnaklı
 *   yüksek kontrastlı bu yüzde ince tırnakları tıkardı.
 *   DİĞER DEĞERLER prototipteki gibi DEĞİŞMEDİ; açıklama metnine
 *   (`.atd-ana-nedenler__metin`) ve bölüm başlığına DOKUNULMADI.
 */
.atd-ana-nedenler__ad {
	font-family: 'Playfair Display', serif;
	font-size: 19px;
	font-weight: 800;
	text-align: center;
	line-height: 1.35;
	margin: 0;
}

.atd-ana-nedenler__metin {
	font-size: 14.5px;
	color: #5B6B85;
	text-align: center;
	line-height: 1.7;
	margin: 10px 0 0;
}


/* ==========================================================================
   3) KIRILIMLAR (K5.1) — prototipteki JS koşullarının birebir karşılığı
   ==========================================================================
   `--atd-per` çalışma anında `karusel.js` tarafından okunur (K17). Bu bloklar
   `ana.css`ten TAŞINDI; ortak.css yüklenmezse per=1'e düşülür ve iki karusel
   de tek sütuna iner — bu yüzden kuyruklama iki sayfada da zorunludur.
   ========================================================================== */

/* w < 1000 */
@media (max-width: 999px) {
	.atd-ana-fotolar__ray {
		--atd-per: 3;
	}

	.atd-ana-nedenler__ray {
		--atd-per: 2;
	}
}

/* w < 640 */
@media (max-width: 639px) {
	.atd-ana-fotolar__ray {
		--atd-per: 1;
	}

	.atd-ana-nedenler__ray {
		--atd-per: 1;
	}
}


/* ==========================================================================
   4) AZALTILMIŞ HAREKET (WCAG 2.3.3)
   ==========================================================================
   Ray kaydırması `karusel.js` içindeki `azHareket()` denetimiyle zaten
   kapanıyor; burada CSS tarafında kalan nokta geçişi susturulur.
   `!important` kullanılmaz — kural aynı özgüllükte ve DOSYANIN SONUNDA
   olduğu için zaten kazanır.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.atd-ana-nokta {
		transition: none;
	}
}