/* ==========================================================================
   Atelye Deniz — Hakkımızda sayfası stili
   ==========================================================================

   Kaynak: `.tmp_mobelluks/Hakkimizda.dc.html` (satır içi stiller).
   Her değer prototipten BİREBİR taşınmıştır (K2): yuvarlama, sadeleştirme
   ya da "daha iyisini yapma" YOKTUR.

   Ad alanı (K10): yalnız `.atd-hak-*`. Bu dosyada başka ön ek geçmez.
   Paylaşılan `.atd-ms` sınıfı `assets/css/temel.css` içindedir; buradaki
   ikon kuralı yalnız kendi ölçü/boşluk değerlerini ekler.

   Prototipte @media kuralı YOKTUR; duyarlılık `repeat(auto-fit, minmax(...))`,
   `flex-wrap: wrap` ve `clamp()` ile kurulur (K5 kırılımları bu sayfada
   kullanılmaz — JS ile hesaplanan duyarlı değer yok).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) Sayfa gövdesi — prototip: <div style="width:100%">
   -------------------------------------------------------------------------- */
.atd-hak-govde {
	width: 100%;
}


/* --------------------------------------------------------------------------
   2) Başlık bandı (kırıntı + h1)
   Prototip: background:#16295A;color:#FFFFFF;padding:58px 5%
   -------------------------------------------------------------------------- */
.atd-hak-basi {
	background: #16295A;
	color: #FFFFFF;
	padding: 58px 5%;
}

/* Prototip: font-size:13px;color:#9FB4E4;font-weight:700;letter-spacing:2px;margin-bottom:10px */
.atd-hak-kirinti {
	font-size: 13px;
	color: #9FB4E4;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

/* Prototip: <a … style="color:#9FB4E4">
   Satır içi stil, `temel.css` içindeki `a:hover{color:#16295A}` kuralını
   yendiği için prototipte bağlantı üzerine gelindiğinde de #9FB4E4 kalır.
   Sınıfa taşırken bu davranışı korumak için `:hover` de aynı renge sabitlenir
   (yeni bir değer değildir; prototipin gerçek görünümüdür). */
.atd-hak-kirinti-bag,
.atd-hak-kirinti-bag:hover {
	color: #9FB4E4;
}

/* Prototip: font-family:'Playfair Display',serif;font-size:clamp(30px,5vw,44px);font-weight:600;margin:0 */
.atd-hak-baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 600;
	margin: 0;
}


/* --------------------------------------------------------------------------
   3) Hikâye bölümü (görsel + metin)
   Prototip: padding:88px 5%;display:grid;
             grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
             gap:44px;align-items:center
   -------------------------------------------------------------------------- */
.atd-hak-hikaye {
	padding: 88px 5%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 44px;
	align-items: center;
}

/* Prototip: width:100%;height:min(560px,72vw);object-fit:cover;
             object-position:60% center;border-radius:8px;display:block */
.atd-hak-hikaye-gorsel {
	width: 100%;
	height: min(560px, 72vw);
	object-fit: cover;
	object-position: 60% center;
	border-radius: 8px;
	display: block;
}

/* Prototip: color:#1E3A78;font-size:13px;font-weight:800;letter-spacing:3px */
.atd-hak-etiket {
	color: #1E3A78;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 3px;
}

/*
 * PROTOTİPTEN BİLİNÇLİ SAPMA (site sahibi isteği: "hakkımızda sayfasında
 * ATELYE DENİZ büyük olsun").
 *
 * NE DEĞİŞTİ: yalnız "ATELYE DENİZ" kap yazısı 13px → 18px oldu.
 * ESKİ PROTOTİP DEĞERİ: font-size:13px (tüm kap yazıları için ortak).
 *
 * NİÇİN DEĞİŞTİRİCİ SINIF: `.atd-hak-etiket` aynı sayfada "SÜRECİMİZ"
 * kap yazısında da kullanılıyor (page-hakkimizda.php ~299). Temel sınıfı
 * büyütmek istenmeyen ikinci bir değişiklik doğururdu; bu yüzden istek
 * yalnız `--iri` değiştiricisiyle "ATELYE DENİZ" ögesine uygulandı.
 * "SÜRECİMİZ" prototipteki 13px değerinde KALDI.
 *
 * HİYERARŞİ: hemen altındaki `.atd-hak-hikaye-baslik`
 * clamp(26px, 4vw, 34px) — yani en dar ekranda bile 26px. 18px kap yazısı
 * başlığın altında kalır (18/26 = 0,69; geniş ekranda 18/34 = 0,53), göz
 * önce başlığa takılır. Letter-spacing/ağırlık/renk prototipteki gibi
 * bırakıldı; sapma tek boyutla sınırlı tutuldu.
 *
 * KONTRAST: renk değişmedi — #1E3A78 beyaz üstünde 10,87:1 (AA/AAA).
 */
