/* ==========================================================================
   Atelye Deniz — ANA SAYFA parçası (`front-page.php`)
   ==========================================================================

   Kaynak: `.tmp_mobelluks/Anasayfa.dc.html`
   Bu dosyadaki her ölçü, renk ve geçiş değeri prototipin satır içi
   stillerinden **karakter karakter** taşınmıştır (K2). Yuvarlama, sadeleştirme
   veya "daha iyisi" YOKTUR. Prototipte olmayan bir değer eklenmemiştir (K24).

   Ad alanı: `.atd-ana-*` (K10). Başka ön ek KULLANILMAZ.
   Paylaşılan `.atd-ms` ikon sınıfı ve `heroIn1/heroIn2` animasyonları
   `assets/css/temel.css` içindedir; burada yeniden tanımlanmaz.

   --------------------------------------------------------------------------
   DUYARLILIK (K5)
   --------------------------------------------------------------------------
   Prototipte kırılımlar `window.innerWidth` ile JS'te kuruluyordu; burada
   dosyanın en sonundaki `@media` bloklarına birebir çevrildi:

     w < 1000 → (max-width: 999px)   hero noktaları 76px, galeri 2 sütun
     w <  700 → (max-width: 699px)   galeri 1 sütun

   "Neden Biz?" (fotolar) ve "Anahtar Teslim…" (nedenler) bölümlerinin
   `--atd-per` kırılımları — 6/3/1 ve 4/2/1 — bu dosyada DEĞİL,
   `assets/css/parts/ortak.css` içindedir; o iki bölüm artık Hakkımızda
   sayfasında da basılıyor (aşağıdaki 2)+3) açıklamasına bakın).

   Karusel sütun sayısı `--atd-per` özel özelliğiyle verilir; `karusel.js`
   kaydırma miktarını çalışma anında bu değerden okur (K5.1, K17).

   --------------------------------------------------------------------------
   SATIR İÇİ KALAN TEK ŞEY
   --------------------------------------------------------------------------
   Yalnız gerçekten dinamik olan değerler şablonda satır içi kalır (K24'ün
   meşru istisnası): `background-image` (görsel URL'si) ve foto kartlarındaki
   `transform: rotate(<rot>deg)` (veri katmanından gelir).
   ========================================================================== */


/* --------------------------------------------------------------------------
   0) Kök sarmalayıcı — prototip satır 15: <div style="width:100%">
   -------------------------------------------------------------------------- */
.atd-ana {
	width: 100%;

	/* ----------------------------------------------------------------------
	   K20.1 — TÜRETİLMİŞ ARAYÜZ TOKENI
	   ----------------------------------------------------------------------
	   Prototipin renkleri zeminlerde ve dekoratif ögelerde AYNEN kalır; yalnız
	   "bileşenin var olduğunu tek başına anlatan" renk koyulaştırılmıştır,
	   çünkü WCAG 1.4.11'in 3:1 eşiğinin altında:

	     pasif nokta  #C7D2E8 / #FFFFFF = 1.52:1  → #7E8FB8 = 3.23:1
	                  #C7D2E8 / #F7F9FC = 1.44:1  → #7E8FB8 = 3.06:1

	   Noktanın kenarlığı yok; yani TEK görsel bilgi bu renktir. Aktif nokta
	   (#1E3A78, 10.87:1) değişmez. Bu token galeri karuselinin noktaları için
	   burada durur; paylaşılan iki bölüm kendi köklerinde ortak.css'ten alır
	   (o sayfalarda `.atd-ana` kökü bulunmayabilir).

	   `--atd-ana-ok` buradan KALDIRILDI: onu yalnız taşınan iki bölümün ok
	   düğmeleri okuyordu, tanımı artık ortak.css'tedir. */
	--atd-ana-nokta-pasif: #7E8FB8;
}


