/* ==========================================================================
   Atelye Deniz — üst bölüm stili
   ==========================================================================

   Kaynak prototip: `.tmp_mobelluks/SiteHeader.dc.html`
   Ad alanı (K10): YALNIZ `.atd-ust-*`. Başka ön ekle sınıf YOKTUR.

   Prototipin tüm stilleri satır içidir; buradaki her değer o satır içi
   bloklardan ve `renderVals()` içindeki stil nesnelerinden KARAKTER KARAKTER
   taşınmıştır (K2). Yuvarlama, sadeleştirme veya "iyileştirme" yapılmamıştır.
   Her kuralın yanında prototipteki satır numarası verilmiştir.

   Duyarlılık (K5): prototipte `window.innerWidth < 1000` ile JS'te kurulur;
   burada `@media (max-width: 999px)` kuralına çevrilmiştir. Masaüstü gezinme
   ile mobil menü arasındaki geçiş TAMAMEN CSS iledir, JS ile DEĞİL.

   Renkler `assets/css/temel.css` içindeki `:root` değişkenleriyle birebir
   aynıdır; birebirlik denetimi kolay olsun diye burada prototipteki HAM
   onaltılık değerler yazılmıştır.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0) Atlama bağlantısı — D7-06 (WCAG 2.4.1 "Blokları Atlama", A seviyesi)
   --------------------------------------------------------------------------
   Prototipte yoktur; K20'nin ("erişilebilirlik ve işaretleme") gereğidir.
   Ekranda YALNIZ klavye odağı aldığında görünür, dolayısıyla prototiple görsel
   fark üretmez. Ad alanı K10 gereği `.atd-ust-*`tır (paylaşılan `temel.css`
   başka ajanın sahipliğindedir, oraya yazılmaz).
   Renkler K3 paletinden: zemin #FFFFFF, metin #1E3A78 (10.87:1).
   -------------------------------------------------------------------------- */
.atd-ust-atla {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: #FFFFFF;
	color: #1E3A78;
	font-family: 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 18px;
	border-radius: 0 0 4px 0;
}

.atd-ust-atla:focus {
	left: 0;
	outline: 2px solid #1E3A78;
	outline-offset: -2px;
}

/* Atlama bağlantısının hedefi, 84px'lik yapışkan çubuğun altında kalmasın.
   Yalnız `main` sınır işaretine uygulanır; hiçbir görsel değer değiştirmez. */
main[id] {
	scroll-margin-top: 84px;
}


/* --------------------------------------------------------------------------
   1) Yapışkan üst çubuk — prototip satır 15-16
   -------------------------------------------------------------------------- */

/* satır 15 */
.atd-ust {
	position: sticky;
	top: 0;
	z-index: 80;
	background: #FFFFFF;
	border-bottom: 1px solid #E5EAF3;
}

/* satır 16 */
.atd-ust-cubuk {
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 0 4%;
}

/* satır 17 */
.atd-ust-logo {
	display: flex;
	align-items: center;
	flex: none;
}

/* satır 18 */
.atd-ust-logo__gorsel {
	height: 64px;
	display: block;
}


/* --------------------------------------------------------------------------
   2) Masaüstü gezinme — prototip satır 21 + renderVals() 118-119
   -------------------------------------------------------------------------- */

/* satır 21.
   `align-self: stretch` prototipte YOKTUR; D8-02 için eklendi. Görsel etkisi
   sıfırdır: kap `.atd-ust-cubuk` zaten 84px yüksekliğinde ve nav kendi
   çocuklarını `align-items: center` ile dikey ortalamayı sürdürüyor. Tek
   değişen, nav'ın hizalama kutusunun 84px'e yayılmasıdır (bkz. `.atd-ust-mega`). */
.atd-ust-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex: 1;
	align-self: stretch;
}

/* renderVals() 118 — `base` */
.atd-ust-baglanti {
	font-size: 15px;
	font-weight: 700;
	color: #14213D;
	padding: 6px 0;
	white-space: nowrap;
}

/* renderVals() 119 — `act` (base üzerine yazar) */
.atd-ust-baglanti--aktif {
	color: #1E3A78;
	font-weight: 800;
	box-shadow: inset 0 -2px 0 #1E3A78;
}

/* satır 26 — "Neler Yapıyoruz" yanındaki ▾ işareti */
.atd-ust-ok {
	font-size: 10px;
	position: relative;
	top: -1px;
}