.atd-hak-etiket--iri {
	font-size: 18px;
}

/* Prototip: font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,34px);
             font-weight:700;margin:12px 0 18px;text-wrap:pretty */
.atd-hak-hikaye-baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 700;
	margin: 12px 0 18px;
	text-wrap: pretty;
}

/* Prototip: font-size:15px;line-height:1.75;color:#41506B;margin:0 0 13px */
.atd-hak-p {
	font-size: 15px;
	line-height: 1.75;
	color: #41506B;
	margin: 0 0 13px;
}

/* Prototipteki son paragraf: margin:0 */
.atd-hak-p--son {
	margin: 0;
}

/* Sayfa düzenleyicisinden gelen metin de aynı paragraf ölçüsünü alır;
   son paragrafın alt boşluğu prototipteki gibi sıfırlanır. */
.atd-hak-icerik p {
	font-size: 15px;
	line-height: 1.75;
	color: #41506B;
	margin: 0 0 13px;
}

.atd-hak-icerik p:last-child {
	margin: 0;
}


/* --------------------------------------------------------------------------
   4) Sayılar bandı
   Prototip: background:#16295A;color:#FFFFFF;padding:56px 5%
   -------------------------------------------------------------------------- */
.atd-hak-sayilar {
	background: #16295A;
	color: #FFFFFF;
	padding: 56px 5%;
}

/* Prototip: display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
             gap:30px;text-align:center */
.atd-hak-sayilar-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 30px;
	text-align: center;
}

/* Prototip: font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,42px);font-weight:600 */
.atd-hak-sayi-deger {
	font-family: 'Playfair Display', serif;
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 600;
}

/* Prototip: font-size:14px;color:#B9C6E4;margin-top:6px;letter-spacing:0.5px */
.atd-hak-sayi-etiket {
	font-size: 14px;
	color: #B9C6E4;
	margin-top: 6px;
	letter-spacing: 0.5px;
}


/* --------------------------------------------------------------------------
   5) Süreç bölümü (dört adım)
   Prototip: background:#F7F9FC;padding:78px 5%
   -------------------------------------------------------------------------- */
.atd-hak-surec {
	background: #F7F9FC;
	padding: 78px 5%;
}

/* Prototip: text-align:center;max-width:620px;margin:0 auto 48px */
.atd-hak-surec-basi {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 48px;
}

/* Prototip: font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,34px);
             font-weight:600;margin:12px 0 0 */
.atd-hak-surec-baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 600;
	margin: 12px 0 0;
}

/* Prototip: display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px */
.atd-hak-adimlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
}

/* Prototip: background:#FFFFFF;border:1px solid #E5EAF3;border-radius:8px;padding:28px 26px */
.atd-hak-adim {
	background: #FFFFFF;
	border: 1px solid #E5EAF3;
	border-radius: 8px;
	padding: 28px 26px;
}

/* Prototip: font-family:'Playfair Display',serif;font-size:38px;font-weight:600;color:#1E3A78 */
.atd-hak-adim-no {
	font-family: 'Playfair Display', serif;
	font-size: 38px;
	font-weight: 600;
	color: #1E3A78;
}

/* Prototip: font-size:17px;font-weight:700;margin:10px 0 8px */
.atd-hak-adim-baslik {
	font-size: 17px;
	font-weight: 700;
	margin: 10px 0 8px;
}

/* Prototip: font-size:14px;line-height:1.65;color:#5B6B85 */
.atd-hak-adim-desc {
	font-size: 14px;
	line-height: 1.65;
	color: #5B6B85;
}


/* --------------------------------------------------------------------------
   6) Kapanış çağrısı
   Prototip: background:#101E44;color:#FFFFFF;padding:64px 5%;display:flex;
             justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap
   -------------------------------------------------------------------------- */
.atd-hak-cta {
	background: #101E44;
	color: #FFFFFF;
	padding: 64px 5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

/* Prototip: font-family:'Playfair Display',serif;font-size:clamp(24px,3.6vw,32px);
             font-weight:600;margin:0 0 8px */
.atd-hak-cta-baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(24px, 3.6vw, 32px);
	font-weight: 600;
	margin: 0 0 8px;
}