/* ==========================================================================
   1) HERO SLIDER — prototip satır 18-37 (K18)
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO YÜKSEKLİĞİ — SİTE SAHİBİNİN İSTEĞİYLE BİLİNÇLİ SAPMA (4 Eyl 2026)
   --------------------------------------------------------------------------
   İSTEK: "sliderda görsel kesilmese, tam otursa; gerekirse yüksekliği ona göre
   ayarla — cihazdan cihaza çözünürlüğe göre değişiyor."

   PROTOTİPTEKİ ESKİ DEĞER (Anasayfa.dc.html satır 18):
       height: min(720px,max(340px,58vw));   +   background-size: cover
   Bu ikili görseli KESİYORDU. Ölçüldü (dört slayt da 1024×577 px, oran 1,7747):
       1920 px → kutu 1920×720,   cover ölçeği 1,875 → görsel 1920×1081,9
                 DİKEYDE 361,9 px kırpma
       1440 px → kutu 1440×720,   görsel 1440×811,4 → 91,4 px dikey kırpma
       1024 px → kutu 1024×593,9, görsel 1054×593,9 → 30,0 px YATAY kırpma
        390 px → kutu  390×340,   görsel 603×340    → 213,4 px yatay kırpma
   Yani hiçbir genişlikte görsel tam oturmuyordu.

   YENİ KURGU — İKİ KATMANLI IZGARA YIĞINI (tek hücre, iki öge):
     1) `::before` — görünmez ORAN TABANI. `aspect-ratio: 1024 / 577`
        (görselin gerçek oranı) ile kutuya "en az görselin oranı kadar uzun ol"
        tabanını koyar. `align-self: start` şart: aksi hâlde ızgara ögesi satır
        yüksekliğine gerilir ve oran katkısı hesaba girmez.
     2) `.atd-ana-hero__icerik` — METİN TABANI. Artık `position: absolute`
        DEĞİL, aynı hücrede duran gerçek bir ızgara ögesi. Dikey iç boşluğuyla
        birlikte kendi doğal yüksekliğini satıra dayatır.
   Izgara satırının yüksekliği ikisinin BÜYÜĞÜ olur:
       yükseklik = max( genişlik / 1,7747 ,  metin + nokta payı )
   Böylece "kaç piksel min-height yazsam?" sorusu ORTADAN KALKAR; sınırı
   tarayıcı gerçek metinden hesaplar ve font/dil/panel metni değişse de tutar.

   KESİLMEME GARANTİSİ — `background-size: contain`:
   Oran tabanı yüzünden kutunun oranı hiçbir zaman 1,7747'DEN BÜYÜK olamaz;
   yalnız metin tabanı devreye girdiğinde kutu orandan UZUN olur. Bu yüzden
   `contain` asla sağ/sol bant üretmez — ya birebir doldurur (oran eşitken
   `contain` = `cover`) ya da alt/üst mektup kutusu bırakır. İki durumda da
   kırpma sıfırdır. Mektup kutusu rengi kutunun kendi zemini `#101E44`tür
   (K3 `--atd-gece`, prototipin hero zemininin ta kendisi — yeni renk YOK).

   `overflow: hidden` KALDIRILDI: kutu artık içeriğine göre büyüdüğü için
   kırpacak bir taşma kalmadı; kalsa metin tabanını gizleyebilirdi.
   -------------------------------------------------------------------------- */
.atd-ana-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0,1fr);
	background: #101E44;
}

/* Oran tabanı — görünmez, yalnız satır yüksekliğine katkı verir. */
.atd-ana-hero::before {
	content: "";
	grid-area: 1 / 1;
	align-self: start;
	width: 100%;
	aspect-ratio: 1024 / 577;
}

/* Slayt katmanı — prototip satır 237'deki stil nesnesinin BİREBİR karşılığı:
   tek bir div hem arka planı hem opaklık geçişini taşır. (Metin katmanı bunun
   İÇİNDE değildir; perde/içerik gibi kardeştir — prototip 22-29.)

   `pointer-events: none`: slaytlar salt dekoratif arka plandır, hiçbiri tıklama
   hedefi değildir. Dördü de `position:absolute; inset:0; z-index:1` olduğu için
   eşit z-index'te DOM'da en son duran her zaman en üste boyanır ve `opacity:0`
   isabet testini KAPATMAZ; bu satır olmadan görünmeyen 4. slayt hero'nun tüm
   alanını yutar. `karusel.js` ayrıca pasif slayta `inert` yazar (odak + AT). */
.atd-ana-hero__slayt {
	position: absolute;
	inset: 0;
	/* `cover` → `contain`: KIRPMA YASAĞI (yukarıdaki gerekçe).
	   `no-repeat` şart — `contain` mektup kutusu bıraktığında varsayılan
	   `repeat` görseli ikinci kez döşerdi. */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	transition: opacity .9s ease;
	z-index: 1;
	pointer-events: none;
}

/* Aktif slayt sınıfını `karusel.js` yazar. */
.atd-ana-hero__slayt--aktif {
	opacity: 1;
}

.atd-ana-hero__perde {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,rgba(11,22,52,0.78) 0%,rgba(11,22,52,0.42) 46%,rgba(11,22,52,0.05) 75%);
	z-index: 5;
	pointer-events: none;
}