/* --------------------------------------------------------------------------
   3) Mega menü — prototip satır 25-40 + renderVals() 146-153 (`megaStyle`)
   -------------------------------------------------------------------------- */

/* satır 25 — sarmalayıcı; prototipte stil taşımaz, yalnız fare/odak kapısıdır.
   D8-02 (BLOKE EDİCİ): prototipte sarmalayıcı yalnız bağlantı kadar yüksekti
   (alt kenarı 53px) ama panel `top: 84px`ten başlıyor → aralarında 31px'lik ÖLÜ
   BÖLGE kalıyordu. Fare orada ~180ms (geçiş süresi .18s) kalınca `mouseleave`
   paneli `visibility: hidden` yapıyor, panel isabet testine girmediği için de
   bir daha açılmıyordu. Aşağıdaki üç bildirim boşluğu KÖPRÜYE çevirir:
   sarmalayıcının alt kenarı panelin üst kenarına (84px) değer, fare kesintisiz
   geçer. GÖRSEL DEĞİŞİKLİK YOKTUR — bağlantı `align-items: center` ile eskisi
   gibi dikey ortada kalır, hiçbir prototip ölçüsü değişmez. */
.atd-ust-mega {
	align-self: stretch;
	display: flex;
	align-items: center;
}

/* renderVals() 146-153 — kapalı durum */
.atd-ust-mega-panel {
	position: fixed;
	left: 0;
	right: 0;
	top: 84px;
	background: #FFFFFF;
	border-top: 1px solid #E5EAF3;
	box-shadow: 0 24px 48px rgba(16, 30, 68, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: all .18s ease;
	z-index: 70;
}

/* renderVals() 150-151 — açık durum.

   D8-01 (BLOKE EDİCİ, NİHAİ) — GÖRÜNÜRLÜĞÜN TEK OTORİTESİ.
   Önceki sürümde panelin görünürlüğünü İKİ otorite sürüyordu: burada
   `:hover`/`:focus-within`, `tema.js`te ise `--acik` sınıfı. İkisi aynı anda
   doğru olmadığı için fare yolu kopuyordu (YD1 ölçümü s3): Escape kapatıyor,
   fare çıkınca kilit sınıfı kalkıyor, ama odak tetikleyicide kaldığı için
   `:focus-within` paneli ANINDA geri açıyordu — `aria-expanded="false"` iken
   panel 221px yüksekliğinde ekranda kalıyordu.

   Artık `tema.js` kurulur kurulmaz sarmalayıcıya `atd-ust-mega--js` yazar ve
   `:hover`/`:focus-within` kuralları `:not(.atd-ust-mega--js)` ile devre dışı
   kalır; görünürlüğü YALNIZ `atd-ust-mega-panel--acik` sınıfı sürer.
   `:hover`/`:focus-within` yedeği BİLEREK bırakılmıştır: betik yüklenemezse
   (JS kapalı/hata) mega menüdeki 10 kategori bağlantısı bütünüyle erişilemez
   olurdu. Prototipte de menü JS olaylarıyla açılır (`megaAc`/`megaKapa`),
   dolayısıyla betikli yolda davranış prototiple birebir aynıdır; görsel
   değerlerin hiçbiri değişmemiştir. */
.atd-ust-mega:not(.atd-ust-mega--js):hover .atd-ust-mega-panel,
.atd-ust-mega:not(.atd-ust-mega--js):focus-within .atd-ust-mega-panel,
.atd-ust-mega-panel--acik {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* satır 28 */
.atd-ust-mega-izgara {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px 22px;
	padding: 26px 4%;
}

/* satır 30 */
.atd-ust-mega-oge {
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 9px;
	border-radius: 8px;
	color: #14213D;
}

/* satır 30 — style-hover */
.atd-ust-mega-oge:hover {
	background: #F0F4FB;
	color: #14213D;
}

/* satır 31 */
.atd-ust-mega-gorsel {
	width: 58px;
	height: 58px;
	object-fit: cover;
	border-radius: 6px;
	flex: none;
	display: block;
}

/* satır 32 */
.atd-ust-mega-metin {
	display: block;
}

/* satır 33 */
.atd-ust-mega-ad {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
}

/* satır 34 */
.atd-ust-mega-desc {
	display: block;
	font-size: 12.5px;
	color: #5B6B85;
	line-height: 1.4;
	margin-top: 3px;
}


/* --------------------------------------------------------------------------
   4) Sağdaki eylem kutusu — prototip satır 45-50
   -------------------------------------------------------------------------- */

/* satır 45 */
.atd-ust-aksiyon {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

/* satır 46 */
.atd-ust-insta {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #DDE4F0;
	border-radius: 50%;
	color: #1E3A78;
}

/* 4 Eyl 2026 — "ikon belli olmuyor". Dinlenme durumunda daire bembeyazdı;
   degradenin sol-alt açık tonları beyazda eriyor, ikon 42px'lik boş bir
   halkanın ortasında kayboluyordu.

   Düğmeye degradenin KENDİSİNİN çok düşük saydamlıktaki hâli zemin olarak
   verildi (alfa .10–.18). Bu, düğmeyi uzaktan "Instagram rengi" bir çip
   yapar — asıl keşfedilebilirlik kazancı buradan gelir — ama ikonun
   çizgileriyle arasında ton farkı bırakacak kadar hafiftir.

   Ölçüler `atd-ust-insta:hover` kuralındaki degradeyle aynı eksen/duraklarda
   tutuldu ki hover'a geçiş renk sıçraması gibi değil, aynı zeminin
   koyulaşması gibi okunsun. Hover davranışı DEĞİŞMEDİ: kural aşağıda gelir
   ve hem `background` hem `border-color` değerini ezer. */
.atd-ust-insta {
	background: radial-gradient(circle at 30% 107%, rgba(254, 218, 117, 0.18) 0%, rgba(254, 218, 117, 0.18) 5%, rgba(253, 89, 73, 0.15) 45%, rgba(214, 36, 159, 0.13) 60%, rgba(40, 90, 235, 0.10) 90%);
	border-color: #E7D6E7;
}

/* Instagram logosu RENKLİ — site sahibinin isteği, 4 Eyl 2026.
   Prototipte tek renkli (`currentColor`) bir çizgi ikondu; bilinçli sapma.

   Boyama CSS'ten yapılır, SVG özniteliğinden değil: CSS `stroke`/`fill`
   sunum özniteliğini ezer, böylece hover'da beyaza dönmek tek satır olur.

   `url(#…) #1E3A78` — ikinci değer YEDEK renktir. Degrade tanımı bir şekilde
   basılmazsa (ör. şablon parçası ayrı render edilirse) ikon boyasız kalıp
   GÖRÜNMEZ olurdu; yedek onu marka mavisiyle çizer. */
.atd-ust-insta svg rect,
.atd-ust-insta svg circle,
.atd-ust-mobil-insta svg rect,
.atd-ust-mobil-insta svg circle {
	stroke: url(#atd-insta-gradyan) #1E3A78;
}

/* Sağ üstteki dolu nokta çizgiyle değil dolguyla boyanır. */
.atd-ust-insta svg circle[fill],
.atd-ust-mobil-insta svg circle[fill] {
	fill: url(#atd-insta-gradyan) #1E3A78;
}

/* satır 46 — style-hover.
   Renkli logo üstüne lacivert dolgu koymak logoyu boğardı; onun yerine
   düğmenin KENDİSİ Instagram degradesine dönüyor, ikon beyaza çekiliyor.
   Beyaz ikon degrade üstünde her durakta okunur. */
/* 4 Eyl 2026 — ilk durak `#FDF497` yerine `#FEDA75`. İki gerekçe:
   (1) SVG tanımındaki degrade de aynı tona çekildi (header.php); üç degrade
       (dinlenme zemini, hover zemini, ikonun kendi boyası) tek rampada olmalı.
   (2) Hover'da ikon BEYAZ. Beyaz `#FDF497` üstünde 1.13:1 verir — sol-alt
       köşede ikonun kendisi kayboluyordu. `#FEDA75` ile 1.36:1. */
.atd-ust-insta:hover {
	background: radial-gradient(circle at 30% 107%, #FEDA75 0%, #FEDA75 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
	border-color: transparent;
}

.atd-ust-insta:hover svg rect,
.atd-ust-insta:hover svg circle {
	stroke: #FFFFFF;
}

.atd-ust-insta:hover svg circle[fill] {
	fill: #FFFFFF;
}

/* satır 49 */
.atd-ust-katalog {
	background: #1E3A78;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	padding: 13px 26px;
	border-radius: 4px;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

/* satır 49 — style-hover */
.atd-ust-katalog:hover {
	background: #16295A;
	color: #FFFFFF;
}

/* satır 49, 70, 71, 91 — ikon kabı (yazı tipi `.atd-ms` sınıfından gelir) */
.atd-ust-ikon {
	font-size: 18px;
	vertical-align: -4px;
	margin-right: 8px;
}


/* --------------------------------------------------------------------------
   5) Mobil menü düğmesi ve paneli — prototip satır 52-74
   -------------------------------------------------------------------------- */

/* satır 53 — masaüstünde basılmaz (prototipte `sc-if mobil`), burada gizlenir. */
/* Prototipte düz, çerçevesiz bir `☰` idi (satır 53: font-size 27px, padding 6px 2px).
   4 Eyl 2026 — site sahibi mobilde belirginleştirilmesini istedi: düğme artık
   çerçeveli bir kutu. Bilinçli sapma.

   Ölçüler temanın kendi dilinden alındı; yeni değer uydurulmadı:
     - 44x44px  : başlıktaki Instagram düğmesinin isabet alanıyla aynı sınıf
                  (o 42x42) ve WCAG dokunma hedefi eşiği.
     - #DDE4F0  : başlıktaki Instagram düğmesinin kenarlığıyla aynı token.
     - 5px yarıçap: mobil menüdeki Katalog/Proje Talebi düğmeleriyle aynı.
     - #16295A  : prototipteki düğme renginin kendisi (değişmedi).
   Düğme kendi başına 44x44 olduğu için eski `::after` isabet alanı gereksiz
   kaldı ve kaldırıldı. */
.atd-ust-menu-dugme {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid #DDE4F0;
	border-radius: 5px;
	background: #FFFFFF;
	font-size: 30px;
	color: #16295A;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	position: relative;
	flex: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* Açık durumda dolu görünür: kullanıcı menünün açık olduğunu düğmeden de anlar.
   Prototipte açık durumun tek göstergesi `☰`→`✕` değişimiydi (K23) — o da
   korunuyor; bu yalnız görsel pekiştirme. */
.atd-ust-menu-dugme:hover,
.atd-ust-menu-dugme--acik {
	background: #1E3A78;
	border-color: #1E3A78;
	color: #FFFFFF;
}

/* D7-17 (dokunma hedefi) artık düğmenin KENDİ kutusuyla karşılanıyor: 44×44.
   Eskiden düğme ≈31×39px olduğu için görsel çıktıyı bozmadan isabet alanını
   büyüten görünmez bir `::after` vardı; düğme gerçekten büyüdüğü için o sözde
   öge gereksiz kaldı ve kaldırıldı. */

/* D8-05 — `tema.js` bu sınıfları yazıyordu ama CSS karşılığı yoktu.
   `atd-ust-menu-acik` `<html>` ögesine yazılır: mobil menü açıkken arka planın
   kaymasını engeller (menü kendi içinde `overflow-y: auto` ile kayar).
   Not: `atd-ust-menu-dugme--acik` bir süre bilerek stilsiz bırakılmıştı —
   prototipte açık durumun tek göstergesi `☰`→`✕` değişimiydi (K23). 4 Eyl 2026
   düğme belirginleştirilirken (yukarıda) o sınıfa da dolu görünüm verildi;
   `☰`→`✕` değişimi olduğu gibi duruyor. */
.atd-ust-menu-acik body {
	overflow: hidden;
}

/* satır 57 — panel yalnız `menuAcik` iken basılır; burada sınıfla açılır. */
.atd-ust-mobil {
	display: none;
	position: fixed;
	top: 84px;
	left: 0;
	right: 0;
	bottom: 0;
	background: #FFFFFF;
	overflow-y: auto;
	z-index: 75;
	padding: 6px 6% 44px;
	box-sizing: border-box;
}

/* satır 58-63 */
.atd-ust-mobil-baglanti {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid #EDF1F8;
	font-size: 16.5px;
	font-weight: 700;
	color: #14213D;
}

/* satır 64 */
.atd-ust-mobil-baslik {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	color: #1E3A78;
	margin: 24px 0 6px;
}

/* satır 65 — mega menünün mobil karşılığı: 5 sütun yerine 2 sütunlu liste */
.atd-ust-mobil-izgara {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 22px;
}

/* satır 67 */
.atd-ust-mobil-kat {
	display: block;
	padding: 11px 0;
	border-bottom: 1px solid #F2F5FA;
	font-size: 14.5px;
	font-weight: 600;
	color: #41506B;
}

/* satır 70 */
.atd-ust-mobil-katalog {
	display: block;
	text-align: center;
	background: #1E3A78;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	padding: 16px;
	border-radius: 5px;
	margin-top: 26px;
}

/* satır 71 */
.atd-ust-mobil-talep {
	display: block;
	text-align: center;
	border: 1px solid #1E3A78;
	color: #1E3A78;
	font-size: 15px;
	font-weight: 700;
	padding: 15px;
	border-radius: 5px;
	margin-top: 12px;
}

/* satır 72 */
.atd-ust-mobil-insta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 1px solid #DDE4F0;
	color: #16295A;
	font-size: 15px;
	font-weight: 700;
	padding: 15px;
	border-radius: 5px;
	margin-top: 12px;
}


/* --------------------------------------------------------------------------
   6) Yan "Proje Talebi" paneli — prototip satır 76-97 + renderVals() 154-170
   --------------------------------------------------------------------------
   K27: prototipte `panelStyle` içinde `display:none` ve `visibility:hidden`
   vardır, `formAc` da hiç çağrılmaz; yani panel ölü koddur. Sözleşme bunu
   BİLİNÇLİ olarak çalışır hâle getirir. Tek değişiklik `display: none` yerine
   `display: block` yazılmasıdır; kapalı durumu artık `transform` ve
   `visibility` taşır. Diğer tüm değerler `panelStyle`ten birebirdir.
   -------------------------------------------------------------------------- */

/* renderVals() 154-159 — `railTab`. Prototipte konum değeri YOKTUR (öge hiç
   basılmaz). Sekmenin sol kenara yapışması için konumlandırma ayrı bir kaba
   verilir; böylece `railTab`in kendi bildirimleri bozulmadan kalır. */
/* Yapışkan "Proje Talebi" sekmesi.
   4 Eyl 2026 — site sahibinin isteğiyle dikey ortadan ALTA alındı.
   Ortadayken sayfa içeriğinin tam ortasını kesiyordu; altta hem daha az
   dikkat dağıtıyor hem de okuma alanının dışında kalıyor.
   `bottom` değeri sabit 24px: mobil yapışkan alt çubuk kaldırıldığı için
   (bkz. bu dosyada 7. bölüm) altta çakışacak bir öge kalmadı. */
.atd-ust-sekme-kap {
	position: fixed;
	left: 0;
	bottom: 24px;
	z-index: 92;
}

/* renderVals() 154-159 */
.atd-ust-sekme {
	display: block;
	border: none;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	background: #1E3A78;
	color: #FFFFFF;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	padding: 16px 11px;
	border-radius: 0 6px 6px 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

/* D8-03 — yan panel örtüsü.
   `tema.js:251` `[data-atd-talep-ortu]` arıyordu, hiçbir şablon basmıyordu →
   panel açıkken dışına tıklamak kapatmıyor, arkadaki sayfa tıklanabilir
   kalıyordu (kullanıcı yanlışlıkla bağlantıya basıp formu kaybedebilir).
   Renk, panelin kendi gölge rengiyle (`rgba(7, 13, 32, 0.35)`, renderVals()
   163-170) aynı tutuldu; yeni bir renk jetonu getirilmedi. Sekme 92, örtü 94,
   panel 96 sırasıyla katmanlanır. */
.atd-ust-ortu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 94;
	background: rgba(7, 13, 32, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s;
}

.atd-ust-ortu--acik {
	opacity: 1;
	visibility: visible;
}

/* renderVals() 163-170 — kapalı durum */
.atd-ust-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(380px, 92vw);
	background: #FFFFFF;
	z-index: 96;
	padding: 26px 26px 34px;
	box-sizing: border-box;
	overflow-y: auto;
	box-shadow: 0 0 60px rgba(7, 13, 32, 0.35);
	transform: translateX(-105%);
	visibility: hidden;
	display: block;
	transition: transform .3s ease, visibility .3s;
}

/* K27 — açık durum */
.atd-ust-panel--acik {
	transform: translateX(0);
	visibility: visible;
}

/* satır 77 */
.atd-ust-panel-bas {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

/* satır 78 */
.atd-ust-panel-baslik {
	font-family: 'Playfair Display', serif;
	font-size: 25px;
	font-weight: 600;
	color: #14213D;
}

/* satır 79 */
.atd-ust-panel-kapat {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #DDE4F0;
	background: #FFFFFF;
	color: #16295A;
	cursor: pointer;
	font-family: 'Material Symbols Rounded';
	font-size: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* satır 81 */
.atd-ust-panel-metin {
	font-size: 14px;
	line-height: 1.6;
	color: #5B6B85;
	margin: 0 0 20px;
}

/* satır 82, 84, 86 */
.atd-ust-etiket {
	font-size: 13px;
	font-weight: 700;
	display: block;
	margin-bottom: 7px;
}

/* satır 83, 85 */
.atd-ust-girdi {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #DDE4F0;
	border-radius: 5px;
	padding: 13px 14px;
	font-size: 14.5px;
	font-family: 'Manrope', sans-serif;
	margin-bottom: 14px;
}

/* satır 87 */
.atd-ust-alan {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #DDE4F0;
	border-radius: 5px;
	padding: 13px 14px;
	font-size: 14.5px;
	font-family: 'Manrope', sans-serif;
	resize: vertical;
}

/* satır 83, 85, 87 — style-focus */
.atd-ust-girdi:focus,
.atd-ust-alan:focus {
	border-color: #1E3A78;
	outline: none;
}

/* D7-05 — prototipin `outline: none`u fare odağı içindir; klavye odağında
   halka GÖRÜNÜR kalmalıdır (K20, WCAG 2.4.7). `:focus-visible` yalnız klavye/
   yardımcı teknoloji odağında eşleştiği için prototipin fare görünümü birebir
   korunur. Renk marka mavisidir (#1E3A78, beyaz üzerinde 10.87:1). */
.atd-ust-girdi:focus-visible,
.atd-ust-alan:focus-visible {
	outline: 2px solid #1E3A78;
	outline-offset: 2px;
}

/* D7-19 — bal küpü. `atd_form_nonce_alani()` alanı `<p hidden>` ile basar;
   UA kuralı `[hidden] { display: none }` ve bazı botlar `display: none`
   alanları atlar (K16'nın spam gerekçesi boşa çıkar). Ekranda görünmeden
   konumlandırmayla gizlenir; `aria-hidden="true"` + `tabindex="-1"` işlevin
   kendi çıktısında zaten var, erişilebilirlik ağacına girmez. */
.atd-ust-panel form > p[hidden]:not([class]) {
	display: block;
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* satır 89 */
.atd-ust-hata {
	color: #B0433A;
	font-size: 13px;
	font-weight: 600;
	margin-top: 10px;
}

/* D2-02 / D5-01 — sunucu durumu (PRG dönüşü) için başarı bloğu.
   Prototipte karşılığı yoktur; K16'nın `?gonderildi=1` akışını görünür kılmak
   zorunludur. Ölçüler `.atd-ust-hata`dan, renk K3 paletindeki marka mavisinden
   (#1E3A78, beyaz üzerinde 10.87:1) alındı — yeni jeton eklenmedi. */
.atd-ust-basari {
	color: #1E3A78;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 10px;
}

/* D2-01 — reCAPTCHA kutusu; yalnız panelde iki anahtar da doluysa basılır.
   Dikey ritim, girdilerin `margin-bottom: 14px` değeriyle aynı tutuldu.
   Google'ın 304px'lik iframe'i dar panelde (min(380px, 92vw)) taşmasın diye
   yatay kaydırma verilir; başka görsel değer eklenmez. */
.atd-ust-recaptcha {
	margin-top: 14px;
	max-width: 100%;
	overflow-x: auto;
}

/* D8-05 — `tema.js` gönderim başlayınca `atd-ust-form--gonderiliyor` yazıyordu,
   CSS karşılığı yoktu; kullanıcı hiçbir "gönderiliyor" geri bildirimi görmüyordu. */
.atd-ust-form--gonderiliyor .atd-ust-gonder {
	opacity: .6;
	cursor: progress;
}

/* satır 91 */
.atd-ust-gonder {
	width: 100%;
	margin-top: 18px;
	background: #1E3A78;
	color: #FFFFFF;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	font-family: 'Manrope', sans-serif;
	padding: 15px;
	border-radius: 5px;
}

/* satır 91 — style-hover */
.atd-ust-gonder:hover {
	background: #16295A;
}

/* satır 92 */
.atd-ust-panel-iletisim {
	border-top: 1px solid #EDF1F8;
	margin-top: 22px;
	padding-top: 18px;
	display: grid;
	gap: 9px;
	font-size: 14px;
}

/* satır 93, 94 */
.atd-ust-panel-tel {
	font-weight: 700;
}

/* satır 95 */
.atd-ust-panel-eposta {
	font-weight: 600;
}

/* satır 93, 94, 95 — ikon kabı */
.atd-ust-ikon-orta {
	font-size: 17px;
	vertical-align: -3px;
	margin-right: 8px;
}


/* --------------------------------------------------------------------------
   7) Mobil yapışkan alt çubuk — KALDIRILDI (4 Eyl 2026, site sahibinin isteği)
   --------------------------------------------------------------------------
   Prototip satır 98-103'te "Hemen Ara" / "WhatsApp" ikilisi vardı. Bilinçli
   sapmadır. Kaldırılan kurallar: `.atd-ust-alt-cubuk`, `.atd-ust-alt-ara`,
   `.atd-ust-alt-wa`, `.atd-ust-ikon-cubuk`.

   Birlikte giden `body { padding-bottom: 56px }` de `temel.css`ten kaldırıldı;
   yalnız bu çubuğun örttüğü içeriği kurtarmak içindi (K5.3) ve çubuk gidince
   sayfa altında ölü boşluk olarak kalırdı.

   Telefon erişimi mobil menüde, yan panelde ve alt bilgide duruyor.
   WhatsApp ise siteden tamamen kalktı — bu çubuk tek giriş noktasıydı.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   8) Dil değiştirici — D7 (BİLİNÇLİ SAPMA, prototipte karşılığı yok)
   --------------------------------------------------------------------------
   `SiteHeader.dc.html` tek dillidir; TR | EN seçici prototipte YOKTUR. D7 bunu
   bilinçli bir sapma olarak tanımlar ve görsel dilin "temanın kendisinden"
   türetilmesini ister — aşağıdaki hiçbir değer uydurulmadı, hepsi K3 paletinden
   ve üst çubuğun kendi ölçülerinden alındı:

     #5B6B85  pasif dil  — `.atd-ust-mega-desc` ile aynı ikincil metin jetonu
                           (beyaz üzerinde 5.41:1, WCAG AA metin eşiğinin üstü)
     #1E3A78  aktif dil  — `.atd-ust-baglanti--aktif` ile aynı marka mavisi
     inset 0 -2px 0      — aktif menü bağlantısının alt çizgisinin AYNISI
                           (renderVals() 119), böylece "aktif" kavramı üst
                           çubukta tek bir görsel dille anlatılır
     #D9DFEC  ayraç      — K3 `--atd-cizgi-5`
     #DDE4F0  kenarlık   — mobil düğmelerin (`.atd-ust-mobil-insta`) kenarlığı
     5px yarıçap         — mobil Katalog/Proje Talebi düğmeleriyle aynı

   İşaretlemeyi `atd_dil_degistirici()` üretir; sınıf adları oradan birebir
   alınmıştır, yenisi uydurulmamıştır. Aktif dil bir `<span>`, pasif dil bir
   `<a>`dır — bu yüzden imleç/hover kuralları yalnız `a` ile nitelenir.
   -------------------------------------------------------------------------- */

/* Masaüstü: Katalog düğmesinin solunda, eylem kutusunun içinde. */
.atd-ust-dil {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.atd-ust-dil-oge {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: #5B6B85;
	padding: 6px 2px;
	white-space: nowrap;
}

a.atd-ust-dil-oge:hover {
	color: #1E3A78;
}

a.atd-ust-dil-oge:focus-visible {
	outline: 2px solid #1E3A78;
	outline-offset: 2px;
	border-radius: 3px;
}

/* Aktif dil vurgulu; `<span>` olduğu için tıklanamaz görünür (D7). */
.atd-ust-dil-oge--aktif {
	color: #1E3A78;
	font-weight: 800;
	box-shadow: inset 0 -2px 0 #1E3A78;
}

.atd-ust-dil-ayrac {
	color: #D9DFEC;
	font-size: 12px;
	line-height: 1;
}

/* Mobil menüdeki kopya — panelin en üstünde, sağa yaslı.
   Dokunma hedefi 44×44'e çıkarılır (menü düğmesiyle aynı ölçü); ayraç
   düğmeleşen ögelerin arasında anlamsız kaldığı için gizlenir (zaten
   `aria-hidden`dır, erişilebilirlik ağacında karşılığı yoktur). */
.atd-ust-mobil-dil {
	display: flex;
	justify-content: flex-end;
	padding: 10px 0 4px;
}

.atd-ust-mobil-dil .atd-ust-dil {
	gap: 10px;
}

.atd-ust-mobil-dil .atd-ust-dil-oge {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid #DDE4F0;
	border-radius: 5px;
	font-size: 14px;
}

.atd-ust-mobil-dil .atd-ust-dil-oge--aktif {
	background: #1E3A78;
	border-color: #1E3A78;
	color: #FFFFFF;
	box-shadow: none;
}

.atd-ust-mobil-dil .atd-ust-dil-ayrac {
	display: none;
}


/* --------------------------------------------------------------------------
   9) Kırılım — prototip `mobil = this.state.w < 1000` (renderVals() 117)
   K5: `w < 1000` → `@media (max-width: 999px)`
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   7b) ARA KIRILIM — 1150–1399 px: masaüstü menü SIKIŞTIRILIR
   --------------------------------------------------------------------------
   PROTOTİPTEN BİLİNÇLİ SAPMA (4 Eyl 2026). Prototip yalnız 1000 px'lik tek bir
   kırılım tanımlıyordu ve 1440 px'te tasarlanmıştı; arası ÖLÇÜLMEMİŞTİ.

   Ölçüm (gerçek Chrome, yatay taşma = scrollWidth − innerWidth):
     genişlik | TR taşma | EN taşma
       1600   |    0 px  |    0 px
       1440   |    0 px  |    0 px
       1366   |   40 px  |   71 px
       1280   |  123 px  |  154 px
       1100   |  296 px  |  326 px
       1024   |  368 px  |  399 px
   Yani 1366 ve 1280 gibi ÇOK YAYGIN dizüstü genişliklerinde başlık çubuğu
   sayfayı yatay kaydırtıyordu. Katalog düğmesi ekranın dışına taşıyordu.
   İngilizce daha uzun etiketler taşıdığı için (Catalogue, How We Work,
   Furniture Manufacturing) 30 px daha kötüydü.

   Çözüm iki katmanlı:
   1. Bu bantta logo küçülür, menü boşluğu ve yazı ölçüsü daralır — masaüstü
      gezinme korunur.
   2. 1149 px altında mobil menüye geçilir (aşağıdaki blok). Sıkıştırma orada
      yetmiyordu: 1024 px'te sığdırmak için menüyü okunamayacak kadar küçültmek
      gerekirdi.
   -------------------------------------------------------------------------- */
@media (min-width: 1150px) and (max-width: 1399px) {

	.atd-ust-logo__gorsel {
		height: 48px;
	}

	.atd-ust-nav {
		gap: 12px;
	}

	.atd-ust-baglanti {
		font-size: 14px;
	}

	.atd-ust-aksiyon {
		gap: 8px;
	}

	.atd-ust-katalog {
		padding: 12px 18px;
	}

	.atd-ust-cubuk {
		padding: 0 2.5%;
		gap: 12px;
	}
}


/* Mobil kırılım: prototipte 1000 px idi, 1150 px'e ÇEKİLDİ (yukarıdaki ölçüm).
   1000–1149 arası masaüstü menü hiçbir sıkıştırmayla sığmıyor. */
@media (max-width: 1149px) {

	/* `sc-if masaustu` bloğu basılmaz: gezinme ve eylem kutusu gider. */
	.atd-ust-nav,
	.atd-ust-aksiyon {
		display: none;
	}

	/* `sc-if mobil` bloğu basılır: menü düğmesi gelir.
	   `flex` — düğme artık 44×44 bir kutu ve `☰` glifini ortalıyor. */
	.atd-ust-menu-dugme {
		display: flex;
	}

	/* 4 Eyl 2026 — site sahibinin isteği: mobilde logo bir tık küçülsün.
	   64px → 48px. Dar ekranda logo çubuğun neredeyse tamamını kaplıyordu ve
	   belirginleşen menü düğmesiyle birlikte çubuk sıkışık görünüyordu.
	   Masaüstünde prototipin 64px değeri AYNEN duruyor (satır 18). */
	.atd-ust-logo__gorsel {
		height: 48px;
	}

	/* Mobil menü yalnız bu kırılımda açılabilir (`menuAcik = mobil && menu`). */
	.atd-ust-mobil--acik {
		display: block;
	}

	/* `railTab.display` mobilde "none" (renderVals() 155). */
	.atd-ust-sekme-kap {
		display: none;
	}
}