/* Prototip: font-size:15px;color:#B9C6E4;margin:0 */
.atd-hak-cta-alt {
	font-size: 15px;
	color: #B9C6E4;
	margin: 0;
}

/* Prototip: display:flex;gap:14px;align-items:center;flex-wrap:wrap */
.atd-hak-cta-dugmeler {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

/* Prototip: background:#FFFFFF;color:#16295A;font-size:14px;font-weight:700;
             padding:15px 30px;border-radius:4px
   style-hover="background:#E8EEFA;color:#16295A" */
.atd-hak-dugme {
	background: #FFFFFF;
	color: #16295A;
	font-size: 14px;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 4px;
}

.atd-hak-dugme:hover {
	background: #E8EEFA;
	color: #16295A;
}

/* Prototip: border:1px solid rgba(255,255,255,0.5);color:#FFFFFF;font-size:15px;
             font-weight:700;padding:14px 26px;border-radius:4px
   style-hover="background:rgba(255,255,255,0.1);color:#FFFFFF" */
.atd-hak-dugme-2 {
	border: 1px solid rgba(255,255,255,0.5);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 4px;
}

.atd-hak-dugme-2:hover {
	background: rgba(255,255,255,0.1);
	color: #FFFFFF;
}

/* Prototip: font-family:'Material Symbols Rounded';font-size:18px;
             vertical-align:-4px;margin-right:8px */
.atd-hak-dugme-ikon {
	font-family: 'Material Symbols Rounded';
	font-size: 18px;
	vertical-align: -4px;
	margin-right: 8px;
}


/* --------------------------------------------------------------------------
   7) Anlatı blokları ("Biz Kimiz?" / "Neler Yapıyoruz?")
   -------------------------------------------------------------------------- 
   Prototipte KARŞILIĞI YOKTUR — bu bölüm site sahibinin isteğiyle eklendi ve
   bilinçli bir sapmadır (K30). Uydurma değer kullanılmadı: her ölçü ve renk
   sayfanın MEVCUT ritminden alındı.
     padding 78px …   → dikey pay süreç bölümü (.atd-hak-surec) ile aynı; YAN
                        pay artık düz %5 DEĞİL, 1360px tavanlıdır (aşağıya bak)
     gap 44px         → hikâye bölümü (.atd-hak-hikaye) ile aynı
     border-radius 8px → hikâye görseli ile aynı
     #F7F9FC / #FFFFFF → K3 paleti (--atd-zemin-acik / --atd-beyaz)
     #1E3A78 / #41506B → K3 paleti; başlık ve paragraf renkleri sayfadakiyle bir
   Tipografi de sayfadan devralınır: başlık `.atd-hak-hikaye-baslik` ile aynı
   (Playfair Display, clamp(26px,4vw,34px), 700), paragraf `.atd-hak-p` ile
   aynı (15px/1.75, #41506B).
   -------------------------------------------------------------------------- */

/*
 * Bloğun kendisi ızgaradır: iki sütun, dikey ortalama.
 * `minmax(0, 1fr)` — `1fr` tek başına en küçük içerik genişliğinin altına
 * inemez; uzun bir kelime ya da adres sütunu taşırırdı.
 */
.atd-hak-blok {
	background: #FFFFFF;

	/*
	 * İÇERİK GENİŞLİĞİNE TAVAN — sütunları dengede tutar (4 Eyl 2026).
	 *
	 * Burada bir süre düz `78px 5%` yazıyordu. Yan payı yüzde olunca içerik
	 * ekranla birlikte sınırsız genişliyor, GÖRSEL de onunla birlikte
	 * yükseliyordu; metnin uzunluğu ise sabit. Ölçüldü (metin ÷ görsel yükseklik):
	 *     1920px → 0,63  (görsel metinden 209px uzun)
	 *     1680px → 0,78
	 *     1536px → 0,85
	 *     1440px → 0,97  (dengeli)
	 * Yani denge yalnız tek bir genişlikte tutuyordu.
	 *
	 * `max(5%, calc((100% - 1360px) / 2))`: dar ekranda eskisi gibi %5, geniş
	 * ekranda içeriği 1360px'te durdurur. 1360 UYDURMA DEĞİL — temada zaten
	 * kullanılan bir kap genişliğidir (`assets/css/parts/mob.css`). Sütun
	 * genişliği böylece 658px'te sabitlenir ve 1360px üstündeki HER ekranda
	 * denge 1440px'tekiyle aynı kalır. 1440px ve altı hiç etkilenmez: orada
	 * %5 zaten daha büyüktür, `max()` onu seçer.
	 *
	 * Zemin (zebra) tam genişlikte kalır — tavan PAYA konuldu, kap eklenmedi;
	 * bir sarmalayıcı `<div>` eklemek HTML'i ve K30'daki yapıyı değiştirirdi.
	 */
	padding: 78px max(5%, calc((100% - 1360px) / 2));

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 44px;
	align-items: center;
}

/* Zebra: tek/çift blok sırayla beyaz ve açık gri (sınıfı PHP verir). */
.atd-hak-blok--acik {
	background: #F7F9FC;
}

/*
 * `konum: 'sag'` VARSAYILANDIR ve ek kural gerektirmez: HTML sırası
 * (metin, görsel) zaten metni 1., görseli 2. sütuna koyar.
 *
 * `konum: 'sol'` yalnız SÜTUNLARI takas eder; HTML sırası DEĞİŞMEZ, yani
 * klavye ve ekran okuyucu her blokta önce başlığı, sonra metni, sonra görseli
 * görür. `grid-row: 1` şart: satır belirtilmezse görsel açıkça 1. sütuna
 * yerleşirken metin otomatik akışta 2. SATIRA düşerdi.
 */
.atd-hak-blok--sol .atd-hak-blok-gorsel {
	grid-column: 1;
	grid-row: 1;
}

.atd-hak-blok--sol .atd-hak-blok-metin {
	grid-column: 2;
	grid-row: 1;
}

/* Başlık — `.atd-hak-hikaye-baslik` ile aynı ölçü; üstünde etiket olmadığı
   için üst payı sıfırdır. */
.atd-hak-blok-baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 700;
	margin: 0 0 18px;
	text-wrap: pretty;
}