/* Prototipte `max-width: 820px` (Anasayfa.dc.html satır 23).
   4 Eyl 2026 — site sahibinin isteğiyle 1040px'e genişletildi; bilinçli sapma.

   Gerekçe: başlıklarda `\n` ile ELLE konmuş satır sonları var ve metin
   `white-space: pre-line` ile basılıyor. 820px'lik kapta 5% iç boşluk düşünce
   metin sütunu 1440px ekranda 676px kalıyordu; 54px/800 ağırlıktaki
   "Tarzınıza mükemmel uyum" satırı buna sığmayıp İKİNCİ KEZ sarıyordu
   ("Tarzınıza mükemmel" / "uyum"). Yani elle kurulan satır düzeni bozuluyordu.
   1040px'te sütun 896px olur ve elle konan satır sonları olduğu gibi durur.

   Alt metin kendi `max-width: 680px` sınırını KORUR (prototip satır 25);
   böylece paragraf satırları okunabilir uzunlukta kalır, yalnız başlık genişler. */
/* 4 Eyl 2026 — `position: absolute; inset: 0` KALDIRILDI, öge ızgara yığınının
   ikinci katmanı oldu (yukarıdaki hero açıklamasına bakın). `position: relative`
   korunur: ızgara ögesinin `z-index: 6` değeri ancak konumlandırılmışsa çalışır.

   DİKEY İÇ BOŞLUK — NOKTA/DURAKLAT PAYI (prototipte 0 idi):
   Metin kutuyu artık büyüttüğü için nokta şeridine çarpmaması gerekiyor.
   Noktalar `bottom: 26px` + 10px yüksekliktedir; 52px pay 16px hava bırakır.
   Dar ekranda noktalar 76px'e iner (K5.2) → pay 102px olur (en alttaki @media).
   Pay SİMETRİKTİR: metin geniş ekranda oran tabanı baskın olduğu için tam
   ortada kalmaya devam eder (asimetrik pay onu yukarı kaydırırdı).
   Duraklat düğmesi sağ kenarda 48×48'dir; CTA düğmesi soldan başlar ve
   390px'te bile x=225'te biter (düğme x=318'de başlar) — yatay çakışma yok,
   bu yüzden pay noktalara göre hesaplanır. */
.atd-ana-hero__icerik {
	position: relative;
	grid-area: 1 / 1;
	align-self: center;
	z-index: 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 52px 5%;
	max-width: 1040px;
	box-sizing: border-box;
}

/* Giriş animasyonu gecikmeleri — prototip `anim(0)`, `anim(0.12)`, `anim(0.24)`.
   Animasyonun kendisi (ad/süre/eğri) yalnız JS sınıf ekleyince başlar; bu
   yüzden `animation-delay` ayrı, kısayol DEĞİL uzun yazımla verilir. */
.atd-ana-hero__baslik-kap {
	animation-delay: 0s;
}

.atd-ana-hero__alt-kap {
	animation-delay: 0.12s;
}

.atd-ana-hero__buton-kap {
	animation-delay: 0.24s;
}

/* Tek/çift slayta göre heroIn1 / heroIn2 — sınıfı `karusel.js` yazar. */
.atd-ana-hero__anim--1,
.atd-ana-hero__anim--2 {
	animation-duration: .7s;
	animation-timing-function: cubic-bezier(.22,.8,.3,1);
	animation-fill-mode: both;
}

.atd-ana-hero__anim--1 {
	animation-name: heroIn1;
}

.atd-ana-hero__anim--2 {
	animation-name: heroIn2;
}

/* `white-space: pre-line` — slayt metinlerindeki `\n` KORUNUR (K18). */
.atd-ana-hero__baslik {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(30px,4.6vw,54px);
	font-weight: 800;
	line-height: 1.24;
	color: #FFFFFF;
	margin: 0 0 14px;
	white-space: pre-line;
}

.atd-ana-hero__alt {
	font-family: 'Manrope', sans-serif;
	font-size: clamp(17px,2.1vw,27px);
	font-weight: 400;
	line-height: 1.42;
	color: rgba(255,255,255,0.95);
	margin: 0 0 30px;
	max-width: 680px;
	white-space: pre-line;
}