/* Paragraflar — `.atd-hak-p` ile aynı ölçü. `wpautop()` `<p>` ürettiği için
   kural doğrudan `p`ye verilir; son paragrafın alt payı sıfırlanır. */
.atd-hak-blok-govde p {
	font-size: 15px;
	line-height: 1.75;
	color: #41506B;
	margin: 0 0 13px;
}

.atd-hak-blok-govde p:last-child {
	margin: 0;
}

/* `<figure>` tarayıcı varsayılanı olarak 40px yan pay taşır; sıfırlanır. */
.atd-hak-blok-gorsel {
	margin: 0;
}

/*
 * Oran KIRPMA BOYUTUYLA DEĞİL CSS ile sabitlenir: `add_image_size()` ile
 * kırpılmış özel bir boyut istemek `srcset`i tek adaya düşürür. Burada
 * çekirdeğin ürettiği ölçekli kopyalar (`srcset`) korunur, kırpmayı
 * `object-fit: cover` yapar.
 *
 * 3 / 2 — varsayılan iki görselin gerçek oranı (1600×1066 ve 1600×1086,
 * ölçüldü: 1,501 ve 1,473). Varsayılanlar bu yüzden neredeyse hiç kırpılmaz;
 * panelden yüklenen başka oranlı bir fotoğraf da aynı orana oturur, yani
 * bloklar arası hiza bozulmaz.
 *
 * `height: auto` + `aspect-ratio`: yükseklik orandan türer. Böylece görsel
 * inmeden önce de yeri ayrılır ve düzen kaymaz (CLS = 0) — tema klasöründen
 * gelen görselde `width`/`height` özniteliği olmadığı için bu şarttır.
 */