.atd-ana-hero__butonlar {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.atd-ana-hero__cta {
	background: #FFFFFF;
	color: #16295A;
	font-size: 14px;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 4px;
	letter-spacing: 0.3px;
}

.atd-ana-hero__cta:hover {
	background: #E8EEFA;
	color: #16295A;
}

/* Hero ok düğmeleri (prototip satır 30-31) KALDIRILDI — 4 Eyl 2026,
   site sahibinin isteği. Kaldırılan kurallar: `.atd-ana-hero__ok`,
   `--geri`, `--ileri`, `:hover`.

   Gerekçe: alttaki noktalar hem gezinme hem konum göstergesi olarak zaten
   yeterli; oklar dar ekranda başlığın son satırının üstüne biniyordu
   (ölçüldü: 360/390/414 px'te 48×16-22 px çakışma).

   Bilinçli prototip sapmasıdır. Erişilebilirlik kaybı yok: noktalar gerçek
   <button>, aria-label taşıyor ve `karusel.js` aktif olana `aria-current`
   yazıyor (noktaDurumu(), satır 350). Duraklat/oynat düğmesi yerinde durduğu
   için WCAG 2.2.2 karşılanmaya devam ediyor. Betikteki ok dinleyicileri
   null-korumalı (`if ( geriDugmesi )`), düğme yokken sessizce atlanır. */

/* `dotsWrapStyle` — `bottom` kırılımda 76px olur (K5.2, en alttaki @media). */
.atd-ana-hero__noktalar {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 7;
	display: flex;
	gap: 10px;
}

/* Hero noktaları 34px/10px — karusel noktalarıyla (26px/9px) KARIŞTIRILMAZ. */
.atd-ana-hero__nokta {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	background: rgba(255,255,255,0.45);
	transition: all .3s ease;
	padding: 0;
}

.atd-ana-hero__nokta--aktif {
	width: 34px;
	background: #FFFFFF;
}

/* --------------------------------------------------------------------------
   DOKUNMA HEDEFİ (WCAG 2.5.8) — görünen nokta ölçüsü DEĞİŞMEZ
   --------------------------------------------------------------------------
   10px/9px'lik noktalara dokunmakla isabet etmek çok zor. İsabet alanı görünmez
   bir sözde-öge ile büyütülür; `.atd-ana-hero__noktalar` / `.atd-ana-noktalar`
   `display:flex` olduğu için yerleşim etkilenmez.

   Genişlik bilerek `100% + gap` ile SINIRLANIR (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ı — düzeltilen hatanın
   aynısı. Kalan boşluğu WCAG 2.5.8'in "Eşdeğer" istisnası kapatır: aynı işlevi
   veren ok düğmeleri 48×48 (hero), 46×46 (galeri) ve 44×44'tür (aşağıya bakın).
   -------------------------------------------------------------------------- */
.atd-ana-hero__nokta::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(100% + 10px);
	height: 44px;
	transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   DURAKLAT / OYNAT (WCAG 2.2.2, A seviyesi) — KOŞULLU SAPMA (R1)
   --------------------------------------------------------------------------
   6 saniyede bir kendiliğinden ilerleyen hero için durdurma denetimi zorunlu.
   Prototipte yoktur; K24'ün bilinçli ve en küçük istisnasıdır. TÜM görsel
   değerler hero oklarından (prototip 30-31) birebir alınmıştır: 48px, %50
   yarıçap, `1px solid rgba(255,255,255,0.4)`, `rgba(255,255,255,0.08)` zemin,
   `#FFFFFF` renk ve `rgba(255,255,255,0.22)` hover. Konumu noktalarla aynı
   dikey hizadadır (`bottom: 26px`, dar ekranda 76px — K5.2).

   KOŞUL: `front-page.php` bu düğmeyi YALNIZ panelin `slayt_oto` ayarı açıkken
   basar. Ayar kapatıldığında hero kendiliğinden ilerlemez, 2.2.2 hiç devreye
   girmez ve işaretleme hiç üretilmez — aşağıdaki kurallar eşleşecek öge
   bulamaz. Kurallar `position: absolute` olduğu için düğme basıldığında bile
   akışta yer kaplamaz; basılmadığında hero KUTU KUTU prototiple aynıdır
   (kap ölçüsü, nokta hizası ve ok konumları hiç etkilenmez).
   Bu kuralları silmek/`display:none` etmek GEREKMEZ; koşul PHP tarafındadır.
   -------------------------------------------------------------------------- */
.atd-ana-hero__durakla {
	position: absolute;
	right: 24px;
	bottom: 26px;
	z-index: 7;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(255,255,255,0.08);
	color: #FFFFFF;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.atd-ana-hero__durakla:hover {
	background: rgba(255,255,255,0.22);
}

/* İkon saf CSS'tir: Material Symbols alt kümesine (K4.3) yeni glif eklemez ve
   metin fontunda bulunmayan bir işarete bağımlı kalmaz. Duraklat = iki çubuk. */
.atd-ana-hero__durakla-ikon {
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 14px;
	border-left: 4px solid #FFFFFF;
	border-right: 4px solid #FFFFFF;
}

/* Duraklatılmışken oynat üçgeni (durum ayrıca `aria-pressed` ile bildirilir). */
.atd-ana-hero__durakla[aria-pressed="true"] .atd-ana-hero__durakla-ikon {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-left: 12px solid #FFFFFF;
	border-right: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}


/* ==========================================================================
   2) + 3) PAYLAŞILAN BÖLÜMLER — BU DOSYADAN TAŞINDI
   ==========================================================================
   "Neden Biz?" foto karuseli (prototip 39-65) ve "Anahtar Teslim…" neden
   karuseli (prototip 67-93) artık iki sayfada birden görünüyor
   (`front-page.php` + `page-hakkimizda.php`), bu yüzden hem işaretlemeleri
   hem stilleri paylaşılan dosyalara ÇIKARILDI:

     template-parts/bolum-neden-biz.php  +  template-parts/bolum-nedenler.php
     assets/css/parts/ortak.css          ← `.atd-ana-fotolar*`, `.atd-ana-nedenler*`,
                                           `.atd-ana-ayrac*`, nokta TABAN kuralları
                                           ve onların `--atd-per` kırılımları

   Kopyalanmadı, TAŞINDI: bu dosyada o iki bölüme ait TEK kural kalmamıştır.
   Nokta tabanı (`.atd-ana-noktalar`, `.atd-ana-nokta` ve dokunma hedefi) de
   ortak.css'e geçti, çünkü Hakkımızda sayfasında da gerekiyor; burada yalnız
   galeri karuselinin konum değiştiricisi kaldı.

   Ana sayfanın BÖLÜM SIRASI değişmedi: hero → Neden Biz? → Anahtar Teslim →
   prestij → galeri → hakkımızda şeridi → koyu CTA.
   ========================================================================== */

/* Galeri karuselinin nokta şeridi — taban kurallar ortak.css'tedir. */
.atd-ana-noktalar--galeri {
	margin-top: 28px;
}


/* ==========================================================================
   4) Prestij kutusu + tanıtım videosu (prototip satır 95-103, K19)
   ========================================================================== */

.atd-ana-prestij {
	padding: 0 4% 84px;
	background: #FFFFFF;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 36px;
	align-items: stretch;
}

/* --------------------------------------------------------------------------
   PRESTİJ KUTUSU — SİTE SAHİBİNİN İSTEĞİYLE ÜÇ SAPMA (4 Eyl 2026)
   --------------------------------------------------------------------------
   İSTEK: "Prestij ve Görünürlük / Ticaret Hesapları kalın olsun ve yukarıda
   olsun, ayrıca çerçeve kalın olsun."

   1) ÇERÇEVE  — prototipteki eski değer: `border: 2px solid #1E3A78`
                 yeni değer:               `border: 4px solid #1E3A78`
      Renk DEĞİŞMEDİ (K3 `--atd-mavi`); yalnız kalınlık iki katına çıktı.
      3px denendi ama 2px'ten ayırt edilemiyordu (1 px fark); 4px kutuyu
      sayfadaki tek "çerçeveli kart" olarak açıkça ayırıyor. Daha kalını
      (6px+) temanın 1–2px'lik çizgi ailesinden (K3 `--atd-cizgi*`) kopardı.
      Kutu yüksekliği değişmez: kenarlık `box-sizing: border-box` altında
      ızgara hücresinin içinde kalır, komşu videoyla hizası bozulmaz.

   2) HİZA     — eski: `justify-content: center` (metin dikey ORTADA)
                 yeni: `justify-content: flex-start` (YUKARIDAN başlar)
      Kutu, yanındaki videoyla aynı yüksekliğe geriliyor (`align-items:
      stretch`); ortalanınca başlık videonun ortasından aşağıda kalıyordu.
      Ölçüldü: 1920px'te ilk başlığın kutu üstüne uzaklığı 138,6 px idi.

   3) BAŞLIK AĞIRLIĞI — eski: `font-weight: 700` / yeni: `font-weight: 800`
      Playfair Display bu temada DEĞİŞKEN eksenli gömülüdür (`temel.css`,
      `font-weight: 400 900`), yani 800 gerçek bir eksen değeridir; sahte
      kalınlaştırma yoktur (`font-synthesis: none` zaten yasaklıyor).
      900 seçilmedi: aynı sayfadaki öteki serif başlıklar 700'de duruyor ve
      900 onlarla arasında tipografik kopukluk yaratırdı.
   -------------------------------------------------------------------------- */
.atd-ana-prestij__kutu {
	border: 4px solid #1E3A78;
	padding: 42px 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.atd-ana-prestij__baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(21px,2.6vw,26px);
	font-weight: 800;
	margin: 0 0 12px;
}

.atd-ana-prestij__metin {
	font-size: 14.5px;
	line-height: 1.8;
	color: #41506B;
	margin: 0 0 30px;
}

.atd-ana-prestij__metin--son {
	margin: 0;
}

/*
 * KUTU YÜKSEKLİĞİ SABİT (4 Eyl 2026).
 *
 * Burada `height: 100%` + `min-height` yazıyordu. Video OYNARKEN sorun
 * yoktu, ama oynamadığı durumda (`prefers-reduced-motion: reduce`, ya da
 * dosya henüz inmemişken) `height: 100%` çözülemiyor ve videonun DOĞAL
 * boyu devreye giriyordu: ölçüldü, kutu 638×420 yerine 638×991 oluyor,
 * yanındaki metin sütunu bitiyor ve sağda upuzun bir görsel kalıyordu.
 *
 * Yükseklik artık duruma bakmaksızın aynı; `object-fit: cover` videoyu o
 * kutuya oturtur.
 */
.atd-ana-prestij__video {
	width: 100%;
	height: min(420px,60vw);
	object-fit: cover;
	display: block;
	background: #101E44;
}

/* --------------------------------------------------------------------------
   VİDEO OYNATICI KABI + ÖZEL DURAKLAT/OYNAT (4 Eyl 2026)
   --------------------------------------------------------------------------
   İSTEK: "video oto oynasın, kontrolleri göstermesek." Native `controls`
   kaldırıldı; WCAG 2.2.2 (A) yine de 10 saniyelik, `loop` ile sonsuz süren ve
   kendiliğinden başlayan hareket için DURDURMA denetimi şart koşar.

   Kap yalnız konumlandırma içindir: `<video>` içine öge alamaz. Kabın kendi
   ölçüsü yoktur — ızgara hücresini video ile aynı biçimde doldurur, bu yüzden
   bölümün yüksekliği bir piksel bile değişmez.

   Düğmenin GÖRSEL DEĞERLERİ hero'daki `.atd-ana-hero__durakla` ile BİREBİR
   aynıdır (48px, %50 yarıçap, `1px solid rgba(255,255,255,0.4)`,
   `rgba(255,255,255,0.08)` zemin, `#FFFFFF` renk, `rgba(255,255,255,0.22)`
   hover, 12×14px ikon). Yeni bir ölçü/renk uydurulmadı.

   TEK FARK KONUM: hero'da düğme nokta şeridiyle hizalı olsun diye
   `right:24px; bottom:26px` idi. Videoda nokta şeridi yoktur; simetrik 16px
   kenar boşluğu kullanılır — 26px, altında hiçbir şey olmayan bir kutuda
   asimetrik görünüyordu.
   -------------------------------------------------------------------------- */
.atd-ana-prestij__oynatici {
	position: relative;
	display: block;
}

.atd-ana-prestij__durakla {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.4);
	background: rgba(255,255,255,0.08);
	color: #FFFFFF;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Video karesi açık renkli olabilir; düğme her karede seçilebilsin diye
	   hero'da olmayan tek ek: yumuşak bir dış gölge. Renk paleti değişmedi. */
	box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.atd-ana-prestij__durakla:hover {
	background: rgba(255,255,255,0.22);
}

/* İkon saf CSS'tir (K4.3 font alt kümesine glif eklemez). Duraklat = iki çubuk. */
.atd-ana-prestij__durakla-ikon {
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 14px;
	border-left: 4px solid #FFFFFF;
	border-right: 4px solid #FFFFFF;
}

/* Duraklatılmışken oynat üçgeni (durum ayrıca `aria-pressed` ile bildirilir). */
.atd-ana-prestij__durakla[aria-pressed="true"] .atd-ana-prestij__durakla-ikon {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-left: 12px solid #FFFFFF;
	border-right: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}


/* ==========================================================================
   5) "Neler Yapıyoruz?" — sekmeli galeri karuseli (prototip satır 105-133)
   ========================================================================== */

.atd-ana-galeri {
	padding: 76px 0 84px;
	background: #F7F9FC;
}

.atd-ana-galeri__baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(28px,4.6vw,40px);
	font-weight: 700;
	text-align: center;
	margin: 0 0 34px;
}

/* Sekmeler prototipte <button>; üretimde JS'siz de çalışsın diye bir GET
   formunun gönderim düğmeleridir. Görsel değerler aynen korunur. */
.atd-ana-galeri__sekmeler {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 26px;
	padding: 0 4%;
	margin-bottom: 38px;
}

.atd-ana-galeri__sekme {
	border: none;
	background: transparent;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 600;
	padding: 8px 2px;
	color: #14213D;
	box-shadow: none;
	transition: color .15s ease;
}

.atd-ana-galeri__sekme--aktif {
	font-weight: 800;
	color: #1E3A78;
	box-shadow: inset 0 -2px 0 #1E3A78;
}

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

.atd-ana-galeri__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid #D6DEED;
	background: #FFFFFF;
	color: #1E3A78;
	font-size: 19px;
	cursor: pointer;
	z-index: 2;
}

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

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

.atd-ana-galeri__ok:hover {
	background: #1E3A78;
	color: #FFFFFF;
}

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

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

.atd-ana-galeri__kart {
	flex: 0 0 calc(100% / var(--atd-per));
	box-sizing: border-box;
	padding: 0 9px;
	display: block;
}

.atd-ana-galeri__gorsel {
	width: 100%;
	height: min(190px,44vw);
	border-radius: 18px;
	background-size: cover;
	background-position: center;
}