.atd-hak-blok-foto {
	width: 100%;
	height: auto;

	/*
	 * ORAN GÖRSELİN KENDİSİNDEN GELİR — KIRPMA YOK (4 Eyl 2026, site sahibi).
	 *
	 * Burada bir süre `aspect-ratio: 3 / 2` + `object-fit: cover` yazıyordu.
	 * Sabit 3/2 kutusu, oranı tutmayan görseli KIRPIYORDU: ölçüldü, ikinci blok
	 * (1600×1086, oran 1,473) 626px genişlikte dikeyde 8px kaybediyordu.
	 *
	 * Artık gerçek oran şablondan `--atd-blok-oran` özel özelliğiyle geliyor
	 * (PHP `getimagesize()` ile ölçüp basıyor). Yedek 3/2'dir: ölçüm bir şekilde
	 * başarısız olursa düzen yine de kaymaz.
	 *
	 * `object-fit: cover` KALDI ama artık hiçbir şeyi kırpmıyor — kutu oranı
	 * görselin oranıyla birebir aynı. Kalması, panelden farklı oranda bir görsel
	 * seçilip oran ölçülemediği durumda görselin ESNEMESİNİ (distort) önler;
	 * esneme kırpmadan kötüdür.
	 */
	aspect-ratio: var(--atd-blok-oran, 3 / 2);
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/*
 * Dar ve ORTA ekran: tek sütun, GÖRSEL ÜSTTE.
 *
 * Kırılım 1279px'tir ve YENİDİR (4 Eyl 2026); önce 699px'ti. Sebep ölçüldü —
 * iki sütun yan yanayken metin ÷ görsel yükseklik oranı:
 *     1080px → 1,65 (TR) / 1,73 (EN)   metin görselden ~210/260px uzun
 *     1200px → 1,40 / 1,48
 *     1280px → 1,31 / 1,38
 *     1366px → 1,09 / 1,23
 * Sütunlar daraldıkça görsel KISALIR (oranı sabit) ama metin UZAR; ikisi ters
 * yönde hareket ettiği için 1280px altında denge kurtarılamıyor. Sütun oranıyla
 * oynamak da işe yaramaz: eşit sütun, iki yüksekliğin çarpımını zaten
 * MAKSİMİZE eder, başka her oran farkı büyütür. Geriye tek çare kalıyor —
 * o genişliklerde yan yana kıyası bitirmek.
 *
 * Tek sütunda görsel ve metin 660px'te durdurulup ORTALANIR. Sebep iki tane:
 * 1279px'lik bir ekranda tam genişlik görsel 1151px'e, yani 767px yüksekliğe
 * çıkardı (ekranı tek başına doldururdu); metin de satır başına 90+ karaktere
 * uzardı. 660px, kırılımın hemen üstündeki sütun genişliğinin (658px) ta
 * kendisidir — geçiş sıçramasız olur.
 *
 * ÜST KOMŞUYLA FARK (bilinçli, ölçüldü): hemen üstteki hikâye bandı bu kırılımı
 * KULLANMAZ — o `repeat(auto-fit, minmax(300px, 1fr))` ile ~716px'e kadar iki
 * sütun kalır. Yani 716–1279px arasında hikâye yan yana dururken blok tek
 * sütuna düşer. Bloklar 4 Eyl 2026'da sayılar bandının önüne taşınınca bu iki
 * bant sırt sırta geldi ve fark görünür oldu (1265px'te bakıldı).
 * Eşitlemek DENENMEDİ, çünkü her iki yön de daha kötü:
 *   - hikâyeyi de 1279'da düşürmek → 1024px'te hikâye görseli tam genişlik ve
 *     `min(560px, 72vw)` yüksekliğiyle ekranı tek başına doldurur;
 *   - blok kırılımını 716'ya indirmek → metin ÷ görsel oranı 1080px'te 1,65'e
 *     çıkar, yani site sahibinin düzelttirdiği dengesizlik geri gelir.
 * İki bandın zemini farklı olduğu için (beyaz → açık gri) aradaki sınır zaten
 * nettir; fark bir dikiş izi değil, bant değişimidir.
 *
 * `order: -1` görseli görsel olarak öne alır ama HTML sırasını değiştirmez.
 * `--sol` blokta önce açık yerleşim (`grid-column`/`grid-row`) SIFIRLANIR:
 * açık yerleşim `order`ı yener, sıfırlanmasa görsel dar ekranda da 1. satırda
 * kalır ama metin onun ÜSTÜNE binerdi.
 */
@media (max-width: 1279px) {
	.atd-hak-blok {
		grid-template-columns: 1fr;
	}

	.atd-hak-blok--sol .atd-hak-blok-gorsel,
	.atd-hak-blok--sol .atd-hak-blok-metin {
		grid-column: auto;
		grid-row: auto;
	}

	.atd-hak-blok-gorsel {
		order: -1;
	}

	.atd-hak-blok-gorsel,
	.atd-hak-blok-metin {
		width: 100%;
		max-width: 660px;
		margin-inline: auto;
	}
}

/* Dar ekran: dikey pay ve boşluk sayfanın geri kalanıyla birlikte küçülür
   (K5: `w < 700`). Sütun düzeni yukarıdaki 1279px kuralından zaten geliyor. */
@media (max-width: 699px) {
	.atd-hak-blok {
		gap: 28px;
		padding: 56px 5%;
	}
}