.atd-ana-galeri__alt {
	text-align: center;
	margin-top: 26px;
}

.atd-ana-galeri__cta {
	display: inline-block;
	background: #1E3A78;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	padding: 14px 30px;
	border-radius: 4px;
}

.atd-ana-galeri__cta:hover {
	background: #16295A;
	color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   Buton içi Material Symbols ikonları (font ailesi `.atd-ms` içinde).
   -------------------------------------------------------------------------- */
.atd-ana-ikon--sag {
	font-size: 18px;
	vertical-align: -4px;
	margin-left: 6px;
}

.atd-ana-ikon--sol {
	font-size: 18px;
	vertical-align: -4px;
	margin-right: 8px;
}


/* ==========================================================================
   6) Hakkımızda şeridi (prototip satır 135-146)
   ========================================================================== */

.atd-ana-hakkimizda {
	padding: 84px 5%;
	background: #F7F9FC;
}

.atd-ana-hakkimizda__izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 44px;
	align-items: center;
}

.atd-ana-hakkimizda__gorsel {
	width: 100%;
	height: min(420px,60vw);
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.atd-ana-hakkimizda__ustluk {
	color: #1E3A78;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 3px;
}

.atd-ana-hakkimizda__baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px,4vw,36px);
	font-weight: 700;
	margin: 12px 0 18px;
	text-wrap: pretty;
}

.atd-ana-hakkimizda__metin {
	font-size: 15.5px;
	line-height: 1.75;
	color: #41506B;
	margin: 0 0 14px;
}

.atd-ana-hakkimizda__metin--son {
	margin: 0 0 26px;
}

.atd-ana-hakkimizda__cta {
	display: inline-block;
	background: #1E3A78;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 4px;
}

.atd-ana-hakkimizda__cta:hover {
	background: #16295A;
	color: #FFFFFF;
}


/* ==========================================================================
   7) Koyu CTA şeridi (prototip satır 148-157)
   ========================================================================== */

.atd-ana-cta {
	background: #101E44;
	color: #FFFFFF;
	padding: 64px 5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.atd-ana-cta__baslik {
	font-family: 'Playfair Display', serif;
	font-size: clamp(24px,3.6vw,32px);
	font-weight: 700;
	margin: 0 0 8px;
}

.atd-ana-cta__metin {
	font-size: 15px;
	color: #B9C6E4;
	margin: 0;
}

.atd-ana-cta__butonlar {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.atd-ana-cta__birincil {
	background: #FFFFFF;
	color: #16295A;
	font-size: 14px;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 4px;
}

.atd-ana-cta__birincil:hover {
	background: #E8EEFA;
	color: #16295A;
}

.atd-ana-cta__ikincil {
	border: 1px solid rgba(255,255,255,0.5);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 4px;
}

.atd-ana-cta__ikincil:hover {
	background: rgba(255,255,255,0.1);
	color: #FFFFFF;
}


/* ==========================================================================
   8) KIRILIMLAR (K5) — prototipteki JS koşullarının birebir karşılığı
   ========================================================================== */

/* w < 1000 */
@media (max-width: 999px) {
	.atd-ana-hero__noktalar {
		bottom: 76px;
	}

	.atd-ana-hero__durakla {
		bottom: 76px;
	}

	/* ----------------------------------------------------------------------
	   DAR EKRAN — MEKTUP KUTUSU DAVRANIŞI (4 Eyl 2026, kırpma yasağının eki)
	   ----------------------------------------------------------------------
	   Bu kırılımda metin tabanı oran tabanını GEÇER (ölçüldü: 390px'te oran
	   yüksekliği 219,8 px, metin + pay ise 518 px). Kutu orandan uzun olduğu
	   için `contain` alt/üst bant bırakır — kırpma yine SIFIRDIR.
	   İki küçük ayar bandı kasıtlı gösterir:
	     • Nokta payı 26 → 76 px olduğu için iç boşluk da 52 → 102 px.
	     • Görsel `center top`a çekilir: bant TEK PARÇA hâlde altta toplanır.
	       `center` bırakılsaydı hem üstte hem altta bant çıkar, kusur gibi
	       görünürdü; üste yaslanınca fotoğraf–metin sırası doğal olur.
	   ---------------------------------------------------------------------- */
	.atd-ana-hero__icerik {
		padding-top: 102px;
		padding-bottom: 102px;
	}

	.atd-ana-hero__slayt {
		background-position: center top;
	}

	/* ----------------------------------------------------------------------
	   HERO PERDESİ — DAR EKRAN (R2): SAPMA DEĞİL, TANIMSIZ ALANIN DOLDURULMASI
	   ----------------------------------------------------------------------
	   NEDEN BU BİR SAPMA DEĞİL:
	   Prototip dosyasında (`.tmp_mobelluks/Anasayfa.dc.html`) `@media` kuralı
	   HİÇ YOKTUR — doğrulandı: `grep -c "@media" Anasayfa.dc.html` → 0.
	   Prototipin duyarlılığı `window.innerWidth` ile JS'te kurulur ve o mantık
	   yalnız karusel sütun sayısını (`nPer`/`gPer`/`pPer`) ve nokta konumunu
	   (`dotsWrapStyle.bottom`) belirler; hero PERDESİ için dar ekrana ait
	   HİÇBİR değer tanımlamaz. Yani bu kırılımdaki perde görünümü prototipte
	   TANIMSIZDIR. Burada tanımlı bir değeri değiştirmiyoruz; tanımsız bir
	   alanı, prototipin kendi renk ailesiyle dolduruyoruz (K30).

	   ÖLÇÜLEN ORAN (neden doldurmak zorundayız):
	   Prototipin tek perdesi YATAY gradyandır ve %75'ten sonra alfa 0.05'e
	   düşer. Dar ekranda metin sütunu görünüm alanının tamamını kaplayıp
	   gradyanın saydam ucuna taşar. Gerçek slayt JPEG'leri örneklenerek
	   400×340'ta ölçüldü: beyaz metnin kontrastı 1.11:1'e kadar iniyor
	   (üst sınır 1.77:1). Alt metin bu kırılımda 17px, yani NORMAL metindir →
	   WCAG 1.4.3 AA için 4.5:1 gerekir. 1.11:1 açık ihlaldir.

	   YAPILAN EN KÜÇÜK MÜDAHALE:
	   Yalnız bu kırılımda perde dikey/koyu tabana çevrilir. Marka ve prototip
	   renk ailesi (`rgba(11,22,52,…)`) AYNEN korunur; değişen tek şey yön ve
	   alfa. Denetim: alfa 0.55'te tamamen beyaz fotoğraf üstünde bile 4.01:1;
	   metin bandının denk geldiği alt yarıda alfa 0.78 → 8.92:1.

	   MASAÜSTÜ BİREBİRLİĞİ (min-width: 1000px) — DOĞRULANDI:
	   Aşağıdaki kural `@media (max-width: 999px)` içindedir; 1000px ve üstünde
	   HİÇ uygulanmaz. O genişliklerde yürürlükte kalan tek kural bu dosyanın
	   başındaki temel `.atd-ana-hero__perde` bildirimidir ve değeri prototip
	   satır 22 ile karakter karakter aynıdır:
	     linear-gradient(90deg,rgba(11,22,52,0.78) 0%,rgba(11,22,52,0.42) 46%,rgba(11,22,52,0.05) 75%)
	   Metin sütunu masaüstünde `max-width: 820px` ile gradyanın koyu ucunda
	   kaldığı için orada kontrast sorunu ZATEN yoktur; bu yüzden masaüstünde
	   tek bir değere bile dokunulmamıştır.
	   ---------------------------------------------------------------------- */
	.atd-ana-hero__perde {
		background: linear-gradient(180deg,rgba(11,22,52,0.55) 0%,rgba(11,22,52,0.78) 100%);
	}

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

/* w < 700 */
@media (max-width: 699px) {
	.atd-ana-galeri__ray {
		--atd-per: 1;
	}
}


/* ==========================================================================
   9) AZALTILMIŞ HAREKET (WCAG 2.3.3)
   ==========================================================================
   Ana sayfanın en ağır hareketleri (hero giriş animasyonu, otomatik oynatma,
   karusel ray kaydırması) `karusel.js` içindeki `azHareket()` denetimiyle
   zaten kapanıyor. Burada bu parçanın CSS tarafında kalan geçişleri
   susturulur. Değerler yalnız bu medya sorgusunda geçerlidir; varsayılan
   görünüm ve prototip değerleri etkilenmez. `!important` kullanılmaz —
   kurallar aynı özgüllükte ve DOSYANIN SONUNDA olduğu için zaten kazanır.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.atd-ana-hero__slayt,
	.atd-ana-hero__nokta,
	.atd-ana-galeri__sekme {
		transition: none;
	}

	.atd-ana-hero__anim--1,
	.atd-ana-hero__anim--2 {
		animation: none;
	}
}